@moduix/react 2.1.0 → 2.2.0

package/dist/components/button/Button.css

@@ -1,34 +1,35 @@
-@layer ui.components {
+@layer moduix.components {
   .NbN_ya_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));
+    gap: var(--moduix-button-content-gap, var(--moduix-spacing-2));
+    border: var(--moduix-button-border-width, var(--moduix-border-width-sm)) solid transparent;
+    border-radius: var(--moduix-button-radius, var(--moduix-radius-md));
+    color: var(--moduix-button-color, var(--moduix-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));
+    font-size: var(--moduix-button-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-button-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-button-line-height, var(--moduix-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));
+    transition: background-color var(--moduix-button-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-button-transition, var(--moduix-transition-default)),
+      color var(--moduix-button-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-button-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-button-transition, var(--moduix-transition-default));
     background-color: #0000;
     margin: 0;
     text-decoration: none;
     display: inline-flex;
 
     &:focus-visible {
-      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);
+      outline: var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-button-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-button-focus-ring-offset, var(--moduix-button-border-width, var(--moduix-border-width-sm))) *
+          -1);
     }
 
     &:active:not([data-disabled]) {
@@ -36,7 +37,7 @@
     }
 
     &[data-disabled] {
-      opacity: var(--button-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
       pointer-events: none;
     }
@@ -46,8 +47,8 @@
     }
 
     & :where(svg) {
-      width: var(--button-icon-size, var(--spacing-4));
-      height: var(--button-icon-size, var(--spacing-4));
+      width: var(--moduix-button-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-button-icon-size, var(--moduix-spacing-4));
       flex-shrink: 0;
     }
 
@@ -59,127 +60,129 @@
     }
 
     &[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));
+      border-color: var(--moduix-button-default-border-color, var(--moduix-color-primary));
+      background-color: var(--moduix-button-default-bg, var(--moduix-color-primary));
+      color: var(--moduix-button-default-color, var(--moduix-color-primary-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
-          background-color: var(--button-default-bg-hover, color-mix(in srgb, var(--button-default-bg, var(--color-primary)) 88%, black));
+          background-color: var(--moduix-button-default-bg-hover, color-mix(in srgb,
+              var(--moduix-button-default-bg, var(--moduix-color-primary)) 88%,
+              black));
         }
       }
     }
 
     &[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));
