@moduix/react 2.1.0 → 2.2.0

package/README.md

@@ -1,4 +1,4 @@
-![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/public/banner.png)
+![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/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)
@@ -100,28 +100,28 @@ aliases for deliberate exceptions:
 
 ```css
 :root {
-  --primary: oklch(0.52 0.18 145);
-  --radius: 0.75rem;
-  --size-md: 36px;
-  --size-sm: 32px;
+  --moduix-primary: oklch(0.52 0.18 145);
+  --moduix-radius: 0.75rem;
+  --moduix-size-md: 36px;
+  --moduix-size-sm: 32px;
 }
 
 .compact-toolbar {
-  --button-size-md: 32px;
+  --moduix-button-size-md: 32px;
 }
 ```
 
 The token hierarchy is:
 
-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`.
+1. theme primitives such as `--moduix-primary`, `--moduix-spacing-2`, `--moduix-size-md`, and `--moduix-radius`;
+2. semantic aliases such as `--moduix-color-primary`, `--moduix-spacing-md`, and `--moduix-radius-md`;
+3. shared family defaults such as `--moduix-popup-item-min-height` and `--moduix-focus-ring-width`;
+4. component aliases such as `--moduix-input-height` and `--moduix-select-item-min-height`.
 
 Library styles use predictable cascade layers:
 
 ```css
