@moduix/react 1.1.0

package/dist/components/badge/Badge.css

@@ -0,0 +1,66 @@
+@layer ui.components {
+  .aGjOha_root {
+    justify-content: center;
+    align-items: center;
+    gap: var(--badge-gap, .375rem);
+    border: var(--badge-border-width, var(--border-width-sm)) solid
+      var(--badge-border-color, transparent);
+    border-radius: var(--badge-radius, var(--radius-full));
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    padding-block: var(--badge-padding-y, 0);
+    padding-inline: var(--badge-padding-x, .625rem);
+    background-color: var(--badge-bg, var(--color-primary));
+    color: var(--badge-color, var(--color-primary-foreground));
+    font-size: var(--badge-font-size, var(--text-xs));
+    font-weight: var(--badge-font-weight, var(--weight-medium));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--badge-line-height, var(--line-height-text-xs));
+    min-height: var(--badge-height, 1.25rem);
+    user-select: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    transition: color var(--transition-default),
+      background-color var(--transition-default),
+      border-color var(--transition-default);
+    text-decoration: none;
+    display: inline-flex;
+    overflow: hidden;
+
+    & > svg {
+      width: var(--badge-icon-size, .75rem);
+      height: var(--badge-icon-size, .75rem);
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+
+    &[data-variant="secondary"] {
+      background-color: var(--badge-bg, var(--color-secondary));
+      color: var(--badge-color, var(--color-secondary-foreground));
+    }
+
+    &[data-variant="destructive"] {
+      background-color: var(--badge-bg, var(--color-destructive));
+      color: var(--badge-color, var(--color-primary-foreground));
+    }
+
+    &[data-variant="outline"], &[data-variant="ghost"] {
+      background-color: var(--badge-bg, transparent);
+      color: var(--badge-color, var(--color-foreground));
+    }
+
+    &[data-variant="outline"] {
+      border-color: var(--badge-border-color, var(--color-border));
+    }
+  }
+
+  .aGjOha_dot {
+    width: var(--badge-dot-size, .375rem);
+    height: var(--badge-dot-size, .375rem);
+    background-color: currentColor;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+}

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/badge/Badge.d.ts
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+  } & import("react").RefAttributes<HTMLSpanElement>>;
+  Dot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Badge };

package/dist/components/badge/Badge.js

@@ -0,0 +1,35 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Badge_module_default from "./Badge.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/badge/Badge.tsx
+const BadgeRoot = forwardRef(function BadgeRoot({ className, variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-scope": "badge",
+		"data-part": "root",
+		"data-slot": "badge-root",
+		"data-variant": variant,
+		className: clsx(Badge_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const BadgeDot = forwardRef(function BadgeDot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-scope": "badge",
+		"data-part": "dot",
+		"data-slot": "badge-dot",
+		"aria-hidden": "true",
+		className: clsx(Badge_module_default.dot, normalizeClassName(className)),
+		...props
+	});
+});
+const Badge = Object.assign(BadgeRoot, {
+	Root: BadgeRoot,
+	Dot: BadgeDot
+});
+//#endregion
+export { Badge };

package/dist/components/badge/Badge.module.js

@@ -0,0 +1,8 @@
+import './Badge.css';
+//#region src/components/badge/Badge.module.css
+var Badge_module_default = {
+	"dot": "aGjOha_dot",
+	"root": "aGjOha_root"
+};
+//#endregion
+export { Badge_module_default as default };

package/dist/components/bleed/Bleed.css

@@ -0,0 +1,51 @@
+@layer ui.components {
+  .Nez5aa_root {
+    box-sizing: border-box;
+    margin: 0;
+
+    &[data-inline="xs"] {
+      margin-inline: calc(var(--bleed-inline-xs, var(--spacing-1)) * -1);
+    }
+
+    &[data-inline="sm"] {
+      margin-inline: calc(var(--bleed-inline-sm, var(--spacing-2)) * -1);
+    }
+
+    &[data-inline="md"] {
+      margin-inline: calc(var(--bleed-inline-md, var(--spacing-3)) * -1);
+    }
+
+    &[data-inline="lg"] {
+      margin-inline: calc(var(--bleed-inline-lg, var(--spacing-4)) * -1);
+    }
+
+    &[data-inline="xl"] {
+      margin-inline: calc(var(--bleed-inline-xl, var(--spacing-6)) * -1);
+    }
+
+    &[data-inline="full"] {
+      inline-size: var(--bleed-inline-full-size, 100vw);
+      margin-inline: var(--bleed-inline-full, calc(50% - 50vw));
+    }
+
+    &[data-block="xs"] {
+      margin-block: calc(var(--bleed-block-xs, var(--spacing-1)) * -1);
+    }
+
+    &[data-block="sm"] {
+      margin-block: calc(var(--bleed-block-sm, var(--spacing-2)) * -1);
+    }
+
+    &[data-block="md"] {
+      margin-block: calc(var(--bleed-block-md, var(--spacing-3)) * -1);
+    }
+
+    &[data-block="lg"] {
+      margin-block: calc(var(--bleed-block-lg, var(--spacing-4)) * -1);
+    }
+
+    &[data-block="xl"] {
+      margin-block: calc(var(--bleed-block-xl, var(--spacing-6)) * -1);
+    }
+  }
+}

package/dist/components/bleed/Bleed.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/bleed/Bleed.d.ts
+declare const Bleed: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  inline?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  block?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    inline?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    block?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Bleed };

