@moduix/react 1.1.0

package/dist/lib/moduix/icons/ui/index.d.ts

@@ -0,0 +1,2 @@
+import { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, PopupArrowIcon, RatingStarIcon, RestartIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon } from "./Icons.js";
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, PopupArrowIcon, RatingStarIcon, RestartIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon };

package/dist/lib/moduix/normalizeClassName.js

@@ -0,0 +1,4 @@
+//#region src/lib/moduix/normalizeClassName.ts
+const normalizeClassName = (className) => typeof className === "string" ? className : void 0;
+//#endregion
+export { normalizeClassName };

package/dist/lib/moduix/overlayPortal.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, RefObject } from "react";
+
+//#region src/lib/moduix/overlayPortal.d.ts
+type OverlayPortalProps = {
+  portalled?: boolean;
+  portalRef?: RefObject<HTMLElement | null>;
+};
+//#endregion
+export type { OverlayPortalProps };

package/dist/lib/moduix/overlayPortal.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { createContext, useContext } from "react";
+//#region src/lib/moduix/overlayPortal.tsx
+const OverlayPortalContext = createContext({});
+function OverlayPortalProvider({ children, ...value }) {
+	return /* @__PURE__ */ jsx(OverlayPortalContext.Provider, {
+		value,
+		children
+	});
+}
+function OverlayPortal({ children }) {
+	const { portalled = true, portalRef } = useContext(OverlayPortalContext);
+	return /* @__PURE__ */ jsx(Portal, {
+		disabled: !portalled,
+		container: portalRef,
+		children
+	});
+}
+//#endregion
+export { OverlayPortal, OverlayPortalProvider };

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

