@xingxingmofashu/ui 0.1.0-beta.2 → 0.1.1

package/README.md

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

package/dist/components/accordion.d.ts

@@ -1,7 +1,7 @@
 import { Accordion as UIAccordion } from "@base-ui/react/accordion";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
-import theme from "../theme/accordion.js";
+import theme from "../theme/accordion";
 /** One panel managed by the accordion. */
 type AccordionItemProps = {
     /** Value that identifies the item in the accordion value. */

package/dist/components/{accordion.js → accordion.mjs}

@@ -2,7 +2,7 @@
 import { Accordion as UIAccordion } from "@base-ui/react/accordion";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/accordion.js";
+import theme from "../theme/accordion.mjs";
 function Accordion({
   className,
   size,

package/dist/components/{alert-dialog.js → alert-dialog.mjs}

@@ -2,8 +2,8 @@
 import { AlertDialog as UIAlertDialog } from "@base-ui/react/alert-dialog";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/alert-dialog.js";
-import { Button } from "./button.js";
+import theme from "../theme/alert-dialog.mjs";
+import { Button } from "./button.mjs";
 function AlertDialog({
   title,
   description,

package/dist/components/button.d.ts

@@ -1,7 +1,7 @@
 import { type ButtonProps as UIButtonProps } from "@base-ui/react/button";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
-import theme from "../theme/button.js";
+import theme from "../theme/button";
 interface ButtonProps extends Omit<UIButtonProps, "ref" | "style" | "className">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;

package/dist/components/{button.js → button.mjs}

@@ -4,7 +4,7 @@ import {
 } from "@base-ui/react/button";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/button.js";
+import theme from "../theme/button.mjs";
 function Button({
   className,
   children,

package/dist/components/{card.js → card.mjs}

@@ -1,6 +1,6 @@
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/card.js";
+import theme from "../theme/card.mjs";
 function Card({
   className,
   title,

package/dist/components/checkbox.d.ts

@@ -1,8 +1,10 @@
 import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
-import theme from "../theme/checkbox.js";
-interface CheckboxProps extends Omit<React.ComponentProps<typeof UICheckbox.Root>, "className" | "children" | "style">, VariantProps<typeof theme> {
+import theme from "../theme/checkbox";
+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;
     /** Visible label. */

package/dist/components/{checkbox.js → checkbox.mjs}

@@ -2,7 +2,7 @@
 import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/checkbox.js";
+import theme from "../theme/checkbox.mjs";
 function CheckIcon({ indeterminate }) {
   return /* @__PURE__ */ React.createElement(
     "svg",

package/dist/components/{dialog.js → dialog.mjs}

@@ -2,7 +2,7 @@
 import { Dialog as UIDialog } from "@base-ui/react/dialog";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/dialog.js";
+import theme from "../theme/dialog.mjs";
 function Dialog({
   title,
   description,

package/dist/components/drawer.d.ts

@@ -0,0 +1,19 @@
+import { Drawer as UIDrawer } from "@base-ui/react/drawer";
+import * as React from "react";
+interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className" | "style" | "swipeDirection"> {
+    /** Drawer heading. */
+    title: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Extra content between the description and the footer. */
+    children?: React.ReactNode;
+    /** Action area rendered at the bottom of the drawer. */
+    footer?: React.ReactNode;
+    /** Edge the drawer slides in from. */
+    direction?: NonNullable<UIDrawer.Root.Props["swipeDirection"]>;
+    /** Tailwind classes merged into the popup. */
+    className?: any;
+}
+declare function Drawer({ title, description, children, footer, direction, className, ...props }: DrawerProps): React.JSX.Element;
+export { Drawer };
+export type { DrawerProps };

package/dist/components/drawer.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { Drawer as UIDrawer } from "@base-ui/react/drawer";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/drawer.mjs";
+function Drawer({
+  title,
+  description,
+  children,
+  footer,
+  direction = "down",
+  className,
+  ...props
+}) {
+  const ui = theme({ direction });
+  return /* @__PURE__ */ React.createElement(UIDrawer.Root, { ...props, swipeDirection: direction }, /* @__PURE__ */ React.createElement(UIDrawer.Portal, null, /* @__PURE__ */ React.createElement(UIDrawer.Backdrop, { "data-slot": "backdrop", className: ui.backdrop() }), /* @__PURE__ */ React.createElement(UIDrawer.Viewport, { "data-slot": "viewport", className: ui.viewport() }, /* @__PURE__ */ React.createElement(
+    UIDrawer.Popup,
+    {
+      "data-slot": "popup",
+      className: cn(ui.popup(), className)
+    },
+    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "overlay",
+        className: ui.overlay()
+      }
+    )),
+    /* @__PURE__ */ React.createElement(UIDrawer.Content, { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIDrawer.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
+      UIDrawer.Description,
+      {
+        "data-slot": "description",
+        className: ui.description()
+      },
+      description
+    ) : 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)
+  ))));
+}
+export { Drawer };

package/dist/components/input.d.ts

@@ -1,8 +1,8 @@
 import { Input as UIInput } from "@base-ui/react/input";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
-import theme from "../theme/input.js";
-interface InputProps extends Omit<React.ComponentProps<typeof UIInput>, "className" | "children" | "size" | "style">, VariantProps<typeof theme> {
+import theme from "../theme/input";
+interface InputProps extends Omit<UIInput.Props, "className" | "children" | "size" | "style">, VariantProps<typeof theme> {
     /** Tailwind classes merged into the root element. */
     className?: string;
     /** Visible label associated with the input. */

package/dist/components/{input.js → input.mjs}

@@ -2,7 +2,7 @@
 import { Input as UIInput } from "@base-ui/react/input";
 import { cn } from "cn";
 import * as React from "react";
-import theme from "../theme/input.js";
+import theme from "../theme/input.mjs";
 function Input({
   className,
   label,

package/dist/components/popover.d.ts

@@ -0,0 +1,32 @@
+import { Popover as UIPopover } from "@base-ui/react/popover";
+import * as React from "react";
+type PositionerProps = React.ComponentProps<typeof UIPopover.Positioner>;
+type PopoverProps = Omit<UIPopover.Root.Props, "children"> & {
+    /** Element that opens the popover. It must forward props and refs. */
+    trigger: React.ReactElement;
+    /** Popover heading. */
+    title: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Content between the description and the footer. */
+    children?: React.ReactNode;
+    /** Action area rendered at the bottom of the popover. */
+    footer?: React.ReactNode;
+    /** Whether to render the directional arrow. */
+    arrow?: boolean;
+    /** Side of the trigger the popover is placed on. */
+    side?: PositionerProps["side"];
+    /** Alignment of the popover relative to the trigger. */
+    align?: PositionerProps["align"];
+    /** Distance between the trigger and the popup in pixels. */
+    sideOffset?: PositionerProps["sideOffset"];
+    /** Offset along the alignment axis in pixels. */
+    alignOffset?: PositionerProps["alignOffset"];
+    /** Padding between the popup and the edge of the collision boundary. */
+    collisionPadding?: PositionerProps["collisionPadding"];
+    /** Tailwind classes merged into the popup. */
+    className?: any;
+};
+declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, ...props }: PopoverProps): React.JSX.Element;
+export { Popover };
+export type { PopoverProps };

package/dist/components/popover.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { Popover as UIPopover } from "@base-ui/react/popover";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/popover.mjs";
+function Popover({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  arrow = true,
+  side,
+  align,
+  sideOffset = 10,
+  alignOffset,
+  collisionPadding,
+  className,
+  ...props
+}) {
+  const ui = theme();
+  return /* @__PURE__ */ React.createElement(UIPopover.Root, { ...props }, /* @__PURE__ */ React.createElement(UIPopover.Trigger, { render: trigger }), /* @__PURE__ */ React.createElement(UIPopover.Portal, null, /* @__PURE__ */ React.createElement(
+    UIPopover.Positioner,
+    {
+      "data-slot": "positioner",
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      className: ui.positioner()
+    },
+    /* @__PURE__ */ React.createElement(
+      UIPopover.Popup,
+      {
+        "data-slot": "popup",
+        className: cn(ui.popup(), className)
+      },
+      /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-slot": "overlay",
+          className: ui.overlay()
+        }
+      )),
+      arrow ? /* @__PURE__ */ React.createElement(UIPopover.Arrow, { "data-slot": "arrow", className: ui.arrow() }) : null,
+      /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIPopover.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
+        UIPopover.Description,
+        {
+          "data-slot": "description",
+          className: ui.description()
+        },
+        description
+      ) : 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)
+    )
+  )));
+}
+export { Popover };

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,21 @@
+import { ScrollArea as UIScrollArea } from "@base-ui/react/scroll-area";
+import * as React from "react";
+/** Scrollbar axes rendered by the scroll area. */
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+type ScrollAreaProps = Omit<UIScrollArea.Root.Props, "children" | "className" | "style"> & {
+    /** Scrollable content. */
+    children?: React.ReactNode;
+    /** Scrollbar axes to render. Defaults to `"vertical"`. */
+    orientation?: ScrollAreaOrientation;
+    /** Tailwind classes merged into the root. */
+    className?: any;
+};
+/**
+ * A native scroll container with custom liquid glass scrollbars.
+ *
+ * The root owns the visible glass surface. Give it a height (for example
+ * `className="h-64"`) to create a scrollable viewport.
+ */
+declare function ScrollArea({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, orientation, ...props }: ScrollAreaProps): React.JSX.Element;
+export { ScrollArea };
+export type { ScrollAreaOrientation, ScrollAreaProps };

package/dist/components/scroll-area.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { ScrollArea as UIScrollArea } from "@base-ui/react/scroll-area";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/scroll-area.mjs";
+function ScrollArea({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  children,
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  const ui = theme();
+  return /* @__PURE__ */ React.createElement(
+    UIScrollArea.Root,
+    {
+      ...props,
+      "data-slot": "root",
+      "data-orientation": orientation,
+      className: cn(ui.root(), className)
+    },
+    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "overlay",
+        className: ui.overlay()
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      UIScrollArea.Viewport,
+      {
+        "aria-describedby": ariaDescribedBy,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "data-slot": "viewport",
+        className: ui.viewport()
+      },
+      /* @__PURE__ */ React.createElement(UIScrollArea.Content, { "data-slot": "content", className: ui.content() }, children)
+    ),
+    orientation !== "horizontal" ? /* @__PURE__ */ React.createElement(
+      UIScrollArea.Scrollbar,
+      {
+        "data-slot": "scrollbar",
+        orientation: "vertical",
+        className: ui.scrollbar()
+      },
+      /* @__PURE__ */ React.createElement(UIScrollArea.Thumb, { "data-slot": "thumb", className: ui.thumb() })
+    ) : null,
+    orientation !== "vertical" ? /* @__PURE__ */ React.createElement(
+      UIScrollArea.Scrollbar,
+      {
+        "data-slot": "scrollbar",
+        orientation: "horizontal",
+        className: ui.scrollbar()
+      },
+      /* @__PURE__ */ React.createElement(UIScrollArea.Thumb, { "data-slot": "thumb", className: ui.thumb() })
+    ) : null,
+    orientation === "both" ? /* @__PURE__ */ React.createElement(UIScrollArea.Corner, { "data-slot": "corner", className: ui.corner() }) : null
+  );
+}
+export { ScrollArea };

package/dist/components/{slider.js → slider.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import { Slider as UISlider } from "@base-ui/react/slider";
 import { cn } from "cn";
-import theme from "../theme/slider.js";
+import theme from "../theme/slider.mjs";
 function Slider({
   className,
   value,

package/dist/components/switch.d.ts

@@ -1,8 +1,10 @@
 import { Switch as UISwitch } from "@base-ui/react/switch";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
-import theme from "../theme/switch.js";
-interface SwitchProps extends Omit<React.ComponentProps<typeof UISwitch.Root>, "className" | "children" | "style">, VariantProps<typeof theme> {
+import theme from "../theme/switch";
+interface SwitchProps extends Omit<UISwitch.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 switch root. */
     className?: string;
     /** Visible label. */