@xingxingmofashu/ui 0.2.0 → 0.3.0

package/dist/components/select.mjs

@@ -15,9 +15,7 @@ function Select({
   label,
   description,
   placeholder,
-  value,
-  defaultValue,
-  onValueChange,
+  renderValue,
   side,
   align,
   sideOffset = 6,
@@ -28,6 +26,7 @@ function Select({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
+  style,
   ...props
 }) {
   const styles = theme({ size });
@@ -42,156 +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)
+        "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" | "style" | "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.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/switch";
 type Switch = ComponentConfig<typeof theme>;
-interface SwitchProps extends Omit<UISwitch.Root.Props, "className" | "children" | "style" | "ref">, VariantProps<typeof theme> {
+interface SwitchProps extends Omit<UISwitch.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 switch root. */

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" | "style" | "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" | "style" | "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" | "style" | "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" | "style" | "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" | "style" | "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/components/tooltip.d.ts

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

package/dist/components/tooltip.mjs

@@ -15,6 +15,7 @@ function Tooltip({
   alignOffset,
   collisionPadding,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -41,7 +42,8 @@ function Tooltip({
       UITooltip.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/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";