trepur_components 2.4.5 → 2.4.8

package/README.md

@@ -17,3 +17,11 @@ You will need to log into npm if you have not done so already
 ### `npm publish`
 
 Publishes the new version of the package to npm - new version number to be updated in package.json before the publish is executed
+
+## Adding a new theme
+
+To add a new theme:
+
+1. create a new css file in the src/styles/themes folder
+2. ensure that line 1 of the css file contains the new themes name
+3. add the file import for the new css file in the src/styles/globals.css files

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,102 +1,107 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as o, useMemo as v, createContext as h, useContext as p } from "react";
-import d from "clsx";
-const s = h(null), x = o(({ children: r, className: a, errors: t, placeholder: l, ...e }, i) => {
-  const m = 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(s.Provider, { value: m, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(u.Provider, { value: p, children: /* @__PURE__ */ l(
     "div",
     {
-      ref: i,
-      className: d("grid grid-cols-1 gap-2 w-full rounded-md", a),
-      ...e,
+      ref: d,
+      className: s("grid grid-cols-1 gap-1 w-full rounded-md", t),
+      ...o,
       children: r
     }
   ) });
-}), f = o(({ children: r, handleChange: a, onClick: t, onBlur: l, ...e }, i) => {
-  const { placeholder: m, value: g, errors: u } = p(s) || {};
-  return /* @__PURE__ */ c("div", { ref: i, 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: m,
-        className: d(
+        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": !u,
-            "border-red-600 border-2": u
-          }
+            "border-border border": !m,
+            "border-red-600 border-2": m
+          },
+          e
         ),
         value: g,
-        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: (N) => a == null ? void 0 : a(N.target.value),
-        onClick: t,
-        onBlur: l,
-        onFocus: e.onFocus
+        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: d(
+      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__ */ c(
-  "div",
+), N = n(({ id: e, className: r, children: t, required: a }) => /* @__PURE__ */ c(
+  "label",
   {
-    ref: l,
-    className: d("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: "*" })
     ]
   }
-)), I = o(({ ...r }, a) => {
-  const { errors: t } = p(s) || {};
-  return /* @__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__ */ n("p", { children: l }, `error-msg-${e + 1}`))
+      ...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: L
+          }
+        ),
+        /* @__PURE__ */ l("span", { children: a }, `error-msg:${a.replace(" ", "_")}`)
+      ] }))
     }
-  );
+  ) : null;
 });
