@moduix/solid 1.0.0

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

@@ -0,0 +1,132 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ImageCropper, useImageCropper, useImageCropperContext } from "@ark-ui/solid/image-cropper";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import ImageCropper_module from "./ImageCropper.module.js";
+function ImageCropperRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Root, mergeProps({
+        "data-slot": "image-cropper-root",
+        get ["class"] () {
+            return clsx(ImageCropper_module.root, local.class);
+        }
+    }, others));
+}
+function ImageCropperRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.RootProvider, mergeProps({
+        "data-slot": "image-cropper-root-provider",
+        get ["class"] () {
+            return clsx(ImageCropper_module.root, local.class);
+        }
+    }, others));
+}
+function ImageCropperViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Viewport, mergeProps({
+        "data-slot": "image-cropper-viewport",
+        get ["class"] () {
+            return clsx(ImageCropper_module.viewport, local.class);
+        }
+    }, others));
+}
+function ImageCropperImage(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Image, mergeProps({
+        "data-slot": "image-cropper-image",
+        get ["class"] () {
+            return clsx(ImageCropper_module.image, local.class);
+        }
+    }, others));
+}
+function ImageCropperSelection(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Selection, mergeProps({
+        "data-slot": "image-cropper-selection",
+        get ["class"] () {
+            return clsx(ImageCropper_module.selection, local.class);
+        }
+    }, others));
+}
+function ImageCropperGrid(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Grid, mergeProps({
+        "data-slot": "image-cropper-grid",
+        get ["class"] () {
+            return clsx(ImageCropper_module.grid, local.class);
+        }
+    }, others));
+}
+function ImageCropperHandle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Handle, mergeProps({
+        "data-slot": "image-cropper-handle",
+        get ["class"] () {
+            return clsx(ImageCropper_module.handle, local.class);
+        }
+    }, others));
+}
+function ImageCropperCropArea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'gridClassName',
+        'handleClassName'
+    ]);
+    return createComponent(ImageCropperSelection, mergeProps({
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get children () {
+            return [
+                createComponent(ImageCropperGrid, {
+                    axis: "horizontal",
+                    get ["class"] () {
+                        return local.gridClassName;
+                    }
+                }),
+                createComponent(ImageCropperGrid, {
+                    axis: "vertical",
+                    get ["class"] () {
+                        return local.gridClassName;
+                    }
+                }),
+                memo(()=>ImageCropper.handles.map((position)=>createComponent(ImageCropperHandle, {
+                            position: position,
+                            get ["class"] () {
+                                return local.handleClassName;
+                            }
+                        })))
+            ];
+        }
+    }));
+}
+const ImageCropper_ImageCropper = 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
+});
+export { ImageCropper_ImageCropper as ImageCropper, useImageCropper, useImageCropperContext };

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

@@ -0,0 +1,73 @@
+import { ImageCropper, useImageCropper, useImageCropperContext } from "@ark-ui/solid/image-cropper";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import ImageCropper_module from "./ImageCropper.module.jsx";
+function ImageCropperRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Root data-slot="image-cropper-root" class={clsx(ImageCropper_module.root, local.class)} {...others}/>;
+}
+function ImageCropperRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.RootProvider data-slot="image-cropper-root-provider" class={clsx(ImageCropper_module.root, local.class)} {...others}/>;
+}
+function ImageCropperViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Viewport data-slot="image-cropper-viewport" class={clsx(ImageCropper_module.viewport, local.class)} {...others}/>;
+}
+function ImageCropperImage(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Image data-slot="image-cropper-image" class={clsx(ImageCropper_module.image, local.class)} {...others}/>;
+}
+function ImageCropperSelection(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Selection data-slot="image-cropper-selection" class={clsx(ImageCropper_module.selection, local.class)} {...others}/>;
+}
+function ImageCropperGrid(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Grid data-slot="image-cropper-grid" class={clsx(ImageCropper_module.grid, local.class)} {...others}/>;
+}
+function ImageCropperHandle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Handle data-slot="image-cropper-handle" class={clsx(ImageCropper_module.handle, local.class)} {...others}/>;
+}
+function ImageCropperCropArea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'gridClassName',
+        'handleClassName'
+    ]);
+    return <ImageCropperSelection class={local.class} {...others}>
+      <ImageCropperGrid axis="horizontal" class={local.gridClassName}/>
+      <ImageCropperGrid axis="vertical" class={local.gridClassName}/>
+      {ImageCropper.handles.map((position)=><ImageCropperHandle position={position} class={local.handleClassName}/>)}
+    </ImageCropperSelection>;
+}
+const ImageCropper_ImageCropper = 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
+});
+export { ImageCropper_ImageCropper as ImageCropper, useImageCropper, useImageCropperContext };

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

@@ -0,0 +1,10 @@
+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"
+};
+export default ImageCropper_module;

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

@@ -0,0 +1,10 @@
+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"
+};
+export default ImageCropper_module;

package/dist/components/image-cropper/ImageCropper_module.css

