@pathscale/ui 1.1.72 → 1.1.74

package/dist/components/glass-panel/GlassPanel.css

@@ -1,9 +1,11 @@
 @layer components {
   .glass-panel {
+    position: relative;
     border-radius: 0.75rem;
     transition: all 200ms ease-in-out;
     background: color-mix(in srgb, var(--color-base-300) 45%, transparent);
-    border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent);
+    border: 1px solid
+      color-mix(in srgb, var(--color-base-content) 12%, transparent);
   }
 
   .glass-panel--transparent {
@@ -12,7 +14,93 @@
   }
 
   .glass-panel--glow {
-    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent);
+    box-shadow: inset 0 1px 0
+      color-mix(in srgb, var(--color-base-content) 5%, transparent);
+  }
+
+  .glass-panel--liquid {
+    overflow: hidden;
+    background: linear-gradient(
+        135deg,
+        color-mix(in srgb, white 18%, transparent),
+        transparent 38%,
+        color-mix(in srgb, white 10%, transparent) 72%,
+        transparent
+      ), color-mix(in srgb, var(--color-base-100) 12%, transparent);
+    border-color: color-mix(in srgb, var(--color-base-content) 12%, transparent);
+    box-shadow: inset 0 1px 0 color-mix(in srgb, white 38%, transparent), inset
+      0 -1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent);
+    backdrop-filter: var(--glass-panel-liquid-filter) blur(10px) saturate(1.12);
+    -webkit-backdrop-filter: var(--glass-panel-liquid-filter) blur(10px)
+      saturate(1.12);
+  }
+
+  .glass-panel--liquid::before,
+  .glass-panel--liquid::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    content: "";
+  }
+
+  .glass-panel--liquid::before {
+    z-index: 1;
+    background: radial-gradient(
+        circle at 18% 0%,
+        color-mix(in srgb, white 32%, transparent),
+        transparent 38%
+      ),
+      linear-gradient(
+        120deg,
+        color-mix(in srgb, white 20%, transparent),
+        transparent 22% 78%,
+        color-mix(in srgb, white 8%, transparent)
+      );
+    mix-blend-mode: screen;
+    opacity: 0.32;
+  }
+
+  .glass-panel--liquid::after {
+    z-index: 2;
+    padding: 1px;
+    background: linear-gradient(
+        145deg,
+        color-mix(in srgb, white 80%, transparent),
+        transparent 24% 72%,
+        color-mix(in srgb, var(--color-base-content) 9%, transparent)
+      )
+      border-box;
+    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    -webkit-mask: linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    opacity: 0.5;
+  }
+
+  .glass-panel--liquid > .glass-panel__header-button,
+  .glass-panel--liquid > .glass-panel__content {
+    position: relative;
+    z-index: 3;
+  }
+
+  .glass-panel__liquid-filter {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  @supports not (
+      (backdrop-filter: url("#liquid-glass-filter")) or
+      (-webkit-backdrop-filter: url("#liquid-glass-filter"))
+    ) {
+    .glass-panel--liquid {
+      backdrop-filter: blur(10px) saturate(1.12);
+      -webkit-backdrop-filter: blur(10px) saturate(1.12);
+    }
   }
 
   .glass-panel--blur-none {
@@ -99,9 +187,7 @@
     color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
     font-size: 0.875rem;
     font-weight: 500;
-    transition:
-      color 150ms ease,
-      background-color 150ms ease;
+    transition: color 150ms ease, background-color 150ms ease;
   }
 
   .glass-panel__header-button:hover {
@@ -131,9 +217,7 @@
 
   .glass-panel__content {
     display: grid;
-    transition:
-      grid-template-rows 200ms ease-in-out,
-      opacity 200ms ease-in-out;
+    transition: grid-template-rows 200ms ease-in-out, opacity 200ms ease-in-out;
   }
 
   .glass-panel__content--collapsible {

package/dist/components/glass-panel/GlassPanel.d.ts

@@ -1,9 +1,11 @@
 import "./GlassPanel.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps, ComponentSize, ComponentColor } from "../types";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
 export type GlassPanelBlur = "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type GlassPanelEffect = "default" | "liquid";
 export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     blur?: GlassPanelBlur;
+    effect?: GlassPanelEffect;
     collapsible?: boolean;
     open?: boolean;
     defaultOpen?: boolean;

package/dist/components/glass-panel/GlassPanel.js

@@ -3,10 +3,11 @@ import "./GlassPanel.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__GlassPanel_classes_js_5f11fbfd__ from "./GlassPanel.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg class=glass-panel__liquid-filter aria-hidden=true><defs><filter x=-12% y=-12% width=124% height=124% color-interpolation-filters=sRGB><feImage href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='left' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='rgb(56,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='right' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='rgb(128,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(200,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='top' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(128,56,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='bottom' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(128,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,200,128)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='512' height='512' fill='rgb(128,128,128)'/%3E%3Crect width='96' height='512' fill='url(%23left)'/%3E%3Crect x='416' width='96' height='512' fill='url(%23right)'/%3E%3Crect width='512' height='96' fill='url(%23top)' opacity='.72'/%3E%3Crect y='416' width='512' height='96' fill='url(%23bottom)' opacity='.72'/%3E%3C/svg%3E\"x=0 y=0 width=100% height=100% preserveAspectRatio=none result=displacement-map></feImage><feDisplacementMap in=SourceGraphic in2=displacement-map scale=14 xChannelSelector=R yChannelSelector=G result=refracted></feDisplacementMap><feColorMatrix in=refracted type=saturate values=1.16>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
 const GlassPanel = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "blur",
+        "effect",
         "collapsible",
         "open",
         "defaultOpen",
@@ -26,38 +27,63 @@ const GlassPanel = (props)=>{
         "style"
     ]);
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const liquidFilterId = `glass-panel-liquid-${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
     const blur = ()=>local.blur ?? "none";
     const size = ()=>local.size ?? "md";
+    const isLiquid = ()=>"liquid" === local.effect;
     const isControlled = ()=>void 0 !== local.open;
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
-    const isOpen = ()=>isControlled() ? local.open : internalOpen();
+    const isOpen = ()=>isControlled() ? true === local.open : internalOpen();
     const accentKey = ()=>local.accent ?? "ghost";
     const handleToggle = ()=>{
         const next = !isOpen();
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.glow && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.glow, local.accent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.accent[accentKey()], local.class, local.className);
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && !isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], !local.transparent && isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.liquid, local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.glow && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.glow, local.accent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.accent[accentKey()], local.class, local.className);
+    const containerStyle = ()=>{
+        if (!isLiquid()) return local.style;
+        const liquidBackdropFilter = `url(#${liquidFilterId}) blur(12px) saturate(1.22)`;
+        return Object.assign({}, "object" == typeof local.style ? local.style : void 0, {
+            "--glass-panel-liquid-filter": `url(#${liquidFilterId})`,
+            "-webkit-backdrop-filter": liquidBackdropFilter,
+            "backdrop-filter": liquidBackdropFilter
+        });
+    };
     const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.content, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsible, local.collapsible && !isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsed, (!local.collapsible || isOpen()) && !(local.paddingX || local.paddingY) && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.size[size()], local.paddingX, local.paddingY);
     return (()=>{
-        var _el$ = _tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
+        var _el$ = _tmpl$3(), _el$9 = _el$.firstChild, _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, ()=>({
                 class: containerClasses()
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
+            get ["data-glass-effect"] () {
+                return isLiquid() ? "liquid" : void 0;
+            },
             get style () {
-                return local.style;
+                return containerStyle();
             }
         }), 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 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!local.transparent)() && isLiquid();
+            },
+            get children () {
+                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+                _el$4.firstChild;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", liquidFilterId);
+                return _el$2;
+            }
+        }), _el$9);
         (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.collapsible && local.title;
             },
             get children () {
-                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerButton
                     }), {
                     onClick: handleToggle,
@@ -66,10 +92,10 @@ const GlassPanel = (props)=>{
                     },
                     "aria-controls": contentId
                 }), false, true);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerLabel
                     })), false, true);