-x.displayName = "Input";
-b.displayName = "Input.Actions";
-y.displayName = "Input.Label";
-I.displayName = "Input.Validation";
-f.displayName = "Input.Wrapper";
-const A = Object.assign(x, {
-  Label: y,
-  Validation: I,
-  Actions: b,
-  Wrapper: f
+f.displayName = "Input";
+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 {
-  A as Input
+  E as Input
 };

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

@@ -3,17 +3,17 @@ import { Select } from '.';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & 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> & {
+    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> & 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

@@ -10,14 +10,13 @@ export interface SelectContextProps {
     internalValue?: string;
     setInternalValue?: (val: string) => void;
     label?: string;
+    placeholder?: string;
     handleChange?: (e: any) => void;
 }
-declare const Select: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
-    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
-        value: string;
-    } & import('react').RefAttributes<HTMLLIElement>>;
-    Label: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement> & {
+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> & 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,154 +1,160 @@
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as i, useState as x, useCallback as y, useEffect as A, createContext as E, useContext as p } from "react";
-import u from "clsx";
-import { Input as m } from "../Input/index.js";
-import { Card as H } from "../Card/index.js";
-import { Button as v } from "../Button/index.js";
+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 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 d = E(null), w = i(
+const m = H(null), k = s(
   ({
-    id: l,
-    open: a,
+    id: n,
+    open: t,
     defaultOpen: r,
-    onOpenChange: t,
+    onOpenChange: a,
     onChange: e,
-    className: c,
-    children: s,
+    className: o,
+    children: u,
     loading: f,
-    label: T,
+    label: b,
+    placeholder: S,
     ...B
   }) => {
-    const [D, M] = x(a ?? r), [S, b] = x(""), N = y(
-      (n) => {
-        M(n), t == null || t(n);
+    const [E, M] = I(t ?? r), [y, x] = I(""), N = v(
+      (c) => {
+        M(c), a == null || a(c);
       },
-      [t]
+      [a]
     ), V = {
       loading: f,
-      label: T,
-      open: D,
+      label: b,
+      placeholder: S,
+      open: E,
       setOpen: N,
-      internalValue: S,
-      setInternalValue: b
+      internalValue: y,
+      setInternalValue: x
     };
     A(
-      () => N(a ?? r ?? !1),
-      [a, r, N]
+      () => N(t ?? r ?? !1),
+      [t, r, N]
     );
-    const z = y(
-      (n) => {
-        S.includes(n) ? (b(""), e == null || e("")) : (b(n), e == null || e(n));
+    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__ */ o(d.Provider, { value: V, children: /* @__PURE__ */ I("div", { className: "grid gap-1", children: [
-      /* @__PURE__ */ o(
-        g,
+    return /* @__PURE__ */ l(m.Provider, { value: V, children: /* @__PURE__ */ L("div", { className: "relative", children: [
+      /* @__PURE__ */ l(
+        D,
         {
-          id: l,
-          className: c,
-          onChange: () => z,
+          id: n,
+          className: o,
+          onChange: () => h,
           ...B,
-          children: s
+          children: u
         }
       ),
-      /* @__PURE__ */ o(j, { children: s })
+      /* @__PURE__ */ l(T, { children: u })
     ] }) });
   }
-), R = i(({ className: l, ...a }, r) => {
-  const { open: t, setOpen: e } = p(d) || {};
-  return /* @__PURE__ */ o(
-    v,
+), R = s(({ className: n, ...t }, r) => {
+  const { open: a, setOpen: e } = p(m) || {};
+  return /* @__PURE__ */ l(
+    w,
     {
+      tabIndex: -1,
       ref: r,
-      className: l,
+      className: n,
       "aria-label": "toggle open",
-      onClick: () => e == null ? void 0 : e(!t),
+      onClick: () => e == null ? void 0 : e(!a),
       variant: "ghost",
       size: "sm",
-      ...a,
-      children: /* @__PURE__ */ o(
-        v.Icon,
+      ...t,
+      children: /* @__PURE__ */ l(
+        w.Icon,
         {
-          className: u("transition-transform duration-300 ease-in-out", {
-            "rotate-180 transform": t
+          className: d("transition-transform duration-300 ease-in-out", {
+            "rotate-180 transform": a
           }),
           icon: P
         }
       )
     }
   );
-}), L = i(({ className: l, children: a }, r) => /* @__PURE__ */ o(m.Label, { className: l, ref: r, children: a })), g = i(({ className: l }, a) => {
-  const { open: r, setOpen: t, internalValue: e, label: c, handleChange: s } = p(d) || {};
-  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: u(
-        "w-full rounded-md bg-white caret-transparent ",
-        l
-      ),
+      id: n,
+      className: d("w-full rounded-md caret-transparent ", t),
       ref: a,
-      "data-open": r,
-      placeholder: "boo",
-      value: e ?? "",
-      onChange: (f) => s == null ? void 0 : s(f.target.value),
+      "data-open": e,
+      placeholder: b,
+      value: u ?? "",
+      ...r,
       children: [
-        /* @__PURE__ */ o(m.Label, { children: c }),
-        /* @__PURE__ */ o(
-          m.Wrapper,
+        /* @__PURE__ */ l(i.Label, { children: f }),
+        /* @__PURE__ */ l(
+          i.Wrapper,
           {
-            onClick: () => t == null ? void 0 : t(!r),
-            onBlur: () => t == null ? void 0 : t(!1),
-            className: u(
+            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",
-              l
+              t
             ),
-            children: /* @__PURE__ */ o(m.Actions, { children: /* @__PURE__ */ o(R, {}) })
+            onKeyDown: (S) => {
+              S.key === "Enter" && (o == null || o(!e));
+            },
+            children: /* @__PURE__ */ l(i.Actions, { children: /* @__PURE__ */ l(R, {}) })
           }
         )
       ]
     }
   );
-}), j = i(({ children: l, className: a, ...r }, t) => {
-  const { open: e } = p(d) || {};
-  return e ? /* @__PURE__ */ o(
-    H,
+}), T = s(({ children: n, className: t, ...r }, a) => {
+  const { open: e } = p(m) || {};
+  return e ? /* @__PURE__ */ l(
+    K,
     {
-      ref: t,
-      className: u(
-        "!px-0 data-[state=open]:animate-in w-full data-[state=open]:fade-in-0",
-        a
+      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",
+        t
       ),
       ...r,
-      children: /* @__PURE__ */ o("ul", { children: l })
+      children: /* @__PURE__ */ l("ul", { children: n })
     }
   ) : null;
-}), k = i(({ children: l, value: a, className: r, ...t }, e) => {
-  const { setInternalValue: c } = p(d) || {};
-  return /* @__PURE__ */ o(
-    "li",
-    {
-      ref: e,
-      className: u(
-        "hover:cursor-pointer hover:bg-gray-100 w-full py-2 px-4",
-        r
-      ),
-      value: a,
-      onMouseDown: (s) => c == null ? void 0 : c(s.target.innerHTML),
-      ...t,
-      children: l
-    }
-  );
-});
-w.displayName = "Select";
-j.displayName = "Select.Content";
-g.displayName = "Select.Trigger";
-k.displayName = "Select.Item";
-L.displayName = "Select.Label";
-const Q = Object.assign(w, {
-  Item: k,
-  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 {
-  Q as Select
+  U as Select
 };

package/lib/styles/themes/paa.css

@@ -6,7 +6,7 @@ body.theme-paa {
   --color-loading: #a3a3a3;
 
   /* pill */
-  --color-error-default: #ffffff;
+  --color-error-default: #b91c1c;
   --color-warning-default: #a16207;
   --color-success-default: #047857;
   --color-info-default: #0369a1;
@@ -20,13 +20,13 @@ body.theme-paa {
   --color-button-primary-active: #68a97b;
   --color-button-primary-border: #68a97b;
   --color-button-primary-bg: #68a97b;
-  --color-button-primary-text: #68a97b;
+  --color-button-primary-text: #1d341e;
   --color-button-primary-hover: #68a97b;
 
   --color-button-secondary-active: #1d341e;
   --color-button-secondary-border: #1d341e;
   --color-button-secondary-bg: #1d341e;
-  --color-button-secondary-text: #1d341e;
+  --color-button-secondary-text: #ede9d3;
   --color-button-secondary-hover: #1d341e;
 
   --color-button-ghost-active: #242424;

package/lib/styles/themes/penrithmrt.css

@@ -6,7 +6,7 @@ body.theme-penrithmrt {
   --color-loading: #a3a3a3;
 
   /* pill */
-  --color-error-default: #ffffff;
+  --color-error-default: #b91c1c;
   --color-warning-default: #a16207;
   --color-success-default: #047857;
   --color-info-default: #0369a1;

package/package.json

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