@pathscale/ui 1.2.1 → 1.2.2

package/dist/components/pagination/Pagination.css

@@ -0,0 +1,121 @@
+@layer components {
+  .pagination {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .pagination {
+      flex-direction: row;
+    }
+  }
+
+  .pagination__summary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: flex-start;
+    font-size: 0.875rem;
+    opacity: 0.7;
+  }
+
+  @media (min-width: 640px) {
+    .pagination__summary {
+      align-self: center;
+    }
+  }
+
+  .pagination__content {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    align-self: flex-start;
+  }
+
+  @media (min-width: 640px) {
+    .pagination__content {
+      align-self: center;
+    }
+  }
+
+  .pagination__item {
+    display: inline-flex;
+  }
+
+  .pagination__link {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    height: 2.25rem;
+    width: 2.25rem;
+    transform-origin: center;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border: 0;
+    background-color: transparent;
+    color: var(--color-base-content);
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    outline: none;
+    user-select: none;
+    cursor: pointer;
+    transition:
+      transform 250ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)),
+      background-color 100ms ease-out,
+      box-shadow 100ms ease-out;
+  }
+
+  .pagination__link:focus-visible,
+  .pagination__link[data-focus-visible="true"] {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-focus, var(--color-accent));
+  }
+
+  .pagination__link:disabled,
+  .pagination__link[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @media (hover: hover) {
+    .pagination__link:hover:not(:disabled),
+    .pagination__link[data-hovered="true"]:not(:disabled) {
+      background-color: var(--color-base-200);
+    }
+  }
+
+  .pagination__link:active:not(:disabled),
+  .pagination__link[data-pressed="true"]:not(:disabled) {
+    background-color: var(--color-base-300);
+    transform: scale(0.97);
+  }
+
+  .pagination__link[data-active="true"] {
+    background-color: var(--color-base-300);
+    color: var(--color-base-content);
+  }
+
+  .pagination__ellipsis {
+    display: inline-flex;
+    height: 2.25rem;
+    width: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    opacity: 0.65;
+    user-select: none;
+  }
+
+  .pagination__link--nav {
+    width: auto;
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+  }
+}
+

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

@@ -1,5 +1,11 @@
+import "./Pagination.css";
 import { type JSX } from "solid-js";
-import { type JoinProps } from "../join/Join";
-export type PaginationProps = JoinProps;
+import type { IComponentBaseProps } from "../types";
+export type PaginationProps = Omit<JSX.HTMLAttributes<HTMLElement>, "onChange"> & IComponentBaseProps & {
+    page: number;
+    total: number;
+    onChange: (page: number) => void;
+    isDisabled?: boolean;
+};
 declare const Pagination: (props: PaginationProps) => JSX.Element;
 export default Pagination;

package/dist/components/pagination/Pagination.js

@@ -1,17 +1,167 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Pagination.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__join_Join_js_ac0d20a5__ from "../join/Join.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__ from "./Pagination.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<nav><div>Page <!> of </div><ul><li><button type=button><span aria-hidden=true>\u{2039}</span><span>Previous</span></button></li><li><button type=button><span>Next</span><span aria-hidden=true>\u{203A}`), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span>\u{2026}`);
+const clampPage = (page, total)=>{
+    if (!Number.isFinite(page)) return 1;
+    return Math.min(Math.max(1, Math.floor(page)), total);
+};
+const getPaginationTokens = (page, total)=>{
+    if (total <= 0) return [];
+    if (total <= 7) return Array.from({
+        length: total
+    }, (_, index)=>index + 1);
+    if (page <= 4) return [
+        1,
+        2,
+        3,
+        4,
+        5,
+        "ellipsis-right",
+        total
+    ];
+    if (page >= total - 3) return [
+        1,
+        "ellipsis-left",
+        total - 4,
+        total - 3,
+        total - 2,
+        total - 1,
+        total
+    ];
+    return [
+        1,
+        "ellipsis-left",
+        page - 1,
+        page,
+        page + 1,
+        "ellipsis-right",
+        total
+    ];
+};
 const Pagination = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
-        "className"
+        "className",
+        "dataTheme",
+        "page",
+        "total",
+        "onChange",
+        "isDisabled"
     ]);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__join_Join_js_ac0d20a5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
