@xingxingmofashu/ui 0.1.1 → 0.1.3

package/dist/components/switch.mjs

@@ -2,6 +2,7 @@
 import { Switch as UISwitch } from "@base-ui/react/switch";
 import { cn } from "cn";
 import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
 import theme from "../theme/switch.mjs";
 function LiquidGlassFilter({ id }) {
   return /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-layer": "filter" }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: `${id}-goo` }, /* @__PURE__ */ React.createElement(
@@ -47,16 +48,28 @@ function LiquidGlassFilter({ id }) {
 }
 function Switch({
   className,
+  ui,
   label,
   description,
   size,
   disabled,
   readOnly,
   onCheckedChange,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   const filterId = React.useId();
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const hasName = Boolean(label || ariaLabel || ariaLabelledBy);
+  const labelledBy = ariaLabelledBy || (label && !ariaLabel ? labelId : void 0);
+  const describedBy = mergeIds(
+    ariaDescribedBy,
+    description && hasName ? descriptionId : void 0
+  );
   const filterStyles = {
     "--ui-switch-goo-filter": `url("#${filterId}-goo")`,
     "--ui-switch-remove-black-filter": `url("#${filterId}-remove-black")`
@@ -80,36 +93,70 @@ function Switch({
     UISwitch.Root,
     {
       ...props,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
       disabled,
       readOnly,
       "data-slot": "root",
       "data-animating": animating || void 0,
       onCheckedChange: handleCheckedChange,
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "container", className: ui.container() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "base",
-        className: ui.base(),
-        style: filterStyles
+        "data-slot": "container",
+        className: cn(styles.container(), ui?.container)
       },
-      /* @__PURE__ */ React.createElement(LiquidGlassFilter, { id: filterId }),
-      /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "mask" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "track" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "track-mask" }))),
       /* @__PURE__ */ React.createElement(
-        UISwitch.Thumb,
+        "span",
         {
-          "data-slot": "thumb",
-          "aria-hidden": "true",
-          onTransitionEnd: handleThumbTransitionEnd,
-          className: ui.thumb()
+          "data-slot": "base",
+          className: cn(styles.base(), ui?.base),
+          style: filterStyles
         },
-        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "glass-rim" }),
-        /* @__PURE__ */ React.createElement("span", { "data-layer": "glass-lens" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "goo" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "inner-glow" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "fill" }))),
-        /* @__PURE__ */ React.createElement("span", { "data-layer": "cover" })
+        /* @__PURE__ */ React.createElement(LiquidGlassFilter, { id: filterId }),
+        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "mask" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "track" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "track-mask" }))),
+        /* @__PURE__ */ React.createElement(
+          UISwitch.Thumb,
+          {
+            "data-slot": "thumb",
+            "aria-hidden": "true",
+            onTransitionEnd: handleThumbTransitionEnd,
+            className: cn(styles.thumb(), ui?.thumb)
+          },
+          /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "glass-rim" }),
+          /* @__PURE__ */ React.createElement("span", { "data-layer": "glass-lens" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "goo" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "inner-glow" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "fill" }))),
+          /* @__PURE__ */ React.createElement("span", { "data-layer": "cover" })
+        )
       )
-    )),
-    label || description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "wrapper", className: ui.wrapper() }, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label) : null, description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "description", className: ui.description() }, description) : null) : null
+    ),
+    label || description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "wrapper",
+        className: cn(styles.wrapper(), ui?.wrapper)
+      },
+      label ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: labelId,
+          "data-slot": "label",
+          className: cn(styles.label(), ui?.label)
+        },
+        label
+      ) : null,
+      description ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: descriptionId,
+          "data-slot": "description",
+          className: cn(styles.description(), ui?.description)
+        },
+        description
+      ) : null
+    ) : null
   );
 }
 export { Switch };

package/dist/components/toast.d.ts

@@ -1,19 +1,25 @@
 import { Toast as UIToast } from "@base-ui/react/toast";
 import * as React from "react";
