chesai-ui 0.16.4 → 0.16.5

package/dist/components/input/index.mjs

@@ -1,55 +1,87 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { X as E } from "lucide-react";
-import { forwardRef as L, useMemo as g } from "react";
-import { useInput as N } from "./use-input.mjs";
-const y = L((P, f) => {
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { X as H, EyeOff as L, Eye as O } from "lucide-react";
+import R, { forwardRef as S, useMemo as v } from "react";
+import { useInput as V } from "./use-input.mjs";
+const _ = S((P, C) => {
   const {
-    Component: C,
-    label: s,
-    description: r,
+    Component: I,
+    value: a,
+    label: i,
+    description: n,
     isClearable: p,
-    startContent: b,
-    endContent: n,
-    shouldLabelBeOutside: l,
-    errorMessage: t,
-    isInvalid: i,
-    getBaseProps: I,
-    getLabelProps: v,
-    getInputProps: W,
-    getInnerWrapperProps: w,
-    getInputWrapperProps: x,
-    getHelperWrapperProps: a,
-    getDescriptionProps: d,
-    getErrorMessageProps: u,
-    getClearButtonProps: c
-  } = N({ ...P, ref: f }), h = s ? /* @__PURE__ */ e("label", { ...v(), children: s }) : null, B = g(() => p ? /* @__PURE__ */ e("button", { ...c(), children: n || /* @__PURE__ */ e(E, { className: "h-4 w-4" }) }) : n, [p, c, n]), M = g(() => {
-    const m = i && t;
-    return m || r ? /* @__PURE__ */ e("div", { ...a(), children: m ? /* @__PURE__ */ e("div", { ...u(), children: t }) : /* @__PURE__ */ e("div", { ...d(), children: r }) }) : null;
+    startContent: y,
+    endContent: s,
+    shouldLabelBeOutside: c,
+    errorMessage: o,
+    isInvalid: d,
+    // Dynamic password toggle context fetched from hook
+    originalType: u,
+    isPasswordVisible: t,
+    setIsPasswordVisible: h,
+    getBaseProps: x,
+    getLabelProps: N,
+    getInputProps: E,
+    getInnerWrapperProps: W,
+    getInputWrapperProps: B,
+    getHelperWrapperProps: m,
+    getDescriptionProps: f,
+    getErrorMessageProps: g,
+    getClearButtonProps: b
+  } = V({ ...P, ref: C }), w = i ? /* @__PURE__ */ e("label", { ...N(), children: i }) : null, M = v(() => {
+    const r = [];
+    return p && a && r.push(
+      /* @__PURE__ */ e("button", { ...b(), children: /* @__PURE__ */ e(H, { className: "h-4 w-4" }) }, "clear")
+    ), u === "password" && r.push(
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => h(!t),
+          "aria-label": t ? "Hide password" : "Show password",
+          className: "p-2 -m-2 z-10 select-none transition-opacity text-on-surface-variant hover:text-on-surface cursor-pointer active:opacity-70 rounded-full",
+          children: t ? /* @__PURE__ */ e(L, { className: "h-4 w-4" }) : /* @__PURE__ */ e(O, { className: "h-4 w-4" })
+        },
+        "password-toggle"
+      )
+    ), s && r.push(
+      /* @__PURE__ */ e(R.Fragment, { children: s }, "custom-end")
+    ), r.length === 0 ? null : /* @__PURE__ */ e("div", { className: "flex items-center gap-2 shrink-0", children: r });
   }, [
-    i,
-    t,
-    r,
+    p,
     a,
     u,
-    d
-  ]), j = /* @__PURE__ */ o("div", { ...w(), children: [
+    t,
+    h,
     b,
-    /* @__PURE__ */ e("input", { ...W() }),
-    B
+    s
+  ]), j = v(() => {
+    const r = d && o;
+    return r || n ? /* @__PURE__ */ e("div", { ...m(), children: r ? /* @__PURE__ */ e("div", { ...g(), children: o }) : /* @__PURE__ */ e("div", { ...f(), children: n }) }) : null;
+  }, [
+    d,
+    o,
+    n,
+    m,
+    g,
+    f
+  ]), k = /* @__PURE__ */ l("div", { ...W(), children: [
+    y,
+    /* @__PURE__ */ e("input", { ...E() }),
+    M
   ] });
   return (
     // @ts-ignore
-    /* @__PURE__ */ o(C, { ...I(), children: [
-      l ? h : null,
-      /* @__PURE__ */ o("div", { ...x(), children: [
-        l ? null : h,
-        j
+    /* @__PURE__ */ l(I, { ...x(), children: [
+      c ? w : null,
+      /* @__PURE__ */ l("div", { ...B(), children: [
+        c ? null : w,
+        k
       ] }),
-      M
+      j
     ] })
   );
 });
-y.displayName = "Input";
+_.displayName = "Input";
 export {
-  y as Input
+  _ as Input
 };

package/dist/components/input/use-input.d.ts

@@ -23,6 +23,7 @@ export interface UseInputProps extends Omit<React.InputHTMLAttributes<HTMLInputE
 export declare function useInput(props: UseInputProps): {
     Component: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
     domRef: React.RefObject<HTMLInputElement | null>;
+    value: string | number | readonly string[];
     label: React.ReactNode;
     description: React.ReactNode;
     isClearable: boolean;
@@ -34,6 +35,9 @@ export declare function useInput(props: UseInputProps): {
     shouldLabelBeOutside: boolean;
     errorMessage: React.ReactNode;
     isInvalid: boolean;
+    originalType: React.HTMLInputTypeAttribute | undefined;
+    isPasswordVisible: boolean;
+    setIsPasswordVisible: React.Dispatch<React.SetStateAction<boolean>>;
     getBaseProps: () => {
         'data-slot': string;
         'data-filled': boolean;
@@ -62,7 +66,6 @@ export declare function useInput(props: UseInputProps): {
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
         name?: string | undefined | undefined;
-        type?: React.HTMLInputTypeAttribute | undefined;
         defaultChecked?: boolean | undefined | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
@@ -358,6 +361,7 @@ export declare function useInput(props: UseInputProps): {
         disabled: boolean | undefined;
         readOnly: boolean | undefined;
         value: string | number | readonly string[];
+        type: string | (string & {}) | undefined;
         onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     };
     getInputWrapperProps: () => {

package/dist/components/input/use-input.mjs

@@ -1,100 +1,109 @@
 import { clsx as t } from "clsx";
-import T, { useRef as j, useState as I, useCallback as N } from "react";
-import { getInputSlotClassNames as q, inputSlots as a, inputStyles as A } from "./input-styles.mjs";
-function re(B) {
+import A, { useRef as G, useState as m, useCallback as w } from "react";
+import { getInputSlotClassNames as J, inputSlots as a, inputStyles as K } from "./input-styles.mjs";
+function ne(B) {
   const {
-    ref: y,
+    ref: V,
     as: S = "div",
-    label: d,
-    description: w,
-    errorMessage: L,
-    className: M,
+    type: i,
+    // Destructured here to handle dynamic input state switches
+    label: f,
+    description: L,
+    errorMessage: M,
+    className: E,
     classNames: e,
-    variant: V = "filled",
-    color: G = "primary",
-    size: E = "md",
-    shape: F = "minimal",
+    variant: F = "filled",
+    color: Q = "primary",
+    size: O = "md",
+    shape: k = "minimal",
     labelPlacement: s = "inside",
-    startContent: g,
-    endContent: O,
-    isClearable: k = !1,
-    isInvalid: i = !1,
-    placeholder: H,
-    onClear: m,
-    onValueChange: o,
-    onChange: f,
-    value: b,
-    defaultValue: R,
-    readOnly: P,
-    disabled: C,
-    ...x
-  } = B, r = j(null), [p, h] = I(!1), [D, v] = I(R || ""), n = b !== void 0, W = n ? b : D, u = !!W || p;
-  T.useImperativeHandle(y, () => r.current);
-  const _ = N(() => {
-    n || v(""), r.current && (r.current.value = "", r.current.focus()), m?.(), o?.("");
+    startContent: b,
+    endContent: x,
+    isClearable: H = !1,
+    isInvalid: u = !1,
+    placeholder: R,
+    onClear: P,
+    onValueChange: n,
+    onChange: C,
+    value: h,
+    defaultValue: D,
+    readOnly: v,
+    disabled: I,
+    ...T
+  } = B, r = G(null), [p, W] = m(!1), [_, N] = m(D || ""), [y, z] = m(!1), o = h !== void 0, c = o ? h : _, d = !!c || p;
+  A.useImperativeHandle(V, () => r.current);
+  const j = w(() => {
+    o || N(""), r.current && (r.current.value = "", r.current.focus()), P?.(), n?.("");
     const l = new Event("input", { bubbles: !0 });
     r.current?.dispatchEvent(l);
-  }, [n, m, o]), z = N(
+  }, [o, P, n]), q = w(
     (l) => {
-      n || v(l.target.value), f?.(l), o?.(l.target.value);
+      o || N(l.target.value), C?.(l), n?.(l.target.value);
     },
-    [n, f, o]
-  ), c = q({
-    variant: V,
-    size: E,
-    shape: F,
+    [o, C, n]
+  ), g = J({
+    variant: F,
+    size: O,
+    shape: k,
     labelPlacement: s,
-    isInvalid: i,
-    isFilled: u,
-    hasStartContent: !!g,
-    hasLabel: !!d
+    isInvalid: u,
+    isFilled: d,
+    hasStartContent: !!b,
+    hasLabel: !!f
   });
   return {
     Component: S,
     domRef: r,
-    label: d,
-    description: w,
-    isClearable: k,
-    startContent: g,
-    endContent: O,
+    value: c,
+    label: f,
+    description: L,
+    isClearable: H,
+    startContent: b,
+    endContent: x,
     labelPlacement: s,
     isOutsideLeft: s === "outside-left",
     isOutsideTop: s === "outside",
     shouldLabelBeOutside: s === "outside" || s === "outside-left",
-    errorMessage: L,
-    isInvalid: i,
+    errorMessage: M,
+    isInvalid: u,
+    // Exported properties to manage password visibility inside the UI render
+    originalType: i,
+    isPasswordVisible: y,
+    setIsPasswordVisible: z,
     getBaseProps: () => ({
       "data-slot": "base",
-      "data-filled": u,
-      "data-filled-within": u || p,
+      "data-filled": d,
+      "data-filled-within": d || p,
       "data-focus": p,
-      "data-invalid": i,
-      "data-disabled": C,
-      "data-readonly": P,
+      "data-invalid": u,
+      "data-disabled": I,
+      "data-readonly": v,
       "data-label-placement": s,
-      className: t(a.base, A({ labelPlacement: s }), M, e?.base)
+      className: t(a.base, K({ labelPlacement: s }), E, e?.base)
     }),
     getLabelProps: () => ({
       "data-slot": "label",
-      className: t(a.label, c.label, e?.label)
+      className: t(a.label, g.label, e?.label)
     }),
     getInputProps: () => ({
       ref: r,
       "data-slot": "input",
-      className: t(a.input, c.input, e?.input),
-      placeholder: H,
-      disabled: C,
-      readOnly: P,
-      value: W,
-      onChange: z,
-      onFocus: () => h(!0),
-      onBlur: () => h(!1),
-      ...x
+      className: t(a.input, g.input, e?.input),
+      placeholder: R,
+      disabled: I,
+      readOnly: v,
+      value: c,
+      // Evaluate type dynamically depending on visibility status if type is 'password'
+      type: i === "password" ? y ? "text" : "password" : i,
+      onChange: q,
+      onFocus: () => W(!0),
+      onBlur: () => W(!1),
+      ...T
     }),
     getInputWrapperProps: () => ({
       "data-slot": "input-wrapper",
       "data-focus": p,
-      className: t(a.inputWrapper, c.inputWrapper, e?.inputWrapper),
+      className: t(a.inputWrapper, g.inputWrapper, e?.inputWrapper),
       onClick: () => {
         r.current?.focus();
       }
@@ -118,11 +127,11 @@ function re(B) {
     getClearButtonProps: () => ({
       "data-slot": "clear-button",
       type: "button",
-      onClick: _,
+      onClick: j,
       className: t(a.clearButton, e?.clearButton)
     })
   };
 }
 export {
-  re as useInput
+  ne as useInput
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chesai-ui",
   "private": false,
-  "version": "0.16.4",
+  "version": "0.16.5",
   "packageManager": "pnpm@10.12.1",
   "repository": {
     "type": "git",