@clubmed/trident-ui 1.0.0-alpha.35 → 1.0.0-alpha.37

package/molecules/Forms/Checkbox.js

@@ -1,10 +1,11 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
 import { c as b } from "../../index-Cu0xwYjD.js";
 import { Icon as y } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
 import { useValue as N } from "../../hooks/useValue.js";
 import "../../controls-l0sNRNKZ.js";
 let V = 0;
-function D({
+function I({
   id: m = "checkbox-" + V++,
   name: r = m,
   className: h,
@@ -21,18 +22,18 @@ function D({
   const { value: o, setValue: d } = N({
     name: r,
     initialValue: p,
-    onChange(k, s) {
-      c == null || c(k, s ? a !== void 0 ? a : s : null);
+    onChange(k, i) {
+      c == null || c(k, i ? a !== void 0 ? a : i : null);
     }
   });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "label",
     {
       className: b(h, "relative flex items-center gap-8", {
         "text-grey": t
       }),
       children: [
-        /* @__PURE__ */ i("span", { className: "relative", children: [
+        /* @__PURE__ */ s("span", { className: "relative", children: [
           /* @__PURE__ */ l(
             "input",
             {
@@ -66,5 +67,5 @@ function D({
   );
 }
 export {
-  D as Checkbox
+  I as Checkbox
 };

package/molecules/Forms/DateField.js

@@ -2,6 +2,7 @@ import { jsx as p, jsxs as b } from "react/jsx-runtime";
 import { c as M } from "../../index-Cu0xwYjD.js";
 import { useRef as R } from "react";
 import { Icon as E } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
 import { useValue as P } from "../../hooks/useValue.js";
 import { useInternalStatus as _ } from "../../hooks/useInternalStatus.js";
 import { FormControl as $ } from "./FormControl.js";
@@ -56,7 +57,7 @@ function G(e, t) {
   return u;
 }
 let V = 0;
-const F = (e) => e ? G(e, { representation: "date" }) : "", J = ({
+const F = (e) => e ? G(e, { representation: "date" }) : "", K = ({
   id: e = `field-date-${++V}`,
   name: t = e,
   label: i,
@@ -153,5 +154,5 @@ const F = (e) => e ? G(e, { representation: "date" }) : "", J = ({
   );
 };
 export {
-  J as DateField
+  K as DateField
 };

package/molecules/Forms/Filter.js

@@ -1,17 +1,18 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { c } from "../../index-Cu0xwYjD.js";
 import "../../controls-l0sNRNKZ.js";
 import { Icon as m } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
 import { useValue as D } from "../../hooks/useValue.js";
 let N = 0;
-function A({
+function I({
   id: n = "filter-" + N++,
   name: a = n,
-  className: u,
-  dataTestId: p,
+  className: p,
+  dataTestId: u,
   disabled: r,
   checked: f = !1,
-  value: t,
+  value: e,
   tabIndex: d = 0,
   onChange: l,
   hasDropdown: x,
@@ -22,16 +23,16 @@ function A({
     name: a,
     initialValue: f,
     onChange(w, o) {
-      l == null || l(w, o ? t !== void 0 ? t : o : null);
+      l == null || l(w, o ? e !== void 0 ? e : o : null);
     }
   });
-  return /* @__PURE__ */ s("label", { className: c(u, "relative"), children: [
-    /* @__PURE__ */ e(
+  return /* @__PURE__ */ s("label", { className: c(p, "relative"), children: [
+    /* @__PURE__ */ t(
       "input",
       {
         ...h,
         name: a,
-        "data-testid": p,
+        "data-testid": u,
         type: "checkbox",
         tabIndex: d,
         onChange: () => {
@@ -40,16 +41,16 @@ function A({
         checked: i,
         "data-name": "Filter",
         disabled: r,
-        value: t
+        value: e
       }
     ),
     /* @__PURE__ */ s("span", { children: [
-      /* @__PURE__ */ e("span", { className: c("text-b3 font-semibold"), children: b }),
-      /* @__PURE__ */ e(m, { width: null, name: "CheckDefault", color: "black" }),
-      x && /* @__PURE__ */ e(m, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
+      /* @__PURE__ */ t("span", { className: c("text-b3 font-semibold"), children: b }),
+      /* @__PURE__ */ t(m, { width: null, name: "CheckDefault", color: "black" }),
+      x && /* @__PURE__ */ t(m, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
     ] })
   ] });
 }
 export {
-  A as Filter
+  I as Filter
 };

package/molecules/Forms/FormControl.js

@@ -2,18 +2,19 @@ import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useInternalStatus as f } from "../../hooks/useInternalStatus.js";
 import { FormLabel as u } from "./FormLabel.js";
 import { Icon as h } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
 import { c as b } from "../../index-Cu0xwYjD.js";
-const v = ({
+const w = ({
   id: t,
   label: r,
   description: o,
   disabled: m,
   className: n,
   validationStatus: i = "default",
-  children: c,
+  children: p,
   errorMessage: a,
-  dataTestId: l,
-  dataName: p,
+  dataTestId: c,
+  dataName: l,
   layout: d
 }) => {
   const x = f({
@@ -24,11 +25,11 @@ const v = ({
     "div",
     {
       className: b(n, "space-y-4"),
-      "data-name": p,
-      "data-testid": l,
+      "data-name": l,
+      "data-testid": c,
       children: [
         r && t && /* @__PURE__ */ e(u, { description: o, id: t, layout: d, children: r }),
-        c,
+        p,
         x === "error" && a && /* @__PURE__ */ s("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
           /* @__PURE__ */ e(h, { name: "Error", width: "20px" }),
           a
@@ -38,5 +39,5 @@ const v = ({
   );
 };
 export {
-  v as FormControl
+  w as FormControl
 };

package/molecules/Forms/NumberField.d.ts

@@ -23,6 +23,7 @@ export declare function useNumberField({ id, name, value: initialValue, onChange
     color?: string | undefined;
     className?: string | undefined;
     style?: import("react").CSSProperties | undefined;
+    children?: import("react").ReactNode;
     prefix?: string | undefined;
     form?: string | undefined;
     list?: string | undefined;
@@ -31,7 +32,6 @@ export declare function useNumberField({ id, name, value: initialValue, onChange
     slot?: string | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    children?: import("react").ReactNode;
     suppressHydrationWarning?: boolean | undefined;
     height?: string | number | undefined;
     lang?: string | undefined;
@@ -301,7 +301,7 @@ export declare function useNumberField({ id, name, value: initialValue, onChange
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
-    enterKeyHint?: "search" | "enter" | "next" | "done" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "done" | "search" | "enter" | "next" | "go" | "previous" | "send" | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
     multiple?: boolean | undefined;

package/molecules/Forms/TextField.js

@@ -4,8 +4,9 @@ import { useValue as k } from "../../hooks/useValue.js";
 import { useInternalStatus as C } from "../../hooks/useInternalStatus.js";
 import { FormControl as T } from "./FormControl.js";
 import { Icon as r } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
 let F = 0;
-const M = (u) => {
+const $ = (u) => {
   const {
     id: a = `text-field-${++F}`,
     name: s = a,
@@ -15,15 +16,15 @@ const M = (u) => {
     validationStatus: c = "default",
     hasDropdown: l = !1,
     icon: o,
-    iconType: n,
+    iconType: i,
     errorMessage: f,
-    disabled: i = !1,
+    disabled: n = !1,
     className: h,
     dataTestId: g = "TextField",
     onChange: v,
     ...w
   } = u, { value: y, setValue: N } = k({ name: s, initialValue: x, onChange: v }), e = C({
-    isDisabled: i,
+    isDisabled: n,
     validationStatus: c
   });
   return /* @__PURE__ */ t(
@@ -34,7 +35,7 @@ const M = (u) => {
       description: b,
       dataName: "TextField",
       dataTestId: g,
-      disabled: i,
+      disabled: n,
       validationStatus: c,
       errorMessage: f,
       children: /* @__PURE__ */ d("div", { className: "relative", children: [
@@ -44,7 +45,7 @@ const M = (u) => {
             ...w,
             id: a,
             name: s,
-            disabled: i,
+            disabled: n,
             value: y,
             onChange: (D) => N(D.target.value),
             className: p(
@@ -78,9 +79,9 @@ const M = (u) => {
             children: [
               o && /* @__PURE__ */ t(r, { name: o, width: "24px" }),
               /* @__PURE__ */ d("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px", type: n }),
-                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px", type: n }),
-                l && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black", type: n }) })
+                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px", type: i }),
+                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px", type: i }),
+                l && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black", type: i }) })
               ] })
             ]
           }
@@ -90,5 +91,5 @@ const M = (u) => {
   );
 };
 export {
-  M as TextField
+  $ as TextField
 };

package/molecules/Link.js

@@ -1,10 +1,11 @@
-import { jsxs as t, jsx as c } from "react/jsx-runtime";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { c as a } from "../index-Cu0xwYjD.js";
 import { Icon as g } from "../atoms/Icons/Icon.js";
-const I = ({
+import "../atoms/Icons/contexts/IconsContext.js";
+const j = ({
   label: n,
   icon: s,
-  iconType: o,
+  iconType: c,
   underlined: e = !0,
   className: m,
   inert: l,
@@ -21,7 +22,7 @@ const I = ({
       "data-name": "Link",
       ...p,
       children: [
-        /* @__PURE__ */ c("span", { className: a({ "link-underline": e }), children: d }),
+        /* @__PURE__ */ o("span", { className: a({ "link-underline": e }), children: d }),
         /* @__PURE__ */ t(
           "span",
           {
@@ -33,11 +34,11 @@ const I = ({
               h,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
                 x,
-                s && /* @__PURE__ */ c(
+                s && /* @__PURE__ */ o(
                   g,
                   {
                     name: s,
-                    iconType: o,
+                    iconType: c,
                     width: "24px",
                     style: { marginInlineStart: "8px" }
                   }
@@ -51,5 +52,5 @@ const I = ({
   );
 };
 export {
-  I as Link
+  j as Link
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-alpha.35",
+  "version": "1.0.0-alpha.37",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -74,8 +74,10 @@
     }
   },
   "scripts": {
+    "predev": "npm run build:icons",
     "dev": "storybook dev -p 6006",
-    "build": "npm run build:icons && vite build && npm run build:icons font",
+    "prebuild": "npm run build:icons",
+    "build": "vite build && npm run build:icons font",
     "build:storybook": "npm run build:icons && storybook build",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --fix",
@@ -102,19 +104,19 @@
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
     "@netsells/storybook-mockdate": "^0.3.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-actions": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-viewport": "^7.6.12",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
-    "@storybook/test": "^7.6.10",
-    "@svgr/rollup": "^8.1.0",
+    "@storybook/addon-a11y": "8.0.6",
+    "@storybook/addon-actions": "8.0.6",
+    "@storybook/addon-essentials": "8.0.6",
+    "@storybook/addon-interactions": "8.0.6",
+    "@storybook/addon-links": "8.0.6",
+    "@storybook/addon-mdx-gfm": "8.0.6",
+    "@storybook/addon-styling": "1.3.7",
+    "@storybook/addon-viewport": "8.0.6",
+    "@storybook/blocks": "8.0.6",
+    "@storybook/react": "8.0.6",
+    "@storybook/react-vite": "8.0.6",
+    "@storybook/test": "8.0.6",
+    "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
@@ -147,14 +149,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "storybook": "^7.6.3",
+    "storybook": "8.0.6",
     "svgtofont": "^4.2.0",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
-    "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.0.1"
   },