-/** Corner or edge where the toast stack is anchored. */
-type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/toast";
+/** Corner where the toast stack is anchored. */
+type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 interface ToastProviderProps extends Omit<UIToast.Provider.Props, "children"> {
     /** App content that can call `useToast`. */
     children?: React.ReactNode;
-    /** Corner or edge where the toast stack is anchored. */
+}
+type Toast = ComponentConfig<typeof theme>;
+interface ToastProps extends Omit<UIToast.Root.Props, "children" | "className" | "swipeDirection" | "toast"> {
+    /** Corner where the toast stack is anchored. */
     position?: ToastPosition;
-    /** Accessible label for the close button. */
-    closeLabel?: string;
-    /** Accessible label for the notification region. */
-    viewportLabel?: string;
-    /** Tailwind classes merged into the viewport. */
+    /** Content rendered in place of the default close button. */
+    close?: React.ReactNode;
+    /** Tailwind classes merged into each toast. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Toast["slots"];
 }
-declare function ToastProvider({ children, position, closeLabel, viewportLabel, className, ...props }: ToastProviderProps): React.JSX.Element;
-export { ToastProvider };
-export type { ToastPosition, ToastProviderProps };
+declare function ToastProvider({ children, ...props }: ToastProviderProps): React.JSX.Element;
+declare function Toast({ position, close, className, ui, ...props }: ToastProps): React.JSX.Element;
+export { Toast, ToastProvider };
+export type { ToastPosition, ToastProps, ToastProviderProps };

package/dist/components/toast.mjs

@@ -4,52 +4,31 @@ import { cn } from "cn";
 import * as React from "react";
 import { useToast } from "../composables/use-toast.mjs";
 import theme from "../theme/toast.mjs";
-function CloseIcon() {
-  return /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      className: "size-4"
-    },
-    /* @__PURE__ */ React.createElement("path", { d: "m4 4 8 8M12 4l-8 8" })
-  );
-}
-function statusIconContent(type) {
-  const svgProps = {
-    viewBox: "0 0 20 20",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "size-full"
-  };
-  switch (type) {
-    case "info":
-      return /* @__PURE__ */ React.createElement("svg", { ...svgProps }, /* @__PURE__ */ React.createElement("circle", { cx: "10", cy: "10", r: "7.25" }), /* @__PURE__ */ React.createElement("path", { d: "M10 9.25v4" }), /* @__PURE__ */ React.createElement("path", { d: "M10 6.75h.01" }));
-    case "success":
-      return /* @__PURE__ */ React.createElement("svg", { ...svgProps }, /* @__PURE__ */ React.createElement("circle", { cx: "10", cy: "10", r: "7.25" }), /* @__PURE__ */ React.createElement("path", { d: "m6.75 10.25 2.1 2.1 4.4-4.7" }));
-    case "warning":
-      return /* @__PURE__ */ React.createElement("svg", { ...svgProps }, /* @__PURE__ */ React.createElement("path", { d: "M10 3.25 17 16.5H3L10 3.25Z" }), /* @__PURE__ */ React.createElement("path", { d: "M10 8v3.5" }), /* @__PURE__ */ React.createElement("path", { d: "M10 14.25h.01" }));
-    case "error":
-      return /* @__PURE__ */ React.createElement("svg", { ...svgProps }, /* @__PURE__ */ React.createElement("circle", { cx: "10", cy: "10", r: "7.25" }), /* @__PURE__ */ React.createElement("path", { d: "M10 6.5v4.25" }), /* @__PURE__ */ React.createElement("path", { d: "M10 13.75h.01" }));
-    case "loading":
-      return /* @__PURE__ */ React.createElement("svg", { ...svgProps }, /* @__PURE__ */ React.createElement("circle", { cx: "10", cy: "10", r: "6.75", opacity: "0.25" }), /* @__PURE__ */ React.createElement("path", { d: "M10 3.25a6.75 6.75 0 0 1 6.75 6.75" }));
-    default:
-      return null;
-  }
-}
+import { CloseIcon } from "./icons/close.mjs";
+import { ErrorIcon } from "./icons/error.mjs";
+import { InfoIcon } from "./icons/info.mjs";
+import { LoadingIcon } from "./icons/loading.mjs";
+import { SuccessIcon } from "./icons/success.mjs";
+import { WarningIcon } from "./icons/warning.mjs";
+const SWIPE_DIRECTIONS = {
+  "top-left": ["up", "left"],
+  "top-right": ["up", "right"],
+  "bottom-left": ["down", "left"],
+  "bottom-right": ["down", "right"]
+};
+const STATUS_ICONS = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  loading: LoadingIcon
+};
 function ToastStatusIcon({
   type,
   className
 }) {
-  const content = statusIconContent(type);
-  if (!content) {
+  const Icon = type ? STATUS_ICONS[type] : void 0;
+  if (!Icon) {
     return null;
   }
   return /* @__PURE__ */ React.createElement(
@@ -60,61 +39,106 @@ function ToastStatusIcon({
       "data-icon": type,
       className
     },
-    content
+    /* @__PURE__ */ React.createElement(Icon, { className: "size-full" })
   );
 }
-function ToastList({
-  placement,
-  closeLabel
-}) {
-  const { toasts } = useToast();
-  const ui = theme({ placement });
-  return toasts.map((toast) => /* @__PURE__ */ React.createElement(
-    UIToast.Root,
-    {
-      key: toast.id,
-      toast,
-      "data-slot": "toast",
-      className: ui.root(),
-      swipeDirection: placement === "top" ? "up" : "down"
-    },
-    /* @__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.overlay() })),
-    /* @__PURE__ */ React.createElement(UIToast.Content, { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(ToastStatusIcon, { type: toast.type, className: ui.icon() }), /* @__PURE__ */ React.createElement("div", { "data-slot": "text", className: ui.text() }, /* @__PURE__ */ React.createElement(UIToast.Title, { "data-slot": "title", className: ui.title() }), /* @__PURE__ */ React.createElement(
-      UIToast.Description,
-      {
-        "data-slot": "description",
-        className: ui.description()
-      }
-    )), /* @__PURE__ */ React.createElement("div", { "data-slot": "actions", className: ui.actions() }, /* @__PURE__ */ React.createElement(UIToast.Action, { "data-slot": "action", className: ui.action() }), /* @__PURE__ */ React.createElement(
-      UIToast.Close,
-      {
-        "data-slot": "close",
-        className: ui.close(),
-        "aria-label": closeLabel
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, null)
-    )))
-  ));
+function ToastProvider({ children, ...props }) {
+  return /* @__PURE__ */ React.createElement(UIToast.Provider, { ...props }, children);
 }
-function ToastProvider({
-  children,
+function Toast({
   position = "bottom-right",
-  closeLabel = "Dismiss",
-  viewportLabel = "Notifications",
+  close,
   className,
+  ui,
   ...props
 }) {
-  const [placement, align] = position.split("-");
-  const ui = theme({ placement, align });
-  return /* @__PURE__ */ React.createElement(UIToast.Provider, { ...props }, children, /* @__PURE__ */ React.createElement(UIToast.Portal, null, /* @__PURE__ */ React.createElement(
+  const { toasts } = useToast();
+  const styles = theme({ position });
+  return /* @__PURE__ */ React.createElement(UIToast.Portal, null, /* @__PURE__ */ React.createElement(
     UIToast.Viewport,
     {
       "data-slot": "viewport",
       "data-position": position,
-      "aria-label": viewportLabel,
-      className: cn(ui.viewport(), className)
+      className: cn(styles.viewport(), ui?.viewport)
     },
-    /* @__PURE__ */ React.createElement(ToastList, { placement, closeLabel })
-  )));
+    toasts.map((toast) => /* @__PURE__ */ React.createElement(
+      UIToast.Root,
+      {
+        ...props,
+        key: toast.id,
+        toast,
+        "data-slot": "root",
+        className: cn(styles.root(), ui?.root, className),
+        swipeDirection: SWIPE_DIRECTIONS[position]
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: "glass",
+          "aria-hidden": "true",
+          "data-slot": "glass",
+          className: cn(styles.glass(), ui?.glass)
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "overlay",
+            className: cn(styles.overlay(), ui?.overlay)
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        UIToast.Content,
+        {
+          key: "content",
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
+        },
+        /* @__PURE__ */ React.createElement(
+          ToastStatusIcon,
+          {
+            type: toast.type,
+            className: cn(styles.icon(), ui?.icon)
+          }
+        ),
+        /* @__PURE__ */ React.createElement("div", { "data-slot": "text", className: cn(styles.text(), ui?.text) }, /* @__PURE__ */ React.createElement(
+          UIToast.Title,
+          {
+            "data-slot": "title",
+            className: cn(styles.title(), ui?.title)
+          }
+        ), /* @__PURE__ */ React.createElement(
+          UIToast.Description,
+          {
+            "data-slot": "description",
+            className: cn(styles.description(), ui?.description)
+          }
+        )),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            "data-slot": "actions",
+            className: cn(styles.actions(), ui?.actions)
+          },
+          /* @__PURE__ */ React.createElement(
+            UIToast.Action,
+            {
+              "data-slot": "action",
+              className: cn(styles.action(), ui?.action)
+            }
+          ),
+          close ? close : /* @__PURE__ */ React.createElement(
+            UIToast.Close,
+            {
+              "data-slot": "close",
+              className: cn(styles.close(), ui?.close)
+            },
+            /* @__PURE__ */ React.createElement(CloseIcon, { className: "size-4" })
+          )
+        )
+      )
+    ))
+  ));
 }
-export { ToastProvider };
+export { Toast, ToastProvider };

package/dist/components/toggle-group.d.ts

@@ -2,24 +2,30 @@ import { Toggle as UIToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as UIToggleGroup } from "@base-ui/react/toggle-group";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/toggle-group";
+type ToggleGroup = ComponentConfig<typeof theme>;
 /** One option managed by the toggle group. */
-type ToggleGroupItemProps = Omit<UIToggle.Props, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
+type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
     /** Value that identifies the option in the group value. */
-    value: string;
+    value: Value;
     /** Visible content inside the item. */
     label?: React.ReactNode;
     /** Icon rendered before the label. */
     icon?: React.ReactNode;
     /** Tailwind classes merged into the item root. */
     className?: string;
+    /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
+    ui?: Partial<Pick<ToggleGroup["slots"], "item" | "content" | "icon" | "label">>;
 };
 type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
     /** Options rendered by the toggle group. */
-    items: readonly ToggleGroupItemProps[];
+    items: readonly ToggleGroupItemProps<Value>[];
     /** Tailwind classes merged into the group root. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: ToggleGroup["slots"];
 };
-declare function ToggleGroup<Value extends string = string>({ className, size, items, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
+declare function ToggleGroup<Value extends string = string>({ className, ui, size, items, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
 export { ToggleGroup };
 export type { ToggleGroupItemProps, ToggleGroupProps };

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/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: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-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-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}}@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,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)}}

package/dist/index.d.ts

@@ -7,10 +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 { ToastProvider, type ToastPosition, type ToastProviderProps, } from "./components/toast";
+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 { Toggle, type ToggleProps } from "./components/toggle";