@moduix/react 1.1.1 → 2.1.0

package/dist/lib/moduix/presets/dense.css

@@ -0,0 +1,78 @@
+[data-moduix-theme="dense"] {
+  color-scheme: light;
+  --background: oklch(98.5% .004 255);
+  --foreground: oklch(18.5% .014 255);
+  --card: oklch(99.8% .002 255);
+  --card-foreground: oklch(18.5% .014 255);
+  --popover: oklch(99.8% .002 255);
+  --popover-foreground: oklch(18.5% .014 255);
+  --primary: oklch(48% .16 255);
+  --primary-foreground: oklch(99% .002 255);
+  --secondary: oklch(95.8% .009 255);
+  --secondary-foreground: oklch(24% .02 255);
+  --muted: oklch(95.2% .008 255);
+  --muted-foreground: oklch(47% .02 255);
+  --accent: oklch(92.5% .02 255);
+  --accent-foreground: oklch(22% .025 255);
+  --border: oklch(88% .015 255);
+  --input: oklch(84% .018 255);
+  --ring: oklch(56% .14 255);
+  --overlay: oklch(16% .02 255 / .24);
+  --overlay-foreground: oklch(16% .02 255 / .08);
+  --sidebar: oklch(97.2% .007 255);
+  --sidebar-foreground: oklch(18.5% .014 255);
+  --sidebar-primary: oklch(48% .16 255);
+  --sidebar-primary-foreground: oklch(99% .002 255);
+  --sidebar-accent: oklch(92.5% .02 255);
+  --sidebar-accent-foreground: oklch(22% .025 255);
+  --sidebar-border: oklch(88% .015 255);
+  --sidebar-ring: oklch(56% .14 255);
+  --radius: .45rem;
+  --spacing-1: 3px;
+  --spacing-2: 6px;
+  --spacing-3: 10px;
+  --spacing-4: 14px;
+  --spacing-5: 18px;
+  --spacing-6: 22px;
+  --spacing-8: 28px;
+  --spacing-10: 36px;
+  --size-xs: 22px;
+  --size-sm: 30px;
+  --size-md: 34px;
+  --size-lg: 38px;
+  --size-xl: 44px;
+  --shadow-sm: 0 1px 2px #0f172a14;
+  --shadow-md: 0 3px 8px #0f172a1a;
+  --shadow-lg: 0 12px 24px #0f172a1f;
+
+  & .dark, &.dark {
+    color-scheme: dark;
+    --background: oklch(16% .014 255);
+    --foreground: oklch(97% .003 255);
+    --card: oklch(20.5% .016 255);
+    --card-foreground: oklch(97% .003 255);
+    --popover: oklch(20.5% .016 255);
+    --popover-foreground: oklch(97% .003 255);
+    --primary: oklch(76% .13 255);
+    --primary-foreground: oklch(17% .018 255);
+    --secondary: oklch(25.5% .018 255);
+    --secondary-foreground: oklch(97% .003 255);
+    --muted: oklch(25% .016 255);
+    --muted-foreground: oklch(71% .018 255);
+    --accent: oklch(31% .03 255);
+    --accent-foreground: oklch(97% .003 255);
+    --border: oklch(72% .02 255 / .25);
+    --input: oklch(76% .02 255 / .32);
+    --ring: oklch(70% .12 255);
+    --overlay: oklch(10% .02 255 / .78);
+    --overlay-foreground: oklch(97% .003 255 / .09);
+    --sidebar: oklch(19% .016 255);
+    --sidebar-foreground: oklch(97% .003 255);
+    --sidebar-primary: oklch(76% .13 255);
+    --sidebar-primary-foreground: oklch(17% .018 255);
+    --sidebar-accent: oklch(31% .03 255);
+    --sidebar-accent-foreground: oklch(97% .003 255);
+    --sidebar-border: oklch(72% .02 255 / .25);
+    --sidebar-ring: oklch(70% .12 255);
+  }
+}

package/dist/lib/moduix/presets/soft.css

