@moduix/solid 1.0.0

package/dist/components/pagination/Pagination.module.jsx

@@ -0,0 +1,10 @@
+import "./Pagination_module.css";
+const Pagination_module = {
+    root: "root-m3_o8c",
+    item: "item-TI2iyy",
+    trigger: "trigger-Z_SoJt",
+    ellipsis: "ellipsis-j46pnR",
+    iconTrigger: "iconTrigger-c2CUab",
+    edgeIcon: "edgeIcon-QA3FZr"
+};
+export default Pagination_module;

package/dist/components/pagination/Pagination_module.css

@@ -0,0 +1,105 @@
+@layer moduix.components {
+  .root-m3_o8c {
+    align-items: center;
+    gap: var(--moduix-pagination-gap, var(--moduix-spacing-1));
+    max-inline-size: 100%;
+    color: var(--moduix-pagination-color, var(--moduix-color-foreground));
+    display: inline-flex;
+    overflow-x: auto;
+  }
+
+  .item-TI2iyy, .trigger-Z_SoJt, .ellipsis-j46pnR {
+    box-sizing: border-box;
+    min-width: var(--moduix-pagination-item-size, var(--moduix-size-md));
+    height: var(--moduix-pagination-item-size, var(--moduix-size-md));
+    border-radius: var(--moduix-pagination-item-radius, var(--moduix-radius-md));
+    font-size: var(--moduix-pagination-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-pagination-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-pagination-line-height, var(--moduix-line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .item-TI2iyy, .trigger-Z_SoJt {
+    cursor: pointer;
+    gap: var(--moduix-pagination-trigger-gap, var(--moduix-spacing-2));
+    border: var(--moduix-pagination-item-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-pagination-item-border-color, var(--moduix-color-border));
+    padding-inline: var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-2));
+    background-color: var(--moduix-pagination-item-bg, var(--moduix-color-background));
+    color: var(--moduix-pagination-item-color, var(--moduix-color-foreground));
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    font-family: inherit;
+    text-decoration: none;
+  }
+
+  @media (hover: hover) {
+    :is(.item-TI2iyy, .trigger-Z_SoJt):hover {
+      background-color: var(--moduix-pagination-item-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  :is(.item-TI2iyy, .trigger-Z_SoJt):focus-visible {
+    outline: var(--moduix-pagination-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-pagination-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-pagination-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  :is(.item-TI2iyy, .trigger-Z_SoJt):is([data-disabled], :disabled) {
+    opacity: var(--moduix-pagination-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
+  }
+
+  :is(.item-TI2iyy, .trigger-Z_SoJt) svg {
+    width: var(--moduix-pagination-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-pagination-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+  }
+
+  .item-TI2iyy[data-selected] {
+    border-color: var(--moduix-pagination-item-border-color-selected, var(--moduix-color-foreground));
+    background-color: var(--moduix-pagination-item-bg-selected, var(--moduix-color-foreground));
+    color: var(--moduix-pagination-item-color-selected, var(--moduix-color-background));
+  }
+
+  @media (hover: hover) {
+    .item-TI2iyy[data-selected]:hover {
+      background-color: var(--moduix-pagination-item-bg-selected, var(--moduix-color-foreground));
+    }
+  }
+
+  .trigger-Z_SoJt {
+    padding-inline: max(var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-3)),
+      var(--moduix-spacing-3));
+  }
+
+  .iconTrigger-c2CUab {
+    width: var(--moduix-pagination-item-size, var(--moduix-size-md));
+    padding-inline: 0;
+  }
+
+  .iconTrigger-c2CUab:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) svg {
+    transform: scaleX(-1);
+  }
+
+  .ellipsis-j46pnR {
+    color: var(--moduix-pagination-ellipsis-color, var(--moduix-color-muted-foreground));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .edgeIcon-QA3FZr {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .edgeIcon-QA3FZr svg + svg {
+    margin-inline-start: calc(var(--moduix-pagination-icon-size, var(--moduix-spacing-4)) * -.5);
+  }
+}
+

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,136 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
+import { clsx } from "clsx";
+import { children, createEffect, splitProps } from "solid-js";
+import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.js";
+import PasswordInput_module from "./PasswordInput.module.js";
+function PasswordInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PasswordInput.Root, mergeProps({
+        "data-slot": "password-input-root",
+        get ["class"] () {
+            return clsx(PasswordInput_module.root, 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 clsx(PasswordInput_module.root, 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 clsx(PasswordInput_module.label, 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 clsx(PasswordInput_module.control, 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 clsx(PasswordInput_module.input, 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 clsx(PasswordInput_module.visibilityTrigger, 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 clsx(PasswordInput_module.indicator, 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,84 @@
+import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
+import { clsx } from "clsx";
+import { children, createEffect, splitProps } from "solid-js";
+import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.jsx";
+import PasswordInput_module from "./PasswordInput.module.jsx";
+function PasswordInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.Root data-slot="password-input-root" class={clsx(PasswordInput_module.root, local.class)} {...others}/>;
+}
+function PasswordInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.RootProvider data-slot="password-input-root-provider" class={clsx(PasswordInput_module.root, local.class)} {...others}/>;
+}
+function PasswordInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.Label data-slot="password-input-label" class={clsx(PasswordInput_module.label, local.class)} {...others}/>;
+}
+function PasswordInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PasswordInput.Control data-slot="password-input-control" class={clsx(PasswordInput_module.control, 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={clsx(PasswordInput_module.input, 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={clsx(PasswordInput_module.visibilityTrigger, 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={clsx(PasswordInput_module.indicator, 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/PasswordInput.module.js

@@ -0,0 +1,10 @@
+import "./PasswordInput_module.css";
+const PasswordInput_module = {
+    root: "root-OrlafY",
+    label: "label-ZAQCRM",
+    control: "control-h2eb01",
+    input: "input-ImUVi4",
+    visibilityTrigger: "visibilityTrigger-UlZG7F",
+    indicator: "indicator-ede0IZ"
+};
+export default PasswordInput_module;

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

@@ -0,0 +1,10 @@
+import "./PasswordInput_module.css";
+const PasswordInput_module = {
+    root: "root-OrlafY",
+    label: "label-ZAQCRM",
+    control: "control-h2eb01",
+    input: "input-ImUVi4",
+    visibilityTrigger: "visibilityTrigger-UlZG7F",
+    indicator: "indicator-ede0IZ"
+};
+export default PasswordInput_module;

package/dist/components/password-input/PasswordInput_module.css

@@ -0,0 +1,150 @@
+@layer moduix.components {
+  .root-OrlafY {
+    box-sizing: border-box;
+    gap: var(--moduix-password-input-gap, var(--moduix-field-gap, var(--moduix-spacing-1)));
+    width: var(--moduix-password-input-width, 100%);
+    max-width: var(--moduix-password-input-max-width, none);
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-OrlafY[data-disabled] {
+    opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
+  }
+
+  .label-ZAQCRM {
+    align-items: center;
+    gap: var(--moduix-password-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
+    color: var(--moduix-password-input-label-color, var(--moduix-field-label-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-password-input-label-font-size, var(--moduix-field-label-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-password-input-label-font-weight, var(--moduix-field-label-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-password-input-label-line-height, var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm)));
+    display: inline-flex;
+  }
+
+  .control-h2eb01 {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--moduix-password-input-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-password-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-password-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    background-color: var(--moduix-password-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-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));
+    align-items: center;
+    padding-inline-end: var(--moduix-password-input-trigger-inset, var(--moduix-spacing-2));
+    display: flex;
+  }
+
+  .control-h2eb01:focus-within {
+    outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .control-h2eb01[data-invalid] {
+    border-color: var(--moduix-password-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
+
+  .control-h2eb01[data-invalid]:focus-within {
+    outline-color: var(--moduix-password-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
+
+  .control-h2eb01[data-readonly] {
+    background-color: var(--moduix-password-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-color-background)));
+    color: var(--moduix-password-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-color-foreground)));
+  }
+
+  .input-ImUVi4 {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--moduix-password-input-padding-y, var(--moduix-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1))))
+      var(--moduix-password-input-padding-x, var(--moduix-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3))));
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    font: inherit;
+    font-size: var(--moduix-password-input-font-size, var(--moduix-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md))));
+    line-height: var(--moduix-password-input-line-height, var(--moduix-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md))));
+    transition: opacity var(--moduix-input-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    flex: auto;
+    margin: 0;
+  }
+
+  .input-ImUVi4::placeholder {
+    color: var(--moduix-password-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
+
+  .input-ImUVi4:is([data-disabled], :disabled) {
+    pointer-events: none;
+    opacity: 1;
+  }
+
+  .input-ImUVi4:is(:read-only, [data-readonly]) {
+    background-color: #0000;
+  }
+
+  .visibilityTrigger-UlZG7F {
+    width: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
+    min-width: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
+    height: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
+    color: var(--moduix-password-input-trigger-color, var(--moduix-color-muted-foreground));
+    background: var(--moduix-password-input-trigger-bg, transparent);
+    border-radius: var(--moduix-password-input-trigger-radius, var(--moduix-radius-sm));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-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))));
+    cursor: pointer;
+    transition: 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));
+    border: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
+    color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+  }
+
+  .visibilityTrigger-UlZG7F:focus-visible {
+    outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .visibilityTrigger-UlZG7F:is([data-disabled], [data-readonly], :disabled) {
+    cursor: default;
+    opacity: 1;
+  }
+
+  .indicator-ede0IZ {
+    padding: var(--moduix-password-input-trigger-visual-padding, var(--moduix-spacing-1));
+    border-radius: var(--moduix-password-input-trigger-radius, var(--moduix-radius-sm));
+    transition: background-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-input-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .indicator-ede0IZ svg {
+    width: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+    height: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+  }
+
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):is(:hover, :focus-visible) .indicator-ede0IZ {
+    background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
+  }
+}
+

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