@moduix/solid-tailwind 1.0.0

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,218 @@
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Pagination, usePagination, usePaginationContext } from "@ark-ui/solid/pagination";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template('<span class="inline-flex items-center justify-center [&amp;_svg+svg]:-ms-2"aria-hidden>');
+function PaginationRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Pagination.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-root",
+        get ["class"] () {
+            return cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function PaginationRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Pagination.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-root-provider",
+        get ["class"] () {
+            return cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function PaginationItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Pagination.Item, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-item",
+        get ["class"] () {
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class);
+        }
+    }, others));
+}
+function PaginationEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.Ellipsis, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-ellipsis",
+        get ["class"] () {
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && '...');
+        }
+    }));
+}
+function EdgeIcon(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>'left' === props.side);
+            return ()=>_c$() ? createComponent(ChevronLeftIcon, {}) : createComponent(ChevronRightIcon, {});
+        })(), null);
+        insert(_el$, (()=>{
+            var _c$2 = memo(()=>'left' === props.side);
+            return ()=>_c$2() ? createComponent(ChevronLeftIcon, {}) : createComponent(ChevronRightIcon, {});
+        })(), null);
+        return _el$;
+    })();
+}
+function PaginationPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.PrevTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-prev-trigger",
+        get ["class"] () {
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(ChevronLeftIcon, {}));
+        }
+    }));
+}
+function PaginationNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.NextTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-next-trigger",
+        get ["class"] () {
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(ChevronRightIcon, {}));
+        }
+    }));
+}
+function PaginationFirstTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.FirstTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-first-trigger",
+        get ["class"] () {
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(EdgeIcon, {
+                side: "left"
+            }));
+        }
+    }));
+}
+function PaginationLastTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.LastTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-last-trigger",
+        get ["class"] () {
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(EdgeIcon, {
+                side: "right"
+            }));
+        }
+    }));
+}
+const PaginationContext = Pagination.Context;
+function PaginationItems() {
+    return createComponent(PaginationContext, {
+        children: (pagination)=>createComponent(For, {
+                get each () {
+                    return pagination().pages;
+                },
+                children: (page, index)=>'page' === page.type ? createComponent(PaginationItem, mergeProps(page, {
+                        get children () {
+                            return page.value;
+                        }
+                    })) : createComponent(PaginationEllipsis, {
+                        get index () {
+                            return index();
+                        }
+                    })
+            })
+    });
+}
+const Pagination_Pagination = Object.assign(PaginationRoot, {
+    Root: PaginationRoot,
+    RootProvider: PaginationRootProvider,
+    Item: PaginationItem,
+    Ellipsis: PaginationEllipsis,
+    PrevTrigger: PaginationPrevTrigger,
+    NextTrigger: PaginationNextTrigger,
+    FirstTrigger: PaginationFirstTrigger,
+    LastTrigger: PaginationLastTrigger,
+    Context: PaginationContext,
+    Items: PaginationItems,
+    usePagination: usePagination,
+    usePaginationContext: usePaginationContext
+});
+export { Pagination_Pagination as Pagination, usePagination, usePaginationContext };

package/dist/components/pagination/Pagination.jsx

