@xingxingmofashu/ui 0.1.0-beta.2 → 0.1.1

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

@@ -2,9 +2,9 @@
 import { Switch as UISwitch } from "@base-ui/react/switch";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/switch.js";
-function LiquidGlassFilter() {
-  return /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-layer": "filter" }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: "ui-switch-goo" }, /* @__PURE__ */ React.createElement(
+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(
     "feGaussianBlur",
     {
       in: "SourceGraphic",
@@ -19,22 +19,31 @@ function LiquidGlassFilter() {
       type: "matrix",
       result: "matrix"
     }
-  ), /* @__PURE__ */ React.createElement("feComposite", { in: "matrix", operator: "atop", result: "goo" })), /* @__PURE__ */ React.createElement("filter", { id: "ui-switch-remove-black", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement(
-    "feColorMatrix",
-    {
-      type: "matrix",
-      values: "1 0 0 0 0\n                    0 1 0 0 0\n                    0 0 1 0 0\n                    -255 -255 -255 0 1",
-      result: "black-pixels"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "feMorphology",
+  ), /* @__PURE__ */ React.createElement("feComposite", { in: "matrix", operator: "atop", result: "goo" })), /* @__PURE__ */ React.createElement(
+    "filter",
     {
-      in: "black-pixels",
-      operator: "dilate",
-      radius: "0.5",
-      result: "smoothed"
-    }
-  ), /* @__PURE__ */ React.createElement("feComposite", { in: "SourceGraphic", in2: "smoothed", operator: "out" }))));
+      id: `${id}-remove-black`,
+      colorInterpolationFilters: "sRGB"
+    },
+    /* @__PURE__ */ React.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "1 0 0 0 0\n                    0 1 0 0 0\n                    0 0 1 0 0\n                    -255 -255 -255 0 1",
+        result: "black-pixels"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "feMorphology",
+      {
+        in: "black-pixels",
+        operator: "dilate",
+        radius: "0.5",
+        result: "smoothed"
+      }
+    ),
+    /* @__PURE__ */ React.createElement("feComposite", { in: "SourceGraphic", in2: "smoothed", operator: "out" })
+  )));
 }
 function Switch({
   className,
@@ -47,6 +56,11 @@ function Switch({
   ...props
 }) {
   const ui = theme({ size });
+  const filterId = React.useId();
+  const filterStyles = {
+    "--ui-switch-goo-filter": `url("#${filterId}-goo")`,
+    "--ui-switch-remove-black-filter": `url("#${filterId}-remove-black")`
+  };
   const [animating, setAnimating] = React.useState(false);
   const handleCheckedChange = (checked, details) => {
     onCheckedChange?.(checked, details);
@@ -73,13 +87,16 @@ function Switch({
       onCheckedChange: handleCheckedChange,
       className: cn(ui.root(), className)
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("span", { "data-slot": "container", className: ui.container() }, /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "container",
-        className: ui.container()
+        "data-slot": "base",
+        className: ui.base(),
+        style: filterStyles
       },
-      /* @__PURE__ */ React.createElement("span", { "data-slot": "base", className: ui.base() }, /* @__PURE__ */ React.createElement(LiquidGlassFilter, null), /* @__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(
+      /* @__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",
@@ -90,8 +107,8 @@ function Switch({
         /* @__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
   );
 }

package/dist/components/toast.d.ts

@@ -0,0 +1,19 @@
+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";
+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. */
+    position?: ToastPosition;
+    /** Accessible label for the close button. */
+    closeLabel?: string;
+    /** Accessible label for the notification region. */
+    viewportLabel?: string;
+    /** Tailwind classes merged into the viewport. */
+    className?: string;
+}
+declare function ToastProvider({ children, position, closeLabel, viewportLabel, className, ...props }: ToastProviderProps): React.JSX.Element;
+export { ToastProvider };
+export type { ToastPosition, ToastProviderProps };

package/dist/components/toast.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { Toast as UIToast } from "@base-ui/react/toast";
+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;
+  }
+}
+function ToastStatusIcon({
+  type,
+  className
+}) {
+  const content = statusIconContent(type);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "icon",
+      "data-icon": type,
+      className
+    },
+    content
+  );
+}
+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,
+  position = "bottom-right",
+  closeLabel = "Dismiss",
+  viewportLabel = "Notifications",
+  className,
+  ...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(
+    UIToast.Viewport,
+    {
+      "data-slot": "viewport",
+      "data-position": position,
+      "aria-label": viewportLabel,
+      className: cn(ui.viewport(), className)
+    },
+    /* @__PURE__ */ React.createElement(ToastList, { placement, closeLabel })
+  )));
+}
+export { ToastProvider };

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