package/dist/components/bleed/Bleed.js

@@ -0,0 +1,22 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Bleed_module_default from "./Bleed.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/bleed/Bleed.tsx
+const BleedRoot = forwardRef(function BleedRoot({ inline = "full", block = "none", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "bleed",
+		"data-part": "root",
+		"data-slot": "bleed-root",
+		"data-inline": inline,
+		"data-block": block,
+		className: clsx(Bleed_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const Bleed = Object.assign(BleedRoot, { Root: BleedRoot });
+//#endregion
+export { Bleed };

package/dist/components/bleed/Bleed.module.js

@@ -0,0 +1,5 @@
+import './Bleed.css';
+//#region src/components/bleed/Bleed.module.css
+var Bleed_module_default = { "root": "Nez5aa_root" };
+//#endregion
+export { Bleed_module_default as default };

package/dist/components/breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,90 @@
+@layer ui.components {
+  .ubtGFa_root[data-scope="breadcrumbs"][data-part="root"] {
+    max-width: var(--breadcrumbs-max-width, 100%);
+    color: var(--breadcrumbs-color, var(--color-muted-foreground));
+    font-size: var(--breadcrumbs-font-size, var(--text-sm));
+    line-height: var(--breadcrumbs-line-height, var(--line-height-text-sm));
+  }
+
+  .ubtGFa_list[data-scope="breadcrumbs"][data-part="list"] {
+    align-items: center;
+    gap: var(--breadcrumbs-gap, var(--spacing-1));
+    white-space: nowrap;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
+    & > .ubtGFa_item:last-child {
+      max-width: var(--breadcrumbs-item-max-width, 16rem);
+      flex: auto;
+    }
+  }
+
+  .ubtGFa_item[data-scope="breadcrumbs"][data-part="item"] {
+    flex: none;
+    align-items: center;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .ubtGFa_link[data-scope="breadcrumbs"][data-part="link"], .ubtGFa_page[data-scope="breadcrumbs"][data-part="page"] {
+    min-width: 0;
+    max-width: 100%;
+    padding-inline: var(--breadcrumbs-item-padding-x, .25rem);
+    white-space: nowrap;
+    display: block;
+  }
+
+  .ubtGFa_link[data-scope="breadcrumbs"][data-part="link"], .ubtGFa_page[data-scope="breadcrumbs"][data-part="page"], .ubtGFa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .ubtGFa_link[data-scope="breadcrumbs"][data-part="link"] {
+    color: var(--breadcrumbs-link-color, var(--color-muted-foreground));
+    text-decoration: var(--breadcrumbs-link-text-decoration, none);
+    text-underline-offset: var(--breadcrumbs-link-underline-offset, .2em);
+    border-radius: var(--breadcrumbs-link-radius, var(--radius-sm));
+    transition: var(--breadcrumbs-link-transition, var(--transition-default));
+    outline: none;
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--breadcrumbs-link-color-hover, var(--color-foreground));
+        text-decoration: var(--breadcrumbs-link-text-decoration-hover, none);
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--breadcrumbs-focus-ring-width, var(--border-width-sm))
+        var(--breadcrumbs-focus-ring-color, var(--color-ring));
+    }
+  }
+
+  .ubtGFa_page[data-scope="breadcrumbs"][data-part="page"] {
+    color: var(--breadcrumbs-page-color, var(--color-foreground));
+    font-weight: var(--breadcrumbs-page-font-weight, var(--weight-medium));
+  }
+
+  .ubtGFa_separator[data-scope="breadcrumbs"][data-part="separator"] {
+    color: var(--breadcrumbs-separator-color, var(--color-muted-foreground));
+    font-size: var(--breadcrumbs-separator-font-size, .875em);
+    user-select: none;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .ubtGFa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
+    min-width: var(--breadcrumbs-ellipsis-size, 1rem);
+    min-height: var(--breadcrumbs-ellipsis-size, 1rem);
+    padding-inline: var(--breadcrumbs-item-padding-x, .25rem);
+    color: var(--breadcrumbs-ellipsis-color, var(--color-muted-foreground));
+    border-radius: var(--breadcrumbs-ellipsis-radius, var(--radius-sm));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/breadcrumbs/Breadcrumbs.d.ts
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLOListElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+  Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+  Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,95 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Breadcrumbs_module_default from "./Breadcrumbs.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/breadcrumbs/Breadcrumbs.tsx
+const BreadcrumbsRoot = forwardRef(function BreadcrumbsRoot({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.nav, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "root",
+		"data-slot": "breadcrumbs-root",
+		"aria-label": ariaLabel,
+		className: clsx(Breadcrumbs_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const BreadcrumbsList = forwardRef(function BreadcrumbsList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.ol, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "list",
+		"data-slot": "breadcrumbs-list",
+		className: clsx(Breadcrumbs_module_default.list, normalizeClassName(className)),
+		...props
+	});
+});
+const BreadcrumbsItem = forwardRef(function BreadcrumbsItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.li, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "item",
+		"data-slot": "breadcrumbs-item",
+		className: clsx(Breadcrumbs_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const BreadcrumbsLink = forwardRef(function BreadcrumbsLink({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.a, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "link",
+		"data-slot": "breadcrumbs-link",
+		className: clsx(Breadcrumbs_module_default.link, normalizeClassName(className)),
+		...props
+	});
+});
+const BreadcrumbsPage = forwardRef(function BreadcrumbsPage({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "page",
+		"data-slot": "breadcrumbs-page",
+		"aria-current": "page",
+		className: clsx(Breadcrumbs_module_default.page, normalizeClassName(className)),
+		...props
+	});
+});
+const BreadcrumbsSeparator = forwardRef(function BreadcrumbsSeparator({ className, children = "/", role = "presentation", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.li, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "separator",
+		"data-slot": "breadcrumbs-separator",
+		"aria-hidden": "true",
+		role,
+		className: clsx(Breadcrumbs_module_default.separator, normalizeClassName(className)),
+		...props,
+		children
+	});
+});
+const BreadcrumbsEllipsis = forwardRef(function BreadcrumbsEllipsis({ className, children = "...", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-scope": "breadcrumbs",
+		"data-part": "ellipsis",
+		"data-slot": "breadcrumbs-ellipsis",
+		"aria-hidden": "true",
+		className: clsx(Breadcrumbs_module_default.ellipsis, normalizeClassName(className)),
+		...props,
+		children
+	});
+});
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+	Root: BreadcrumbsRoot,
+	List: BreadcrumbsList,
+	Item: BreadcrumbsItem,
+	Link: BreadcrumbsLink,
+	Page: BreadcrumbsPage,
+	Separator: BreadcrumbsSeparator,
+	Ellipsis: BreadcrumbsEllipsis
+});
+//#endregion
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.module.js

@@ -0,0 +1,13 @@
+import './Breadcrumbs.css';
+//#region src/components/breadcrumbs/Breadcrumbs.module.css
+var Breadcrumbs_module_default = {
+	"ellipsis": "ubtGFa_ellipsis",
+	"item": "ubtGFa_item",
+	"link": "ubtGFa_link",
+	"list": "ubtGFa_list",
+	"page": "ubtGFa_page",
+	"root": "ubtGFa_root",
+	"separator": "ubtGFa_separator"
+};
+//#endregion
+export { Breadcrumbs_module_default as default };

package/dist/components/button/Button.css

@@ -0,0 +1,193 @@
+@layer ui.components {
+  .ypNn3a_root {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--button-content-gap, var(--spacing-2));
+    border: var(--button-border-width, var(--border-width-sm)) solid transparent;
+    border-radius: var(--button-radius, var(--radius-md));
+    color: var(--button-color, var(--color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--button-font-size, var(--text-sm));
+    font-weight: var(--button-font-weight, var(--weight-medium));
+    line-height: var(--button-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--button-transition, var(--transition-default)),
+      border-color var(--button-transition, var(--transition-default)),
+      color var(--button-transition, var(--transition-default)),
+      opacity var(--button-transition, var(--transition-default)),
+      box-shadow var(--button-transition, var(--transition-default));
+    background-color: #0000;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+
+    &:focus-visible {
+      outline: var(--button-focus-ring-width, var(--border-width-md)) solid
+        var(--button-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--button-focus-ring-offset, var(--button-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &[data-disabled] {
+      opacity: var(--button-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    & :where(svg) {
+      width: var(--button-icon-size, 1rem);
+      height: var(--button-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+
+    &[data-variant="default"] {
+      border-color: var(--button-default-border-color, var(--color-primary));
+      background-color: var(--button-default-bg, var(--color-primary));
+      color: var(--button-default-color, var(--color-primary-foreground));
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          background-color: var(--button-default-bg-hover, var(--color-foreground));
+        }
+      }
+    }
+
+    &[data-variant="outline"] {
+      border-color: var(--button-outline-border-color, var(--color-border));
+      background-color: var(--button-outline-bg, var(--color-background));
+      color: var(--button-outline-color, var(--color-foreground));
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          background-color: var(--button-outline-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    &[data-variant="secondary"] {
+      border-color: var(--button-secondary-border-color, var(--color-secondary));
+      background-color: var(--button-secondary-bg, var(--color-secondary));
+      color: var(--button-secondary-color, var(--color-secondary-foreground));
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          background-color: var(--button-secondary-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    &[data-variant="destructive"] {
+      border-color: var(--button-destructive-border-color, var(--color-destructive));
+      background-color: var(--button-destructive-bg, var(--color-destructive));
+      color: var(--button-destructive-color, var(--color-primary-foreground));
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          filter: brightness(var(--button-destructive-hover-brightness, .96));
+        }
+      }
+    }
+
+    &[data-variant="destructive-outline"] {
+      border-color: var(--button-destructive-outline-border-color, var(--color-destructive));
+      background-color: var(--button-destructive-outline-bg, var(--color-background));
+      color: var(--button-destructive-outline-color, var(--color-destructive));
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          background-color: var(--button-destructive-outline-bg-hover, var(--color-destructive));
+          color: var(--button-destructive-outline-color-hover, var(--button-destructive-color, var(--color-primary-foreground)));
+        }
+      }
+    }
+
+    &[data-variant="ghost"] {
+      border-color: var(--button-ghost-border-color, transparent);
+      background-color: var(--button-ghost-bg, transparent);
+      color: var(--button-ghost-color, var(--color-foreground));
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          background-color: var(--button-ghost-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    &[data-variant="link"] {
+      color: var(--button-link-color, var(--color-primary));
+      text-decoration: var(--button-link-text-decoration, underline);
+      text-underline-offset: var(--button-link-underline-offset, .25em);
+      background-color: #0000;
+      border-color: #0000;
+      padding-inline: 0;
+
+      @media (hover: hover) {
+        &:not([data-disabled]):hover {
+          color: var(--button-link-color-hover, var(--color-foreground));
+        }
+      }
+    }
+
+    &[data-size="xs"] {
+      min-height: var(--button-size-xs, var(--size-xs));
+      padding-block: var(--button-padding-y-xs, .25rem);
+      padding-inline: var(--button-padding-x-xs, .625rem);
+      font-size: var(--button-font-size-xs, var(--text-xs));
+      line-height: var(--button-line-height-xs, var(--line-height-text-xs));
+    }
+
+    &[data-size="sm"] {
+      min-height: var(--button-size-sm, var(--size-sm));
+      padding-block: var(--button-padding-y-sm, .375rem);
+      padding-inline: var(--button-padding-x-sm, .75rem);
+    }
+
+    &[data-size="md"] {
+      min-height: var(--button-size-md, var(--size-lg));
+      padding-block: var(--button-padding-y-md, .5rem);
+      padding-inline: var(--button-padding-x-md, 1rem);
+    }
+
+    &[data-size="lg"] {
+      min-height: var(--button-size-lg, var(--size-xl));
+      padding-block: var(--button-padding-y-lg, .625rem);
+      padding-inline: var(--button-padding-x-lg, 1.25rem);
+      font-size: var(--button-font-size-lg, var(--text-md));
+      line-height: var(--button-line-height-lg, var(--line-height-text-md));
+    }
+
+    &[data-size="xl"] {
+      min-height: var(--button-size-xl, 3.5rem);
+      padding-block: var(--button-padding-y-xl, .75rem);
+      padding-inline: var(--button-padding-x-xl, 1.5rem);
+      font-size: var(--button-font-size-xl, var(--text-lg));
+      line-height: var(--button-line-height-xl, var(--line-height-text-lg));
+    }
+
+    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
+      gap: 0;
+      padding: 0;
+    }
+
+    &[data-size="icon-sm"] {
+      width: var(--button-size-icon-sm, var(--size-sm));
+      min-width: var(--button-size-icon-sm, var(--size-sm));
+      height: var(--button-size-icon-sm, var(--size-sm));
+    }
+
+    &[data-size="icon-md"] {
+      width: var(--button-size-icon-md, var(--size-lg));
+      min-width: var(--button-size-icon-md, var(--size-lg));
+      height: var(--button-size-icon-md, var(--size-lg));
+    }
+
+    &[data-size="icon-lg"] {
+      width: var(--button-size-icon-lg, var(--size-xl));
+      min-width: var(--button-size-icon-lg, var(--size-xl));
+      height: var(--button-size-icon-lg, var(--size-xl));
+    }
+  }
+}

package/dist/components/button/Button.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/button/Button.d.ts
+declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
+  'data-slot'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
+    'data-slot'?: string;
+  } & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Button };