[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 test version of toggle and toggle group
+327
-38
+1
-1
package.json
+1
-1
package.json
+1
-37
src/lib/index.ts
+1
-37
src/lib/index.ts
···
1
1
export { cn } from '$lib/utils';
2
2
3
3
// base components
4
-
export { Accordion, AccordionItem } from '$lib/components/base/accordion';
5
-
export { Alert, AlertDescription, AlertTitle } from '$lib/components/base/alert';
6
-
export { Avatar, AvatarGroup } from '$lib/components/base/avatar';
7
-
export { Badge } from '$lib/components/base/badge';
8
-
9
-
export { Button } from '$lib/components/base/button';
10
-
export { type ButtonProps } from '$lib/components/base/button/Button.svelte';
11
-
export { type ButtonSize, type ButtonVariant, buttonVariants } from '$lib/components/base/button/';
12
-
13
-
export { default as Box } from '$lib/components/base/box/Box.svelte';
14
-
export { default as ImageCard } from '$lib/components/base/card/ImageCard.svelte';
15
-
export { default as ChatBubble } from '$lib/components/base/chat-bubble/ChatBubble.svelte';
16
-
export { Checkbox } from '$lib/components/base/checkbox';
17
-
export { default as Head } from '$lib/components/base/head/Head.svelte';
18
-
export { default as Heading } from '$lib/components/base/heading/Heading.svelte';
19
-
export { default as Image } from '$lib/components/base/image/Image.svelte';
20
-
export { type ImageProps } from '$lib/components/base/image/Image.svelte';
21
-
export { default as ImageContainer } from '$lib/components/base/image-container/ImageContainer.svelte';
22
-
export { Input } from '$lib/components/base/input/';
23
-
export { Label } from '$lib/components/base/label/';
24
-
export { default as Modal } from '$lib/components/base/modal/Modal.svelte';
25
-
export { default as NumberInput } from '$lib/components/base/number-input/NumberInput.svelte';
26
-
export { default as Prose } from '$lib/components/base/prose/Prose.svelte';
27
-
export { default as ScrollArea } from '$lib/components/base/scroll-area/ScrollArea.svelte';
28
-
export { Slider } from '$lib/components/base/slider';
29
-
export { Select } from '$lib/components/base/select/';
30
-
export { default as SliderNumber } from '$lib/components/base/slider/SliderNumber.svelte';
31
-
export { Toaster } from '$lib/components/base/sonner/';
32
-
export { toast } from 'svelte-sonner';
33
-
export { Switch } from '$lib/components/base/switch/';
34
-
export { Paragraph } from '$lib/components/base/paragraph/';
35
-
export { Textarea } from '$lib/components/base/textarea';
36
-
export { Tooltip } from '$lib/components/base/tooltip';
37
-
export { default as Popover } from '$lib/components/base/popover/Popover.svelte';
38
-
export { default as Subheading } from '$lib/components/base/heading/Subheading.svelte';
39
-
40
-
export { default as AddCopyCodeButtons } from '$lib/components/base/copy-code-button/AddCopyCodeButtons.svelte';
4
+
export * from '$lib/components/base';
41
5
42
6
// colors components
43
7
export { default as ColorGradientPicker } from '$lib/components/colors/color-gradient-picker/ColorGradientPicker.svelte';
+40
src/lib/components/base/index.ts
+40
src/lib/components/base/index.ts
···
1
+
export { Accordion, AccordionItem } from '$lib/components/base/accordion';
2
+
export { Alert, AlertDescription, AlertTitle } from '$lib/components/base/alert';
3
+
export { Avatar, AvatarGroup } from '$lib/components/base/avatar';
4
+
export { Badge } from '$lib/components/base/badge';
5
+
6
+
export { Button } from '$lib/components/base/button';
7
+
export { type ButtonProps } from '$lib/components/base/button/Button.svelte';
8
+
export { type ButtonSize, type ButtonVariant, buttonVariants } from '$lib/components/base/button/';
9
+
10
+
export { default as Box } from '$lib/components/base/box/Box.svelte';
11
+
export { default as ImageCard } from '$lib/components/base/card/ImageCard.svelte';
12
+
export { default as ChatBubble } from '$lib/components/base/chat-bubble/ChatBubble.svelte';
13
+
export { Checkbox } from '$lib/components/base/checkbox';
14
+
export { default as Head } from '$lib/components/base/head/Head.svelte';
15
+
export { default as Heading } from '$lib/components/base/heading/Heading.svelte';
16
+
export { default as Image } from '$lib/components/base/image/Image.svelte';
17
+
export { type ImageProps } from '$lib/components/base/image/Image.svelte';
18
+
export { default as ImageContainer } from '$lib/components/base/image-container/ImageContainer.svelte';
19
+
export { Input } from '$lib/components/base/input/';
20
+
export { Label } from '$lib/components/base/label/';
21
+
export { default as Modal } from '$lib/components/base/modal/Modal.svelte';
22
+
export { default as NumberInput } from '$lib/components/base/number-input/NumberInput.svelte';
23
+
export { default as Prose } from '$lib/components/base/prose/Prose.svelte';
24
+
export { default as ScrollArea } from '$lib/components/base/scroll-area/ScrollArea.svelte';
25
+
export { Slider } from '$lib/components/base/slider';
26
+
export { Select } from '$lib/components/base/select/';
27
+
export { default as SliderNumber } from '$lib/components/base/slider/SliderNumber.svelte';
28
+
export { Toaster } from '$lib/components/base/sonner/';
29
+
export { toast } from 'svelte-sonner';
30
+
export { Switch } from '$lib/components/base/switch/';
31
+
export { Paragraph } from '$lib/components/base/paragraph/';
32
+
export { Textarea } from '$lib/components/base/textarea';
33
+
export { Tooltip } from '$lib/components/base/tooltip';
34
+
export { default as Popover } from '$lib/components/base/popover/Popover.svelte';
35
+
export { default as Subheading } from '$lib/components/base/heading/Subheading.svelte';
36
+
37
+
export { default as AddCopyCodeButtons } from '$lib/components/base/copy-code-button/AddCopyCodeButtons.svelte';
38
+
39
+
export { Toggle } from '$lib/components/base/toggle';
40
+
export { ToggleGroup, ToggleGroupItem } from '$lib/components/base/toggle-group';
+10
src/lib/components/base/toggle-group/index.ts
+10
src/lib/components/base/toggle-group/index.ts
+30
src/lib/components/base/toggle-group/toggle-group-item.svelte
+30
src/lib/components/base/toggle-group/toggle-group-item.svelte
···
1
+
<script lang="ts">
2
+
import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
3
+
import { getToggleGroupCtx } from "./toggle-group.svelte";
4
+
import { cn } from "$lib";
5
+
import { type ToggleVariants, toggleVariants } from "../toggle/";
6
+
7
+
let {
8
+
ref = $bindable(null),
9
+
value = $bindable(),
10
+
class: className,
11
+
size,
12
+
variant,
13
+
...restProps
14
+
}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
15
+
16
+
const ctx = getToggleGroupCtx();
17
+
</script>
18
+
19
+
<ToggleGroupPrimitive.Item
20
+
bind:ref
21
+
class={cn(
22
+
toggleVariants({
23
+
variant: ctx.variant || variant,
24
+
size: ctx.size || size,
25
+
}),
26
+
className
27
+
)}
28
+
{value}
29
+
{...restProps}
30
+
/>
+41
src/lib/components/base/toggle-group/toggle-group.svelte
+41
src/lib/components/base/toggle-group/toggle-group.svelte
···
1
+
<script lang="ts" module>
2
+
import { getContext, setContext } from "svelte";
3
+
import type { ToggleVariants } from "../toggle/";
4
+
export function setToggleGroupCtx(props: ToggleVariants) {
5
+
setContext("toggleGroup", props);
6
+
}
7
+
8
+
export function getToggleGroupCtx() {
9
+
return getContext<ToggleVariants>("toggleGroup");
10
+
}
11
+
</script>
12
+
13
+
<script lang="ts">
14
+
import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
15
+
import { cn } from "$lib";
16
+
17
+
let {
18
+
ref = $bindable(null),
19
+
value = $bindable(),
20
+
class: className,
21
+
size = "default",
22
+
variant = "default",
23
+
...restProps
24
+
}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
25
+
26
+
setToggleGroupCtx({
27
+
variant,
28
+
size,
29
+
});
30
+
</script>
31
+
32
+
<!--
33
+
Discriminated Unions + Destructing (required for bindable) do not
34
+
get along, so we shut typescript up by casting `value` to `never`.
35
+
-->
36
+
<ToggleGroupPrimitive.Root
37
+
bind:value={value as never}
38
+
bind:ref
39
+
class={cn("flex items-center justify-center gap-1", className)}
40
+
{...restProps}
41
+
/>
+13
src/lib/components/base/toggle/index.ts
+13
src/lib/components/base/toggle/index.ts
+49
src/lib/components/base/toggle/toggle.svelte
+49
src/lib/components/base/toggle/toggle.svelte
···
1
+
<script lang="ts" module>
2
+
import { type VariantProps, tv } from 'tailwind-variants';
3
+
4
+
export const toggleVariants = tv({
5
+
base: 'hover:bg-base-200/50 dark:hover:bg-base-800/50 dark:hover:text-base-50 hover:text-base-950 data-[state=on]:bg-accent-400/40 dark:data-[state=on]:bg-accent-500/15 dark:data-[state=on]:text-accent-300 data-[state=on]:text-accent-950 inline-flex items-center justify-center gap-2 rounded-2xl text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
6
+
variants: {
7
+
variant: {
8
+
default: ''
9
+
},
10
+
size: {
11
+
default: 'h-10 min-w-10 px-3',
12
+
sm: 'h-9 min-w-9 px-2.5',
13
+
lg: 'h-11 min-w-11 px-5'
14
+
}
15
+
},
16
+
defaultVariants: {
17
+
variant: 'default',
18
+
size: 'default'
19
+
}
20
+
});
21
+
22
+
export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
23
+
export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
24
+
export type ToggleVariants = VariantProps<typeof toggleVariants>;
25
+
</script>
26
+
27
+
<script lang="ts">
28
+
import { Toggle as TogglePrimitive } from 'bits-ui';
29
+
import { cn } from '$lib';
30
+
31
+
let {
32
+
ref = $bindable(null),
33
+
pressed = $bindable(false),
34
+
class: className,
35
+
size = 'default',
36
+
variant = 'default',
37
+
...restProps
38
+
}: TogglePrimitive.RootProps & {
39
+
variant?: ToggleVariant;
40
+
size?: ToggleSize;
41
+
} = $props();
42
+
</script>
43
+
44
+
<TogglePrimitive.Root
45
+
bind:ref
46
+
bind:pressed
47
+
class={cn(toggleVariants({ variant, size }), className)}
48
+
{...restProps}
49
+
/>
+8
src/routes/(main)/components/base/toggle-group/+page.svelte
+8
src/routes/(main)/components/base/toggle-group/+page.svelte
+52
src/routes/(main)/components/base/toggle-group/Example.svelte
+52
src/routes/(main)/components/base/toggle-group/Example.svelte
···
1
+
<script>
2
+
import { ToggleGroup, ToggleGroupItem } from '$lib';
3
+
</script>
4
+
5
+
<div class="flex items-center gap-2">
6
+
<ToggleGroup type="single">
7
+
<ToggleGroupItem value="1">1</ToggleGroupItem>
8
+
<ToggleGroupItem value="2">2</ToggleGroupItem>
9
+
<ToggleGroupItem value="3">3</ToggleGroupItem>
10
+
</ToggleGroup>
11
+
12
+
<ToggleGroup type="single">
13
+
<ToggleGroupItem value="1"
14
+
><svg
15
+
xmlns="http://www.w3.org/2000/svg"
16
+
viewBox="0 0 24 24"
17
+
fill="currentColor"
18
+
class="size-6"
19
+
>
20
+
<path
21
+
d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
22
+
/>
23
+
</svg>
24
+
</ToggleGroupItem>
25
+
<ToggleGroupItem value="2"
26
+
><svg
27
+
xmlns="http://www.w3.org/2000/svg"
28
+
viewBox="0 0 24 24"
29
+
fill="currentColor"
30
+
class="size-6"
31
+
>
32
+
<path
33
+
d="M12 1.5a.75.75 0 0 1 .75.75V7.5h-1.5V2.25A.75.75 0 0 1 12 1.5ZM11.25 7.5v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V7.5h3.75a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.75Z"
34
+
/>
35
+
</svg>
36
+
</ToggleGroupItem>
37
+
<ToggleGroupItem value="3"
38
+
><svg
39
+
xmlns="http://www.w3.org/2000/svg"
40
+
viewBox="0 0 24 24"
41
+
fill="currentColor"
42
+
class="size-6"
43
+
>
44
+
<path
45
+
fill-rule="evenodd"
46
+
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
47
+
clip-rule="evenodd"
48
+
/>
49
+
</svg>
50
+
</ToggleGroupItem>
51
+
</ToggleGroup>
52
+
</div>
+19
src/routes/(main)/components/base/toggle-group/ToggleGroup.md
+19
src/routes/(main)/components/base/toggle-group/ToggleGroup.md
+8
src/routes/(main)/components/base/toggle/+page.svelte
+8
src/routes/(main)/components/base/toggle/+page.svelte
+36
src/routes/(main)/components/base/toggle/Example.svelte
+36
src/routes/(main)/components/base/toggle/Example.svelte
···
1
+
<script>
2
+
import { Toggle } from '$lib';
3
+
</script>
4
+
5
+
<div class="flex items-center gap-2">
6
+
<Toggle>Toggle</Toggle>
7
+
8
+
<Toggle
9
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
10
+
<path
11
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
12
+
/>
13
+
<path
14
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
15
+
/>
16
+
<path
17
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
18
+
/>
19
+
</svg>
20
+
</Toggle>
21
+
22
+
<Toggle
23
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
24
+
<path
25
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
26
+
/>
27
+
<path
28
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
29
+
/>
30
+
<path
31
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
32
+
/>
33
+
</svg>
34
+
Toggle
35
+
</Toggle>
36
+
</div>
+19
src/routes/(main)/components/base/toggle/Toggle.md
+19
src/routes/(main)/components/base/toggle/Toggle.md