trepur_components 2.4.7 → 2.4.8

package/lib/components/Input/Input.stories.d.ts

@@ -4,15 +4,18 @@ import { Input } from '.';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').InputContextProps & import('react').RefAttributes<HTMLDivElement>> & {
-        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLabelElement> & {
             required?: boolean;
-        } & import('react').RefAttributes<HTMLDivElement>>;
+        } & import('react').RefAttributes<HTMLLabelElement>>;
         Validation: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Actions: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-        Wrapper: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLInputElement> & import('.').InputContextProps & import('react').RefAttributes<HTMLInputElement>>;
+        Wrapper: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLInputElement> & {
+            handleChange?: (e: any) => void;
+        } & import('react').RefAttributes<HTMLInputElement>>;
     };
     args: {
         placeholder: string;
+        id: string;
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };

package/lib/components/Input/index.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 
 export interface InputContextProps {
+    id: string;
     autoComplete?: string;
     disabled?: boolean;
     formId?: string;
@@ -23,11 +24,13 @@ export interface InputContextProps {
     value?: string;
 }
 declare const Input: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & InputContextProps & import('react').RefAttributes<HTMLDivElement>> & {
-    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLabelElement> & {
         required?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
+    } & import('react').RefAttributes<HTMLLabelElement>>;
     Validation: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Actions: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-    Wrapper: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & InputContextProps & import('react').RefAttributes<HTMLInputElement>>;
+    Wrapper: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
+        handleChange?: (e: any) => void;
+    } & import('react').RefAttributes<HTMLInputElement>>;
 };
 export { Input };

package/lib/components/Input/index.js

