@moduix/react 2.0.0 → 2.1.0

package/README.md

@@ -1,124 +1,45 @@
 ![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/public/banner.png)
 
 [![npm](https://img.shields.io/npm/v/@moduix/react?logo=npm&label=npm)](https://www.npmjs.com/package/@moduix/react)
+[![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE.md)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![Turborepo](https://img.shields.io/badge/Monorepo-Turborepo-EF4444)](https://turbo.build/)
 
-# moduix
+# @moduix/react
 
-React implementation of the moduix component system for product interfaces, built on top of
-[Ark UI](https://ark-ui.com/) primitives.
+Polished React components for product interfaces, built on
+[Ark UI](https://ark-ui.com/) and styled with native CSS.
 
-moduix gives you ready-made components with accessible behavior, native CSS styles, and a
-composition-first API. It supports two production workflows: install the package for managed
-updates, or copy registry component source when your application needs direct ownership.
+The package combines Ark's accessible interaction model with shadcn-inspired clarity: calm defaults,
+explicit named parts, consistent states, and a token-first theme contract. No styling framework is
+required.
 
-## Why It Exists
+[Documentation](https://moduix.dev/) ·
+[Quick start](https://moduix.dev/docs/quick-start) ·
+[Components](https://moduix.dev/docs/components) ·
+[Tokens](https://moduix.dev/docs/tokens)
 
-moduix is built for real product screens: predictable behavior, readable composition, small
-runtime surface, and CSS that can be owned by the application. The library is public and actively
-developed around Ark UI primitives, shadcn-compatible source delivery, and practical defaults for
-teams that need consistent interfaces.
+## Highlights
 
-## Principles
+- Ark-aligned composition, controlled and uncontrolled state, context, callbacks, and form behavior.
+- Consistent `36px` primary controls and `32px` popup rows through shared size tokens.
+- Native CSS, CSS Modules, cascade layers, semantic tokens, and component-level variables.
+- Stable moduix `data-slot` hooks alongside Ark part and state attributes.
+- Optional reset and curated `dense`, `soft`, and `contrast` presets.
+- React 18 and 19 support.
+- A matching hosted shadcn registry when source ownership is the better workflow.
 
-- **Ark UI underneath.** Components target Ark UI composition and accessibility primitives instead of
-  reimplementing low-level interaction behavior.
-- **Small dependency surface.** Ark UI is the only external UI primitive layer. The package
-  keeps the runtime stack intentionally small and does not bring a styling framework with it.
-- **Two installation paths.** Use moduix as an npm package, or copy component source into your
-  project when direct ownership is more important than package-managed updates.
-- **Composable API.** Components are exposed as named parts, so complex UI can be assembled
-  without hiding important structure.
-- **Native CSS.** Styles are distributed as CSS, use CSS custom properties, and are designed to
-  work with your existing styling approach.
-- **shadcn-compatible source delivery.** shadcn/ui remains a major inspiration for readable
-  component composition. moduix keeps that ownership model available through its registry.
+## Install
 
-## Installation
-
-moduix supports two installation paths:
-
-- Install the library as a regular npm package when you want package-managed updates.
-- Install component source into your own project with `shadcn` when you want direct ownership.
-
-| Choose this path            | When it fits best                                                                                                             |
-| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| npm package                 | You want the fastest setup, package-managed updates, imports from `@moduix/react`, and styles from `@moduix/react/style.css`. |
-| `shadcn` copy-owned install | You want generated source files inside your app, direct local customization, and imports from `@/components/moduix/*`.        |
-
-### npm package
+Install the package and its Ark UI peer dependency:
 
 ```bash
 npm install @moduix/react @ark-ui/react
 ```
 
-`react`, `react-dom`, and `@ark-ui/react` are peer dependencies. They stay in your application
-bundle, so moduix does not ship duplicate React or Ark UI runtimes.
-
-### shadcn copy-owned install
-
-`shadcn` can install selected moduix components from the hosted registry directly into your
-project. The files become part of your codebase instead of staying in `node_modules`.
-
-Make sure your project resolves the `@/*` alias to `src/*` in both `tsconfig.json` and
-`tsconfig.app.json`, and mirror it in your bundler config.
-
-Create `components.json` in the project root when your app does not already have one:
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {
-    "@moduix-react": "https://moduix.dev/r/react/{name}.json"
-  }
-}
-```
-
-```bash
-npx shadcn@latest add @moduix-react/button
-npx shadcn@latest add @moduix-react/accordion
-```
-
-The registry install also pulls in the shared moduix foundation files those components need, such as
-styles, icons, and small utilities.
-
-Import the generated foundation stylesheet once in your application entry point:
-
-```tsx
-import '@/lib/moduix/styles/style.css';
-```
-
-If you want the optional reset in the copy-owned path, import it explicitly before the main
-stylesheet:
-
-```tsx
-import '@/lib/moduix/styles/reset.css';
-import '@/lib/moduix/styles/style.css';
-```
-
-With the aliases above, generated files land in `src/components/moduix/*` and `src/lib/moduix/*`.
+`react`, `react-dom`, and `@ark-ui/react` are peer dependencies, so the package does not ship
+duplicate framework or primitive runtimes.
 
-## Usage
+## Add Styles
 
 Import the required foundation stylesheet once in your application entry point:
 
@@ -126,17 +47,19 @@ Import the required foundation stylesheet once in your application entry point:
 import '@moduix/react/style.css';
 ```
 
-This stylesheet is required. It provides the shared design tokens and base styles that component
-CSS depends on.
+This entrypoint provides shared design tokens and base styles. Component imports bring along their
+own CSS.
 
-If you want the optional reset, import it explicitly before the main stylesheet:
+The reset is optional and intentionally separate:
 
 ```tsx
 import '@moduix/react/reset.css';
 import '@moduix/react/style.css';
 ```
 
-Then import and compose the components you need:
+## Use Components
+
+Import public components from the package barrel and compose their named parts:
 
 ```tsx
 import { Button, Dialog } from '@moduix/react';
@@ -145,12 +68,20 @@ export function Example() {
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <Button>Open dialog</Button>
+        <Button>Open settings</Button>
       </Dialog.Trigger>
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content>
-          <Dialog.Title>Project settings</Dialog.Title>
+          <Dialog.Header>
+            <Dialog.Title>Project settings</Dialog.Title>
+            <Dialog.Description>Update how this workspace behaves.</Dialog.Description>
+          </Dialog.Header>
+          <Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <Button variant="outline">Done</Button>
+            </Dialog.CloseTrigger>
+          </Dialog.Footer>
         </Dialog.Content>
       </Dialog.Positioner>
     </Dialog.Root>
@@ -158,95 +89,92 @@ export function Example() {
 }
 ```
 
-`style.css` ships the shared design tokens and base styles. Component imports still bring along only
-the component CSS they use.
+moduix keeps important Ark anatomy visible. Higher-level convenience parts are documented as the
+recommended path where they exist, while low-level composition remains available for advanced
+cases.
 
-## Styling
+## Theme the System
 
-Components accept `className` where customization is expected and expose stable `data-slot`
-attributes for targeted styling. Theme values are regular CSS custom properties:
+Theme values are CSS custom properties. Change broad semantic decisions first and use component
+aliases for deliberate exceptions:
 
 ```css
 :root {
-  --color-primary: oklch(0.205 0 0);
-  --button-radius: 0.5rem;
+  --primary: oklch(0.52 0.18 145);
+  --radius: 0.75rem;
+  --size-md: 36px;
+  --size-sm: 32px;
 }
-```
-
-Library CSS is organized with cascade layers:
 
-```css
-@layer ui.reset, ui.tokens, ui.base, ui.components;
+.compact-toolbar {
+  --button-size-md: 32px;
+}
 ```
 
-This keeps defaults predictable while still letting application styles override tokens,
-classes, or component-level variables.
+The token hierarchy is:
 
-## What Is Included
+1. theme primitives such as `--primary`, `--spacing-2`, `--size-md`, and `--radius`;
+2. semantic aliases such as `--color-primary`, `--spacing-md`, and `--radius-md`;
+3. shared family defaults such as `--popup-item-min-height` and `--focus-ring-width`;
+4. component aliases such as `--input-height` and `--select-item-min-height`.
 
-The package exports composed components for common product UI needs, including Accordion, Avatar,
-Button, Checkbox, Combobox, Dialog, Drawer, Field, FileUpload, Menu, NumberInput, Popover,
-QrCode, Select, Tabs, Toast, Tooltip, TreeView, and supporting layout and display primitives.
+Library styles use predictable cascade layers:
 
-## Documentation
+```css
+@layer ui.reset, ui.tokens, ui.base, ui.components;
+```
 
-- Documentation: https://moduix.dev/
-- npm package: https://www.npmjs.com/package/@moduix/react
-- React package README: `packages/react/README.md`
-- Docs app README: `apps/docs/README.md`
+Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
+state attributes supported by their primitives.
 
-## Repository Quick Start
+## Optional Presets
 
-From the monorepo root:
+Import one preset after `style.css` and activate it on the document root:
 
-```bash
-npm install
-npm run build:react
-npm run dev
+```tsx
+import '@moduix/react/style.css';
+import '@moduix/react/presets/soft.css';
 ```
 
-## Acknowledgements
-
-This project could not exist without the work of these teams and communities:
-
-- [Ark UI](https://ark-ui.com/) for the composition and accessibility primitives now shaping the library contract.
-- [shadcn/ui](https://ui.shadcn.com/) for the API inspiration and the culture of practical,
-  readable component composition.
-- [Tailwind CSS](https://tailwindcss.com/) for the reset.css implementation.
-- [Fumadocs](https://fumadocs.dev/) for the documentation foundation.
-- [TanStack](https://tanstack.com/) for the application tooling used by the docs.
-- [Voidzero](https://voidzero.dev/) for the JavaScript tooling used by the workspace.
+```html
+<html data-moduix-theme="soft"></html>
+```
 
-## Contributing
+Available presets are `dense`, `soft`, and `contrast`. See
+[Themes](https://moduix.dev/docs/themes) before combining presets or creating a reusable custom
+theme.
 
-Contributions are welcome, especially bug reports, accessibility fixes, documentation
-improvements, and focused component improvements.
+## Prefer to Own the Source?
 
-Before opening a pull request:
+The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
+component contracts:
 
-1. Install dependencies from the repository root:
+```bash
+npx shadcn@latest init
+npx shadcn@latest registry add '@moduix-react=https://moduix.dev/r/react/{name}.json'
+npx shadcn@latest add @moduix-react/button @moduix-react/dialog
+```
 
-   ```bash
-   npm install
-   ```
+Generated files are installed under `@/components/moduix/*` and `@/lib/moduix/*`. Read the
+[complete Quick Start](https://moduix.dev/docs/quick-start) for alias setup, registry inspection,
+dry runs, and generated stylesheet imports.
 
-2. Build the React package when your change affects `packages/react` or documentation examples:
+## Acknowledgements
 
-   ```bash
-   npm run build:react
-   ```
+- [Ark UI](https://ark-ui.com/) provides the primitive behavior and composition model.
+- [Chakra UI](https://chakra-ui.com/) informs Ark-aligned ergonomics and design-system craft.
+- [shadcn/ui](https://ui.shadcn.com/) inspires open-code delivery, beautiful defaults, and practical
+  documentation.
+- [UnoCSS](https://unocss.dev/) and [Tailwind CSS](https://tailwindcss.com/) provide foundations
+  adapted by the optional reset.
 
-3. Run the required checks:
+## Links
 
-   ```bash
-   npm run fmt:fix
-   npm run lint:check
-   npm run tsc:check
-   ```
+- [Documentation](https://moduix.dev/)
+- [npm package](https://www.npmjs.com/package/@moduix/react)
+- [Source repository](https://github.com/Blinks44/moduix)
+- [Issues](https://github.com/Blinks44/moduix/issues)
 
-Keep pull requests small and specific. For component changes, update the related stories, exports,
-local component notes, public docs, and registry output so the package and docs stay in sync.
+## License
 
-Agent-facing repository guidance lives in `AGENTS.md` and `.agents/skills`. Generated or
-agent-assisted changes should still preserve the library's direct Ark-first component contracts,
-small APIs, and readable implementation style.
+[MIT](./LICENSE.md)

package/dist/components/accordion/Accordion.css

@@ -113,8 +113,8 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: var(--accordion-focus-ring-width, var(--border-width-md)) solid
-        var(--accordion-focus-ring-color, var(--color-ring));
+      outline: var(--accordion-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--accordion-focus-ring-color, var(--color-ring));
       outline-offset: calc(var(--accordion-focus-ring-offset, var(--border-width-sm)) * -1);
       position: relative;
     }
@@ -134,8 +134,8 @@
 
   .tIMeYW_itemIndicator {
     box-sizing: border-box;
-    width: var(--accordion-icon-size, .75rem);
-    height: var(--accordion-icon-size, .75rem);
+    width: var(--accordion-icon-size, var(--spacing-3));
+    height: var(--accordion-icon-size, var(--spacing-3));
     transition: transform var(--accordion-icon-transition, var(--transition-default));
     flex-shrink: 0;
     justify-content: center;

package/dist/components/alert/Alert.css

@@ -65,17 +65,17 @@
   }
 
   .ZXk2dW_indicator {
-    width: var(--alert-indicator-size, 1rem);
-    height: var(--alert-indicator-size, 1rem);
+    width: var(--alert-indicator-size, var(--spacing-4));
+    height: var(--alert-indicator-size, var(--spacing-4));
     color: var(--alert-indicator-color, var(--alert-indicator-color-default, currentColor));
     justify-content: center;
     align-items: center;
-    margin-block-start: var(--alert-indicator-offset, .125rem);
+    margin-block-start: var(--alert-indicator-offset, var(--spacing-0-5));
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--alert-indicator-size, 1rem);
-      height: var(--alert-indicator-size, 1rem);
+      width: var(--alert-indicator-size, var(--spacing-4));
+      height: var(--alert-indicator-size, var(--spacing-4));
       pointer-events: none;
       flex-shrink: 0;
     }

package/dist/components/angle-slider/AngleSlider.css

@@ -2,7 +2,7 @@
   .vn7zXa_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--angle-slider-gap, .75rem);
+    gap: var(--angle-slider-gap, var(--spacing-3));
     min-width: 0;
     color: var(--angle-slider-color, var(--color-foreground));
     flex-direction: column;
@@ -54,8 +54,8 @@
 
     &:before {
       z-index: 1;
-      width: var(--angle-slider-center-dot-size, .375rem);
-      height: var(--angle-slider-center-dot-size, .375rem);
+      width: var(--angle-slider-center-dot-size, var(--spacing-1-5));
+      height: var(--angle-slider-center-dot-size, var(--spacing-1-5));
       border-radius: inherit;
       background: var(--angle-slider-center-dot-color, var(--angle-slider-color, var(--color-foreground)));
       content: "";
@@ -92,8 +92,8 @@
     &:before {
       top: var(--angle-slider-ring-thickness, .875rem);
       box-sizing: border-box;
-      width: var(--angle-slider-thumb-size, 1rem);
-      height: var(--angle-slider-thumb-size, 1rem);
+      width: var(--angle-slider-thumb-size, var(--spacing-4));
+      height: var(--angle-slider-thumb-size, var(--spacing-4));
       border: var(--angle-slider-thumb-border-width, var(--border-width-sm)) solid
         var(--angle-slider-thumb-border-color, var(--color-border));
       border-radius: var(--angle-slider-thumb-radius, var(--radius-full));
@@ -110,11 +110,11 @@
     }
 
     &:after {
-      top: calc(var(--angle-slider-ring-thickness, .875rem) + var(--angle-slider-thumb-size, 1rem) +
-          .25rem);
+      top: calc(var(--angle-slider-ring-thickness, .875rem) +
+          var(--angle-slider-thumb-size, var(--spacing-4)) + var(--spacing-1));
       width: var(--angle-slider-thumb-line-width, .1875rem);
-      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) - var(--angle-slider-thumb-size, 1rem) -
-          .375rem);
+      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) -
+          var(--angle-slider-thumb-size, var(--spacing-4)) - var(--spacing-1-5));
       border-radius: var(--radius-full);
       background: linear-gradient(to bottom,
         var(--angle-slider-indicator-bg, var(--color-primary)),

package/dist/components/badge/Badge.css

@@ -2,7 +2,7 @@
   .NXa69G_root {
     justify-content: center;
     align-items: center;
-    gap: var(--badge-gap, .375rem);
+    gap: var(--badge-gap, var(--spacing-1-5));
     border: var(--badge-border-width, var(--border-width-sm)) solid
       var(--badge-border-color, transparent);
     border-radius: var(--badge-radius, var(--radius-full));
@@ -10,7 +10,7 @@
     min-width: 0;
     max-width: 100%;
     padding-block: var(--badge-padding-y, 0);
-    padding-inline: var(--badge-padding-x, .625rem);
+    padding-inline: var(--badge-padding-x, var(--spacing-2-5));
     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));
@@ -33,8 +33,9 @@
       cursor: pointer;
 
       &:focus-visible {
-        outline: var(--border-width-md) solid var(--color-ring);
-        outline-offset: var(--spacing-1);
+        outline: var(--badge-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+          solid var(--badge-focus-ring-color, var(--color-ring));
+        outline-offset: var(--badge-focus-ring-offset, var(--focus-ring-offset));
       }
 
       &[data-variant="default"], &[data-variant="secondary"], &[data-variant="destructive"] {
@@ -58,8 +59,8 @@
     }
 
     & > svg {
-      width: var(--badge-icon-size, .75rem);
-      height: var(--badge-icon-size, .75rem);
+      width: var(--badge-icon-size, var(--spacing-3));
+      height: var(--badge-icon-size, var(--spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
@@ -71,7 +72,7 @@
 
     &[data-variant="destructive"] {
       background-color: var(--badge-bg, var(--color-destructive));
-      color: var(--badge-color, var(--color-primary-foreground));
+      color: var(--badge-color, var(--color-destructive-foreground));
     }
 
     &[data-variant="outline"], &[data-variant="ghost"], &[data-variant="link"] {
@@ -91,7 +92,7 @@
       color: var(--badge-color, var(--color-primary));
       text-decoration: underline;
       text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
-      text-underline-offset: .15em;
+      text-underline-offset: var(--badge-link-underline-offset, .15em);
       border-color: #0000;
       padding-inline: 0;
       text-decoration-thickness: from-font;
@@ -100,8 +101,8 @@
   }
 
   .NXa69G_dot {
-    width: var(--badge-dot-size, .375rem);
-    height: var(--badge-dot-size, .375rem);
+    width: var(--badge-dot-size, var(--spacing-1-5));
+    height: var(--badge-dot-size, var(--spacing-1-5));
     background-color: currentColor;
     border-radius: 50%;
     flex-shrink: 0;

package/dist/components/breadcrumbs/Breadcrumbs.css

@@ -32,7 +32,7 @@
   .WoRWWa_link[data-scope="breadcrumbs"][data-part="link"], .WoRWWa_page[data-scope="breadcrumbs"][data-part="page"] {
     min-width: 0;
     max-width: 100%;
-    padding-inline: var(--breadcrumbs-item-padding-x, .25rem);
+    padding-inline: var(--breadcrumbs-item-padding-x, var(--spacing-1));
     white-space: nowrap;
     display: block;
   }
@@ -58,7 +58,8 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--breadcrumbs-focus-ring-width, var(--border-width-sm))
+      box-shadow: 0 0 0
+        var(--breadcrumbs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         var(--breadcrumbs-focus-ring-color, var(--color-ring));
     }
   }
@@ -78,15 +79,15 @@
   }
 
   .WoRWWa_separatorIcon {
+    width: var(--breadcrumbs-separator-icon-size, 1em);
+    height: var(--breadcrumbs-separator-icon-size, 1em);
     flex: none;
-    width: 1em;
-    height: 1em;
   }
 
   .WoRWWa_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);
+    min-width: var(--breadcrumbs-ellipsis-size, var(--spacing-4));
+    min-height: var(--breadcrumbs-ellipsis-size, var(--spacing-4));
+    padding-inline: var(--breadcrumbs-item-padding-x, var(--spacing-1));
     color: var(--breadcrumbs-ellipsis-color, var(--color-muted-foreground));
     border-radius: var(--breadcrumbs-ellipsis-radius, var(--radius-sm));
     justify-content: center;

package/dist/components/button/Button.css

@@ -26,7 +26,7 @@
     display: inline-flex;
 
     &:focus-visible {
-      outline: var(--button-focus-ring-width, var(--border-width-md)) solid
+      outline: var(--button-focus-ring-width, var(--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);
     }
@@ -46,8 +46,8 @@
     }
 
     & :where(svg) {
-      width: var(--button-icon-size, 1rem);
-      height: var(--button-icon-size, 1rem);
+      width: var(--button-icon-size, var(--spacing-4));
+      height: var(--button-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
 
@@ -97,7 +97,7 @@
     &[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));
+      color: var(--button-destructive-color, var(--color-destructive-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
@@ -114,7 +114,7 @@
       @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)));
+          color: var(--button-destructive-outline-color-hover, var(--button-destructive-color, var(--color-destructive-foreground)));
         }
       }
     }
@@ -148,36 +148,36 @@
 
     &[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);
+      padding-block: var(--button-padding-y-xs, var(--spacing-0-5));
+      padding-inline: var(--button-padding-x-xs, var(--spacing-2-5));
       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);
+      padding-block: var(--button-padding-y-sm, var(--spacing-1));
+      padding-inline: var(--button-padding-x-sm, var(--spacing-3));
     }
 
     &[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);
+      min-height: var(--button-size-md, var(--size-md));
+      padding-block: var(--button-padding-y-md, var(--spacing-1));
+      padding-inline: var(--button-padding-x-md, var(--spacing-4));
     }
 
     &[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);
+      min-height: var(--button-size-lg, var(--size-lg));
+      padding-block: var(--button-padding-y-lg, var(--spacing-1-5));
+      padding-inline: var(--button-padding-x-lg, var(--spacing-5));
       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);
+      min-height: var(--button-size-xl, var(--size-xl));
+      padding-block: var(--button-padding-y-xl, var(--spacing-2));
+      padding-inline: var(--button-padding-x-xl, var(--spacing-6));
       font-size: var(--button-font-size-xl, var(--text-lg));
       line-height: var(--button-line-height-xl, var(--line-height-text-lg));
     }
@@ -194,15 +194,15 @@
     }
 
     &[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));
+      width: var(--button-size-icon-md, var(--size-md));
+      min-width: var(--button-size-icon-md, var(--size-md));
+      height: var(--button-size-icon-md, var(--size-md));
     }
 
     &[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));
+      width: var(--button-size-icon-lg, var(--size-lg));
+      min-width: var(--button-size-icon-lg, var(--size-lg));
+      height: var(--button-size-icon-lg, var(--size-lg));
     }
 
     &[data-variant="link"] {