@moduix/solid-tailwind 1.0.0

package/dist/components/hover-card/HoverCard.jsx

@@ -0,0 +1,89 @@
+import { ark } from "@ark-ui/solid/factory";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/solid/hover-card";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+function HoverCardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <HoverCard.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </HoverCard.Root>
+    </OverlayPortalProvider>;
+}
+function HoverCardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <HoverCard.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </HoverCard.RootProvider>
+    </OverlayPortalProvider>;
+}
+function HoverCardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <HoverCard.Trigger asChild={local.asChild} data-slot="hover-card-trigger" class={cn(!local.asChild && 'inline-flex cursor-pointer items-center gap-1 text-primary underline decoration-primary/60 decoration-1 underline-offset-2 outline-0 transition-[color,text-decoration-color] duration-150 ease-in-out focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:decoration-primary motion-reduce:transition-none [@media(hover:hover)]:hover:decoration-primary', local.class)} {...others}/>;
+}
+function HoverCardPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <HoverCard.Positioner data-slot="hover-card-positioner" class={cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function HoverCardContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <HoverCard.Content data-slot="hover-card-content" class={cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(24rem,var(--available-width))] min-w-[min(14rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-lg border border-border bg-popover p-2 wrap-anywhere text-popover-foreground shadow-lg outline-0 has-[>[data-slot=hover-card-body]]:flex has-[>[data-slot=hover-card-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=hover-card-body]]:[&>[data-slot=hover-card-body]]:overflow-auto', local.class)} {...others}/>;
+}
+function HoverCardArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <HoverCard.Arrow data-slot="hover-card-arrow" class={cn('[--arrow-background:var(--color-popover)] [--arrow-shadow-color:var(--color-border)] [--arrow-size:0.625rem]', local.class)} {...others}>
+      {resolvedChildren() ?? <HoverCardArrowTip/>}
+    </HoverCard.Arrow>;
+}
+function HoverCardArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <HoverCard.ArrowTip data-slot="hover-card-arrow-tip" class={cn('border-t border-l border-border', local.class)} {...others}/>;
+}
+function HoverCardBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-slot="hover-card-body" class={cn('min-h-0', local.class)} {...others}/>;
+}
+const HoverCard_HoverCard = Object.assign(HoverCardRoot, {
+    Root: HoverCardRoot,
+    RootProvider: HoverCardRootProvider,
+    Trigger: HoverCardTrigger,
+    Positioner: HoverCardPositioner,
+    Content: HoverCardContent,
+    Arrow: HoverCardArrow,
+    ArrowTip: HoverCardArrowTip,
+    Body: HoverCardBody,
+    Context: HoverCard.Context
+});
+export { HoverCard_HoverCard as HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/hover-card/index.d.ts

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

package/dist/components/hover-card/index.js

@@ -0,0 +1 @@
+export * from "./HoverCard.js";

package/dist/components/hover-card/index.jsx

@@ -0,0 +1 @@
+export * from "./HoverCard.jsx";

package/dist/components/image/Image.d.ts

@@ -0,0 +1,14 @@
+import type { UnpicImageProps, UnpicSourceProps } from '@unpic/core';
+import type { JSX } from 'solid-js';
+type ImageProps = Omit<UnpicImageProps<JSX.ImgHTMLAttributes<HTMLImageElement>>, 'fetchpriority'> & {
+    fetchpriority?: JSX.ImgHTMLAttributes<HTMLImageElement>['fetchpriority'];
+    style?: JSX.ImgHTMLAttributes<HTMLImageElement>['style'];
+};
+type ImageSourceProps = UnpicSourceProps & Omit<JSX.SourceHTMLAttributes<HTMLSourceElement>, 'height' | 'media' | 'sizes' | 'src' | 'srcset' | 'type' | 'width'>;
+declare function ImageRoot(props: ImageProps): JSX.Element;
+declare function ImageSource(props: ImageSourceProps): JSX.Element;
+declare const Image: typeof ImageRoot & {
+    Root: typeof ImageRoot;
+    Source: typeof ImageSource;
+};
+export { Image };

package/dist/components/image/Image.js

@@ -0,0 +1,53 @@
+import { mergeProps, spread, template } from "solid-js/web";
+import { transformProps, transformSourceProps } from "@unpic/core";
+import { createMemo, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+var _tmpl$ = /*#__PURE__*/ template("<img>"), _tmpl$2 = /*#__PURE__*/ template("<source>");
+function ImageRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fetchpriority'
+    ]);
+    const imageProps = createMemo(()=>{
+        const transformed = transformProps({
+            ...others
+        });
+        return void 0 === local.fetchpriority ? transformed : {
+            ...transformed,
+            fetchpriority: local.fetchpriority
+        };
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(imageProps, {
+            "data-slot": "image-root",
+            get ["class"] () {
+                return cn('rounded-md', local.class);
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+function ImageSource(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const sourceProps = createMemo(()=>transformSourceProps({
+            ...others
+        }));
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(sourceProps, {
+            "data-slot": "image-source",
+            get ["class"] () {
+                return local.class;
+            }
+        }), false, false);
+        return _el$2;
+    })();
+}
+const Image = Object.assign(ImageRoot, {
+    Root: ImageRoot,
+    Source: ImageSource
+});
+export { Image };

package/dist/components/image/Image.jsx

@@ -0,0 +1,33 @@
+import { transformProps, transformSourceProps } from "@unpic/core";
+import { createMemo, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function ImageRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fetchpriority'
+    ]);
+    const imageProps = createMemo(()=>{
+        const transformed = transformProps({
+            ...others
+        });
+        return void 0 === local.fetchpriority ? transformed : {
+            ...transformed,
+            fetchpriority: local.fetchpriority
+        };
+    });
+    return <img {...imageProps()} data-slot="image-root" class={cn('rounded-md', local.class)}/>;
+}
+function ImageSource(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const sourceProps = createMemo(()=>transformSourceProps({
+            ...others
+        }));
+    return <source {...sourceProps()} data-slot="image-source" class={local.class}/>;
+}
+const Image = Object.assign(ImageRoot, {
+    Root: ImageRoot,
+    Source: ImageSource
+});
+export { Image };

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

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

