@xingxingmofashu/ui 0.1.1 → 0.1.3

package/dist/components/checkbox.mjs

@@ -2,59 +2,106 @@
 import { Checkbox as UICheckbox } from "@base-ui/react/checkbox";
 import { cn } from "cn";
 import * as React from "react";
+import { mergeIds } from "../internal/aria.mjs";
 import theme from "../theme/checkbox.mjs";
-function CheckIcon({ indeterminate }) {
-  return /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      "aria-hidden": "true",
-      "data-icon": indeterminate ? "dash" : "check",
-      focusable: "false",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "1.5"
-    },
-    /* @__PURE__ */ React.createElement("path", { d: indeterminate ? "M3.5 8h9" : "m2.5 8.5 4 4 7-9" })
-  );
-}
+import { CheckIcon } from "./icons/check.mjs";
+import { DashIcon } from "./icons/dash.mjs";
 function Checkbox({
   className,
+  ui,
   label,
   description,
   size,
   indeterminate = false,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const hasName = Boolean(label || ariaLabel || ariaLabelledBy);
+  const labelledBy = ariaLabelledBy || (label && !ariaLabel ? labelId : void 0);
+  const describedBy = mergeIds(
+    ariaDescribedBy,
+    description && hasName ? descriptionId : void 0
+  );
   return /* @__PURE__ */ React.createElement(
     UICheckbox.Root,
     {
       ...props,
+      "aria-describedby": describedBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
       indeterminate,
       "data-slot": "root",
-      className: cn(ui.root(), className)
+      className: cn(styles.root(), ui?.root, className)
     },
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "box", className: ui.box() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "fill", className: ui.fill() }), /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("span", { "data-slot": "box", className: cn(styles.box(), ui?.box) }, /* @__PURE__ */ React.createElement(
       "span",
       {
         "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
+        "data-slot": "fill",
+        className: cn(styles.fill(), ui?.fill)
       }
-    )), /* @__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)
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(
       UICheckbox.Indicator,
       {
         keepMounted: true,
         "aria-hidden": "true",
         "data-slot": "indicator",
-        className: ui.indicator()
+        className: cn(styles.indicator(), ui?.indicator)
       },
-      /* @__PURE__ */ React.createElement("span", { "data-slot": "indicator-icon", className: ui.indicatorIcon() }, /* @__PURE__ */ React.createElement(CheckIcon, { indeterminate }))
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "data-slot": "indicator-icon",
+          className: cn(styles.indicatorIcon(), ui?.indicatorIcon)
+        },
+        indeterminate ? /* @__PURE__ */ React.createElement(DashIcon, null) : /* @__PURE__ */ React.createElement(CheckIcon, null)
+      )
     )),
-    label || description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "wrapper", className: ui.wrapper() }, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label) : null, description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "description", className: ui.description() }, description) : null) : null
+    label || description ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "wrapper",
+        className: cn(styles.wrapper(), ui?.wrapper)
+      },
+      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 { Checkbox };

package/dist/components/dialog.d.ts

@@ -1,5 +1,8 @@
 import { Dialog as UIDialog } from "@base-ui/react/dialog";
 import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/dialog";
