@xingxingmofashu/ui 0.1.1 → 0.1.2

package/README.md

@@ -1,4 +1,10 @@
-# @xingxingmofashu/ui
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/banner-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset=".github/assets/banner-light.png">
+  <img alt="@xingxingmofashu/ui: Between black and white, glass finds its light." width="1247" src=".github/assets/banner-light.png">
+</picture>
+
+<div align="center">
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
@@ -6,8 +12,10 @@
 [![React][react-src]][react-href]
 [![Tailwind CSS][tailwind-src]][tailwind-href]
 
-Liquid Glass UI is a collection of accessible, typed [React](https://react.dev)
-components built on [Base UI](https://base-ui.com),
+</div>
+
+`@xingxingmofashu/ui` is a collection of accessible, typed [React](https://react.dev)
+components with a Liquid Glass visual style, built on [Base UI](https://base-ui.com),
 [Tailwind CSS](https://tailwindcss.com), and
 [Tailwind Variants](https://www.tailwind-variants.org). Glass surfaces, rim
 highlights, and inner shadows are drawn entirely with CSS.
@@ -23,8 +31,8 @@ Toggle, and Toggle Group.
 
 ## Documentation
 
-- [English documentation](https://xingxingmofashu.github.io/ui/docs/en/get-started)
-- [简体中文文档](https://xingxingmofashu.github.io/ui/docs/zh/get-started)
+- [English](https://xingxingmofashu.github.io/ui/docs/en/get-started/introduction)
+- [简体中文](https://xingxingmofashu.github.io/ui/docs/zh/get-started/introduction)
 
 ## Installation
 
@@ -115,9 +123,12 @@ Light and dark tokens are selected by `.light` / `.dark`, or by
 
 ```html
 <html class="dark">
-  <!-- or -->
-  <html data-theme="dark">
-</html>
+```
+
+or:
+
+```html
+<html data-theme="dark">
 ```
 
 A nested `.light` / `[data-theme="light"]` subtree can switch back to light
@@ -161,7 +172,6 @@ a reproduction. Before opening a pull request, run `pnpm lint`, `pnpm test`, and
 - [Base UI](https://base-ui.com)
 - [Tailwind CSS](https://tailwindcss.com)
 - [Tailwind Variants](https://www.tailwind-variants.org)
-- [cn](https://github.com/shadcn-ui/cn)
 
 ## License
 

package/dist/components/accordion.mjs

@@ -3,6 +3,7 @@ import { Accordion as UIAccordion } from "@base-ui/react/accordion";
 import { cn } from "cn";
 import * as React from "react";
 import theme from "../theme/accordion.mjs";
+import { PlusIcon } from "./icons/plus.mjs";
 function Accordion({
   className,
   size,
@@ -52,17 +53,11 @@ function AccordionItem({
         className: ui.indicator()
       },
       /* @__PURE__ */ React.createElement(
-        "svg",
+        PlusIcon,
         {
           "data-slot": "indicator-icon",
-          className: ui.indicatorIcon(),
-          viewBox: "0 0 16 16",
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "square",
-          strokeLinejoin: "round"
-        },
-        /* @__PURE__ */ React.createElement("path", { d: "M1.5 8h13M8 14.5v-13" })
+          className: ui.indicatorIcon()
+        }
       )
     ))),
     /* @__PURE__ */ React.createElement(UIAccordion.Panel, { "data-slot": "panel", className: ui.panel() }, /* @__PURE__ */ React.createElement("div", { "data-slot": "panel-content", className: ui.panelContent() }, content))

package/dist/components/checkbox.d.ts

@@ -12,6 +12,6 @@ interface CheckboxProps extends Omit<UICheckbox.Root.Props, "className" | "child
     /** Optional supporting text. */
     description?: React.ReactNode;
 }
-declare function Checkbox({ className, label, description, size, indeterminate, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ className, label, description, size, indeterminate, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };
 export type { CheckboxProps };

package/dist/components/checkbox.mjs

@@ -2,37 +2,37 @@
 import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
 import { cn } from "cn";
 import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
 import theme from "../theme/checkbox.mjs";
-function CheckIcon({ indeterminate }) {
-  return /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      "data-icon": indeterminate ? "dash" : "check",
-      focusable: "false",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "1.5"
-    },
-    /* @__PURE__ */ React.createElement("path", { d: indeterminate ? "M3.5 8h9" : "m2.5 8.5 4 4 7-9" })
-  );
-}
+import { CheckIcon } from "./icons/check.mjs";
+import { DashIcon } from "./icons/dash.mjs";
 function Checkbox({
   className,
   label,
   description,
   size,
   indeterminate = false,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
   const ui = theme({ size });
+  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
+  );
   return /* @__PURE__ */ React.createElement(
     UICheckbox.Root,
     {
       ...props,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
       indeterminate,
       "data-slot": "root",
       className: cn(ui.root(), className)
@@ -52,9 +52,17 @@ function Checkbox({
         "data-slot": "indicator",
         className: ui.indicator()
       },
-      /* @__PURE__ */ React.createElement("span", { "data-slot": "indicator-icon", className: ui.indicatorIcon() }, /* @__PURE__ */ React.createElement(CheckIcon, { indeterminate }))
+      /* @__PURE__ */ React.createElement("span", { "data-slot": "indicator-icon", className: ui.indicatorIcon() }, indeterminate ? /* @__PURE__ */ React.createElement(DashIcon, null) : /* @__PURE__ */ React.createElement(CheckIcon, null))
     )),
-    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 { Checkbox };

package/dist/components/icons/check.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function CheckIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { CheckIcon };

package/dist/components/icons/check.mjs

@@ -0,0 +1,24 @@
+import * as React from "react";
+function CheckIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      "data-icon": "check",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "m4 12 6 6 10-12" })
+  );
+}
+export { CheckIcon };

package/dist/components/icons/close.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function CloseIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { CloseIcon };

package/dist/components/icons/close.mjs

@@ -0,0 +1,21 @@
+import * as React from "react";
+function CloseIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "m6 6 12 12M18 6 6 18" })
+  );
+}
+export { CloseIcon };

package/dist/components/icons/dash.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function DashIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { DashIcon };

package/dist/components/icons/dash.mjs

@@ -0,0 +1,24 @@
+import * as React from "react";
+function DashIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      "data-icon": "dash",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M5 12h14" })
+  );
+}
+export { DashIcon };

package/dist/components/icons/error.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function ErrorIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { ErrorIcon };

package/dist/components/icons/error.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+function ErrorIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 8v5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 16.5h.01" })
+  );
+}
+export { ErrorIcon };

package/dist/components/icons/info.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function InfoIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { InfoIcon };

package/dist/components/icons/info.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+function InfoIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 11v5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 8h.01" })
+  );
+}
+export { InfoIcon };