@@ -2,7 +2,7 @@ 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 theme from "../theme/toggle-group.js";
+import theme from "../theme/toggle-group";
 /** One option managed by the toggle group. */
 type ToggleGroupItemProps = Omit<UIToggle.Props, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
     /** Value that identifies the option in the group value. */

package/dist/components/{toggle-group.js → toggle-group.mjs}

@@ -3,7 +3,7 @@ import { Toggle as UIToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as UIToggleGroup } from "@base-ui/react/toggle-group";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/toggle-group.js";
+import theme from "../theme/toggle-group.mjs";
 function ToggleGroup({
   className,
   size,

package/dist/components/toggle.d.ts

@@ -0,0 +1,17 @@
+import { Toggle as UIToggle } from "@base-ui/react/toggle";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import theme from "../theme/toggle";
+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;
+    /** 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;
+export { Toggle };
+export type { ToggleProps };

package/dist/components/toggle.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { Toggle as UIToggle } from "@base-ui/react/toggle";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/toggle.mjs";
+function Toggle({
+  className,
+  icon,
+  label,
+  size,
+  ...props
+}) {
+  const ui = theme({ size, iconOnly: !label });
+  return /* @__PURE__ */ React.createElement(
+    UIToggle,
+    {
+      ...props,
+      "data-slot": "root",
+      className: cn(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)
+  );
+}
+export { Toggle };

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

@@ -0,0 +1,6 @@
+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

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

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

@@ -0,0 +1,7 @@
+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 };
+export type { ToastManager, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject, } from "@base-ui/react/toast";

package/dist/composables/use-toast.mjs

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

package/dist/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@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-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)}}

package/dist/index.d.ts

@@ -1,10 +1,17 @@
-export { Accordion, type AccordionItemProps, type AccordionProps, } from "./components/accordion.js";
-export { AlertDialog, type AlertDialogProps } from "./components/alert-dialog.js";
-export { Button, type ButtonProps } from "./components/button.js";
-export { Card, type CardProps } from "./components/card.js";
-export { Checkbox, type CheckboxProps } from "./components/checkbox.js";
-export { Dialog, type DialogProps } from "./components/dialog.js";
-export { Input, type InputProps } from "./components/input.js";
-export { Slider, type SliderProps } from "./components/slider.js";
-export { Switch, type SwitchProps } from "./components/switch.js";
-export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group.js";
+export { Accordion, type AccordionItemProps, type AccordionProps, } from "./components/accordion";
+export { AlertDialog, type AlertDialogProps } from "./components/alert-dialog";
+export { Button, type ButtonProps } from "./components/button";
+export { Card, type CardProps } from "./components/card";
+export { Checkbox, type CheckboxProps } from "./components/checkbox";
+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 { 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 { 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";
+export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group";

package/dist/index.mjs

@@ -0,0 +1,27 @@
+export {
+  Accordion
+} from "./components/accordion.mjs";
+export { AlertDialog } from "./components/alert-dialog.mjs";
+export { Button } from "./components/button.mjs";
+export { Card } from "./components/card.mjs";
+export { Checkbox } from "./components/checkbox.mjs";
+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 {
+  ScrollArea
+} from "./components/scroll-area.mjs";
+export { Slider } from "./components/slider.mjs";
+export { Switch } from "./components/switch.mjs";
+export {
+  ToastProvider
+} from "./components/toast.mjs";
+export { createToastManager } from "./composables/create-toast-manager.mjs";
+export {
+  useToast
+} from "./composables/use-toast.mjs";
+export { Toggle } from "./components/toggle.mjs";
+export {
+  ToggleGroup
+} from "./components/toggle-group.mjs";

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

@@ -5,7 +5,7 @@ export default tv({
       "group relative inline-flex items-center min-w-0 max-w-full cursor-pointer select-none whitespace-nowrap",
       "appearance-none rounded-full border-0 bg-transparent p-0",
       "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ui-glass-focus",
-      "disabled:pointer-events-none disabled:opacity-50"
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
     ],
     base: [
       "relative isolate flex w-full min-w-0 max-w-full flex-row flex-nowrap items-center justify-center rounded-full",

package/dist/theme/drawer.d.ts

@@ -0,0 +1,98 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    direction: {
+        down: {
+            viewport: string;
+            popup: string[];
+            content: string;
+        };
+        up: {
+            viewport: string;
+            popup: string[];
+            content: string;
+        };
+        left: {
+            viewport: string;
+            popup: string[];
+        };
+        right: {
+            viewport: string;
+            popup: string[];
+        };
+    };
+}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    glass: string[];
+    overlay: string;
+    content: string[];
+    title: string[];
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    direction: {
+        down: {
+            viewport: string;
+            popup: string[];
+            content: string;
+        };
+        up: {
+            viewport: string;
+            popup: string[];
+            content: string;
+        };
+        left: {
+            viewport: string;
+            popup: string[];
+        };
+        right: {
+            viewport: string;
+            popup: string[];
+        };
+    };
+}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    glass: string[];
+    overlay: string;
+    content: string[];
+    title: string[];
+    description: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    direction: {
+        down: {
+            viewport: string;
+            popup: string[];
+            content: string;
+        };
+        up: {
+            viewport: string;
+            popup: string[];
+            content: string;
+        };
+        left: {
+            viewport: string;
+            popup: string[];
+        };
+        right: {
+            viewport: string;
+            popup: string[];
+        };
+    };
+}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    glass: string[];
+    overlay: string;
+    content: string[];
+    title: string[];
+    description: string;
+    body: string;
+    footer: string;
+}>>;
+export default _default;

