@xingxingmofashu/ui 0.1.1 → 0.1.3

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,25 +12,43 @@
 [![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),
-[Tailwind CSS](https://tailwindcss.com), and
+</div>
+
+`@xingxingmofashu/ui` is a collection of accessible, 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 fifteen components: Accordion, Alert Dialog, Button, Card,
-Checkbox, Dialog, Drawer, Input, Popover, Scroll Area, Slider, Switch, Toast,
-Toggle, and Toggle Group.
+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.
 
 > [!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.
 
+## Preview
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/playground-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset=".github/assets/playground-light.png">
+  <img alt="The Liquid Glass playground showing live component previews in light mode." width="1440" src=".github/assets/playground-light.png">
+</picture>
+
+Every component is rendered live in the local playground. Run
+`pnpm playground:dev`, open <http://localhost:3002>, and switch between light and
+dark to compare the same previews in both themes.
+
 ## 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)
+- [llms.txt](https://xingxingmofashu.github.io/ui/llms.txt) — a compact index for
+  language models and agents
+- [llms-full.txt](https://xingxingmofashu.github.io/ui/llms-full.txt) — every
+  guide and component page in one file
 
 ## Installation
 
@@ -115,9 +139,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
@@ -158,10 +185,8 @@ a reproduction. Before opening a pull request, run `pnpm lint`, `pnpm test`, and
 
 ## Credits
 
-- [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.d.ts

@@ -1,28 +1,32 @@
 import { Accordion as UIAccordion } from "@base-ui/react/accordion";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/accordion";
+type Accordion = ComponentConfig<typeof theme>;
 /** One panel managed by the accordion. */
-type AccordionItemProps = {
+type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.Props, "children" | "className" | "style" | "title" | "value"> & {
     /** Value that identifies the item in the accordion value. */
-    value: string;
+    value: Value;
     /** Visible heading inside the trigger. */
     title: React.ReactNode;
     /** Panel content. */
     content?: React.ReactNode;
-    /** Disables this item. */
-    disabled?: boolean;
-    /** Called when this panel opens or closes. */
-    onOpenChange?: UIAccordion.Item.Props["onOpenChange"];
+    /** Replaces the default plus icon. Set to `false` to hide the indicator. */
+    indicator?: React.ReactNode | false;
     /** Tailwind classes merged into the item root. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
+    ui?: Partial<Pick<Accordion["slots"], "item" | "header" | "trigger" | "title" | "indicator" | "indicatorIcon" | "panel" | "panelContent">>;
 };
 type AccordionProps<Value extends string = string> = Omit<UIAccordion.Root.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
     /** Panels rendered by the accordion. */
-    items: readonly AccordionItemProps[];
+    items: readonly AccordionItemProps<Value>[];
     /** Tailwind classes merged into the root. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Accordion["slots"];
 };
-declare function Accordion<Value extends string = string>({ className, size, items, ...props }: AccordionProps<Value>): React.JSX.Element;
+declare function Accordion<Value extends string = string>({ className, ui, size, items, ...props }: AccordionProps<Value>): React.JSX.Element;
 export { Accordion };
 export type { AccordionItemProps, AccordionProps };

package/dist/components/accordion.mjs

@@ -3,29 +3,55 @@ 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,
+  ui,
   size,
   items,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   return /* @__PURE__ */ React.createElement(
     UIAccordion.Root,
     {
       ...props,
       "data-slot": "root",
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
       "span",
       {
         "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
+        "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("div", { "data-slot": "content", className: cn(styles.content(), ui?.content) }, items.map((item) => /* @__PURE__ */ React.createElement(
+      AccordionItem,
+      {
+        key: item.value,
+        ...item,
+        ui: {
+          item: cn(ui?.item, item.ui?.item),
+          header: cn(ui?.header, item.ui?.header),
+          trigger: cn(ui?.trigger, item.ui?.trigger),
+          title: cn(ui?.title, item.ui?.title),
+          indicator: cn(ui?.indicator, item.ui?.indicator),
+          indicatorIcon: cn(ui?.indicatorIcon, item.ui?.indicatorIcon),
+          panel: cn(ui?.panel, item.ui?.panel),
+          panelContent: cn(ui?.panelContent, item.ui?.panelContent)
+        }
       }
-    )),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, items.map((item) => /* @__PURE__ */ React.createElement(AccordionItem, { key: item.value, ...item })))
+    )))
   );
 }
 function AccordionItem({
@@ -33,39 +59,66 @@ function AccordionItem({
   title,
   content,
   className,
+  ui,
+  indicator,
+  ref,
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
   return /* @__PURE__ */ React.createElement(
     UIAccordion.Item,
     {
       ...props,
+      ref,
       value,
       "data-slot": "item",
-      className: cn(ui.item(), className)
+      className: cn(styles.item(), ui?.item, className)
     },
-    /* @__PURE__ */ React.createElement(UIAccordion.Header, { "data-slot": "header", className: ui.header() }, /* @__PURE__ */ React.createElement(UIAccordion.Trigger, { "data-slot": "trigger", className: ui.trigger() }, /* @__PURE__ */ React.createElement("span", { "data-slot": "title", className: ui.title() }, title), /* @__PURE__ */ React.createElement(
-      "span",
+    /* @__PURE__ */ React.createElement(
+      UIAccordion.Header,
       {
-        "aria-hidden": "true",
-        "data-slot": "indicator",
-        className: ui.indicator()
+        "data-slot": "header",
+        className: cn(styles.header(), ui?.header)
+      },
+      /* @__PURE__ */ React.createElement(
+        UIAccordion.Trigger,
+        {
+          "data-slot": "trigger",
+          className: cn(styles.trigger(), ui?.trigger)
+        },
+        /* @__PURE__ */ React.createElement("span", { "data-slot": "title", className: cn(styles.title(), ui?.title) }, title),
+        indicator === false ? null : /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "indicator",
+            className: cn(styles.indicator(), ui?.indicator)
+          },
+          indicator === void 0 ? /* @__PURE__ */ React.createElement(
+            PlusIcon,
+            {
+              "data-slot": "indicator-icon",
+              className: cn(styles.indicatorIcon(), ui?.indicatorIcon)
+            }
+          ) : indicator
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      UIAccordion.Panel,
+      {
+        "data-slot": "panel",
+        className: cn(styles.panel(), ui?.panel)
       },
       /* @__PURE__ */ React.createElement(
-        "svg",
+        "div",
         {
-          "data-slot": "indicator-icon",
-          className: ui.indicatorIcon(),
-          viewBox: "0 0 16 16",
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "square",
-          strokeLinejoin: "round"
+          "data-slot": "panel-content",
+          className: cn(styles.panelContent(), ui?.panelContent)
         },
-        /* @__PURE__ */ React.createElement("path", { d: "M1.5 8h13M8 14.5v-13" })
+        content
       )
-    ))),
-    /* @__PURE__ */ React.createElement(UIAccordion.Panel, { "data-slot": "panel", className: ui.panel() }, /* @__PURE__ */ React.createElement("div", { "data-slot": "panel-content", className: ui.panelContent() }, content))
+    )
   );
 }
 export { Accordion };

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

@@ -1,5 +1,8 @@
 import { AlertDialog as UIAlertDialog } from "@base-ui/react/alert-dialog";
 import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/alert-dialog";
+type AlertDialog = ComponentConfig<typeof theme>;
 type AlertDialogProps = Omit<UIAlertDialog.Root.Props, "children"> & {
     /** Dialog heading. */
     title: React.ReactNode;
@@ -16,8 +19,10 @@ type AlertDialogProps = Omit<UIAlertDialog.Root.Props, "children"> & {
     /** Called when the confirm button is pressed. */
     onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
     /** Tailwind classes merged into the popup. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: AlertDialog["slots"];
 };
-declare function AlertDialog({ title, description, children, cancelLabel, confirmLabel, onCancel, onConfirm, className, ...props }: AlertDialogProps): React.JSX.Element;
+declare function AlertDialog({ title, description, children, cancelLabel, confirmLabel, onCancel, onConfirm, className, ui, ...props }: AlertDialogProps): React.JSX.Element;
 export { AlertDialog };
 export type { AlertDialogProps };

package/dist/components/alert-dialog.mjs

@@ -13,49 +13,90 @@ function AlertDialog({
   onCancel,
   onConfirm,
   className,
+  ui,
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
   return /* @__PURE__ */ React.createElement(UIAlertDialog.Root, { ...props }, /* @__PURE__ */ React.createElement(UIAlertDialog.Portal, null, /* @__PURE__ */ React.createElement(
     UIAlertDialog.Backdrop,
     {
       "data-slot": "backdrop",
-      className: ui.backdrop()
+      className: cn(styles.backdrop(), ui?.backdrop)
     }
-  ), /* @__PURE__ */ React.createElement(UIAlertDialog.Viewport, { "data-slot": "viewport", className: ui.viewport() }, /* @__PURE__ */ React.createElement(
-    UIAlertDialog.Popup,
+  ), /* @__PURE__ */ React.createElement(
+    UIAlertDialog.Viewport,
     {
-      "data-slot": "popup",
-      className: cn(ui.popup(), className)
+      "data-slot": "viewport",
+      className: cn(styles.viewport(), ui?.viewport)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
-      "span",
+    /* @__PURE__ */ React.createElement(
+      UIAlertDialog.Popup,
       {
-        "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
-      }
-    )),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIAlertDialog.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
-      UIAlertDialog.Description,
-      {
-        "data-slot": "description",
-        className: ui.description()
+        "data-slot": "popup",
+        className: cn(styles.popup(), ui?.popup, className)
       },
-      description
-    ) : null, children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, /* @__PURE__ */ React.createElement(
-      UIAlertDialog.Close,
-      {
-        onClick: onCancel,
-        render: /* @__PURE__ */ React.createElement(Button, { label: cancelLabel })
-      }
-    ), /* @__PURE__ */ React.createElement(
-      UIAlertDialog.Close,
-      {
-        onClick: onConfirm,
-        render: /* @__PURE__ */ React.createElement(Button, { label: confirmLabel })
-      }
-    )))
-  ))));
+      /* @__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(
+        "div",
+        {
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
+        },
+        /* @__PURE__ */ React.createElement(
+          UIAlertDialog.Title,
+          {
+            "data-slot": "title",
+            className: cn(styles.title(), ui?.title)
+          },
+          title
+        ),
+        description ? /* @__PURE__ */ React.createElement(
+          UIAlertDialog.Description,
+          {
+            "data-slot": "description",
+            className: cn(styles.description(), ui?.description)
+          },
+          description
+        ) : null,
+        children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: cn(styles.body(), ui?.body) }, children) : null,
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            "data-slot": "footer",
+            className: cn(styles.footer(), ui?.footer)
+          },
+          /* @__PURE__ */ React.createElement(
+            UIAlertDialog.Close,
+            {
+              onClick: onCancel,
+              render: /* @__PURE__ */ React.createElement(Button, { label: cancelLabel })
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            UIAlertDialog.Close,
+            {
+              onClick: onConfirm,
+              render: /* @__PURE__ */ React.createElement(Button, { label: confirmLabel })
+            }
+          )
+        )
+      )
+    )
+  )));
 }
 export { AlertDialog };