-                (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__.Show, {
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.icon;
                     },
@@ -77,20 +103,21 @@ const GlassPanel = (props)=>{
                         return local.icon;
                     }
                 }), null);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.title, null);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.title, null);
+                (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__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.chevron, isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.chevronOpen)
                     }), {
+                    "aria-hidden": "true",
                     fill: "none",
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     "stroke-width": "1.5"
                 }), true, true);
-                return _el$2;
+                return _el$6;
             }
-        }), _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+        }), _el$9);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "id", contentId);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                 class: contentClasses()
             }), {
             get style () {
@@ -100,10 +127,10 @@ const GlassPanel = (props)=>{
                 };
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+        (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__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.contentInner, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentInnerHidden)
             })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.children);
         return _el$;
     })();
 };

package/dist/components/glass-panel/index.d.ts

@@ -1 +1 @@
-export { default, type GlassPanelProps, type GlassPanelBlur } from "./GlassPanel";
+export { default, type GlassPanelBlur, type GlassPanelEffect, type GlassPanelProps, } from "./GlassPanel";

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

@@ -0,0 +1,20 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type PasswordFieldProps = IComponentBaseProps & {
+    name?: string;
+    label?: JSX.Element;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    autocomplete?: "current-password" | "new-password" | "off";
+    startIcon?: JSX.Element;
+    showLabel: string;
+    hideLabel: string;
+    value?: string;
+    onInput?: (value: string) => void;
+    onBlur?: () => void;
+    class?: string;
+    inputClass?: string;
+};
+declare const PasswordField: Component<PasswordFieldProps>;
+export default PasswordField;

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

