@kayord/ui 2.0.11 → 2.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/badge/badge.svelte +1 -1
- package/dist/components/ui/badge/badge.svelte.d.ts +2 -2
- package/dist/components/ui/button/button.svelte +5 -5
- package/dist/components/ui/button/button.svelte.d.ts +2 -2
- package/dist/components/ui/button-group/button-group-text.svelte +1 -1
- package/dist/components/ui/chart/chart-container.svelte +1 -1
- package/dist/components/ui/field/field.svelte +2 -2
- package/dist/components/ui/input-group/input-group-addon.svelte +3 -3
- package/dist/components/ui/input-group/input-group-addon.svelte.d.ts +2 -2
- package/dist/components/ui/input-otp/input-otp-separator.svelte +2 -2
- package/dist/components/ui/item/item.svelte +1 -1
- package/dist/components/ui/item/item.svelte.d.ts +2 -2
- package/dist/components/ui/navigation-menu/navigation-menu-content.svelte +1 -1
- package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte +1 -1
- package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte.d.ts +1 -1
- package/dist/components/ui/pagination/index.d.ts +7 -1
- package/dist/components/ui/pagination/index.js +8 -2
- package/dist/components/ui/pagination/pagination-next.svelte +25 -0
- package/dist/components/ui/pagination/pagination-next.svelte.d.ts +4 -0
- package/dist/components/ui/pagination/pagination-previous.svelte +25 -0
- package/dist/components/ui/pagination/pagination-previous.svelte.d.ts +4 -0
- package/dist/components/ui/sidebar/sidebar-group-action.svelte +1 -1
- package/dist/components/ui/sidebar/sidebar-group-label.svelte +1 -1
- package/dist/components/ui/sidebar/sidebar-menu-action.svelte +1 -1
- package/dist/components/ui/sidebar/sidebar-menu-button.svelte +2 -2
- package/dist/components/ui/sidebar/sidebar-menu-button.svelte.d.ts +2 -2
- package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +1 -1
- package/dist/components/ui/slider/slider.svelte +1 -1
- package/dist/components/ui/sonner/sonner.svelte +22 -1
- package/dist/components/ui/toggle/toggle.svelte +2 -2
- package/dist/components/ui/toggle/toggle.svelte.d.ts +2 -2
- package/dist/components/ui/toggle-group/toggle-group-item.svelte +2 -1
- package/dist/components/ui/toggle-group/toggle-group.svelte +20 -5
- package/dist/components/ui/toggle-group/toggle-group.svelte.d.ts +11 -4
- package/dist/components/ui/tooltip/tooltip-content.svelte +1 -1
- package/package.json +16 -16
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { type VariantProps, tv } from "tailwind-variants";
|
|
3
3
|
|
|
4
4
|
export const badgeVariants = tv({
|
|
5
|
-
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden
|
|
5
|
+
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
|
|
@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
6
6
|
destructive: string;
|
|
7
7
|
outline: string;
|
|
8
8
|
};
|
|
9
|
-
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden
|
|
9
|
+
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
|
|
10
10
|
variant: {
|
|
11
11
|
default: string;
|
|
12
12
|
secondary: string;
|
|
@@ -20,7 +20,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
20
20
|
destructive: string;
|
|
21
21
|
outline: string;
|
|
22
22
|
};
|
|
23
|
-
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden
|
|
23
|
+
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
|
|
24
24
|
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
|
|
25
25
|
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
26
26
|
import { type WithElementRef } from "../../../utils.js";
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
import { type VariantProps, tv } from "tailwind-variants";
|
|
5
5
|
|
|
6
6
|
export const buttonVariants = tv({
|
|
7
|
-
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2
|
|
7
|
+
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
10
|
-
default: "bg-primary text-primary-foreground
|
|
10
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
|
|
11
11
|
destructive:
|
|
12
|
-
"bg-destructive
|
|
12
|
+
"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
|
|
13
13
|
outline:
|
|
14
|
-
"bg-background
|
|
15
|
-
secondary: "bg-secondary text-secondary-foreground
|
|
14
|
+
"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
|
|
15
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
|
|
16
16
|
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
17
17
|
link: "text-primary underline-offset-4 hover:underline",
|
|
18
18
|
},
|
|
@@ -18,7 +18,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
18
18
|
"icon-sm": string;
|
|
19
19
|
"icon-lg": string;
|
|
20
20
|
};
|
|
21
|
-
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2
|
|
21
|
+
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
22
22
|
variant: {
|
|
23
23
|
default: string;
|
|
24
24
|
destructive: string;
|
|
@@ -52,7 +52,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
52
52
|
"icon-sm": string;
|
|
53
53
|
"icon-lg": string;
|
|
54
54
|
};
|
|
55
|
-
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2
|
|
55
|
+
}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
|
|
56
56
|
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
|
57
57
|
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
|
|
58
58
|
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
const mergedProps = $derived({
|
|
16
16
|
...restProps,
|
|
17
17
|
class: cn(
|
|
18
|
-
"bg-muted
|
|
18
|
+
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
19
19
|
className
|
|
20
20
|
),
|
|
21
21
|
});
|
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
horizontal: [
|
|
10
10
|
"flex-row items-center",
|
|
11
11
|
"[&>[data-slot=field-label]]:flex-auto",
|
|
12
|
-
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px
|
|
12
|
+
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
13
13
|
],
|
|
14
14
|
responsive: [
|
|
15
|
-
"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto
|
|
15
|
+
"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
|
|
16
16
|
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
|
17
17
|
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
18
18
|
],
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
3
3
|
export const inputGroupAddonVariants = tv({
|
|
4
|
-
base: "text-muted-foreground flex h-auto cursor-text
|
|
4
|
+
base: "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
|
5
5
|
variants: {
|
|
6
6
|
align: {
|
|
7
7
|
"inline-start": "order-first ps-3 has-[>button]:ms-[-0.45rem] has-[>kbd]:ms-[-0.35rem]",
|
|
8
8
|
"inline-end": "order-last pe-3 has-[>button]:me-[-0.45rem] has-[>kbd]:me-[-0.35rem]",
|
|
9
9
|
"block-start":
|
|
10
|
-
"
|
|
11
|
-
"block-end": "
|
|
10
|
+
"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
|
|
11
|
+
"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
|
|
12
12
|
},
|
|
13
13
|
},
|
|
14
14
|
defaultVariants: {
|
|
@@ -6,7 +6,7 @@ export declare const inputGroupAddonVariants: import("tailwind-variants").TVRetu
|
|
|
6
6
|
"block-start": string;
|
|
7
7
|
"block-end": string;
|
|
8
8
|
};
|
|
9
|
-
}, undefined, "text-muted-foreground flex h-auto cursor-text
|
|
9
|
+
}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
10
10
|
align: {
|
|
11
11
|
"inline-start": string;
|
|
12
12
|
"inline-end": string;
|
|
@@ -20,7 +20,7 @@ export declare const inputGroupAddonVariants: import("tailwind-variants").TVRetu
|
|
|
20
20
|
"block-start": string;
|
|
21
21
|
"block-end": string;
|
|
22
22
|
};
|
|
23
|
-
}, undefined, "text-muted-foreground flex h-auto cursor-text
|
|
23
|
+
}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
|
|
24
24
|
export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
|
|
25
25
|
import { type WithElementRef } from "../../../utils.js";
|
|
26
26
|
import type { HTMLAttributes } from "svelte/elements";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { HTMLAttributes } from "svelte/elements";
|
|
3
3
|
import type { WithElementRef } from "../../../utils.js";
|
|
4
|
-
import
|
|
4
|
+
import MinusIcon from "@lucide/svelte/icons/minus";
|
|
5
5
|
|
|
6
6
|
let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
7
7
|
</script>
|
|
@@ -10,6 +10,6 @@
|
|
|
10
10
|
{#if children}
|
|
11
11
|
{@render children?.()}
|
|
12
12
|
{:else}
|
|
13
|
-
<
|
|
13
|
+
<MinusIcon />
|
|
14
14
|
{/if}
|
|
15
15
|
</div>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
3
3
|
|
|
4
4
|
export const itemVariants = tv({
|
|
5
|
-
base: "group/item [a]:hover:bg-accent/50
|
|
5
|
+
base: "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "bg-transparent",
|
|
@@ -9,7 +9,7 @@ export declare const itemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
9
9
|
default: string;
|
|
10
10
|
sm: string;
|
|
11
11
|
};
|
|
12
|
-
}, undefined, "group/item [a]:hover:bg-accent/50
|
|
12
|
+
}, undefined, "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors", {
|
|
13
13
|
variant: {
|
|
14
14
|
default: string;
|
|
15
15
|
outline: string;
|
|
@@ -29,7 +29,7 @@ export declare const itemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
default: string;
|
|
30
30
|
sm: string;
|
|
31
31
|
};
|
|
32
|
-
}, undefined, "group/item [a]:hover:bg-accent/50
|
|
32
|
+
}, undefined, "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors", unknown, unknown, undefined>>;
|
|
33
33
|
export type ItemSize = VariantProps<typeof itemVariants>["size"];
|
|
34
34
|
export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
|
|
35
35
|
import { type WithElementRef } from "../../../utils.js";
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
bind:ref
|
|
10
10
|
data-slot="navigation-menu-content"
|
|
11
11
|
class={cn(
|
|
12
|
-
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-end-52 data-[motion=from-start]:slide-in-from-start-52 data-[motion=to-end]:slide-out-to-end-52 data-[motion=to-start]:slide-out-to-start-52 start-0 top-0 w-full md:absolute md:w-auto",
|
|
12
|
+
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-end-52 data-[motion=from-start]:slide-in-from-start-52 data-[motion=to-end]:slide-out-to-end-52 data-[motion=to-start]:slide-out-to-start-52 start-0 top-0 w-full p-2 pe-2.5 md:absolute md:w-auto",
|
|
13
13
|
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
|
14
14
|
className
|
|
15
15
|
)}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
|
|
5
5
|
export const navigationMenuTriggerStyle = tv({
|
|
6
|
-
base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium
|
|
6
|
+
base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
|
|
7
7
|
});
|
|
8
8
|
</script>
|
|
9
9
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium
|
|
1
|
+
export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
|
|
2
2
|
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
3
|
declare const NavigationMenuTrigger: import("svelte").Component<NavigationMenuPrimitive.TriggerProps, {}, "ref">;
|
|
4
4
|
type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;
|
|
@@ -5,4 +5,10 @@ import Link from "./pagination-link.svelte";
|
|
|
5
5
|
import PrevButton from "./pagination-prev-button.svelte";
|
|
6
6
|
import NextButton from "./pagination-next-button.svelte";
|
|
7
7
|
import Ellipsis from "./pagination-ellipsis.svelte";
|
|
8
|
-
|
|
8
|
+
import Previous from "./pagination-previous.svelte";
|
|
9
|
+
import Next from "./pagination-next.svelte";
|
|
10
|
+
export { Root, Content, Item, Link, PrevButton, //old
|
|
11
|
+
NextButton, //old
|
|
12
|
+
Ellipsis, Previous, Next, Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, //old
|
|
13
|
+
NextButton as PaginationNextButton, //old
|
|
14
|
+
Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext, };
|
|
@@ -5,6 +5,12 @@ import Link from "./pagination-link.svelte";
|
|
|
5
5
|
import PrevButton from "./pagination-prev-button.svelte";
|
|
6
6
|
import NextButton from "./pagination-next-button.svelte";
|
|
7
7
|
import Ellipsis from "./pagination-ellipsis.svelte";
|
|
8
|
-
|
|
8
|
+
import Previous from "./pagination-previous.svelte";
|
|
9
|
+
import Next from "./pagination-next.svelte";
|
|
10
|
+
export { Root, Content, Item, Link, PrevButton, //old
|
|
11
|
+
NextButton, //old
|
|
12
|
+
Ellipsis, Previous, Next,
|
|
9
13
|
//
|
|
10
|
-
Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton,
|
|
14
|
+
Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, //old
|
|
15
|
+
NextButton as PaginationNextButton, //old
|
|
16
|
+
Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext, };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Pagination as PaginationPrimitive } from "bits-ui";
|
|
3
|
+
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
|
|
4
|
+
import { buttonVariants } from "../button/index.js";
|
|
5
|
+
import { cn } from "../../../utils.js";
|
|
6
|
+
|
|
7
|
+
let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.NextButtonProps = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<PaginationPrimitive.NextButton
|
|
11
|
+
bind:ref
|
|
12
|
+
aria-label="Go to next page"
|
|
13
|
+
class={cn(
|
|
14
|
+
buttonVariants({
|
|
15
|
+
size: "default",
|
|
16
|
+
variant: "ghost",
|
|
17
|
+
class: "gap-1 px-2.5 sm:pe-2.5",
|
|
18
|
+
}),
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
{...restProps}
|
|
22
|
+
>
|
|
23
|
+
<span class="hidden sm:block">Next</span>
|
|
24
|
+
<ChevronRightIcon /></PaginationPrimitive.NextButton
|
|
25
|
+
>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Pagination as PaginationPrimitive } from "bits-ui";
|
|
3
|
+
import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
|
|
4
|
+
import { buttonVariants } from "../button/index.js";
|
|
5
|
+
import { cn } from "../../../utils.js";
|
|
6
|
+
|
|
7
|
+
let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.PrevButtonProps = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<PaginationPrimitive.PrevButton
|
|
11
|
+
bind:ref
|
|
12
|
+
aria-label="Go to previous page"
|
|
13
|
+
class={cn(
|
|
14
|
+
buttonVariants({
|
|
15
|
+
size: "default",
|
|
16
|
+
variant: "ghost",
|
|
17
|
+
class: "gap-1 px-2.5 sm:ps-2.5",
|
|
18
|
+
}),
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
{...restProps}
|
|
22
|
+
>
|
|
23
|
+
<ChevronLeftIcon />
|
|
24
|
+
<span class="hidden sm:block">Previous</span></PaginationPrimitive.PrevButton
|
|
25
|
+
>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Pagination as PaginationPrimitive } from "bits-ui";
|
|
2
|
+
declare const PaginationPrevious: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
|
|
3
|
+
type PaginationPrevious = ReturnType<typeof PaginationPrevious>;
|
|
4
|
+
export default PaginationPrevious;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
const mergedProps = $derived({
|
|
17
17
|
class: cn(
|
|
18
|
-
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
|
|
18
|
+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
19
19
|
// Increases the hit area of the button on mobile.
|
|
20
20
|
"after:absolute after:-inset-2 md:after:hidden",
|
|
21
21
|
"group-data-[collapsible=icon]:hidden",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
const mergedProps = $derived({
|
|
17
17
|
class: cn(
|
|
18
|
-
"text-sidebar-foreground/70 ring-sidebar-ring
|
|
18
|
+
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
19
19
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
20
20
|
className
|
|
21
21
|
),
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
const mergedProps = $derived({
|
|
19
19
|
class: cn(
|
|
20
|
-
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground
|
|
20
|
+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
21
21
|
// Increases the hit area of the button on mobile.
|
|
22
22
|
"after:absolute after:-inset-2 md:after:hidden",
|
|
23
23
|
"peer-data-[size=sm]/menu-button:top-1",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
3
3
|
|
|
4
4
|
export const sidebarMenuButtonVariants = tv({
|
|
5
|
-
base: "peer/menu-button
|
|
5
|
+
base: "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
size: {
|
|
13
13
|
default: "h-8 text-sm",
|
|
14
14
|
sm: "h-7 text-xs",
|
|
15
|
-
lg: "group-data-[collapsible=icon]:p-0!
|
|
15
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
|
16
16
|
},
|
|
17
17
|
},
|
|
18
18
|
defaultVariants: {
|
|
@@ -9,7 +9,7 @@ export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVRe
|
|
|
9
9
|
sm: string;
|
|
10
10
|
lg: string;
|
|
11
11
|
};
|
|
12
|
-
}, undefined, "peer/menu-button
|
|
12
|
+
}, undefined, "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
|
|
13
13
|
variant: {
|
|
14
14
|
default: string;
|
|
15
15
|
outline: string;
|
|
@@ -29,7 +29,7 @@ export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVRe
|
|
|
29
29
|
sm: string;
|
|
30
30
|
lg: string;
|
|
31
31
|
};
|
|
32
|
-
}, undefined, "peer/menu-button
|
|
32
|
+
}, undefined, "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", unknown, unknown, undefined>>;
|
|
33
33
|
export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>["variant"];
|
|
34
34
|
export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
|
|
35
35
|
import * as Tooltip from "../tooltip/index.js";
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
const mergedProps = $derived({
|
|
21
21
|
class: cn(
|
|
22
|
-
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground
|
|
22
|
+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
23
23
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
24
24
|
size === "sm" && "text-xs",
|
|
25
25
|
size === "md" && "text-sm",
|
|
@@ -43,7 +43,7 @@ get along, so we shut typescript up by casting `value` to `never`.
|
|
|
43
43
|
<SliderPrimitive.Thumb
|
|
44
44
|
data-slot="slider-thumb"
|
|
45
45
|
index={thumb}
|
|
46
|
-
class="border-primary
|
|
46
|
+
class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
47
47
|
/>
|
|
48
48
|
{/each}
|
|
49
49
|
{/snippet}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
|
|
3
|
+
import InfoIcon from "@lucide/svelte/icons/info";
|
|
4
|
+
import Loader2Icon from "@lucide/svelte/icons/loader-2";
|
|
5
|
+
import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
|
|
6
|
+
import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
|
|
7
|
+
|
|
2
8
|
import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
|
|
3
9
|
import { mode } from "mode-watcher";
|
|
4
10
|
|
|
@@ -10,4 +16,19 @@
|
|
|
10
16
|
class="toaster group"
|
|
11
17
|
style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
|
|
12
18
|
{...restProps}
|
|
13
|
-
|
|
19
|
+
>{#snippet loadingIcon()}
|
|
20
|
+
<Loader2Icon class="size-4 animate-spin" />
|
|
21
|
+
{/snippet}
|
|
22
|
+
{#snippet successIcon()}
|
|
23
|
+
<CircleCheckIcon class="size-4" />
|
|
24
|
+
{/snippet}
|
|
25
|
+
{#snippet errorIcon()}
|
|
26
|
+
<OctagonXIcon class="size-4" />
|
|
27
|
+
{/snippet}
|
|
28
|
+
{#snippet infoIcon()}
|
|
29
|
+
<InfoIcon class="size-4" />
|
|
30
|
+
{/snippet}
|
|
31
|
+
{#snippet warningIcon()}
|
|
32
|
+
<TriangleAlertIcon class="size-4" />
|
|
33
|
+
{/snippet}
|
|
34
|
+
</Sonner>
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import { type VariantProps, tv } from "tailwind-variants";
|
|
3
3
|
|
|
4
4
|
export const toggleVariants = tv({
|
|
5
|
-
base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2
|
|
5
|
+
base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "bg-transparent",
|
|
9
|
-
outline: "border-input
|
|
9
|
+
outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
|
|
10
10
|
},
|
|
11
11
|
size: {
|
|
12
12
|
default: "h-9 min-w-9 px-2",
|
|
@@ -9,7 +9,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
|
|
|
9
9
|
sm: string;
|
|
10
10
|
lg: string;
|
|
11
11
|
};
|
|
12
|
-
}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2
|
|
12
|
+
}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
13
13
|
variant: {
|
|
14
14
|
default: string;
|
|
15
15
|
outline: string;
|
|
@@ -29,7 +29,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
sm: string;
|
|
30
30
|
lg: string;
|
|
31
31
|
};
|
|
32
|
-
}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2
|
|
32
|
+
}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
|
|
33
33
|
export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
|
|
34
34
|
export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
|
|
35
35
|
export type ToggleVariants = VariantProps<typeof toggleVariants>;
|
|
@@ -21,12 +21,13 @@
|
|
|
21
21
|
data-slot="toggle-group-item"
|
|
22
22
|
data-variant={ctx.variant || variant}
|
|
23
23
|
data-size={ctx.size || size}
|
|
24
|
+
data-spacing={ctx.spacing}
|
|
24
25
|
class={cn(
|
|
25
26
|
toggleVariants({
|
|
26
27
|
variant: ctx.variant || variant,
|
|
27
28
|
size: ctx.size || size,
|
|
28
29
|
}),
|
|
29
|
-
"min-w-0
|
|
30
|
+
"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
|
|
30
31
|
className
|
|
31
32
|
)}
|
|
32
33
|
{value}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { getContext, setContext } from "svelte";
|
|
3
|
-
import type {
|
|
4
|
-
|
|
3
|
+
import type { VariantProps } from "tailwind-variants";
|
|
4
|
+
import { toggleVariants } from "../toggle/index.js";
|
|
5
|
+
|
|
6
|
+
type ToggleVariants = VariantProps<typeof toggleVariants>;
|
|
7
|
+
|
|
8
|
+
interface ToggleGroupContext extends ToggleVariants {
|
|
9
|
+
spacing?: number;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function setToggleGroupCtx(props: ToggleGroupContext) {
|
|
5
13
|
setContext("toggleGroup", props);
|
|
6
14
|
}
|
|
7
15
|
|
|
8
16
|
export function getToggleGroupCtx() {
|
|
9
|
-
return getContext<
|
|
17
|
+
return getContext<Required<ToggleGroupContext>>("toggleGroup");
|
|
10
18
|
}
|
|
11
19
|
</script>
|
|
12
20
|
|
|
@@ -19,13 +27,15 @@
|
|
|
19
27
|
value = $bindable(),
|
|
20
28
|
class: className,
|
|
21
29
|
size = "default",
|
|
30
|
+
spacing = 0,
|
|
22
31
|
variant = "default",
|
|
23
32
|
...restProps
|
|
24
|
-
}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
|
|
33
|
+
}: ToggleGroupPrimitive.RootProps & ToggleVariants & { spacing?: number } = $props();
|
|
25
34
|
|
|
26
35
|
setToggleGroupCtx({
|
|
27
36
|
variant,
|
|
28
37
|
size,
|
|
38
|
+
spacing,
|
|
29
39
|
});
|
|
30
40
|
</script>
|
|
31
41
|
|
|
@@ -39,6 +49,11 @@ get along, so we shut typescript up by casting `value` to `never`.
|
|
|
39
49
|
data-slot="toggle-group"
|
|
40
50
|
data-variant={variant}
|
|
41
51
|
data-size={size}
|
|
42
|
-
|
|
52
|
+
data-spacing={spacing}
|
|
53
|
+
style={`--gap: ${spacing}`}
|
|
54
|
+
class={cn(
|
|
55
|
+
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
|
|
56
|
+
className
|
|
57
|
+
)}
|
|
43
58
|
{...restProps}
|
|
44
59
|
/>
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
import { toggleVariants } from "../toggle/index.js";
|
|
3
|
+
type ToggleVariants = VariantProps<typeof toggleVariants>;
|
|
4
|
+
interface ToggleGroupContext extends ToggleVariants {
|
|
5
|
+
spacing?: number;
|
|
6
|
+
}
|
|
7
|
+
export declare function setToggleGroupCtx(props: ToggleGroupContext): void;
|
|
8
|
+
export declare function getToggleGroupCtx(): Required<ToggleGroupContext>;
|
|
4
9
|
import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
|
|
5
|
-
type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants
|
|
10
|
+
type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants & {
|
|
11
|
+
spacing?: number;
|
|
12
|
+
};
|
|
6
13
|
declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
|
|
7
14
|
type ToggleGroup = ReturnType<typeof ToggleGroup>;
|
|
8
15
|
export default ToggleGroup;
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
{sideOffset}
|
|
28
28
|
{side}
|
|
29
29
|
class={cn(
|
|
30
|
-
"bg-
|
|
30
|
+
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
31
31
|
className
|
|
32
32
|
)}
|
|
33
33
|
{...restProps}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.12",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -108,22 +108,22 @@
|
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
110
|
"@eslint/compat": "^2.0.0",
|
|
111
|
-
"@eslint/js": "^9.
|
|
112
|
-
"@internationalized/date": "^3.10.
|
|
113
|
-
"@lucide/svelte": "^0.
|
|
111
|
+
"@eslint/js": "^9.39.2",
|
|
112
|
+
"@internationalized/date": "^3.10.1",
|
|
113
|
+
"@lucide/svelte": "^0.561.0",
|
|
114
114
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
115
115
|
"@sveltejs/kit": "^2.49.2",
|
|
116
116
|
"@sveltejs/package": "^2.5.7",
|
|
117
117
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
118
|
-
"@tailwindcss/vite": "^4.1.
|
|
118
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
119
119
|
"@types/d3-scale": "^4.0.9",
|
|
120
120
|
"@types/d3-shape": "^3.1.7",
|
|
121
|
-
"@vitest/browser": "^4.0.
|
|
122
|
-
"@vitest/browser-playwright": "^4.0.
|
|
121
|
+
"@vitest/browser": "^4.0.16",
|
|
122
|
+
"@vitest/browser-playwright": "^4.0.16",
|
|
123
123
|
"d3-scale": "^4.0.2",
|
|
124
124
|
"d3-shape": "^3.2.0",
|
|
125
125
|
"embla-carousel-svelte": "^8.6.0",
|
|
126
|
-
"eslint": "^9.39.
|
|
126
|
+
"eslint": "^9.39.2",
|
|
127
127
|
"eslint-config-prettier": "^10.1.8",
|
|
128
128
|
"eslint-plugin-svelte": "^3.13.1",
|
|
129
129
|
"formsnap": "^2.0.1",
|
|
@@ -132,23 +132,23 @@
|
|
|
132
132
|
"mode-watcher": "^1.1.0",
|
|
133
133
|
"paneforge": "^1.0.2",
|
|
134
134
|
"prettier": "^3.7.4",
|
|
135
|
-
"prettier-plugin-svelte": "^3.4.
|
|
135
|
+
"prettier-plugin-svelte": "^3.4.1",
|
|
136
136
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
137
137
|
"publint": "^0.3.16",
|
|
138
|
-
"svelte": "5.
|
|
138
|
+
"svelte": "5.46.0",
|
|
139
139
|
"svelte-check": "^4.3.4",
|
|
140
140
|
"svelte-sonner": "^1.0.7",
|
|
141
|
-
"sveltekit-superforms": "^2.
|
|
142
|
-
"tailwindcss": "^4.1.
|
|
141
|
+
"sveltekit-superforms": "^2.29.1",
|
|
142
|
+
"tailwindcss": "^4.1.18",
|
|
143
143
|
"tslib": "^2.8.1",
|
|
144
144
|
"tw-animate-css": "1.4.0",
|
|
145
145
|
"typescript": "^5.9.3",
|
|
146
|
-
"typescript-eslint": "^8.
|
|
146
|
+
"typescript-eslint": "^8.50.0",
|
|
147
147
|
"vaul-svelte": "1.0.0-next.7",
|
|
148
|
-
"vite": "^7.
|
|
149
|
-
"vitest": "^4.0.
|
|
148
|
+
"vite": "^7.3.0",
|
|
149
|
+
"vitest": "^4.0.16",
|
|
150
150
|
"vitest-browser-svelte": "^2.0.0",
|
|
151
|
-
"zod": "4.1
|
|
151
|
+
"zod": "4.2.1"
|
|
152
152
|
},
|
|
153
153
|
"svelte": "./dist/index.js",
|
|
154
154
|
"types": "./dist/index.d.ts",
|