+      border-color: var(--moduix-button-outline-border-color, var(--moduix-color-border));
+      background-color: var(--moduix-button-outline-bg, var(--moduix-color-background));
+      color: var(--moduix-button-outline-color, var(--moduix-color-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
-          background-color: var(--button-outline-bg-hover, var(--color-accent));
+          background-color: var(--moduix-button-outline-bg-hover, var(--moduix-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));
+      border-color: var(--moduix-button-secondary-border-color, var(--moduix-color-secondary));
+      background-color: var(--moduix-button-secondary-bg, var(--moduix-color-secondary));
+      color: var(--moduix-button-secondary-color, var(--moduix-color-secondary-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
-          background-color: var(--button-secondary-bg-hover, var(--color-accent));
+          background-color: var(--moduix-button-secondary-bg-hover, var(--moduix-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-destructive-foreground));
+      border-color: var(--moduix-button-destructive-border-color, var(--moduix-color-destructive));
+      background-color: var(--moduix-button-destructive-bg, var(--moduix-color-destructive));
+      color: var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
-          filter: brightness(var(--button-destructive-hover-brightness, .96));
+          filter: brightness(var(--moduix-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));
+      border-color: var(--moduix-button-destructive-outline-border-color, var(--moduix-color-destructive));
+      background-color: var(--moduix-button-destructive-outline-bg, var(--moduix-color-background));
+      color: var(--moduix-button-destructive-outline-color, var(--moduix-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-destructive-foreground)));
+          background-color: var(--moduix-button-destructive-outline-bg-hover, var(--moduix-color-destructive));
+          color: var(--moduix-button-destructive-outline-color-hover, var(--moduix-button-destructive-color, var(--moduix-color-destructive-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));
+      border-color: var(--moduix-button-ghost-border-color, transparent);
+      background-color: var(--moduix-button-ghost-bg, transparent);
+      color: var(--moduix-button-ghost-color, var(--moduix-color-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
-          background-color: var(--button-ghost-bg-hover, var(--color-accent));
+          background-color: var(--moduix-button-ghost-bg-hover, var(--moduix-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);
+      color: var(--moduix-button-link-color, var(--moduix-color-primary));
+      text-decoration: var(--moduix-button-link-text-decoration, underline);
+      text-underline-offset: var(--moduix-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));
+          color: var(--moduix-button-link-color-hover, var(--moduix-color-foreground));
         }
       }
     }
 
     &[data-size="xs"] {
-      min-height: var(--button-size-xs, var(--size-xs));
-      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));
+      min-height: var(--moduix-button-size-xs, var(--moduix-size-xs));
+      padding-block: var(--moduix-button-padding-y-xs, var(--moduix-spacing-0-5));
+      padding-inline: var(--moduix-button-padding-x-xs, var(--moduix-spacing-2-5));
+      font-size: var(--moduix-button-font-size-xs, var(--moduix-text-xs));
+      line-height: var(--moduix-button-line-height-xs, var(--moduix-line-height-text-xs));
     }
 
     &[data-size="sm"] {
-      min-height: var(--button-size-sm, var(--size-sm));
-      padding-block: var(--button-padding-y-sm, var(--spacing-1));
-      padding-inline: var(--button-padding-x-sm, var(--spacing-3));
+      min-height: var(--moduix-button-size-sm, var(--moduix-size-sm));
+      padding-block: var(--moduix-button-padding-y-sm, var(--moduix-spacing-1));
+      padding-inline: var(--moduix-button-padding-x-sm, var(--moduix-spacing-3));
     }
 
     &[data-size="md"] {
-      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));
+      min-height: var(--moduix-button-size-md, var(--moduix-size-md));
+      padding-block: var(--moduix-button-padding-y-md, var(--moduix-spacing-1));
+      padding-inline: var(--moduix-button-padding-x-md, var(--moduix-spacing-4));
     }
 
     &[data-size="lg"] {
-      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));
+      min-height: var(--moduix-button-size-lg, var(--moduix-size-lg));
+      padding-block: var(--moduix-button-padding-y-lg, var(--moduix-spacing-1-5));
+      padding-inline: var(--moduix-button-padding-x-lg, var(--moduix-spacing-5));
+      font-size: var(--moduix-button-font-size-lg, var(--moduix-text-md));
+      line-height: var(--moduix-button-line-height-lg, var(--moduix-line-height-text-md));
     }
 
     &[data-size="xl"] {
-      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));
+      min-height: var(--moduix-button-size-xl, var(--moduix-size-xl));
+      padding-block: var(--moduix-button-padding-y-xl, var(--moduix-spacing-2));
+      padding-inline: var(--moduix-button-padding-x-xl, var(--moduix-spacing-6));
+      font-size: var(--moduix-button-font-size-xl, var(--moduix-text-lg));
+      line-height: var(--moduix-button-line-height-xl, var(--moduix-line-height-text-lg));
     }
 
     &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
@@ -188,21 +191,21 @@
     }
 
     &[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));
