@xingxingmofashu/ui 0.1.0 → 0.1.2

package/dist/components/input.mjs

@@ -2,6 +2,7 @@
 import { Input as UIInput } from "@base-ui/react/input";
 import { cn } from "cn";
 import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
 import theme from "../theme/input.mjs";
 function Input({
   className,
@@ -12,11 +13,17 @@ function Input({
   size,
   id,
   disabled,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
   const ui = theme({ size });
   const generatedId = React.useId();
+  const descriptionId = React.useId();
   const inputId = id ?? generatedId;
+  const describedBy = mergeIds(
+    ariaDescribedBy,
+    description ? descriptionId : void 0
+  );
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -46,6 +53,7 @@ function Input({
         ...props,
         id: inputId,
         disabled,
+        "aria-describedby": describedBy,
         "data-slot": "input",
         className: ui.input()
       }
@@ -58,7 +66,15 @@ function Input({
       },
       trailingIcon
     ) : null),
-    description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "description", className: ui.description() }, description) : null
+    description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id: descriptionId,
+        "data-slot": "description",
+        className: ui.description()
+      },
+      description
+    ) : null
   );
 }
 export { Input };

package/dist/components/slider.d.ts

@@ -1,12 +1,18 @@
 import { Slider as UISlider } from "@base-ui/react/slider";
+import * as React from "react";
 type SliderProps<Value extends number | readonly number[] = number> = Omit<UISlider.Root.Props<Value>, "children" | "style" | "className"> & {
     /** Tailwind classes merged into the root. */
     className?: any;
+    /** Accessible name for the thumb at `index`. Useful for range sliders. */
+    getAriaLabel?: UISlider.Thumb.Props["getAriaLabel"];
+    /** Accessible value text for the thumb at `index`. */
+    getAriaValueText?: UISlider.Thumb.Props["getAriaValueText"];
 };
 /**
- * Sliders need an accessible name. Pass `aria-labelledby`; Base UI forwards it
- * from the root to every thumb.
+ * Sliders need an accessible name. Pass `aria-label` or `aria-labelledby`;
+ * both are forwarded from the root to every thumb. `aria-describedby` is also
+ * forwarded so supporting copy is announced with each thumb.
  */
-declare function Slider<Value extends number | readonly number[] = number>({ className, value, defaultValue, ...props }: SliderProps<Value>): import("react").JSX.Element;
+declare function Slider<Value extends number | readonly number[] = number>({ className, value, defaultValue, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getAriaLabel, getAriaValueText, ...props }: SliderProps<Value>): React.JSX.Element;
 export { Slider };
 export type { SliderProps };

package/dist/components/slider.mjs

@@ -1,20 +1,47 @@
 "use client";
 import { Slider as UISlider } from "@base-ui/react/slider";
 import { cn } from "cn";
+import * as React from "react";
 import theme from "../theme/slider.mjs";
+function setAriaAttribute(input, name, value) {
+  if (value === void 0 || value === null) {
+    input.removeAttribute(name);
+    return;
+  }
+  input.setAttribute(name, String(value));
+}
 function Slider({
   className,
   value,
   defaultValue,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  getAriaLabel,
+  getAriaValueText,
   ...props
 }) {
   const ui = theme();
+  const syncThumbAria = React.useCallback(
+    (input) => {
+      if (!input) {
+        return;
+      }
+      setAriaAttribute(input, "aria-invalid", ariaInvalid);
+      setAriaAttribute(input, "aria-errormessage", ariaErrorMessage);
+    },
+    [ariaErrorMessage, ariaInvalid]
+  );
   const values = value ?? defaultValue;
   const thumbCount = Array.isArray(values) ? Math.max(1, values.length) : 1;
   return /* @__PURE__ */ React.createElement(
     UISlider.Root,
     {
       ...props,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       value,
       defaultValue,
       "data-slot": "root",
@@ -31,6 +58,12 @@ function Slider({
       {
         key: index,
         index,
+        "aria-describedby": ariaDescribedBy,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        getAriaLabel,
+        getAriaValueText,
+        inputRef: syncThumbAria,
         "data-slot": "thumb",
         className: ui.thumb()
       },

package/dist/components/switch.d.ts

@@ -12,6 +12,6 @@ interface SwitchProps extends Omit<UISwitch.Root.Props, "className" | "children"
     /** Optional supporting text. */
     description?: React.ReactNode;
 }
-declare function Switch({ className, label, description, size, disabled, readOnly, onCheckedChange, ...props }: SwitchProps): React.JSX.Element;
+declare function Switch({ className, label, description, size, disabled, readOnly, onCheckedChange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };
 export type { SwitchProps };

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(
@@ -53,10 +54,21 @@ function Switch({
   disabled,
   readOnly,
   onCheckedChange,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
   const ui = 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,6 +92,9 @@ function Switch({
     UISwitch.Root,
     {
       ...props,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
       disabled,
       readOnly,
       "data-slot": "root",
@@ -109,7 +124,15 @@ function Switch({
         /* @__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: ui.wrapper() }, label ? /* @__PURE__ */ React.createElement("span", { id: labelId, "data-slot": "label", className: ui.label() }, label) : null, description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id: descriptionId,
+        "data-slot": "description",
+        className: ui.description()
+      },
+      description
+    ) : null) : null
   );
 }
 export { Switch };

package/dist/components/toast.d.ts

@@ -1,19 +1,20 @@
 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";
+/** 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. */
+}
+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;
 }
-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, ...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,53 @@ 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,
   ...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 ui = 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: ui.viewport()
     },
-    /* @__PURE__ */ React.createElement(ToastList, { placement, closeLabel })
-  )));
+    toasts.map((toast) => /* @__PURE__ */ React.createElement(
+      UIToast.Root,
+      {
+        ...props,
+        key: toast.id,
+        toast,
+        "data-slot": "toast",
+        className: cn(ui.root(), className),
+        swipeDirection: SWIPE_DIRECTIONS[position]
+      },
+      /* @__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() }), close ? close : /* @__PURE__ */ React.createElement(UIToast.Close, { "data-slot": "close", className: ui.close() }, /* @__PURE__ */ React.createElement(CloseIcon, { className: "size-4" }))))
+    ))
+  ));
 }
