@xingxingmofashu/ui 0.2.0 → 0.3.0

package/README.md

@@ -39,6 +39,16 @@ Toast, Toggle, Toggle Group, and Tooltip.
 - [llms-full.txt](https://xingxingmofashu.github.io/ui/llms-full.txt) — every
   guide and component page in one file
 
+## Agent skill
+
+The portable skill in
+[`skills/xingxingmofashu-ui`](https://github.com/xingxingmofashu/ui/tree/main/skills/xingxingmofashu-ui)
+teaches coding agents how to install, compose, theme, and troubleshoot the
+components. It lives in the repository and is not included in the npm package.
+See the
+[skill README](https://github.com/xingxingmofashu/ui/blob/main/skills/xingxingmofashu-ui/README.md)
+for OpenCode, Claude Code, and compatible agent setup.
+
 ## Installation
 
 ```bash [pnpm]
@@ -142,7 +152,7 @@ import { Button } from "@xingxingmofashu/ui/components/button";
 import buttonTheme from "@xingxingmofashu/ui/theme/button";
 ```
 
-Toast hooks live under `@xingxingmofashu/ui/composables`.
+Toast hooks live under `@xingxingmofashu/ui/composables/use-toast`.
 
 ## Development
 
@@ -151,15 +161,16 @@ 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 test:e2e        # run the Playwright browser suite
 pnpm typecheck       # typecheck the package
 pnpm docs:dev        # docs site on http://localhost:3001
-pnpm playground:dev  # component playground on http://localhost:3002
+pnpm playground:dev  # React REPL on http://localhost:3002
 ```
 
-The documentation site lives in `docs/` and the playground lives in
-`playground/`; both import the package from the workspace.
+The documentation site lives in `docs/` and the React REPL lives in
+`playground/`; both import the package from the workspace. The REPL compiles
+TSX in the browser with Monaco's TypeScript worker and runs the result against
+a small import whitelist.
 
 ## Contribution
 

package/dist/components/accordion.d.ts

@@ -5,9 +5,9 @@ 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" | "content" | "style" | "title" | "value"> & {
+type AccordionItemProps = Omit<UIAccordion.Item.Props, "children" | "className" | "content" | "title" | "value"> & {
     /** Value that identifies the item in the accordion value. */
-    value: Value;
+    value: any;
     /** Visible heading inside the trigger. */
     title: React.ReactNode;
     /** Panel content. */
@@ -19,14 +19,14 @@ type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.P
     /** 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> & {
+type AccordionProps<Value = any> = Omit<UIAccordion.Root.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
     /** Panels rendered by the accordion. */
-    items: readonly AccordionItemProps<Value>[];
+    items: readonly AccordionItemProps[];
     /** Tailwind classes merged into the root. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Accordion["slots"];
 };
-declare function Accordion<Value extends string = string>({ className, ui, size, items, ...props }: AccordionProps<Value>): React.JSX.Element;
+declare function Accordion<Value = any>({ className, ui, size, items, ...props }: AccordionProps<Value>): React.JSX.Element;
 export { Accordion };
 export type { AccordionItemProps, AccordionProps };

package/dist/components/accordion.mjs

@@ -35,10 +35,10 @@ function Accordion({
         }
       )
     ),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: cn(styles.content(), ui?.content) }, items.map((item) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: cn(styles.content(), ui?.content) }, items.map((item, index) => /* @__PURE__ */ React.createElement(
       AccordionItem,
       {
-        key: item.value,
+        key: index,
         ...item,
         ui: {
           item: cn(ui?.item, item.ui?.item),

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

@@ -20,9 +20,11 @@ type AlertDialogProps = Omit<UIAlertDialog.Root.Props, "children"> & {
     onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: AlertDialog["slots"];
 };
-declare function AlertDialog({ title, description, children, cancelLabel, confirmLabel, onCancel, onConfirm, className, ui, ...props }: AlertDialogProps): React.JSX.Element;
+declare function AlertDialog({ title, description, children, cancelLabel, confirmLabel, onCancel, onConfirm, className, style, ui, ...props }: AlertDialogProps): React.JSX.Element;
 export { AlertDialog };
 export type { AlertDialogProps };

package/dist/components/alert-dialog.mjs

@@ -13,6 +13,7 @@ function AlertDialog({
   onCancel,
   onConfirm,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -33,7 +34,8 @@ function AlertDialog({
       UIAlertDialog.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/button.d.ts

@@ -4,7 +4,7 @@ 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> {
+interface ButtonProps extends Omit<UIButtonProps, "ref" | "className">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the outer click area. */

package/dist/components/card.d.ts

@@ -2,7 +2,7 @@ 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">, "style" | "title"> & {
+type CardProps = Omit<React.ComponentProps<"div">, "title"> & {
     /** Classes merged into the root element. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

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

@@ -6,9 +6,9 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/checkbox-group";
 type CheckboxGroup = ComponentConfig<typeof theme>;
 /** One entry in the group. */
-type CheckboxGroupItemProps<Value extends string = string> = Omit<UICheckbox.Root.Props, "checked" | "defaultChecked" | "children" | "className" | "onCheckedChange" | "parent" | "style" | "value"> & {
+type CheckboxGroupItemProps = Omit<UICheckbox.Root.Props, "checked" | "defaultChecked" | "children" | "className" | "onCheckedChange" | "parent" | "value"> & {
     /** Value that identifies the option in the group value. */
-    value: Value;
+    value: string;
     /** Visible label rendered next to the control. */
     label?: React.ReactNode;
     /** Supporting text rendered under the label. */
@@ -18,24 +18,24 @@ type CheckboxGroupItemProps<Value extends string = string> = Omit<UICheckbox.Roo
     /** Tailwind classes for control slots, keyed by `data-slot`. */
     ui?: Partial<Pick<CheckboxGroup["slots"], "item" | "box" | "fill" | "glass" | "overlay" | "indicator" | "indicatorIcon" | "wrapper" | "itemLabel" | "itemDescription">>;
 };
-type CheckboxGroupProps<Value extends string = string> = Omit<UICheckboxGroup.Props, "allValues" | "children" | "className" | "defaultValue" | "onValueChange" | "style" | "value"> & VariantProps<typeof theme> & Pick<UICheckbox.Root.Props, "name" | "form" | "readOnly"> & {
+type CheckboxGroupProps = Omit<UICheckboxGroup.Props, "allValues" | "children" | "className" | "defaultValue" | "onValueChange" | "value"> & VariantProps<typeof theme> & Pick<UICheckbox.Root.Props, "name" | "form" | "readOnly"> & {
     /** Entries rendered by the group. */
-    items: readonly CheckboxGroupItemProps<Value>[];
+    items: readonly CheckboxGroupItemProps[];
     /** Visible label for the group. */
     label?: React.ReactNode;
     /** Supporting text rendered under the group label. */
     description?: React.ReactNode;
     /** Controlled checked values. */
-    value?: readonly Value[];
+    value?: readonly string[];
     /** Initial checked values when uncontrolled. */
-    defaultValue?: readonly Value[];
+    defaultValue?: readonly string[];
     /** Called when a checkbox in the group is ticked or unticked. */
-    onValueChange?: (value: Value[], details: UICheckboxGroup.ChangeEventDetails) => void;
+    onValueChange?: (value: string[], details: UICheckboxGroup.ChangeEventDetails) => void;
     /** Tailwind classes merged into the group root. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: CheckboxGroup["slots"];
 };
-declare function CheckboxGroup<Value extends string = string>({ className, ui, size, items, label, description, name, form, readOnly, disabled, value, defaultValue, onValueChange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: CheckboxGroupProps<Value>): React.JSX.Element;
+declare function CheckboxGroup({ className, ui, size, items, label, description, name, form, readOnly, disabled, value, defaultValue, onValueChange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: CheckboxGroupProps): React.JSX.Element;
 export { CheckboxGroup };
 export type { CheckboxGroupItemProps, CheckboxGroupProps };

package/dist/components/checkbox-group.mjs

@@ -44,13 +44,13 @@ function CheckboxGroup({
     UICheckboxGroup,
     {
       ...props,
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
       "aria-describedby": describedBy,
       "aria-label": ariaLabel,
       ...labelledBy ? { "aria-labelledby": labelledBy } : {},
       disabled: fieldsetDisabled,
-      value,
-      defaultValue,
-      onValueChange: handleValueChange,
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className)
     },

package/dist/components/checkbox.d.ts

@@ -4,7 +4,7 @@ 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> {
+interface CheckboxProps extends Omit<UICheckbox.Root.Props, "className" | "children" | "ref">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the Base UI checkbox root. */

package/dist/components/dialog.d.ts

@@ -14,9 +14,11 @@ type DialogProps = Omit<UIDialog.Root.Props, "children"> & {
     footer?: React.ReactNode;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Dialog["slots"];
 };
-declare function Dialog({ title, description, children, footer, className, ui, ...props }: DialogProps): React.JSX.Element;
+declare function Dialog({ title, description, children, footer, className, style, ui, ...props }: DialogProps): React.JSX.Element;
 export { Dialog };
 export type { DialogProps };

package/dist/components/dialog.mjs

@@ -9,6 +9,7 @@ function Dialog({
   children,
   footer,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -29,7 +30,8 @@ function Dialog({
       UIDialog.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/drawer.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/drawer";
 type Drawer = ComponentConfig<typeof theme>;
-interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className" | "style" | "swipeDirection"> {
+interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className" | "swipeDirection"> {
     /** Drawer heading. */
     title: React.ReactNode;
     /** Supporting copy under the title. */
@@ -16,9 +16,11 @@ interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className"
     direction?: NonNullable<UIDrawer.Root.Props["swipeDirection"]>;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Drawer["slots"];
 }
-declare function Drawer({ title, description, children, footer, direction, className, ui, ...props }: DrawerProps): React.JSX.Element;
+declare function Drawer({ title, description, children, footer, direction, className, style, ui, ...props }: DrawerProps): React.JSX.Element;
 export { Drawer };
 export type { DrawerProps };

package/dist/components/drawer.mjs

@@ -10,6 +10,7 @@ function Drawer({
   footer,
   direction = "down",
   className,
+  style,
   ui,
   ...props
 }) {
@@ -30,7 +31,8 @@ function Drawer({
       UIDrawer.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/field.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/field";
 type Field = ComponentConfig<typeof theme>;
-interface FieldProps extends Omit<UIField.Root.Props, "children" | "className" | "style">, VariantProps<typeof theme> {
+interface FieldProps extends Omit<UIField.Root.Props, "children" | "className">, VariantProps<typeof theme> {
     /** Single Base UI control labelled and validated by the field. */
     children: React.ReactElement;
     /** Visible label associated with the control. */

package/dist/components/fieldset.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/fieldset";
 type Fieldset = ComponentConfig<typeof theme>;
-interface FieldsetProps extends Omit<UIFieldset.Root.Props, "children" | "className" | "style"> {
+interface FieldsetProps extends Omit<UIFieldset.Root.Props, "children" | "className"> {
     /** Visible legend naming the group. */
     legend?: React.ReactNode;
     /** Fields and controls grouped by the fieldset. */

package/dist/components/form.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/form";
 type Form = ComponentConfig<typeof theme>;
-type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Omit<UIForm.Props<FormValues>, "className" | "style"> & {
+type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Omit<UIForm.Props<FormValues>, "className"> & {
     /** Tailwind classes merged into the form element. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

package/dist/components/input.d.ts

@@ -7,6 +7,8 @@ type Input = ComponentConfig<typeof theme>;
 interface InputProps extends Omit<UIInput.Props, "className" | "children" | "size" | "style">, VariantProps<typeof theme> {
     /** Tailwind classes merged into the root element. */
     className?: string;
+    /** Inline styles merged into the outer root. Use `ui.input` for the native input. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Input["slots"];
     /** Icon rendered before the input. */
@@ -14,6 +16,6 @@ interface InputProps extends Omit<UIInput.Props, "className" | "children" | "siz
     /** Icon rendered after the input. */
     trailingIcon?: React.ReactNode;
 }
-declare function Input({ className, ui, leadingIcon, trailingIcon, size, disabled, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, ui, leadingIcon, trailingIcon, size, disabled, style, ...props }: InputProps): React.JSX.Element;
 export { Input };
 export type { InputProps };

package/dist/components/input.mjs

@@ -11,6 +11,7 @@ function Input({
   trailingIcon,
   size,
   disabled,
+  style,
   ...props
 }) {
   const styles = theme({ size });
@@ -20,7 +21,8 @@ function Input({
     {
       "data-slot": "root",
       "data-disabled": fieldsetDisabled || void 0,
-      className: cn(styles.root(), ui?.root, className)
+      className: cn(styles.root(), ui?.root, className),
+      style
     },
     /* @__PURE__ */ React.createElement(
       "span",

package/dist/components/menu.d.ts

@@ -4,10 +4,10 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/menu";
 type Menu = ComponentConfig<typeof theme>;
 /** One action item in the menu. */
-type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "children" | "className" | "style" | "label" | "onClick"> & {
+type MenuItemProps = Omit<UIMenu.Item.Props, "children" | "className" | "label" | "onClick"> & {
     type?: "item";
     /** Value that identifies the item in the menu. */
-    value: Value;
+    value: string;
     /** Visible content inside the item. */
     label: React.ReactNode;
     /** Plain-text label used for keyboard navigation. Defaults to the rendered text. */
@@ -24,35 +24,37 @@ type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "chi
     ui?: Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A labelled group of menu items. */
-type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "children" | "className" | "style"> & {
+type MenuGroupProps = Omit<UIMenu.Group.Props, "children" | "className"> & {
     type: "group";
     /** Group heading. */
     label: React.ReactNode;
     /** Items rendered inside the group. */
-    items: readonly MenuItemProps<Value>[];
+    items: readonly MenuItemProps[];
     /** Tailwind classes merged into the group. */
     className?: string;
     /** Tailwind classes for the group slots. */
     ui?: Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A separator between menu items. */
-type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation" | "style"> & {
+type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation"> & {
     type: "separator";
     /** Tailwind classes merged into the separator. */
     className?: string;
     /** Tailwind classes for the separator slot. */
     ui?: Partial<Pick<Menu["slots"], "separator">>;
 };
-type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className" | "style"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
+type MenuProps = Omit<UIMenu.Root.Props, "children" | "className"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
     /** Element that opens the menu. It must forward props and refs. */
     trigger: React.ReactElement;
     /** Items, groups, and separators rendered by the menu. */
-    items: readonly (MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps)[];
+    items: readonly (MenuItemProps | MenuGroupProps | MenuSeparatorProps)[];
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Menu["slots"];
 };
-declare function Menu<Value extends string = string>({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: MenuProps<Value>): React.JSX.Element;
+declare function Menu({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, style, ui, ...props }: MenuProps): React.JSX.Element;
 export { Menu };
 export type { MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };

package/dist/components/menu.mjs

@@ -12,6 +12,7 @@ function Menu({
   alignOffset,
   collisionPadding,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -31,7 +32,8 @@ function Menu({
       UIMenu.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",
@@ -85,7 +87,7 @@ function Menu({
         return /* @__PURE__ */ React.createElement(
           MenuActionItem,
           {
-            key: entry.value,
+            key: index,
             ...entry,
             ui: {
               item: cn(ui?.item, entry.ui?.item),
@@ -172,10 +174,10 @@ function MenuGroup({
       },
       label
     ),
-    items.map((item) => /* @__PURE__ */ React.createElement(
+    items.map((item, index) => /* @__PURE__ */ React.createElement(
       MenuActionItem,
       {
-        key: item.value,
+        key: index,
         ...item,
         ui: {
           item: cn(ui?.item, item.ui?.item),

package/dist/components/popover.d.ts

@@ -18,9 +18,11 @@ type PopoverProps = Omit<UIPopover.Root.Props, "children"> & Pick<UIPopover.Posi
     arrow?: boolean;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Popover["slots"];
 };
-declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: PopoverProps): React.JSX.Element;
+declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, style, ui, ...props }: PopoverProps): React.JSX.Element;
 export { Popover };
 export type { PopoverProps };

package/dist/components/popover.mjs

@@ -16,6 +16,7 @@ function Popover({
   alignOffset,
   collisionPadding,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -35,7 +36,8 @@ function Popover({
       UIPopover.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/progress.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/progress";
 type Progress = ComponentConfig<typeof theme>;
-type ProgressProps = Omit<UIProgress.Root.Props, "children" | "className" | "style" | "value"> & VariantProps<typeof theme> & {
+type ProgressProps = Omit<UIProgress.Root.Props, "children" | "className" | "value"> & VariantProps<typeof theme> & {
     /** Current value. Use `null` for an indeterminate progress bar. */
     value?: number | null;
     /** Visible label for the progress bar. */

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

@@ -6,7 +6,7 @@ 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"> & {
+type RadioGroupItemProps<Value = any> = Omit<UIRadio.Root.Props<Value>, "className" | "children" | "value"> & {
     /** Value that identifies the option in the group value. */
     value: Value;
     /** Visible label rendered next to the control. */
@@ -18,7 +18,7 @@ type RadioGroupItemProps<Value extends string = string> = Omit<UIRadio.Root.Prop
     /** 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> & {
+type RadioGroupProps<Value = any> = Omit<UIRadioGroup.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
     /** Options rendered by the radio group. */
     items: readonly RadioGroupItemProps<Value>[];
     /** Visible label for the group. */
@@ -30,6 +30,6 @@ type RadioGroupProps<Value extends string = string> = Omit<UIRadioGroup.Props<Va
     /** 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, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupProps<Value>): React.JSX.Element;
+declare function RadioGroup<Value>({ className, ui, size, items, label, description, disabled, "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

@@ -59,10 +59,10 @@ function RadioGroup({
       },
       description
     ) : null) : null,
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "items", className: cn(styles.items(), ui?.items) }, items.map((item) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "items", className: cn(styles.items(), ui?.items) }, items.map((item, index) => /* @__PURE__ */ React.createElement(
       RadioGroupItem,
       {
-        key: item.value,
+        key: index,
         ...item,
         ui: {
           item: cn(ui?.item, item.ui?.item),

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

@@ -5,7 +5,7 @@ import theme from "../theme/scroll-area";
 /** Scrollbar axes rendered by the scroll area. */
 type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
 type ScrollArea = ComponentConfig<typeof theme>;
-type ScrollAreaProps = Omit<UIScrollArea.Root.Props, "children" | "className" | "style"> & {
+type ScrollAreaProps = Omit<UIScrollArea.Root.Props, "children" | "className"> & {
     /** Scrollable content. */
     children?: React.ReactNode;
     /** Scrollbar axes to render. Defaults to `"vertical"`. */

package/dist/components/select.d.ts

@@ -5,9 +5,9 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/select";
 type Select = ComponentConfig<typeof theme>;
 /** One option rendered by the select. */
-type SelectItemProps<Value extends string = string> = {
+type SelectItemProps = {
     /** Value submitted and passed to `onValueChange`. */
-    value: Value;
+    value: any;
     /** Visible content inside the option and the trigger. */
     label: React.ReactNode;
     /** Plain-text label used for keyboard navigation. Defaults to a string label. */
@@ -15,21 +15,31 @@ type SelectItemProps<Value extends string = string> = {
     /** Whether the option is disabled. */
     disabled?: boolean;
 };
-type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value>, "children" | "className" | "style" | "items" | "multiple" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & Pick<UISelect.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "alignItemWithTrigger"> & {
-    /** Options rendered by the select. */
-    items: readonly SelectItemProps<Value>[];
+/** A labelled group of options. */
+type SelectItemGroupProps = {
+    /** Visible heading rendered above the group. */
+    label: React.ReactNode;
+    /** Options in the group. */
+    items: readonly SelectItemProps[];
+};
+/** An option or a labelled group of options. */
+type SelectEntry = SelectItemProps | SelectItemGroupProps;
+/** Value shape exposed to `renderValue` for the active selection mode. */
+type SelectValue<Value, Multiple extends boolean | undefined> = Multiple extends true ? readonly Value[] : Value | null;
+type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<UISelect.Root.Props<Value, Multiple>, "children" | "className" | "items"> & VariantProps<typeof theme> & Pick<UISelect.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "alignItemWithTrigger"> & {
+    /** Options rendered by the select, optionally grouped. */
+    items: readonly SelectEntry[];
     /** Visible label associated with the trigger. */
     label?: React.ReactNode;
     /** Supporting text under the trigger. */
     description?: React.ReactNode;
     /** Text shown when no value is selected. */
     placeholder?: React.ReactNode;
-    /** Controlled value. */
-    value?: Value | null;
-    /** Initial value when uncontrolled. */
-    defaultValue?: Value | null;
-    /** Called when the selected value changes. */
-    onValueChange?: (value: Value | null, details: UISelect.Root.ChangeEventDetails) => void;
+    /**
+     * Formats the selected value inside the trigger.
+     * When provided, it overrides `placeholder`.
+     */
+    renderValue?: (value: SelectValue<Value, Multiple>) => React.ReactNode;
     /** Accessible name for the trigger when no visible label is rendered. */
     "aria-label"?: string;
     /** Names the trigger from another element. */
@@ -38,9 +48,11 @@ type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value
     "aria-describedby"?: string;
     /** Tailwind classes merged into the root element. */
     className?: string;
+    /** Inline styles merged into the root element. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Select["slots"];
 };
-declare function Select<Value extends string = string>({ className, ui, size, items, label, description, placeholder, value, defaultValue, onValueChange, side, align, sideOffset, alignOffset, collisionPadding, alignItemWithTrigger, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SelectProps<Value>): React.JSX.Element;
+declare function Select<Value, Multiple extends boolean | undefined = false>({ className, ui, size, items, label, description, placeholder, renderValue, side, align, sideOffset, alignOffset, collisionPadding, alignItemWithTrigger, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style, ...props }: SelectProps<Value, Multiple>): React.JSX.Element;
 export { Select };
-export type { SelectItemProps, SelectProps };
+export type { SelectEntry, SelectItemGroupProps, SelectItemProps, SelectProps, };