@xingxingmofashu/ui 0.1.2 → 0.1.4

package/dist/components/checkbox.mjs

@@ -8,6 +8,7 @@ import { CheckIcon } from "./icons/check.mjs";
 import { DashIcon } from "./icons/dash.mjs";
 function Checkbox({
   className,
+  ui,
   label,
   description,
   size,
@@ -17,7 +18,7 @@ function Checkbox({
   "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);
@@ -35,34 +36,72 @@ function Checkbox({
       "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() }, indeterminate ? /* @__PURE__ */ React.createElement(DashIcon, null) : /* @__PURE__ */ React.createElement(CheckIcon, null))
+      /* @__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", { 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 { 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/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, "aria-describedby": ariaDescribedBy, ...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 };

package/dist/components/input.mjs

@@ -6,6 +6,7 @@ import { mergeIds } from "../internal/aria.mjs";
 import theme from "../theme/input.mjs";
 function Input({
   className,
+  ui,
   label,
   description,
   leadingIcon,
@@ -16,7 +17,7 @@ function Input({
   "aria-describedby": ariaDescribedBy,
   ...props
 }) {
-  const ui = theme({ size });
+  const styles = theme({ size });
   const generatedId = React.useId();
   const descriptionId = React.useId();
   const inputId = id ?? generatedId;
@@ -29,49 +30,75 @@ function Input({
     {
       "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",
-      {
-        "aria-hidden": "true",
-        "data-slot": "overlay",
-        className: ui.overlay()
-      }
-    )), leadingIcon ? /* @__PURE__ */ React.createElement(
-      "span",
+    label ? /* @__PURE__ */ React.createElement(
+      "label",
       {
-        "data-slot": "leading-icon",
-        className: ui.leadingIcon(),
-        "aria-hidden": "true"
+        htmlFor: inputId,
+        "data-slot": "label",
+        className: cn(styles.label(), ui?.label)
       },
-      leadingIcon
-    ) : null, /* @__PURE__ */ React.createElement(
-      UIInput,
-      {
-        ...props,
-        id: inputId,
-        disabled,
-        "aria-describedby": describedBy,
-        "data-slot": "input",
-        className: ui.input()
-      }
-    ), trailingIcon ? /* @__PURE__ */ React.createElement(
+      label
+    ) : null,
+    /* @__PURE__ */ React.createElement(
       "span",
       {
-        "data-slot": "trailing-icon",
-        className: ui.trailingIcon(),
-        "aria-hidden": "true"
+        "data-slot": "control",
+        className: cn(styles.control(), ui?.control)
       },
-      trailingIcon
-    ) : 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)
+          }
+        )
+      ),
+      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",
       {
         id: descriptionId,
         "data-slot": "description",
-        className: ui.description()
+        className: cn(styles.description(), ui?.description)
       },
       description
     ) : null

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 };