@@ -0,0 +1,111 @@
+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 PasswordField_PasswordField = (props)=>{
+    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "name",
+        "label",
+        "placeholder",
+        "disabled",
+        "invalid",
+        "autocomplete",
+        "startIcon",
+        "showLabel",
+        "hideLabel",
+        "value",
+        "onInput",
+        "onBlur",
+        "inputClass",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const [isVisible, setIsVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const toggleLabel = ()=>isVisible() ? local.hideLabel : local.showLabel;
+    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)({
+            get name () {
+                return local.name;
+            },
+            get label () {
+                return local.label;
+            },
+            get type () {
+                return isVisible() ? "text" : "password";
+            },
+            get placeholder () {
+                return local.placeholder;
+            },
+            get autocomplete () {
+                return local.autocomplete;
+            },
+            get value () {
+                return local.value;
+            },
+            get isDisabled () {
+                return Boolean(local.disabled);
+            },
+            get isInvalid () {
+                return Boolean(local.invalid);
+            },
+            get startIcon () {
+                return local.startIcon;
+            },
+            onInput: (event)=>{
+                local.onInput?.(event.currentTarget.value);
+            },
+            onBlur: ()=>local.onBlur?.()
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", local.inputClass)
+            }), {
+            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",
+                    onClick: ()=>setIsVisible((value)=>!value),
+                    get ["aria-label"] () {
+                        return toggleLabel();
+                    },
+                    get ["aria-pressed"] () {
+                        return isVisible();
+                    },
+                    get title () {
+                        return toggleLabel();
+                    },
+                    get children () {
+                        return (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"
+                        });
+                    }
+                });
+            }
+        })));
+        return _el$;
+    })();
+};
+const PasswordField = PasswordField_PasswordField;
+export { PasswordField as default };

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

package/dist/index.d.ts

@@ -70,6 +70,17 @@ export { default as Form, FormRoot, FormWithContext, } from "./components/form";
 export { FormField, FormSubmitButton, FieldErrorMessage, } from "./components/form";
 export { useDesktop } from "./hooks/layout";
 export type { FormProps, FormRootProps, FormWithContextProps, FormFieldProps, FormSubmitButtonProps, FieldErrorMessageProps, } from "./components/form";
+export { AuthCard, type AuthCardProps } from "./components/auth-card";
+export { AuthForm, type AuthFormProps } from "./components/auth-form";
+export { AuthFieldGroup, type AuthFieldGroupProps } from "./components/auth-field-group";
+export { PasswordField, type PasswordFieldProps } from "./components/password-field";
+export { PasswordRequirements, type PasswordRequirementsProps } from "./components/password-requirements";
+export { AuthErrorMessage, type AuthErrorMessageProps } from "./components/auth-error-message";
+export { AuthSuccessMessage, type AuthSuccessMessageProps } from "./components/auth-success-message";
+export { AuthSubmitButton, type AuthSubmitButtonProps } from "./components/auth-submit-button";
+export { AuthFooterLinks, type AuthFooterLinksProps, type AuthFooterLinkItem } from "./components/auth-footer-links";
+export { AuthPoweredBy, type AuthPoweredByProps } from "./components/auth-powered-by";
+export { evaluatePasswordRules, matchPasswordConfirmation, type PasswordRuleConfig, type PasswordRuleResult, type PasswordCustomRegexRule, } from "./passwordRules";
 export { createForm, useFormContext, useField, getFirstFieldError, FormContext, } from "./hooks/form";
 export type { CreateFormOptions, FormApi, AnyFormApi, UseFieldResult, } from "./hooks/form";
 export { default as Grid } from "./components/grid";