[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
add deploy just docs, add slider w number
+173
-89
+61
.github/workflows/deploy_all.yml
+61
.github/workflows/deploy_all.yml
···
1
+
name: Deploy to GitHub Pages
2
+
3
+
on:
4
+
push:
5
+
branches:
6
+
- main
7
+
8
+
jobs:
9
+
build_site:
10
+
runs-on: ubuntu-latest
11
+
12
+
permissions:
13
+
contents: read
14
+
id-token: write
15
+
16
+
steps:
17
+
- name: Checkout
18
+
uses: actions/checkout@v4
19
+
20
+
- name: Setup Node.js
21
+
uses: actions/setup-node@v4
22
+
with:
23
+
node-version: 22
24
+
registry-url: 'https://registry.npmjs.org'
25
+
cache: npm
26
+
27
+
- name: Install dependencies
28
+
run: npm ci
29
+
30
+
- name: build
31
+
env:
32
+
BASE_PATH: '/${{ github.event.repository.name }}'
33
+
run: |
34
+
npm run build
35
+
36
+
- name: Upload Artifacts
37
+
uses: actions/upload-pages-artifact@v3
38
+
with:
39
+
path: 'build/'
40
+
41
+
- name: Publish npm package
42
+
env:
43
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
44
+
run: npm publish --provenance --access public
45
+
46
+
deploy:
47
+
needs: build_site
48
+
runs-on: ubuntu-latest
49
+
50
+
permissions:
51
+
pages: write
52
+
id-token: write
53
+
54
+
environment:
55
+
name: github-pages
56
+
url: ${{ steps.deployment.outputs.page_url }}
57
+
58
+
steps:
59
+
- name: Deploy
60
+
id: deployment
61
+
uses: actions/deploy-pages@v4
+50
.github/workflows/deploy_docs.yml
+50
.github/workflows/deploy_docs.yml
···
1
+
name: Deploy to GitHub Pages
2
+
3
+
on:
4
+
push:
5
+
branches:
6
+
- deploy-docs
7
+
8
+
jobs:
9
+
build_site:
10
+
runs-on: ubuntu-latest
11
+
steps:
12
+
- name: Checkout
13
+
uses: actions/checkout@v4
14
+
15
+
- name: Setup Node.js
16
+
uses: actions/setup-node@v4
17
+
with:
18
+
node-version: 22
19
+
cache: npm
20
+
21
+
- name: Install dependencies
22
+
run: npm ci
23
+
24
+
- name: build
25
+
env:
26
+
BASE_PATH: '/${{ github.event.repository.name }}'
27
+
run: |
28
+
npm run build
29
+
30
+
- name: Upload Artifacts
31
+
uses: actions/upload-pages-artifact@v3
32
+
with:
33
+
path: 'build/'
34
+
35
+
deploy:
36
+
needs: build_site
37
+
runs-on: ubuntu-latest
38
+
39
+
permissions:
40
+
pages: write
41
+
id-token: write
42
+
43
+
environment:
44
+
name: github-pages
45
+
url: ${{ steps.deployment.outputs.page_url }}
46
+
47
+
steps:
48
+
- name: Deploy
49
+
id: deployment
50
+
uses: actions/deploy-pages@v4
-61
.github/workflows/deploy_gh_pages.yml
-61
.github/workflows/deploy_gh_pages.yml
···
1
-
name: Deploy to GitHub Pages
2
-
3
-
on:
4
-
push:
5
-
branches:
6
-
- main
7
-
8
-
jobs:
9
-
build_site:
10
-
runs-on: ubuntu-latest
11
-
12
-
permissions:
13
-
contents: read
14
-
id-token: write
15
-
16
-
steps:
17
-
- name: Checkout
18
-
uses: actions/checkout@v4
19
-
20
-
- name: Setup Node.js
21
-
uses: actions/setup-node@v4
22
-
with:
23
-
node-version: 22
24
-
registry-url: 'https://registry.npmjs.org'
25
-
cache: npm
26
-
27
-
- name: Install dependencies
28
-
run: npm ci
29
-
30
-
- name: build
31
-
env:
32
-
BASE_PATH: '/${{ github.event.repository.name }}'
33
-
run: |
34
-
npm run build
35
-
36
-
- name: Upload Artifacts
37
-
uses: actions/upload-pages-artifact@v3
38
-
with:
39
-
path: 'build/'
40
-
41
-
- name: Publish npm package
42
-
env:
43
-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
44
-
run: npm publish --provenance --access public
45
-
46
-
deploy:
47
-
needs: build_site
48
-
runs-on: ubuntu-latest
49
-
50
-
permissions:
51
-
pages: write
52
-
id-token: write
53
-
54
-
environment:
55
-
name: github-pages
56
-
url: ${{ steps.deployment.outputs.page_url }}
57
-
58
-
steps:
59
-
- name: Deploy
60
-
id: deployment
61
-
uses: actions/deploy-pages@v4
+1
src/lib/index.ts
+1
src/lib/index.ts
···
20
20
export { default as Prose } from '$lib/components/base/prose/Prose.svelte';
21
21
export { default as ScrollArea } from '$lib/components/base/scroll-area/ScrollArea.svelte';
22
22
export { Slider } from '$lib/components/base/slider';
23
+
export { default as SliderNumber } from '$lib/components/base/slider/SliderNumber.svelte';
23
24
export { Toaster } from '$lib/components/base/sonner/';
24
25
export { toast } from 'svelte-sonner';
25
26
export { Switch } from '$lib/components/base/switch/';
-7
src/routes/components/+layout.svelte
-7
src/routes/components/+layout.svelte
···
2
2
import Navbar from '$docs/site-components/Navbar.svelte';
3
3
import Sidebar from '$docs/site-components/Sidebar.svelte';
4
4
import Container from '$docs/site-components/Container.svelte';
5
-
import { Button } from '$lib';
6
5
7
6
let { children } = $props();
8
7
</script>
9
-
10
-
11
-
<Button class="fixed -top-96 left-4 z-[1000] focus-visible:top-8" href="#content">
12
-
skip to content
13
-
</Button>
14
-
15
8
16
9
<Navbar hasSidebar showLogo={false} />
17
10
<Sidebar />
-7
src/routes/docs/+layout.svelte
-7
src/routes/docs/+layout.svelte
···
7
7
let { children } = $props();
8
8
</script>
9
9
10
-
<Button class="fixed bottom-4 right-4 z-[1000]" onclick={() => {
11
-
// go to id content
12
-
window.location.href = '#content';
13
-
}}>
14
-
skip to content
15
-
</Button>
16
-
17
10
<Navbar hasSidebar showLogo={false} />
18
11
<Sidebar />
19
12
+28
src/lib/components/base/slider/SliderNumber.svelte
+28
src/lib/components/base/slider/SliderNumber.svelte
···
1
+
<script lang="ts">
2
+
import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
3
+
import { Slider } from '.';
4
+
import { cn } from '$lib/utils';
5
+
import NumberFlow from '@number-flow/svelte';
6
+
7
+
let {
8
+
ref = $bindable(null),
9
+
value = $bindable(),
10
+
orientation = 'horizontal',
11
+
class: className,
12
+
tabindex = undefined,
13
+
type = 'single'
14
+
}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
15
+
</script>
16
+
17
+
<div class="flex items-center gap-6">
18
+
<Slider bind:value bind:ref {orientation} class={className} {tabindex} {type} />
19
+
20
+
<NumberFlow
21
+
{value}
22
+
locales="en-US"
23
+
format={{ useGrouping: false }}
24
+
aria-hidden="true"
25
+
class="pointer-events-none min-w-6 text-right text-lg font-semibold text-base-900 dark:text-base-100"
26
+
willChange
27
+
/>
28
+
</div>
+1
-1
src/lib/components/base/slider/index.ts
+1
-1
src/lib/components/base/slider/index.ts
+11
-5
src/lib/components/base/slider/slider.svelte
+11
-5
src/lib/components/base/slider/slider.svelte
···
9
9
class: className,
10
10
tabindex = undefined,
11
11
type = 'single',
12
-
...restProps
13
12
}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
14
13
</script>
15
14
···
22
21
bind:value={value as never}
23
22
{orientation}
24
23
class={cn(
25
-
"relative flex touch-none items-center select-none data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
24
+
"relative flex touch-none items-center select-none data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full",
25
+
"data-[orientation='vertical']:min-h-44 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
26
26
className
27
27
)}
28
28
{tabindex}
29
29
{type}
30
-
{...restProps}
31
30
>
32
31
{#snippet children({ thumbs })}
33
32
<span
34
33
data-orientation={orientation}
35
-
class="relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2"
34
+
class={[
35
+
"relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full",
36
+
"data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2"
37
+
]}
36
38
>
37
39
<div
38
40
class="bg-base-300/30 dark:bg-base-800 border-base-400/50 dark:border-base-700 absolute inset-0 rounded-full border"
···
45
47
{#each thumbs as thumb}
46
48
<SliderPrimitive.Thumb
47
49
index={thumb}
48
-
class="border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-400 block size-6 rounded-full border-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
50
+
class={[
51
+
'border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 focus-visible:outline-base-900',
52
+
'dark:focus-visible:outline-base-100 block size-6 rounded-full border-2 transition-colors focus-visible:outline-2 ',
53
+
'focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50'
54
+
]}
49
55
{tabindex}
50
56
/>
51
57
{/each}
+1
-1
src/routes/components/base/head/Head.md
+1
-1
src/routes/components/base/head/Head.md
+13
src/routes/components/base/slider/Example.svelte
+13
src/routes/components/base/slider/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Slider } from '$lib';
3
+
import SliderNumber from '$lib/components/base/slider/SliderNumber.svelte';
4
+
5
+
let value = $state(50);
6
+
7
+
let value2 = $state(42);
8
+
</script>
9
+
10
+
<Slider bind:value />
11
+
12
+
<h3>With Number</h3>
13
+
<SliderNumber bind:value={value2} />
+7
-7
src/routes/components/base/slider/Slider.md
+7
-7
src/routes/components/base/slider/Slider.md
···
1
1
<script lang="ts">
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Slider } from '$lib/components/base/slider';
4
-
5
-
let value = $state(50);
2
+
import SliderExample from './Example.svelte';
6
3
</script>
7
4
8
-
# Slider
5
+
# Sliders
9
6
10
7
## Example
11
8
12
-
<Slider bind:value />
9
+
<SliderExample />
13
10
14
11
## Usage
15
12
16
13
```svelte
17
14
<script>
18
-
import { Slider } from 'fuchs';
15
+
import { Slider, SliderNumber } from 'fuchs';
19
16
20
17
let value = $state(50);
21
18
</script>
22
19
23
20
<Slider bind:value min={0} max={100} />
21
+
22
+
<!-- With Number -->
23
+
<SliderNumber bind:value={value} />
24
24
```