+type Dialog = ComponentConfig<typeof theme>;
 type DialogProps = Omit<UIDialog.Root.Props, "children"> & {
     /** Dialog heading. */
     title: React.ReactNode;
@@ -10,8 +13,10 @@ type DialogProps = Omit<UIDialog.Root.Props, "children"> & {
     /** Action area rendered at the bottom of the dialog. */
     footer?: React.ReactNode;
     /** Tailwind classes merged into the popup. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Dialog["slots"];
 };
-declare function Dialog({ title, description, children, footer, className, ...props }: DialogProps): React.JSX.Element;
+declare function Dialog({ title, description, children, footer, className, ui, ...props }: DialogProps): React.JSX.Element;
 export { Dialog };
 export type { DialogProps };

package/dist/components/dialog.mjs

@@ -9,31 +9,77 @@ function Dialog({
   children,
   footer,
   className,
+  ui,
   ...props
 }) {
-  const ui = theme();
-  return /* @__PURE__ */ React.createElement(UIDialog.Root, { ...props }, /* @__PURE__ */ React.createElement(UIDialog.Portal, null, /* @__PURE__ */ React.createElement(UIDialog.Backdrop, { "data-slot": "backdrop", className: ui.backdrop() }), /* @__PURE__ */ React.createElement(UIDialog.Viewport, { "data-slot": "viewport", className: ui.viewport() }, /* @__PURE__ */ React.createElement(
-    UIDialog.Popup,
+  const styles = theme();
+  return /* @__PURE__ */ React.createElement(UIDialog.Root, { ...props }, /* @__PURE__ */ React.createElement(UIDialog.Portal, null, /* @__PURE__ */ React.createElement(
+    UIDialog.Backdrop,
     {
-      "data-slot": "popup",
-      className: cn(ui.popup(), className)
+      "data-slot": "backdrop",
+      className: cn(styles.backdrop(), ui?.backdrop)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    UIDialog.Viewport,
+    {
+      "data-slot": "viewport",
+      className: cn(styles.viewport(), ui?.viewport)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
-      }
-    )),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIDialog.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
-      UIDialog.Description,
+    /* @__PURE__ */ React.createElement(
+      UIDialog.Popup,
       {
-        "data-slot": "description",
-        className: ui.description()
+        "data-slot": "popup",
+        className: cn(styles.popup(), ui?.popup, className)
       },
-      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(
+        "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(
+        "div",
+        {
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
+        },
+        /* @__PURE__ */ React.createElement(
+          UIDialog.Title,
+          {
+            "data-slot": "title",
+            className: cn(styles.title(), ui?.title)
+          },
+          title
+        ),
+        description ? /* @__PURE__ */ React.createElement(
+          UIDialog.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
+      )
+    )
+  )));
 }
 export { Dialog };

package/dist/components/drawer.d.ts

@@ -1,5 +1,8 @@
 import { Drawer as UIDrawer } from "@base-ui/react/drawer";
 import * as React from "react";
+import { type ComponentConfig } from "../internal/tv";
+import theme from "../theme/drawer";
+type Drawer = ComponentConfig<typeof theme>;
 interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className" | "style" | "swipeDirection"> {
     /** Drawer heading. */
     title: React.ReactNode;
@@ -12,8 +15,10 @@ interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className"
     /** Edge the drawer slides in from. */
     direction?: NonNullable<UIDrawer.Root.Props["swipeDirection"]>;
     /** Tailwind classes merged into the popup. */
-    className?: any;
+    className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Drawer["slots"];
 }
-declare function Drawer({ title, description, children, footer, direction, className, ...props }: DrawerProps): React.JSX.Element;
+declare function Drawer({ title, description, children, footer, direction, className, ui, ...props }: DrawerProps): React.JSX.Element;
 export { Drawer };
 export type { DrawerProps };

package/dist/components/drawer.mjs

@@ -10,31 +10,77 @@ function Drawer({
   footer,
   direction = "down",
   className,
+  ui,
   ...props
 }) {
-  const ui = theme({ direction });
-  return /* @__PURE__ */ React.createElement(UIDrawer.Root, { ...props, swipeDirection: direction }, /* @__PURE__ */ React.createElement(UIDrawer.Portal, null, /* @__PURE__ */ React.createElement(UIDrawer.Backdrop, { "data-slot": "backdrop", className: ui.backdrop() }), /* @__PURE__ */ React.createElement(UIDrawer.Viewport, { "data-slot": "viewport", className: ui.viewport() }, /* @__PURE__ */ React.createElement(
-    UIDrawer.Popup,
+  const styles = theme({ direction });
+  return /* @__PURE__ */ React.createElement(UIDrawer.Root, { ...props, swipeDirection: direction }, /* @__PURE__ */ React.createElement(UIDrawer.Portal, null, /* @__PURE__ */ React.createElement(
+    UIDrawer.Backdrop,
     {
-      "data-slot": "popup",
-      className: cn(ui.popup(), className)
+      "data-slot": "backdrop",
+      className: cn(styles.backdrop(), ui?.backdrop)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    UIDrawer.Viewport,
+    {
+      "data-slot": "viewport",
+      className: cn(styles.viewport(), ui?.viewport)
     },
-    /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
-      }
-    )),
-    /* @__PURE__ */ React.createElement(UIDrawer.Content, { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIDrawer.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
-      UIDrawer.Description,
+    /* @__PURE__ */ React.createElement(
+      UIDrawer.Popup,
       {
-        "data-slot": "description",
-        className: ui.description()
+        "data-slot": "popup",
+        className: cn(styles.popup(), ui?.popup, className)
       },
-      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(
+        "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(
+        UIDrawer.Content,
+        {
+          "data-slot": "content",
+          className: cn(styles.content(), ui?.content)
+        },
+        /* @__PURE__ */ React.createElement(
+          UIDrawer.Title,
+          {
+            "data-slot": "title",
+            className: cn(styles.title(), ui?.title)
+          },
+          title
+        ),
+        description ? /* @__PURE__ */ React.createElement(
+          UIDrawer.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
+      )
+    )
+  )));
 }
 export { Drawer };

package/dist/components/icons/check.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function CheckIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { CheckIcon };

package/dist/components/icons/check.mjs

@@ -0,0 +1,24 @@
+import * as React from "react";
+function CheckIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      "data-icon": "check",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "m4 12 6 6 10-12" })
+  );
+}
+export { CheckIcon };

package/dist/components/icons/close.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function CloseIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { CloseIcon };

package/dist/components/icons/close.mjs

@@ -0,0 +1,21 @@
+import * as React from "react";
+function CloseIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "m6 6 12 12M18 6 6 18" })
+  );
+}
+export { CloseIcon };

package/dist/components/icons/dash.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function DashIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { DashIcon };

package/dist/components/icons/dash.mjs

@@ -0,0 +1,24 @@
+import * as React from "react";
+function DashIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      "data-icon": "dash",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M5 12h14" })
+  );
+}
+export { DashIcon };

