@xingxingmofashu/ui 0.1.2 → 0.1.4

package/dist/components/progress.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { Progress as UIProgress } from "@base-ui/react/progress";
+import { cn } from "cn";
+import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
+import theme from "../theme/progress.mjs";
+function Progress({
+  className,
+  ui,
+  label,
+  description,
+  size,
+  value = null,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const styles = theme({ size });
+  const descriptionId = React.useId();
+  const describedBy = mergeIds(
+    ariaDescribedBy,
+    description ? descriptionId : void 0
+  );
+  return /* @__PURE__ */ React.createElement(
+    UIProgress.Root,
+    {
+      ...props,
+      value,
+      "aria-describedby": describedBy,
+      "data-slot": "root",
+      className: cn(styles.root(), ui?.root, className)
+    },
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "header", className: cn(styles.header(), ui?.header) }, label ? /* @__PURE__ */ React.createElement(
+      UIProgress.Label,
+      {
+        "data-slot": "label",
+        className: cn(styles.label(), ui?.label)
+      },
+      label
+    ) : null, /* @__PURE__ */ React.createElement(
+      UIProgress.Value,
+      {
+        "data-slot": "value",
+        className: cn(styles.value(), ui?.value)
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      UIProgress.Track,
+      {
+        "data-slot": "track",
+        className: cn(styles.track(), ui?.track)
+      },
+      /* @__PURE__ */ React.createElement(
+        UIProgress.Indicator,
+        {
+          "data-slot": "indicator",
+          className: cn(styles.indicator(), ui?.indicator)
+        }
+      )
+    ),
+    description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id: descriptionId,
+        "data-slot": "description",
+        className: cn(styles.description(), ui?.description)
+      },
+      description
+    ) : null
+  );
+}
+export { Progress };

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

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

package/dist/components/scroll-area.mjs