-        }
-    }));
+    const safeTotal = ()=>Math.max(1, Math.floor(local.total || 0));
+    const currentPage = ()=>clampPage(local.page, safeTotal());
+    const tokens = ()=>getPaginationTokens(currentPage(), safeTotal());
+    const disabled = ()=>Boolean(local.isDisabled);
+    const handleChange = (nextPage)=>{
+        if (disabled()) return;
+        const bounded = clampPage(nextPage, safeTotal());
+        if (bounded === currentPage()) return;
+        local.onChange(bounded);
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = (_el$5.nextSibling, _el$2.nextSibling), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-label": "pagination",
+            role: "navigation"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.base, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "pagination"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.summary
+            }), {
+            "data-slot": "pagination-summary"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, currentPage, _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, safeTotal, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.content
+            }), {
+            "data-slot": "pagination-content"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.item
+            }), {
+            "data-slot": "pagination-item"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.link, __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.linkNav)
+            }), {
+            "data-slot": "pagination-previous",
+            onClick: ()=>handleChange(currentPage() - 1),
+            get disabled () {
+                return disabled() || currentPage() <= 1;
+            },
+            "aria-label": "Go to previous page"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return tokens();
+            },
+            children: (token)=>(()=>{
+                    var _el$1 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.item
+                        }), {
+                        "data-slot": "pagination-item"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, "number" == typeof token ? (()=>{
+                        var _el$10 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.link
+                            }), {
+                            "data-slot": "pagination-link",
+                            get ["data-active"] () {
+                                return token === currentPage() ? "true" : void 0;
+                            },
+                            get ["aria-current"] () {
+                                return token === currentPage() ? "page" : void 0;
+                            },
+                            "aria-label": `Go to page ${token}`,
+                            get disabled () {
+                                return disabled();
+                            },
+                            onClick: ()=>handleChange(token)
+                        }), false, true);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, token);
+                        return _el$10;
+                    })() : (()=>{
+                        var _el$11 = _tmpl$4();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.ellipsis
+                            }), {
+                            "data-slot": "pagination-ellipsis",
+                            "aria-hidden": "true"
+                        }), false, true);
+                        return _el$11;
+                    })());
+                    return _el$1;
+                })()
+        }), _el$9);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.item
+            }), {
+            "data-slot": "pagination-item"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.link, __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.linkNav)
+            }), {
+            "data-slot": "pagination-next",
+            onClick: ()=>handleChange(currentPage() + 1),
+            get disabled () {
+                return disabled() || currentPage() >= safeTotal();
+            },
+            "aria-label": "Go to next page"
+        }), false, true);
+        return _el$;
+    })();
 };
 const pagination_Pagination = Pagination;
 export { pagination_Pagination as default };

package/dist/components/password-field/PasswordField.d.ts

