@xingxingmofashu/ui 0.1.0-beta.2 → 0.1.1

package/dist/theme/popover.d.ts

@@ -0,0 +1,80 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            overlay?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            glass?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            popup?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            positioner?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            overlay?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            glass?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            popup?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            positioner?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    positioner: string;
+    popup: string[];
+    glass: string[];
+    overlay: string;
+    arrow: string[];
+    content: string;
+    title: string[];
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            overlay?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            glass?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            popup?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            positioner?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    positioner: string;
+    popup: string[];
+    glass: string[];
+    overlay: string;
+    arrow: string[];
+    content: string;
+    title: string[];
+    description: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    positioner: string;
+    popup: string[];
+    glass: string[];
+    overlay: string;
+    arrow: string[];
+    content: string;
+    title: string[];
+    description: string;
+    body: string;
+    footer: string;
+}>>;
+export default _default;

package/dist/theme/popover.mjs

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    positioner: "z-50 outline-none",
+    popup: [
+      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-dialog-surface",
+      "rounded-[1.5rem] text-ui-ink outline-none",
+      "transition-[opacity,scale,translate] duration-150 ease-out",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+      "data-[side=top]:origin-bottom data-[side=bottom]:origin-top",
+      "data-[side=left]:origin-right data-[side=right]:origin-left",
+      "data-[side=bottom]:data-[starting-style]:-translate-y-1",
+      "data-[side=top]:data-[starting-style]:translate-y-1",
+      "data-[side=right]:data-[starting-style]:-translate-x-1",
+      "data-[side=left]:data-[starting-style]:translate-x-1",
+      "motion-reduce:transition-none"
+    ],
+    glass: [
+      "ui-glass ui-glass-inner ui-glass-highlight",
+      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
+    ],
+    overlay: "ui-glass-rim",
+    arrow: [
+      "pointer-events-none absolute z-[1] size-3 rotate-45",
+      "border-ui-glass-border bg-ui-dialog-surface",
+      "drop-shadow-[0_1px_2px_rgb(0_0_0/0.12)]",
+      "data-[side=bottom]:-top-[6px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
+      "data-[side=top]:-bottom-[6px] data-[side=top]:border-r data-[side=top]:border-b",
+      "data-[side=left]:-right-[6px] data-[side=left]:border-t data-[side=left]:border-r",
+      "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l"
+    ],
+    content: "relative z-10 flex min-w-0 flex-col p-4",
+    title: [
+      "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
+      "[filter:var(--ui-drop-shadow-label)]"
+    ],
+    description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-60",
+    body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    footer: "mt-4 flex flex-wrap items-center justify-end gap-2"
+  }
+});

package/dist/theme/scroll-area.d.ts

@@ -0,0 +1,68 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            overlay?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            glass?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            corner?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            overlay?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            glass?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            corner?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    glass: string[];
+    overlay: string;
+    viewport: string[];
+    content: string;
+    scrollbar: string[];
+    thumb: string[];
+    corner: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            overlay?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            glass?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            corner?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    glass: string[];
+    overlay: string;
+    viewport: string[];
+    content: string;
+    scrollbar: string[];
+    thumb: string[];
+    corner: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string[];
+    glass: string[];
+    overlay: string;
+    viewport: string[];
+    content: string;
+    scrollbar: string[];
+    thumb: string[];
+    corner: string;
+}>>;
+export default _default;

package/dist/theme/scroll-area.mjs

