@xingxingmofashu/ui 0.1.1 → 0.1.3

package/dist/components/input.mjs

@@ -2,9 +2,11 @@
 import { Input as UIInput } from "@base-ui/react/input";
 import { cn } from "cn";
 import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
 import theme from "../theme/input.mjs";
 function Input({
   className,
+  ui,
   label,
   description,
   leadingIcon,
@@ -12,53 +14,94 @@ function Input({
   size,
   id,
   disabled,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   const generatedId = React.useId();
+  const descriptionId = React.useId();
   const inputId = id ?? generatedId;
+  const describedBy = mergeIds(
+    ariaDescribedBy,
+    description ? descriptionId : void 0
+  );
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-slot": "root",
       "data-disabled": disabled || void 0,
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    label ? /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, "data-slot": "label", className: ui.label() }, label) : null,
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "control", className: ui.control() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
-      "span",
+    label ? /* @__PURE__ */ React.createElement(
+      "label",
       {
-        "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
-      }
-    )), leadingIcon ? /* @__PURE__ */ React.createElement(
+        htmlFor: inputId,
+        "data-slot": "label",
+        className: cn(styles.label(), ui?.label)
+      },
+      label
+    ) : null,
+    /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "leading-icon",
-        className: ui.leadingIcon(),
-        "aria-hidden": "true"
+        "data-slot": "control",
+        className: cn(styles.control(), ui?.control)
       },
-      leadingIcon
-    ) : null, /* @__PURE__ */ React.createElement(
-      UIInput,
-      {
-        ...props,
-        id: inputId,
-        disabled,
-        "data-slot": "input",
-        className: ui.input()
-      }
-    ), trailingIcon ? /* @__PURE__ */ React.createElement(
+      /* @__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)
+          }
+        )
+      ),
+      leadingIcon ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "data-slot": "leading-icon",
+          className: cn(styles.leadingIcon(), ui?.leadingIcon),
+          "aria-hidden": "true"
+        },
+        leadingIcon
+      ) : null,
+      /* @__PURE__ */ React.createElement(
+        UIInput,
+        {
+          ...props,
+          id: inputId,
+          disabled,
+          "aria-describedby": describedBy,
+          "data-slot": "input",
+          className: cn(styles.input(), ui?.input)
+        }
+      ),
+      trailingIcon ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "data-slot": "trailing-icon",
+          className: cn(styles.trailingIcon(), ui?.trailingIcon),
+          "aria-hidden": "true"
+        },
+        trailingIcon
+      ) : null
+    ),
+    description ? /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "trailing-icon",
-        className: ui.trailingIcon(),
-        "aria-hidden": "true"
+        id: descriptionId,
+        "data-slot": "description",
+        className: cn(styles.description(), ui?.description)
       },
-      trailingIcon
-    ) : null),
-    description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "description", className: ui.description() }, description) : null
+      description
+    ) : null
   );
 }
 export { Input };

package/dist/components/popover.d.ts

@@ -1,5 +1,8 @@
 import { Popover as UIPopover } from "@base-ui/react/popover";
 import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/popover";