@@ -0,0 +1,70 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type PasswordFieldProps = IComponentBaseProps & {
+    id?: string;
+    name?: string;
+    label?: JSX.Element;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    autofocus?: boolean;
+    autocomplete?: "current-password" | "new-password" | "off";
+    "aria-describedby"?: string;
+    startIcon?: JSX.Element;
+    showLabel: string;
+    hideLabel: string;
+    value?: string;
+    inputRef?: (el: HTMLInputElement) => void;
+    onInput?: (value: string) => void;
+    onBlur?: () => void;
+    visibleIcon?: JSX.Element;
+    hiddenIcon?: JSX.Element;
+    onVisibilityChange?: (visible: boolean) => void;
+    class?: string;
+    inputClass?: string;
+};
+export type PasswordToggleSnapshot = {
+    hadFocus: boolean;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    valueBeforeToggle: string | null;
+};
+type PasswordFieldInputContractParams = Pick<PasswordFieldProps, "id" | "name" | "label" | "placeholder" | "required" | "autofocus" | "autocomplete" | "aria-describedby" | "value" | "disabled" | "invalid" | "startIcon" | "inputClass"> & {
+    isVisible: boolean;
+};
+export declare const createPasswordFieldInputContract: (params: PasswordFieldInputContractParams) => {
+    id: string | undefined;
+    name: string | undefined;
+    label: JSX.Element;
+    type: string;
+    placeholder: string | undefined;
+    required: boolean | undefined;
+    autofocus: boolean | undefined;
+    autocomplete: "off" | "current-password" | "new-password" | undefined;
+    "aria-describedby": string | undefined;
+    value: string | undefined;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    startIcon: JSX.Element;
+    class: string;
+};
+type PasswordFieldLike = {
+    value: string;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    focus: (options?: {
+        preventScroll?: boolean;
+    }) => void;
+    setSelectionRange: (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => void;
+    dispatchEvent: (event: Event) => boolean;
+};
+export declare const getPasswordInputType: (isVisible: boolean) => "text" | "password";
+export declare const selectPasswordToggleIcon: (isVisible: boolean, visibleIcon: JSX.Element | undefined, hiddenIcon: JSX.Element | undefined, fallback: JSX.Element) => JSX.Element;
+export declare const capturePasswordToggleSnapshot: (field: PasswordFieldLike | undefined, activeElement: EventTarget | null) => PasswordToggleSnapshot;
+export declare const restorePasswordFieldAfterToggle: (field: PasswordFieldLike | undefined, snapshot: PasswordToggleSnapshot) => void;
+export declare const preventPasswordTogglePointerDown: (event: Pick<PointerEvent, "preventDefault">) => void;
+declare const PasswordField: Component<PasswordFieldProps>;
+export default PasswordField;

package/dist/components/password-field/PasswordField.js

@@ -0,0 +1,167 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const createPasswordFieldInputContract = (params)=>({
+        id: params.id,
+        name: params.name,
+        label: params.label,
+        type: getPasswordInputType(params.isVisible),
+        placeholder: params.placeholder,
+        required: params.required,
+        autofocus: params.autofocus,
+        autocomplete: params.autocomplete,
+        "aria-describedby": params["aria-describedby"],
+        value: params.value,
+        isDisabled: Boolean(params.disabled),
+        isInvalid: Boolean(params.invalid),
+        startIcon: params.startIcon,
+        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", params.inputClass)
+    });
+const getPasswordInputType = (isVisible)=>isVisible ? "text" : "password";
+const selectPasswordToggleIcon = (isVisible, visibleIcon, hiddenIcon, fallback)=>(isVisible ? visibleIcon : hiddenIcon) ?? fallback;
+const capturePasswordToggleSnapshot = (field, activeElement)=>({
+        hadFocus: activeElement === field,
+        selectionStart: field?.selectionStart ?? null,
+        selectionEnd: field?.selectionEnd ?? null,
+        selectionDirection: field?.selectionDirection ?? null,
+        valueBeforeToggle: field?.value ?? null
+    });
+const restorePasswordFieldAfterToggle = (field, snapshot)=>{
+    if (!field) return;
+    if (null !== snapshot.valueBeforeToggle && field.value !== snapshot.valueBeforeToggle) {
+        field.value = snapshot.valueBeforeToggle;
+        field.dispatchEvent(new Event("input", {
+            bubbles: true
+        }));
+    }
+    if (!snapshot.hadFocus) return;
+    field.focus({
+        preventScroll: true
+    });
+    if (null === snapshot.selectionStart || null === snapshot.selectionEnd) return;
+    try {
+        field.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd, snapshot.selectionDirection ?? void 0);
+    } catch  {}
+};
+const preventPasswordTogglePointerDown = (event)=>event.preventDefault();
+const PasswordField = (props)=>{
+    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
+        "name",
+        "label",
+        "placeholder",
+        "disabled",
+        "invalid",
+        "required",
+        "autofocus",
+        "autocomplete",
+        "aria-describedby",
+        "startIcon",
+        "showLabel",
+        "hideLabel",
+        "value",
+        "inputRef",
+        "onInput",
+        "onBlur",
+        "visibleIcon",
+        "hiddenIcon",
+        "onVisibilityChange",
+        "inputClass",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const [isVisible, setIsVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let fieldRef;
+    const toggleLabel = ()=>isVisible() ? local.hideLabel : local.showLabel;
+    const toggleIcon = ()=>selectPasswordToggleIcon(isVisible(), local.visibleIcon, local.hiddenIcon, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+            width: 16,
+            height: 16,
+            get name () {
+                return isVisible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]";
+            },
+            class: "h-4 w-4"
+        }));
+    const setFieldRef = (el)=>{
+        fieldRef = el;
+        local.inputRef?.(el);
+    };
+    const toggleVisibility = ()=>{
+        const snapshot = capturePasswordToggleSnapshot(fieldRef, "undefined" != typeof document ? document.activeElement : null);
+        const nextVisible = !isVisible();
+        setIsVisible(nextVisible);
+        local.onVisibilityChange?.(nextVisible);
+        queueMicrotask(()=>{
+            restorePasswordFieldAfterToggle(fieldRef, snapshot);
+        });
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "password-field",
+            get ["data-visible"] () {
+                return isVisible() ? "true" : "false";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>createPasswordFieldInputContract({
+                id: local.id,
+                name: local.name,
+                label: local.label,
+                isVisible: isVisible(),
+                placeholder: local.placeholder,
+                required: local.required,
+                autofocus: local.autofocus,
+                autocomplete: local.autocomplete,
+                "aria-describedby": local["aria-describedby"],
+                value: local.value,
+                disabled: local.disabled,
+                invalid: local.invalid,
+                startIcon: local.startIcon,
+                inputClass: local.inputClass
+            }), {
+            ref: setFieldRef,
+            onInput: (event)=>{
+                local.onInput?.(event.currentTarget.value);
+            },
+            onBlur: ()=>local.onBlur?.(),
+            get endIcon () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    isIconOnly: true,
+                    class: "h-7 min-h-7 w-7 min-w-7",
+                    get isDisabled () {
+                        return Boolean(local.disabled);
+                    },
+                    onPointerDown: preventPasswordTogglePointerDown,
+                    onClick: toggleVisibility,
+                    get ["aria-label"] () {
+                        return toggleLabel();
+                    },
+                    get ["aria-pressed"] () {
+                        return isVisible();
+                    },
+                    get title () {
+                        return toggleLabel();
+                    },
+                    get children () {
+                        return toggleIcon();
+                    }
+                });
+            }
+        })));
+        return _el$;
+    })();
+};
+const password_field_PasswordField = PasswordField;
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, password_field_PasswordField as default, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon };

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