+      width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+      min-width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+      height: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
     }
 
     &[data-size="icon-md"] {
-      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));
+      width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+      min-width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+      height: var(--moduix-button-size-icon-md, var(--moduix-size-md));
     }
 
     &[data-size="icon-lg"] {
-      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));
+      width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+      min-width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+      height: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
     }
 
     &[data-variant="link"] {

package/dist/components/card/Card.css

@@ -1,18 +1,18 @@
-@layer ui.components {
+@layer moduix.components {
   ._2rXk6G_root {
-    --card-padding-default: var(--card-spacing, var(--card-padding, var(--spacing-6)));
-    --card-section-spacing-default: var(--card-spacing, var(--card-body-padding-top, var(--spacing-4)));
-    --card-title-font-size-default: var(--card-title-font-size, var(--text-lg));
-    --card-title-line-height-default: var(--card-title-line-height, var(--line-height-text-lg));
+    --moduix-card-padding-default: var(--moduix-card-spacing, var(--moduix-card-padding, var(--moduix-spacing-6)));
+    --moduix-card-section-spacing-default: var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4)));
+    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size, var(--moduix-text-lg));
+    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height, var(--moduix-line-height-text-lg));
     box-sizing: border-box;
-    border: var(--card-border-width, var(--card-border-width-default, var(--border-width-sm))) solid
-      var(--card-border-color, var(--color-border));
-    border-radius: var(--card-radius, var(--radius-lg));
-    background-color: var(--card-bg, var(--card-bg-default, var(--color-card)));
+    border: var(--moduix-card-border-width, var(--moduix-card-border-width-default, var(--moduix-border-width-sm)))
+      solid var(--moduix-card-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-card-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-card-bg, var(--moduix-card-bg-default, var(--moduix-color-card)));
     width: 100%;
     min-width: 0;
-    color: var(--card-color, var(--color-card-foreground));
-    box-shadow: var(--card-shadow, var(--card-shadow-default, none));
+    color: var(--moduix-card-color, var(--moduix-color-card-foreground));
+    box-shadow: var(--moduix-card-shadow, var(--moduix-card-shadow-default, none));
     flex-direction: column;
     display: flex;
     position: relative;