@@ -1,114 +1,107 @@
-import { jsx as n, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as o, useMemo as v, createContext as h, useContext as p } from "react";
-import i from "clsx";
-import { Icon as L } from "../Icon/index.js";
-import { faCircleExclamation as w } from "@fortawesome/free-solid-svg-icons";
-const u = h(null), f = o(({ children: r, className: a, errors: t, placeholder: l, ...e }, m) => {
-  const d = v(
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as n, useMemo as w, createContext as j, useContext as x } from "react";
+import s from "clsx";
+import { Icon as A } from "../Icon/index.js";
+import { faCircleExclamation as L } from "@fortawesome/free-solid-svg-icons";
+const u = j(null), f = n(({ id: e, children: r, className: t, errors: a, placeholder: i, ...o }, d) => {
+  const p = w(
     () => ({
-      errors: t,
-      placeholder: l,
-      ...e
+      id: e,
+      errors: a,
+      placeholder: i,
+      ...o
     }),
-    [t, e]
+    [a, o]
   );
-  return /* @__PURE__ */ n(u.Provider, { value: d, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(u.Provider, { value: p, children: /* @__PURE__ */ l(
     "div",
     {
-      ref: m,
-      className: i("grid grid-cols-1 gap-1 w-full rounded-md", a),
-      ...e,
+      ref: d,
+      className: s("grid grid-cols-1 gap-1 w-full rounded-md", t),
+      ...o,
       children: r
     }
   ) });
-}), x = o(({ children: r, handleChange: a, onClick: t, onBlur: l, ...e }, m) => {
-  const { placeholder: d, value: I, errors: c } = p(u) || {};
-  return /* @__PURE__ */ s("div", { ref: m, className: "group/input relative isolate flex w-full", children: [
-    /* @__PURE__ */ n(
+}), b = n(({ className: e, children: r, handleChange: t, onClick: a, onBlur: i, ...o }, d) => {
+  const { id: p, placeholder: y, value: g, errors: m } = x(u) || {};
+  return /* @__PURE__ */ c("div", { ref: d, className: "group/input relative isolate flex w-full", children: [
+    /* @__PURE__ */ l(
       "input",
       {
-        placeholder: d,
-        className: i(
+        id: p,
+        placeholder: y,
+        className: s(
           "h-10 border border-black rounded-md flex w-full bg-card px-3 py-1.5 text-sm placeholder:text-gray-500",
           {
-            "border-border border": !c,
-            "border-red-600 border-2": c
-          }
+            "border-border border": !m,
+            "border-red-600 border-2": m
+          },
+          e
         ),
-        value: I,
-        readOnly: e.readOnly,
-        disabled: e.disabled,
-        autoComplete: e.autoComplete,
-        form: e.formId,
-        maxLength: e.maxLength,
-        minLength: e.minLength,
-        pattern: e.pattern,
-        required: e.required,
-        type: e.type,
-        name: e.name,
-        onChange: (g) => a == null ? void 0 : a(g.target.value),
-        onClick: t,
-        onBlur: l,
-        onFocus: e.onFocus
+        value: g,
+        onChange: (h) => t == null ? void 0 : t(h.target.value),
+        onClick: a,
+        onBlur: i,
+        ...o
       }
     ),
     r
   ] });
-}), b = o(
-  ({ className: r, children: a }, t) => /* @__PURE__ */ n(
+}), I = n(
+  ({ className: e, children: r }, t) => /* @__PURE__ */ l(
     "div",
     {
       ref: t,
-      className: i(
+      className: s(
         "absolute right-1 top-1/2 my-auto -translate-y-1/2",
-        r
+        e
       ),
-      children: a
+      children: r
     }
   )
-), y = o(({ className: r, children: a, required: t = !1 }, l) => /* @__PURE__ */ s(
-  "div",
+), N = n(({ id: e, className: r, children: t, required: a }) => /* @__PURE__ */ c(
+  "label",
   {
-    ref: l,
-    className: i("flex px-1 text-sm font-normal leading-5", r),
+    htmlFor: e,
+    className: s("flex px-1 text-md font-normal leading-5", r),
     children: [
-      /* @__PURE__ */ n("p", { children: a }),
-      t && /* @__PURE__ */ n("p", { className: "text-sm font-normal", children: "*" })
+      t,
+      a && /* @__PURE__ */ l("span", { children: "*" })
     ]
   }
-)), N = o(({ ...r }, a) => {
-  const { errors: t } = p(u) || {};
-  return t ? /* @__PURE__ */ n(
+)), v = n(({ ...e }, r) => {
+  const { errors: t } = x(u) || {};
+  return t ? /* @__PURE__ */ l(
     "div",
     {
-      ref: a,
+      ref: r,
       className: "text-sm pl-1 font-medium text-error-default",
-      ...r,
-      children: t == null ? void 0 : t.map((l, e) => /* @__PURE__ */ s("div", { className: "gap-1 flex", children: [
-        /* @__PURE__ */ n(
-          L,
+      ...e,
+      children: t == null ? void 0 : t.map((a) => /* @__PURE__ */ c("div", { className: "text-xs gap-1 flex", children: [
+        /* @__PURE__ */ l(
+          A,
           {
+            size: "xs",
             className: "my-auto text-error-default",
-            icon: w,
-            co: !0
+            icon: L
           }
         ),
-        /* @__PURE__ */ n("span", { className: "my-auto", children: l }, `error-msg-${e + 1}`)
+        /* @__PURE__ */ l("span", { children: a }, `error-msg:${a.replace(" ", "_")}`)
       ] }))
     }
   ) : null;
 });
 f.displayName = "Input";
-b.displayName = "Input.Actions";
-y.displayName = "Input.Label";
-N.displayName = "Input.Validation";
-x.displayName = "Input.Wrapper";
-const W = Object.assign(f, {
-  Label: y,
-  Validation: N,
-  Actions: b,
-  Wrapper: x
+I.displayName = "Input.Actions";
+N.displayName = "Input.Label";
+v.displayName = "Input.Validation";
+b.displayName = "Input.Wrapper";
+const E = Object.assign(f, {
+  Label: N,
+  Validation: v,
+  Actions: I,
+  Wrapper: b
 });
 export {
-  W as Input
+  E as Input
 };

package/lib/components/Select/Select.stories.d.ts

@@ -4,15 +4,14 @@ import { Select } from '.';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & Omit<import('react').HTMLAttributes<HTMLDivElement> & import('../Input').InputContextProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('.').SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
-        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & {
-            value: string;
-        } & import('react').RefAttributes<HTMLLIElement>>;
-        Label: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLAttributes<HTMLDivElement> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & import('react').RefAttributes<HTMLLIElement>>;
+        Label: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLAttributes<HTMLLabelElement> & {
             required?: boolean;
-        } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+        } & import('react').RefAttributes<HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
     };
     parameters: {};
     args: {
+        id: string;
         label: string;
         placeholder: string;
         children: import("react/jsx-runtime").JSX.Element[];

package/lib/components/Select/index.d.ts

@@ -14,11 +14,9 @@ export interface SelectContextProps {
     handleChange?: (e: any) => void;
 }
 declare const Select: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement> & import('../Input').InputContextProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
-    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
-        value: string;
-    } & import('react').RefAttributes<HTMLLIElement>>;
-    Label: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import('react').RefAttributes<HTMLLIElement>>;
+    Label: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLLabelElement> & {
         required?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    } & import('react').RefAttributes<HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
 };
 export { Select };

package/lib/components/Select/index.js

@@ -1,152 +1,159 @@
-import { jsx as l, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as i, useState as y, useCallback as x, useEffect as E, createContext as H, useContext as p } from "react";
+import { jsx as l, jsxs as L } from "react/jsx-runtime";
+import { forwardRef as s, useState as I, useCallback as v, useEffect as A, createContext as H, useContext as p } from "react";
 import d from "clsx";
-import { Input as m } from "../Input/index.js";
-import { Card as P } from "../Card/index.js";
-import { Button as v } from "../Button/index.js";
-import { faCaretDown as R } from "@fortawesome/fontawesome-free-solid";
-const u = H(null), w = i(
+import { Input as i } from "../Input/index.js";
+import { Card as K } from "../Card/index.js";
+import { Button as w } from "../Button/index.js";
+import { faCaretDown as P } from "@fortawesome/fontawesome-free-solid";
+const m = H(null), k = s(
   ({
-    id: o,
-    open: r,
-    defaultOpen: a,
-    onOpenChange: t,
+    id: n,
+    open: t,
+    defaultOpen: r,
+    onOpenChange: a,
     onChange: e,
-    className: n,
-    children: c,
+    className: o,
+    children: u,
     loading: f,
-    label: z,
-    placeholder: B,
-    ...D
+    label: b,
+    placeholder: S,
+    ...B
   }) => {
-    const [M, V] = y(r ?? a), [S, b] = y(""), N = x(
-      (s) => {
-        V(s), t == null || t(s);
+    const [E, M] = I(t ?? r), [y, x] = I(""), N = v(
+      (c) => {
+        M(c), a == null || a(c);
       },
-      [t]
-    ), h = {
+      [a]
+    ), V = {
       loading: f,
-      label: z,
-      placeholder: B,
-      open: M,
+      label: b,
+      placeholder: S,
+      open: E,
       setOpen: N,
-      internalValue: S,
-      setInternalValue: b
+      internalValue: y,
+      setInternalValue: x
     };
-    E(
-      () => N(r ?? a ?? !1),
-      [r, a, N]
+    A(
+      () => N(t ?? r ?? !1),
+      [t, r, N]
     );
-    const A = x(
-      (s) => {
-        alert(s), S.includes(s) ? (b(""), e == null || e("")) : (b(s), e == null || e(s));
+    const h = v(
+      (c) => {
+        alert(c), y.includes(c) ? (x(""), e == null || e("")) : (x(c), e == null || e(c));
       },
-      [S, e]
+      [y, e]
     );
-    return /* @__PURE__ */ l(u.Provider, { value: h, children: /* @__PURE__ */ I("div", { className: "relative", children: [
+    return /* @__PURE__ */ l(m.Provider, { value: V, children: /* @__PURE__ */ L("div", { className: "relative", children: [
       /* @__PURE__ */ l(
-        j,
+        D,
         {
-          id: o,
-          className: n,
-          onChange: () => A,
-          ...D,
-          children: c
+          id: n,
+          className: o,
+          onChange: () => h,
+          ...B,
+          children: u
         }
       ),
-      /* @__PURE__ */ l(k, { children: c })
+      /* @__PURE__ */ l(T, { children: u })
     ] }) });
   }
-), W = i(({ className: o, ...r }, a) => {
-  const { open: t, setOpen: e } = p(u) || {};
+), R = s(({ className: n, ...t }, r) => {
+  const { open: a, setOpen: e } = p(m) || {};
   return /* @__PURE__ */ l(
-    v,
+    w,
     {
-      ref: a,
-      className: o,
+      tabIndex: -1,
+      ref: r,
+      className: n,
       "aria-label": "toggle open",
-      onClick: () => e == null ? void 0 : e(!t),
+      onClick: () => e == null ? void 0 : e(!a),
       variant: "ghost",
       size: "sm",
-      ...r,
+      ...t,
       children: /* @__PURE__ */ l(
-        v.Icon,
+        w.Icon,
         {
           className: d("transition-transform duration-300 ease-in-out", {
-            "rotate-180 transform": t
+            "rotate-180 transform": a
           }),
-          icon: R
+          icon: P
         }
       )
     }
   );
-}), L = i(({ className: o, children: r }, a) => /* @__PURE__ */ l(m.Label, { className: o, ref: a, children: r })), j = i(({ className: o, ...r }, a) => {
-  const { open: t, setOpen: e, internalValue: n, label: c, placeholder: f } = p(u) || {};
-  return /* @__PURE__ */ I(
-    m,
+}), j = s(({ className: n, children: t }, r) => /* @__PURE__ */ l(i.Label, { className: n, ref: r, children: t })), D = s(({ id: n, className: t, ...r }, a) => {
+  const { open: e, setOpen: o, internalValue: u, label: f, placeholder: b } = p(m) || {};
+  return /* @__PURE__ */ L(
+    i,
     {
-      className: d("w-full rounded-md caret-transparent ", o),
+      id: n,
+      className: d("w-full rounded-md caret-transparent ", t),
       ref: a,
-      "data-open": t,
-      placeholder: f,
-      value: n ?? "",
+      "data-open": e,
+      placeholder: b,
+      value: u ?? "",
       ...r,
       children: [
-        /* @__PURE__ */ l(m.Label, { children: c }),
+        /* @__PURE__ */ l(i.Label, { children: f }),
         /* @__PURE__ */ l(
-          m.Wrapper,
+          i.Wrapper,
           {
-            onClick: () => e == null ? void 0 : e(!t),
-            onBlur: () => e == null ? void 0 : e(!1),
+            onClick: () => o == null ? void 0 : o(!e),
+            onBlur: () => o == null ? void 0 : o(!1),
             className: d(
               "caret-transparent rounded hover:cursor-pointer data-[open=true]:border-primary data-[open=true]:ring-1 data-[open=true]:ring-primary",
-              o
+              t
             ),
-            children: /* @__PURE__ */ l(m.Actions, { children: /* @__PURE__ */ l(W, {}) })
+            onKeyDown: (S) => {
+              S.key === "Enter" && (o == null || o(!e));
+            },
+            children: /* @__PURE__ */ l(i.Actions, { children: /* @__PURE__ */ l(R, {}) })
           }
         )
       ]
     }
   );
-}), k = i(({ children: o, className: r, ...a }, t) => {
-  const { open: e } = p(u) || {};
+}), T = s(({ children: n, className: t, ...r }, a) => {
+  const { open: e } = p(m) || {};
   return e ? /* @__PURE__ */ l(
-    P,
+    K,
     {
-      ref: t,
+      ref: a,
       className: d(
         "!rounded-md z-10 mt-0.5 absolute overflow-hidden !p-0 data-[state=open]:animate-in w-full data-[state=open]:fade-in-0",
-        r
+        t
       ),
-      ...a,
-      children: /* @__PURE__ */ l("ul", { children: o })
+      ...r,
+      children: /* @__PURE__ */ l("ul", { children: n })
     }
   ) : null;
-}), T = i(({ children: o, value: r, className: a, ...t }, e) => {
-  const { setInternalValue: n } = p(u) || {};
-  return /* @__PURE__ */ l(
-    "li",
-    {
-      ref: e,
-      className: d(
-        "hover:cursor-pointer hover:bg-gray-100 w-full py-2 px-4",
-        a
-      ),
-      value: r,
-      onMouseDown: (c) => n == null ? void 0 : n(c.target.innerHTML),
-      ...t,
-      children: o
-    }
-  );
-});
-w.displayName = "Select";
-k.displayName = "Select.Content";
-j.displayName = "Select.Trigger";
-T.displayName = "Select.Item";
-L.displayName = "Select.Label";
-const U = Object.assign(w, {
-  Item: T,
-  Label: L
+}), z = s(
+  ({ children: n, className: t, ...r }, a) => {
+    const { setInternalValue: e } = p(m) || {};
+    return /* @__PURE__ */ l(
+      "li",
+      {
+        tabIndex: 1,
+        ref: a,
+        className: d(
+          "hover:cursor-pointer hover:bg-gray-100 w-full py-2 px-4",
+          t
+        ),
+        onMouseDown: (o) => e == null ? void 0 : e(o.target.innerHTML),
+        ...r,
+        children: n
+      }
+    );
+  }
+);
+k.displayName = "Select";
+T.displayName = "Select.Content";
+D.displayName = "Select.Trigger";
+z.displayName = "Select.Item";
+j.displayName = "Select.Label";
+const U = Object.assign(k, {
+  Item: z,
+  Label: j
 });
 export {
   U as Select

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,