@xingxingmofashu/ui 0.1.2 → 0.1.4

package/dist/components/toggle-group.mjs

@@ -6,29 +6,77 @@ import * as React from "react";
 import theme from "../theme/toggle-group.mjs";
 function ToggleGroup({
   className,
+  ui,
   size,
   items,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   return /* @__PURE__ */ React.createElement(
     UIToggleGroup,
     {
       ...props,
       "data-slot": "root",
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "rim", className: ui.rim() })),
-    items.map((item) => /* @__PURE__ */ React.createElement(ToggleGroupItem, { key: item.value, ...item }))
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "glass",
+        className: cn(styles.glass(), ui?.glass)
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-slot": "rim",
+          "data-layer": "rim",
+          className: cn(styles.rim(), ui?.rim)
+        }
+      )
+    ),
+    items.map((item) => /* @__PURE__ */ React.createElement(
+      ToggleGroupItem,
+      {
+        key: item.value,
+        ...item,
+        ui: {
+          item: cn(ui?.item, item.ui?.item),
+          content: cn(ui?.content, item.ui?.content),
+          icon: cn(ui?.icon, item.ui?.icon),
+          label: cn(ui?.label, item.ui?.label)
+        }
+      }
+    ))
   );
 }
 function ToggleGroupItem({
   className,
+  ui,
   icon,
   label,
+  ref,
   ...props
 }) {
-  const ui = theme();
-  return /* @__PURE__ */ React.createElement(UIToggle, { ...props, "data-slot": "item", className: cn(ui.item(), className) }, /* @__PURE__ */ React.createElement("span", { "data-slot": "content", className: ui.content() }, icon ? /* @__PURE__ */ React.createElement("span", { "data-slot": "icon", "aria-hidden": "true", className: ui.icon() }, icon) : null, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label) : null));
+  const styles = theme();
+  return /* @__PURE__ */ React.createElement(
+    UIToggle,
+    {
+      ...props,
+      ref,
+      "data-slot": "item",
+      className: cn(styles.item(), ui?.item, className)
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-slot": "content", className: cn(styles.content(), ui?.content) }, icon ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "icon",
+        className: cn(styles.icon(), ui?.icon)
+      },
+      icon
+    ) : null, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: cn(styles.label(), ui?.label) }, label) : null)
+  );
 }
 export { ToggleGroup };

package/dist/components/toggle.d.ts

@@ -1,17 +1,21 @@
 import { Toggle as UIToggle } from "@base-ui/react/toggle";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/toggle";
+type Toggle = ComponentConfig<typeof theme>;
 type ToggleProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "style" | "ref"> & Omit<VariantProps<typeof theme>, "iconOnly"> & {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLButtonElement>;
     /** Tailwind classes merged into the toggle root. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Toggle["slots"];
     /** Visible label rendered inside the toggle. */
     label?: React.ReactNode;
     /** Icon rendered before the label. */
     icon?: React.ReactNode;
 };
-declare function Toggle<Value extends string = string>({ className, icon, label, size, ...props }: ToggleProps<Value>): React.JSX.Element;
+declare function Toggle<Value extends string = string>({ className, ui, icon, label, size, ...props }: ToggleProps<Value>): React.JSX.Element;
 export { Toggle };
 export type { ToggleProps };

package/dist/components/toggle.mjs

@@ -5,22 +5,53 @@ import * as React from "react";
 import theme from "../theme/toggle.mjs";
 function Toggle({
   className,
+  ui,
   icon,
   label,
   size,
   ...props
 }) {
-  const ui = theme({ size, iconOnly: !label });
+  const styles = theme({ size, iconOnly: !label });
   return /* @__PURE__ */ React.createElement(
     UIToggle,
     {
       ...props,
       "data-slot": "root",
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "overlay", className: ui.rim() })),
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "thumb", className: ui.thumb() }),
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "content", className: ui.content() }, icon ? /* @__PURE__ */ React.createElement("span", { "data-slot": "icon", "aria-hidden": "true", className: ui.icon() }, icon) : null, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label) : null)
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "glass",
+        className: cn(styles.glass(), ui?.glass)
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-slot": "rim",
+          className: cn(styles.rim(), ui?.rim)
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "thumb",
+        className: cn(styles.thumb(), ui?.thumb)
+      }
+    ),
+    /* @__PURE__ */ React.createElement("span", { "data-slot": "content", className: cn(styles.content(), ui?.content) }, icon ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "icon",
+        "aria-hidden": "true",
+        className: cn(styles.icon(), ui?.icon)
+      },
+      icon
+    ) : null, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: cn(styles.label(), ui?.label) }, label) : null)
   );
 }
 export { Toggle };