+type Popover = ComponentConfig<typeof theme>;
 type PositionerProps = React.ComponentProps<typeof UIPopover.Positioner>;
 type PopoverProps = Omit<UIPopover.Root.Props, "children"> & {
     /** Element that opens the popover. It must forward props and refs. */
@@ -25,8 +28,10 @@ type PopoverProps = Omit<UIPopover.Root.Props, "children"> & {
     /** Padding between the popup and the edge of the collision boundary. */
     collisionPadding?: PositionerProps["collisionPadding"];
     /** Tailwind classes merged into the popup. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Popover["slots"];
 };
-declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, ...props }: PopoverProps): React.JSX.Element;
+declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: PopoverProps): React.JSX.Element;
 export { Popover };
 export type { PopoverProps };

package/dist/components/popover.mjs

@@ -16,9 +16,10 @@ function Popover({
   alignOffset,
   collisionPadding,
   className,
+  ui,
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
   return /* @__PURE__ */ React.createElement(UIPopover.Root, { ...props }, /* @__PURE__ */ React.createElement(UIPopover.Trigger, { render: trigger }), /* @__PURE__ */ React.createElement(UIPopover.Portal, null, /* @__PURE__ */ React.createElement(
     UIPopover.Positioner,
     {
@@ -28,31 +29,69 @@ function Popover({
       sideOffset,
       alignOffset,
       collisionPadding,
-      className: ui.positioner()
+      className: cn(styles.positioner(), ui?.positioner)
     },
     /* @__PURE__ */ React.createElement(
       UIPopover.Popup,
       {
         "data-slot": "popup",
-        className: cn(ui.popup(), className)
+        className: cn(styles.popup(), ui?.popup, 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)
+          }
+        )
+      ),
+      arrow ? /* @__PURE__ */ React.createElement(
+        UIPopover.Arrow,
+        {
+          "data-slot": "arrow",
+          className: cn(styles.arrow(), ui?.arrow)
         }
-      )),
-      arrow ? /* @__PURE__ */ React.createElement(UIPopover.Arrow, { "data-slot": "arrow", className: ui.arrow() }) : null,
-      /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIPopover.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
-        UIPopover.Description,
+      ) : null,
+      /* @__PURE__ */ React.createElement(
+        "div",
         {
-          "data-slot": "description",
-          className: ui.description()
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
         },
-        description
-      ) : null, children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, footer ? /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, footer) : null)
+        /* @__PURE__ */ React.createElement(
+          UIPopover.Title,
+          {
+            "data-slot": "title",
+            className: cn(styles.title(), ui?.title)
+          },
+          title
+        ),
+        description ? /* @__PURE__ */ React.createElement(
+          UIPopover.Description,
+          {
+            "data-slot": "description",
+            className: cn(styles.description(), ui?.description)
+          },
+          description
+        ) : null,
+        children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: cn(styles.body(), ui?.body) }, children) : null,
+        footer ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            "data-slot": "footer",
+            className: cn(styles.footer(), ui?.footer)
+          },
+          footer
+        ) : null
+      )
     )
   )));
 }

package/dist/components/progress.d.ts

@@ -0,0 +1,21 @@
+import { Progress as UIProgress } from "@base-ui/react/progress";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/progress";
+type Progress = ComponentConfig<typeof theme>;
+type ProgressProps = Omit<UIProgress.Root.Props, "children" | "className" | "style" | "value"> & VariantProps<typeof theme> & {
+    /** Current value. Use `null` for an indeterminate progress bar. */
+    value?: number | null;
+    /** Visible label for the progress bar. */
+    label?: React.ReactNode;
+    /** Supporting text rendered below the bar. */
+    description?: React.ReactNode;
+    /** Tailwind classes merged into the root. */
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Progress["slots"];
+};
+declare function Progress({ className, ui, label, description, size, value, "aria-describedby": ariaDescribedBy, ...props }: ProgressProps): React.JSX.Element;
+export { Progress };
+export type { ProgressProps };

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,12 +1,23 @@
 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`. */
+    getAriaValueText?: UISlider.Thumb.Props["getAriaValueText"];
 };
 /**
- * Sliders need an accessible name. Pass `aria-labelledby`; Base UI forwards it
- * from the root to every thumb.
+ * Sliders need an accessible name. Pass `aria-label` or `aria-labelledby`;
+ * 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, ...props }: SliderProps<Value>): import("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

@@ -1,41 +1,90 @@
 "use client";
 import { Slider as UISlider } from "@base-ui/react/slider";
 import { cn } from "cn";
+import * as React from "react";
 import theme from "../theme/slider.mjs";
+function setAriaAttribute(input, name, value) {
+  if (value === void 0 || value === null) {
+    input.removeAttribute(name);
+    return;
+  }
+  input.setAttribute(name, String(value));
+}
 function Slider({
   className,
+  ui,
   value,
   defaultValue,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  getAriaLabel,
+  getAriaValueText,
   ...props
 }) {
-  const ui = theme();
+  const styles = theme();
+  const syncThumbAria = React.useCallback(
+    (input) => {
+      if (!input) {
+        return;
+      }
+      setAriaAttribute(input, "aria-invalid", ariaInvalid);
+      setAriaAttribute(input, "aria-errormessage", ariaErrorMessage);
+    },
+    [ariaErrorMessage, ariaInvalid]
+  );
   const values = value ?? defaultValue;
   const thumbCount = Array.isArray(values) ? Math.max(1, values.length) : 1;
   return /* @__PURE__ */ React.createElement(
     UISlider.Root,
     {
       ...props,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       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,
-      {
-        "data-slot": "indicator",
-        className: ui.indicator()
-      }
-    )), Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ React.createElement(
-      UISlider.Thumb,
+    /* @__PURE__ */ React.createElement(
+      UISlider.Control,
       {
-        key: index,
-        index,
-        "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, ...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 };