@moduix/react 2.1.0 → 2.2.4

package/dist/styles/colors.css

@@ -0,0 +1,206 @@
+:root {
+  --moduix-background: #f9f9fb;
+  --moduix-foreground: #101015;
+  --moduix-card: #fdfdff;
+  --moduix-card-foreground: #101015;
+  --moduix-popover: #fdfdff;
+  --moduix-popover-foreground: #101015;
+  --moduix-primary: #1d1d25;
+  --moduix-primary-foreground: #f9f9fb;
+  --moduix-secondary: #f1f1f6;
+  --moduix-secondary-foreground: #1d1d25;
+  --moduix-muted: #eff0f4;
+  --moduix-muted-foreground: #5e5e67;
+  --moduix-accent: #edeef5;
+  --moduix-accent-foreground: #1d1d25;
+  --moduix-destructive: #dc0031;
+  --moduix-destructive-foreground: var(--moduix-primary-foreground);
+  --moduix-success: #00a544;
+  --moduix-warning: #edb200;
+  --moduix-border: #dfdfe5;
+  --moduix-input: #dfdfe5;
+  --moduix-ring: #83849b;
+  --moduix-overlay: #10101633;
+  --moduix-overlay-foreground: #10101612;
+  --moduix-chart-1: #9973ef;
+  --moduix-chart-2: #00b99a;
+  --moduix-chart-3: #ef852e;
+  --moduix-chart-4: #d13d91;
+  --moduix-chart-5: #7da84c;
+  --moduix-sidebar: #f6f6fa;
+  --moduix-sidebar-foreground: #101015;
+  --moduix-sidebar-primary: #1d1d25;
+  --moduix-sidebar-primary-foreground: #f9f9fb;
+  --moduix-sidebar-accent: #edeef5;
+  --moduix-sidebar-accent-foreground: #1d1d25;
+  --moduix-sidebar-border: #dfdfe5;
+  --moduix-sidebar-ring: #83849b;
+}
+
+@supports (color: lab(0% 0 0)) {
+  :root {
+    --moduix-background: lab(97.8868% .276119 -1.09879);
+    --moduix-foreground: lab(4.77477% .753664 -2.8157);
+    --moduix-card: lab(99.4032% .183612 -.732851);
+    --moduix-card-foreground: lab(4.77477% .753664 -2.8157);
+    --moduix-popover: lab(99.4032% .183612 -.732851);
+    --moduix-popover-foreground: lab(4.77477% .753664 -2.8157);
+    --moduix-primary: lab(11.108% 1.72348 -5.72367);
+    --moduix-primary-foreground: lab(97.8868% .276119 -1.09879);
+    --moduix-secondary: lab(95.3092% .556827 -2.19457);
+    --moduix-secondary-foreground: lab(11.108% 1.72348 -5.72367);
+    --moduix-muted: lab(94.7292% .556916 -2.19454);
+    --moduix-muted-foreground: lab(40.1269% 1.4805 -5.43306);
+    --moduix-accent: lab(94.1146% .938207 -3.65106);
+    --moduix-accent-foreground: lab(11.108% 1.72348 -5.72367);
+    --moduix-destructive: lab(47.0493% 75.2533 42.9314);
+    --moduix-success: lab(59.0978% -58.6621 41.2579);
+    --moduix-warning: lab(76.3898% 14.5258 98.4589);
+    --moduix-border: lab(88.9119% .747383 -2.9229);
+    --moduix-input: lab(88.9119% .747383 -2.9229);
+    --moduix-ring: lab(55.5944% 3.67066 -12.566);
+    --moduix-overlay: lab(4.7445% 1.11303 -4.05285 / .2);
+    --moduix-overlay-foreground: lab(4.7445% 1.11303 -4.05285 / .07);
+    --moduix-chart-1: lab(56.7542% 35.894 -58.3247);
+    --moduix-chart-2: lab(67.0098% -49.4925 4.26728);
+    --moduix-chart-3: lab(66.6902% 37.2311 61.7785);
+    --moduix-chart-4: lab(50.895% 63.3361 -12.3314);
+    --moduix-chart-5: lab(64.2236% -26.5235 41.6585);
+    --moduix-sidebar: lab(97.0578% .462711 -1.82967);
+    --moduix-sidebar-foreground: lab(4.77477% .753664 -2.8157);
+    --moduix-sidebar-primary: lab(11.108% 1.72348 -5.72367);
+    --moduix-sidebar-primary-foreground: lab(97.8868% .276119 -1.09879);
+    --moduix-sidebar-accent: lab(94.1146% .938207 -3.65106);
+    --moduix-sidebar-accent-foreground: lab(11.108% 1.72348 -5.72367);
+    --moduix-sidebar-border: lab(88.9119% .747383 -2.9229);
+    --moduix-sidebar-ring: lab(55.5944% 3.67066 -12.566);
+  }
+}
+
+:root[data-moduix-color-scheme="light"], :root [data-moduix-color-scheme="light"] {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+}
+
+:root[data-moduix-color-scheme="dark"], :root [data-moduix-color-scheme="dark"] {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+  --moduix-background: #0c0c10;
+  --moduix-foreground: #f4f4f6;
+  --moduix-card: #15151b;
+  --moduix-card-foreground: #f4f4f6;
+  --moduix-popover: #15151b;
+  --moduix-popover-foreground: #f4f4f6;
+  --moduix-primary: #e3e3e8;
+  --moduix-primary-foreground: #15151b;
+  --moduix-secondary: #222229;
+  --moduix-secondary-foreground: #f4f4f6;
+  --moduix-muted: #222229;
+  --moduix-muted-foreground: #9f9faa;
+  --moduix-accent: #2a2a33;
+  --moduix-accent-foreground: #f4f4f6;
+  --moduix-destructive: #f8616f;
+  --moduix-destructive-foreground: var(--moduix-primary-foreground);
+  --moduix-success: #00a544;
+  --moduix-warning: #edb200;
+  --moduix-border: #ffffff21;
+  --moduix-input: #ffffff2b;
+  --moduix-ring: #797992;
+  --moduix-overlay: #040307bd;
+  --moduix-overlay-foreground: #f4f4f617;
+  --moduix-chart-1: #ad8dff;
+  --moduix-chart-2: #37ccac;
+  --moduix-chart-3: #ff9b51;
+  --moduix-chart-4: #e65aa5;
+  --moduix-chart-5: #92ba66;
+  --moduix-sidebar: #15151b;
+  --moduix-sidebar-foreground: #f4f4f6;
+  --moduix-sidebar-primary: #ad8dff;
+  --moduix-sidebar-primary-foreground: #0c0c10;
+  --moduix-sidebar-accent: #2a2a33;
+  --moduix-sidebar-accent-foreground: #f4f4f6;
+  --moduix-sidebar-border: #ffffff21;
+  --moduix-sidebar-ring: #797992;
+}
+
+@supports (color: lab(0% 0 0)) {
+  :root[data-moduix-color-scheme="dark"], :root [data-moduix-color-scheme="dark"] {
+    --moduix-background: lab(3.32254% .466786 -1.75522);
+    --moduix-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-card: lab(7.13143% 1.07729 -3.89344);
+    --moduix-card-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-popover: lab(7.13143% 1.07729 -3.89344);
+    --moduix-popover-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-primary: lab(90.4286% .651926 -2.55885);
+    --moduix-primary-foreground: lab(7.13143% 1.07729 -3.89344);
+    --moduix-secondary: lab(13.4703% 1.23115 -4.32171);
+    --moduix-secondary-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-muted: lab(13.4703% 1.23115 -4.32171);
+    --moduix-muted-foreground: lab(65.6402% 1.54763 -5.81334);
+    --moduix-accent: lab(17.5017% 1.55589 -5.39374);
+    --moduix-accent-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-destructive: lab(62.0549% 59.5703 24.4648);
+    --moduix-success: lab(59.0978% -58.6621 41.2579);
+    --moduix-warning: lab(76.3898% 14.5258 98.4589);
+    --moduix-border: lab(99.9663% .369132 -1.46444 / .13);
+    --moduix-input: lab(99.9663% .369132 -1.46444 / .17);
+    --moduix-ring: lab(51.501% 4.0642 -13.6067);
+    --moduix-overlay: lab(1.0141% .370815 -1.30305 / .74);
+    --moduix-overlay-foreground: lab(96.2627% .276208 -1.09876 / .09);
+    --moduix-chart-1: lab(65.1519% 32.5305 -55.3073);
+    --moduix-chart-2: lab(73.8414% -45.6023 3.95186);
+    --moduix-chart-3: lab(73.7456% 34.2033 54.931);
+    --moduix-chart-4: lab(59.1573% 60.5605 -11.745);
+    --moduix-chart-5: lab(71.1105% -24.7757 37.5748);
+    --moduix-sidebar: lab(7.13143% 1.07729 -3.89344);
+    --moduix-sidebar-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-sidebar-primary: lab(65.1519% 32.5305 -55.3073);
+    --moduix-sidebar-primary-foreground: lab(3.32254% .466786 -1.75522);
+    --moduix-sidebar-accent: lab(17.5017% 1.55589 -5.39374);
+    --moduix-sidebar-accent-foreground: lab(96.2627% .276208 -1.09876);
+    --moduix-sidebar-border: lab(99.9663% .369132 -1.46444 / .13);
+    --moduix-sidebar-ring: lab(51.501% 4.0642 -13.6067);
+  }
+}
+
+:root {
+  --moduix-color-background: var(--moduix-background);
+  --moduix-color-foreground: var(--moduix-foreground);
+  --moduix-color-card: var(--moduix-card);
+  --moduix-color-card-foreground: var(--moduix-card-foreground);
+  --moduix-color-popover: var(--moduix-popover);
+  --moduix-color-popover-foreground: var(--moduix-popover-foreground);
+  --moduix-color-primary: var(--moduix-primary);
+  --moduix-color-primary-foreground: var(--moduix-primary-foreground);
+  --moduix-color-secondary: var(--moduix-secondary);
+  --moduix-color-secondary-foreground: var(--moduix-secondary-foreground);
+  --moduix-color-muted: var(--moduix-muted);
+  --moduix-color-muted-foreground: var(--moduix-muted-foreground);
+  --moduix-color-accent: var(--moduix-accent);
+  --moduix-color-accent-foreground: var(--moduix-accent-foreground);
+  --moduix-color-destructive: var(--moduix-destructive);
+  --moduix-color-destructive-foreground: var(--moduix-destructive-foreground);
+  --moduix-color-success: var(--moduix-success);
+  --moduix-color-warning: var(--moduix-warning);
+  --moduix-color-border: var(--moduix-border);
+  --moduix-color-input: var(--moduix-input);
+  --moduix-color-ring: var(--moduix-ring);
+  --moduix-color-overlay: var(--moduix-overlay);
+  --moduix-color-overlay-foreground: var(--moduix-overlay-foreground);
+  --moduix-color-chart-1: var(--moduix-chart-1);
+  --moduix-color-chart-2: var(--moduix-chart-2);
+  --moduix-color-chart-3: var(--moduix-chart-3);
+  --moduix-color-chart-4: var(--moduix-chart-4);
+  --moduix-color-chart-5: var(--moduix-chart-5);
+  --moduix-color-sidebar: var(--moduix-sidebar);
+  --moduix-color-sidebar-foreground: var(--moduix-sidebar-foreground);
+  --moduix-color-sidebar-primary: var(--moduix-sidebar-primary);
+  --moduix-color-sidebar-primary-foreground: var(--moduix-sidebar-primary-foreground);
+  --moduix-color-sidebar-accent: var(--moduix-sidebar-accent);
+  --moduix-color-sidebar-accent-foreground: var(--moduix-sidebar-accent-foreground);
+  --moduix-color-sidebar-border: var(--moduix-sidebar-border);
+  --moduix-color-sidebar-ring: var(--moduix-sidebar-ring);
+}
+