@@ -0,0 +1,46 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "group/scroll-area relative grid w-full min-w-0 overflow-hidden rounded-[1.5rem] text-ui-ink",
+      "[--ui-scroll-area-bar-size:6px] [--ui-scroll-area-bar-padding:5px]",
+      "[--ui-scroll-area-thumb:color-mix(in_srgb,var(--ui-ink)_26%,transparent)]",
+      "[--ui-scroll-area-thumb-hover:color-mix(in_srgb,var(--ui-ink)_42%,transparent)]",
+      "[&_*]:box-border",
+      "motion-reduce:[&_*]:transition-none"
+    ],
+    glass: [
+      "ui-glass ui-glass-inner ui-glass-highlight",
+      "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[inherit]"
+    ],
+    overlay: "ui-glass-rim",
+    viewport: [
+      "relative z-10 col-start-1 row-start-1 h-full min-h-0 w-full min-w-0",
+      "rounded-[inherit] outline-none overscroll-contain",
+      "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ui-glass-focus"
+    ],
+    content: "min-w-0",
+    scrollbar: [
+      "group/scrollbar absolute z-20 flex touch-none select-none",
+      "p-[var(--ui-scroll-area-bar-padding)] opacity-30",
+      "pointer-events-none transition-opacity duration-200 ease-out",
+      "data-[hovering]:pointer-events-auto data-[hovering]:opacity-100",
+      "data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
+      "data-[orientation=vertical]:w-[calc(var(--ui-scroll-area-bar-size)+var(--ui-scroll-area-bar-padding)*2)]",
+      "data-[orientation=vertical]:justify-center",
+      "data-[orientation=horizontal]:h-[calc(var(--ui-scroll-area-bar-size)+var(--ui-scroll-area-bar-padding)*2)]",
+      "data-[orientation=horizontal]:items-center"
+    ],
+    thumb: [
+      "relative shrink-0 rounded-full border border-ui-glass-rim",
+      "bg-[var(--ui-scroll-area-thumb)]",
+      "shadow-[inset_0_1px_0_rgb(255_255_255/0.45),0_1px_2px_rgb(0_0_0/0.18)]",
+      "transition-[background-color,box-shadow] duration-150 ease-out",
+      "group-hover/scrollbar:bg-[var(--ui-scroll-area-thumb-hover)]",
+      "data-[scrolling]:bg-[var(--ui-scroll-area-thumb-hover)]",
+      "data-[orientation=vertical]:w-[var(--ui-scroll-area-bar-size)]",
+      "data-[orientation=horizontal]:h-[var(--ui-scroll-area-bar-size)]"
+    ],
+    corner: "absolute z-20 bg-transparent"
+  }
+});

package/dist/theme/{switch.js → switch.mjs}

