@clubmed/trident-ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/examples/checkbox-demo.js

@@ -1,14 +1,27 @@
 "use client";
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Checkbox as r } from "../ui/forms/checkboxes/Checkbox.js";
-function s() {
-  return /* @__PURE__ */ o("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e(r, { name: "demo", value: "demo-value", children: "Basic checkbox" }),
-    /* @__PURE__ */ e(
-      r,
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { Checkbox as o } from "../ui/forms/checkboxes/Checkbox.js";
+import { useState as r } from "react";
+function l() {
+  const [a, t] = r(!1), [s, h] = r(!1);
+  return /* @__PURE__ */ d("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ c(
+      o,
+      {
+        name: "demo",
+        value: "demo-value",
+        checked: a,
+        onChange: (e) => t(e.target.checked),
+        children: "Basic checkbox"
+      }
+    ),
+    /* @__PURE__ */ c(
+      o,
       {
         name: "demo2",
         value: "demo-value2",
+        checked: s,
+        onChange: (e) => h(e.target.checked),
         validationStatus: "error",
         errorMessage: "This is an error",
         children: "Checkbox with error"
@@ -17,6 +30,6 @@ function s() {
   ] });
 }
 export {
-  s as default
+  l as default
 };
 //# sourceMappingURL=checkbox-demo.js.map

package/examples/checkbox-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-demo.js","sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox name=\"demo\" value=\"demo-value\">\n        Basic checkbox\n      </Checkbox>\n      <Checkbox\n        name=\"demo2\"\n        value=\"demo-value2\"\n        validationStatus=\"error\"\n        errorMessage=\"This is an error\"\n      >\n        Checkbox with error\n      </Checkbox>\n    </div>\n  );\n}\n"],"names":["CheckboxDemo","jsxs","jsx","Checkbox"],"mappings":";;;AAIA,SAAwBA,IAAe;AACrC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAS,MAAK,QAAO,OAAM,cAAa,UAAA,kBAEzC;AAAA,IACA,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,kBAAiB;AAAA,QACjB,cAAa;AAAA,QACd,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}
+{"version":3,"file":"checkbox-demo.js","sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked1, setChecked1] = useState(false);\n  const [checked2, setChecked2] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox\n        name=\"demo\"\n        value=\"demo-value\"\n        checked={checked1}\n        onChange={(e) => setChecked1(e.target.checked)}\n      >\n        Basic checkbox\n      </Checkbox>\n      <Checkbox\n        name=\"demo2\"\n        value=\"demo-value2\"\n        checked={checked2}\n        onChange={(e) => setChecked2(e.target.checked)}\n        validationStatus=\"error\"\n        errorMessage=\"This is an error\"\n      >\n        Checkbox with error\n      </Checkbox>\n    </div>\n  );\n}\n"],"names":["CheckboxDemo","checked1","setChecked1","useState","checked2","setChecked2","jsxs","jsx","Checkbox"],"mappings":";;;;AAKA,SAAwBA,IAAe;AACrC,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK;AAE9C,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASP;AAAA,QACT,UAAU,CAAC,MAAMC,EAAY,EAAE,OAAO,OAAO;AAAA,QAC9C,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASJ;AAAA,QACT,UAAU,CAAC,MAAMC,EAAY,EAAE,OAAO,OAAO;AAAA,QAC7C,kBAAiB;AAAA,QACjB,cAAa;AAAA,QACd,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}

package/examples/number-field-demo.js

@@ -1,19 +1,24 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { NumberField as t } from "../ui/forms/NumberField.js";
-function r() {
+import { NumberField as r } from "../ui/forms/NumberField.js";
+function n() {
   return /* @__PURE__ */ e(
-    t,
+    r,
     {
       label: "Quantity",
       description: "Select the number of items",
       min: 0,
       max: 10,
-      value: 3
+      value: 3,
+      labels: {
+        increase: "Increase",
+        decrease: "Decrease",
+        input: "Input"
+      }
     }
   );
 }
 export {
-  r as default
+  n as default
 };
 //# sourceMappingURL=number-field-demo.js.map

package/examples/number-field-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field-demo.js","sources":["../../lib/examples/number-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@/ui/forms/NumberField';\n\nexport default function NumberFieldDemo() {\n  return (\n    <NumberField\n      label=\"Quantity\"\n      description=\"Select the number of items\"\n      min={0}\n      max={10}\n      value={3}\n    />\n  );\n}\n"],"names":["NumberFieldDemo","jsx","NumberField"],"mappings":";;;AAIA,SAAwBA,IAAkB;AACxC,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"number-field-demo.js","sources":["../../lib/examples/number-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@/ui/forms/NumberField';\n\nexport default function NumberFieldDemo() {\n  return (\n    <NumberField\n      label=\"Quantity\"\n      description=\"Select the number of items\"\n      min={0}\n      max={10}\n      value={3}\n      labels={{\n        increase: 'Increase',\n        decrease: 'Decrease',\n        input: 'Input',\n      }}\n    />\n  );\n}\n"],"names":["NumberFieldDemo","jsx","NumberField"],"mappings":";;;AAIA,SAAwBA,IAAkB;AACxC,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,QACN,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;"}

package/examples/radio-demo.js

@@ -1,10 +1,43 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import { Radio as e } from "../ui/forms/radios/Radio.js";
-function n() {
-  return /* @__PURE__ */ o(e, { name: "option", value: "option1", checked: !1, children: "Select this option" });
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { Radio as a } from "../ui/forms/radios/Radio.js";
+import { useState as l } from "react";
+function d() {
+  const [o, t] = l("");
+  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ n(
+      a,
+      {
+        name: "option",
+        value: "option1",
+        checked: o === "option1",
+        onChange: (e) => t(e.target.value),
+        children: "Option 1"
+      }
+    ),
+    /* @__PURE__ */ n(
+      a,
+      {
+        name: "option",
+        value: "option2",
+        checked: o === "option2",
+        onChange: (e) => t(e.target.value),
+        children: "Option 2"
+      }
+    ),
+    /* @__PURE__ */ n(
+      a,
+      {
+        name: "option",
+        value: "option3",
+        checked: o === "option3",
+        onChange: (e) => t(e.target.value),
+        children: "Option 3"
+      }
+    )
+  ] });
 }
 export {
-  n as default
+  d as default
 };
 //# sourceMappingURL=radio-demo.js.map

package/examples/radio-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-demo.js","sources":["../../lib/examples/radio-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Radio } from '@/ui/forms/radios/Radio';\n\nexport default function RadioDemo() {\n  return (\n    <Radio name=\"option\" value=\"option1\" checked={false}>\n      Select this option\n    </Radio>\n  );\n}\n"],"names":["RadioDemo","jsx","Radio"],"mappings":";;;AAIA,SAAwBA,IAAY;AAClC,SACE,gBAAAC,EAACC,KAAM,MAAK,UAAS,OAAM,WAAU,SAAS,IAAO,UAAA,qBAAA,CAErD;AAEJ;"}
+{"version":3,"file":"radio-demo.js","sources":["../../lib/examples/radio-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Radio } from '@/ui/forms/radios/Radio';\nimport { useState } from 'react';\n\nexport default function RadioDemo() {\n  const [selectedValue, setSelectedValue] = useState<string>('');\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <Radio\n        name=\"option\"\n        value=\"option1\"\n        checked={selectedValue === 'option1'}\n        onChange={(e) => setSelectedValue(e.target.value)}\n      >\n        Option 1\n      </Radio>\n      <Radio\n        name=\"option\"\n        value=\"option2\"\n        checked={selectedValue === 'option2'}\n        onChange={(e) => setSelectedValue(e.target.value)}\n      >\n        Option 2\n      </Radio>\n      <Radio\n        name=\"option\"\n        value=\"option3\"\n        checked={selectedValue === 'option3'}\n        onChange={(e) => setSelectedValue(e.target.value)}\n      >\n        Option 3\n      </Radio>\n    </div>\n  );\n}\n"],"names":["RadioDemo","selectedValue","setSelectedValue","useState","jsxs","jsx","Radio"],"mappings":";;;;AAKA,SAAwBA,IAAY;AAClC,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAiB,EAAE;AAE7D,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASL,MAAkB;AAAA,QAC3B,UAAU,CAAC,MAAMC,EAAiB,EAAE,OAAO,KAAK;AAAA,QACjD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASL,MAAkB;AAAA,QAC3B,UAAU,CAAC,MAAMC,EAAiB,EAAE,OAAO,KAAK;AAAA,QACjD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASL,MAAkB;AAAA,QAC3B,UAAU,CAAC,MAAMC,EAAiB,EAAE,OAAO,KAAK;AAAA,QACjD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}

package/examples/radio-group-demo.js

@@ -1,25 +1,27 @@
 "use client";
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { FormControl as a } from "../ui/forms/FormControl.js";
 import { RadioGroup as p } from "../ui/forms/radios/RadioGroup.js";
-import { Radio as e } from "../ui/forms/radios/Radio.js";
-import { useState as a } from "react";
-function c() {
-  const [i, t] = a("option1");
-  return /* @__PURE__ */ r(
+import { Radio as r } from "../ui/forms/radios/Radio.js";
+import { useState as l } from "react";
+function h() {
+  const [e, i] = l("option1");
+  return /* @__PURE__ */ o(a, { label: "Choose an option", id: "demo-radio-group", children: /* @__PURE__ */ t(
     p,
     {
-      value: i,
-      onChange: (u, n) => t(n),
+      value: e,
+      onChange: (d, n) => i(n),
       name: "demo-radio-group",
+      "aria-labelledby": "demo-radio-group",
       children: [
-        /* @__PURE__ */ o(e, { value: "option1", children: "Option 1" }),
-        /* @__PURE__ */ o(e, { value: "option2", children: "Option 2" }),
-        /* @__PURE__ */ o(e, { value: "option3", children: "Option 3" })
+        /* @__PURE__ */ o(r, { value: "option1", children: "Option 1" }),
+        /* @__PURE__ */ o(r, { value: "option2", children: "Option 2" }),
+        /* @__PURE__ */ o(r, { value: "option3", children: "Option 3" })
       ]
     }
-  );
+  ) });
 }
 export {
-  c as default
+  h as default
 };
 //# sourceMappingURL=radio-group-demo.js.map

package/examples/radio-group-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group-demo.js","sources":["../../lib/examples/radio-group-demo.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup } from '@/ui/forms/radios/RadioGroup';\nimport { Radio } from '@/ui/forms/radios/Radio';\nimport { useState } from 'react';\n\nexport default function RadioGroupDemo() {\n  const [value, setValue] = useState('option1');\n\n  return (\n    <RadioGroup\n      value={value}\n      onChange={(_, newValue) => setValue(newValue)}\n      name=\"demo-radio-group\"\n    >\n      <Radio value=\"option1\">Option 1</Radio>\n      <Radio value=\"option2\">Option 2</Radio>\n      <Radio value=\"option3\">Option 3</Radio>\n    </RadioGroup>\n  );\n}\n"],"names":["RadioGroupDemo","value","setValue","useState","jsxs","RadioGroup","_","newValue","jsx","Radio"],"mappings":";;;;;AAMA,SAAwBA,IAAiB;AACvC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,SAAS;AAE5C,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAJ;AAAA,MACA,UAAU,CAACK,GAAGC,MAAaL,EAASK,CAAQ;AAAA,MAC5C,MAAK;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,WAAU,UAAA,YAAQ;AAAA,QAC/B,gBAAAD,EAACC,GAAA,EAAM,OAAM,WAAU,UAAA,YAAQ;AAAA,QAC/B,gBAAAD,EAACC,GAAA,EAAM,OAAM,WAAU,UAAA,WAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrC;"}
+{"version":3,"file":"radio-group-demo.js","sources":["../../lib/examples/radio-group-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormControl } from '@/ui/forms/FormControl';\nimport { RadioGroup } from '@/ui/forms/radios/RadioGroup';\nimport { Radio } from '@/ui/forms/radios/Radio';\nimport { useState } from 'react';\n\nexport default function RadioGroupDemo() {\n  const [value, setValue] = useState('option1');\n\n  return (\n    <FormControl label=\"Choose an option\" id=\"demo-radio-group\">\n      <RadioGroup\n        value={value}\n        onChange={(_, newValue) => setValue(newValue)}\n        name=\"demo-radio-group\"\n        aria-labelledby=\"demo-radio-group\"\n      >\n        <Radio value=\"option1\">Option 1</Radio>\n        <Radio value=\"option2\">Option 2</Radio>\n        <Radio value=\"option3\">Option 3</Radio>\n      </RadioGroup>\n    </FormControl>\n  );\n}\n"],"names":["RadioGroupDemo","value","setValue","useState","jsx","FormControl","jsxs","RadioGroup","_","newValue","Radio"],"mappings":";;;;;;AAOA,SAAwBA,IAAiB;AACvC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,SAAS;AAE5C,SACE,gBAAAC,EAACC,GAAA,EAAY,OAAM,oBAAmB,IAAG,oBACvC,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAN;AAAA,MACA,UAAU,CAACO,GAAGC,MAAaP,EAASO,CAAQ;AAAA,MAC5C,MAAK;AAAA,MACL,mBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAM,OAAM,WAAU,UAAA,YAAQ;AAAA,QAC/B,gBAAAN,EAACM,GAAA,EAAM,OAAM,WAAU,UAAA,YAAQ;AAAA,QAC/B,gBAAAN,EAACM,GAAA,EAAM,OAAM,WAAU,UAAA,WAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEnC;AAEJ;"}

package/examples/text-field-demo.js

@@ -28,9 +28,20 @@ function r() {
         label: "With Icon",
         description: "This field has an icon",
         placeholder: "Search...",
-        icon: "Error",
+        icon: "PeopleSingle",
         className: "max-w-sm",
-        validationStatus: "error"
+        validationStatus: "success"
+      }
+    ),
+    /* @__PURE__ */ e(
+      s,
+      {
+        label: "Error",
+        description: "This field has an error message",
+        placeholder: "Enter your text",
+        className: "max-w-sm",
+        validationStatus: "error",
+        errorMessage: "This is an error message"
       }
     ),
     /* @__PURE__ */ e(

package/examples/text-field-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-demo.js","sources":["../../lib/examples/text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { TextField } from '@/ui/forms/TextField';\n\nexport default function TextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <TextField\n        label=\"Email Address\"\n        description=\"Enter your email address\"\n        placeholder=\"you@example.com\"\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"Disabled\"\n        description=\"This field is disabled\"\n        placeholder=\"Disabled input\"\n        disabled\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"With Icon\"\n        description=\"This field has an icon\"\n        placeholder=\"Search...\"\n        icon=\"Error\"\n        className=\"max-w-sm\"\n        validationStatus=\"error\"\n      />\n      <TextField\n        label=\"Success\"\n        description=\"This field has a success message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n    </div>\n  );\n}\n"],"names":["TextFieldDemo","jsxs","jsx","TextField"],"mappings":";;;AAIA,SAAwBA,IAAgB;AACtC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,UAAQ;AAAA,QACR,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAU;AAAA,QACV,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnB,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ;"}
+{"version":3,"file":"text-field-demo.js","sources":["../../lib/examples/text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { TextField } from '@/ui/forms/TextField';\n\nexport default function TextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <TextField\n        label=\"Email Address\"\n        description=\"Enter your email address\"\n        placeholder=\"you@example.com\"\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"Disabled\"\n        description=\"This field is disabled\"\n        placeholder=\"Disabled input\"\n        disabled\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"With Icon\"\n        description=\"This field has an icon\"\n        placeholder=\"Search...\"\n        icon=\"PeopleSingle\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n      <TextField\n        label=\"Error\"\n        description=\"This field has an error message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"error\"\n        errorMessage=\"This is an error message\"\n      />\n      <TextField\n        label=\"Success\"\n        description=\"This field has a success message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n    </div>\n  );\n}\n"],"names":["TextFieldDemo","jsxs","jsx","TextField"],"mappings":";;;AAIA,SAAwBA,IAAgB;AACtC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,UAAQ;AAAA,QACR,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAU;AAAA,QACV,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnB,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,kBAAiB;AAAA,QACjB,cAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAEf,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.28",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/ui/Link.js

@@ -1,19 +1,21 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { c as i } from "../chunks/clsx.js";
-import { Icon as u } from "@clubmed/trident-icons";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { c as o } from "../chunks/clsx.js";
+import { Icon as h } from "@clubmed/trident-icons";
 import { twMerge as k } from "./helpers/twMerge.js";
 const S = ({
   label: n,
   icon: s,
   component: c = "a",
   iconType: m,
-  underlined: e = !0,
+  underlined: r = !0,
   className: l,
   inert: p,
   width: d = "24px",
-  ...x
+  ...u
 }) => {
-  const r = n.lastIndexOf(" "), a = r === -1 ? n.length : r, g = n.substring(0, 1), f = n.substring(1, a + 1), h = n.substring(a);
+  if (!n)
+    return null;
+  const e = n.lastIndexOf(" "), a = e === -1 ? n.length : e, x = n.substring(0, 1), f = n.substring(1, a + 1), g = n.substring(a);
   return /* @__PURE__ */ t(
     p ? "span" : c,
     {
@@ -22,22 +24,22 @@ const S = ({
         l
       ),
       "data-name": "Link",
-      ...x,
+      ...u,
       children: [
-        /* @__PURE__ */ o("span", { className: i({ "link-underline": e }), children: g }),
+        /* @__PURE__ */ i("span", { className: o({ "link-underline": r }), children: x }),
         /* @__PURE__ */ t(
           "span",
           {
-            className: i("hoverable", {
+            className: o("hoverable", {
               "has-icon": s,
-              "link-underline": e
+              "link-underline": r
             }),
             children: [
               f,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
-                h,
-                s && /* @__PURE__ */ o(
-                  u,
+                g,
+                s && /* @__PURE__ */ i(
+                  h,
                   {
                     name: s,
                     iconType: m,

package/ui/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../lib/ui/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from './helpers/twMerge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge(\n        'decoration-none link-container cursor-pointer text-b3 font-semibold',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","width","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","twMerge","jsx","clsx","Icon"],"mappings":";;;;AAuCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,EAAM,YAAY,GAAG,GACjCU,IAAYD,MAAc,KAAKT,EAAM,SAASS,GAE9CE,IAAQX,EAAM,UAAU,GAAG,CAAC,GAC5BY,IAASZ,EAAM,UAAU,GAAGU,IAAY,CAAC,GACzCG,IAAOb,EAAM,UAAUU,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcR,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWa;AAAA,QACT;AAAA,QACAV;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,kBAAkBb,GAAY,GAAI,UAAAO,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,EAAK,aAAa;AAAA,cAC3B,YAAYhB;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAQ;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAZ,KACC,gBAAAe;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAMjB;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAAI;AAAA,oBACA,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Link.js","sources":["../../lib/ui/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from './helpers/twMerge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  if (!label) {\n    return null;\n  }\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge(\n        'decoration-none link-container cursor-pointer text-b3 font-semibold',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","width","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","twMerge","jsx","clsx","Icon"],"mappings":";;;;AAuCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,MAAI,CAACR;AACH,WAAO;AAET,QAAMS,IAAYT,EAAM,YAAY,GAAG,GACjCU,IAAYD,MAAc,KAAKT,EAAM,SAASS,GAE9CE,IAAQX,EAAM,UAAU,GAAG,CAAC,GAC5BY,IAASZ,EAAM,UAAU,GAAGU,IAAY,CAAC,GACzCG,IAAOb,EAAM,UAAUU,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcR,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWa;AAAA,QACT;AAAA,QACAV;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,kBAAkBb,GAAY,GAAI,UAAAO,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,EAAK,aAAa;AAAA,cAC3B,YAAYhB;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAQ;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAZ,KACC,gBAAAe;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAMjB;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAAI;AAAA,oBACA,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}