@@ -0,0 +1,115 @@
+import { Pagination, usePagination, usePaginationContext } from "@ark-ui/solid/pagination";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.jsx";
+function PaginationRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Pagination.Root asChild={local.asChild} data-slot="pagination-root" class={cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class)} {...others}>
+      {local.children}
+    </Pagination.Root>;
+}
+function PaginationRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Pagination.RootProvider asChild={local.asChild} data-slot="pagination-root-provider" class={cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class)} {...others}>
+      {local.children}
+    </Pagination.RootProvider>;
+}
+function PaginationItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Pagination.Item asChild={local.asChild} data-slot="pagination-item" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+}
+function PaginationEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.Ellipsis asChild={local.asChild} data-slot="pagination-ellipsis" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && '...')}
+    </Pagination.Ellipsis>;
+}
+function EdgeIcon(props) {
+    return <span class="inline-flex items-center justify-center [&_svg+svg]:-ms-2" aria-hidden>
+      {'left' === props.side ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
+      {'left' === props.side ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
+    </span>;
+}
+function PaginationPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.PrevTrigger asChild={local.asChild} data-slot="pagination-prev-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <ChevronLeftIcon/>)}
+    </Pagination.PrevTrigger>;
+}
+function PaginationNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.NextTrigger asChild={local.asChild} data-slot="pagination-next-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <ChevronRightIcon/>)}
+    </Pagination.NextTrigger>;
+}
+function PaginationFirstTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.FirstTrigger asChild={local.asChild} data-slot="pagination-first-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="left"/>)}
+    </Pagination.FirstTrigger>;
+}
+function PaginationLastTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.LastTrigger asChild={local.asChild} data-slot="pagination-last-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="right"/>)}
+    </Pagination.LastTrigger>;
+}
+const PaginationContext = Pagination.Context;
+function PaginationItems() {
+    return <PaginationContext>
+      {(pagination)=><For each={pagination().pages}>
+          {(page, index)=>'page' === page.type ? <PaginationItem {...page}>{page.value}</PaginationItem> : <PaginationEllipsis index={index()}/>}
+        </For>}
+    </PaginationContext>;
+}
+const Pagination_Pagination = Object.assign(PaginationRoot, {
+    Root: PaginationRoot,
+    RootProvider: PaginationRootProvider,
+    Item: PaginationItem,
+    Ellipsis: PaginationEllipsis,
+    PrevTrigger: PaginationPrevTrigger,
+    NextTrigger: PaginationNextTrigger,
+    FirstTrigger: PaginationFirstTrigger,
+    LastTrigger: PaginationLastTrigger,
+    Context: PaginationContext,
+    Items: PaginationItems,
+    usePagination: usePagination,
+    usePaginationContext: usePaginationContext
+});
+export { Pagination_Pagination as Pagination, usePagination, usePaginationContext };

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

@@ -0,0 +1 @@
+export { Pagination, usePagination, usePaginationContext } from './Pagination.js';

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination, usePagination, usePaginationContext } from "./Pagination.js";

package/dist/components/pagination/index.jsx

@@ -0,0 +1 @@
+export { Pagination, usePagination, usePaginationContext } from "./Pagination.jsx";

package/dist/components/password-input/PasswordInput.d.ts