@@ -22,27 +22,27 @@
     }
 
     &[data-size="sm"] {
-      --card-padding-default: var(--card-spacing-sm, var(--card-spacing, var(--card-padding-sm, var(--spacing-4))));
-      --card-section-spacing-default: var(--card-spacing-sm, var(--card-spacing, var(--card-body-padding-top, var(--spacing-4))));
-      --card-title-font-size-default: var(--card-title-font-size-sm, var(--text-md));
-      --card-title-line-height-default: var(--card-title-line-height-sm, var(--line-height-text-md));
+      --moduix-card-padding-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-padding-sm, var(--moduix-spacing-4))));
+      --moduix-card-section-spacing-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4))));
+      --moduix-card-title-font-size-default: var(--moduix-card-title-font-size-sm, var(--moduix-text-md));
+      --moduix-card-title-line-height-default: var(--moduix-card-title-line-height-sm, var(--moduix-line-height-text-md));
     }
 
     &[data-size="lg"] {
-      --card-padding-default: var(--card-spacing-lg, var(--card-spacing, var(--card-padding-lg, var(--spacing-8))));
-      --card-section-spacing-default: var(--card-spacing-lg, var(--card-spacing, var(--card-body-padding-top, var(--spacing-4))));
-      --card-title-font-size-default: var(--card-title-font-size-lg, var(--text-xl));
-      --card-title-line-height-default: var(--card-title-line-height-lg, var(--line-height-text-xl));
+      --moduix-card-padding-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-padding-lg, var(--moduix-spacing-8))));
+      --moduix-card-section-spacing-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4))));
+      --moduix-card-title-font-size-default: var(--moduix-card-title-font-size-lg, var(--moduix-text-xl));
+      --moduix-card-title-line-height-default: var(--moduix-card-title-line-height-lg, var(--moduix-line-height-text-xl));
     }
 
     &[data-variant="elevated"] {
-      --card-border-width-default: 0;
-      --card-shadow-default: var(--shadow-md);
+      --moduix-card-border-width-default: 0;
+      --moduix-card-shadow-default: var(--moduix-shadow-md);
     }
 
     &[data-variant="subtle"] {
-      --card-border-width-default: 0;
-      --card-bg-default: var(--color-muted);
+      --moduix-card-border-width-default: 0;
+      --moduix-card-bg-default: var(--moduix-color-muted);
     }
 
     &:has([data-scope="card"][data-part="link"]) :where(a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not([data-scope="card"][data-part="link"]) {
@@ -54,13 +54,13 @@
   ._2rXk6G_header, ._2rXk6G_body, ._2rXk6G_footer {
     box-sizing: border-box;
     min-width: 0;
-    padding-inline: var(--card-padding-default);
+    padding-inline: var(--moduix-card-padding-default);
   }
 
   ._2rXk6G_header {
-    column-gap: var(--card-action-gap, var(--spacing-2));
-    row-gap: var(--card-header-gap, var(--spacing-1));
-    padding-block: var(--card-padding-default) 0;
+    column-gap: var(--moduix-card-action-gap, var(--moduix-spacing-2));
+    row-gap: var(--moduix-card-header-gap, var(--moduix-spacing-1));
+    padding-block: var(--moduix-card-padding-default) 0;
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
   }
@@ -79,14 +79,14 @@
   }
 
   ._2rXk6G_body {
-    padding-block: var(--card-section-spacing-default) var(--card-padding-default);
-    color: var(--card-body-color, var(--color-muted-foreground));
-    font-size: var(--card-body-font-size, var(--text-sm));
-    line-height: var(--card-body-line-height, var(--line-height-text-sm));
+    padding-block: var(--moduix-card-section-spacing-default) var(--moduix-card-padding-default);
+    color: var(--moduix-card-body-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-card-body-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-card-body-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
 
     &:first-child {
-      padding-block-start: var(--card-padding-default);
+      padding-block-start: var(--moduix-card-padding-default);
     }
 
     & > :first-child {
@@ -100,18 +100,18 @@
 
   ._2rXk6G_footer {
     align-items: center;
-    gap: var(--card-footer-gap, var(--spacing-2));
-    padding-block: 0 var(--card-padding-default);
+    gap: var(--moduix-card-footer-gap, var(--moduix-spacing-2));
+    padding-block: 0 var(--moduix-card-padding-default);
     flex-wrap: wrap;
     display: flex;
   }
 
   ._2rXk6G_title {
     min-width: 0;
-    color: var(--card-title-color, currentColor);
-    font-size: var(--card-title-font-size-default);
-    font-weight: var(--card-title-font-weight, var(--weight-semibold));
-    line-height: var(--card-title-line-height-default);
+    color: var(--moduix-card-title-color, currentColor);
+    font-size: var(--moduix-card-title-font-size-default);
+    font-weight: var(--moduix-card-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-card-title-line-height-default);
     overflow-wrap: anywhere;
     grid-column: 1;
     margin: 0;
@@ -119,9 +119,9 @@
 
   ._2rXk6G_description {
     min-width: 0;
-    color: var(--card-description-color, var(--color-muted-foreground));
-    font-size: var(--card-description-font-size, var(--text-sm));
-    line-height: var(--card-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-card-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-card-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-card-description-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
     grid-column: 1;
     margin: 0;
@@ -131,7 +131,7 @@
     z-index: 1;
     justify-content: flex-end;
     align-items: start;
-    gap: var(--card-action-gap, var(--spacing-2));
+    gap: var(--moduix-card-action-gap, var(--moduix-spacing-2));
     grid-area: 1 / 2 / span 2;
     justify-self: end;
     display: inline-flex;
@@ -146,7 +146,7 @@
     &:after {
       content: "";
       z-index: 0;
-      border-radius: var(--card-radius, var(--radius-lg));
+      border-radius: var(--moduix-card-radius, var(--moduix-radius-lg));
       position: absolute;
       inset: 0;
     }
@@ -156,9 +156,9 @@
     }
 
     &:focus-visible:after {
-      outline: var(--card-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
-        var(--card-focus-ring-color, var(--color-ring));
-      outline-offset: var(--card-focus-ring-offset, var(--border-width-sm));
+      outline: var(--moduix-card-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-card-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-card-focus-ring-offset, var(--moduix-border-width-sm));
     }
   }
 }