@@ -9,26 +9,35 @@ function ScrollArea({
   "aria-labelledby": ariaLabelledBy,
   children,
   className,
+  ui,
   orientation = "vertical",
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
   return /* @__PURE__ */ React.createElement(
     UIScrollArea.Root,
     {
       ...props,
       "data-slot": "root",
       "data-orientation": orientation,
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
       "span",
       {
         "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
-      }
-    )),
+        "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(
       UIScrollArea.Viewport,
       {
@@ -36,29 +45,54 @@ function ScrollArea({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "data-slot": "viewport",
-        className: ui.viewport()
+        className: cn(styles.viewport(), ui?.viewport)
       },
-      /* @__PURE__ */ React.createElement(UIScrollArea.Content, { "data-slot": "content", className: ui.content() }, children)
+      /* @__PURE__ */ React.createElement(
+        UIScrollArea.Content,
+        {
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
+        },
+        children
+      )
     ),
     orientation !== "horizontal" ? /* @__PURE__ */ React.createElement(
       UIScrollArea.Scrollbar,
       {
         "data-slot": "scrollbar",
         orientation: "vertical",
-        className: ui.scrollbar()
+        className: cn(styles.scrollbar(), ui?.scrollbar)
       },
-      /* @__PURE__ */ React.createElement(UIScrollArea.Thumb, { "data-slot": "thumb", className: ui.thumb() })
+      /* @__PURE__ */ React.createElement(
+        UIScrollArea.Thumb,
+        {
+          "data-slot": "thumb",
+          className: cn(styles.thumb(), ui?.thumb)
+        }
+      )
     ) : null,
     orientation !== "vertical" ? /* @__PURE__ */ React.createElement(
       UIScrollArea.Scrollbar,
       {
         "data-slot": "scrollbar",
         orientation: "horizontal",
-        className: ui.scrollbar()
+        className: cn(styles.scrollbar(), ui?.scrollbar)
       },
-      /* @__PURE__ */ React.createElement(UIScrollArea.Thumb, { "data-slot": "thumb", className: ui.thumb() })
+      /* @__PURE__ */ React.createElement(
+        UIScrollArea.Thumb,
+        {
+          "data-slot": "thumb",
+          className: cn(styles.thumb(), ui?.thumb)
+        }
+      )
     ) : null,
-    orientation === "both" ? /* @__PURE__ */ React.createElement(UIScrollArea.Corner, { "data-slot": "corner", className: ui.corner() }) : null
+    orientation === "both" ? /* @__PURE__ */ React.createElement(
+      UIScrollArea.Corner,
+      {
+        "data-slot": "corner",
+        className: cn(styles.corner(), ui?.corner)
+      }
+    ) : null
   );
 }
 export { ScrollArea };

package/dist/components/slider.d.ts

@@ -1,8 +1,13 @@
 import { Slider as UISlider } from "@base-ui/react/slider";
 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"> & {
     /** Tailwind classes merged into the root. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Slider["slots"];
     /** Accessible name for the thumb at `index`. Useful for range sliders. */
     getAriaLabel?: UISlider.Thumb.Props["getAriaLabel"];
     /** Accessible value text for the thumb at `index`. */
@@ -13,6 +18,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, value, defaultValue, "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[] = number>({ className, ui, value, defaultValue, "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/slider.mjs

@@ -12,6 +12,7 @@ function setAriaAttribute(input, name, value) {
 }
 function Slider({
   className,
+  ui,
   value,
   defaultValue,
   "aria-describedby": ariaDescribedBy,
@@ -23,7 +24,7 @@ function Slider({
   getAriaValueText,
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
   const syncThumbAria = React.useCallback(
     (input) => {
       if (!input) {
@@ -45,30 +46,45 @@ function Slider({
       value,
       defaultValue,
       "data-slot": "root",
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement(UISlider.Control, { "data-slot": "control", className: ui.control() }, /* @__PURE__ */ React.createElement(UISlider.Track, { "data-slot": "track", className: ui.track() }, /* @__PURE__ */ React.createElement(
-      UISlider.Indicator,
+    /* @__PURE__ */ React.createElement(
+      UISlider.Control,
       {
-        "data-slot": "indicator",
-        className: ui.indicator()
-      }
-    )), Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ React.createElement(
-      UISlider.Thumb,
-      {
-        key: index,
-        index,
-        "aria-describedby": ariaDescribedBy,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        getAriaLabel,
-        getAriaValueText,
-        inputRef: syncThumbAria,
-        "data-slot": "thumb",
-        className: ui.thumb()
+        "data-slot": "control",
+        className: cn(styles.control(), ui?.control)
       },
-      /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "thumb-glass" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "thumb-lens" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "thumb-specular" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "thumb-glare" }))
-    )))
+      /* @__PURE__ */ React.createElement(
+        UISlider.Track,
+        {
+          "data-slot": "track",
+          className: cn(styles.track(), ui?.track)
+        },
+        /* @__PURE__ */ React.createElement(
+          UISlider.Indicator,
+          {
+            "data-slot": "indicator",
+            className: cn(styles.indicator(), ui?.indicator)
+          }
+        )
+      ),
+      Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ React.createElement(
+        UISlider.Thumb,
+        {
+          key: index,
+          index,
+          "aria-describedby": ariaDescribedBy,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          getAriaLabel,
+          getAriaValueText,
+          inputRef: syncThumbAria,
+          "data-slot": "thumb",
+          className: cn(styles.thumb(), ui?.thumb)
+        },
+        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "thumb-glass" }, /* @__PURE__ */ React.createElement("span", { "data-layer": "thumb-lens" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "thumb-specular" }), /* @__PURE__ */ React.createElement("span", { "data-layer": "thumb-glare" }))
+      ))
+    )
   );
 }
 export { Slider };

package/dist/components/switch.d.ts

@@ -1,17 +1,21 @@
 import { Switch as UISwitch } from "@base-ui/react/switch";
 import * as React from "react";
 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> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the Base UI switch root. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Switch["slots"];
     /** Visible label. */
     label?: React.ReactNode;
     /** Optional supporting text. */
     description?: React.ReactNode;
 }