@@ -0,0 +1,26 @@
+import { PasswordInput as PasswordInputPrimitive, usePasswordInput, usePasswordInputContext } from '@ark-ui/solid/password-input';
+import type { ComponentProps } from 'solid-js';
+declare function PasswordInputRoot(props: ComponentProps<typeof PasswordInputPrimitive.Root>): import("solid-js").JSX.Element;
+declare function PasswordInputRootProvider(props: ComponentProps<typeof PasswordInputPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function PasswordInputLabel(props: ComponentProps<typeof PasswordInputPrimitive.Label>): import("solid-js").JSX.Element;
+declare function PasswordInputControl(props: ComponentProps<typeof PasswordInputPrimitive.Control>): import("solid-js").JSX.Element;
+type PasswordInputInputProps = ComponentProps<typeof PasswordInputPrimitive.Input> & {
+    defaultValue?: string | number | readonly string[];
+};
+declare function PasswordInputInput(props: PasswordInputInputProps): import("solid-js").JSX.Element;
+declare function PasswordInputVisibilityTrigger(props: ComponentProps<typeof PasswordInputPrimitive.VisibilityTrigger>): import("solid-js").JSX.Element;
+declare function PasswordInputIndicator(props: ComponentProps<typeof PasswordInputPrimitive.Indicator>): import("solid-js").JSX.Element;
+type PasswordInputFieldProps = Omit<ComponentProps<typeof PasswordInputControl>, 'asChild' | 'children'>;
+declare function PasswordInputField(props: PasswordInputFieldProps): import("solid-js").JSX.Element;
+declare const PasswordInput: typeof PasswordInputRoot & {
+    Root: typeof PasswordInputRoot;
+    RootProvider: typeof PasswordInputRootProvider;
+    Context: (props: PasswordInputPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Label: typeof PasswordInputLabel;
+    Control: typeof PasswordInputControl;
+    Field: typeof PasswordInputField;
+    Input: typeof PasswordInputInput;
+    VisibilityTrigger: typeof PasswordInputVisibilityTrigger;
+    Indicator: typeof PasswordInputIndicator;
+};
+export { PasswordInput, usePasswordInput, usePasswordInputContext };

package/dist/components/password-input/PasswordInput.js

@@ -0,0 +1,135 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
+import { children, createEffect, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.js";
+function PasswordInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PasswordInput.Root, mergeProps({
+        "data-slot": "password-input-root",
+        get ["class"] () {
+            return cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function PasswordInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PasswordInput.RootProvider, mergeProps({
+        "data-slot": "password-input-root-provider",
+        get ["class"] () {
+            return cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function PasswordInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PasswordInput.Label, mergeProps({
+        "data-slot": "password-input-label",
+        get ["class"] () {
+            return cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class);
+        }
+    }, others));
+}
+function PasswordInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PasswordInput.Control, mergeProps({
+        "data-slot": "password-input-control",
+        get ["class"] () {
+            return cn('flex min-h-control-md w-full items-center rounded-md border border-border bg-background pr-2 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function PasswordInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let inputRef;
+    createEffect(()=>{
+        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return createComponent(PasswordInput.Input, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, ()=>local.asChild ? {
+            'prop:defaultValue': local.defaultValue
+        } : {}, {
+        "data-slot": "password-input-input",
+        get ["class"] () {
+            return cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md leading-6 text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', local.class);
+        },
+        ref: (element)=>{
+            inputRef = element;
+            if ('function' == typeof local.ref) local.ref(element);
+        }
+    }));
+}
+function PasswordInputVisibilityTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PasswordInput.VisibilityTrigger, mergeProps({
+        "data-slot": "password-input-visibility-trigger",
+        get ["class"] () {
+            return cn('group/password-input-trigger inline-flex size-control-sm min-w-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class);
+        }
+    }, others));
+}
+function PasswordInputIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'fallback'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(PasswordInput.Indicator, mergeProps({
+        "data-slot": "password-input-indicator",
+        get ["class"] () {
+            return cn("inline-flex items-center justify-center rounded-sm p-1 transition-[background-color,color] duration-200 ease-in-out group-hover/password-input-trigger:bg-muted group-focus-visible/password-input-trigger:bg-muted group-data-[disabled]/password-input-trigger:bg-transparent group-data-[readonly]/password-input-trigger:bg-transparent motion-reduce:transition-none [&>svg:not([class*='size-'])]:size-4", local.class);
+        },
+        get fallback () {
+            return local.fallback ?? createComponent(EyeClosedIcon, {});
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(EyeIcon, {});
+        }
+    }));
+}
+function PasswordInputField(props) {
+    return createComponent(PasswordInputControl, mergeProps(props, {
+        get children () {
+            return [
+                createComponent(PasswordInputInput, {}),
+                createComponent(PasswordInputVisibilityTrigger, {
+                    get children () {
+                        return createComponent(PasswordInputIndicator, {});
+                    }
+                })
+            ];
+        }
+    }));
+}
+const PasswordInput_PasswordInput = Object.assign(PasswordInputRoot, {
+    Root: PasswordInputRoot,
+    RootProvider: PasswordInputRootProvider,
+    Context: PasswordInput.Context,
+    Label: PasswordInputLabel,
+    Control: PasswordInputControl,
+    Field: PasswordInputField,
+    Input: PasswordInputInput,
+    VisibilityTrigger: PasswordInputVisibilityTrigger,
+    Indicator: PasswordInputIndicator
+});
+export { PasswordInput_PasswordInput as PasswordInput, usePasswordInput, usePasswordInputContext };

package/dist/components/password-input/PasswordInput.jsx

@@ -0,0 +1,83 @@
+import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
+import { children, createEffect, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.jsx";
+function PasswordInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.Root data-slot="password-input-root" class={cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function PasswordInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.RootProvider data-slot="password-input-root-provider" class={cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function PasswordInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.Label data-slot="password-input-label" class={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class)} {...others}/>;
+}
+function PasswordInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.Control data-slot="password-input-control" class={cn('flex min-h-control-md w-full items-center rounded-md border border-border bg-background pr-2 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function PasswordInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let inputRef;
+    createEffect(()=>{
+        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return <PasswordInput.Input asChild={local.asChild} {...others} {...local.asChild ? {
+        'prop:defaultValue': local.defaultValue
+    } : {}} data-slot="password-input-input" class={cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md leading-6 text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', local.class)} ref={(element)=>{
+        inputRef = element;
+        if ('function' == typeof local.ref) local.ref(element);
+    }}/>;
+}
+function PasswordInputVisibilityTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.VisibilityTrigger data-slot="password-input-visibility-trigger" class={cn('group/password-input-trigger inline-flex size-control-sm min-w-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class)} {...others}/>;
+}
+function PasswordInputIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'fallback'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <PasswordInput.Indicator data-slot="password-input-indicator" class={cn("inline-flex items-center justify-center rounded-sm p-1 transition-[background-color,color] duration-200 ease-in-out group-hover/password-input-trigger:bg-muted group-focus-visible/password-input-trigger:bg-muted group-data-[disabled]/password-input-trigger:bg-transparent group-data-[readonly]/password-input-trigger:bg-transparent motion-reduce:transition-none [&>svg:not([class*='size-'])]:size-4", local.class)} fallback={local.fallback ?? <EyeClosedIcon/>} {...others}>
+      {resolvedChildren() ?? <EyeIcon/>}
+    </PasswordInput.Indicator>;
+}
+function PasswordInputField(props) {
+    return <PasswordInputControl {...props}>
+      <PasswordInputInput/>
+      <PasswordInputVisibilityTrigger>
+        <PasswordInputIndicator/>
+      </PasswordInputVisibilityTrigger>
+    </PasswordInputControl>;
+}
+const PasswordInput_PasswordInput = Object.assign(PasswordInputRoot, {
+    Root: PasswordInputRoot,
+    RootProvider: PasswordInputRootProvider,
+    Context: PasswordInput.Context,
+    Label: PasswordInputLabel,
+    Control: PasswordInputControl,
+    Field: PasswordInputField,
+    Input: PasswordInputInput,
+    VisibilityTrigger: PasswordInputVisibilityTrigger,
+    Indicator: PasswordInputIndicator
+});
+export { PasswordInput_PasswordInput as PasswordInput, usePasswordInput, usePasswordInputContext };

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

@@ -0,0 +1 @@
+export { PasswordInput, usePasswordInput, usePasswordInputContext } from './PasswordInput.js';

package/dist/components/password-input/index.js

@@ -0,0 +1 @@
+export { PasswordInput, usePasswordInput, usePasswordInputContext } from "./PasswordInput.js";

package/dist/components/password-input/index.jsx

@@ -0,0 +1 @@
+export { PasswordInput, usePasswordInput, usePasswordInputContext } from "./PasswordInput.jsx";

package/dist/components/pin-input/PinInput.d.ts

@@ -0,0 +1,24 @@
+import { PinInput as PinInputPrimitive, usePinInputContext, type UsePinInputProps, type UsePinInputReturn } from '@ark-ui/solid/pin-input';
+import type { ComponentProps } from 'solid-js';
+declare function PinInputRoot(props: ComponentProps<typeof PinInputPrimitive.Root>): import("solid-js").JSX.Element;
+declare function PinInputRootProvider(props: ComponentProps<typeof PinInputPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function PinInputLabel(props: ComponentProps<typeof PinInputPrimitive.Label>): import("solid-js").JSX.Element;
+declare function PinInputControl(props: ComponentProps<typeof PinInputPrimitive.Control>): import("solid-js").JSX.Element;
+declare function PinInputInput(props: ComponentProps<typeof PinInputPrimitive.Input>): import("solid-js").JSX.Element;
+declare function PinInputInputs(props: {
+    class?: string;
+}): import("solid-js").JSX.Element;
+declare function PinInputSeparator(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+declare function usePinInput(props?: UsePinInputProps | (() => UsePinInputProps)): UsePinInputReturn;
+declare const PinInput: typeof PinInputRoot & {
+    Root: typeof PinInputRoot;
+    RootProvider: typeof PinInputRootProvider;
+    Context: (props: PinInputPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    HiddenInput: (props: PinInputPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Label: typeof PinInputLabel;
+    Control: typeof PinInputControl;
+    Input: typeof PinInputInput;
+    Inputs: typeof PinInputInputs;
+    Separator: typeof PinInputSeparator;
+};
+export { PinInput, usePinInput, usePinInputContext };