@xingxingmofashu/ui 0.1.0 → 0.1.2

package/README.md

@@ -1,48 +1,67 @@
-# @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>
 
-Liquid Glass UI components for React 19 and Tailwind CSS 4.
+<div align="center">
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![React][react-src]][react-href]
+[![Tailwind CSS][tailwind-src]][tailwind-href]
+
+</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.
 
 The package ships fifteen components: Accordion, Alert Dialog, Button, Card,
 Checkbox, Dialog, Drawer, Input, Popover, Scroll Area, Slider, Switch, Toast,
-Toggle, and Toggle Group. Glass surfaces, rim highlights, and inner shadows are
-drawn entirely with CSS. The interactive components are built on Base UI and do
-not add a custom rendering engine; `Card` is a native layout primitive.
+Toggle, and Toggle Group.
 
-## Requirements
+> [!NOTE]
+> Requires React 19, React DOM 19, Tailwind CSS 4, Node.js 22+, and an
+> ESM-capable bundler. `Card` is server-safe; the interactive components are
+> client components.
 
-- Node.js 22 or newer.
-- React and React DOM 19.
-- Tailwind CSS 4.
-- An ESM-capable bundler. The package publishes ES modules only.
+## Documentation
 
-`Accordion`, `AlertDialog`, `Button`, `Checkbox`, `Dialog`, `Drawer`, `Input`,
-`Popover`, `ScrollArea`, `Slider`, `Switch`, `ToastProvider`, `Toggle`, and
-`ToggleGroup` are client components. `Card` is server-safe and can be rendered
-from a React Server Component.
+- [English](https://xingxingmofashu.github.io/ui/docs/en/get-started/introduction)
+- [简体中文](https://xingxingmofashu.github.io/ui/docs/zh/get-started/introduction)
 
-## Install
+## Installation
 
-```bash
+```bash [pnpm]
 pnpm add @xingxingmofashu/ui
 ```
 
-The package is published under the `latest` dist-tag.
+```bash [yarn]
+yarn add @xingxingmofashu/ui
+```
+
+```bash [npm]
+npm install @xingxingmofashu/ui
+```
 
-## Setup
+```bash [bun]
+bun add @xingxingmofashu/ui
+```
 
-Import the design tokens and glass material from your Tailwind entry file:
+Add the package styles to your Tailwind CSS entry:
 
-```css
+```css [app.css]
 @import "tailwindcss";
 @import "@xingxingmofashu/ui";
-
-/* Adjust this path to point at the package inside node_modules. */
-@source "../node_modules/@xingxingmofashu/ui/dist";
 ```
 
-The package root resolves to `dist/index.css` through its `style` export.
-The package ships component class names in `dist`, so Tailwind must scan that
-directory. The `@source` path is relative to the CSS file that contains it.
+The package root resolves to `dist/index.css` through its `style` export. The
+stylesheet includes its own Tailwind source scan, so component utilities are
+generated without an extra `@source` directive.
 
 ## Usage
 
@@ -59,61 +78,68 @@ export function Example() {
 }
 ```
 
-Deep imports are available for each component and theme recipe:
+### Deep imports
+
+Import a single component or theme recipe without going through the package
+root:
 
 ```tsx
 import { Button } from "@xingxingmofashu/ui/components/button";
 import buttonTheme from "@xingxingmofashu/ui/theme/button";
 ```
 
-Use them when you want to import a single component without going through the
-package root.
+Toast hooks live under `@xingxingmofashu/ui/composables`.
+
+## Components
+
+### Element
+
+- Accordion
+- Button
+- Card
+- Scroll Area
+- Toggle
+- Toggle Group
+
+### Form
+
+- Checkbox
+- Input
+- Slider
+- Switch
+
+### Overlay
+
+- Alert Dialog
+- Dialog
+- Drawer
+- Popover
+- Toast
 
 ## Theming
 
-Light and dark values are selected by `.light` / `.dark`, or by
+Light and dark tokens are selected by `.light` / `.dark`, or by
 `data-theme="light"` / `data-theme="dark"`:
 
 ```html
 <html class="dark">
-  <!-- or -->
-  <html data-theme="dark">
-</html>
 ```
 
-A nested `.light` / `[data-theme="light"]` subtree can switch back to light
-tokens. Shared colors and glass parameters live in the `--ui-*` tokens in the
-package stylesheet; override them in your own theme layer. Tailwind aliases use
-the `ui-` prefix (`text-ui-ink`, `outline-ui-glass-focus`, and so on) to avoid
-colliding with host design tokens.
-
-`Button`, `Card`, `Checkbox`, `Dialog`, `Drawer`, `Input`, `Popover`,
-`ScrollArea`, `Slider`, `Switch`, `Toggle`, `ToggleGroup`, `ToastProvider`,
-`Accordion`, and `AlertDialog` inherit the host font and do not force a font
-family.
+or:
 
-The visual material relies on modern CSS: `backdrop-filter`, `color-mix`,
-container units, individual `translate` / `scale` properties, and `:has`.
-Use a current evergreen browser.
-
-## Components
+```html
+<html data-theme="dark">
+```
 
-- `Accordion`
-- `AlertDialog`
-- `Button`
-- `Card`
-- `Checkbox`
-- `Dialog`
-- `Drawer`
-- `Input`
-- `Popover`
-- `ScrollArea`
-- `Slider`
-- `Switch`
-- `ToastProvider`
-- `Toggle`
-- `ToggleGroup`
+A nested `.light` / `[data-theme="light"]` subtree can switch back to light
+tokens. Shared colors and glass parameters live in the `--ui-*` tokens; override
+them in your own theme layer. Tailwind aliases use the `ui-` prefix
+(`text-ui-ink`, `outline-ui-glass-focus`, and so on) to avoid colliding with
+host tokens.
 
+The components inherit the host font. The visual material relies on modern CSS:
+`backdrop-filter`, `color-mix`, container units, individual `translate` /
+`scale` properties, and `:has`. Use a current evergreen browser.
 
 ## Development
 
@@ -121,19 +147,45 @@ Use a current evergreen browser.
 pnpm install
 pnpm build           # build dist with unbuild
 pnpm lint            # lint with oxlint
-pnpm lint:fix        # apply oxlint's safe fixes
 pnpm test            # run the Vitest suite
 pnpm typecheck       # typecheck the package
-pnpm docs:dev        # start the Fumadocs site on port 3001
-pnpm docs:build      # export the docs site to docs/out
-pnpm playground:dev  # start the component playground on port 3002
+pnpm docs:dev        # docs site on http://localhost:3001
+pnpm playground:dev  # component playground on http://localhost:3002
 ```
 
-The documentation site lives in `docs/` and imports this package from the
-workspace, so changes under `src/` are picked up directly during docs
-development. The playground in `playground/` also imports the source directly
-and adds a persistent light/dark toggle for previewing every component.
+The documentation site lives in `docs/` and the playground lives in
+`playground/`; both import the package from the workspace.
+
+## Contribution
+
+Found a bug? [Open an issue](https://github.com/xingxingmofashu/ui/issues) with
+a reproduction. Before opening a pull request, run `pnpm lint`, `pnpm test`, and
+`pnpm typecheck`.
+
+> [!TIP]
+> [`AGENTS.md`](https://github.com/xingxingmofashu/ui/blob/main/AGENTS.md)
+> describes the component, theme, test, and documentation conventions used in
+> this repository.
+
+## Credits
+
+- [Base UI](https://base-ui.com)
+- [Tailwind CSS](https://tailwindcss.com)
+- [Tailwind Variants](https://www.tailwind-variants.org)
 
 ## License
 
-MIT
+Licensed under the [MIT license](https://github.com/xingxingmofashu/ui/blob/main/LICENSE).
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@xingxingmofashu/ui.svg?style=flat&colorA=18181B&colorB=52525B
+[npm-version-href]: https://www.npmjs.com/package/@xingxingmofashu/ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@xingxingmofashu/ui.svg?style=flat&colorA=18181B&colorB=52525B
+[npm-downloads-href]: https://npm.chart.dev/@xingxingmofashu/ui
+[license-src]: https://img.shields.io/github/license/xingxingmofashu/ui.svg?style=flat&colorA=18181B&colorB=52525B
+[license-href]: https://github.com/xingxingmofashu/ui/blob/main/LICENSE
+[react-src]: https://img.shields.io/badge/React-19-18181B?style=flat&logo=react&logoColor=white
+[react-href]: https://react.dev
+[tailwind-src]: https://img.shields.io/badge/Tailwind_CSS-4-18181B?style=flat&logo=tailwindcss&logoColor=white
+[tailwind-href]: https://tailwindcss.com

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 };