-declare function Switch({ className, label, description, size, disabled, readOnly, onCheckedChange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SwitchProps): React.JSX.Element;
+declare function Switch({ className, ui, label, description, size, disabled, readOnly, onCheckedChange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };
 export type { SwitchProps };

package/dist/components/switch.mjs

@@ -48,6 +48,7 @@ function LiquidGlassFilter({ id }) {
 }
 function Switch({
   className,
+  ui,
   label,
   description,
   size,
@@ -59,7 +60,7 @@ function Switch({
   "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   const filterId = React.useId();
   const labelId = React.useId();
   const descriptionId = React.useId();
@@ -100,39 +101,62 @@ function Switch({
       "data-slot": "root",
       "data-animating": animating || void 0,
       onCheckedChange: handleCheckedChange,
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "container", className: ui.container() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "base",
-        className: ui.base(),
-        style: filterStyles
+        "data-slot": "container",
+        className: cn(styles.container(), ui?.container)
       },
-      /* @__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,
+        "span",
         {
-          "data-slot": "thumb",
-          "aria-hidden": "true",
-          onTransitionEnd: handleThumbTransitionEnd,
-          className: ui.thumb()
+          "data-slot": "base",
+          className: cn(styles.base(), ui?.base),
+          style: filterStyles
         },
-        /* @__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" })
+        /* @__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" })
+        )
       )
-    )),
-    label || description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "wrapper", className: ui.wrapper() }, label ? /* @__PURE__ */ React.createElement("span", { id: labelId, "data-slot": "label", className: ui.label() }, label) : null, description ? /* @__PURE__ */ React.createElement(
+    ),
+    label || description ? /* @__PURE__ */ React.createElement(
       "span",
       {
-        id: descriptionId,
-        "data-slot": "description",
-        className: ui.description()
+        "data-slot": "wrapper",
+        className: cn(styles.wrapper(), ui?.wrapper)
       },
-      description
-    ) : null) : null
+      label ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: labelId,
+          "data-slot": "label",
+          className: cn(styles.label(), ui?.label)
+        },
+        label
+      ) : null,
+      description ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: descriptionId,
+          "data-slot": "description",
+          className: cn(styles.description(), ui?.description)
+        },
+        description
+      ) : null
+    ) : null
   );
 }
 export { Switch };

package/dist/components/toast.d.ts

@@ -1,11 +1,14 @@
 import { Toast as UIToast } from "@base-ui/react/toast";
 import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/toast";
 /** Corner where the toast stack is anchored. */
 type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 interface ToastProviderProps extends Omit<UIToast.Provider.Props, "children"> {
     /** App content that can call `useToast`. */
     children?: React.ReactNode;
 }
