@xingxingmofashu/ui 0.1.3 → 0.1.5

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">
@@ -20,27 +20,15 @@ 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
 > 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](https://xingxingmofashu.github.io/ui/docs/en/get-started/introduction)
@@ -106,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
@@ -164,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/composables/use-toast.d.ts

@@ -3,5 +3,9 @@ import { Toast as UIToast } from "@base-ui/react/toast";
  * Returns the toast manager connected to the nearest `ToastProvider`.
  */
 declare const useToast: typeof UIToast.useToastManager;
-export { useToast };
+/**
+ * Creates a toast manager for adding notifications outside the React tree.
+ */
+declare const createToastManager: typeof UIToast.createToastManager;
+export { createToastManager, useToast };
 export type { ToastManager, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject, } from "@base-ui/react/toast";

package/dist/composables/use-toast.mjs

@@ -1,4 +1,5 @@
 "use client";
 import { Toast as UIToast } from "@base-ui/react/toast";
 const useToast = UIToast.useToastManager;
-export { useToast };
+const createToastManager = UIToast.createToastManager;
+export { createToastManager, useToast };

package/dist/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,100%,.06);--ui-glass-border:hsla(0,0%,100%,.14);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.9);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:2px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,2px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.9)) contrast(var(--ui-glass-contrast,3));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
+@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}

package/dist/index.d.ts

@@ -8,11 +8,12 @@ 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 } from "./composables/create-toast-manager";
-export { useToast, type ToastManager, type ToastManagerAddOptions, type ToastManagerPromiseOptions, type ToastManagerUpdateOptions, type ToastObject, } from "./composables/use-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";
 export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group";

package/dist/index.mjs

@@ -10,17 +10,21 @@ 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
 } from "./components/toast.mjs";
-export { createToastManager } from "./composables/create-toast-manager.mjs";
 export {
+  createToastManager,
   useToast
 } from "./composables/use-toast.mjs";
 export { Toggle } from "./components/toggle.mjs";

package/dist/internal/tv.d.ts

@@ -7,10 +7,6 @@ type ComponentSlots<T extends {
 }> = Id<{
     [K in keyof T["slots"]]?: ClassValue;
 }>;
-/**
- * Minimal tailwind-variants component config used to derive prop types from a
- * theme recipe. Mirrors Nuxt UI's `ComponentConfig` slot mapping.
- */
 export type ComponentConfig<T extends Record<string, any>> = {
     slots: ComponentSlots<T>;
 };

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;