package/dist/composables/use-toast.d.ts

@@ -3,5 +3,9 @@ import { Toast as UIToast } from "@base-ui/react/toast";
  * Returns the toast manager connected to the nearest `ToastProvider`.
  */
 declare const useToast: typeof UIToast.useToastManager;
-export { useToast };
+/**
+ * Creates a toast manager for adding notifications outside the React tree.
+ */
+declare const createToastManager: typeof UIToast.createToastManager;
+export { createToastManager, useToast };
 export type { ToastManager, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject, } from "@base-ui/react/toast";

package/dist/composables/use-toast.mjs

@@ -1,4 +1,5 @@
 "use client";
 import { Toast as UIToast } from "@base-ui/react/toast";
 const useToast = UIToast.useToastManager;
-export { useToast };
+const createToastManager = UIToast.createToastManager;
+export { createToastManager, useToast };

package/dist/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-checkbox-mark:#fff;--ui-checkbox-rim:hsla(0,0%,100%,.18);--ui-checkbox-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.16);--ui-dialog-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-checkbox-mark:#141414;--ui-checkbox-rim:hsla(0,0%,100%,.14);--ui-checkbox-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04),0 1px 2px rgba(0,0,0,.4);--ui-dialog-surface:#141414;--ui-glass-surface:hsla(0,0%,100%,.06);--ui-glass-border:hsla(0,0%,100%,.14);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.9);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-checkbox-mark:#fff;--ui-checkbox-rim:hsla(0,0%,100%,.18);--ui-checkbox-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.16);--ui-dialog-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:2px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px;--ui-glass-edge-shadow:inset 1px -1px 2px hsla(0,0%,100%,.55),inset -1px 1px 2px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.2);--ui-glass-thumb-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 0 0 1px hsla(0,0%,100%,.55);--ui-glass-lens-blur:1.5px;--ui-glass-lens-saturate:160%;--ui-glass-lens-border:hsla(0,0%,100%,.55);--ui-glass-lens-surface:linear-gradient(180deg,hsla(0,0%,100%,.72),hsla(0,0%,100%,.3));--ui-glass-lens-surface-active:hsla(0,0%,100%,.12);--ui-glass-lens-shadow:0 4px 10px rgba(0,30,63,.14),0 0 2px rgba(0,9,20,.12),inset 1px 1px 0 hsla(0,0%,100%,.8),inset -1px -1px 0 rgba(69,168,243,.16);--ui-glass-lens-shadow-active:0 6px 18px rgba(0,30,63,.18),0 0 3px rgba(0,9,20,.14),inset 1px 1px 0 hsla(0,0%,100%,.72),inset -1px -1px 0 rgba(69,168,243,.2);--ui-glass-lens-specular:inset 1px 1px 0 hsla(0,0%,100%,.7),inset 1px 3px 0 rgba(28,63,90,.05),inset 0 0 18px hsla(0,0%,100%,.55),inset -1px -1px 0 rgba(69,168,243,.16);--ui-glass-lens-glare:linear-gradient(180deg,hsla(0,0%,100%,.75),hsla(0,0%,100%,0))}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-dialog-surface:var(--ui-dialog-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,2px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.9)) contrast(var(--ui-glass-contrast,3));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
+@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}

package/dist/index.d.ts

@@ -7,11 +7,11 @@ export { Dialog, type DialogProps } from "./components/dialog";
 export { Drawer, type DrawerProps } from "./components/drawer";
 export { Input, type InputProps } from "./components/input";
 export { Popover, type PopoverProps } from "./components/popover";
+export { Progress, type ProgressProps } from "./components/progress";
 export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, } from "./components/scroll-area";
 export { Slider, type SliderProps } from "./components/slider";
 export { Switch, type SwitchProps } from "./components/switch";
 export { Toast, ToastProvider, type ToastPosition, type ToastProps, type ToastProviderProps, } from "./components/toast";
-export { createToastManager } from "./composables/create-toast-manager";
-export { useToast, type ToastManager, type ToastManagerAddOptions, type ToastManagerPromiseOptions, type ToastManagerUpdateOptions, type ToastObject, } from "./composables/use-toast";
+export { createToastManager, useToast, type ToastManager, type ToastManagerAddOptions, type ToastManagerPromiseOptions, type ToastManagerUpdateOptions, type ToastObject, } from "./composables/use-toast";
 export { Toggle, type ToggleProps } from "./components/toggle";
 export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group";

