@xingxingmofashu/ui 0.1.8 → 0.1.10

package/README.md

@@ -1,7 +1,7 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/surface-lab-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset=".github/assets/surface-lab-light.png">
-  <img alt="The Liquid Glass Surface Lab panel showing glass components over the default image background in light mode." width="1024" src=".github/assets/surface-lab-light.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-light.png">
+  <img alt="The Liquid Glass Surface Lab panel showing glass components over the default image background in light mode." width="1024" src="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-light.png">
 </picture>
 
 <div align="center">
@@ -14,15 +14,16 @@
 
 </div>
 
-`@xingxingmofashu/ui` is a collection of accessible, typed [React](https://react.dev)
+`@xingxingmofashu/ui` is a collection of typed [React](https://react.dev)
 components with a Liquid Glass visual style, built with
 [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 twenty-one components: Accordion, Alert Dialog, Button, Card,
-Checkbox, Dialog, Drawer, Input, Menu, Popover, Progress, Radio Group, Scroll
-Area, Select, Slider, Switch, Tabs, Toast, Toggle, Toggle Group, and Tooltip.
+The package ships twenty-five components: Accordion, Alert Dialog, Button,
+Card, Checkbox, Checkbox Group, Dialog, Drawer, Field, Fieldset, Form, Input,
+Menu, Popover, Progress, Radio Group, Scroll Area, Select, Slider, Switch, Tabs,
+Toast, Toggle, Toggle Group, and Tooltip.
 
 > [!NOTE]
 > Requires React 19, React DOM 19, Tailwind CSS 4, Node.js 22+, and an

package/dist/components/button.d.ts

@@ -18,6 +18,6 @@ interface ButtonProps extends Omit<UIButtonProps, "ref" | "style" | "className">
     /** Icon rendered after the label. */
     trailingIcon?: React.ReactNode;
 }
-declare function Button({ className, ui, children, label, leadingIcon, trailingIcon, size, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ className, ui, children, label, leadingIcon, trailingIcon, size, disabled, ...props }: ButtonProps): React.JSX.Element;
 export { Button };
 export type { ButtonProps };

package/dist/components/button.mjs

@@ -4,6 +4,7 @@ import {
 } from "@base-ui/react/button";
 import { cn } from "cn";
 import * as React from "react";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/button.mjs";
 function Button({
   className,
@@ -13,15 +14,19 @@ function Button({
   leadingIcon,
   trailingIcon,
   size,
+  disabled,
   ...props
 }) {
   const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
+  const content = label || children;
   return /* @__PURE__ */ React.createElement(
     UIButton,
     {
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className),
-      ...props
+      ...props,
+      disabled: fieldsetDisabled
     },
     /* @__PURE__ */ React.createElement("span", { "data-slot": "base", className: cn(styles.base(), ui?.base) }, /* @__PURE__ */ React.createElement(
       "span",
@@ -46,7 +51,7 @@ function Button({
         "aria-hidden": "true"
       },
       leadingIcon
-    ) : null, /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: cn(styles.label(), ui?.label) }, label || children), trailingIcon ? /* @__PURE__ */ React.createElement(
+    ) : null, content ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: cn(styles.label(), ui?.label) }, content) : null, trailingIcon ? /* @__PURE__ */ React.createElement(
       "span",
       {
         "data-slot": "trailing-icon",

package/dist/components/card.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/card";
 type Card = ComponentConfig<typeof theme>;
-type CardProps = Omit<React.ComponentProps<"div">, "title"> & {
+type CardProps = Omit<React.ComponentProps<"div">, "style" | "title"> & {
     /** Classes merged into the root element. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

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

@@ -0,0 +1,41 @@
+import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as UICheckboxGroup } from "@base-ui/react/checkbox-group";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/checkbox-group";
+type CheckboxGroup = ComponentConfig<typeof theme>;
+/** One entry in the group. */
+type CheckboxGroupItemProps<Value extends string = string> = Omit<UICheckbox.Root.Props, "checked" | "defaultChecked" | "children" | "className" | "onCheckedChange" | "parent" | "style" | "value"> & {
+    /** Value that identifies the option in the group value. */
+    value: Value;
+    /** Visible label rendered next to the control. */
+    label?: React.ReactNode;
+    /** Supporting text rendered under the label. */
+    description?: React.ReactNode;
+    /** Tailwind classes merged into the entry root. */
+    className?: string;
+    /** Tailwind classes for control slots, keyed by `data-slot`. */
+    ui?: Partial<Pick<CheckboxGroup["slots"], "item" | "box" | "fill" | "glass" | "overlay" | "indicator" | "indicatorIcon" | "wrapper" | "itemLabel" | "itemDescription">>;
+};
+type CheckboxGroupProps<Value extends string = string> = Omit<UICheckboxGroup.Props, "allValues" | "children" | "className" | "defaultValue" | "onValueChange" | "style" | "value"> & VariantProps<typeof theme> & Pick<UICheckbox.Root.Props, "name" | "form" | "readOnly"> & {
+    /** Entries rendered by the group. */
+    items: readonly CheckboxGroupItemProps<Value>[];
+    /** Visible label for the group. */
+    label?: React.ReactNode;
+    /** Supporting text rendered under the group label. */
+    description?: React.ReactNode;
+    /** Controlled checked values. */
+    value?: readonly Value[];
+    /** Initial checked values when uncontrolled. */
+    defaultValue?: readonly Value[];
+    /** Called when a checkbox in the group is ticked or unticked. */
+    onValueChange?: (value: Value[], details: UICheckboxGroup.ChangeEventDetails) => void;
+    /** Tailwind classes merged into the group root. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: CheckboxGroup["slots"];
+};
+declare function CheckboxGroup<Value extends string = string>({ className, ui, size, items, label, description, name, form, readOnly, disabled, value, defaultValue, onValueChange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: CheckboxGroupProps<Value>): React.JSX.Element;
+export { CheckboxGroup };
+export type { CheckboxGroupItemProps, CheckboxGroupProps };

package/dist/components/checkbox-group.mjs

@@ -0,0 +1,223 @@
+"use client";
+import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as UICheckboxGroup } from "@base-ui/react/checkbox-group";
+import { cn } from "cn";
+import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
+import theme from "../theme/checkbox-group.mjs";
+import { CheckIcon } from "./icons/check.mjs";
+import { DashIcon } from "./icons/dash.mjs";
+function CheckboxGroup({
+  className,
+  ui,
+  size,
+  items,
+  label,
+  description,
+  name,
+  form,
+  readOnly,
+  disabled,
+  value,
+  defaultValue,
+  onValueChange,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const labelledBy = ariaLabelledBy || (label && !ariaLabel ? labelId : void 0);
+  const hasName = Boolean(label || ariaLabel || labelledBy);
+  const describedBy = mergeIds(
+    ariaDescribedBy,
+    description && hasName ? descriptionId : void 0
+  );
+  function handleValueChange(next, details) {
+    onValueChange?.(next, details);
+  }
+  return /* @__PURE__ */ React.createElement(
+    UICheckboxGroup,
+    {
+      ...props,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      ...labelledBy ? { "aria-labelledby": labelledBy } : {},
+      disabled: fieldsetDisabled,
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      "data-slot": "root",
+      className: cn(styles.root(), ui?.root, className)
+    },
+    label || description ? /* @__PURE__ */ React.createElement("div", { "data-slot": "header", className: cn(styles.header(), ui?.header) }, label ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id: labelId,
+        "data-slot": "label",
+        className: cn(styles.label(), ui?.label)
+      },
+      label
+    ) : null, description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id: descriptionId,
+        "data-slot": "description",
+        className: cn(styles.description(), ui?.description)
+      },
+      description
+    ) : null) : null,
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "items", className: cn(styles.items(), ui?.items) }, items.map((item) => /* @__PURE__ */ React.createElement(
+      CheckboxGroupItem,
+      {
+        key: item.value,
+        ...item,
+        name: item.name ?? name,
+        form: item.form ?? form,
+        readOnly: item.readOnly ?? readOnly,
+        ui: {
+          item: cn(ui?.item, item.ui?.item),
+          box: cn(ui?.box, item.ui?.box),
+          fill: cn(ui?.fill, item.ui?.fill),
+          glass: cn(ui?.glass, item.ui?.glass),
+          overlay: cn(ui?.overlay, item.ui?.overlay),
+          indicator: cn(ui?.indicator, item.ui?.indicator),
+          indicatorIcon: cn(
+            ui?.indicatorIcon,
+            item.ui?.indicatorIcon
+          ),
+          wrapper: cn(
+            styles.wrapper(),
+            ui?.wrapper,
+            item.ui?.wrapper
+          ),
+          itemLabel: cn(ui?.itemLabel, item.ui?.itemLabel),
+          itemDescription: cn(
+            ui?.itemDescription,
+            item.ui?.itemDescription
+          )
+        }
+      }
+    )))
+  );
+}
+function CheckboxGroupItem({
+  className,
+  ui,
+  label,
+  description,
+  value,
+  name,
+  form,
+  readOnly,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const styles = theme();
+  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,
+      value,
+      name,
+      form,
+      readOnly,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "data-slot": "item",
+      className: cn(styles.item(), ui?.item, className)
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "box",
+        className: cn(styles.box(), ui?.box)
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-slot": "fill",
+          className: cn(styles.fill(), ui?.fill)
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-slot": "glass",
+          className: cn(styles.glass(), ui?.glass)
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "overlay",
+            className: cn(styles.overlay(), ui?.overlay)
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        UICheckbox.Indicator,
+        {
+          keepMounted: true,
+          "aria-hidden": "true",
+          "data-slot": "indicator",
+          className: cn(styles.indicator(), ui?.indicator),
+          render: (indicatorProps, state) => /* @__PURE__ */ React.createElement("span", { ...indicatorProps }, /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              "data-slot": "indicator-icon",
+              className: cn(styles.indicatorIcon(), ui?.indicatorIcon)
+            },
+            state.indeterminate ? /* @__PURE__ */ React.createElement(DashIcon, null) : /* @__PURE__ */ React.createElement(CheckIcon, null)
+          ))
+        }
+      )
+    ),
+    label || description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "wrapper",
+        className: cn(styles.wrapper(), ui?.wrapper)
+      },
+      label ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: labelId,
+          "data-slot": "item-label",
+          className: cn(styles.itemLabel(), ui?.itemLabel)
+        },
+        label
+      ) : null,
+      description ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: descriptionId,
+          "data-slot": "item-description",
+          className: cn(
+            styles.itemDescription(),
+            ui?.itemDescription
+          )
+        },
+        description
+      ) : null
+    ) : null
+  );
+}
+export { CheckboxGroup };

