@xingxingmofashu/ui 0.1.4 → 0.1.5

package/README.md

@@ -20,9 +20,9 @@ components with a Liquid Glass visual style, built with
 [Tailwind Variants](https://www.tailwind-variants.org). Glass surfaces, rim
 highlights, and inner shadows are drawn entirely with CSS.
 
-The package ships sixteen components: Accordion, Alert Dialog, Button, Card,
-Checkbox, Dialog, Drawer, Input, Popover, Progress, Scroll Area, Slider, Switch,
-Toast, Toggle, and Toggle Group.
+The package ships eighteen components: Accordion, Alert Dialog, Button, Card,
+Checkbox, Dialog, Drawer, Input, Popover, Progress, Radio Group, Scroll Area,
+Slider, Switch, Tabs, Toast, Toggle, and Toggle Group.
 
 > [!NOTE]
 > Requires React 19, React DOM 19, Tailwind CSS 4, Node.js 22+, and an
@@ -101,6 +101,8 @@ pnpm install
 pnpm build           # build dist with unbuild
 pnpm lint            # lint with oxlint
 pnpm test            # run the Vitest suite
+pnpm test:visual     # run the Playwright visual regression suite
+pnpm test:visual:update  # refresh the Surface Lab screenshots
 pnpm typecheck       # typecheck the package
 pnpm docs:dev        # docs site on http://localhost:3001
 pnpm playground:dev  # component playground on http://localhost:3002

package/dist/components/accordion.d.ts

@@ -5,7 +5,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/accordion";
 type Accordion = ComponentConfig<typeof theme>;
 /** One panel managed by the accordion. */
-type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.Props, "children" | "className" | "style" | "title" | "value"> & {
+type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.Props, "children" | "className" | "content" | "style" | "title" | "value"> & {
     /** Value that identifies the item in the accordion value. */
     value: Value;
     /** Visible heading inside the trigger. */

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

@@ -0,0 +1,35 @@
+import { Radio as UIRadio } from "@base-ui/react/radio";
+import { RadioGroup as UIRadioGroup } from "@base-ui/react/radio-group";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/radio-group";
+type RadioGroup = ComponentConfig<typeof theme>;
+/** One option managed by the radio group. */
+type RadioGroupItemProps<Value extends string = string> = Omit<UIRadio.Root.Props<Value>, "className" | "children" | "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 item root. */
+    className?: string;
+    /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
+    ui?: Partial<Pick<RadioGroup["slots"], "item" | "box" | "glass" | "overlay" | "indicator" | "dot" | "wrapper" | "itemLabel" | "itemDescription">>;
+};
+type RadioGroupProps<Value extends string = string> = Omit<UIRadioGroup.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
+    /** Options rendered by the radio group. */
+    items: readonly RadioGroupItemProps<Value>[];
+    /** Visible label for the group. */
+    label?: React.ReactNode;
+    /** Supporting text rendered under the group label. */
+    description?: React.ReactNode;
+    /** Tailwind classes merged into the group root. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: RadioGroup["slots"];
+};
+declare function RadioGroup<Value extends string = string>({ className, ui, size, items, label, description, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupProps<Value>): React.JSX.Element;
+export { RadioGroup };
+export type { RadioGroupItemProps, RadioGroupProps };

package/dist/components/radio-group.mjs

@@ -0,0 +1,156 @@
+"use client";
+import { Radio as UIRadio } from "@base-ui/react/radio";
+import { RadioGroup as UIRadioGroup } from "@base-ui/react/radio-group";
+import { cn } from "cn";
+import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
+import theme from "../theme/radio-group.mjs";
+function RadioGroup({
+  className,
+  ui,
+  size,
+  items,
+  label,
+  description,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const styles = 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(
+    UIRadioGroup,
+    {
+      ...props,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "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(
+      RadioGroupItem,
+      {
+        key: item.value,
+        ...item,
+        ui: {
+          item: cn(ui?.item, item.ui?.item),
+          box: cn(ui?.box, item.ui?.box),
+          glass: cn(ui?.glass, item.ui?.glass),
+          overlay: cn(ui?.overlay, item.ui?.overlay),
+          indicator: cn(ui?.indicator, item.ui?.indicator),
+          dot: cn(ui?.dot, item.ui?.dot),
+          wrapper: cn(
+            styles.wrapper(),
+            ui?.wrapper,
+            item.ui?.wrapper
+          ),
+          itemLabel: cn(ui?.itemLabel, item.ui?.itemLabel),
+          itemDescription: cn(
+            ui?.itemDescription,
+            item.ui?.itemDescription
+          )
+        }
+      }
+    )))
+  );
+}
+function RadioGroupItem({
+  className,
+  ui,
+  label,
+  description,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...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(
+    UIRadio.Root,
+    {
+      ...props,
+      "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": "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(
+      UIRadio.Indicator,
+      {
+        keepMounted: true,
+        "aria-hidden": "true",
+        "data-slot": "indicator",
+        className: cn(styles.indicator(), ui?.indicator)
+      },
+      /* @__PURE__ */ React.createElement("span", { "data-slot": "dot", className: cn(styles.dot(), ui?.dot) })
+    )),
+    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 { RadioGroup };