@@ -18,7 +18,7 @@ const theme = tv({
       "motion-reduce:[transition-duration:0.01ms!important] motion-reduce:[transition-delay:0ms!important] motion-reduce:[&_*]:[transition-duration:0.01ms!important] motion-reduce:[&_*]:[transition-delay:0ms!important]",
       "[&_[data-layer=filter]]:pointer-events-none [&_[data-layer=filter]]:absolute [&_[data-layer=filter]]:h-0 [&_[data-layer=filter]]:w-0 [&_[data-layer=filter]]:overflow-hidden",
       "[&_[data-layer=mask]]:absolute [&_[data-layer=mask]]:inset-0 [&_[data-layer=mask]]:rounded-[100px]",
-      "[&_[data-layer=mask]]:[filter:url(#ui-switch-remove-black)] [&_[data-layer=mask]]:[transform:translate3d(0,0,0)]",
+      "[&_[data-layer=mask]]:[filter:var(--ui-switch-remove-black-filter)] [&_[data-layer=mask]]:[transform:translate3d(0,0,0)]",
       "[&_[data-layer=track]]:absolute [&_[data-layer=track]]:left-1/2 [&_[data-layer=track]]:top-1/2 [&_[data-layer=track]]:z-[12] [&_[data-layer=track]]:h-full [&_[data-layer=track]]:w-full [&_[data-layer=track]]:rounded-[100px] [&_[data-layer=track]]:bg-[var(--ui-switch-off)]",
       "[&_[data-layer=track]]:[container-type:inline-size] [&_[data-layer=track]]:[translate:-50%_-50%] [&_[data-layer=track]]:[box-shadow:inset_0_1px_1px_rgb(255_255_255/0.35),inset_0_-1px_2px_rgb(0_0_0/0.12)]",
       "[&_[data-layer=track]]:[transition:background-color_120ms_ease-out_180ms] group-data-[checked]:[&_[data-layer=track]]:bg-[var(--ui-switch-on)]",
@@ -33,7 +33,7 @@ const theme = tv({
       "[&_[data-layer=glass-lens]]:[filter:blur(calc(var(--ui-switch-height)*0.1))] [&_[data-layer=glass-lens]]:transition-[filter] [&_[data-layer=glass-lens]]:duration-200 [&_[data-layer=glass-lens]]:ease-out",
       "group-active:[&_[data-layer=glass-lens]]:[filter:blur(0)] group-data-[animating=true]:[&_[data-layer=glass-lens]]:[filter:blur(0)]",
       "[&_[data-layer=goo]]:absolute [&_[data-layer=goo]]:inset-0 [&_[data-layer=goo]]:overflow-hidden [&_[data-layer=goo]]:rounded-[100px]",
-      "[&_[data-layer=goo]]:[filter:url(#ui-switch-goo)] [&_[data-layer=goo]]:[transform:translate3d(0,0,0)]",
+      "[&_[data-layer=goo]]:[filter:var(--ui-switch-goo-filter)] [&_[data-layer=goo]]:[transform:translate3d(0,0,0)]",
       "[&_[data-layer=inner-glow]]:absolute [&_[data-layer=inner-glow]]:inset-0 [&_[data-layer=inner-glow]]:rounded-[100px]",
       "[&_[data-layer=inner-glow]]:[--ui-switch-glow-color:var(--ui-switch-off)] group-data-[checked]:[&_[data-layer=inner-glow]]:[--ui-switch-glow-color:var(--ui-switch-on)]",
       "[&_[data-layer=inner-glow]]:[transition:box-shadow_120ms_ease-out_180ms]",
@@ -52,8 +52,7 @@ const theme = tv({
       "[container-type:inline-size]",
       "[translate:0_-50%] group-data-[checked]:[translate:calc(100cqi_-_100%_-_2*var(--ui-switch-border))_-50%]",
       "[transition:translate_120ms_ease-out_180ms,scale_300ms_ease-out]",
-      "group-active:[scale:1.65] group-data-[animating=true]:[scale:1.65]",
-      "motion-reduce:transition-none"
+      "group-active:[scale:1.65] group-data-[animating=true]:[scale:1.65]"
     ],
     wrapper: "ms-2 min-w-0",
     label: "block font-medium text-ui-ink",

package/dist/theme/toast.d.ts

@@ -0,0 +1,107 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    placement: {
+        top: {
+            viewport: string;
+            root: string[];
+        };
+        bottom: {
+            viewport: string;
+            root: string[];
+        };
+    };
+    align: {
+        left: {
+            viewport: string;
+        };
+        center: {
+            viewport: string;
+        };
+        right: {
+            viewport: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string[];
+    glass: string[];
+    overlay: string;
+    content: string[];
+    icon: string[];
+    text: string;
+    title: string[];
+    description: string;
+    actions: string;
+    action: string[];
+    close: string[];
+}, undefined, {
+    placement: {
+        top: {
+            viewport: string;
+            root: string[];
+        };
+        bottom: {
+            viewport: string;
+            root: string[];
+        };
+    };
+    align: {
+        left: {
+            viewport: string;
+        };
+        center: {
+            viewport: string;
+        };
+        right: {
+            viewport: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string[];
+    glass: string[];
+    overlay: string;
+    content: string[];
+    icon: string[];
+    text: string;
+    title: string[];
+    description: string;
+    actions: string;
+    action: string[];
+    close: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    placement: {
+        top: {
+            viewport: string;
+            root: string[];
+        };
+        bottom: {
+            viewport: string;
+            root: string[];
+        };
+    };
+    align: {
+        left: {
+            viewport: string;
+        };
+        center: {
+            viewport: string;
+        };
+        right: {
+            viewport: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string[];
+    glass: string[];
+    overlay: string;
+    content: string[];
+    icon: string[];
+    text: string;
+    title: string[];
+    description: string;
+    actions: string;
+    action: string[];
+    close: string[];
+}>>;
+export default _default;

package/dist/theme/toast.mjs

@@ -0,0 +1,104 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    viewport: "fixed z-[60] flex w-[calc(100vw_-_2rem)] max-w-sm outline-none",
+    root: [
+      "[--gap:0.75rem] [--peek:0.75rem]",
+      "[--scale:calc(max(0,1_-_var(--toast-index)*0.1))]",
+      "[--shrink:calc(1_-_var(--scale))]",
+      "[--height:var(--toast-frontmost-height,var(--toast-height))]",
+      "absolute inset-x-0 isolate h-[var(--height)] w-full rounded-[1.25rem]",
+      "bg-ui-dialog-surface text-ui-ink select-none",
+      "z-[calc(1000-var(--toast-index))]",
+      "[transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+      "data-[expanded]:h-[var(--toast-height)]",
+      "data-[limited]:pointer-events-none data-[limited]:opacity-0",
+      "data-[swiping]:cursor-grabbing",
+      "outline-none focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ui-glass-focus",
+      "motion-reduce:transition-none"
+    ],
+    glass: [
+      "ui-glass ui-glass-inner ui-glass-highlight",
+      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
+    ],
+    overlay: "ui-glass-rim",
+    content: [
+      "relative z-10 flex h-full min-w-0 items-start gap-3 overflow-hidden p-4",
+      "transition-opacity duration-200 ease-out",
+      "data-[behind]:opacity-0 data-[expanded]:opacity-100",
+      "motion-reduce:transition-none"
+    ],
+    icon: [
+      "mt-0.5 grid size-5 shrink-0 place-items-center text-ui-ink opacity-70",
+      "data-[icon=loading]:animate-spin motion-reduce:animate-none"
+    ],
+    text: "flex min-w-0 flex-1 flex-col gap-0.5",
+    title: [
+      "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
+      "[filter:var(--ui-drop-shadow-label)]"
+    ],
+    description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
+    actions: "flex shrink-0 items-center gap-1",
+    action: [
+      "ui-glass-chip inline-flex h-7 shrink-0 items-center rounded-full px-2.5",
+      "whitespace-nowrap text-xs font-medium text-ui-ink",
+      "transition-[background-color,scale] duration-150 ease-out",
+      "hover:bg-ui-ink/10 active:scale-95",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "motion-reduce:transition-none"
+    ],
+    close: [
+      "grid size-7 shrink-0 place-items-center rounded-full text-ui-ink opacity-60",
+      "transition-[background-color,opacity,scale] duration-150 ease-out",
+      "hover:bg-ui-ink/10 hover:opacity-100 active:scale-90",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus",
+      "motion-reduce:transition-none"
+    ]
+  },
+  variants: {
+    placement: {
+      top: {
+        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto",
+        root: [
+          "top-0 origin-top",
+          "[--offset-y:calc(var(--toast-offset-y)_+_(var(--toast-index)*var(--gap))_+_var(--toast-swipe-movement-y))]",
+          "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)_+_var(--toast-index)*var(--peek)_+_var(--shrink)*var(--height)))_scale(var(--scale))]",
+          "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+          "data-[starting-style]:[transform:translateY(-150%)]",
+          "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]",
+          "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)_-_150%))]",
+          "after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)_+_1px)] after:w-full after:content-['']"
+        ]
+      },
+      bottom: {
+        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto",
+        root: [
+          "bottom-0 origin-bottom",
+          "[--offset-y:calc(var(--toast-offset-y)*-1_+_(var(--toast-index)*var(--gap)*-1)_+_var(--toast-swipe-movement-y))]",
+          "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)_-_var(--toast-index)*var(--peek)_-_var(--shrink)*var(--height)))_scale(var(--scale))]",
+          "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+          "data-[starting-style]:[transform:translateY(150%)]",
+          "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+          "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)_+_150%))]",
+          "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)_+_1px)] after:w-full after:content-['']"
+        ]
+      }
+    },
+    align: {
+      left: {
+        viewport: "left-[max(1rem,env(safe-area-inset-left))] right-auto"
+      },
+      center: {
+        viewport: "left-1/2 -translate-x-1/2"
+      },
+      right: {
+        viewport: "right-[max(1rem,env(safe-area-inset-right))] left-auto"
+      }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom",
+    align: "right"
+  }
+});

package/dist/theme/toggle.d.ts

@@ -0,0 +1,95 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    glass: string[];
+    thumb: string[];
+    rim: string;
+    content: string;
+    icon: string;
+    label: string;
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    glass: string[];
+    thumb: string[];
+    rim: string;
+    content: string;
+    icon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    glass: string[];
+    thumb: string[];
+    rim: string;
+    content: string;
+    icon: string;
+    label: string;
+}>>;
+export default _default;

package/dist/theme/toggle.mjs

@@ -0,0 +1,64 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "group/toggle relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center",
+      "h-[var(--ui-toggle-height)] gap-[var(--ui-toggle-gap)] px-[var(--ui-toggle-px)]",
+      "rounded-full bg-transparent text-[length:var(--ui-toggle-font-size)] text-ui-ink",
+      "outline-offset-2 focus-visible:outline-2 focus-visible:outline-ui-glass-focus",
+      "transition-[scale] duration-200 ease-out active:scale-[0.97]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[--ui-toggle-thumb:color-mix(in_srgb,var(--ui-ink)_12%,transparent)]",
+      "[--ui-toggle-thumb-rim:color-mix(in_srgb,var(--ui-ink)_16%,transparent)]",
+      "[--ui-toggle-thumb-shadow:inset_2px_1px_0_-1px_rgb(255_255_255/0.9),inset_-1.5px_-1px_0_-1px_rgb(255_255_255/0.7),inset_-2px_-6px_1px_-5px_rgb(255_255_255/0.5),inset_-1px_2px_3px_-1px_rgb(0_0_0/0.16),inset_0_-4px_1px_-2px_rgb(0_0_0/0.08),0_3px_6px_rgb(0_0_0/0.08)]",
+      "[&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-[cubic-bezier(0.5,0,0,1)]",
+      "[&:hover_svg]:scale-110 data-[pressed]:[&_svg]:scale-100",
+      "motion-reduce:transition-none motion-reduce:[&_svg]:transition-none"
+    ],
+    glass: [
+      "ui-glass ui-glass-inner ui-glass-highlight",
+      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
+    ],
+    thumb: [
+      "pointer-events-none absolute inset-[3px] z-[1] rounded-full",
+      "bg-[var(--ui-toggle-thumb)] ring-1 ring-inset ring-[var(--ui-toggle-thumb-rim)]",
+      "shadow-[var(--ui-toggle-thumb-shadow)]",
+      "opacity-0 scale-95",
+      "transition-[opacity,scale] duration-200 ease-out",
+      "group-data-[pressed]/toggle:opacity-100 group-data-[pressed]/toggle:scale-100",
+      "motion-reduce:transition-none"
+    ],
+    rim: "ui-glass-rim",
+    content: "relative z-10 inline-flex min-w-0 items-center justify-center gap-[var(--ui-toggle-gap)]",
+    icon: "inline-flex shrink-0 items-center justify-center [&_svg]:size-[var(--ui-toggle-icon-size)] [&_svg]:shrink-0",
+    label: "min-w-0 truncate leading-none"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "[--ui-toggle-height:24px] [--ui-toggle-px:8px] [--ui-toggle-font-size:0.75rem] [--ui-toggle-icon-size:16px] [--ui-toggle-gap:4px]"
+      },
+      sm: {
+        root: "[--ui-toggle-height:28px] [--ui-toggle-px:10px] [--ui-toggle-font-size:0.75rem] [--ui-toggle-icon-size:16px] [--ui-toggle-gap:4px]"
+      },
+      md: {
+        root: "[--ui-toggle-height:32px] [--ui-toggle-px:12px] [--ui-toggle-font-size:0.875rem] [--ui-toggle-icon-size:20px] [--ui-toggle-gap:6px]"
+      },
+      lg: {
+        root: "[--ui-toggle-height:36px] [--ui-toggle-px:14px] [--ui-toggle-font-size:0.875rem] [--ui-toggle-icon-size:20px] [--ui-toggle-gap:6px]"
+      },
+      xl: {
+        root: "[--ui-toggle-height:40px] [--ui-toggle-px:16px] [--ui-toggle-font-size:1rem] [--ui-toggle-icon-size:24px] [--ui-toggle-gap:8px]"
+      }
+    },
+    iconOnly: {
+      true: {
+        root: "aspect-square px-0"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    iconOnly: false
+  }
+});