@moduix/react 2.1.0 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduix/react",
-  "version": "2.1.0",
+  "version": "2.2.4",
   "description": "React implementation of the moduix component system, built on Ark UI primitives.",
   "keywords": [
     "accessible",
@@ -21,56 +21,416 @@
     "directory": "packages/react"
   },
   "files": [
-    "dist",
+    "dist/components",
+    "dist/internal",
+    "dist/locale.d.ts",
+    "dist/locale.js",
+    "dist/presets",
+    "dist/styles/animations.css",
+    "dist/styles/borders.css",
+    "dist/styles/colors.css",
+    "dist/styles/opacity.css",
+    "dist/styles/radius.css",
+    "dist/styles/reset.css",
+    "dist/styles/shadows.css",
+    "dist/styles/sizing.css",
+    "dist/styles/spacing.css",
+    "dist/styles/style.css",
+    "dist/styles/transforms.css",
+    "dist/styles/transitions.css",
+    "dist/styles/typography.css",
+    "dist/styles/z-index.css",
     "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",
-    "./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",
+    "./accordion": {
+      "types": "./dist/components/accordion/index.d.ts",
+      "import": "./dist/components/accordion/index.js"
+    },
+    "./alert": {
+      "types": "./dist/components/alert/index.d.ts",
+      "import": "./dist/components/alert/index.js"
+    },
+    "./angle-slider": {
+      "types": "./dist/components/angle-slider/index.d.ts",
+      "import": "./dist/components/angle-slider/index.js"
+    },
+    "./aspect-ratio": {
+      "types": "./dist/components/aspect-ratio/index.d.ts",
+      "import": "./dist/components/aspect-ratio/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/avatar/index.d.ts",
+      "import": "./dist/components/avatar/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/badge/index.d.ts",
+      "import": "./dist/components/badge/index.js"
+    },
+    "./bleed": {
+      "types": "./dist/components/bleed/index.d.ts",
+      "import": "./dist/components/bleed/index.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/components/breadcrumbs/index.d.ts",
+      "import": "./dist/components/breadcrumbs/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/index.d.ts",
+      "import": "./dist/components/button/index.js"
+    },
+    "./card": {
+      "types": "./dist/components/card/index.d.ts",
+      "import": "./dist/components/card/index.js"
+    },
+    "./carousel": {
+      "types": "./dist/components/carousel/index.d.ts",
+      "import": "./dist/components/carousel/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "import": "./dist/components/checkbox/index.js"
+    },
+    "./clipboard": {
+      "types": "./dist/components/clipboard/index.d.ts",
+      "import": "./dist/components/clipboard/index.js"
+    },
+    "./close-button": {
+      "types": "./dist/components/close-button/index.d.ts",
+      "import": "./dist/components/close-button/index.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/collapsible/index.d.ts",
+      "import": "./dist/components/collapsible/index.js"
+    },
+    "./color-picker": {
+      "types": "./dist/components/color-picker/index.d.ts",
+      "import": "./dist/components/color-picker/index.js"
+    },
+    "./combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "import": "./dist/components/combobox/index.js"
+    },
+    "./command-palette": {
+      "types": "./dist/components/command-palette/index.d.ts",
+      "import": "./dist/components/command-palette/index.js"
+    },
+    "./container": {
+      "types": "./dist/components/container/index.d.ts",
+      "import": "./dist/components/container/index.js"
+    },
+    "./date-input": {
+      "types": "./dist/components/date-input/index.d.ts",
+      "import": "./dist/components/date-input/index.js"
+    },
+    "./date-picker": {
+      "types": "./dist/components/date-picker/index.d.ts",
+      "import": "./dist/components/date-picker/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/dialog/index.d.ts",
+      "import": "./dist/components/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./dist/components/drawer/index.d.ts",
+      "import": "./dist/components/drawer/index.js"
+    },
+    "./editable": {
+      "types": "./dist/components/editable/index.d.ts",
+      "import": "./dist/components/editable/index.js"
+    },
+    "./empty": {
+      "types": "./dist/components/empty/index.d.ts",
+      "import": "./dist/components/empty/index.js"
+    },
+    "./field": {
+      "types": "./dist/components/field/index.d.ts",
+      "import": "./dist/components/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./dist/components/fieldset/index.d.ts",
+      "import": "./dist/components/fieldset/index.js"
+    },
+    "./file-upload": {
+      "types": "./dist/components/file-upload/index.d.ts",
+      "import": "./dist/components/file-upload/index.js"
+    },
+    "./floating-panel": {
+      "types": "./dist/components/floating-panel/index.d.ts",
+      "import": "./dist/components/floating-panel/index.js"
+    },
+    "./heading": {
+      "types": "./dist/components/heading/index.d.ts",
+      "import": "./dist/components/heading/index.js"
+    },
+    "./highlight": {
+      "types": "./dist/components/highlight/index.d.ts",
+      "import": "./dist/components/highlight/index.js"
+    },
+    "./hover-card": {
+      "types": "./dist/components/hover-card/index.d.ts",
+      "import": "./dist/components/hover-card/index.js"
+    },
+    "./image": {
+      "types": "./dist/components/image/index.d.ts",
+      "import": "./dist/components/image/index.js"
+    },
+    "./image-cropper": {
+      "types": "./dist/components/image-cropper/index.d.ts",
+      "import": "./dist/components/image-cropper/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/index.d.ts",
+      "import": "./dist/components/input/index.js"
+    },
+    "./input-group": {
+      "types": "./dist/components/input-group/index.d.ts",
+      "import": "./dist/components/input-group/index.js"
+    },
+    "./kbd": {
+      "types": "./dist/components/kbd/index.d.ts",
+      "import": "./dist/components/kbd/index.js"
+    },
+    "./lightbox": {
+      "types": "./dist/components/lightbox/index.d.ts",
+      "import": "./dist/components/lightbox/index.js"
+    },
+    "./list": {
+      "types": "./dist/components/list/index.d.ts",
+      "import": "./dist/components/list/index.js"
+    },
+    "./listbox": {
+      "types": "./dist/components/listbox/index.d.ts",
+      "import": "./dist/components/listbox/index.js"
+    },
+    "./marquee": {
+      "types": "./dist/components/marquee/index.d.ts",
+      "import": "./dist/components/marquee/index.js"
+    },
+    "./menu": {
+      "types": "./dist/components/menu/index.d.ts",
+      "import": "./dist/components/menu/index.js"
+    },
+    "./native-select": {
+      "types": "./dist/components/native-select/index.d.ts",
+      "import": "./dist/components/native-select/index.js"
+    },
+    "./number-input": {
+      "types": "./dist/components/number-input/index.d.ts",
+      "import": "./dist/components/number-input/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/pagination/index.d.ts",
+      "import": "./dist/components/pagination/index.js"
+    },
+    "./password-input": {
+      "types": "./dist/components/password-input/index.d.ts",
+      "import": "./dist/components/password-input/index.js"
+    },
+    "./pin-input": {
+      "types": "./dist/components/pin-input/index.d.ts",
+      "import": "./dist/components/pin-input/index.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/index.d.ts",
+      "import": "./dist/components/popover/index.js"
+    },
+    "./progress-circular": {
+      "types": "./dist/components/progress-circular/index.d.ts",
+      "import": "./dist/components/progress-circular/index.js"
+    },
+    "./progress-linear": {
+      "types": "./dist/components/progress-linear/index.d.ts",
+      "import": "./dist/components/progress-linear/index.js"
+    },
+    "./qr-code": {
+      "types": "./dist/components/qr-code/index.d.ts",
+      "import": "./dist/components/qr-code/index.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/radio-group/index.d.ts",
+      "import": "./dist/components/radio-group/index.js"
+    },
+    "./rating-group": {
+      "types": "./dist/components/rating-group/index.d.ts",
+      "import": "./dist/components/rating-group/index.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/components/scroll-area/index.d.ts",
+      "import": "./dist/components/scroll-area/index.js"
+    },
+    "./segment-group": {
+      "types": "./dist/components/segment-group/index.d.ts",
+      "import": "./dist/components/segment-group/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/index.d.ts",
+      "import": "./dist/components/select/index.js"
+    },
+    "./separator": {
+      "types": "./dist/components/separator/index.d.ts",
+      "import": "./dist/components/separator/index.js"
+    },
+    "./sidebar": {
+      "types": "./dist/components/sidebar/index.d.ts",
+      "import": "./dist/components/sidebar/index.js"
+    },
+    "./signature-pad": {
+      "types": "./dist/components/signature-pad/index.d.ts",
+      "import": "./dist/components/signature-pad/index.js"
+    },
+    "./simple-grid": {
+      "types": "./dist/components/simple-grid/index.d.ts",
+      "import": "./dist/components/simple-grid/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/skeleton/index.d.ts",
+      "import": "./dist/components/skeleton/index.js"
+    },
+    "./slider": {
+      "types": "./dist/components/slider/index.d.ts",
+      "import": "./dist/components/slider/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/spinner/index.d.ts",
+      "import": "./dist/components/spinner/index.js"
+    },
+    "./split-button": {
+      "types": "./dist/components/split-button/index.d.ts",
+      "import": "./dist/components/split-button/index.js"
+    },
+    "./splitter": {
+      "types": "./dist/components/splitter/index.d.ts",
+      "import": "./dist/components/splitter/index.js"
+    },
+    "./stack": {
+      "types": "./dist/components/stack/index.d.ts",
+      "import": "./dist/components/stack/index.js"
+    },
+    "./steps": {
+      "types": "./dist/components/steps/index.d.ts",
+      "import": "./dist/components/steps/index.js"
+    },
+    "./swap": {
+      "types": "./dist/components/swap/index.d.ts",
+      "import": "./dist/components/swap/index.js"
+    },
+    "./switch": {
+      "types": "./dist/components/switch/index.d.ts",
+      "import": "./dist/components/switch/index.js"
+    },
+    "./table": {
+      "types": "./dist/components/table/index.d.ts",
+      "import": "./dist/components/table/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs/index.d.ts",
+      "import": "./dist/components/tabs/index.js"
+    },
+    "./tag": {
+      "types": "./dist/components/tag/index.d.ts",
+      "import": "./dist/components/tag/index.js"
+    },
+    "./tags-input": {
+      "types": "./dist/components/tags-input/index.d.ts",
+      "import": "./dist/components/tags-input/index.js"
+    },
+    "./text": {
+      "types": "./dist/components/text/index.d.ts",
+      "import": "./dist/components/text/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/textarea/index.d.ts",
+      "import": "./dist/components/textarea/index.js"
+    },
+    "./timer": {
+      "types": "./dist/components/timer/index.d.ts",
+      "import": "./dist/components/timer/index.js"
+    },
+    "./toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "import": "./dist/components/toast/index.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/toggle/index.d.ts",
+      "import": "./dist/components/toggle/index.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/toggle-group/index.d.ts",
+      "import": "./dist/components/toggle-group/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/tooltip/index.d.ts",
+      "import": "./dist/components/tooltip/index.js"
+    },
+    "./tour": {
+      "types": "./dist/components/tour/index.d.ts",
+      "import": "./dist/components/tour/index.js"
+    },
+    "./tree-view": {
+      "types": "./dist/components/tree-view/index.d.ts",
+      "import": "./dist/components/tree-view/index.js"
+    },
+    "./typeset": {
+      "types": "./dist/components/typeset/index.d.ts",
+      "import": "./dist/components/typeset/index.js"
+    },
+    "./locale": {
+      "types": "./dist/locale.d.ts",
+      "import": "./dist/locale.js"
+    },
+    "./style.css": "./dist/styles/style.css",
+    "./reset.css": "./dist/styles/reset.css",
+    "./presets/contrast.css": "./dist/presets/contrast.css",
+    "./presets/dense.css": "./dist/presets/dense.css",
+    "./presets/soft.css": "./dist/presets/soft.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"
+    "build": "rslib",
+    "build:storybook": "storybook build",
+    "dev": "rslib --watch --no-clean",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test": "rstest run",
+    "test:watch": "rstest --watch",
+    "tsc:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@unpic/core": "^1.0.3",
     "@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.5.0",