@@ -0,0 +1,77 @@
+[data-moduix-theme="soft"] {
+  color-scheme: light;
+  --background: oklch(98.5% .012 320);
+  --foreground: oklch(22.5% .024 315);
+  --card: oklch(99.8% .004 320);
+  --card-foreground: oklch(22.5% .024 315);
+  --popover: oklch(99.8% .004 320);
+  --popover-foreground: oklch(22.5% .024 315);
+  --primary: oklch(54% .18 305);
+  --primary-foreground: oklch(99% .004 320);
+  --secondary: oklch(95.8% .018 320);
+  --secondary-foreground: oklch(30% .04 310);
+  --muted: oklch(95% .016 320);
+  --muted-foreground: oklch(50% .035 315);
+  --accent: oklch(92% .04 315);
+  --accent-foreground: oklch(29% .05 305);
+  --border: oklch(88% .025 320);
+  --input: oklch(84% .03 320);
+  --ring: oklch(61% .15 305);
+  --overlay: oklch(22% .035 310 / .22);
+  --overlay-foreground: oklch(22% .035 310 / .08);
+  --sidebar: oklch(97.5% .014 320);
+  --sidebar-foreground: oklch(22.5% .024 315);
+  --sidebar-primary: oklch(54% .18 305);
+  --sidebar-primary-foreground: oklch(99% .004 320);
+  --sidebar-accent: oklch(92% .04 315);
+  --sidebar-accent-foreground: oklch(29% .05 305);
+  --sidebar-border: oklch(88% .025 320);
+  --sidebar-ring: oklch(61% .15 305);
+  --radius: 1rem;
+  --spacing-2: 9px;
+  --spacing-3: 14px;
+  --spacing-4: 18px;
+  --spacing-5: 22px;
+  --spacing-6: 28px;
+  --spacing-8: 36px;
+  --spacing-10: 44px;
+  --size-xs: 26px;
+  --size-sm: 34px;
+  --size-md: 40px;
+  --size-lg: 44px;
+  --size-xl: 52px;
+  --shadow-sm: 0 2px 6px #61236b14;
+  --shadow-md: 0 8px 18px #61236b1f;
+  --shadow-lg: 0 18px 38px #61236b29;
+
+  & .dark, &.dark {
+    color-scheme: dark;
+    --background: oklch(17% .018 315);
+    --foreground: oklch(97.2% .006 320);
+    --card: oklch(22% .022 315);
+    --card-foreground: oklch(97.2% .006 320);
+    --popover: oklch(22% .022 315);
+    --popover-foreground: oklch(97.2% .006 320);
+    --primary: oklch(78% .13 305);
+    --primary-foreground: oklch(23% .026 315);
+    --secondary: oklch(28.5% .03 315);
+    --secondary-foreground: oklch(97.2% .006 320);
+    --muted: oklch(27.5% .026 315);
+    --muted-foreground: oklch(74% .03 320);
+    --accent: oklch(34% .06 310);
+    --accent-foreground: oklch(97.2% .006 320);
+    --border: oklch(76% .035 320 / .24);
+    --input: oklch(76% .035 320 / .3);
+    --ring: oklch(74% .11 305);
+    --overlay: oklch(10% .02 315 / .8);
+    --overlay-foreground: oklch(97.2% .006 320 / .1);
+    --sidebar: oklch(20% .022 315);
+    --sidebar-foreground: oklch(97.2% .006 320);
+    --sidebar-primary: oklch(78% .13 305);
+    --sidebar-primary-foreground: oklch(23% .026 315);
+    --sidebar-accent: oklch(34% .06 310);
+    --sidebar-accent-foreground: oklch(97.2% .006 320);
+    --sidebar-border: oklch(76% .035 320 / .24);
+    --sidebar-ring: oklch(74% .11 305);
+  }
+}

package/dist/lib/moduix/styles/reset.css

