moduix 0.11.0 → 0.11.1

package/dist/reset.cjs

@@ -0,0 +1 @@
+require("./styles/reset.cjs");

package/dist/reset.d.cts

@@ -0,0 +1 @@
+export type * from './reset.d.mts'

package/dist/reset.d.ts

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

package/dist/reset.js

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

package/dist/style.cjs

@@ -0,0 +1 @@
+require("./styles/style.cjs");

package/dist/style.d.cts

@@ -0,0 +1 @@
+export type * from './style.d.mts'

package/dist/style.d.ts

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

package/dist/style.js

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

package/dist/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/styles/style.css

@@ -0,0 +1,263 @@
+@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, .2s)
+    var(--ease-out, cubic-bezier(0, 0, .2, 1));
+    --animation-fade-out: moduix-fade-out var(--duration-normal, .2s)
+    var(--ease-in, cubic-bezier(.4, 0, 1, 1));
+    --animation-slide-up: moduix-slide-up var(--duration-normal, .2s)
+    var(--ease-out, cubic-bezier(0, 0, .2, 1));
+    --animation-slide-down: moduix-slide-down var(--duration-normal, .2s)
+    var(--ease-out, cubic-bezier(0, 0, .2, 1));
+    --animation-spin: moduix-spin .75s linear infinite;
+    --border-width-sm: 1px;
+    --border-width-md: 2px;
+    --border-width-lg: 4px;
+  }
+
+  :root {
+    --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);
+    --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 {
+      --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);
+      --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-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: .1s;
+    --duration-normal: .2s;
+    --duration-slow: .3s;
+    --duration-slower: .5s;
+    --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-spring: cubic-bezier(.32, .72, 0, 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);
+    --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 {
+  body {
+    font-family: var(--font-sans), sans-serif;
+    font-optical-sizing: auto;
+    font-variation-settings: "wdth" 100;
+    font-style: normal;
+  }
+}
+
+@layer ui.components;

package/dist/utils/mergeClassName.cjs

@@ -0,0 +1,8 @@
+let clsx = require("clsx");
+//#region src/utils/mergeClassName.ts
+function mergeClassName(className, ...baseClassNames) {
+	if (typeof className === "function") return (state) => (0, clsx.clsx)(...baseClassNames, className(state));
+	return (0, clsx.clsx)(...baseClassNames, className);
+}
+//#endregion
+exports.mergeClassName = mergeClassName;

package/dist/utils/mergeClassName.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+//#region src/utils/mergeClassName.ts
+function mergeClassName(className, ...baseClassNames) {
+	if (typeof className === "function") return (state) => clsx(...baseClassNames, className(state));
+	return clsx(...baseClassNames, className);
+}
+//#endregion
+export { mergeClassName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moduix",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Composable React UI components built on Base UI primitives.",
   "keywords": [
     "accessible",
@@ -36,8 +36,8 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./style.css": "./dist/index.css",
-    "./reset.css": "./dist/reset.css",
+    "./style.css": "./dist/styles/style.css",
+    "./reset.css": "./dist/styles/reset.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -45,7 +45,7 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
-    "build": "tsc -b && vite build",
+    "build": "tsdown",
     "build-storybook": "storybook build",
     "tsc:check": "tsc --noEmit"
   },
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.5.0",
+    "@tsdown/css": "^0.22.2",
     "@types/node": "^25.9.1",
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
@@ -61,9 +62,9 @@
     "globals": "^17.6.0",
     "react": "^19",
     "react-dom": "^19",
+    "tsdown": "^0.22.2",
     "typescript": "~6.0.3",
     "vite": "^8.0.16",
-    "vite-plugin-dts": "^5.0.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0"
   },

package/dist/components/CloseButton/index.d.ts

@@ -1 +0,0 @@
-export * from './CloseButton';

package/dist/components/Meter/index.d.ts

@@ -1 +0,0 @@
-export { Meter, MeterRoot, MeterLabel, MeterValue, MeterTrack, MeterIndicator } from './Meter';

package/dist/components/Progress/index.d.ts

@@ -1 +0,0 @@
-export { Progress, ProgressRoot, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, } from './Progress';

package/dist/components/Separator/index.d.ts

@@ -1 +0,0 @@
-export { Separator } from './Separator';

package/dist/components/Tabs/index.d.ts

@@ -1 +0,0 @@
-export { Tabs, TabsList, TabsIndicator, TabsTab, TabsPanel } from './Tabs';

package/dist/components/Toolbar/index.d.ts

@@ -1 +0,0 @@
-export { Toolbar, ToolbarGroup, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarSeparator, } from './Toolbar';

package/dist/data/insideScrollSections.d.ts

@@ -1,4 +0,0 @@
-export declare const insideScrollSections: {
-    title: string;
-    body: string;
-}[];