package/dist/index.mjs

@@ -9,6 +9,7 @@ export { Dialog } from "./components/dialog.mjs";
 export { Drawer } from "./components/drawer.mjs";
 export { Input } from "./components/input.mjs";
 export { Popover } from "./components/popover.mjs";
+export { Progress } from "./components/progress.mjs";
 export {
   ScrollArea
 } from "./components/scroll-area.mjs";
@@ -18,8 +19,8 @@ export {
   Toast,
   ToastProvider
 } from "./components/toast.mjs";
-export { createToastManager } from "./composables/create-toast-manager.mjs";
 export {
+  createToastManager,
   useToast
 } from "./composables/use-toast.mjs";
 export { Toggle } from "./components/toggle.mjs";

package/dist/internal/tv.d.ts

@@ -0,0 +1,13 @@
+import type { ClassValue } from "tailwind-variants";
+type Id<T> = {} & {
+    [P in keyof T]: T[P];
+};
+type ComponentSlots<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof T["slots"]]?: ClassValue;
+}>;
+export type ComponentConfig<T extends Record<string, any>> = {
+    slots: ComponentSlots<T>;
+};
+export {};

package/dist/keyframes.css

@@ -1 +1 @@
-@keyframes ui-toggle-group-select{0%{opacity:0;scale:.94;translate:0 2px}to{opacity:1;scale:1;translate:0 0}}
+@keyframes ui-toggle-group-select{0%{opacity:0;scale:.94;translate:0 2px}to{opacity:1;scale:1;translate:0 0}}@keyframes ui-progress-indeterminate{0%{translate:-120% 0}to{translate:320% 0}}

package/dist/theme/alert-dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-dialog-surface",
+      "relative isolate w-full max-w-md bg-ui-surface",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",

package/dist/theme/checkbox.mjs