package/dist/components/tabs.d.ts

@@ -0,0 +1,46 @@
+import { Tabs as UITabs } from "@base-ui/react/tabs";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/tabs";
+type Tabs = ComponentConfig<typeof theme>;
+/** One tab and its related panel. */
+type TabsItemProps<Value extends string = string> = Omit<UITabs.Tab.Props, "children" | "className" | "content" | "style" | "value"> & {
+    /** Value that identifies the tab and its panel. */
+    value: Value;
+    /** Visible label inside the tab. */
+    label?: React.ReactNode;
+    /** Decorative icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Panel content shown while the tab is active. */
+    content?: React.ReactNode;
+    /** Whether to keep the panel mounted while another tab is active. */
+    keepMounted?: boolean;
+    /** Tailwind classes merged into the tab button. */
+    className?: string;
+    /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
+    ui?: Partial<Pick<Tabs["slots"], "tab" | "icon" | "label" | "panel" | "panelContent">>;
+};
+type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "children" | "className" | "style" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & {
+    /** Tabs and panels rendered by the component. */
+    items: readonly TabsItemProps<Value>[];
+    /** Controlled active value. Use `null` to render no active tab. */
+    value?: Value | null;
+    /** Initial active value when uncontrolled. */
+    defaultValue?: Value | null;
+    /** Called when the active value changes. */
+    onValueChange?: (value: Value, details: UITabs.Root.ChangeEventDetails) => void;
+    /** Whether arrow keys activate a tab as focus moves. */
+    activateOnFocus?: boolean;
+    /** Whether keyboard focus loops back to the first tab. */
+    loopFocus?: boolean;
+    /** Disables every tab. */
+    disabled?: boolean;
+    /** Tailwind classes merged into the root. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Tabs["slots"];
+};
+declare function Tabs<Value extends string = string>({ className, ui, size, items, value, defaultValue, onValueChange, activateOnFocus, loopFocus, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: TabsProps<Value>): React.JSX.Element;
+export { Tabs };
+export type { TabsItemProps, TabsProps };

package/dist/components/tabs.mjs

@@ -0,0 +1,136 @@
+"use client";
+import { Tabs as UITabs } from "@base-ui/react/tabs";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/tabs.mjs";
+function Tabs({
+  className,
+  ui,
+  size,
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  activateOnFocus,
+  loopFocus,
+  disabled,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const styles = theme({ size });
+  const initialValue = defaultValue !== void 0 ? defaultValue : items.find((item) => !item.disabled)?.value;
+  return /* @__PURE__ */ React.createElement(
+    UITabs.Root,
+    {
+      ...props,
+      value,
+      defaultValue: initialValue,
+      onValueChange,
+      "data-slot": "root",
+      "data-disabled": disabled || void 0,
+      className: cn(styles.root(), ui?.root, className)
+    },
+    /* @__PURE__ */ React.createElement(
+      UITabs.List,
+      {
+        activateOnFocus,
+        loopFocus,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "data-slot": "list",
+        className: cn(styles.list(), ui?.list)
+      },
+      /* @__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(
+        UITabs.Indicator,
+        {
+          "data-slot": "indicator",
+          className: cn(styles.indicator(), ui?.indicator)
+        }
+      ),
+      items.map(
+        ({ content: _content, keepMounted: _keepMounted, ui: itemUi, ...item }) => /* @__PURE__ */ React.createElement(
+          TabsItem,
+          {
+            key: item.value,
+            ...item,
+            disabled: disabled || item.disabled,
+            ui: {
+              tab: cn(ui?.tab, itemUi?.tab),
+              icon: cn(ui?.icon, itemUi?.icon),
+              label: cn(ui?.label, itemUi?.label)
+            }
+          }
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "panels", className: cn(styles.panels(), ui?.panels) }, items.map((item) => /* @__PURE__ */ React.createElement(
+      UITabs.Panel,
+      {
+        key: item.value,
+        value: item.value,
+        keepMounted: item.keepMounted,
+        "data-slot": "panel",
+        className: cn(styles.panel(), ui?.panel, item.ui?.panel)
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-slot": "panel-content",
+          className: cn(
+            styles.panelContent(),
+            ui?.panelContent,
+            item.ui?.panelContent
+          )
+        },
+        item.content
+      )
+    )))
+  );
+}
+function TabsItem({
+  className,
+  ui,
+  label,
+  icon,
+  ...props
+}) {
+  const styles = theme();
+  return /* @__PURE__ */ React.createElement(
+    UITabs.Tab,
+    {
+      ...props,
+      "data-slot": "tab",
+      className: cn(styles.tab(), ui?.tab, className)
+    },
+    icon ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "icon",
+        className: cn(styles.icon(), ui?.icon)
+      },
+      icon
+    ) : null,
+    label !== void 0 && label !== null ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: cn(styles.label(), ui?.label) }, label) : null
+  );
+}
+export { Tabs };

