trepur_components 2.4.5 → 2.4.7

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/index.js

@@ -1,8 +1,10 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
+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 d from "clsx";
-const s = h(null), x = o(({ children: r, className: a, errors: t, placeholder: l, ...e }, i) => {
-  const m = v(
+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(
     () => ({
       errors: t,
       placeholder: l,
@@ -10,30 +12,30 @@ const s = h(null), x = o(({ children: r, className: a, errors: t, placeholder: l
     }),
     [t, e]
   );
-  return /* @__PURE__ */ n(s.Provider, { value: m, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(u.Provider, { value: d, children: /* @__PURE__ */ n(
     "div",
     {
-      ref: i,
-      className: d("grid grid-cols-1 gap-2 w-full rounded-md", a),
+      ref: m,
+      className: i("grid grid-cols-1 gap-1 w-full rounded-md", a),
       ...e,
       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: [
+}), 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(
       "input",
       {
-        placeholder: m,
-        className: d(
+        placeholder: d,
+        className: i(
           "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": !c,
+            "border-red-600 border-2": c
           }
         ),
-        value: g,
+        value: I,
         readOnly: e.readOnly,
         disabled: e.disabled,
         autoComplete: e.autoComplete,
@@ -44,7 +46,7 @@ const s = h(null), x = o(({ children: r, className: a, errors: t, placeholder: l
         required: e.required,
         type: e.type,
         name: e.name,
-        onChange: (N) => a == null ? void 0 : a(N.target.value),
+        onChange: (g) => a == null ? void 0 : a(g.target.value),
         onClick: t,
         onBlur: l,
         onFocus: e.onFocus
@@ -57,46 +59,56 @@ const s = h(null), x = o(({ children: r, className: a, errors: t, placeholder: l
     "div",
     {
       ref: t,
-      className: d(
+      className: i(
         "absolute right-1 top-1/2 my-auto -translate-y-1/2",
         r
       ),
       children: a
     }
   )
-), y = o(({ className: r, children: a, required: t = !1 }, l) => /* @__PURE__ */ c(
+), y = o(({ className: r, children: a, required: t = !1 }, l) => /* @__PURE__ */ s(
   "div",
   {
     ref: l,
-    className: d("flex px-1 text-sm font-normal leading-5", r),
+    className: i("flex px-1 text-sm font-normal leading-5", r),
     children: [
       /* @__PURE__ */ n("p", { children: a }),
       t && /* @__PURE__ */ n("p", { className: "text-sm font-normal", children: "*" })
     ]
   }
-)), I = o(({ ...r }, a) => {
-  const { errors: t } = p(s) || {};
-  return /* @__PURE__ */ n(
+)), N = o(({ ...r }, a) => {
+  const { errors: t } = p(u) || {};
+  return t ? /* @__PURE__ */ n(
     "div",
     {
       ref: a,
       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}`))
+      children: t == null ? void 0 : t.map((l, e) => /* @__PURE__ */ s("div", { className: "gap-1 flex", children: [
+        /* @__PURE__ */ n(
+          L,
+          {
+            className: "my-auto text-error-default",
+            icon: w,
+            co: !0
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: "my-auto", children: l }, `error-msg-${e + 1}`)
+      ] }))
     }
-  );
+  ) : null;
 });
-x.displayName = "Input";
+f.displayName = "Input";
 b.displayName = "Input.Actions";
 y.displayName = "Input.Label";
-I.displayName = "Input.Validation";
-f.displayName = "Input.Wrapper";
-const A = Object.assign(x, {
+N.displayName = "Input.Validation";
+x.displayName = "Input.Wrapper";
+const W = Object.assign(f, {
   Label: y,
-  Validation: I,
+  Validation: N,
   Actions: b,
-  Wrapper: f
+  Wrapper: x
 });
 export {
-  A as Input
+  W as Input
 };

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

@@ -3,7 +3,7 @@ import { Select } from '.';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').SelectContextProps & import('react').RefAttributes<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> & {
             value: string;
         } & import('react').RefAttributes<HTMLLIElement>>;
@@ -14,6 +14,7 @@ declare const meta: {
     parameters: {};
     args: {
         label: string;
+        placeholder: string;
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };

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

@@ -10,9 +10,10 @@ 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>> & {
+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>>;

package/lib/components/Select/index.js

@@ -1,154 +1,153 @@
-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 { 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 d from "clsx";
 import { Input as m } from "../Input/index.js";
-import { Card as H } from "../Card/index.js";
+import { Card as P } from "../Card/index.js";
 import { Button as v } from "../Button/index.js";
-import { faCaretDown as P } from "@fortawesome/fontawesome-free-solid";
-const d = E(null), w = i(
+import { faCaretDown as R } from "@fortawesome/fontawesome-free-solid";
+const u = H(null), w = i(
   ({
-    id: l,
-    open: a,
-    defaultOpen: r,
+    id: o,
+    open: r,
+    defaultOpen: a,
     onOpenChange: t,
     onChange: e,
-    className: c,
-    children: s,
+    className: n,
+    children: c,
     loading: f,
-    label: T,
-    ...B
+    label: z,
+    placeholder: B,
+    ...D
   }) => {
-    const [D, M] = x(a ?? r), [S, b] = x(""), N = y(
-      (n) => {
-        M(n), t == null || t(n);
+    const [M, V] = y(r ?? a), [S, b] = y(""), N = x(
+      (s) => {
+        V(s), t == null || t(s);
       },
       [t]
-    ), V = {
+    ), h = {
       loading: f,
-      label: T,
-      open: D,
+      label: z,
+      placeholder: B,
+      open: M,
       setOpen: N,
       internalValue: S,
       setInternalValue: b
     };
-    A(
-      () => N(a ?? r ?? !1),
-      [a, r, N]
+    E(
+      () => N(r ?? a ?? !1),
+      [r, a, N]
     );
-    const z = y(
-      (n) => {
-        S.includes(n) ? (b(""), e == null || e("")) : (b(n), e == null || e(n));
+    const A = x(
+      (s) => {
+        alert(s), S.includes(s) ? (b(""), e == null || e("")) : (b(s), e == null || e(s));
       },
       [S, e]
     );
-    return /* @__PURE__ */ o(d.Provider, { value: V, children: /* @__PURE__ */ I("div", { className: "grid gap-1", children: [
-      /* @__PURE__ */ o(
-        g,
+    return /* @__PURE__ */ l(u.Provider, { value: h, children: /* @__PURE__ */ I("div", { className: "relative", children: [
+      /* @__PURE__ */ l(
+        j,
         {
-          id: l,
-          className: c,
-          onChange: () => z,
-          ...B,
-          children: s
+          id: o,
+          className: n,
+          onChange: () => A,
+          ...D,
+          children: c
         }
       ),
-      /* @__PURE__ */ o(j, { children: s })
+      /* @__PURE__ */ l(k, { children: c })
     ] }) });
   }
-), R = i(({ className: l, ...a }, r) => {
-  const { open: t, setOpen: e } = p(d) || {};
-  return /* @__PURE__ */ o(
+), W = i(({ className: o, ...r }, a) => {
+  const { open: t, setOpen: e } = p(u) || {};
+  return /* @__PURE__ */ l(
     v,
     {
-      ref: r,
-      className: l,
+      ref: a,
+      className: o,
       "aria-label": "toggle open",
       onClick: () => e == null ? void 0 : e(!t),
       variant: "ghost",
       size: "sm",
-      ...a,
-      children: /* @__PURE__ */ o(
+      ...r,
+      children: /* @__PURE__ */ l(
         v.Icon,
         {
-          className: u("transition-transform duration-300 ease-in-out", {
+          className: d("transition-transform duration-300 ease-in-out", {
             "rotate-180 transform": t
           }),
-          icon: P
+          icon: R
         }
       )
     }
   );
-}), 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) || {};
+}), 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,
     {
-      className: u(
-        "w-full rounded-md bg-white caret-transparent ",
-        l
-      ),
+      className: d("w-full rounded-md caret-transparent ", o),
       ref: a,
-      "data-open": r,
-      placeholder: "boo",
-      value: e ?? "",
-      onChange: (f) => s == null ? void 0 : s(f.target.value),
+      "data-open": t,
+      placeholder: f,
+      value: n ?? "",
+      ...r,
       children: [
-        /* @__PURE__ */ o(m.Label, { children: c }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ l(m.Label, { children: c }),
+        /* @__PURE__ */ l(
           m.Wrapper,
           {
-            onClick: () => t == null ? void 0 : t(!r),
-            onBlur: () => t == null ? void 0 : t(!1),
-            className: u(
+            onClick: () => e == null ? void 0 : e(!t),
+            onBlur: () => e == null ? void 0 : e(!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
+              o
             ),
-            children: /* @__PURE__ */ o(m.Actions, { children: /* @__PURE__ */ o(R, {}) })
+            children: /* @__PURE__ */ l(m.Actions, { children: /* @__PURE__ */ l(W, {}) })
           }
         )
       ]
     }
   );
-}), j = i(({ children: l, className: a, ...r }, t) => {
-  const { open: e } = p(d) || {};
-  return e ? /* @__PURE__ */ o(
-    H,
+}), k = i(({ children: o, className: r, ...a }, t) => {
+  const { open: e } = p(u) || {};
+  return e ? /* @__PURE__ */ l(
+    P,
     {
       ref: t,
-      className: u(
-        "!px-0 data-[state=open]:animate-in w-full data-[state=open]:fade-in-0",
-        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
       ),
-      ...r,
-      children: /* @__PURE__ */ o("ul", { children: l })
+      ...a,
+      children: /* @__PURE__ */ l("ul", { children: o })
     }
   ) : null;
-}), k = i(({ children: l, value: a, className: r, ...t }, e) => {
-  const { setInternalValue: c } = p(d) || {};
-  return /* @__PURE__ */ o(
+}), T = i(({ children: o, value: r, className: a, ...t }, e) => {
+  const { setInternalValue: n } = p(u) || {};
+  return /* @__PURE__ */ l(
     "li",
     {
       ref: e,
-      className: u(
+      className: d(
         "hover:cursor-pointer hover:bg-gray-100 w-full py-2 px-4",
-        r
+        a
       ),
-      value: a,
-      onMouseDown: (s) => c == null ? void 0 : c(s.target.innerHTML),
+      value: r,
+      onMouseDown: (c) => n == null ? void 0 : n(c.target.innerHTML),
       ...t,
-      children: l
+      children: o
     }
   );
 });
 w.displayName = "Select";
-j.displayName = "Select.Content";
-g.displayName = "Select.Trigger";
-k.displayName = "Select.Item";
+k.displayName = "Select.Content";
+j.displayName = "Select.Trigger";
+T.displayName = "Select.Item";
 L.displayName = "Select.Label";
-const Q = Object.assign(w, {
-  Item: k,
+const U = Object.assign(w, {
+  Item: T,
   Label: L
 });
 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.7",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,