-    "@tsdown/css": "^0.22.3",
+    "@microsoft/api-extractor": "^7.58.12",
+    "@rsbuild/core": "~2.1.4",
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@rslib/core": "^0.23.2",
+    "@rstest/adapter-rslib": "^0.10.6",
+    "@rstest/core": "^0.10.6",
+    "@storybook/addon-docs": "10.5.3",
+    "@storybook/react": "10.5.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "happy-dom": "^20.10.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "10.5.0",
-    "tsdown": "^0.22.3",
-    "typescript": "~6.0.3",
-    "vite": "^8.1.0",
-    "vite-plugin-svgr": "^5.2.0"
+    "storybook": "10.5.3",
+    "storybook-addon-rslib": "^3.3.4",
+    "storybook-react-rsbuild": "^3.3.4",
+    "typescript": "~6.0.3"
   },
   "peerDependencies": {
     "@ark-ui/react": "^5.37.2",

package/dist/components/accordion/Accordion.css

@@ -1,197 +0,0 @@
-@layer ui.components {
-  @keyframes tIMeYW_accordion-item-content-open {
-    from {
-      height: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
-    }
-
-    to {
-      height: var(--height);
-      opacity: var(--accordion-item-content-open-opacity, 1);
-    }
-  }
-
-  @keyframes tIMeYW_accordion-item-content-closed {
-    from {
-      height: var(--height);
-      opacity: var(--accordion-item-content-open-opacity, 1);
-    }
-
-    to {
-      height: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
-    }
-  }
-
-  @keyframes tIMeYW_accordion-item-content-open-horizontal {
-    from {
-      width: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
-    }
-
-    to {
-      width: var(--width);
-      opacity: var(--accordion-item-content-open-opacity, 1);
-    }
-  }
-
-  @keyframes tIMeYW_accordion-item-content-closed-horizontal {
-    from {
-      width: var(--width);
-      opacity: var(--accordion-item-content-open-opacity, 1);
-    }
-
-    to {
-      width: 0;
-      opacity: var(--accordion-item-content-closed-opacity, .01);
-    }
-  }
-
-  .tIMeYW_root {
-    box-sizing: border-box;
-    width: var(--accordion-width, 100%);
-    max-width: var(--accordion-max-width, 100%);
-    min-width: 0;
-    color: var(--accordion-color, var(--color-foreground));
-    flex-direction: column;
-    display: flex;
-
-    &[data-orientation="horizontal"] {
-      width: var(--accordion-horizontal-width, auto);
-      height: var(--accordion-horizontal-height, 20rem);
-      max-height: var(--accordion-horizontal-max-height, 100%);
-      flex-direction: row;
-    }
-  }
-
-  .tIMeYW_item {
-    overflow-anchor: none;
-
-    &[data-orientation="vertical"]:not(:last-child) {
-      border-bottom: var(--accordion-item-border-width, var(--border-width-sm)) solid
-        var(--accordion-item-border-color, var(--color-border));
-    }
-
-    &[data-orientation="horizontal"] {
-      display: flex;
-
-      &:not(:last-child) {
-        border-inline-end: var(--accordion-item-border-width, var(--border-width-sm)) solid
-          var(--accordion-item-border-color, var(--color-border));
-      }
-    }
-  }
-
-  .tIMeYW_itemTrigger {
-    box-sizing: border-box;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--accordion-trigger-gap, var(--spacing-4));
-    width: 100%;
-    padding-block: var(--accordion-trigger-padding-y, var(--spacing-2));
-    padding-inline: var(--accordion-trigger-padding-x, var(--spacing-3));
-    background-color: var(--accordion-trigger-bg, var(--color-muted));
-    color: inherit;
-    font: inherit;
-    font-size: var(--accordion-trigger-font-size, var(--text-md));
-    line-height: var(--accordion-trigger-line-height, var(--line-height-text-md));
-    text-align: left;
-    user-select: none;
-    cursor: pointer;
-    transition: background-color var(--transition-default),
-      color var(--transition-default);
-    border: 0;
-    outline: 0;
-    margin: 0;
-    display: flex;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--accordion-trigger-bg-hover, var(--color-accent));
-      }
-    }
-
-    &:focus-visible {
-      z-index: 1;
-      outline: var(--accordion-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--accordion-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--accordion-focus-ring-offset, var(--border-width-sm)) * -1);
-      position: relative;
-    }
-
-    &:is([disabled], [data-disabled]) {
-      cursor: default;
-      opacity: var(--accordion-disabled-opacity, var(--opacity-disabled));
-    }
-
-    &[data-orientation="horizontal"] {
-      width: var(--accordion-horizontal-trigger-width, 2.5rem);
-      writing-mode: sideways-lr;
-      justify-content: center;
-      height: 100%;
-    }
-  }
-
-  .tIMeYW_itemIndicator {
-    box-sizing: border-box;
-    width: var(--accordion-icon-size, var(--spacing-3));
-    height: var(--accordion-icon-size, var(--spacing-3));
-    transition: transform var(--accordion-icon-transition, var(--transition-default));
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    & svg {
-      width: 100%;
-      height: 100%;
-    }
-
-    &[data-state="open"] {
-      transform: var(--accordion-icon-open-transform, rotate(45deg) scale(1.1));
-    }
-  }
-
-  .tIMeYW_itemContent {
-    box-sizing: border-box;
-    color: var(--accordion-item-content-color, var(--color-muted-foreground));
-    font-size: var(--accordion-item-content-font-size, var(--text-md));
-    line-height: var(--accordion-item-content-line-height, var(--line-height-text-md));
-    overflow: hidden;
-
-    &[hidden]:not([hidden="until-found"]) {
-      display: none;
-    }
-
-    &[data-state="open"][data-orientation="vertical"] {
-      animation: tIMeYW_accordion-item-content-open
-        var(--accordion-item-content-transition, var(--transition-default));
-    }
-
-    &[data-state="closed"][data-orientation="vertical"] {
-      animation: tIMeYW_accordion-item-content-closed
-        var(--accordion-item-content-transition, var(--transition-default));
-    }
-
-    &[data-state="open"][data-orientation="horizontal"] {
-      animation: tIMeYW_accordion-item-content-open-horizontal
-        var(--accordion-item-content-transition, var(--transition-default));
-    }
-
-    &[data-state="closed"][data-orientation="horizontal"] {
-      animation: tIMeYW_accordion-item-content-closed-horizontal
-        var(--accordion-item-content-transition, var(--transition-default));
-    }
-
-    &[data-orientation="horizontal"] > * {
-      width: var(--accordion-horizontal-content-width, 16rem);
-    }
-  }
-
-  .tIMeYW_itemBody {
-    gap: var(--accordion-item-body-gap, var(--spacing-3));
-    min-width: 0;
-    padding: var(--accordion-item-body-padding, var(--spacing-3));
-    display: grid;
-  }
-}