package/dist/components/icons/loading.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function LoadingIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { LoadingIcon };

package/dist/components/icons/loading.mjs

@@ -0,0 +1,22 @@
+import * as React from "react";
+function LoadingIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8", opacity: "0.25" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 4a8 8 0 0 1 8 8" })
+  );
+}
+export { LoadingIcon };

package/dist/components/icons/plus.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function PlusIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { PlusIcon };

package/dist/components/icons/plus.mjs

@@ -0,0 +1,22 @@
+import * as React from "react";
+function PlusIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M2.5 12h19M12 21.5v-19" })
+  );
+}
+export { PlusIcon };

package/dist/components/icons/success.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function SuccessIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { SuccessIcon };

package/dist/components/icons/success.mjs

@@ -0,0 +1,22 @@
+import * as React from "react";
+function SuccessIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "m8 12.5 3 3 5.5-6" })
+  );
+}
+export { SuccessIcon };

package/dist/components/icons/warning.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function WarningIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { WarningIcon };

package/dist/components/icons/warning.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+function WarningIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M12 4 21 20H3L12 4Z" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 10v4" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 17.5h.01" })
+  );
+}
+export { WarningIcon };

package/dist/components/input.d.ts

@@ -14,6 +14,6 @@ interface InputProps extends Omit<UIInput.Props, "className" | "children" | "siz
     /** Icon rendered after the input. */
     trailingIcon?: React.ReactNode;
 }
-declare function Input({ className, label, description, leadingIcon, trailingIcon, size, id, disabled, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, label, description, leadingIcon, trailingIcon, size, id, disabled, "aria-describedby": ariaDescribedBy, ...props }: InputProps): React.JSX.Element;
 export { Input };
 export type { InputProps };

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.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.1",
-  "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",