package/dist/components/image/index.js

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

package/dist/components/image/index.jsx

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

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

@@ -0,0 +1,27 @@
+import { ImageCropper as ImageCropperPrimitive, useImageCropper, useImageCropperContext } from '@ark-ui/solid/image-cropper';
+import type { ComponentProps } from 'solid-js';
+declare function ImageCropperRoot(props: ComponentProps<typeof ImageCropperPrimitive.Root>): import("solid-js").JSX.Element;
+declare function ImageCropperRootProvider(props: ComponentProps<typeof ImageCropperPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function ImageCropperViewport(props: ComponentProps<typeof ImageCropperPrimitive.Viewport>): import("solid-js").JSX.Element;
+declare function ImageCropperImage(props: ComponentProps<typeof ImageCropperPrimitive.Image>): import("solid-js").JSX.Element;
+declare function ImageCropperSelection(props: ComponentProps<typeof ImageCropperPrimitive.Selection>): import("solid-js").JSX.Element;
+declare function ImageCropperGrid(props: ComponentProps<typeof ImageCropperPrimitive.Grid>): import("solid-js").JSX.Element;
+declare function ImageCropperHandle(props: ComponentProps<typeof ImageCropperPrimitive.Handle>): import("solid-js").JSX.Element;
+type ImageCropperCropAreaProps = Omit<ComponentProps<typeof ImageCropperPrimitive.Selection>, 'asChild' | 'children'> & {
+    gridClassName?: string;
+    handleClassName?: string;
+};
+declare function ImageCropperCropArea(props: ImageCropperCropAreaProps): import("solid-js").JSX.Element;
+declare const ImageCropper: typeof ImageCropperRoot & {
+    Root: typeof ImageCropperRoot;
+    RootProvider: typeof ImageCropperRootProvider;
+    Context: (props: ImageCropperPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Viewport: typeof ImageCropperViewport;
+    Image: typeof ImageCropperImage;
+    Selection: typeof ImageCropperSelection;
+    Grid: typeof ImageCropperGrid;
+    Handle: typeof ImageCropperHandle;
+    CropArea: typeof ImageCropperCropArea;
+    handles: import("@ark-ui/solid").ImageCropperHandlePosition[];
+};
+export { ImageCropper, useImageCropper, useImageCropperContext };

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

@@ -0,0 +1,131 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ImageCropper, useImageCropper, useImageCropperContext } from "@ark-ui/solid/image-cropper";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function ImageCropperRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ImageCropper.Root, mergeProps({
+        "data-slot": "image-cropper-root",
+        get ["class"] () {
+            return cn('box-border grid w-[32rem] max-w-full gap-3 text-foreground data-dragging:cursor-grabbing data-panning:cursor-grabbing', 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 cn('box-border grid w-[32rem] max-w-full gap-3 text-foreground data-dragging:cursor-grabbing data-panning:cursor-grabbing', 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 cn('box-border h-[min(20rem,62.5vw)] w-full overflow-hidden rounded-lg border border-border bg-background bg-[conic-gradient(rgb(0_0_0_/_8%)_25%,transparent_0_50%,rgb(0_0_0_/_8%)_0_75%,transparent_0)] [background-size:1rem_1rem] shadow-none data-disabled:cursor-grab', 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 cn('absolute inset-0 block size-full origin-center object-contain backface-hidden', 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 cn('box-border cursor-grab rounded-md border-2 border-primary shadow-[0_0_0_9999px_rgb(0_0_0_/_45%),inset_0_0_0_1px_rgb(255_255_255_/_64%)] outline-0 transition-[border-color,box-shadow] duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-default data-dragging:cursor-grabbing data-[shape=circle]:rounded-full data-[shape=circle]:border-transparent motion-reduce:transition-none', 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 cn('pointer-events-none data-[axis=horizontal]:border-y data-[axis=horizontal]:border-white/62 data-[axis=vertical]:border-x data-[axis=vertical]:border-white/62', 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 cn('absolute z-1 box-border size-3 rounded-xs border border-white/88 bg-white/96 shadow-[0_1px_3px_rgb(15_23_42_/_18%)] transition-[border-color,background-color,box-shadow,opacity] duration-200 ease-in-out data-disabled:hidden data-[position=e]:!h-full data-[position=e]:!w-[0.2rem] data-[position=e]:rounded-full data-[position=e]:border-0 data-[position=n]:!h-[0.2rem] data-[position=n]:!w-full data-[position=n]:rounded-full data-[position=n]:border-0 data-[position=ne]:z-2 data-[position=nw]:z-2 data-[position=s]:!h-[0.2rem] data-[position=s]:!w-full data-[position=s]:rounded-full data-[position=s]:border-0 data-[position=se]:z-2 data-[position=sw]:z-2 data-[position=w]:!h-full data-[position=w]:!w-[0.2rem] data-[position=w]:rounded-full data-[position=w]:border-0 motion-reduce:transition-none', 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,72 @@
+import { ImageCropper, useImageCropper, useImageCropperContext } from "@ark-ui/solid/image-cropper";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function ImageCropperRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Root data-slot="image-cropper-root" class={cn('box-border grid w-[32rem] max-w-full gap-3 text-foreground data-dragging:cursor-grabbing data-panning:cursor-grabbing', local.class)} {...others}/>;
+}
+function ImageCropperRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.RootProvider data-slot="image-cropper-root-provider" class={cn('box-border grid w-[32rem] max-w-full gap-3 text-foreground data-dragging:cursor-grabbing data-panning:cursor-grabbing', local.class)} {...others}/>;
+}
+function ImageCropperViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Viewport data-slot="image-cropper-viewport" class={cn('box-border h-[min(20rem,62.5vw)] w-full overflow-hidden rounded-lg border border-border bg-background bg-[conic-gradient(rgb(0_0_0_/_8%)_25%,transparent_0_50%,rgb(0_0_0_/_8%)_0_75%,transparent_0)] [background-size:1rem_1rem] shadow-none data-disabled:cursor-grab', local.class)} {...others}/>;
+}
+function ImageCropperImage(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Image data-slot="image-cropper-image" class={cn('absolute inset-0 block size-full origin-center object-contain backface-hidden', local.class)} {...others}/>;
+}
+function ImageCropperSelection(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Selection data-slot="image-cropper-selection" class={cn('box-border cursor-grab rounded-md border-2 border-primary shadow-[0_0_0_9999px_rgb(0_0_0_/_45%),inset_0_0_0_1px_rgb(255_255_255_/_64%)] outline-0 transition-[border-color,box-shadow] duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-default data-dragging:cursor-grabbing data-[shape=circle]:rounded-full data-[shape=circle]:border-transparent motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function ImageCropperGrid(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Grid data-slot="image-cropper-grid" class={cn('pointer-events-none data-[axis=horizontal]:border-y data-[axis=horizontal]:border-white/62 data-[axis=vertical]:border-x data-[axis=vertical]:border-white/62', local.class)} {...others}/>;
+}
+function ImageCropperHandle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ImageCropper.Handle data-slot="image-cropper-handle" class={cn('absolute z-1 box-border size-3 rounded-xs border border-white/88 bg-white/96 shadow-[0_1px_3px_rgb(15_23_42_/_18%)] transition-[border-color,background-color,box-shadow,opacity] duration-200 ease-in-out data-disabled:hidden data-[position=e]:!h-full data-[position=e]:!w-[0.2rem] data-[position=e]:rounded-full data-[position=e]:border-0 data-[position=n]:!h-[0.2rem] data-[position=n]:!w-full data-[position=n]:rounded-full data-[position=n]:border-0 data-[position=ne]:z-2 data-[position=nw]:z-2 data-[position=s]:!h-[0.2rem] data-[position=s]:!w-full data-[position=s]:rounded-full data-[position=s]:border-0 data-[position=se]:z-2 data-[position=sw]:z-2 data-[position=w]:!h-full data-[position=w]:!w-[0.2rem] data-[position=w]:rounded-full data-[position=w]:border-0 motion-reduce:transition-none', 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/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from "./ImageCropper.js";

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

@@ -0,0 +1 @@
+export * 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,57 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Field } from "@ark-ui/solid/field";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const inputVariants = cva('w-full max-w-none rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive motion-reduce:transition-none file:me-3 file:rounded-md file:border file:border-primary file:bg-primary file:px-2 file:py-0.5 file:font-medium file:text-primary-foreground file:transition-colors file:duration-200 file:ease-in-out file:cursor-pointer [@media(hover:hover)]:file:hover:bg-foreground', {
+    variants: {
+        size: {
+            xs: 'min-h-control-xs px-2 py-0.5 text-xs leading-4',
+            sm: 'min-h-control-sm px-2 py-1 text-sm leading-5',
+            md: 'min-h-control-md',
+            lg: 'min-h-control-lg px-4 py-1 text-lg leading-7',
+            xl: 'min-h-control-xl px-4 py-2 text-lg leading-7'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+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 cn(inputVariants({
+                size: local.size
+            }), void 0 === local.htmlSize ? void 0 : 'w-auto', 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,36 @@
+import { Field } from "@ark-ui/solid/field";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const inputVariants = cva('w-full max-w-none rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive motion-reduce:transition-none file:me-3 file:rounded-md file:border file:border-primary file:bg-primary file:px-2 file:py-0.5 file:font-medium file:text-primary-foreground file:transition-colors file:duration-200 file:ease-in-out file:cursor-pointer [@media(hover:hover)]:file:hover:bg-foreground', {
+    variants: {
+        size: {
+            xs: 'min-h-control-xs px-2 py-0.5 text-xs leading-4',
+            sm: 'min-h-control-sm px-2 py-1 text-sm leading-5',
+            md: 'min-h-control-md',
+            lg: 'min-h-control-lg px-4 py-1 text-lg leading-7',
+            xl: 'min-h-control-xl px-4 py-2 text-lg leading-7'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+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={cn(inputVariants({
+        size: local.size
+    }), void 0 === local.htmlSize ? void 0 : 'w-auto', local.class)} size={local.htmlSize}/>;
+}
+const Input = Object.assign(InputRoot, {
+    Root: InputRoot
+});
+export { Input };

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 };