package/dist/theme/drawer.mjs

@@ -0,0 +1,87 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-black/25 backdrop-blur-[2px]",
+      "[opacity:calc(1-var(--drawer-swipe-progress))]",
+      "transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
+      "data-[swiping]:duration-0",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*300ms)]",
+      "motion-reduce:transition-none"
+    ],
+    viewport: "fixed inset-0 z-50 flex overflow-hidden",
+    popup: [
+      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-dialog-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",
+      "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 min-h-0 flex-1 flex-col overflow-y-auto",
+      "touch-auto overscroll-contain p-5 sm:p-6"
+    ],
+    title: [
+      "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
+      "[filter:var(--ui-drop-shadow-label)]"
+    ],
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
+  },
+  variants: {
+    direction: {
+      down: {
+        viewport: "items-end justify-center",
+        popup: [
+          "max-h-[85dvh] w-full rounded-t-[1.75rem]",
+          "pb-[env(safe-area-inset-bottom)]",
+          "[transform:translateY(calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]",
+          "data-[starting-style]:[transform:translateY(calc(100%_+_2px))]",
+          "data-[ending-style]:[transform:translateY(calc(100%_+_2px))]"
+        ],
+        content: "pt-4 sm:pt-5"
+      },
+      up: {
+        viewport: "items-start justify-center",
+        popup: [
+          "max-h-[85dvh] w-full rounded-b-[1.75rem]",
+          "pt-[env(safe-area-inset-top)]",
+          "[transform:translateY(calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]",
+          "data-[starting-style]:[transform:translateY(calc(-100%_-_2px))]",
+          "data-[ending-style]:[transform:translateY(calc(-100%_-_2px))]"
+        ],
+        content: "pb-4 sm:pb-5"
+      },
+      left: {
+        viewport: "items-stretch justify-start",
+        popup: [
+          "h-full w-[min(20rem,100vw)] rounded-r-[1.75rem]",
+          "pl-[env(safe-area-inset-left)]",
+          "[transform:translateX(var(--drawer-swipe-movement-x))]",
+          "data-[starting-style]:[transform:translateX(calc(-100%_-_2px))]",
+          "data-[ending-style]:[transform:translateX(calc(-100%_-_2px))]"
+        ]
+      },
+      right: {
+        viewport: "items-stretch justify-end",
+        popup: [
+          "h-full w-[min(20rem,100vw)] rounded-l-[1.75rem]",
+          "pr-[env(safe-area-inset-right)]",
+          "[transform:translateX(var(--drawer-swipe-movement-x))]",
+          "data-[starting-style]:[transform:translateX(calc(100%_+_2px))]",
+          "data-[ending-style]:[transform:translateX(calc(100%_+_2px))]"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    direction: "down"
+  }
+});