package/dist/styles/opacity.css

@@ -0,0 +1,6 @@
+:root {
+  --moduix-opacity-disabled: .5;
+  --moduix-opacity-loading: .85;
+  --moduix-opacity-hover: .9;
+}
+

package/dist/styles/radius.css

@@ -0,0 +1,11 @@
+:root {
+  --moduix-radius: .625rem;
+  --moduix-radius-none: 0;
+  --moduix-radius-xs: calc(var(--moduix-radius) * .4);
+  --moduix-radius-sm: calc(var(--moduix-radius) * .6);
+  --moduix-radius-md: calc(var(--moduix-radius) * .8);
+  --moduix-radius-lg: var(--moduix-radius);
+  --moduix-radius-xl: calc(var(--moduix-radius) * 1.2);
+  --moduix-radius-full: 9999px;
+}
+

package/dist/{lib/moduix/styles → styles}/reset.css

@@ -1,38 +1,19 @@
-/*!
- * moduix reset.css
- *
- * Portions of this file are derived from:
- * - @unocss/reset tailwind-v4.css
- *   Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
- *   https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-v4.css
- * - Tailwind CSS Preflight
- *   Copyright (c) Tailwind Labs, Inc.
- *   https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
- *
- * Modifications Copyright (c) 2026 Blinks44
- *
- * MIT License
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-@layer ui.reset {
-  *, :after, :before, ::backdrop, ::file-selector-button {
+@layer moduix.reset {
+  *, :after, :before {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
     box-sizing: border-box;
     border: 0 solid;
     margin: 0;
@@ -56,6 +37,7 @@
   }
 
   abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
   }
 
@@ -67,6 +49,7 @@
   a {
     color: inherit;
     -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
 
@@ -132,7 +115,18 @@
     height: auto;
   }
 
-  button, input, select, optgroup, textarea, ::file-selector-button {
+  button, input, select, optgroup, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  ::file-selector-button {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -182,7 +176,19 @@
     padding: 0;
   }
 
-  ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field {
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
     padding-block: 0;
   }
 
@@ -194,11 +200,19 @@
     box-shadow: none;
   }
 
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
     appearance: button;
   }
 
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
     height: auto;
   }
 
@@ -206,3 +220,4 @@
     display: none !important;
   }
 }
+

package/dist/styles/shadows.css

@@ -0,0 +1,6 @@
+:root {
+  --moduix-shadow-sm: 0 2px 4px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --moduix-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --moduix-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+}
+

package/dist/styles/sizing.css

@@ -0,0 +1,8 @@
+:root {
+  --moduix-size-xs: 24px;
+  --moduix-size-sm: 32px;
+  --moduix-size-md: 36px;
+  --moduix-size-lg: 40px;
+  --moduix-size-xl: 48px;
+}
+

package/dist/styles/spacing.css

@@ -0,0 +1,24 @@
+:root {
+  --moduix-spacing-0: 0px;
+  --moduix-spacing-1: 4px;
+  --moduix-spacing-0-5: calc((var(--moduix-spacing-0) + var(--moduix-spacing-1)) / 2);
+  --moduix-spacing-2: 8px;
+  --moduix-spacing-1-5: calc((var(--moduix-spacing-1) + var(--moduix-spacing-2)) / 2);
+  --moduix-spacing-3: 12px;
+  --moduix-spacing-2-5: calc((var(--moduix-spacing-2) + var(--moduix-spacing-3)) / 2);
+  --moduix-spacing-4: 16px;
+  --moduix-spacing-3-5: calc((var(--moduix-spacing-3) + var(--moduix-spacing-4)) / 2);
+  --moduix-spacing-5: 20px;
+  --moduix-spacing-4-5: calc((var(--moduix-spacing-4) + var(--moduix-spacing-5)) / 2);
+  --moduix-spacing-6: 24px;
+  --moduix-spacing-7: calc((var(--moduix-spacing-6) + var(--moduix-spacing-8)) / 2);
+  --moduix-spacing-8: 32px;
+  --moduix-spacing-10: 40px;
+  --moduix-spacing-xs: var(--moduix-spacing-1);
+  --moduix-spacing-sm: var(--moduix-spacing-2);
+  --moduix-spacing-md: var(--moduix-spacing-3);
+  --moduix-spacing-lg: var(--moduix-spacing-4);
+  --moduix-spacing-xl: var(--moduix-spacing-5);
+  --moduix-spacing-2xl: var(--moduix-spacing-6);
+}
+

package/dist/styles/style.css

@@ -0,0 +1,14 @@
+@layer moduix.reset, moduix.tokens, moduix.base, moduix.components;
+@import "./animations.css" layer(moduix.tokens);
+@import "./borders.css" layer(moduix.tokens);
+@import "./colors.css" layer(moduix.tokens);
+@import "./opacity.css" layer(moduix.tokens);
+@import "./radius.css" layer(moduix.tokens);
+@import "./shadows.css" layer(moduix.tokens);
+@import "./sizing.css" layer(moduix.tokens);
+@import "./spacing.css" layer(moduix.tokens);
+@import "./transforms.css" layer(moduix.tokens);
+@import "./transitions.css" layer(moduix.tokens);
+@import "./typography.css" layer(moduix.tokens);
+@import "./z-index.css" layer(moduix.tokens);
+

package/dist/styles/transforms.css

@@ -0,0 +1,5 @@
+:root {
+  --moduix-scale-popup: .9;
+  --moduix-scale-dropdown: .95;
+}
+

package/dist/styles/transitions.css

@@ -0,0 +1,28 @@
+:root {
+  --moduix-duration-fast: .15s;
+  --moduix-duration-normal: .2s;
+  --moduix-duration-slow: .35s;
+  --moduix-duration-slower: .45s;
+  --moduix-ease-in: cubic-bezier(.4, 0, 1, 1);
+  --moduix-ease-out: cubic-bezier(0, 0, .2, 1);
+  --moduix-ease-in-out: cubic-bezier(.4, 0, .2, 1);
+  --moduix-ease-standard: ease;
+  --moduix-ease-spring: cubic-bezier(.32, .72, 0, 1);
+  --moduix-ease-emphasized: cubic-bezier(.22, 1, .36, 1);
+  --moduix-transition-default: var(--moduix-duration-normal) var(--moduix-ease-in-out);
+  --moduix-transition-fast: var(--moduix-duration-fast) var(--moduix-ease-in-out);
+  --moduix-transition-slow: var(--moduix-duration-slow) var(--moduix-ease-in-out);
+  --moduix-transition-slower: var(--moduix-duration-slower) var(--moduix-ease-in-out);
+  --moduix-transition-spring: var(--moduix-duration-slower) var(--moduix-ease-spring);
+  --moduix-transition-emphasized: var(--moduix-duration-slower) var(--moduix-ease-emphasized);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --moduix-duration-fast: .01ms;
+    --moduix-duration-normal: .01ms;
+    --moduix-duration-slow: .01ms;
+    --moduix-duration-slower: .01ms;
+  }
+}
+

package/dist/styles/typography.css

@@ -0,0 +1,27 @@
+:root {
+  --moduix-font-sans: "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --moduix-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  --moduix-weight-regular: 400;
+  --moduix-weight-medium: 500;
+  --moduix-weight-semibold: 600;
+  --moduix-weight-bold: 700;
+  --moduix-text-xs: 12px;
+  --moduix-text-sm: 14px;
+  --moduix-text-md: 16px;
+  --moduix-text-lg: 18px;
+  --moduix-text-xl: 20px;
+  --moduix-text-2xl: 24px;
+  --moduix-text-3xl: 30px;
+  --moduix-line-height-text-xs: 16px;
+  --moduix-line-height-text-sm: 20px;
+  --moduix-line-height-text-md: 24px;
+  --moduix-line-height-text-lg: 28px;
+  --moduix-line-height-text-xl: 28px;
+  --moduix-line-height-text-2xl: 32px;
+  --moduix-line-height-text-3xl: 36px;
+  --moduix-tracking-text-sm: -.01em;
+  --moduix-tracking-text-xs: -.016em;
+}
+

package/dist/styles/z-index.css

@@ -0,0 +1,13 @@
+:root {
+  --moduix-z-default: 1;
+  --moduix-z-xs: 5;
+  --moduix-z-sm: 10;
+  --moduix-z-md: 20;
+  --moduix-z-lg: 30;
+  --moduix-z-xl: 40;
+  --moduix-z-backdrop: 40;
+  --moduix-z-modal: 50;
+  --moduix-z-popup: 60;
+  --moduix-z-toast: 70;
+}
+