@@ -1,3 +1,36 @@
+/*!
+ * 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 {
     box-sizing: border-box;

package/dist/lib/moduix/styles/style.css

@@ -67,6 +67,10 @@
     --border-width-sm: 1px;
     --border-width-md: 2px;
     --border-width-lg: 4px;
+    --focus-ring-width: var(--border-width-md);
+    --focus-ring-inset-width: var(--border-width-sm);
+    --focus-ring-offset: var(--spacing-0-5);
+    --focus-ring-inset-offset: calc(var(--border-width-sm) * -1);
   }
 
   :root {
@@ -86,6 +90,7 @@
     --accent: oklch(95% .01 285);
     --accent-foreground: oklch(23.5% .016 285);
     --destructive: oklch(56.5% .235 22);
+    --destructive-foreground: var(--primary-foreground);
     --success: oklch(62.7% .194 149.214);
     --warning: oklch(79.5% .184 86.047);
     --border: oklch(90.5% .008 285);
@@ -124,6 +129,7 @@
       --accent: oklch(29% .015 285);
       --accent-foreground: oklch(96.8% .003 285);
       --destructive: oklch(69% .185 18);
+      --destructive-foreground: var(--primary-foreground);
       --success: oklch(62.7% .194 149.214);
       --warning: oklch(79.5% .184 86.047);
       --border: oklch(100% .004 285 / .13);
@@ -161,6 +167,7 @@
     --color-accent: var(--accent);
     --color-accent-foreground: var(--accent-foreground);
     --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
     --color-success: var(--success);
     --color-warning: var(--warning);
     --color-border: var(--border);
@@ -205,11 +212,17 @@
     --size-xl: 48px;
     --spacing-0: 0px;
     --spacing-1: 4px;
+    --spacing-0-5: calc((var(--spacing-0) + var(--spacing-1)) / 2);
     --spacing-2: 8px;
+    --spacing-1-5: calc((var(--spacing-1) + var(--spacing-2)) / 2);
     --spacing-3: 12px;
+    --spacing-2-5: calc((var(--spacing-2) + var(--spacing-3)) / 2);
     --spacing-4: 16px;
+    --spacing-3-5: calc((var(--spacing-3) + var(--spacing-4)) / 2);
     --spacing-5: 20px;
+    --spacing-4-5: calc((var(--spacing-4) + var(--spacing-5)) / 2);
     --spacing-6: 24px;
+    --spacing-7: calc((var(--spacing-6) + var(--spacing-8)) / 2);
     --spacing-8: 32px;
     --spacing-10: 40px;
     --spacing-xs: var(--spacing-1);
@@ -256,18 +269,18 @@
     --weight-medium: 500;
     --weight-semibold: 600;
     --weight-bold: 700;
-    --text-xs: 11px;
+    --text-xs: 12px;
     --text-sm: 14px;
     --text-md: 16px;
     --text-lg: 18px;
     --text-xl: 20px;
     --text-2xl: 24px;
     --text-3xl: 30px;
-    --line-height-text-xs: 14px;
-    --line-height-text-sm: 22px;
+    --line-height-text-xs: 16px;
+    --line-height-text-sm: 20px;
     --line-height-text-md: 24px;
     --line-height-text-lg: 28px;
-    --line-height-text-xl: 32px;
+    --line-height-text-xl: 28px;
     --line-height-text-2xl: 32px;
     --line-height-text-3xl: 36px;
     --tracking-text-sm: -.01em;

package/dist/presets/contrast.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/presets/contrast.js

@@ -0,0 +1 @@
+import "../lib/moduix/presets/contrast.css";

package/dist/presets/dense.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/presets/dense.js

@@ -0,0 +1 @@
+import "../lib/moduix/presets/dense.css";

package/dist/presets/soft.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/presets/soft.js

@@ -0,0 +1 @@
+import "../lib/moduix/presets/soft.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduix/react",
-  "version": "1.1.1",
+  "version": "2.1.0",
   "description": "React implementation of the moduix component system, built on Ark UI primitives.",
   "keywords": [
     "accessible",
@@ -38,6 +38,9 @@
     },
     "./style.css": "./dist/lib/moduix/styles/style.css",
     "./reset.css": "./dist/lib/moduix/styles/reset.css",
+    "./presets/contrast.css": "./dist/lib/moduix/presets/contrast.css",
+    "./presets/dense.css": "./dist/lib/moduix/presets/dense.css",
+    "./presets/soft.css": "./dist/lib/moduix/presets/soft.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -50,19 +53,20 @@
     "tsc:check": "tsc -b"
   },
   "dependencies": {
+    "@unpic/react": "^1.0.2",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@ark-ui/react": "^5.37.2",
     "@internationalized/date": "^3.12.2",
-    "@storybook/react-vite": "^10.4.6",
+    "@storybook/react-vite": "10.5.0",
     "@tsdown/css": "^0.22.3",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "^10.4.6",
+    "storybook": "10.5.0",
     "tsdown": "^0.22.3",
     "typescript": "~6.0.3",
     "vite": "^8.1.0",