@clubmed/trident-ui 1.0.0-alpha.31 → 1.0.0-alpha.33

package/molecules/Forms/RadioGroup.js

@@ -1,10 +1,10 @@
 import { jsx as g } from "react/jsx-runtime";
-import { Children as v, isValidElement as x, cloneElement as N } from "react";
-import { useValue as V } from "../../hooks/useValue.js";
-import { c as C } from "../../index-Cu0xwYjD.js";
-let E = 0;
+import { Children as v, isValidElement as x, cloneElement as V } from "react";
+import { useValue as C } from "../../hooks/useValue.js";
+import { c as E } from "../../index-Cu0xwYjD.js";
+let N = 0;
 function I({
-  id: o = "radio-group-" + E++,
+  id: o = "radio-group-" + N++,
   name: r = o,
   children: s,
   value: u,
@@ -15,13 +15,13 @@ function I({
   tabIndex: i = 0,
   ...a
 }) {
-  const { value: c, setValue: f } = V({
+  const { value: c, setValue: f } = C({
     name: r,
     initialValue: u,
     defaultValue: l,
     onChange: m
   });
-  return /* @__PURE__ */ g("div", { ...a, className: C("flex gap-12", a.className), role: "radiogroup", children: v.map(s, (e, p) => x(e) ? N(e, {
+  return /* @__PURE__ */ g("div", { ...a, className: E("flex gap-12", a.className), role: "radiogroup", children: v.map(s, (e, p) => x(e) ? V(e, {
     ...e.props,
     name: r,
     id: `${o}-${p}`,

package/molecules/Forms/Switch.js

@@ -3,7 +3,7 @@ import { c as f } from "../../index-Cu0xwYjD.js";
 import { useValue as x } from "../../hooks/useValue.js";
 import "../../controls-l0sNRNKZ.js";
 let g = 0;
-function N({
+function k({
   id: a = `switch-${++g}`,
   name: t = a,
   className: s,
@@ -56,5 +56,5 @@ function N({
   );
 }
 export {
-  N as Switch
+  k as Switch
 };

package/molecules/Forms/TextField.d.ts

@@ -1,12 +1,13 @@
-import { Iconics } from '../../atoms/Icon';
 import { FormControlProps } from './FormControl.js';
+import { IconicNames, IconicTypes } from '../../atoms/Icons';
 export interface TextFieldProps<Value> extends FormControlProps<Value> {
     /**
      * Description text
      */
     description?: string;
     hasDropdown?: boolean;
-    icon?: Iconics;
+    icon?: IconicNames;
+    iconType?: IconicTypes;
     errorMessage?: string;
     dataTestId?: string;
 }

package/molecules/Forms/TextField.js

@@ -1,52 +1,53 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { c } from "../../index-Cu0xwYjD.js";
-import { useValue as D } from "../../hooks/useValue.js";
-import { useInternalStatus as k } from "../../hooks/useInternalStatus.js";
-import { Icon as r } from "../../atoms/Icon.js";
-import { FormControl as C } from "./FormControl.js";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { c as p } from "../../index-Cu0xwYjD.js";
+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";
 let F = 0;
-const G = (u) => {
+const M = (u) => {
   const {
     id: a = `text-field-${++F}`,
     name: s = a,
-    label: p,
-    value: m,
-    description: x,
-    validationStatus: d = "default",
+    label: m,
+    value: x,
+    description: b,
+    validationStatus: c = "default",
     hasDropdown: l = !1,
     icon: o,
-    errorMessage: b,
+    iconType: n,
+    errorMessage: f,
     disabled: i = !1,
-    className: f,
-    dataTestId: h = "TextField",
-    onChange: g,
-    ...v
-  } = u, { value: w, setValue: N } = D({ name: s, initialValue: m, onChange: g }), e = k({
+    className: h,
+    dataTestId: g = "TextField",
+    onChange: v,
+    ...w
+  } = u, { value: y, setValue: N } = k({ name: s, initialValue: x, onChange: v }), e = C({
     isDisabled: i,
-    validationStatus: d
+    validationStatus: c
   });
   return /* @__PURE__ */ t(
-    C,
+    T,
     {
       id: a,
-      label: p,
-      description: x,
+      label: m,
+      description: b,
       dataName: "TextField",
-      dataTestId: h,
+      dataTestId: g,
       disabled: i,
-      validationStatus: d,
-      errorMessage: b,
-      children: /* @__PURE__ */ n("div", { className: "relative", children: [
+      validationStatus: c,
+      errorMessage: f,
+      children: /* @__PURE__ */ d("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "input",
           {
-            ...v,
+            ...w,
             id: a,
             name: s,
             disabled: i,
-            value: w,
-            onChange: (y) => N(y.target.value),
-            className: c(
+            value: y,
+            onChange: (D) => N(D.target.value),
+            className: p(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
@@ -58,15 +59,15 @@ const G = (u) => {
                 "border-red": e === "error",
                 "border-green": e === "success"
               },
-              f
+              h
             ),
             "aria-label": s
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ d(
           "div",
           {
-            className: c(
+            className: p(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -76,10 +77,10 @@ const G = (u) => {
             ),
             children: [
               o && /* @__PURE__ */ t(r, { name: o, width: "24px" }),
-              /* @__PURE__ */ n("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px" }),
-                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px" }),
-                l && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black" }) })
+              /* @__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 }) })
               ] })
             ]
           }
@@ -89,5 +90,5 @@ const G = (u) => {
   );
 };
 export {
-  G as TextField
+  M as TextField
 };

package/molecules/HamburgerIcon.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { b as C, a as t } from "../react-spring_web.modern-CaA7KCmz.js";
+import { a as C, b as t } from "../react-spring_web.modern-BPtZcx1z.js";
 const m = ({
   width: e = "24px",
   isActive: a = !1

package/molecules/Link.d.ts

@@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes, FunctionComponent } from 'react';
-import { Iconics } from '../atoms/Icon';
+import { IconicNames, IconicTypes } from '../atoms/Icons';
 interface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement> extends AnchorHTMLAttributes<T> {
     /**
      * Label text
@@ -8,7 +8,8 @@ interface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement> extends Anc
     /**
      * Icon name
      */
-    icon?: Iconics;
+    icon?: IconicNames;
+    iconType?: IconicTypes;
     /**
      * Underlined
      */

package/molecules/Link.js

@@ -1,26 +1,27 @@
 import { jsxs as t, jsx as c } from "react/jsx-runtime";
 import { c as a } from "../index-Cu0xwYjD.js";
-import { Icon as x } from "../atoms/Icon.js";
-const f = ({
+import { Icon as g } from "../atoms/Icons/Icon.js";
+const I = ({
   label: n,
   icon: s,
+  iconType: o,
   underlined: e = !0,
-  className: o,
-  inert: m,
-  ...l
+  className: m,
+  inert: l,
+  ...p
 }) => {
-  const r = n.lastIndexOf(" "), i = r === -1 ? n.length : r, p = n.at(0), d = n.substring(1, i + 1), h = n.substring(i);
+  const r = n.lastIndexOf(" "), i = r === -1 ? n.length : r, d = n.at(0), h = n.substring(1, i + 1), x = n.substring(i);
   return /* @__PURE__ */ t(
-    m ? "span" : "a",
+    l ? "span" : "a",
     {
       className: a(
         "text-b3 decoration-none link-container cursor-pointer text-inherit",
-        o
+        m
       ),
       "data-name": "Link",
-      ...l,
+      ...p,
       children: [
-        /* @__PURE__ */ c("span", { className: a({ "link-underline": e }), children: p }),
+        /* @__PURE__ */ c("span", { className: a({ "link-underline": e }), children: d }),
         /* @__PURE__ */ t(
           "span",
           {
@@ -29,10 +30,18 @@ const f = ({
               "link-underline": e
             }),
             children: [
-              d,
+              h,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
-                h,
-                s && /* @__PURE__ */ c(x, { name: s, width: "24px", style: { marginInlineStart: "8px" } })
+                x,
+                s && /* @__PURE__ */ c(
+                  g,
+                  {
+                    name: s,
+                    iconType: o,
+                    width: "24px",
+                    style: { marginInlineStart: "8px" }
+                  }
+                )
               ] })
             ]
           }
@@ -42,5 +51,5 @@ const f = ({
   );
 };
 export {
-  f as Link
+  I as Link
 };

package/molecules/Loader.js

@@ -1,5 +1,5 @@
 import { jsx as l, jsxs as a } from "react/jsx-runtime";
-import { u as n, a as r } from "../react-spring_web.modern-CaA7KCmz.js";
+import { c as n, b as r } from "../react-spring_web.modern-BPtZcx1z.js";
 import { Backdrop as o } from "./Backdrop.js";
 const h = /* @__PURE__ */ a("svg", { viewBox: "0 0 140 140", width: 140, children: [
   /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-alpha.31",
+  "version": "1.0.0-alpha.33",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -23,9 +23,7 @@
   "main": "index.js",
   "exports": {
     ".": "./index.js",
-    "./style.css": {
-      "browser": "./styles/index.css"
-    },
+    "./style.css": "./styles/index.css",
     "./tailwind": "./tailwind/tailwind.preset.js",
     "./package.json": "./package.json",
     "./atoms/*": {
@@ -56,8 +54,7 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "vite build && npm run build:copy",
-    "build:copy": "cp -rf styles dist/styles && cp package.json dist/package.json && cp .npmignore dist/.npmignore && cp README.md dist/README.md && cp CHANGELOG.md dist/CHANGELOG.md",
+    "build": "npm run build:icons && vite build && npm run build:icons font",
     "build:storybook": "storybook build",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --fix",
@@ -65,7 +62,9 @@
     "test": "vitest run",
     "test:dev": "vitest watch",
     "test:update": "vitest -u",
-    "prepare": "husky"
+    "prepare": "husky",
+    "build:icons": "NODE_NO_WARNINGS=1 node --loader ts-node/esm ./tools/icons/index.ts",
+    "postinstall": "npm run build:icons"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
@@ -95,36 +94,46 @@
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/test": "^7.6.10",
-    "@testing-library/jest-dom": "^6.3.0",
     "@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",
+    "@types/fs-extra": "^11.0.4",
+    "@types/picomatch": "^2.3.3",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.3.1",
+    "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
+    "change-case": "^5.4.3",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "glob": "^10.3.10",
+    "figures": "^6.1.0",
+    "fs-extra": "^11.2.0",
+    "globby": "^14.0.1",
     "husky": "^9.0.11",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.2.2",
+    "picomatch": "^4.0.1",
     "postcss": "^8.4.32",
     "prettier": "2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "storybook": "^7.6.3",
+    "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-svgr": "^4.2.0",
     "vitest": "^1.0.1"

package/{react-spring_web.modern-CaA7KCmz.js → react-spring_web.modern-BPtZcx1z.js}

@@ -21967,9 +21967,9 @@ var fM = DO(cM, {
   getComponentProps: ({ scrollTop: o, scrollLeft: v, ...m }) => m
 }), gM = fM.animated;
 export {
-  gM as a,
-  QO as b,
-  yM as c,
+  QO as a,
+  gM as b,
+  mM as c,
   NO as d,
-  mM as u
+  yM as u
 };