moduix 0.11.1 → 0.11.3

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blinks44
+
+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.

package/README.md

@@ -51,12 +51,15 @@ bundle, so moduix does not ship duplicate React or Base UI runtimes.
 
 ## Usage
 
-Import the library styles once in your application entry point:
+Import the required foundation stylesheet once in your application entry point:
 
 ```tsx
 import 'moduix/style.css';
 ```
 
+This stylesheet is required. It provides the shared design tokens and base styles that component
+CSS depends on.
+
 If you want the optional reset, import it explicitly before the main stylesheet:
 
 ```tsx
@@ -81,8 +84,8 @@ export function Example() {
 }
 ```
 
-`style.css` ships the shared design tokens and base styles. Component imports bring along only the
-CSS they use, so you do not need a library-wide component stylesheet.
+`style.css` ships the shared design tokens and base styles. Component imports still bring along only
+the component CSS they use.
 
 ## Styling
 

package/dist/components/Field/Field.css

@@ -53,6 +53,7 @@
     outline: var(--field-focus-ring-width, var(--border-width-sm)) solid transparent;
     outline-offset: var(--field-focus-ring-offset, -1px);
     transition: border-color var(--field-control-transition, var(--transition-default)),
+      outline-color var(--field-control-transition, var(--transition-default)),
       opacity var(--field-control-transition, var(--transition-default));
     margin: 0;
 

package/dist/components/Input/Input.css

@@ -21,27 +21,27 @@
       outline-color var(--input-transition, var(--transition-default)),
       opacity var(--input-transition, var(--transition-default));
     margin: 0;
-  }
 
-  .ek-HaW_root::placeholder {
-    color: var(--input-placeholder-color, var(--color-muted-foreground));
-  }
+    &::placeholder {
+      color: var(--input-placeholder-color, var(--color-muted-foreground));
+    }
 
-  .ek-HaW_root:focus-visible {
-    outline-color: var(--input-focus-ring-color, var(--color-ring));
-  }
+    &:focus-visible {
+      outline-color: var(--input-focus-ring-color, var(--color-ring));
+    }
 
-  .ek-HaW_root[data-invalid] {
-    border-color: var(--input-border-color-invalid, var(--color-destructive));
-  }
+    &[data-invalid] {
+      border-color: var(--input-border-color-invalid, var(--color-destructive));
+    }
 
-  .ek-HaW_root[data-invalid]:focus-visible {
-    outline-color: var(--input-border-color-invalid, var(--color-destructive));
-  }
+    &[data-invalid]:focus-visible {
+      outline-color: var(--input-border-color-invalid, var(--color-destructive));
+    }
 