@@ -0,0 +1 @@
+export { default as PasswordField, type PasswordFieldProps } from "./PasswordField";

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

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__PasswordField_js_9859d7de__ from "./PasswordField.js";
+var __webpack_exports__PasswordField = __WEBPACK_EXTERNAL_MODULE__PasswordField_js_9859d7de__["default"];
+export { __webpack_exports__PasswordField as PasswordField };

package/dist/components/password-requirements/PasswordRequirements.d.ts

@@ -0,0 +1,12 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { PasswordRuleResult } from "../../passwordRules";
+export type PasswordRequirementsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    title?: JSX.Element;
+    results: PasswordRuleResult[];
+    itemClass?: string;
+    metIcon?: JSX.Element;
+    unmetIcon?: JSX.Element;
+};
+declare const PasswordRequirements: Component<PasswordRequirementsProps>;
+export default PasswordRequirements;

package/dist/components/password-requirements/PasswordRequirements.js

@@ -0,0 +1,79 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-xs font-medium uppercase opacity-70">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><ul class=space-y-1>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<li><span class="inline-flex shrink-0 items-center justify-center"aria-hidden=true></span><span>');
+const PasswordRequirements = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "title",
+        "results",
+        "itemClass",
+        "metIcon",
+        "unmetIcon",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("space-y-2", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "password-requirements"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.title;
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.title);
+                return _el$2;
+            }
+        }), _el$3);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return local.results;
+            },
+            children: (rule)=>(()=>{
+                    var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        get when () {
+                            return rule.passed ? local.metIcon : local.unmetIcon;
+                        },
+                        get fallback () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                                width: 14,
+                                height: 14,
+                                get name () {
+                                    return rule.passed ? "icon-[lucide--check]" : "icon-[lucide--minus]";
+                                }
+                            });
+                        },
+                        get children () {
+                            return rule.passed ? local.metIcon : local.unmetIcon;
+                        }
+                    }));
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>rule.message);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex items-center gap-2 text-sm", rule.passed ? "text-success" : "opacity-75", local.itemClass), _v$2 = rule.key, _v$3 = rule.passed ? "true" : "false";
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.e = _v$);
+                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "data-rule", _p$.t = _v$2);
+                        _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "data-passed", _p$.a = _v$3);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                    });
+                    return _el$4;
+                })()
+        }));
+        return _el$;
+    })();
+};
+const password_requirements_PasswordRequirements = PasswordRequirements;
+export { password_requirements_PasswordRequirements as default };

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

@@ -0,0 +1 @@
+export { default as PasswordRequirements, type PasswordRequirementsProps } from "./PasswordRequirements";

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

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__PasswordRequirements_js_8e4e4c71__ from "./PasswordRequirements.js";
+var __webpack_exports__PasswordRequirements = __WEBPACK_EXTERNAL_MODULE__PasswordRequirements_js_8e4e4c71__["default"];
+export { __webpack_exports__PasswordRequirements as PasswordRequirements };

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

@@ -0,0 +1 @@
+export { evaluatePasswordRules, matchPasswordConfirmation, type PasswordRuleConfig, type PasswordRuleResult, type PasswordCustomRegexRule, } from "../../passwordRules";

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

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__passwordRules_js_7a09c026__ from "../../passwordRules.js";
+var __webpack_exports__evaluatePasswordRules = __WEBPACK_EXTERNAL_MODULE__passwordRules_js_7a09c026__.evaluatePasswordRules;
+var __webpack_exports__matchPasswordConfirmation = __WEBPACK_EXTERNAL_MODULE__passwordRules_js_7a09c026__.matchPasswordConfirmation;
+export { __webpack_exports__evaluatePasswordRules as evaluatePasswordRules, __webpack_exports__matchPasswordConfirmation as matchPasswordConfirmation };