package/dist/index.d.ts

@@ -8,9 +8,11 @@ export { Drawer, type DrawerProps } from "./components/drawer";
 export { Input, type InputProps } from "./components/input";
 export { Popover, type PopoverProps } from "./components/popover";
 export { Progress, type ProgressProps } from "./components/progress";
+export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps, } from "./components/radio-group";
 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 { Tabs, type TabsItemProps, type TabsProps } from "./components/tabs";
 export { Toast, ToastProvider, type ToastPosition, type ToastProps, type ToastProviderProps, } from "./components/toast";
 export { createToastManager, 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

@@ -10,11 +10,15 @@ export { Drawer } from "./components/drawer.mjs";
 export { Input } from "./components/input.mjs";
 export { Popover } from "./components/popover.mjs";
 export { Progress } from "./components/progress.mjs";
+export {
+  RadioGroup
+} from "./components/radio-group.mjs";
 export {
   ScrollArea
 } from "./components/scroll-area.mjs";
 export { Slider } from "./components/slider.mjs";
 export { Switch } from "./components/switch.mjs";
+export { Tabs } from "./components/tabs.mjs";
 export {
   Toast,
   ToastProvider

package/dist/theme/accordion.d.ts

@@ -29,67 +29,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     indicatorIcon: string;
     panel: string[];
     panelContent: string[];
-}, undefined, {
-    size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        xl: {
-            root: string;
-        };
-    };
-}, {
-    root: string[];
-    glass: string[];
-    overlay: string;
-    content: string;
-    item: string[];
-    header: string;
-    trigger: string[];
-    title: string[];
-    indicator: string[];
-    indicatorIcon: string;
-    panel: string[];
-    panelContent: string[];
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        xl: {
-            root: string;
-        };
-    };
-}, {
-    root: string[];
-    glass: string[];
-    overlay: string;
-    content: string;
-    item: string[];
-    header: string;
-    trigger: string[];
-    title: string[];
-    indicator: string[];
-    indicatorIcon: string;
-    panel: string[];
-    panelContent: string[];
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export default _default;

package/dist/theme/alert-dialog.d.ts

@@ -1,34 +1,4 @@
-declare const _default: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            overlay?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            glass?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
-            body?: import("tailwind-variants").ClassValue;
-            footer?: import("tailwind-variants").ClassValue;
-            popup?: import("tailwind-variants").ClassValue;
-            viewport?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            overlay?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            glass?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
-            body?: import("tailwind-variants").ClassValue;
-            footer?: import("tailwind-variants").ClassValue;
-            popup?: import("tailwind-variants").ClassValue;
-            viewport?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
+declare const _default: import("tailwind-variants").TVReturnType<{}, {
     backdrop: string[];
     viewport: string;
     popup: string[];
@@ -39,42 +9,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     description: string;
     body: string;
     footer: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            overlay?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            glass?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
-            body?: import("tailwind-variants").ClassValue;
-            footer?: import("tailwind-variants").ClassValue;
-            popup?: import("tailwind-variants").ClassValue;
-            viewport?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    backdrop: string[];
-    viewport: string;
-    popup: string[];
-    glass: string[];
-    overlay: string;
-    content: string;
-    title: string[];
-    description: string;
-    body: string;
-    footer: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    backdrop: string[];
-    viewport: string;
-    popup: string[];
-    glass: string[];
-    overlay: string;
-    content: string;
-    title: string[];
-    description: string;
-    body: string;
-    footer: string;
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export default _default;

package/dist/theme/button.d.ts

@@ -34,77 +34,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     leadingIcon: string[];
     trailingIcon: string[];
     overlay: string;
-}, undefined, {
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    root: string[];
-    base: string[];
-    glass: string[];
-    label: string[];
-    leadingIcon: string[];
-    trailingIcon: string[];
-    overlay: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    root: string[];
-    base: string[];
-    glass: string[];
-    label: string[];
-    leadingIcon: string[];
-    trailingIcon: string[];
-    overlay: string;
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export default _default;