@xingxingmofashu/ui 0.1.2 → 0.1.4

package/README.md

@@ -1,7 +1,7 @@
 <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">
+  <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">
 </picture>
 
 <div align="center">
@@ -15,14 +15,14 @@
 </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
+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
@@ -33,6 +33,10 @@ Toggle, and Toggle Group.
 
 - [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
 
@@ -90,57 +94,6 @@ import buttonTheme from "@xingxingmofashu/ui/theme/button";
 
 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 tokens are selected by `.light` / `.dark`, or by
-`data-theme="light"` / `data-theme="dark"`:
-
-```html
-<html class="dark">
-```
-
-or:
-
-```html
-<html data-theme="dark">
-```
-
-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
 
 ```bash
@@ -169,7 +122,6 @@ 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)
 

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

@@ -6,27 +6,52 @@ 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({
@@ -34,33 +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(
-        PlusIcon,
+        UIAccordion.Trigger,
         {
-          "data-slot": "indicator-icon",
-          className: ui.indicatorIcon()
-        }
+          "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(
+        "div",
+        {
+          "data-slot": "panel-content",
+          className: cn(styles.panelContent(), ui?.panelContent)
+        },
+        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, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...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 };