@moduix/react 2.2.0 → 2.2.4

package/dist/components/image-cropper/ImageCropper.js

@@ -1,97 +1,97 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import ImageCropper_module_default from "./ImageCropper.module.js";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageCropper, useImageCropper, useImageCropperContext } from "@ark-ui/react/image-cropper";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ImageCropper, useImageCropper } from "@ark-ui/react/image-cropper";
-//#region src/components/image-cropper/ImageCropper.tsx
-const ImageCropperRoot = forwardRef(function ImageCropperRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.Root, {
-		ref,
-		"data-slot": "image-cropper-root",
-		className: clsx(ImageCropper_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import ImageCropper_module from "./ImageCropper.module.js";
+const ImageCropper_ImageCropperRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.Root, {
+        ref: ref,
+        "data-slot": "image-cropper-root",
+        className: clsx(ImageCropper_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperRootProvider = forwardRef(function ImageCropperRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.RootProvider, {
-		ref,
-		"data-slot": "image-cropper-root-provider",
-		className: clsx(ImageCropper_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const ImageCropper_ImageCropperRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.RootProvider, {
+        ref: ref,
+        "data-slot": "image-cropper-root-provider",
+        className: clsx(ImageCropper_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperViewport = forwardRef(function ImageCropperViewport({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.Viewport, {
-		ref,
-		"data-slot": "image-cropper-viewport",
-		className: clsx(ImageCropper_module_default.viewport, normalizeClassName(className)),
-		...props
-	});
+const ImageCropper_ImageCropperViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.Viewport, {
+        ref: ref,
+        "data-slot": "image-cropper-viewport",
+        className: clsx(ImageCropper_module.viewport, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperImage = forwardRef(function ImageCropperImage({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.Image, {
-		ref,
-		"data-slot": "image-cropper-image",
-		className: clsx(ImageCropper_module_default.image, normalizeClassName(className)),
-		...props
-	});
+const ImageCropper_ImageCropperImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.Image, {
+        ref: ref,
+        "data-slot": "image-cropper-image",
+        className: clsx(ImageCropper_module.image, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperSelection = forwardRef(function ImageCropperSelection({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.Selection, {
-		ref,
-		"data-slot": "image-cropper-selection",
-		className: clsx(ImageCropper_module_default.selection, normalizeClassName(className)),
-		...props
-	});
+const ImageCropper_ImageCropperSelection = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.Selection, {
+        ref: ref,
+        "data-slot": "image-cropper-selection",
+        className: clsx(ImageCropper_module.selection, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperGrid = forwardRef(function ImageCropperGrid({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.Grid, {
-		ref,
-		"data-slot": "image-cropper-grid",
-		className: clsx(ImageCropper_module_default.grid, normalizeClassName(className)),
-		...props
-	});
+const ImageCropper_ImageCropperGrid = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.Grid, {
+        ref: ref,
+        "data-slot": "image-cropper-grid",
+        className: clsx(ImageCropper_module.grid, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperHandle = forwardRef(function ImageCropperHandle({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ImageCropper.Handle, {
-		ref,
-		"data-slot": "image-cropper-handle",
-		className: clsx(ImageCropper_module_default.handle, normalizeClassName(className)),
-		...props
-	});
+const ImageCropper_ImageCropperHandle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ImageCropper.Handle, {
+        ref: ref,
+        "data-slot": "image-cropper-handle",
+        className: clsx(ImageCropper_module.handle, normalizeClassName(className)),
+        ...props
+    });
 });
-const ImageCropperCropArea = forwardRef(function ImageCropperCropArea({ gridClassName, handleClassName, ...props }, ref) {
-	return /* @__PURE__ */ jsxs(ImageCropperSelection, {
-		ref,
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ImageCropperGrid, {
-				axis: "horizontal",
-				className: gridClassName
-			}),
-			/* @__PURE__ */ jsx(ImageCropperGrid, {
-				axis: "vertical",
-				className: gridClassName
-			}),
-			ImageCropper.handles.map((position) => /* @__PURE__ */ jsx(ImageCropperHandle, {
-				position,
-				className: handleClassName
-			}, position))
-		]
-	});
+const ImageCropper_ImageCropperCropArea = /*#__PURE__*/ forwardRef(function({ gridClassName, handleClassName, ...props }, ref) {
+    const { asChild: _asChild, children: _children, ...selectionProps } = props;
+    return /*#__PURE__*/ jsxs(ImageCropper_ImageCropperSelection, {
+        ref: ref,
+        ...selectionProps,
+        children: [
+            /*#__PURE__*/ jsx(ImageCropper_ImageCropperGrid, {
+                axis: "horizontal",
+                className: gridClassName
+            }),
+            /*#__PURE__*/ jsx(ImageCropper_ImageCropperGrid, {
+                axis: "vertical",
+                className: gridClassName
+            }),
+            ImageCropper.handles.map((position)=>/*#__PURE__*/ jsx(ImageCropper_ImageCropperHandle, {
+                    position: position,
+                    className: handleClassName
+                }, position))
+        ]
+    });
 });
-const ImageCropper$1 = Object.assign(ImageCropperRoot, {
-	Root: ImageCropperRoot,
-	RootProvider: ImageCropperRootProvider,
-	Context: ImageCropper.Context,
-	Viewport: ImageCropperViewport,
-	Image: ImageCropperImage,
-	Selection: ImageCropperSelection,
-	Grid: ImageCropperGrid,
-	Handle: ImageCropperHandle,
-	CropArea: ImageCropperCropArea,
-	handles: ImageCropper.handles
+const ImageCropper_ImageCropper = Object.assign(ImageCropper_ImageCropperRoot, {
+    Root: ImageCropper_ImageCropperRoot,
+    RootProvider: ImageCropper_ImageCropperRootProvider,
+    Context: ImageCropper.Context,
+    Viewport: ImageCropper_ImageCropperViewport,
+    Image: ImageCropper_ImageCropperImage,
+    Selection: ImageCropper_ImageCropperSelection,
+    Grid: ImageCropper_ImageCropperGrid,
+    Handle: ImageCropper_ImageCropperHandle,
+    CropArea: ImageCropper_ImageCropperCropArea,
+    handles: ImageCropper.handles
 });
-//#endregion
-export { ImageCropper$1 as ImageCropper, useImageCropper };
+export { ImageCropper_ImageCropper as ImageCropper, useImageCropper, useImageCropperContext };

package/dist/components/image-cropper/ImageCropper.module.js

@@ -1,12 +1,10 @@
-import './ImageCropper.css';
-//#region src/components/image-cropper/ImageCropper.module.css
-var ImageCropper_module_default = {
-	"grid": "Bk909a_grid",
-	"handle": "Bk909a_handle",
-	"image": "Bk909a_image",
-	"root": "Bk909a_root",
-	"selection": "Bk909a_selection",
-	"viewport": "Bk909a_viewport"
+import "./ImageCropper_module.css";
+const ImageCropper_module = {
+    root: "root-nC08p2",
+    viewport: "viewport-PRSc53",
+    image: "image-FoPSOC",
+    selection: "selection-aUs9kH",
+    grid: "grid-LmzoH9",
+    handle: "handle-qbAAS1"
 };
-//#endregion
-export { ImageCropper_module_default as default };
+export default ImageCropper_module;

package/dist/components/image-cropper/{ImageCropper.css → ImageCropper_module.css}

@@ -1,21 +1,23 @@
 @layer moduix.components {
-  .Bk909a_root {
+  .root-nC08p2 {
+    --moduix-image-cropper-viewport-height: min(var(--moduix-image-cropper-viewport-min-height, 20rem),
+      62.5vw);
     box-sizing: border-box;
     width: var(--moduix-image-cropper-width, 32rem);
     max-width: var(--moduix-image-cropper-max-width, 100%);
     gap: var(--moduix-image-cropper-gap, var(--moduix-spacing-3));
     color: var(--moduix-image-cropper-color, var(--moduix-color-foreground));
     display: grid;
+  }
 
-    &[data-dragging], &[data-panning] {
-      cursor: grabbing;
-    }
+  .root-nC08p2[data-dragging], .root-nC08p2[data-panning] {
+    cursor: grabbing;
   }
 
-  .Bk909a_viewport {
+  .viewport-PRSc53 {
     box-sizing: border-box;
     width: 100%;
-    height: var(--moduix-image-cropper-viewport-height, var(--moduix-image-cropper-viewport-min-height, 20rem));
+    height: var(--moduix-image-cropper-viewport-height);
     border: var(--moduix-image-cropper-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-image-cropper-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-image-cropper-radius, var(--moduix-radius-lg));
@@ -49,13 +51,13 @@
         var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4));
     box-shadow: var(--moduix-image-cropper-shadow, none);
     overflow: hidden;
+  }
 
-    &[data-disabled] {
-      cursor: default;
-    }
+  .viewport-PRSc53[data-disabled] {
+    cursor: grab;
   }
 
-  .Bk909a_image {
+  .image-FoPSOC {
     object-fit: contain;
     transform-origin: center;
     backface-visibility: hidden;
@@ -66,8 +68,8 @@
     inset: 0;
   }
 
-  .Bk909a_selection {
-    box-sizing: content-box;
+  .selection-aUs9kH {
+    box-sizing: border-box;
     border: var(--moduix-image-cropper-selection-border-width, var(--moduix-border-width-md)) solid
       var(--moduix-image-cropper-selection-border-color, var(--moduix-color-primary));
     border-radius: var(--moduix-image-cropper-selection-radius, var(--moduix-radius-md));
@@ -79,45 +81,46 @@
     transition: border-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
       box-shadow var(--moduix-image-cropper-transition, var(--moduix-transition-default));
     outline: 0;
+  }
 
-    &[data-shape="circle"] {
-      border-radius: var(--moduix-image-cropper-selection-circle-radius, var(--moduix-radius-full));
-    }
+  .selection-aUs9kH[data-shape="circle"] {
+    border-radius: var(--moduix-image-cropper-selection-circle-radius, var(--moduix-radius-full));
+    border-color: #0000;
+  }
 
-    &:focus-visible {
-      box-shadow: 0 0 0 9999px var(--moduix-image-cropper-selection-overlay-bg, #00000073),
+  .selection-aUs9kH:focus-visible {
+    box-shadow: 0 0 0 9999px var(--moduix-image-cropper-selection-overlay-bg, #00000073),
         inset 0 0 0
           var(--moduix-image-cropper-selection-inner-border-width, var(--moduix-border-width-sm))
           var(--moduix-image-cropper-selection-inner-border-color, #ffffffa3),
         0 0 0
           var(--moduix-image-cropper-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
           var(--moduix-image-cropper-focus-ring-color, var(--moduix-color-ring));
-    }
+  }
 
-    &[data-dragging] {
-      cursor: grabbing;
-    }
+  .selection-aUs9kH[data-dragging] {
+    cursor: grabbing;
+  }
 
-    &[data-disabled] {
-      cursor: default;
-    }
+  .selection-aUs9kH[data-disabled] {
+    cursor: default;
   }
 
-  .Bk909a_grid {
+  .grid-LmzoH9 {
     pointer-events: none;
+  }
 
-    &[data-axis="horizontal"] {
-      border-block: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid
+  .grid-LmzoH9[data-axis="horizontal"] {
+    border-block: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid
         var(--moduix-image-cropper-grid-color, #ffffff9e);
-    }
+  }
 
-    &[data-axis="vertical"] {
-      border-inline: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid
+  .grid-LmzoH9[data-axis="vertical"] {
+    border-inline: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid
         var(--moduix-image-cropper-grid-color, #ffffff9e);
-    }
   }
 
-  .Bk909a_handle {
+  .handle-qbAAS1 {
     z-index: 1;
     box-sizing: border-box;
     width: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3));
@@ -132,23 +135,29 @@
       box-shadow var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
       opacity var(--moduix-image-cropper-transition, var(--moduix-transition-default));
     position: absolute;
+  }
+
+  .handle-qbAAS1[data-position="n"], .handle-qbAAS1[data-position="s"] {
+    height: var(--moduix-image-cropper-handle-edge-thickness, .2rem);
+    border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full));
+    border-width: 0;
+    width: 100% !important;
+  }
 
-    &[data-position="n"], &[data-position="s"] {
-      height: var(--moduix-image-cropper-handle-edge-thickness, .2rem);
-      border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full));
-      border-width: 0;
-      width: 100% !important;
-    }
+  .handle-qbAAS1[data-position="e"], .handle-qbAAS1[data-position="w"] {
+    width: var(--moduix-image-cropper-handle-edge-thickness, .2rem);
+    border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full));
+    border-width: 0;
+    height: 100% !important;
+  }
 
-    &[data-position="e"], &[data-position="w"] {
-      width: var(--moduix-image-cropper-handle-edge-thickness, .2rem);
-      border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full));
-      border-width: 0;
-      height: 100% !important;
-    }
+  .handle-qbAAS1[data-position="nw"], .handle-qbAAS1[data-position="ne"], .handle-qbAAS1[data-position="se"], .handle-qbAAS1[data-position="sw"] {
+    z-index: 2;
+    background-color: #fff;
+  }
 
-    &[data-disabled] {
-      display: none;
-    }
+  .handle-qbAAS1[data-disabled] {
+    display: none;
   }
 }
+

package/dist/components/image-cropper/index.d.ts

@@ -1,2 +1 @@
-import { ImageCropper, useImageCropper } from "./ImageCropper.js";
-export { ImageCropper, useImageCropper };
+export { ImageCropper, useImageCropper, useImageCropperContext } from './ImageCropper.js';

package/dist/components/image-cropper/index.js

@@ -0,0 +1 @@
+export { ImageCropper, useImageCropper, useImageCropperContext } from "./ImageCropper.js";

package/dist/components/input/Input.d.ts

@@ -1,15 +1,12 @@
-import { ComponentProps } from "react";
-import { Field } from "@ark-ui/react/field";
-
-//#region src/components/input/Input.d.ts
-declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<Field.InputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  htmlSize?: ComponentProps<"input">["size"];
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Omit<Field.InputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
+import { Field as FieldPrimitive } from '@ark-ui/react/field';
+import type { ComponentProps } from 'react';
+declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<FieldPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     htmlSize?: ComponentProps<"input">["size"];
-  }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<Omit<FieldPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        htmlSize?: ComponentProps<"input">["size"];
+    }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
-//#endregion
-export { Input };
+export { Input };

package/dist/components/input/Input.js

@@ -1,22 +1,23 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Input_module_default from "./Input.module.js";
-import { clsx } from "clsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
-//#region src/components/input/Input.tsx
-const InputRoot = forwardRef(function InputRoot({ className, size = "md", htmlSize, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Field.Input, {
-		ref,
-		"data-scope": "field",
-		"data-part": "input",
-		"data-slot": "input-root",
-		"data-size": size,
-		className: clsx(Input_module_default.root, normalizeClassName(className)),
-		size: htmlSize,
-		...props
-	});
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Input_module from "./Input.module.js";
+const Input_InputRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', htmlSize, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Field.Input, {
+        ...props,
+        ref: ref,
+        "data-scope": "field",
+        "data-part": "input",
+        "data-slot": "input-root",
+        "data-size": size,
+        "data-html-size": void 0 === htmlSize ? void 0 : '',
+        className: clsx(Input_module.root, normalizeClassName(className)),
+        size: htmlSize
+    });
+});
+const Input = Object.assign(Input_InputRoot, {
+    Root: Input_InputRoot
 });
-const Input = Object.assign(InputRoot, { Root: InputRoot });
-//#endregion
 export { Input };

package/dist/components/input/Input.module.js

@@ -1,5 +1,5 @@
-import './Input.css';
-//#region src/components/input/Input.module.css
-var Input_module_default = { "root": "wmyYha_root" };
-//#endregion
-export { Input_module_default as default };
+import "./Input_module.css";
+const Input_module = {
+    root: "root-cSSoZX"
+};
+export default Input_module;

package/dist/components/input/Input_module.css

@@ -0,0 +1,110 @@
+@layer moduix.components {
+  .root-cSSoZX {
+    box-sizing: border-box;
+    width: var(--moduix-input-width, var(--moduix-input-default-width, 100%));
+    max-width: var(--moduix-input-max-width, none);
+    min-height: var(--moduix-input-height, var(--moduix-input-height-md, var(--moduix-size-md)));
+    border: var(--moduix-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-input-border-style, solid)
+      var(--moduix-input-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-input-radius, var(--moduix-radius-md));
+    padding: var(--moduix-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1)))
+      var(--moduix-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3)));
+    background-color: var(--moduix-input-bg, var(--moduix-color-background));
+    color: var(--moduix-input-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md)));
+    line-height: var(--moduix-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md)));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+      solid transparent;
+    outline-offset: var(--moduix-input-focus-ring-offset, calc(0px - var(--moduix-input-border-width, var(--moduix-border-width-sm))));
+    transition: border-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-input-transition, var(--moduix-transition-default));
+    margin: 0;
+  }
+
+  .root-cSSoZX::placeholder {
+    color: var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .root-cSSoZX::file-selector-button {
+    border: var(--moduix-button-border-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-button-default-border-color, var(--moduix-color-primary));
+    border-radius: var(--moduix-button-radius, var(--moduix-radius-md));
+    padding: var(--moduix-spacing-0-5) var(--moduix-spacing-2);
+    background-color: var(--moduix-button-default-bg, var(--moduix-color-primary));
+    color: var(--moduix-button-default-color, var(--moduix-color-primary-foreground));
+    font: inherit;
+    font-weight: var(--moduix-button-font-weight, var(--moduix-weight-medium));
+    line-height: inherit;
+    cursor: pointer;
+    transition: background-color var(--moduix-input-transition, var(--moduix-transition-default));
+    margin-inline-end: var(--moduix-spacing-3);
+  }
+
+  @media (hover: hover) {
+    .root-cSSoZX::file-selector-button:hover {
+      background-color: var(--moduix-button-default-bg-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .root-cSSoZX[data-html-size] {
+    --moduix-input-default-width: auto;
+  }
+
+  .root-cSSoZX:focus-visible {
+    outline-color: var(--moduix-input-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .root-cSSoZX:is([data-invalid], [aria-invalid="true"]) {
+    border-color: var(--moduix-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .root-cSSoZX:is([data-invalid], [aria-invalid="true"]):focus-visible {
+    outline-color: var(--moduix-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .root-cSSoZX:is([data-disabled], :disabled) {
+    pointer-events: none;
+    opacity: var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .root-cSSoZX:is(:read-only, [data-readonly]) {
+    background-color: var(--moduix-input-readonly-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-input-readonly-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+  }
+
+  .root-cSSoZX[data-size="xs"] {
+    --moduix-input-height: var(--moduix-input-height-xs, var(--moduix-size-xs));
+    --moduix-input-padding-x: var(--moduix-input-padding-x-xs, var(--moduix-spacing-2));
+    --moduix-input-padding-y: var(--moduix-input-padding-y-xs, var(--moduix-spacing-0-5));
+    --moduix-input-font-size: var(--moduix-input-font-size-xs, var(--moduix-text-xs));
+    --moduix-input-line-height: var(--moduix-input-line-height-xs, var(--moduix-line-height-text-xs));
+  }
+
+  .root-cSSoZX[data-size="sm"] {
+    --moduix-input-height: var(--moduix-input-height-sm, var(--moduix-size-sm));
+    --moduix-input-padding-x: var(--moduix-input-padding-x-sm, var(--moduix-spacing-2));
+    --moduix-input-padding-y: var(--moduix-input-padding-y-sm, var(--moduix-spacing-1));
+    --moduix-input-font-size: var(--moduix-input-font-size-sm, var(--moduix-text-sm));
+    --moduix-input-line-height: var(--moduix-input-line-height-sm, var(--moduix-line-height-text-sm));
+  }
+
+  .root-cSSoZX[data-size="lg"] {
+    --moduix-input-height: var(--moduix-input-height-lg, var(--moduix-size-lg));
+    --moduix-input-padding-x: var(--moduix-input-padding-x-lg, var(--moduix-spacing-4));
+    --moduix-input-padding-y: var(--moduix-input-padding-y-lg, var(--moduix-spacing-1));
+    --moduix-input-font-size: var(--moduix-input-font-size-lg, var(--moduix-text-lg));
+    --moduix-input-line-height: var(--moduix-input-line-height-lg, var(--moduix-line-height-text-lg));
+  }
+
+  .root-cSSoZX[data-size="xl"] {
+    --moduix-input-height: var(--moduix-input-height-xl, var(--moduix-size-xl));
+    --moduix-input-padding-x: var(--moduix-input-padding-x-xl, var(--moduix-spacing-4));
+    --moduix-input-padding-y: var(--moduix-input-padding-y-xl, var(--moduix-spacing-2));
+    --moduix-input-font-size: var(--moduix-input-font-size-xl, var(--moduix-text-lg));
+    --moduix-input-line-height: var(--moduix-input-line-height-xl, var(--moduix-line-height-text-lg));
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Input } from "./Input.js";
-export { Input };
+export { Input } from './Input.js';

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { Input } from "./Input.js";