-@layer ui.reset, ui.tokens, ui.base, ui.components;
+@layer moduix.reset, moduix.tokens, moduix.base, moduix.components;
 ```
 
 Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
@@ -147,11 +147,10 @@ theme.
 ## Prefer to Own the Source?
 
 The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
-component contracts:
+component contracts. Create the ready-to-use `components.json` from the
+[complete Quick Start](https://moduix.dev/docs/quick-start), then add the components you need:
 
 ```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
 ```
 

package/dist/components/accordion/Accordion.css

@@ -1,65 +1,65 @@
-@layer ui.components {
+@layer moduix.components {
   @keyframes tIMeYW_accordion-item-content-open {
     from {
       height: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
     }
 
     to {
       height: var(--height);
-      opacity: var(--accordion-item-content-open-opacity, 1);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
     }
   }
 
   @keyframes tIMeYW_accordion-item-content-closed {
     from {
       height: var(--height);
-      opacity: var(--accordion-item-content-open-opacity, 1);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
     }
 
     to {
       height: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
     }
   }
 
   @keyframes tIMeYW_accordion-item-content-open-horizontal {
     from {
       width: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
     }
 
     to {
       width: var(--width);
-      opacity: var(--accordion-item-content-open-opacity, 1);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
     }
   }
 
   @keyframes tIMeYW_accordion-item-content-closed-horizontal {
     from {
       width: var(--width);
-      opacity: var(--accordion-item-content-open-opacity, 1);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
     }
 
     to {
       width: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
     }
   }
 
   .tIMeYW_root {
     box-sizing: border-box;
-    width: var(--accordion-width, 100%);
-    max-width: var(--accordion-max-width, 100%);
+    width: var(--moduix-accordion-width, 100%);
+    max-width: var(--moduix-accordion-max-width, 100%);
     min-width: 0;
-    color: var(--accordion-color, var(--color-foreground));
+    color: var(--moduix-accordion-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-orientation="horizontal"] {
-      width: var(--accordion-horizontal-width, auto);
-      height: var(--accordion-horizontal-height, 20rem);
-      max-height: var(--accordion-horizontal-max-height, 100%);
+      width: var(--moduix-accordion-horizontal-width, auto);
+      height: var(--moduix-accordion-horizontal-height, 20rem);
+      max-height: var(--moduix-accordion-horizontal-max-height, 100%);
       flex-direction: row;
     }
   }
@@ -68,16 +68,16 @@
     overflow-anchor: none;
 
     &[data-orientation="vertical"]:not(:last-child) {
-      border-bottom: var(--accordion-item-border-width, var(--border-width-sm)) solid
-        var(--accordion-item-border-color, var(--color-border));
+      border-bottom: var(--moduix-accordion-item-border-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-accordion-item-border-color, var(--moduix-color-border));
     }
 
     &[data-orientation="horizontal"] {
       display: flex;
 
       &:not(:last-child) {
-        border-inline-end: var(--accordion-item-border-width, var(--border-width-sm)) solid
-          var(--accordion-item-border-color, var(--color-border));
+        border-inline-end: var(--moduix-accordion-item-border-width, var(--moduix-border-width-sm))
+          solid var(--moduix-accordion-item-border-color, var(--moduix-color-border));
       }
     }
   }
@@ -86,20 +86,20 @@
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
-    gap: var(--accordion-trigger-gap, var(--spacing-4));
+    gap: var(--moduix-accordion-trigger-gap, var(--moduix-spacing-4));
     width: 100%;
-    padding-block: var(--accordion-trigger-padding-y, var(--spacing-2));
-    padding-inline: var(--accordion-trigger-padding-x, var(--spacing-3));
-    background-color: var(--accordion-trigger-bg, var(--color-muted));
+    padding-block: var(--moduix-accordion-trigger-padding-y, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-accordion-trigger-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-accordion-trigger-bg, var(--moduix-color-muted));
     color: inherit;
     font: inherit;
-    font-size: var(--accordion-trigger-font-size, var(--text-md));
-    line-height: var(--accordion-trigger-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-accordion-trigger-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-accordion-trigger-line-height, var(--moduix-line-height-text-md));
     text-align: left;
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--transition-default),
-      color var(--transition-default);
+    transition: background-color var(--moduix-transition-default),
+      color var(--moduix-transition-default);
     border: 0;
     outline: 0;
     margin: 0;
@@ -107,25 +107,25 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--accordion-trigger-bg-hover, var(--color-accent));
+        background-color: var(--moduix-accordion-trigger-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible {
       z-index: 1;
-      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);
+      outline: var(--moduix-accordion-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-accordion-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-accordion-focus-ring-offset, var(--moduix-border-width-sm)) * -1);
       position: relative;
     }
 
     &:is([disabled], [data-disabled]) {
       cursor: default;
-      opacity: var(--accordion-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-accordion-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &[data-orientation="horizontal"] {
-      width: var(--accordion-horizontal-trigger-width, 2.5rem);
+      width: var(--moduix-accordion-horizontal-trigger-width, 2.5rem);
       writing-mode: sideways-lr;
       justify-content: center;
       height: 100%;
@@ -134,9 +134,9 @@
 
   .tIMeYW_itemIndicator {
     box-sizing: border-box;
-    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));
+    width: var(--moduix-accordion-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-accordion-icon-size, var(--moduix-spacing-3));
+    transition: transform var(--moduix-accordion-icon-transition, var(--moduix-transition-default));
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
@@ -148,15 +148,15 @@
     }
 
     &[data-state="open"] {
-      transform: var(--accordion-icon-open-transform, rotate(45deg) scale(1.1));
+      transform: var(--moduix-accordion-icon-open-transform, rotate(45deg) scale(1.1));
     }
   }
 
   .tIMeYW_itemContent {
     box-sizing: border-box;
-    color: var(--accordion-item-content-color, var(--color-muted-foreground));
-    font-size: var(--accordion-item-content-font-size, var(--text-md));
-    line-height: var(--accordion-item-content-line-height, var(--line-height-text-md));
+    color: var(--moduix-accordion-item-content-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-accordion-item-content-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-accordion-item-content-line-height, var(--moduix-line-height-text-md));
     overflow: hidden;
 
     &[hidden]:not([hidden="until-found"]) {
@@ -165,33 +165,33 @@
 
     &[data-state="open"][data-orientation="vertical"] {
       animation: tIMeYW_accordion-item-content-open
-        var(--accordion-item-content-transition, var(--transition-default));
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
     }
 
     &[data-state="closed"][data-orientation="vertical"] {
       animation: tIMeYW_accordion-item-content-closed
-        var(--accordion-item-content-transition, var(--transition-default));
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
     }
 
     &[data-state="open"][data-orientation="horizontal"] {
       animation: tIMeYW_accordion-item-content-open-horizontal
-        var(--accordion-item-content-transition, var(--transition-default));
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
     }
 
     &[data-state="closed"][data-orientation="horizontal"] {
       animation: tIMeYW_accordion-item-content-closed-horizontal
-        var(--accordion-item-content-transition, var(--transition-default));
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
     }
 
     &[data-orientation="horizontal"] > * {
-      width: var(--accordion-horizontal-content-width, 16rem);
+      width: var(--moduix-accordion-horizontal-content-width, 16rem);
     }
   }
 
   .tIMeYW_itemBody {
-    gap: var(--accordion-item-body-gap, var(--spacing-3));
+    gap: var(--moduix-accordion-item-body-gap, var(--moduix-spacing-3));
     min-width: 0;
-    padding: var(--accordion-item-body-padding, var(--spacing-3));
+    padding: var(--moduix-accordion-item-body-padding, var(--moduix-spacing-3));
     display: grid;
   }
 }

package/dist/components/alert/Alert.css

@@ -1,18 +1,18 @@
-@layer ui.components {
+@layer moduix.components {
   .ZXk2dW_root {
     box-sizing: border-box;
     align-items: start;
-    row-gap: var(--alert-content-gap, var(--spacing-1));
-    column-gap: var(--alert-gap, var(--spacing-3));
-    border: var(--alert-border-width, var(--border-width-sm)) solid
-      var(--alert-border-color, var(--alert-border-color-default, var(--color-border)));
-    border-radius: var(--alert-radius, var(--radius-lg));
+    row-gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
+    column-gap: var(--moduix-alert-gap, var(--moduix-spacing-3));
+    border: var(--moduix-alert-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-alert-border-color, var(--moduix-alert-border-color-default, var(--moduix-color-border)));
+    border-radius: var(--moduix-alert-radius, var(--moduix-radius-lg));
     width: 100%;
     min-width: 0;
-    padding: var(--alert-padding, var(--spacing-3));
-    background-color: var(--alert-bg, var(--alert-bg-default, var(--color-card)));
-    color: var(--alert-color, var(--alert-color-default, var(--color-card-foreground)));
-    box-shadow: var(--alert-shadow, none);
+    padding: var(--moduix-alert-padding, var(--moduix-spacing-3));
+    background-color: var(--moduix-alert-bg, var(--moduix-alert-bg-default, var(--moduix-color-card)));
+    color: var(--moduix-alert-color, var(--moduix-alert-color-default, var(--moduix-color-card-foreground)));
+    box-shadow: var(--moduix-alert-shadow, none);
     grid-template-columns: auto minmax(0, 1fr);
     display: grid;
 
@@ -21,38 +21,54 @@
     }
 
     &[data-status="neutral"] {
-      --alert-bg-default: var(--color-card);
-      --alert-border-color-default: var(--color-border);
-      --alert-color-default: var(--color-card-foreground);
-      --alert-indicator-color-default: var(--color-muted-foreground);
+      --moduix-alert-bg-default: var(--moduix-color-card);
+      --moduix-alert-border-color-default: var(--moduix-color-border);
+      --moduix-alert-color-default: var(--moduix-color-card-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-muted-foreground);
     }
 
     &[data-status="info"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-primary) 4%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-primary) 32%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-primary);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-primary) 4%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-primary) 32%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-primary);
     }
 
     &[data-status="success"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-success) 10%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-success) 34%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-success);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-success) 10%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-success) 34%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-success);
     }
 
     &[data-status="warning"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-warning) 13%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-warning) 38%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-warning);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-warning) 13%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-warning) 38%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-warning);
     }
 
     &[data-status="error"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-destructive) 9%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-destructive) 35%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-destructive);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-destructive) 9%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-destructive) 35%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-destructive);
     }
 
     &:not(:has( > [data-part="indicator"])) {
@@ -65,43 +81,43 @@
   }
 
   .ZXk2dW_indicator {
-    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));
+    width: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
+    color: var(--moduix-alert-indicator-color, var(--moduix-alert-indicator-color-default, currentColor));
     justify-content: center;
     align-items: center;
-    margin-block-start: var(--alert-indicator-offset, var(--spacing-0-5));
+    margin-block-start: var(--moduix-alert-indicator-offset, var(--moduix-spacing-0-5));
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--alert-indicator-size, var(--spacing-4));
-      height: var(--alert-indicator-size, var(--spacing-4));
+      width: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
+      height: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
       pointer-events: none;
       flex-shrink: 0;
     }
   }
 
   .ZXk2dW_content {
-    gap: var(--alert-content-gap, var(--spacing-1));
+    gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
     min-width: 0;
     display: grid;
   }
 
   .ZXk2dW_title {
     min-width: 0;
-    color: var(--alert-title-color, var(--alert-color, var(--alert-color-default)));
-    font-size: var(--alert-title-font-size, var(--text-sm));
-    font-weight: var(--alert-title-font-weight, var(--weight-semibold));
-    line-height: var(--alert-title-line-height, var(--line-height-text-sm));
+    color: var(--moduix-alert-title-color, var(--moduix-alert-color, var(--moduix-alert-color-default)));
+    font-size: var(--moduix-alert-title-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-alert-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-alert-title-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
     margin: 0;
   }
 
   .ZXk2dW_description {
     min-width: 0;
-    color: var(--alert-description-color, var(--color-muted-foreground));
-    font-size: var(--alert-description-font-size, var(--text-sm));
-    line-height: var(--alert-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-alert-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-alert-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-alert-description-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
 
     & > :first-child {
@@ -114,9 +130,9 @@
   }
 
   .ZXk2dW_actions {
-    gap: var(--alert-actions-gap, var(--spacing-2));
+    gap: var(--moduix-alert-actions-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
-    margin-block-start: var(--alert-actions-margin-top, var(--spacing-2));
+    margin-block-start: var(--moduix-alert-actions-margin-top, var(--moduix-spacing-2));
     display: flex;
   }
 }