package/dist/components/checkbox.d.ts

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

@@ -3,6 +3,7 @@ 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 { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/checkbox.mjs";
 import { CheckIcon } from "./icons/check.mjs";
 import { DashIcon } from "./icons/dash.mjs";
@@ -12,6 +13,7 @@ function Checkbox({
   label,
   description,
   size,
+  disabled,
   indeterminate = false,
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -19,6 +21,7 @@ function Checkbox({
   ...props
 }) {
   const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   const labelId = React.useId();
   const descriptionId = React.useId();
   const hasName = Boolean(label || ariaLabel || ariaLabelledBy);
@@ -34,6 +37,7 @@ function Checkbox({
       "aria-describedby": describedBy,
       "aria-label": ariaLabel,
       "aria-labelledby": labelledBy,
+      disabled: fieldsetDisabled,
       indeterminate,
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className)

package/dist/components/field.d.ts

@@ -0,0 +1,23 @@
+import { Field as UIField } from "@base-ui/react/field";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/field";
+type Field = ComponentConfig<typeof theme>;
+interface FieldProps extends Omit<UIField.Root.Props, "children" | "className" | "style">, VariantProps<typeof theme> {
+    /** Single Base UI control labelled and validated by the field. */
+    children: React.ReactElement;
+    /** Visible label associated with the control. */
+    label?: React.ReactNode;
+    /** Supporting text rendered under the control. */
+    description?: React.ReactNode;
+    /** Error message shown under the control. Accepts any React node. */
+    error?: React.ReactNode;
+    /** Tailwind classes merged into the field root. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Field["slots"];
+}
+declare function Field({ children, className, ui, size, label, description, error, invalid, disabled, ...props }: FieldProps): React.JSX.Element;
+export { Field };
+export type { FieldProps };

package/dist/components/field.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { Field as UIField } from "@base-ui/react/field";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/field.mjs";
+function FieldError({
+  error,
+  ui
+}) {
+  const styles = theme();
+  return /* @__PURE__ */ React.createElement(
+    UIField.Error,
+    {
+      ...error ? { match: true, children: error } : {},
+      "data-slot": "error",
+      className: cn(styles.error(), ui?.error)
+    }
+  );
+}
+function Field({
+  children,
+  className,
+  ui,
+  size,
+  label,
+  description,
+  error,
+  invalid,
+  disabled,
+  ...props
+}) {
+  const styles = theme({ size });
+  return /* @__PURE__ */ React.createElement(
+    UIField.Root,
+    {
+      ...props,
+      disabled,
+      invalid: invalid || (error ? true : void 0),
+      "data-slot": "root",
+      className: cn(styles.root(), ui?.root, className)
+    },
+    label ? /* @__PURE__ */ React.createElement(
+      UIField.Label,
+      {
+        "data-slot": "label",
+        className: cn(styles.label(), ui?.label)
+      },
+      label
+    ) : null,
+    children,
+    /* @__PURE__ */ React.createElement(FieldError, { error, ui }),
+    description ? /* @__PURE__ */ React.createElement(
+      UIField.Description,
+      {
+        "data-slot": "description",
+        className: cn(styles.description(), ui?.description)
+      },
+      description
+    ) : null
+  );
+}
+export { Field };

package/dist/components/fieldset.d.ts

@@ -0,0 +1,18 @@
+import { Fieldset as UIFieldset } from "@base-ui/react/fieldset";
+import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/fieldset";
+type Fieldset = ComponentConfig<typeof theme>;
+interface FieldsetProps extends Omit<UIFieldset.Root.Props, "children" | "className" | "style"> {
+    /** Visible legend naming the group. */
+    legend?: React.ReactNode;
+    /** Fields and controls grouped by the fieldset. */
+    children: React.ReactNode;
+    /** Tailwind classes merged into the fieldset root. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Fieldset["slots"];
+}
+declare function Fieldset({ children, legend, disabled, className, ui, "aria-labelledby": ariaLabelledBy, ...props }: FieldsetProps): React.JSX.Element;
+export { Fieldset };
+export type { FieldsetProps };

package/dist/components/fieldset.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { Fieldset as UIFieldset } from "@base-ui/react/fieldset";
+import { cn } from "cn";
+import * as React from "react";
+import {
+  FieldsetDisabledProvider,
+  useFieldsetDisabled
+} from "../internal/fieldset.mjs";
+import theme from "../theme/fieldset.mjs";
+function Fieldset({
+  children,
+  legend,
+  disabled = false,
+  className,
+  ui,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const styles = theme();
+  const legendId = React.useId();
+  const inheritedDisabled = useFieldsetDisabled();
+  const isDisabled = inheritedDisabled || disabled;
+  const labelledBy = ariaLabelledBy ?? (legend ? legendId : void 0);
+  return /* @__PURE__ */ React.createElement(FieldsetDisabledProvider, { disabled: isDisabled }, /* @__PURE__ */ React.createElement(
+    UIFieldset.Root,
+    {
+      ...props,
+      disabled: isDisabled,
+      ...labelledBy ? { "aria-labelledby": labelledBy } : {},
+      "data-slot": "root",
+      className: cn(styles.root(), ui?.root, className)
+    },
+    legend ? /* @__PURE__ */ React.createElement(
+      UIFieldset.Legend,
+      {
+        id: legendId,
+        "data-slot": "legend",
+        className: cn(styles.legend(), ui?.legend)
+      },
+      legend
+    ) : null,
+    children
+  ));
+}
+export { Fieldset };

package/dist/components/form.d.ts

@@ -0,0 +1,14 @@
+import { Form as UIForm } from "@base-ui/react/form";
+import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/form";
+type Form = ComponentConfig<typeof theme>;
+type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Omit<UIForm.Props<FormValues>, "className" | "style"> & {
+    /** Tailwind classes merged into the form element. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Form["slots"];
+};
+declare function Form<FormValues extends Record<string, any> = Record<string, any>>({ className, ui, ...props }: FormProps<FormValues>): React.JSX.Element;
+export { Form };
+export type { FormProps };

package/dist/components/form.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { Form as UIForm } from "@base-ui/react/form";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/form.mjs";
+function Form({
+  className,
+  ui,
+  ...props
+}) {
+  const styles = theme();
+  return /* @__PURE__ */ React.createElement(
+    UIForm,
+    {
+      ...props,
+      "data-slot": "root",
+      className: cn(styles.root(), ui?.root, className)
+    }
+  );
+}
+export { Form };

package/dist/components/input.d.ts

@@ -9,15 +9,11 @@ interface InputProps extends Omit<UIInput.Props, "className" | "children" | "siz
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Input["slots"];
-    /** Visible label associated with the input. */
-    label?: React.ReactNode;
-    /** Optional supporting text under the field. */
-    description?: React.ReactNode;
     /** Icon rendered before the input. */
     leadingIcon?: React.ReactNode;
     /** Icon rendered after the input. */
     trailingIcon?: React.ReactNode;
 }
-declare function Input({ className, ui, label, description, leadingIcon, trailingIcon, size, id, disabled, "aria-describedby": ariaDescribedBy, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, ui, leadingIcon, trailingIcon, size, disabled, ...props }: InputProps): React.JSX.Element;
 export { Input };
 export type { InputProps };