package/dist/components/icons/error.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function ErrorIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { ErrorIcon };

package/dist/components/icons/error.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+function ErrorIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 8v5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 16.5h.01" })
+  );
+}
+export { ErrorIcon };

package/dist/components/icons/info.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function InfoIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { InfoIcon };

package/dist/components/icons/info.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+function InfoIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 11v5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 8h.01" })
+  );
+}
+export { InfoIcon };

package/dist/components/icons/loading.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function LoadingIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { LoadingIcon };

package/dist/components/icons/loading.mjs

@@ -0,0 +1,22 @@
+import * as React from "react";
+function LoadingIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8", opacity: "0.25" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 4a8 8 0 0 1 8 8" })
+  );
+}
+export { LoadingIcon };

package/dist/components/icons/plus.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function PlusIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { PlusIcon };

package/dist/components/icons/plus.mjs

@@ -0,0 +1,22 @@
+import * as React from "react";
+function PlusIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M2.5 12h19M12 21.5v-19" })
+  );
+}
+export { PlusIcon };

package/dist/components/icons/success.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function SuccessIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { SuccessIcon };

package/dist/components/icons/success.mjs

@@ -0,0 +1,22 @@
+import * as React from "react";
+function SuccessIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "8.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "m8 12.5 3 3 5.5-6" })
+  );
+}
+export { SuccessIcon };

package/dist/components/icons/warning.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function WarningIcon({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { WarningIcon };

package/dist/components/icons/warning.mjs

@@ -0,0 +1,23 @@
+import * as React from "react";
+function WarningIcon({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M12 4 21 20H3L12 4Z" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 10v4" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 17.5h.01" })
+  );
+}
+export { WarningIcon };

package/dist/components/input.d.ts

@@ -1,10 +1,14 @@
 import { Input as UIInput } from "@base-ui/react/input";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/input";
+type Input = ComponentConfig<typeof theme>;
 interface InputProps extends Omit<UIInput.Props, "className" | "children" | "size" | "style">, VariantProps<typeof theme> {
     /** Tailwind classes merged into the root element. */
     className?: string;
+    /** Tailwind classes for internal slots, keyed by `data-slot`. */
+    ui?: Input["slots"];
     /** Visible label associated with the input. */
     label?: React.ReactNode;
     /** Optional supporting text under the field. */
@@ -14,6 +18,6 @@ interface InputProps extends Omit<UIInput.Props, "className" | "children" | "siz
     /** Icon rendered after the input. */
     trailingIcon?: React.ReactNode;
 }
-declare function Input({ className, label, description, leadingIcon, trailingIcon, size, id, disabled, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, ui, label, description, leadingIcon, trailingIcon, size, id, disabled, "aria-describedby": ariaDescribedBy, ...props }: InputProps): React.JSX.Element;
 export { Input };
 export type { InputProps };