@@ -0,0 +1,162 @@
+@layer moduix.components {
+  .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;
+  }
+
+  .root-nC08p2[data-dragging], .root-nC08p2[data-panning] {
+    cursor: grabbing;
+  }
+
+  .viewport-PRSc53 {
+    box-sizing: border-box;
+    width: 100%;
+    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));
+    background: linear-gradient(45deg,
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
+            25%,
+          transparent 25%)
+        0 0 / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)),
+      linear-gradient(45deg,
+          transparent 75%,
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
+            75%)
+        0 0 / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)),
+      linear-gradient(45deg,
+          transparent 75%,
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
+            75%)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) /
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)),
+      linear-gradient(45deg,
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
+            25%,
+          var(--moduix-image-cropper-viewport-bg, var(--moduix-color-background)) 25%)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) /
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4));
+    box-shadow: var(--moduix-image-cropper-shadow, none);
+    overflow: hidden;
+  }
+
+  .viewport-PRSc53[data-disabled] {
+    cursor: grab;
+  }
+
+  .image-FoPSOC {
+    object-fit: contain;
+    transform-origin: center;
+    backface-visibility: hidden;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+
+  .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));
+    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);
+    cursor: grab;
+    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;
+  }
+
+  .selection-aUs9kH[data-shape="circle"] {
+    border-radius: var(--moduix-image-cropper-selection-circle-radius, var(--moduix-radius-full));
+    border-color: #0000;
+  }
+
+  .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));
+  }
+
+  .selection-aUs9kH[data-dragging] {
+    cursor: grabbing;
+  }
+
+  .selection-aUs9kH[data-disabled] {
+    cursor: default;
+  }
+
+  .grid-LmzoH9 {
+    pointer-events: none;
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .handle-qbAAS1 {
+    z-index: 1;
+    box-sizing: border-box;
+    width: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3));
+    height: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3));
+    border: var(--moduix-image-cropper-handle-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-image-cropper-handle-border-color, #ffffffe0);
+    border-radius: var(--moduix-image-cropper-handle-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-image-cropper-handle-bg, #fffffff5);
+    box-shadow: var(--moduix-image-cropper-handle-shadow, 0 1px 3px #0f172a2e);
+    transition: border-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
+      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;
+  }
+
+  .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;
+  }
+
+  .handle-qbAAS1[data-position="nw"], .handle-qbAAS1[data-position="ne"], .handle-qbAAS1[data-position="se"], .handle-qbAAS1[data-position="sw"] {
+    z-index: 2;
+  }
+
+  .handle-qbAAS1[data-disabled] {
+    display: none;
+  }
+}
+

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

@@ -0,0 +1 @@
+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/image-cropper/index.jsx

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

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

@@ -0,0 +1,13 @@
+import type { FieldInputProps } from '@ark-ui/solid/field';
+type InputRootProps = Omit<FieldInputProps, 'size'> & {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    htmlSize?: FieldInputProps['size'];
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+declare function InputRoot(props: InputRootProps): import("solid-js").JSX.Element;
+declare const Input: typeof InputRoot & {
+    Root: typeof InputRoot;
+};
+export { Input };

package/dist/components/input/Input.js

@@ -0,0 +1,41 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Field } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Input_module from "./Input.module.js";
+function InputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'htmlSize',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(Field.Input, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "field",
+        "data-part": "input",
+        "data-slot": "input-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-html-size"] () {
+            return void 0 === local.htmlSize ? void 0 : '';
+        },
+        get ["class"] () {
+            return clsx(Input_module.root, local.class);
+        },
+        get size () {
+            return local.htmlSize;
+        }
+    }));
+}
+const Input = Object.assign(InputRoot, {
+    Root: InputRoot
+});
+export { Input };

package/dist/components/input/Input.jsx

@@ -0,0 +1,20 @@
+import { Field } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Input_module from "./Input.module.jsx";
+function InputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'htmlSize',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <Field.Input asChild={local.asChild} {...others} data-scope="field" data-part="input" data-slot="input-root" data-size={local.size ?? 'md'} data-html-size={void 0 === local.htmlSize ? void 0 : ''} class={clsx(Input_module.root, local.class)} size={local.htmlSize}/>;
+}
+const Input = Object.assign(InputRoot, {
+    Root: InputRoot
+});
+export { Input };

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

@@ -0,0 +1,5 @@
+import "./Input_module.css";
+const Input_module = {
+    root: "root-cSSoZX"
+};
+export default Input_module;

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

@@ -0,0 +1,5 @@
+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(--_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] {
+    --_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

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

package/dist/components/input/index.js

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

package/dist/components/input/index.jsx

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

package/dist/components/input-group/InputGroup.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+import { Button } from '../button/index.js';
+import { Input } from '../input/index.js';
+type InputGroupSize = NonNullable<ComponentProps<typeof Input>['size']>;
+type InputGroupDataProps = {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+type InputGroupRootProps = HTMLArkProps<'div'> & InputGroupDataProps & {
+    size?: InputGroupSize;
+    'data-size'?: string;
+};
+declare function InputGroupRoot(props: InputGroupRootProps): import("solid-js").JSX.Element;
+declare function InputGroupInput(props: ComponentProps<typeof Input>): import("solid-js").JSX.Element;
+declare function InputGroupAddon(props: HTMLArkProps<'span'> & InputGroupDataProps): import("solid-js").JSX.Element;
+declare function InputGroupText(props: HTMLArkProps<'span'> & InputGroupDataProps): import("solid-js").JSX.Element;
+declare function InputGroupButton(props: ComponentProps<typeof Button>): import("solid-js").JSX.Element;
+declare const InputGroup: typeof InputGroupRoot & {
+    Root: typeof InputGroupRoot;
+    Input: typeof InputGroupInput;
+    Addon: typeof InputGroupAddon;
+    Text: typeof InputGroupText;
+    Button: typeof InputGroupButton;
+};
+export { InputGroup };