-export { ToastProvider };
+export { Toast, ToastProvider };

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

@@ -10,7 +10,7 @@ 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 { 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";

package/dist/index.mjs

@@ -15,6 +15,7 @@ export {
 export { Slider } from "./components/slider.mjs";
 export { Switch } from "./components/switch.mjs";
 export {
+  Toast,
   ToastProvider
 } from "./components/toast.mjs";
 export { createToastManager } from "./composables/create-toast-manager.mjs";

package/dist/internal/aria.d.ts

@@ -0,0 +1,3 @@
+/** Join space-separated ID references, dropping empty values. */
+declare function mergeIds(...ids: Array<string | null | undefined>): string | undefined;
+export { mergeIds };

package/dist/internal/aria.mjs

@@ -0,0 +1,5 @@
+function mergeIds(...ids) {
+  const merged = ids.filter((id) => Boolean(id)).join(" ").trim();
+  return merged || void 0;
+}
+export { mergeIds };

package/dist/theme/toast.d.ts

@@ -1,22 +1,15 @@
 declare const _default: import("tailwind-variants").TVReturnType<{
-    placement: {
-        top: {
+    position: {
+        "top-left": {
             viewport: string;
-            root: string[];
         };
-        bottom: {
+        "top-right": {
             viewport: string;
-            root: string[];
         };
-    };
-    align: {
-        left: {
-            viewport: string;
-        };
-        center: {
+        "bottom-left": {
             viewport: string;
         };
-        right: {
+        "bottom-right": {
             viewport: string;
         };
     };
@@ -34,24 +27,17 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     action: string[];
     close: string[];
 }, undefined, {
-    placement: {
-        top: {
+    position: {
+        "top-left": {
             viewport: string;
-            root: string[];
         };
-        bottom: {
+        "top-right": {
             viewport: string;
-            root: string[];
         };
-    };
-    align: {
-        left: {
+        "bottom-left": {
             viewport: string;
         };
-        center: {
-            viewport: string;
-        };
-        right: {
+        "bottom-right": {
             viewport: string;
         };
     };
@@ -69,24 +55,17 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     action: string[];
     close: string[];
 }, import("tailwind-variants").TVReturnTypeLike<{
-    placement: {
-        top: {
-            viewport: string;
-            root: string[];
-        };
-        bottom: {
+    position: {
+        "top-left": {
             viewport: string;
-            root: string[];
         };
-    };
-    align: {
-        left: {
+        "top-right": {
             viewport: string;
         };
-        center: {
+        "bottom-left": {
             viewport: string;
         };
-        right: {
+        "bottom-right": {
             viewport: string;
         };
     };

package/dist/theme/toast.mjs

@@ -14,6 +14,8 @@ export default tv({
       "data-[expanded]:h-[var(--toast-height)]",
       "data-[limited]:pointer-events-none data-[limited]:opacity-0",
       "data-[swiping]:cursor-grabbing",
+      "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)_-_150%))]",
+      "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)_+_150%))]",
       "outline-none focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ui-glass-focus",
       "motion-reduce:transition-none"
     ],
@@ -57,9 +59,25 @@ export default tv({
     ]
   },
   variants: {
-    placement: {
-      top: {
-        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto",
+    position: {
+      "top-left": {
+        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto left-[max(1rem,env(safe-area-inset-left))] right-auto"
+      },
+      "top-right": {
+        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto right-[max(1rem,env(safe-area-inset-right))] left-auto"
+      },
+      "bottom-left": {
+        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto left-[max(1rem,env(safe-area-inset-left))] right-auto"
+      },
+      "bottom-right": {
+        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto right-[max(1rem,env(safe-area-inset-right))] left-auto"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top-left", "top-right"],
+      class: {
         root: [
           "top-0 origin-top",
           "[--offset-y:calc(var(--toast-offset-y)_+_(var(--toast-index)*var(--gap))_+_var(--toast-swipe-movement-y))]",
@@ -70,9 +88,11 @@ export default tv({
           "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)_-_150%))]",
           "after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)_+_1px)] after:w-full after:content-['']"
         ]
-      },
-      bottom: {
-        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto",
+      }
+    },
+    {
+      position: ["bottom-left", "bottom-right"],
+      class: {
         root: [
           "bottom-0 origin-bottom",
           "[--offset-y:calc(var(--toast-offset-y)*-1_+_(var(--toast-index)*var(--gap)*-1)_+_var(--toast-swipe-movement-y))]",
@@ -84,21 +104,9 @@ export default tv({
           "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)_+_1px)] after:w-full after:content-['']"
         ]
       }
-    },
-    align: {
-      left: {
-        viewport: "left-[max(1rem,env(safe-area-inset-left))] right-auto"
-      },
-      center: {
-        viewport: "left-1/2 -translate-x-1/2"
-      },
-      right: {
-        viewport: "right-[max(1rem,env(safe-area-inset-right))] left-auto"
-      }
     }
-  },
+  ],
   defaultVariants: {
-    placement: "bottom",
-    align: "right"
+    position: "bottom-right"
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.0",
-  "description": "Liquid Glass UI components for React 19 and Tailwind CSS 4.",
+  "version": "0.1.2",
+  "description": "Accessible React components with a Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
   "type": "module",