-  .ek-HaW_root[data-disabled] {
-    pointer-events: none;
-    opacity: var(--input-disabled-opacity, var(--opacity-disabled));
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: var(--input-disabled-opacity, var(--opacity-disabled));
+    }
   }
 
   .ek-HaW_root[data-size="xs"] {

package/dist/components/NavigationMenu/NavigationMenu.css

@@ -25,7 +25,7 @@
 
   .BPQarq_trigger, .BPQarq_link {
     box-sizing: border-box;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: var(--navigation-menu-trigger-gap, .375rem);
     min-height: var(--navigation-menu-trigger-height, var(--size-md));
@@ -40,6 +40,7 @@
     font: inherit;
     font-size: var(--navigation-menu-trigger-font-size, var(--text-sm));
     line-height: var(--navigation-menu-trigger-line-height, var(--line-height-text-sm));
+    text-align: left;
     user-select: none;
     cursor: pointer;
     transition: background-color var(--navigation-menu-transition, var(--transition-default)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moduix",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Composable React UI components built on Base UI primitives.",
   "keywords": [
     "accessible",
@@ -21,20 +21,20 @@
     "directory": "packages/ui"
   },
   "files": [
-    "dist"
+    "dist",
+    "LICENSE.md"
   ],
   "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./style.css": "./dist/styles/style.css",
     "./reset.css": "./dist/styles/reset.css",
@@ -69,7 +69,7 @@
     "vite-plugin-svgr": "^5.2.0"
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.4.0",
+    "@base-ui/react": "^1.5.0",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   }

package/dist/_virtual/_rolldown/runtime.cjs

@@ -1,23 +0,0 @@
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
-exports.__toESM = __toESM;

package/dist/components/Accordion/Accordion.cjs

@@ -1,65 +0,0 @@
-const require_Icons = require("../../icons/ui/Icons.cjs");
-const require_mergeClassName = require("../../utils/mergeClassName.cjs");
-const require_Accordion_module = require("./Accordion.module.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-let clsx = require("clsx");
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
-let react = require("react");
-//#region src/components/Accordion/Accordion.tsx
-const Accordion = (0, react.forwardRef)(function Accordion({ className, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_accordion.Accordion.Root, {
-		ref,
-		"data-slot": "accordion-root",
-		className: require_mergeClassName.mergeClassName(className, require_Accordion_module.default.root),
-		...props
-	});
-});
-const AccordionItem = (0, react.forwardRef)(function AccordionItem({ className, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_accordion.Accordion.Item, {
-		ref,
-		"data-slot": "accordion-item",
-		className: require_mergeClassName.mergeClassName(className, require_Accordion_module.default.item),
-		...props
-	});
-});
-const AccordionHeader = (0, react.forwardRef)(function AccordionHeader({ className, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_accordion.Accordion.Header, {
-		ref,
-		"data-slot": "accordion-header",
-		className: require_mergeClassName.mergeClassName(className, require_Accordion_module.default.header),
-		...props
-	});
-});
-const AccordionTrigger = (0, react.forwardRef)(function AccordionTrigger({ className, render, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_accordion.Accordion.Trigger, {
-		ref,
-		"data-slot": "accordion-trigger",
-		render,
-		className: render ? className : require_mergeClassName.mergeClassName(className, require_Accordion_module.default.trigger),
-		...props
-	});
-});
-function AccordionTriggerIcon({ className, children, "aria-hidden": ariaHidden = true, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		"data-slot": "accordion-trigger-icon",
-		"aria-hidden": ariaHidden,
-		className: (0, clsx.clsx)(require_Accordion_module.default.triggerIcon, className),
-		...props,
-		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PlusIcon, {})
-	});
-}
-const AccordionPanel = (0, react.forwardRef)(function AccordionPanel({ className, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_accordion.Accordion.Panel, {
-		ref,
-		"data-slot": "accordion-panel",
-		className: require_mergeClassName.mergeClassName(className, require_Accordion_module.default.panel),
-		...props
-	});
-});
-//#endregion
-exports.Accordion = Accordion;
-exports.AccordionHeader = AccordionHeader;
-exports.AccordionItem = AccordionItem;
-exports.AccordionPanel = AccordionPanel;
-exports.AccordionTrigger = AccordionTrigger;
-exports.AccordionTriggerIcon = AccordionTriggerIcon;

package/dist/components/Accordion/Accordion.module.cjs

@@ -1,12 +0,0 @@
-import './Accordion.css';
-//#region src/components/Accordion/Accordion.module.css
-var Accordion_module_default = {
-	"header": "BP0x5G_header",
-	"item": "BP0x5G_item",
-	"panel": "BP0x5G_panel",
-	"root": "BP0x5G_root",
-	"trigger": "BP0x5G_trigger",
-	"triggerIcon": "BP0x5G_triggerIcon"
-};
-//#endregion
-exports.default = Accordion_module_default;

package/dist/components/Alert/Alert.cjs

@@ -1,50 +0,0 @@
-const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
-const require_Alert_module = require("./Alert.module.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx);
-//#region src/components/Alert/Alert.tsx
-function Alert({ className, role, variant = "default", ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: role ?? (variant === "destructive" ? "alert" : "status"),
-		"data-slot": "alert-root",
-		"data-variant": variant,
-		className: (0, clsx.default)(require_Alert_module.default.root, className),
-		...props
-	});
-}
-function AlertIcon({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		"data-slot": "alert-icon",
-		"aria-hidden": "true",
-		className: (0, clsx.default)(require_Alert_module.default.icon, className),
-		...props
-	});
-}
-function AlertContent({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "alert-content",
-		className: (0, clsx.default)(require_Alert_module.default.content, className),
-		...props
-	});
-}
-function AlertTitle({ as: Root = "h3", className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Root, {
-		"data-slot": "alert-title",
-		className: (0, clsx.default)(require_Alert_module.default.title, className),
-		...props
-	});
-}
-function AlertDescription({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "alert-description",
-		className: (0, clsx.default)(require_Alert_module.default.description, className),
-		...props
-	});
-}
-//#endregion
-exports.Alert = Alert;
-exports.AlertContent = AlertContent;
-exports.AlertDescription = AlertDescription;
-exports.AlertIcon = AlertIcon;
-exports.AlertTitle = AlertTitle;

package/dist/components/Alert/Alert.module.cjs

@@ -1,11 +0,0 @@
-import './Alert.css';
-//#region src/components/Alert/Alert.module.css
-var Alert_module_default = {
-	"content": "Rbv-4q_content",
-	"description": "Rbv-4q_description",
-	"icon": "Rbv-4q_icon",
-	"root": "Rbv-4q_root",
-	"title": "Rbv-4q_title"
-};
-//#endregion
-exports.default = Alert_module_default;

package/dist/components/AlertDialog/AlertDialog.cjs