@@ -17,14 +17,14 @@ export default tv({
       "motion-reduce:transition-none",
       "[--ui-glass-tone:brightness(1)] [--ui-glass-contrast:1.1]",
       "[--ui-glass-border:color-mix(in_srgb,var(--ui-ink)_26%,transparent)]",
-      "[--ui-glass-rim:var(--ui-checkbox-rim)]",
+      "[--ui-glass-rim:rgb(255_255_255/0.16)]",
       "[--ui-glass-surface:color-mix(in_srgb,var(--ui-ink)_5%,transparent)]",
-      "[--ui-shadow-glass:var(--ui-checkbox-shadow)]",
+      "[--ui-shadow-glass:inset_0_0_0_1px_color-mix(in_srgb,var(--ui-ink)_6%,transparent),0_1px_2px_rgb(0_0_0/0.3)]",
       "[--ui-glass-rim-inset:2px]"
     ],
     fill: [
       "absolute inset-0 z-0 rounded-[inherit] bg-ui-ink",
-      "[background-image:linear-gradient(145deg,color-mix(in_srgb,var(--ui-ink)_88%,var(--ui-dialog-surface)),var(--ui-ink))]",
+      "[background-image:linear-gradient(145deg,color-mix(in_srgb,var(--ui-ink)_88%,var(--ui-surface)),var(--ui-ink))]",
       "scale-0 transition-transform duration-200 ease-out",
       "group-data-[checked]:scale-100 group-data-[indeterminate]:scale-100",
       "motion-reduce:transition-none"
@@ -35,7 +35,7 @@ export default tv({
     ],
     overlay: "ui-glass-rim",
     indicator: [
-      "relative z-10 flex items-center justify-center text-[var(--ui-checkbox-mark)]",
+      "relative z-10 flex items-center justify-center text-ui-surface",
       "scale-50 opacity-0 transition-[opacity,scale] duration-200 ease-out",
       "group-data-[checked]:scale-100 group-data-[checked]:opacity-100",
       "group-data-[indeterminate]:scale-100 group-data-[indeterminate]:opacity-100",

package/dist/theme/dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-dialog-surface",
+      "relative isolate w-full max-w-md bg-ui-surface",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",

package/dist/theme/drawer.mjs

@@ -12,7 +12,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-hidden",
     popup: [
-      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-dialog-surface",
+      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-surface",
       "text-ui-ink outline-none touch-auto overscroll-contain will-change-transform",
       "transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
       "data-[swiping]:select-none",

package/dist/theme/popover.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-dialog-surface",
+      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-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",
@@ -23,7 +23,7 @@ export default tv({
     overlay: "ui-glass-rim",
     arrow: [
       "pointer-events-none absolute z-[1] size-3 rotate-45",
-      "border-ui-glass-border bg-ui-dialog-surface",
+      "border-ui-glass-border bg-ui-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",

package/dist/theme/progress.d.ts

@@ -0,0 +1,80 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    label: string[];
+    value: string[];
+    track: string[];
+    indicator: string[];
+    description: string[];
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    label: string[];
+    value: string[];
+    track: string[];
+    indicator: string[];
+    description: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    label: string[];
+    value: string[];
+    track: string[];
+    indicator: string[];
+    description: string[];
+}>>;
+export default _default;

package/dist/theme/progress.mjs

@@ -0,0 +1,64 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "group/progress relative flex w-full min-w-0 flex-col gap-[var(--ui-progress-gap)] text-ui-ink",
+      "[--ui-progress-track:color-mix(in_srgb,var(--ui-ink)_12%,transparent)]",
+      "[--ui-progress-fill-from:var(--ui-ink)] [--ui-progress-fill-to:var(--ui-ink-active)]",
+      "[--ui-progress-glow:color-mix(in_srgb,var(--ui-ink)_28%,transparent)]",
+      "[--ui-progress-height:6px] [--ui-progress-gap:8px] [--ui-progress-font-size:0.875rem]"
+    ],
+    header: "flex min-w-0 items-baseline justify-between gap-3",
+    label: [
+      "min-w-0 truncate font-medium text-ui-ink",
+      "text-[length:var(--ui-progress-font-size)]",
+      "[filter:var(--ui-drop-shadow-label)]"
+    ],
+    value: [
+      "ms-auto shrink-0 font-mono tabular-nums text-ui-ink opacity-60",
+      "text-[length:calc(var(--ui-progress-font-size)*0.875)]"
+    ],
+    track: [
+      "relative h-[var(--ui-progress-height)] w-full overflow-hidden rounded-full",
+      "border border-ui-glass-border bg-[var(--ui-progress-track)]",
+      "shadow-[inset_0_1px_2px_rgb(0_0_0/0.14),inset_0_-1px_0_rgb(255_255_255/0.35)]",
+      "[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",
+      "before:pointer-events-none before:absolute before:inset-0 before:z-[1] before:rounded-full before:bg-[linear-gradient(180deg,rgb(255_255_255/0.24),transparent_60%)] before:content-['']"
+    ],
+    indicator: [
+      "relative h-full rounded-full",
+      "bg-[linear-gradient(117deg,var(--ui-progress-fill-from)_0%,var(--ui-progress-fill-to)_100%)]",
+      "shadow-[0_0_10px_var(--ui-progress-glow),inset_0_1px_0_rgb(255_255_255/0.35)]",
+      "transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:bg-[linear-gradient(180deg,rgb(255_255_255/0.3),transparent_60%)] after:content-['']",
+      "data-[indeterminate]:w-[38%] data-[indeterminate]:[animation:ui-progress-indeterminate_1.4s_ease-in-out_infinite]",
+      "motion-reduce:transition-none motion-reduce:data-[indeterminate]:[animation:none]"
+    ],
+    description: [
+      "min-w-0 leading-relaxed text-ui-ink opacity-60",
+      "text-[length:var(--ui-progress-font-size)]"
+    ]
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "[--ui-progress-height:4px] [--ui-progress-gap:6px] [--ui-progress-font-size:0.75rem]"
+      },
+      sm: {
+        root: "[--ui-progress-height:5px] [--ui-progress-gap:6px] [--ui-progress-font-size:0.75rem]"
+      },
+      md: {
+        root: "[--ui-progress-height:6px] [--ui-progress-gap:8px] [--ui-progress-font-size:0.875rem]"
+      },
+      lg: {
+        root: "[--ui-progress-height:8px] [--ui-progress-gap:8px] [--ui-progress-font-size:0.875rem]"
+      },
+      xl: {
+        root: "[--ui-progress-height:10px] [--ui-progress-gap:10px] [--ui-progress-font-size:1rem]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/dist/theme/slider.mjs

@@ -35,6 +35,14 @@ export default tv({
     thumb: [
       "relative z-[2] block h-[var(--ui-slider-thumb-height)] w-[var(--ui-slider-thumb-width)] shrink-0 select-none",
       "cursor-grab touch-none rounded-full bg-transparent p-0",
+      "[--ui-glass-lens-blur:1.5px] [--ui-glass-lens-saturate:160%]",
+      "[--ui-glass-lens-border:rgb(255_255_255/0.55)]",
+      "[--ui-glass-lens-surface:linear-gradient(180deg,rgb(255_255_255/0.72),rgb(255_255_255/0.3))]",
+      "[--ui-glass-lens-surface-active:rgb(255_255_255/0.12)]",
+      "[--ui-glass-lens-shadow:0_4px_10px_rgb(0_30_63/0.14),0_0_2px_rgb(0_9_20/0.12),inset_1px_1px_0_rgb(255_255_255/0.8),inset_-1px_-1px_0_rgb(69_168_243/0.16)]",
+      "[--ui-glass-lens-shadow-active:0_6px_18px_rgb(0_30_63/0.18),0_0_3px_rgb(0_9_20/0.14),inset_1px_1px_0_rgb(255_255_255/0.72),inset_-1px_-1px_0_rgb(69_168_243/0.2)]",
+      "[--ui-glass-lens-specular:inset_1px_1px_0_rgb(255_255_255/0.7),inset_1px_3px_0_rgb(28_63_90/0.05),inset_0_0_18px_rgb(255_255_255/0.55),inset_-1px_-1px_0_rgb(69_168_243/0.16)]",
+      "[--ui-glass-lens-glare:linear-gradient(180deg,rgb(255_255_255/0.75),rgb(255_255_255/0))]",
       "outline-none transition-[scale] duration-150 ease-out",
       "hover:[scale:1.04] active:[scale:1.08_0.96] data-[dragging]:[scale:1.08_0.96]",
       "[&:has(input:focus-visible)]:outline-2 [&:has(input:focus-visible)]:outline-offset-4 [&:has(input:focus-visible)]:outline-ui-glass-focus",

package/dist/theme/switch.mjs

@@ -12,6 +12,7 @@ const theme = tv({
     base: [
       "relative inline-flex h-[var(--ui-switch-height)] w-[var(--ui-switch-width)] shrink-0 select-none overflow-visible rounded-[100px] border-0 bg-transparent p-0 text-inherit",
       "[container-type:inline-size]",
+      "[--ui-glass-edge-shadow:inset_1px_-1px_2px_rgb(255_255_255/0.55),inset_-1px_1px_2px_rgb(0_0_0/0.18),0_1px_3px_rgb(0_0_0/0.2)]",
       "[--ui-switch-off:color-mix(in_srgb,var(--ui-ink)_20%,transparent)] [--ui-switch-on:var(--ui-ink)]",
       "group-focus-visible:outline-2 group-focus-visible:outline-offset-4 group-focus-visible:outline-ui-glass-focus",
       "[&_*]:pointer-events-none",
@@ -49,6 +50,7 @@ const theme = tv({
     ],
     thumb: [
       "absolute left-[var(--ui-switch-border)] top-1/2 h-[calc(100%_-_2*var(--ui-switch-border))] w-[calc(60%_-_2*var(--ui-switch-border))] rounded-[100px] bg-transparent [box-shadow:var(--ui-glass-thumb-shadow)]",
+      "[--ui-glass-thumb-shadow:0_1px_3px_rgb(0_0_0/0.2),inset_0_0_0_1px_rgb(255_255_255/0.55)]",
       "[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]",

package/dist/theme/toast.mjs

@@ -8,7 +8,7 @@ export default tv({
       "[--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",
+      "bg-ui-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)]",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Accessible React components with a Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
@@ -55,9 +55,14 @@
     "react",
     "ui",
     "components",
+    "component-library",
+    "react-components",
+    "design-system",
     "tailwindcss",
     "liquid-glass",
-    "base-ui"
+    "base-ui",
+    "tailwind-variants",
+    "accessible"
   ],
   "publishConfig": {
     "access": "public"

package/dist/composables/create-toast-manager.d.ts

@@ -1,6 +0,0 @@
-import { Toast as UIToast } from "@base-ui/react/toast";
-/**
- * Creates a toast manager for adding notifications outside the React tree.
- */
-declare const createToastManager: typeof UIToast.createToastManager;
-export { createToastManager };

package/dist/composables/create-toast-manager.mjs

@@ -1,3 +0,0 @@
-import { Toast as UIToast } from "@base-ui/react/toast";
-const createToastManager = UIToast.createToastManager;
-export { createToastManager };