@@ -0,0 +1,175 @@
+@layer ui.reset {
+  *, :after, :before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    line-height: 1.5;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol, ul, menu {
+    list-style: none;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  @supports (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,288 @@
+@layer ui.reset;
+
+@layer ui.tokens {
+  @keyframes moduix-pulse {
+    50% {
+      opacity: .3;
+    }
+  }
+
+  @keyframes moduix-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes moduix-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes moduix-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  @keyframes moduix-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  @keyframes moduix-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  :root {
+    --animation-pulse: moduix-pulse 2.5s ease-in-out infinite;
+    --animation-fade-in: moduix-fade-in var(--duration-normal) var(--ease-out);
+    --animation-fade-out: moduix-fade-out var(--duration-normal) var(--ease-in);
+    --animation-slide-up: moduix-slide-up var(--duration-normal) var(--ease-out);
+    --animation-slide-down: moduix-slide-down var(--duration-normal) var(--ease-out);
+    --animation-spin: moduix-spin .75s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --animation-pulse: none;
+      --animation-fade-in: none;
+      --animation-fade-out: none;
+      --animation-slide-up: none;
+      --animation-slide-down: none;
+      --animation-spin: none;
+    }
+  }
+
+  :root {
+    --border-width-sm: 1px;
+    --border-width-md: 2px;
+    --border-width-lg: 4px;
+  }
+
+  :root {
+    color-scheme: light;
+    --background: oklch(98.2% .003 285);
+    --foreground: oklch(17.5% .01 285);
+    --card: oklch(99.5% .002 285);
+    --card-foreground: oklch(17.5% .01 285);
+    --popover: oklch(99.5% .002 285);
+    --popover-foreground: oklch(17.5% .01 285);
+    --primary: oklch(23.5% .016 285);
+    --primary-foreground: oklch(98.2% .003 285);
+    --secondary: oklch(96% .006 285);
+    --secondary-foreground: oklch(23.5% .016 285);
+    --muted: oklch(95.5% .006 285);
+    --muted-foreground: oklch(48.5% .015 285);
+    --accent: oklch(95% .01 285);
+    --accent-foreground: oklch(23.5% .016 285);
+    --destructive: oklch(56.5% .235 22);
+    --success: oklch(62.7% .194 149.214);
+    --warning: oklch(79.5% .184 86.047);
+    --border: oklch(90.5% .008 285);
+    --input: oklch(90.5% .008 285);
+    --ring: oklch(62% .035 285);
+    --overlay: oklch(17.5% .014 285 / .2);
+    --overlay-foreground: oklch(17.5% .014 285 / .07);
+    --chart-1: oklch(65% .18 295);
+    --chart-2: oklch(70% .14 175);
+    --chart-3: oklch(72% .16 55);
+    --chart-4: oklch(60% .2 350);
+    --chart-5: oklch(68% .13 130);
+    --sidebar: oklch(97.5% .005 285);
+    --sidebar-foreground: oklch(17.5% .01 285);
+    --sidebar-primary: oklch(23.5% .016 285);
+    --sidebar-primary-foreground: oklch(98.2% .003 285);
+    --sidebar-accent: oklch(95% .01 285);
+    --sidebar-accent-foreground: oklch(23.5% .016 285);
+    --sidebar-border: oklch(90.5% .008 285);
+    --sidebar-ring: oklch(62% .035 285);
+
+    & .dark, &.dark {
+      color-scheme: dark;
+      --background: oklch(15.5% .008 285);
+      --foreground: oklch(96.8% .003 285);
+      --card: oklch(20% .011 285);
+      --card-foreground: oklch(96.8% .003 285);
+      --popover: oklch(20% .011 285);
+      --popover-foreground: oklch(96.8% .003 285);
+      --primary: oklch(91.8% .007 285);
+      --primary-foreground: oklch(20% .011 285);
+      --secondary: oklch(25.5% .012 285);
+      --secondary-foreground: oklch(96.8% .003 285);
+      --muted: oklch(25.5% .012 285);
+      --muted-foreground: oklch(70.5% .016 285);
+      --accent: oklch(29% .015 285);
+      --accent-foreground: oklch(96.8% .003 285);
+      --destructive: oklch(69% .185 18);
+      --success: oklch(62.7% .194 149.214);
+      --warning: oklch(79.5% .184 86.047);
+      --border: oklch(100% .004 285 / .13);
+      --input: oklch(100% .004 285 / .17);
+      --ring: oklch(58.5% .038 285);
+      --overlay: oklch(10.5% .012 285 / .74);
+      --overlay-foreground: oklch(96.8% .003 285 / .09);
+      --chart-1: oklch(72% .17 295);
+      --chart-2: oklch(76% .13 175);
+      --chart-3: oklch(78% .15 55);
+      --chart-4: oklch(67% .19 350);
+      --chart-5: oklch(74% .12 130);
+      --sidebar: oklch(20% .011 285);
+      --sidebar-foreground: oklch(96.8% .003 285);
+      --sidebar-primary: oklch(72% .17 295);
+      --sidebar-primary-foreground: oklch(15.5% .008 285);
+      --sidebar-accent: oklch(29% .015 285);
+      --sidebar-accent-foreground: oklch(96.8% .003 285);
+      --sidebar-border: oklch(100% .004 285 / .13);
+      --sidebar-ring: oklch(58.5% .038 285);
+    }
+
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-overlay: var(--overlay);
+    --color-overlay-foreground: var(--overlay-foreground);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+  }
+
+  :root {
+    --opacity-disabled: .5;
+    --opacity-loading: .85;
+    --opacity-hover: .9;
+    --radius: .625rem;
+    --radius-none: 0;
+    --radius-xs: calc(var(--radius) * .4);
+    --radius-sm: calc(var(--radius) * .6);
+    --radius-md: calc(var(--radius) * .8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.2);
+    --radius-full: 9999px;
+    --shadow-sm: 0 2px 4px 0 #0000001a, 0 1px 2px -1px #0000001a;
+    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+    --size-xs: 24px;
+    --size-sm: 32px;
+    --size-md: 36px;
+    --size-lg: 40px;
+    --size-xl: 48px;
+    --spacing-0: 0px;
+    --spacing-1: 4px;
+    --spacing-2: 8px;
+    --spacing-3: 12px;
+    --spacing-4: 16px;
+    --spacing-5: 20px;
+    --spacing-6: 24px;
+    --spacing-8: 32px;
+    --spacing-10: 40px;
+    --spacing-xs: var(--spacing-1);
+    --spacing-sm: var(--spacing-2);
+    --spacing-md: var(--spacing-3);
+    --spacing-lg: var(--spacing-4);
+    --spacing-xl: var(--spacing-5);
+    --spacing-2xl: var(--spacing-6);
+    --scale-popup: .9;
+    --scale-dropdown: .95;
+    --duration-fast: .15s;
+    --duration-normal: .2s;
+    --duration-slow: .35s;
+    --duration-slower: .45s;
+    --ease-in: cubic-bezier(.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --ease-standard: ease;
+    --ease-spring: cubic-bezier(.32, .72, 0, 1);
+    --ease-emphasized: cubic-bezier(.22, 1, .36, 1);
+    --transition-default: var(--duration-normal) var(--ease-in-out);
+    --transition-fast: var(--duration-fast) var(--ease-in-out);
+    --transition-slow: var(--duration-slow) var(--ease-in-out);
+    --transition-slower: var(--duration-slower) var(--ease-in-out);
+    --transition-spring: var(--duration-slower) var(--ease-spring);
+    --transition-emphasized: var(--duration-slower) var(--ease-emphasized);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --duration-fast: .01ms;
+      --duration-normal: .01ms;
+      --duration-slow: .01ms;
+      --duration-slower: .01ms;
+    }
+  }
+
+  :root {
+    --font-sans: "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+    --weight-bold: 700;
+    --text-xs: 11px;
+    --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-md: 24px;
+    --line-height-text-lg: 28px;
+    --line-height-text-xl: 32px;
+    --line-height-text-2xl: 32px;
+    --line-height-text-3xl: 36px;
+    --tracking-text-sm: -.01em;
+    --tracking-text-xs: -.016em;
+    --z-default: 1;
+    --z-xs: 5;
+    --z-sm: 10;
+    --z-md: 20;
+    --z-lg: 30;
+    --z-xl: 40;
+    --z-backdrop: 40;
+    --z-modal: 50;
+    --z-popup: 60;
+    --z-toast: 70;
+  }
+}
+
+@layer ui.base, ui.components;

package/dist/reset.d.ts

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

package/dist/reset.js

@@ -0,0 +1 @@
+import "./lib/moduix/styles/reset.css";

package/dist/style.d.ts

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

package/dist/style.js

@@ -0,0 +1 @@
+import "./lib/moduix/styles/style.css";

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@moduix/react",
+  "version": "1.1.0",
+  "description": "React implementation of the moduix component system, built on Ark UI primitives.",
+  "keywords": [
+    "accessible",
+    "ark-ui",
+    "component-library",
+    "components",
+    "css-modules",
+    "design-system",
+    "headless",
+    "react",
+    "typescript",
+    "ui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Blinks44/moduix.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist",
+    "LICENSE.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/lib/moduix/styles/style.css",
+    "./reset.css": "./dist/lib/moduix/styles/reset.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006 --no-open",
+    "build": "tsdown",
+    "build-storybook": "storybook build",
+    "tsc:check": "tsc -b"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@ark-ui/react": "^5.37.2",
+    "@internationalized/date": "^3.12.2",
+    "@storybook/react-vite": "^10.4.6",
+    "@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",
+    "tsdown": "^0.22.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.0",
+    "vite-plugin-svgr": "^5.2.0"
+  },
+  "peerDependencies": {
+    "@ark-ui/react": "^5.37.2",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  }
+}