@@ -1,122 +0,0 @@
-const require_mergeClassName = require("../../utils/mergeClassName.cjs");
-const require_AlertDialog_module = require("./AlertDialog.module.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-let clsx = require("clsx");
-let _base_ui_react_alert_dialog = require("@base-ui/react/alert-dialog");
-//#region src/components/AlertDialog/AlertDialog.tsx
-const AlertDialog = _base_ui_react_alert_dialog.AlertDialog.Root;
-const createAlertDialogHandle = _base_ui_react_alert_dialog.AlertDialog.createHandle;
-function AlertDialogPortal({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Portal, {
-		"data-slot": "alert-dialog-portal",
-		className,
-		...props
-	});
-}
-function AlertDialogTrigger({ className, render, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Trigger, {
-		"data-slot": "alert-dialog-trigger",
-		render,
-		className: render ? className : require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.trigger),
-		...props
-	});
-}
-function AlertDialogBackdrop({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Backdrop, {
-		"data-slot": "alert-dialog-backdrop",
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.backdrop),
-		...props
-	});
-}
-function AlertDialogViewport({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Viewport, {
-		"data-slot": "alert-dialog-viewport",
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.viewport),
-		...props
-	});
-}
-function AlertDialogPopup({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Popup, {
-		"data-slot": "alert-dialog-popup",
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.popup),
-		...props
-	});
-}
-function AlertDialogTitle({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Title, {
-		"data-slot": "alert-dialog-title",
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.title),
-		...props
-	});
-}
-function AlertDialogDescription({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Description, {
-		"data-slot": "alert-dialog-description",
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.description),
-		...props
-	});
-}
-function AlertDialogClose({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Close, {
-		"data-slot": "alert-dialog-close",
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.close),
-		...props
-	});
-}
-function AlertDialogContent({ className, children, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogBackdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogViewport, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogPopup, {
-		className,
-		...props,
-		children
-	}) })] });
-}
-function AlertDialogHeader({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "alert-dialog-header",
-		className: (0, clsx.clsx)(require_AlertDialog_module.default.header, className),
-		...props
-	});
-}
-function AlertDialogFooter({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "alert-dialog-footer",
-		className: (0, clsx.clsx)(require_AlertDialog_module.default.footer, className),
-		...props
-	});
-}
-function AlertDialogBody({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "alert-dialog-body",
-		className: (0, clsx.clsx)(require_AlertDialog_module.default.body, className),
-		...props
-	});
-}
-function AlertDialogAction({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogClose, {
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.action),
-		...props
-	});
-}
-function AlertDialogCancel({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogClose, {
-		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.cancel),
-		...props
-	});
-}
-//#endregion
-exports.AlertDialog = AlertDialog;
-exports.AlertDialogAction = AlertDialogAction;
-exports.AlertDialogBackdrop = AlertDialogBackdrop;
-exports.AlertDialogBody = AlertDialogBody;
-exports.AlertDialogCancel = AlertDialogCancel;
-exports.AlertDialogClose = AlertDialogClose;
-exports.AlertDialogContent = AlertDialogContent;
-exports.AlertDialogDescription = AlertDialogDescription;
-exports.AlertDialogFooter = AlertDialogFooter;
-exports.AlertDialogHeader = AlertDialogHeader;
-exports.AlertDialogPopup = AlertDialogPopup;
-exports.AlertDialogPortal = AlertDialogPortal;
-exports.AlertDialogTitle = AlertDialogTitle;
-exports.AlertDialogTrigger = AlertDialogTrigger;
-exports.AlertDialogViewport = AlertDialogViewport;
-exports.createAlertDialogHandle = createAlertDialogHandle;

package/dist/components/AlertDialog/AlertDialog.module.cjs

@@ -1,18 +0,0 @@
-import './AlertDialog.css';
-//#region src/components/AlertDialog/AlertDialog.module.css
-var AlertDialog_module_default = {
-	"action": "ktfPPa_action",
-	"backdrop": "ktfPPa_backdrop",
-	"body": "ktfPPa_body",
-	"cancel": "ktfPPa_cancel",
-	"close": "ktfPPa_close",
-	"description": "ktfPPa_description",
-	"footer": "ktfPPa_footer",
-	"header": "ktfPPa_header",
-	"popup": "ktfPPa_popup",
-	"title": "ktfPPa_title",
-	"trigger": "ktfPPa_trigger",
-	"viewport": "ktfPPa_viewport"
-};
-//#endregion
-exports.default = AlertDialog_module_default;

package/dist/components/AspectRatio/AspectRatio.cjs

@@ -1,24 +0,0 @@
-const require_AspectRatio_module = require("./AspectRatio.module.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-let clsx = require("clsx");
-//#region src/components/AspectRatio/AspectRatio.tsx
-const PRESETS = {
-	square: 1,
-	video: 16 / 9,
-	portrait: 9 / 16,
-	photo: 4 / 3
-};
-function AspectRatio({ ratio, className, style, ...props }) {
-	const resolvedRatio = typeof ratio === "string" ? PRESETS[ratio] : ratio;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "aspect-ratio-root",
-		className: (0, clsx.clsx)(require_AspectRatio_module.default.root, className),
-		style: {
-			aspectRatio: resolvedRatio,
-			...style
-		},
-		...props
-	});
-}
-//#endregion
-exports.AspectRatio = AspectRatio;

package/dist/components/AspectRatio/AspectRatio.module.cjs

@@ -1,5 +0,0 @@
-import './AspectRatio.css';
-//#region src/components/AspectRatio/AspectRatio.module.css
-var AspectRatio_module_default = { "root": "_700akW_root" };
-//#endregion
-exports.default = AspectRatio_module_default;