@xingxingmofashu/ui 0.2.1 → 0.3.0

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" | "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" | "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/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" | "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" | "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/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" | "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,12 +24,12 @@ 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"> & {
+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. */
@@ -43,11 +43,11 @@ type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className"
     /** Tailwind classes for the separator slot. */
     ui?: Partial<Pick<Menu["slots"], "separator">>;
 };
-type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className"> & 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. */
@@ -55,6 +55,6 @@ type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "childre
     /** 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, style, 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

@@ -87,7 +87,7 @@ function Menu({
         return /* @__PURE__ */ React.createElement(
           MenuActionItem,
           {
-            key: entry.value,
+            key: index,
             ...entry,
             ui: {
               item: cn(ui?.item, entry.ui?.item),
@@ -174,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/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" | "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" | "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/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" | "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. */
@@ -43,6 +53,6 @@ type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value
     /** 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, style, ...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, };

package/dist/components/select.mjs

@@ -15,9 +15,7 @@ function Select({
   label,
   description,
   placeholder,
-  value,
-  defaultValue,
-  onValueChange,
+  renderValue,
   side,
   align,
   sideOffset = 6,
@@ -43,157 +41,169 @@ function Select({
     ...ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {},
     ...describedBy ? { "aria-describedby": describedBy } : {}
   };
-  return /* @__PURE__ */ React.createElement(
-    UISelect.Root,
+  const flatItems = items.flatMap(
+    (entry) => "items" in entry ? entry.items : [entry]
+  );
+  function renderItem(item, key) {
+    return /* @__PURE__ */ React.createElement(
+      UISelect.Item,
+      {
+        key,
+        value: item.value,
+        disabled: item.disabled,
+        label: item.textValue ?? (typeof item.label === "string" ? item.label : void 0),
+        "data-slot": "item",
+        className: cn(styles.item(), ui?.item)
+      },
+      /* @__PURE__ */ React.createElement(
+        UISelect.ItemIndicator,
+        {
+          keepMounted: true,
+          "data-slot": "item-indicator",
+          className: cn(styles.itemIndicator(), ui?.itemIndicator)
+        },
+        /* @__PURE__ */ React.createElement(CheckIcon, null)
+      ),
+      /* @__PURE__ */ React.createElement(
+        UISelect.ItemText,
+        {
+          "data-slot": "item-text",
+          className: cn(styles.itemText(), ui?.itemText)
+        },
+        item.label
+      )
+    );
+  }
+  return /* @__PURE__ */ React.createElement(UISelect.Root, { ...props, items: flatItems, disabled: fieldsetDisabled }, /* @__PURE__ */ React.createElement(
+    "div",
     {
-      ...props,
-      items,
-      value,
-      defaultValue,
-      onValueChange,
-      disabled: fieldsetDisabled
+      "data-slot": "root",
+      "data-disabled": fieldsetDisabled || void 0,
+      className: cn(styles.root(), ui?.root, className),
+      style
     },
+    label ? /* @__PURE__ */ React.createElement(
+      UISelect.Label,
+      {
+        "data-slot": "label",
+        className: cn(styles.label(), ui?.label)
+      },
+      label
+    ) : null,
     /* @__PURE__ */ React.createElement(
-      "div",
+      UISelect.Trigger,
       {
-        "data-slot": "root",
-        "data-disabled": fieldsetDisabled || void 0,
-        className: cn(styles.root(), ui?.root, className),
-        style
+        "data-slot": "trigger",
+        ...triggerAriaProps,
+        disabled: fieldsetDisabled,
+        className: cn(styles.trigger(), ui?.trigger)
       },
-      label ? /* @__PURE__ */ React.createElement(
-        UISelect.Label,
-        {
-          "data-slot": "label",
-          className: cn(styles.label(), ui?.label)
-        },
-        label
-      ) : null,
       /* @__PURE__ */ React.createElement(
-        UISelect.Trigger,
+        "span",
         {
-          "data-slot": "trigger",
-          ...triggerAriaProps,
-          disabled: fieldsetDisabled,
-          className: cn(styles.trigger(), ui?.trigger)
+          "aria-hidden": "true",
+          "data-slot": "glass",
+          className: cn(styles.glass(), ui?.glass)
         },
         /* @__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(
-          UISelect.Value,
-          {
-            "data-slot": "value",
-            placeholder,
-            className: cn(styles.value(), ui?.value)
+            "data-slot": "overlay",
+            className: cn(styles.overlay(), ui?.overlay)
           }
-        ),
-        /* @__PURE__ */ React.createElement(
-          UISelect.Icon,
-          {
-            "data-slot": "icon",
-            className: cn(styles.icon(), ui?.icon)
-          },
-          /* @__PURE__ */ React.createElement(ChevronDownIcon, null)
         )
       ),
-      description ? /* @__PURE__ */ React.createElement(
-        "span",
+      /* @__PURE__ */ React.createElement(
+        UISelect.Value,
         {
-          id: descriptionId,
-          "data-slot": "description",
-          className: cn(styles.description(), ui?.description)
+          "data-slot": "value",
+          placeholder,
+          className: cn(styles.value(), ui?.value)
         },
-        description
-      ) : null
+        renderValue
+      ),
+      /* @__PURE__ */ React.createElement(
+        UISelect.Icon,
+        {
+          "data-slot": "icon",
+          className: cn(styles.icon(), ui?.icon)
+        },
+        /* @__PURE__ */ React.createElement(ChevronDownIcon, null)
+      )
     ),
-    /* @__PURE__ */ React.createElement(UISelect.Portal, null, /* @__PURE__ */ React.createElement(
-      UISelect.Positioner,
+    description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id: descriptionId,
+        "data-slot": "description",
+        className: cn(styles.description(), ui?.description)
+      },
+      description
+    ) : null
+  ), /* @__PURE__ */ React.createElement(UISelect.Portal, null, /* @__PURE__ */ React.createElement(
+    UISelect.Positioner,
+    {
+      "data-slot": "positioner",
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      alignItemWithTrigger,
+      className: cn(styles.positioner(), ui?.positioner)
+    },
+    /* @__PURE__ */ React.createElement(
+      UISelect.Popup,
       {
-        "data-slot": "positioner",
-        side,
-        align,
-        sideOffset,
-        alignOffset,
-        collisionPadding,
-        alignItemWithTrigger,
-        className: cn(styles.positioner(), ui?.positioner)
+        "data-slot": "popup",
+        className: cn(styles.popup(), ui?.popup)
       },
       /* @__PURE__ */ React.createElement(
-        UISelect.Popup,
+        "span",
         {
-          "data-slot": "popup",
-          className: cn(styles.popup(), ui?.popup)
+          "aria-hidden": "true",
+          "data-slot": "popup-glass",
+          className: cn(styles.popupGlass(), ui?.popupGlass)
         },
         /* @__PURE__ */ React.createElement(
           "span",
           {
             "aria-hidden": "true",
-            "data-slot": "popup-glass",
-            className: cn(styles.popupGlass(), ui?.popupGlass)
-          },
-          /* @__PURE__ */ React.createElement(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "popup-overlay",
-              className: cn(styles.popupOverlay(), ui?.popupOverlay)
-            }
-          )
-        ),
-        /* @__PURE__ */ React.createElement(
-          UISelect.List,
-          {
-            "data-slot": "list",
-            className: cn(styles.list(), ui?.list)
-          },
-          items.map((item) => /* @__PURE__ */ React.createElement(
-            UISelect.Item,
+            "data-slot": "popup-overlay",
+            className: cn(styles.popupOverlay(), ui?.popupOverlay)
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        UISelect.List,
+        {
+          "data-slot": "list",
+          className: cn(styles.list(), ui?.list)
+        },
+        items.map(
+          (entry, index) => "items" in entry ? /* @__PURE__ */ React.createElement(
+            UISelect.Group,
             {
-              key: item.value,
-              value: item.value,
-              disabled: item.disabled,
-              label: item.textValue ?? (typeof item.label === "string" ? item.label : void 0),
-              "data-slot": "item",
-              className: cn(styles.item(), ui?.item)
+              key: `group-${index}`,
+              "data-slot": "group",
+              className: cn(styles.group(), ui?.group)
             },
             /* @__PURE__ */ React.createElement(
-              UISelect.ItemIndicator,
+              UISelect.GroupLabel,
               {
-                keepMounted: true,
-                "data-slot": "item-indicator",
-                className: cn(
-                  styles.itemIndicator(),
-                  ui?.itemIndicator
-                )
+                "data-slot": "group-label",
+                className: cn(styles.groupLabel(), ui?.groupLabel)
               },
-              /* @__PURE__ */ React.createElement(CheckIcon, null)
+              entry.label
             ),
-            /* @__PURE__ */ React.createElement(
-              UISelect.ItemText,
-              {
-                "data-slot": "item-text",
-                className: cn(styles.itemText(), ui?.itemText)
-              },
-              item.label
+            entry.items.map(
+              (item, itemIndex) => renderItem(item, itemIndex)
             )
-          ))
+          ) : renderItem(entry, index)
         )
       )
-    ))
-  );
+    )
+  )));
 }
 export { Select };

package/dist/components/slider.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/slider";
 type Slider = ComponentConfig<typeof theme>;
-type SliderProps<Value extends number | readonly number[] = number> = Omit<UISlider.Root.Props<Value>, "children" | "className"> & Pick<UISlider.Thumb.Props, "getAriaLabel" | "getAriaValueText"> & {
+type SliderProps<Value extends number | readonly number[] = number | readonly number[]> = Omit<UISlider.Root.Props<Value>, "children" | "className"> & Pick<UISlider.Thumb.Props, "getAriaLabel" | "getAriaValueText"> & {
     /** Tailwind classes merged into the root. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
@@ -14,6 +14,6 @@ type SliderProps<Value extends number | readonly number[] = number> = Omit<UISli
  * both are forwarded from the root to every thumb. `aria-describedby` is also
  * forwarded so supporting copy is announced with each thumb.
  */
-declare function Slider<Value extends number | readonly number[] = number>({ className, ui, value, defaultValue, disabled, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getAriaLabel, getAriaValueText, ...props }: SliderProps<Value>): React.JSX.Element;
+declare function Slider<Value extends number | readonly number[]>({ className, ui, value, defaultValue, disabled, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getAriaLabel, getAriaValueText, ...props }: SliderProps<Value>): React.JSX.Element;
 export { Slider };
 export type { SliderProps };

package/dist/components/switch.mjs

@@ -5,48 +5,6 @@ import * as React from "react";
 import { mergeIds } from "../internal/aria.mjs";
 import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/switch.mjs";
-function LiquidGlassFilter({ id }) {
-  return /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-layer": "filter" }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: `${id}-goo` }, /* @__PURE__ */ React.createElement(
-    "feGaussianBlur",
-    {
-      in: "SourceGraphic",
-      stdDeviation: "2",
-      result: "blur"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "feColorMatrix",
-    {
-      in: "blur",
-      values: "1 0 0 0 0\n                    0 1 0 0 0\n                    0 0 1 0 0\n                    0 0 0 16 -10",
-      type: "matrix",
-      result: "matrix"
-    }
-  ), /* @__PURE__ */ React.createElement("feComposite", { in: "matrix", operator: "atop", result: "goo" })), /* @__PURE__ */ React.createElement(
-    "filter",
-    {
-      id: `${id}-remove-black`,
-      colorInterpolationFilters: "sRGB"
-    },
-    /* @__PURE__ */ React.createElement(
-      "feColorMatrix",
-      {
-        type: "matrix",
-        values: "1 0 0 0 0\n                    0 1 0 0 0\n                    0 0 1 0 0\n                    -255 -255 -255 0 1",
-        result: "black-pixels"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "feMorphology",
-      {
-        in: "black-pixels",
-        operator: "dilate",
-        radius: "0.5",
-        result: "smoothed"
-      }
-    ),
-    /* @__PURE__ */ React.createElement("feComposite", { in: "SourceGraphic", in2: "smoothed", operator: "out" })
-  )));
-}
 function Switch({
   className,
   ui,
@@ -63,24 +21,32 @@ function Switch({
 }) {
   const styles = theme({ size });
   const fieldsetDisabled = useFieldsetDisabled(disabled);
-  const filterId = React.useId();
   const labelId = React.useId();
   const descriptionId = React.useId();
+  const [animating, setAnimating] = React.useState(false);
+  const animationTimer = React.useRef(void 0);
   const hasName = Boolean(label || ariaLabel || ariaLabelledBy);
   const labelledBy = ariaLabelledBy || (label && !ariaLabel ? labelId : void 0);
   const describedBy = mergeIds(
     ariaDescribedBy,
     description && hasName ? descriptionId : void 0
   );
-  const filterStyles = {
-    "--ui-switch-goo-filter": `url("#${filterId}-goo")`,
-    "--ui-switch-remove-black-filter": `url("#${filterId}-remove-black")`
+  const stopAnimating = () => {
+    clearTimeout(animationTimer.current);
+    setAnimating(false);
   };
-  const [animating, setAnimating] = React.useState(false);
+  React.useEffect(
+    () => () => {
+      clearTimeout(animationTimer.current);
+    },
+    []
+  );
   const handleCheckedChange = (checked, details) => {
     onCheckedChange?.(checked, details);
     if (!details.isCanceled) {
       setAnimating(true);
+      clearTimeout(animationTimer.current);
+      animationTimer.current = setTimeout(stopAnimating, 300);
     }
   };
   const handleThumbTransitionEnd = (event) => {
@@ -88,7 +54,7 @@ function Switch({
       return;
     }
     if (event.propertyName === "translate" || event.propertyName === "scale") {
-      setAnimating(false);
+      stopAnimating();
     }
   };
   return /* @__PURE__ */ React.createElement(
@@ -111,28 +77,15 @@ function Switch({
         "data-slot": "container",
         className: cn(styles.container(), ui?.container)
       },
-      /* @__PURE__ */ React.createElement(
-        "span",
+      /* @__PURE__ */ React.createElement("span", { "data-slot": "base", className: cn(styles.base(), ui?.base) }, /* @__PURE__ */ React.createElement(
+        UISwitch.Thumb,
         {
-          "data-slot": "base",
-          className: cn(styles.base(), ui?.base),
-          style: filterStyles
-        },
-        /* @__PURE__ */ React.createElement(LiquidGlassFilter, { id: filterId }),
-        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "mask" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "track" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "track-mask" }))),
-        /* @__PURE__ */ React.createElement(
-          UISwitch.Thumb,
-          {
-            "data-slot": "thumb",
-            "aria-hidden": "true",
-            onTransitionEnd: handleThumbTransitionEnd,
-            className: cn(styles.thumb(), ui?.thumb)
-          },
-          /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "glass-rim" }),
-          /* @__PURE__ */ React.createElement("span", { "data-layer": "glass-lens" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "goo" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "inner-glow" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "fill" }))),
-          /* @__PURE__ */ React.createElement("span", { "data-layer": "cover" })
-        )
-      )
+          "data-slot": "thumb",
+          "aria-hidden": "true",
+          onTransitionEnd: handleThumbTransitionEnd,
+          className: cn(styles.thumb(), ui?.thumb)
+        }
+      ))
     ),
     label || description ? /* @__PURE__ */ React.createElement(
       "span",

package/dist/components/tabs.d.ts

@@ -1,13 +1,13 @@
-import { Tabs as UITabs } from "@base-ui/react/tabs";
+import { Tabs as UITabs, type TabsTabValue } 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" | "value"> & {
+type TabsItemProps = Omit<UITabs.Tab.Props, "children" | "className" | "content" | "value"> & {
     /** Value that identifies the tab and its panel. */
-    value: Value;
+    value: TabsTabValue;
     /** Visible label inside the tab. */
     label?: React.ReactNode;
     /** Decorative icon rendered before the label. */
@@ -21,15 +21,15 @@ type TabsItemProps<Value extends string = string> = Omit<UITabs.Tab.Props, "chil
     /** 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" | "value" | "defaultValue" | "onValueChange"> & Pick<UITabs.List.Props, "activateOnFocus" | "loopFocus"> & VariantProps<typeof theme> & {
+type TabsProps = Omit<UITabs.Root.Props, "children" | "className" | "value" | "defaultValue" | "onValueChange"> & Pick<UITabs.List.Props, "activateOnFocus" | "loopFocus"> & VariantProps<typeof theme> & {
     /** Tabs and panels rendered by the component. */
-    items: readonly TabsItemProps<Value>[];
+    items: readonly TabsItemProps[];
     /** Controlled active value. Use `null` to render no active tab. */
-    value?: Value | null;
+    value?: TabsTabValue;
     /** Initial active value when uncontrolled. */
-    defaultValue?: Value | null;
+    defaultValue?: TabsTabValue;
     /** Called when the active value changes. */
-    onValueChange?: (value: Value, details: UITabs.Root.ChangeEventDetails) => void;
+    onValueChange?: (value: TabsTabValue, details: UITabs.Root.ChangeEventDetails) => void;
     /** Disables every tab. */
     disabled?: boolean;
     /** Tailwind classes merged into the root. */
@@ -37,6 +37,6 @@ type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "childre
     /** 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;
+declare function Tabs({ className, ui, size, items, value, defaultValue, onValueChange, activateOnFocus, loopFocus, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: TabsProps): React.JSX.Element;
 export { Tabs };
 export type { TabsItemProps, TabsProps };

package/dist/components/tabs.mjs

@@ -67,10 +67,10 @@ function Tabs({
         }
       ),
       items.map(
-        ({ content: _content, keepMounted: _keepMounted, ui: itemUi, ...item }) => /* @__PURE__ */ React.createElement(
+        ({ content: _content, keepMounted: _keepMounted, ui: itemUi, ...item }, index) => /* @__PURE__ */ React.createElement(
           TabsItem,
           {
-            key: item.value,
+            key: index,
             ...item,
             disabled: disabled || item.disabled,
             ui: {
@@ -82,10 +82,10 @@ function Tabs({
         )
       )
     ),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "panels", className: cn(styles.panels(), ui?.panels) }, items.map((item) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "panels", className: cn(styles.panels(), ui?.panels) }, items.map((item, index) => /* @__PURE__ */ React.createElement(
       UITabs.Panel,
       {
-        key: item.value,
+        key: index,
         value: item.value,
         keepMounted: item.keepMounted,
         "data-slot": "panel",

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

@@ -6,7 +6,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/toggle-group";
 type ToggleGroup = ComponentConfig<typeof theme>;
 /** One option managed by the toggle group. */
-type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "value" | "pressed" | "defaultPressed"> & {
+type ToggleGroupItemProps<Value extends string> = Omit<UIToggle.Props<Value>, "className" | "children" | "value" | "pressed" | "defaultPressed"> & {
     /** Value that identifies the option in the group value. */
     value: Value;
     /** Visible content inside the item. */
@@ -18,7 +18,7 @@ type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<V
     /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
     ui?: Partial<Pick<ToggleGroup["slots"], "item" | "content" | "icon" | "label">>;
 };
-type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
+type ToggleGroupProps<Value extends string> = Omit<UIToggleGroup.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
     /** Options rendered by the toggle group. */
     items: readonly ToggleGroupItemProps<Value>[];
     /** Tailwind classes merged into the group root. */
@@ -26,6 +26,6 @@ type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: ToggleGroup["slots"];
 };
-declare function ToggleGroup<Value extends string = string>({ className, ui, size, items, disabled, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
+declare function ToggleGroup<Value extends string>({ className, ui, size, items, disabled, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
 export { ToggleGroup };
 export type { ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/toggle.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/toggle";
 type Toggle = ComponentConfig<typeof theme>;
-type ToggleProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "ref"> & Omit<VariantProps<typeof theme>, "iconOnly"> & {
+type ToggleProps<Value extends string> = Omit<UIToggle.Props<Value>, "className" | "children" | "ref"> & Omit<VariantProps<typeof theme>, "iconOnly"> & {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLButtonElement>;
     /** Tailwind classes merged into the toggle root. */
@@ -16,6 +16,6 @@ type ToggleProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "c
     /** Icon rendered before the label. */
     icon?: React.ReactNode;
 };
-declare function Toggle<Value extends string = string>({ className, ui, icon, label, size, disabled, ...props }: ToggleProps<Value>): React.JSX.Element;
+declare function Toggle<Value extends string>({ className, ui, icon, label, size, disabled, ...props }: ToggleProps<Value>): React.JSX.Element;
 export { Toggle };
 export type { ToggleProps };

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{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--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 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-overlay-surface:hsla(0,0%,8%,.76);--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 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--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 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),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-overlay-surface:var(--ui-glass-overlay-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-overlay{background-color:var(--ui-glass-overlay-surface)}.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{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--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 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-overlay-surface:hsla(0,0%,8%,.76);--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 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--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 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),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-overlay-surface:var(--ui-glass-overlay-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-overlay{background-color:var(--ui-glass-overlay-surface)}.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));inset:calc(var(--ui-glass-rim-inset, 9px)/2);pointer-events:none;position:absolute;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

@@ -15,7 +15,7 @@ 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 { Select, type SelectItemProps, type SelectProps, } from "./components/select";
+export { Select, type SelectEntry, type SelectItemGroupProps, type SelectItemProps, type SelectProps, } from "./components/select";
 export { Slider, type SliderProps } from "./components/slider";
 export { Switch, type SwitchProps } from "./components/switch";
 export { Tabs, type TabsItemProps, type TabsProps } from "./components/tabs";

package/dist/theme/accordion.mjs

@@ -11,7 +11,10 @@ export default tv({
     ],
     glass: [
       "ui-glass ui-glass-inner ui-glass-highlight",
-      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
+      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]",
+      // Keep the filtered glass on a stable compositor layer so the panel
+      // height transition does not re-rasterize the whole surface each frame.
+      "will-change-transform"
     ],
     overlay: "ui-glass-rim",
     content: "relative z-10 overflow-hidden rounded-[inherit]",

package/dist/theme/select.d.ts

@@ -35,6 +35,8 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     popupGlass: string[];
     popupOverlay: string;
     list: string[];
+    group: string;
+    groupLabel: string;
     item: string[];
     itemIndicator: string[];
     itemText: string;

package/dist/theme/select.mjs

@@ -58,6 +58,8 @@ export default tv({
       "relative z-10 flex min-w-0 flex-col gap-0.5",
       "max-h-[min(24rem,var(--available-height))] overflow-y-auto scroll-py-2"
     ],
+    group: "flex min-w-0 flex-col gap-0.5",
+    groupLabel: "px-2.5 pb-0.5 pt-1 text-xs font-medium text-ui-ink/55",
     item: [
       "relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-xl px-2.5",
       "text-sm text-ui-ink outline-none",

package/dist/theme/switch.d.ts

@@ -1,23 +1,23 @@
 declare const theme: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         sm: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         md: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         lg: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         xl: {
-            base: string;
+            root: string;
             wrapper: string;
         };
     };

package/dist/theme/switch.mjs

@@ -6,80 +6,54 @@ const theme = tv({
       "touch-none [-webkit-tap-highlight-color:transparent]",
       "focus:outline-none",
       "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
-      "data-[readonly]:cursor-default"
+      "data-[readonly]:cursor-default",
+      "[--ui-switch-thumb-size:calc(var(--ui-switch-height)_-_2*var(--ui-switch-inset))]",
+      "[--ui-switch-travel:calc(var(--ui-switch-width)_-_var(--ui-switch-thumb-size)_-_2*var(--ui-switch-inset))]"
     ],
     container: "flex items-center",
     base: [
-      "relative inline-flex h-[var(--ui-switch-height)] w-[var(--ui-switch-width)] shrink-0 select-none overflow-visible rounded-[100px] border-0 bg-transparent p-0 text-inherit",
-      "[container-type:inline-size]",
-      "[--ui-glass-edge-shadow:inset_1px_-1px_2px_rgb(255_255_255/0.55),inset_-1px_1px_2px_rgb(0_0_0/0.18),0_1px_3px_rgb(0_0_0/0.2)]",
-      "[--ui-switch-off:color-mix(in_srgb,var(--ui-ink)_20%,transparent)] [--ui-switch-on:var(--ui-ink)]",
+      "relative inline-flex h-[var(--ui-switch-height)] w-[var(--ui-switch-width)] shrink-0 select-none overflow-hidden rounded-full",
+      "border-0 bg-[var(--ui-switch-off)] p-0 text-inherit",
+      "[background-image:linear-gradient(180deg,rgb(255_255_255/0.14),transparent_55%)]",
+      "[box-shadow:inset_0_1px_1px_rgb(255_255_255/0.3),inset_0_-1px_2px_rgb(0_0_0/0.14)]",
+      "transition-[background-color,box-shadow] duration-200 ease-out",
+      "group-data-[checked]:bg-[var(--ui-switch-on)]",
       "group-focus-visible:outline-2 group-focus-visible:outline-offset-4 group-focus-visible:outline-ui-glass-focus",
-      "[&_*]:pointer-events-none",
-      "motion-reduce:[transition-duration:0.01ms!important] motion-reduce:[transition-delay:0ms!important] motion-reduce:[&_*]:[transition-duration:0.01ms!important] motion-reduce:[&_*]:[transition-delay:0ms!important]",
-      "[&_[data-layer=filter]]:pointer-events-none [&_[data-layer=filter]]:absolute [&_[data-layer=filter]]:h-0 [&_[data-layer=filter]]:w-0 [&_[data-layer=filter]]:overflow-hidden",
-      "[&_[data-layer=mask]]:absolute [&_[data-layer=mask]]:inset-0 [&_[data-layer=mask]]:rounded-[100px]",
-      "[&_[data-layer=mask]]:[filter:var(--ui-switch-remove-black-filter)] [&_[data-layer=mask]]:[transform:translate3d(0,0,0)]",
-      "[&_[data-layer=track]]:absolute [&_[data-layer=track]]:left-1/2 [&_[data-layer=track]]:top-1/2 [&_[data-layer=track]]:z-[12] [&_[data-layer=track]]:h-full [&_[data-layer=track]]:w-full [&_[data-layer=track]]:rounded-[100px] [&_[data-layer=track]]:bg-[var(--ui-switch-off)]",
-      "[&_[data-layer=track]]:[container-type:inline-size] [&_[data-layer=track]]:[translate:-50%_-50%] [&_[data-layer=track]]:[box-shadow:inset_0_1px_1px_rgb(255_255_255/0.35),inset_0_-1px_2px_rgb(0_0_0/0.12)]",
-      "[&_[data-layer=track]]:[transition:background-color_120ms_ease-out_180ms] group-data-[checked]:[&_[data-layer=track]]:bg-[var(--ui-switch-on)]",
-      "[&_[data-layer=track-mask]]:absolute [&_[data-layer=track-mask]]:left-[var(--ui-switch-border)] [&_[data-layer=track-mask]]:top-1/2 [&_[data-layer=track-mask]]:h-[calc(100%_-_2*var(--ui-switch-border))] [&_[data-layer=track-mask]]:w-[calc(60%_-_2*var(--ui-switch-border))] [&_[data-layer=track-mask]]:rounded-[100px] [&_[data-layer=track-mask]]:bg-black",
-      "[&_[data-layer=track-mask]]:[translate:0_-50%] group-data-[checked]:[&_[data-layer=track-mask]]:[translate:calc(100cqi_-_100%_-_2*var(--ui-switch-border))_-50%]",
-      "[&_[data-layer=track-mask]]:[transition:translate_120ms_ease-out_180ms,scale_300ms_ease-out]",
-      "group-active:[&_[data-layer=track-mask]]:[scale:1.65] group-data-[animating=true]:[&_[data-layer=track-mask]]:[scale:1.65]",
-      "[&_[data-layer=glass-rim]]:absolute [&_[data-layer=glass-rim]]:inset-0 [&_[data-layer=glass-rim]]:z-[20] [&_[data-layer=glass-rim]]:rounded-[100px] [&_[data-layer=glass-rim]]:[box-shadow:var(--ui-glass-edge-shadow)] [&_[data-layer=glass-rim]]:opacity-0",
-      "[&_[data-layer=glass-rim]]:transition-opacity [&_[data-layer=glass-rim]]:duration-200 [&_[data-layer=glass-rim]]:ease-out",
-      "group-active:[&_[data-layer=glass-rim]]:opacity-100 group-data-[animating=true]:[&_[data-layer=glass-rim]]:opacity-100",
-      "[&_[data-layer=glass-lens]]:absolute [&_[data-layer=glass-lens]]:inset-0 [&_[data-layer=glass-lens]]:rounded-[100px] [&_[data-layer=glass-lens]]:[clip-path:inset(0_0_0_0_round_100px)]",
-      "[&_[data-layer=glass-lens]]:[filter:blur(calc(var(--ui-switch-height)*0.1))] [&_[data-layer=glass-lens]]:transition-[filter] [&_[data-layer=glass-lens]]:duration-200 [&_[data-layer=glass-lens]]:ease-out",
-      "group-active:[&_[data-layer=glass-lens]]:[filter:blur(0)] group-data-[animating=true]:[&_[data-layer=glass-lens]]:[filter:blur(0)]",
-      "[&_[data-layer=goo]]:absolute [&_[data-layer=goo]]:inset-0 [&_[data-layer=goo]]:overflow-hidden [&_[data-layer=goo]]:rounded-[100px]",
-      "[&_[data-layer=goo]]:[filter:var(--ui-switch-goo-filter)] [&_[data-layer=goo]]:[transform:translate3d(0,0,0)]",
-      "[&_[data-layer=inner-glow]]:absolute [&_[data-layer=inner-glow]]:inset-0 [&_[data-layer=inner-glow]]:rounded-[100px]",
-      "[&_[data-layer=inner-glow]]:[--ui-switch-glow-color:var(--ui-switch-off)] group-data-[checked]:[&_[data-layer=inner-glow]]:[--ui-switch-glow-color:var(--ui-switch-on)]",
-      "[&_[data-layer=inner-glow]]:[transition:box-shadow_120ms_ease-out_180ms]",
-      "[&_[data-layer=inner-glow]]:[box-shadow:inset_0_0_calc(var(--ui-switch-height)*0.05)_calc(var(--ui-switch-height)*0.0667)_var(--ui-switch-glow-color),inset_calc(var(--ui-switch-height)*0.133)_0_calc(var(--ui-switch-height)*0.05)_calc(var(--ui-switch-height)*0.0667)_var(--ui-switch-glow-color)]",
-      "[&_[data-layer=fill]]:absolute [&_[data-layer=fill]]:left-0 [&_[data-layer=fill]]:top-1/2 [&_[data-layer=fill]]:h-[var(--ui-switch-height)] [&_[data-layer=fill]]:w-[var(--ui-switch-width)] [&_[data-layer=fill]]:rounded-r-[100px] [&_[data-layer=fill]]:bg-[var(--ui-switch-off)]",
-      "[&_[data-layer=fill]]:[translate:0_-50%] group-data-[checked]:[&_[data-layer=fill]]:[translate:calc(100cqi_-_100%)_-50%]",
-      "[&_[data-layer=fill]]:[transition:height_200ms_ease-out,translate_120ms_ease-out_180ms,background-color_120ms_ease-out_180ms]",
-      "group-active:[&_[data-layer=fill]]:h-[calc(var(--ui-switch-height)_-_6*var(--ui-switch-border))] group-data-[animating=true]:[&_[data-layer=fill]]:h-[calc(var(--ui-switch-height)_-_6*var(--ui-switch-border))]",
-      "group-data-[checked]:[&_[data-layer=fill]]:bg-[var(--ui-switch-on)]",
-      "[&_[data-layer=cover]]:absolute [&_[data-layer=cover]]:inset-0 [&_[data-layer=cover]]:rounded-[100px] [&_[data-layer=cover]]:bg-white",
-      "[&_[data-layer=cover]]:transition-opacity [&_[data-layer=cover]]:duration-200 [&_[data-layer=cover]]:ease-out",
-      "group-active:[&_[data-layer=cover]]:opacity-0 group-data-[animating=true]:[&_[data-layer=cover]]:opacity-0"
+      "motion-reduce:transition-none",
+      "[--ui-switch-off:color-mix(in_srgb,var(--ui-ink)_20%,transparent)] [--ui-switch-on:var(--ui-ink)]"
     ],
     thumb: [
-      "absolute left-[var(--ui-switch-border)] top-1/2 h-[calc(100%_-_2*var(--ui-switch-border))] w-[calc(60%_-_2*var(--ui-switch-border))] rounded-[100px] bg-transparent [box-shadow:var(--ui-glass-thumb-shadow)]",
-      "[--ui-glass-thumb-shadow:0_1px_3px_rgb(0_0_0/0.2),inset_0_0_0_1px_rgb(255_255_255/0.55)]",
-      "[container-type:inline-size]",
-      "[translate:0_-50%] group-data-[checked]:[translate:calc(100cqi_-_100%_-_2*var(--ui-switch-border))_-50%]",
-      "[transition:translate_120ms_ease-out_180ms,scale_300ms_ease-out]",
-      "group-active:[scale:1.65] group-data-[animating=true]:[scale:1.65]"
+      "absolute left-[var(--ui-switch-inset)] top-1/2 z-10 block h-[var(--ui-switch-thumb-size)] w-[var(--ui-switch-thumb-size)] rounded-full bg-ui-surface",
+      "[box-shadow:0_1px_3px_rgb(0_0_0/0.22),inset_0_0_0_1px_rgb(255_255_255/0.5),inset_0_1px_1px_rgb(255_255_255/0.65),inset_0_-1px_2px_rgb(0_0_0/0.08)]",
+      "[translate:0_-50%] group-data-[checked]:[translate:var(--ui-switch-travel)_-50%]",
+      "transition-[translate,scale] duration-200 ease-out",
+      "group-active:scale-95",
+      "motion-reduce:transition-none"
     ],
     wrapper: "ms-2 min-w-0",
-    label: "block font-medium text-ui-ink",
+    label: "block font-medium text-ui-ink leading-[var(--ui-switch-height)]",
     description: "block text-ui-ink opacity-60"
   },
   variants: {
     size: {
       xs: {
-        base: "[--ui-switch-width:48px] [--ui-switch-height:24px] [--ui-switch-border:2px]",
+        root: "[--ui-switch-width:48px] [--ui-switch-height:24px] [--ui-switch-inset:2px]",
         wrapper: "text-xs"
       },
       sm: {
-        base: "[--ui-switch-width:56px] [--ui-switch-height:28px] [--ui-switch-border:2px]",
+        root: "[--ui-switch-width:56px] [--ui-switch-height:28px] [--ui-switch-inset:2px]",
         wrapper: "text-xs"
       },
       md: {
-        base: "[--ui-switch-width:64px] [--ui-switch-height:32px] [--ui-switch-border:3px]",
+        root: "[--ui-switch-width:64px] [--ui-switch-height:32px] [--ui-switch-inset:3px]",
         wrapper: "text-sm"
       },
       lg: {
-        base: "[--ui-switch-width:72px] [--ui-switch-height:36px] [--ui-switch-border:3px]",
+        root: "[--ui-switch-width:72px] [--ui-switch-height:36px] [--ui-switch-inset:3px]",
         wrapper: "text-sm"
       },
       xl: {
-        base: "[--ui-switch-width:80px] [--ui-switch-height:40px] [--ui-switch-border:3px]",
+        root: "[--ui-switch-width:80px] [--ui-switch-height:40px] [--ui-switch-inset:3px]",
         wrapper: "text-base"
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",