package/dist/components/button.d.ts

@@ -1,12 +1,16 @@
 import { type ButtonProps as UIButtonProps } from "@base-ui/react/button";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/button";
+type Button = ComponentConfig<typeof theme>;
 interface ButtonProps extends Omit<UIButtonProps, "ref" | "style" | "className">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the outer click area. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Button["slots"];
     /** Text or content rendered inside the button. */
     label?: React.ReactNode;
     /** Icon rendered before the label. */
@@ -14,6 +18,6 @@ interface ButtonProps extends Omit<UIButtonProps, "ref" | "style" | "className">
     /** Icon rendered after the label. */
     trailingIcon?: React.ReactNode;
 }
-declare function Button({ className, children, label, leadingIcon, trailingIcon, size, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ className, ui, children, label, leadingIcon, trailingIcon, size, ...props }: ButtonProps): React.JSX.Element;
 export { Button };
 export type { ButtonProps };

package/dist/components/button.mjs

@@ -7,6 +7,7 @@ import * as React from "react";
 import theme from "../theme/button.mjs";
 function Button({
   className,
+  ui,
   children,
   label,
   leadingIcon,
@@ -14,34 +15,42 @@ function Button({
   size,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   return /* @__PURE__ */ React.createElement(
     UIButton,
     {
       "data-slot": "root",
-      className: cn(ui.root(), className),
+      className: cn(styles.root(), ui?.root, className),
       ...props
     },
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "base", className: ui.base() }, /* @__PURE__ */ React.createElement("span", { "data-slot": "glass", "aria-hidden": "true", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("span", { "data-slot": "base", className: cn(styles.base(), ui?.base) }, /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "overlay",
-        className: ui.overlay(),
-        "aria-hidden": "true"
-      }
-    )), leadingIcon ? /* @__PURE__ */ React.createElement(
+        "data-slot": "glass",
+        "aria-hidden": "true",
+        className: cn(styles.glass(), ui?.glass)
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "data-slot": "overlay",
+          className: cn(styles.overlay(), ui?.overlay),
+          "aria-hidden": "true"
+        }
+      )
+    ), leadingIcon ? /* @__PURE__ */ React.createElement(
       "span",
       {
         "data-slot": "leading-icon",
-        className: ui.leadingIcon(),
+        className: cn(styles.leadingIcon(), ui?.leadingIcon),
         "aria-hidden": "true"
       },
       leadingIcon
-    ) : null, /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label || children), trailingIcon ? /* @__PURE__ */ React.createElement(
+    ) : null, /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: cn(styles.label(), ui?.label) }, label || children), trailingIcon ? /* @__PURE__ */ React.createElement(
       "span",
       {
         "data-slot": "trailing-icon",
-        className: ui.trailingIcon(),
+        className: cn(styles.trailingIcon(), ui?.trailingIcon),
         "aria-hidden": "true"
       },
       trailingIcon

package/dist/components/card.d.ts

@@ -1,7 +1,12 @@
 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"> & {
     /** Classes merged into the root element. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Card["slots"];
     /** Optional visible title rendered inside the card header. */
     title?: React.ReactNode;
     /** Optional supporting copy rendered under the title. */
@@ -9,6 +14,6 @@ type CardProps = Omit<React.ComponentProps<"div">, "title"> & {
     /** Optional footer row rendered below the body. */
     footer?: React.ReactNode;
 };
-declare function Card({ className, title, description, footer, children, ...props }: CardProps): React.JSX.Element;
+declare function Card({ className, ui, title, description, footer, children, ...props }: CardProps): React.JSX.Element;
 export { Card };
 export type { CardProps };

package/dist/components/card.mjs

@@ -3,22 +3,45 @@ import * as React from "react";
 import theme from "../theme/card.mjs";
 function Card({
   className,
+  ui,
   title,
   description,
   footer,
   children,
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-slot": "root",
-      className: cn(ui.root(), className),
+      className: cn(styles.root(), ui?.root, className),
       ...props
     },
-    /* @__PURE__ */ React.createElement("div", { "aria-hidden": "true", className: ui.glass() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", className: ui.overlay() })),
-    /* @__PURE__ */ React.createElement("div", { className: ui.layout() }, title || description ? /* @__PURE__ */ React.createElement("div", { "data-slot": "header", className: ui.header() }, title ? /* @__PURE__ */ React.createElement("div", { "data-slot": "title", className: ui.title() }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { "data-slot": "description", className: ui.description() }, description) : null) : null, children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, footer ? /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, footer) : null)
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "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("div", { "data-slot": "layout", className: cn(styles.layout(), ui?.layout) }, title || description ? /* @__PURE__ */ React.createElement("div", { "data-slot": "header", className: cn(styles.header(), ui?.header) }, title ? /* @__PURE__ */ React.createElement("div", { "data-slot": "title", className: cn(styles.title(), ui?.title) }, title) : null, description ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-slot": "description",
+        className: cn(styles.description(), ui?.description)
+      },
+      description
+    ) : null) : null, children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: cn(styles.body(), ui?.body) }, children) : null, footer ? /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: cn(styles.footer(), ui?.footer) }, footer) : null)
   );
 }
 export { Card };

package/dist/components/checkbox.d.ts

@@ -1,17 +1,21 @@
 import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/checkbox";
+type Checkbox = ComponentConfig<typeof theme>;
 interface CheckboxProps extends Omit<UICheckbox.Root.Props, "className" | "children" | "style" | "ref">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the Base UI checkbox root. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Checkbox["slots"];
     /** Visible label. */
     label?: React.ReactNode;
     /** Optional supporting text. */
     description?: React.ReactNode;
 }
-declare function Checkbox({ className, label, description, size, indeterminate, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ className, ui, label, description, size, indeterminate, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };
 export type { CheckboxProps };