+type Toast = ComponentConfig<typeof theme>;
 interface ToastProps extends Omit<UIToast.Root.Props, "children" | "className" | "swipeDirection" | "toast"> {
     /** Corner where the toast stack is anchored. */
     position?: ToastPosition;
@@ -13,8 +16,10 @@ interface ToastProps extends Omit<UIToast.Root.Props, "children" | "className" |
     close?: React.ReactNode;
     /** Tailwind classes merged into each toast. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Toast["slots"];
 }
 declare function ToastProvider({ children, ...props }: ToastProviderProps): React.JSX.Element;
-declare function Toast({ position, close, className, ...props }: ToastProps): React.JSX.Element;
+declare function Toast({ position, close, className, ui, ...props }: ToastProps): React.JSX.Element;
 export { Toast, ToastProvider };
 export type { ToastPosition, ToastProps, ToastProviderProps };

package/dist/components/toast.mjs

@@ -49,16 +49,17 @@ function Toast({
   position = "bottom-right",
   close,
   className,
+  ui,
   ...props
 }) {
   const { toasts } = useToast();
-  const ui = theme({ position });
+  const styles = theme({ position });
   return /* @__PURE__ */ React.createElement(UIToast.Portal, null, /* @__PURE__ */ React.createElement(
     UIToast.Viewport,
     {
       "data-slot": "viewport",
       "data-position": position,
-      className: ui.viewport()
+      className: cn(styles.viewport(), ui?.viewport)
     },
     toasts.map((toast) => /* @__PURE__ */ React.createElement(
       UIToast.Root,
@@ -66,25 +67,77 @@ function Toast({
         ...props,
         key: toast.id,
         toast,
-        "data-slot": "toast",
-        className: cn(ui.root(), className),
+        "data-slot": "root",
+        className: cn(styles.root(), ui?.root, className),
         swipeDirection: SWIPE_DIRECTIONS[position]
       },
-      /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
         "span",
         {
+          key: "glass",
           "aria-hidden": "true",
-          "data-slot": "overlay",
-          className: ui.overlay()
-        }
-      )),
-      /* @__PURE__ */ React.createElement(UIToast.Content, { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(ToastStatusIcon, { type: toast.type, className: ui.icon() }), /* @__PURE__ */ React.createElement("div", { "data-slot": "text", className: ui.text() }, /* @__PURE__ */ React.createElement(UIToast.Title, { "data-slot": "title", className: ui.title() }), /* @__PURE__ */ React.createElement(
-        UIToast.Description,
+          "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(
+        UIToast.Content,
         {
-          "data-slot": "description",
-          className: ui.description()
-        }
-      )), /* @__PURE__ */ React.createElement("div", { "data-slot": "actions", className: ui.actions() }, /* @__PURE__ */ React.createElement(UIToast.Action, { "data-slot": "action", className: ui.action() }), close ? close : /* @__PURE__ */ React.createElement(UIToast.Close, { "data-slot": "close", className: ui.close() }, /* @__PURE__ */ React.createElement(CloseIcon, { className: "size-4" }))))
+          key: "content",
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
+        },
+        /* @__PURE__ */ React.createElement(
+          ToastStatusIcon,
+          {
+            type: toast.type,
+            className: cn(styles.icon(), ui?.icon)
+          }
+        ),
+        /* @__PURE__ */ React.createElement("div", { "data-slot": "text", className: cn(styles.text(), ui?.text) }, /* @__PURE__ */ React.createElement(
+          UIToast.Title,
+          {
+            "data-slot": "title",
+            className: cn(styles.title(), ui?.title)
+          }
+        ), /* @__PURE__ */ React.createElement(
+          UIToast.Description,
+          {
+            "data-slot": "description",
+            className: cn(styles.description(), ui?.description)
+          }
+        )),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            "data-slot": "actions",
+            className: cn(styles.actions(), ui?.actions)
+          },
+          /* @__PURE__ */ React.createElement(
+            UIToast.Action,
+            {
+              "data-slot": "action",
+              className: cn(styles.action(), ui?.action)
+            }
+          ),
+          close ? close : /* @__PURE__ */ React.createElement(
+            UIToast.Close,
+            {
+              "data-slot": "close",
+              className: cn(styles.close(), ui?.close)
+            },
+            /* @__PURE__ */ React.createElement(CloseIcon, { className: "size-4" })
+          )
+        )
+      )
     ))
   ));
 }

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

@@ -2,24 +2,30 @@ import { Toggle as UIToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as UIToggleGroup } from "@base-ui/react/toggle-group";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+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 = Omit<UIToggle.Props, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
+type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
     /** Value that identifies the option in the group value. */
-    value: string;
+    value: Value;
     /** Visible content inside the item. */
     label?: React.ReactNode;
     /** Icon rendered before the label. */
     icon?: React.ReactNode;
     /** Tailwind classes merged into the item root. */
     className?: string;
+    /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
+    ui?: Partial<Pick<ToggleGroup["slots"], "item" | "content" | "icon" | "label">>;
 };
 type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
     /** Options rendered by the toggle group. */
-    items: readonly ToggleGroupItemProps[];
+    items: readonly ToggleGroupItemProps<Value>[];
     /** Tailwind classes merged into the group root. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: ToggleGroup["slots"];
 };
-declare function ToggleGroup<Value extends string = string>({ className, size, items, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
+declare function ToggleGroup<Value extends string = string>({ className, ui, size, items, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
 export { ToggleGroup };
 export type { ToggleGroupItemProps, ToggleGroupProps };