@clubmed/trident-ui 1.3.0-rc.2 → 1.3.0-rc.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ClubMed React UI components changelog
 
+# [1.3.0-rc.4](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-rc.3...v1.3.0-rc.4) (2025-08-14)
+
+
+### Bug Fixes
+
+* **package:** update paths for utils to point to helpers ([8c22658](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/8c22658c483592f2dbd2450122f04fd9f265802b))
+
+# [1.3.0-rc.3](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-rc.2...v1.3.0-rc.3) (2025-08-14)
+
+
+### Features
+
+* **tag:** add iconWidth prop and default width handling; update Switch styles ([9e4cc95](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/9e4cc957c539f3adc26046f1e029af0f42cbe90d))
+
 # [1.3.0-rc.2](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-rc.1...v1.3.0-rc.2) (2025-08-11)
 
 

package/molecules/Buttons/v2/Button.d.ts

@@ -18,7 +18,7 @@ export interface ReactButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'a'
 type AnyButtonProps = ButtonProps | ButtonAnchorProps | FakeButtonProps | ReactButtonProps;
 export declare function useButton({ component, disabled, ...props }: AnyButtonProps): {
     attrs: {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -303,7 +303,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
         formTarget?: string | undefined | undefined;
         'data-name': string;
     } | {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -587,7 +587,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
         target?: import('react').HTMLAttributeAnchorTarget | undefined;
         'data-name': string;
     } | {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -863,7 +863,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLSpanElement> | undefined;
         'data-name': string;
     } | {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -1149,7 +1149,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
     Cmp: FunctionComponent<PropsWithChildren<any>>;
 } | {
     attrs: {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -1435,7 +1435,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
         'data-name': string;
         disabled: boolean | undefined;
     } | {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -1720,7 +1720,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
         'data-name': string;
         disabled: boolean | undefined;
     } | {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;
@@ -1998,7 +1998,7 @@ export declare function useButton({ component, disabled, ...props }: AnyButtonPr
         type: string;
         disabled: boolean | undefined;
     } | {
-        color?: import('../../../types/Colors').Colors;
+        color?: import('../../../types').Colors;
         icon?: import('@clubmed/trident-icons').IconicNames;
         iconType?: import('@clubmed/trident-icons').IconicTypes;
         iconWidth?: string;

package/molecules/Forms/Switch.js

@@ -1,61 +1,63 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { c as x } from "../../chunks/index.js";
 import { useValue as f } from "../../hooks/useValue.js";
 /* empty css                    */
 import { useId as w } from "react";
-function k(r) {
-  const s = w(), {
-    id: n = s,
-    name: a = n,
-    className: o,
+function C(s) {
+  const n = w(), {
+    id: o = n,
+    name: a = o,
+    className: i,
     checked: h,
     disabled: t,
-    width: i = 56,
+    width: l = 56,
     onChange: d,
     tabIndex: m = 0,
     children: p
-  } = r, { value: c, setValue: u } = f({
+  } = s, { value: r, setValue: u } = f({
     initialValue: h,
     name: a,
     onChange: d
   });
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ c(
     "label",
     {
-      className: x(o, "relative flex items-center gap-[10px]", {
+      className: x(i, "relative flex items-center gap-[10px]", {
+        "text-b2": !i?.includes("text-"),
+        "font-semibold": !i?.includes("font-"),
         "text-grey": t,
         "cursor-pointer": !t
       }),
       "data-testid": "SwitchContainer",
       children: [
-        /* @__PURE__ */ l("span", { className: "relative", children: [
+        /* @__PURE__ */ c("span", { className: "relative", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
               name: a,
               tabIndex: m,
-              checked: c,
+              checked: r,
               disabled: t,
               role: "switch",
               className: "absolute w-full h-full opacity-0 cursor-pointer",
               onChange: () => {
-                !t && u(!c);
+                !t && u(!r);
               },
               "data-name": "Switch"
             }
           ),
-          /* @__PURE__ */ e("span", { style: { height: i * 4 / 7, width: i }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: i * 3 / 7, children: /* @__PURE__ */ l("g", { children: [
+          /* @__PURE__ */ e("span", { style: { height: l * 4 / 7, width: l }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: l * 3 / 7, children: /* @__PURE__ */ c("g", { children: [
             /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 12, fill: "hsl(var(--color-white))" }),
             /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 4, fill: "hsl(var(--color-grey))" })
           ] }) }) })
         ] }),
-        /* @__PURE__ */ e("span", { className: "text-b2 font-semibold", children: p })
+        /* @__PURE__ */ e("span", { children: p })
       ]
     }
   );
 }
 export {
-  k as Switch
+  C as Switch
 };
 //# sourceMappingURL=Switch.js.map

package/molecules/Forms/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n  width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    checked: initialChecked,\n    disabled,\n    width = 56,\n    onChange,\n    tabIndex = 0,\n    children,\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    initialValue: initialChecked,\n    name,\n    onChange,\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-[10px]', {\n        'text-grey': disabled,\n        'cursor-pointer': !disabled,\n      })}\n      data-testid=\"SwitchContainer\"\n    >\n      <span className=\"relative\">\n        <input\n          type=\"checkbox\"\n          name={name}\n          tabIndex={tabIndex}\n          checked={checked}\n          disabled={disabled}\n          role=\"switch\"\n          className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          data-name=\"Switch\"\n        />\n\n        <span style={{ height: (width * 4) / 7, width }}>\n          <svg viewBox=\"0 0 24 24\" width={(width * 3) / 7}>\n            <g>\n              <circle cx={12} cy={12} r={12} fill=\"hsl(var(--color-white))\" />\n              <circle cx={12} cy={12} r={4} fill=\"hsl(var(--color-grey))\" />\n            </g>\n          </svg>\n        </span>\n      </span>\n\n      <span className=\"text-b2 font-semibold\">{children}</span>\n    </label>\n  );\n}\n"],"names":["Switch","props","internalId","useId","id","name","className","initialChecked","disabled","width","onChange","tabIndex","children","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAUO,SAASA,EAAOC,GAAoB;AACzC,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,SAASC;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,EAAA,IACEX,GAEE,EAAE,OAAOY,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,cAAcR;AAAA,IACd,MAAAF;AAAA,IACA,UAAAK;AAAA,EAAA,CACD;AAED,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWX,GAAW,yCAAyC;AAAA,QACxE,aAAaE;AAAA,QACb,kBAAkB,CAACA;AAAA,MAAA,CACpB;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAAb;AAAA,cACA,UAAAM;AAAA,cACA,SAAAE;AAAA,cACA,UAAAL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,MAAM;AACd,iBAACA,KAAYM,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,aAAU;AAAA,YAAA;AAAA,UAAA;AAAA,4BAGX,QAAA,EAAK,OAAO,EAAE,QAASJ,IAAQ,IAAK,GAAG,OAAAA,EAAA,GACtC,UAAA,gBAAAS,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQT,IAAQ,IAAK,GAC5C,4BAAC,KAAA,EACC,UAAA;AAAA,YAAA,gBAAAS,EAAC,UAAA,EAAO,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,MAAK,0BAAA,CAA0B;AAAA,YAC9D,gBAAAA,EAAC,YAAO,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,MAAK,yBAAA,CAAyB;AAAA,UAAA,EAAA,CAC9D,GACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxD;"}
+{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n  width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    checked: initialChecked,\n    disabled,\n    width = 56,\n    onChange,\n    tabIndex = 0,\n    children,\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    initialValue: initialChecked,\n    name,\n    onChange,\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-[10px]', {\n        'text-b2': !className?.includes('text-'),\n        'font-semibold': !className?.includes('font-'),\n        'text-grey': disabled,\n        'cursor-pointer': !disabled,\n      })}\n      data-testid=\"SwitchContainer\"\n    >\n      <span className=\"relative\">\n        <input\n          type=\"checkbox\"\n          name={name}\n          tabIndex={tabIndex}\n          checked={checked}\n          disabled={disabled}\n          role=\"switch\"\n          className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          data-name=\"Switch\"\n        />\n\n        <span style={{ height: (width * 4) / 7, width }}>\n          <svg viewBox=\"0 0 24 24\" width={(width * 3) / 7}>\n            <g>\n              <circle cx={12} cy={12} r={12} fill=\"hsl(var(--color-white))\" />\n              <circle cx={12} cy={12} r={4} fill=\"hsl(var(--color-grey))\" />\n            </g>\n          </svg>\n        </span>\n      </span>\n\n      <span>{children}</span>\n    </label>\n  );\n}\n"],"names":["Switch","props","internalId","useId","id","name","className","initialChecked","disabled","width","onChange","tabIndex","children","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAUO,SAASA,EAAOC,GAAoB;AACzC,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,SAASC;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,EAAA,IACEX,GAEE,EAAE,OAAOY,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,cAAcR;AAAA,IACd,MAAAF;AAAA,IACA,UAAAK;AAAA,EAAA,CACD;AAED,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWX,GAAW,yCAAyC;AAAA,QACxE,WAAW,CAACA,GAAW,SAAS,OAAO;AAAA,QACvC,iBAAiB,CAACA,GAAW,SAAS,OAAO;AAAA,QAC7C,aAAaE;AAAA,QACb,kBAAkB,CAACA;AAAA,MAAA,CACpB;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAAb;AAAA,cACA,UAAAM;AAAA,cACA,SAAAE;AAAA,cACA,UAAAL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,MAAM;AACd,iBAACA,KAAYM,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,aAAU;AAAA,YAAA;AAAA,UAAA;AAAA,4BAGX,QAAA,EAAK,OAAO,EAAE,QAASJ,IAAQ,IAAK,GAAG,OAAAA,EAAA,GACtC,UAAA,gBAAAS,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQT,IAAQ,IAAK,GAC5C,4BAAC,KAAA,EACC,UAAA;AAAA,YAAA,gBAAAS,EAAC,UAAA,EAAO,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,MAAK,0BAAA,CAA0B;AAAA,YAC9D,gBAAAA,EAAC,YAAO,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,MAAK,yBAAA,CAAyB;AAAA,UAAA,EAAA,CAC9D,GACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA,EAAC,UAAM,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/molecules/Tag.d.ts

@@ -1,8 +1,9 @@
 import { IconicNames } from '@clubmed/trident-icons';
-import { FunctionComponent } from 'react';
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 import { BgColor, BorderColor, TextColor } from '../helpers/colors/colors.js';
 import { LiteralUnion } from '../types/LiteralUnion';
-export interface TagProps {
+import { IconProps } from '../atoms/Icons/contexts/IconsContext';
+export interface TagProps extends Omit<ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * Additional class names
      */
@@ -35,6 +36,7 @@ export interface TagProps {
      * Icon class name
      */
     iconClassName?: string;
+    iconWidth?: IconProps['width'];
     /**
      * Label class name
      */

package/molecules/Tag.js

@@ -1,8 +1,8 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import { Icon as C } from "@clubmed/trident-icons";
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { Icon as N } from "@clubmed/trident-icons";
 import { c as n } from "../chunks/index.js";
-import { getBorderColor as y, getBgColor as N, getTextColor as j } from "../helpers/colors/colors.js";
-const z = ({
+import { getBorderColor as j, getBgColor as B, getTextColor as I } from "../helpers/colors/colors.js";
+const q = ({
   className: i,
   backgroundColor: l = "saffron",
   border: m = l,
@@ -11,14 +11,18 @@ const z = ({
   label: e = "",
   theme: r = "both",
   iconClassName: d,
-  labelClassName: b
+  labelClassName: b,
+  iconWidth: h,
+  ...f
 }) => {
   if (!e && !t)
     return null;
-  const h = y(m), f = N(l), x = j(c), a = !!t, o = r === "both" && !a ? "label" : r, p = o === "both" || o === "swap" || o === "unfold" || o === "none", g = a && (o === "icon" || p), w = o === "label" || o === "pill" || p;
-  return /* @__PURE__ */ u(
+  const x = j(m), g = B(l), w = I(c), a = !!t, o = r === "both" && !a ? "label" : r, p = o === "both" || o === "swap" || o === "unfold" || o === "none", u = a && (o === "icon" || p), C = o === "label" || o === "pill" || p;
+  return /* @__PURE__ */ y(
     "span",
     {
+      role: "note",
+      ...f,
       "data-name": "Tag",
       className: n(
         "box-border inline-flex items-center justify-center gap-x-4 whitespace-nowrap rounded-pill border align-middle font-sans font-semibold",
@@ -34,24 +38,23 @@ const z = ({
           "sm:px-16": o === "swap",
           "sm:pe-16 sm:ps-12": o === "unfold"
         },
-        h,
-        f,
         x,
+        g,
+        w,
         i
       ),
       title: e,
-      role: "note",
       children: [
         o === "monogram" && /* @__PURE__ */ s("span", { className: "size-24 text-center leading-[1.5rem]", children: e }),
-        g && /* @__PURE__ */ s(
-          C,
+        u && /* @__PURE__ */ s(
+          N,
           {
-            width: "1.5rem",
+            width: h ?? "1.5rem",
             name: t,
             className: n({ "sm:hidden": o === "swap" }, d)
           }
         ),
-        w && /* @__PURE__ */ s(
+        C && /* @__PURE__ */ s(
           "span",
           {
             className: n(
@@ -68,6 +71,6 @@ const z = ({
   );
 };
 export {
-  z as Tag
+  q as Tag
 };
 //# sourceMappingURL=Tag.js.map

package/molecules/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../lib/molecules/Tag.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport classNames from 'classnames';\nimport type { FunctionComponent } from 'react';\n\nimport {\n  type BgColor,\n  type BorderColor,\n  getBgColor,\n  getBorderColor,\n  getTextColor,\n  type TextColor,\n} from '@/helpers/colors/colors.js';\nimport type { LiteralUnion } from '@/types/LiteralUnion';\n\nexport interface TagProps {\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Background color\n   */\n  backgroundColor?: LiteralUnion<BgColor>;\n  /**\n   * Text color\n   */\n  color?: LiteralUnion<TextColor>;\n  /**\n   * Border color\n   */\n  border?: LiteralUnion<BorderColor>;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Tag label\n   */\n  label?: string;\n  /**\n   * theme mode\n   */\n  theme?: 'icon' | 'label' | 'both' | 'swap' | 'unfold' | 'monogram' | 'pill' | 'none';\n  /**\n   * Icon class name\n   */\n  iconClassName?: string;\n  /**\n   * Label class name\n   */\n  labelClassName?: string;\n}\n\nexport const Tag: FunctionComponent<TagProps> = ({\n  className,\n  backgroundColor = 'saffron',\n  border = backgroundColor,\n  color = 'black',\n  icon,\n  label = '',\n  theme = 'both',\n  iconClassName,\n  labelClassName,\n}) => {\n  if (!label && !icon) {\n    return null;\n  }\n\n  const borderColor = getBorderColor(border);\n  const bgColor = getBgColor(backgroundColor);\n  const textColor = getTextColor(color);\n\n  const hasIcon = !!icon;\n  const mode = theme === 'both' && !hasIcon ? 'label' : theme;\n\n  const withBoth = mode === 'both' || mode === 'swap' || mode === 'unfold' || mode === 'none';\n  const withIcon = hasIcon && (mode === 'icon' || withBoth);\n  const withLabel = mode === 'label' || mode === 'pill' || withBoth;\n\n  return (\n    <span\n      data-name=\"Tag\"\n      className={classNames(\n        'box-border inline-flex items-center justify-center gap-x-4 whitespace-nowrap rounded-pill border align-middle font-sans font-semibold',\n        {\n          'text-b4': mode !== 'pill',\n          'text-b5': mode === 'pill',\n        },\n        {\n          'p-4': mode !== 'label' && mode !== 'both',\n          'px-16 py-6': mode === 'label',\n          'py-4 pe-16 ps-12': mode === 'both',\n          'px-8 py-4': mode === 'pill',\n          'sm:px-16': mode === 'swap',\n          'sm:pe-16 sm:ps-12': mode === 'unfold',\n        },\n        borderColor,\n        bgColor,\n        textColor,\n        className,\n      )}\n      title={label}\n      role=\"note\"\n    >\n      {mode === 'monogram' && <span className=\"size-24 text-center leading-[1.5rem]\">{label}</span>}\n      {withIcon && (\n        <Icon\n          width=\"1.5rem\"\n          name={icon}\n          className={classNames({ 'sm:hidden': mode === 'swap' }, iconClassName)}\n        />\n      )}\n      {withLabel && (\n        <span\n          className={classNames(\n            {\n              'hidden sm:block': mode === 'swap' || mode === 'unfold',\n            },\n            labelClassName,\n          )}\n        >\n          {label}\n        </span>\n      )}\n    </span>\n  );\n};\n"],"names":["Tag","className","backgroundColor","border","color","icon","label","theme","iconClassName","labelClassName","borderColor","getBorderColor","bgColor","getBgColor","textColor","getTextColor","hasIcon","mode","withBoth","withIcon","withLabel","jsxs","classNames","jsx","Icon"],"mappings":";;;;AAqDO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAASD;AAAA,EACT,OAAAE,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,eAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,MAAI,CAACH,KAAS,CAACD;AACb,WAAO;AAGT,QAAMK,IAAcC,EAAeR,CAAM,GACnCS,IAAUC,EAAWX,CAAe,GACpCY,IAAYC,EAAaX,CAAK,GAE9BY,IAAU,CAAC,CAACX,GACZY,IAAOV,MAAU,UAAU,CAACS,IAAU,UAAUT,GAEhDW,IAAWD,MAAS,UAAUA,MAAS,UAAUA,MAAS,YAAYA,MAAS,QAC/EE,IAAWH,MAAYC,MAAS,UAAUC,IAC1CE,IAAYH,MAAS,WAAWA,MAAS,UAAUC;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAAA,QACT;AAAA,QACA;AAAA,UACE,WAAWL,MAAS;AAAA,UACpB,WAAWA,MAAS;AAAA,QAAA;AAAA,QAEtB;AAAA,UACE,OAAOA,MAAS,WAAWA,MAAS;AAAA,UACpC,cAAcA,MAAS;AAAA,UACvB,oBAAoBA,MAAS;AAAA,UAC7B,aAAaA,MAAS;AAAA,UACtB,YAAYA,MAAS;AAAA,UACrB,qBAAqBA,MAAS;AAAA,QAAA;AAAA,QAEhCP;AAAA,QACAE;AAAA,QACAE;AAAA,QACAb;AAAA,MAAA;AAAA,MAEF,OAAOK;AAAA,MACP,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAW,MAAS,cAAc,gBAAAM,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAjB,GAAM;AAAA,QACrFa,KACC,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAMnB;AAAA,YACN,WAAWiB,EAAW,EAAE,aAAaL,MAAS,OAAA,GAAUT,CAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxEY,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAAA,cACT;AAAA,gBACE,mBAAmBL,MAAS,UAAUA,MAAS;AAAA,cAAA;AAAA,cAEjDR;AAAA,YAAA;AAAA,YAGD,UAAAH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Tag.js","sources":["../../lib/molecules/Tag.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport classNames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport {\n  type BgColor,\n  type BorderColor,\n  getBgColor,\n  getBorderColor,\n  getTextColor,\n  type TextColor,\n} from '@/helpers/colors/colors.js';\nimport type { LiteralUnion } from '@/types/LiteralUnion';\nimport type { IconProps } from '@/atoms/Icons/contexts/IconsContext';\n\nexport interface TagProps extends Omit<ComponentPropsWithoutRef<'span'>, 'color'> {\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Background color\n   */\n  backgroundColor?: LiteralUnion<BgColor>;\n  /**\n   * Text color\n   */\n  color?: LiteralUnion<TextColor>;\n  /**\n   * Border color\n   */\n  border?: LiteralUnion<BorderColor>;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Tag label\n   */\n  label?: string;\n  /**\n   * theme mode\n   */\n  theme?: 'icon' | 'label' | 'both' | 'swap' | 'unfold' | 'monogram' | 'pill' | 'none';\n  /**\n   * Icon class name\n   */\n  iconClassName?: string;\n  iconWidth?: IconProps['width'];\n  /**\n   * Label class name\n   */\n  labelClassName?: string;\n}\n\nexport const Tag: FunctionComponent<TagProps> = ({\n  className,\n  backgroundColor = 'saffron',\n  border = backgroundColor,\n  color = 'black',\n  icon,\n  label = '',\n  theme = 'both',\n  iconClassName,\n  labelClassName,\n  iconWidth,\n  ...attrs\n}) => {\n  if (!label && !icon) {\n    return null;\n  }\n\n  const borderColor = getBorderColor(border);\n  const bgColor = getBgColor(backgroundColor);\n  const textColor = getTextColor(color);\n\n  const hasIcon = !!icon;\n  const mode = theme === 'both' && !hasIcon ? 'label' : theme;\n\n  const withBoth = mode === 'both' || mode === 'swap' || mode === 'unfold' || mode === 'none';\n  const withIcon = hasIcon && (mode === 'icon' || withBoth);\n  const withLabel = mode === 'label' || mode === 'pill' || withBoth;\n\n  return (\n    <span\n      role=\"note\"\n      {...attrs}\n      data-name=\"Tag\"\n      className={classNames(\n        'box-border inline-flex items-center justify-center gap-x-4 whitespace-nowrap rounded-pill border align-middle font-sans font-semibold',\n        {\n          'text-b4': mode !== 'pill',\n          'text-b5': mode === 'pill',\n        },\n        {\n          'p-4': mode !== 'label' && mode !== 'both',\n          'px-16 py-6': mode === 'label',\n          'py-4 pe-16 ps-12': mode === 'both',\n          'px-8 py-4': mode === 'pill',\n          'sm:px-16': mode === 'swap',\n          'sm:pe-16 sm:ps-12': mode === 'unfold',\n        },\n        borderColor,\n        bgColor,\n        textColor,\n        className,\n      )}\n      title={label}\n    >\n      {mode === 'monogram' && <span className=\"size-24 text-center leading-[1.5rem]\">{label}</span>}\n      {withIcon && (\n        <Icon\n          width={iconWidth ?? '1.5rem'}\n          name={icon}\n          className={classNames({ 'sm:hidden': mode === 'swap' }, iconClassName)}\n        />\n      )}\n      {withLabel && (\n        <span\n          className={classNames(\n            {\n              'hidden sm:block': mode === 'swap' || mode === 'unfold',\n            },\n            labelClassName,\n          )}\n        >\n          {label}\n        </span>\n      )}\n    </span>\n  );\n};\n"],"names":["Tag","className","backgroundColor","border","color","icon","label","theme","iconClassName","labelClassName","iconWidth","attrs","borderColor","getBorderColor","bgColor","getBgColor","textColor","getTextColor","hasIcon","mode","withBoth","withIcon","withLabel","jsxs","classNames","jsx","Icon"],"mappings":";;;;AAuDO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAASD;AAAA,EACT,OAAAE,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,MAAI,CAACL,KAAS,CAACD;AACb,WAAO;AAGT,QAAMO,IAAcC,EAAeV,CAAM,GACnCW,IAAUC,EAAWb,CAAe,GACpCc,IAAYC,EAAab,CAAK,GAE9Bc,IAAU,CAAC,CAACb,GACZc,IAAOZ,MAAU,UAAU,CAACW,IAAU,UAAUX,GAEhDa,IAAWD,MAAS,UAAUA,MAAS,UAAUA,MAAS,YAAYA,MAAS,QAC/EE,IAAWH,MAAYC,MAAS,UAAUC,IAC1CE,IAAYH,MAAS,WAAWA,MAAS,UAAUC;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAGZ;AAAA,MACJ,aAAU;AAAA,MACV,WAAWa;AAAAA,QACT;AAAA,QACA;AAAA,UACE,WAAWL,MAAS;AAAA,UACpB,WAAWA,MAAS;AAAA,QAAA;AAAA,QAEtB;AAAA,UACE,OAAOA,MAAS,WAAWA,MAAS;AAAA,UACpC,cAAcA,MAAS;AAAA,UACvB,oBAAoBA,MAAS;AAAA,UAC7B,aAAaA,MAAS;AAAA,UACtB,YAAYA,MAAS;AAAA,UACrB,qBAAqBA,MAAS;AAAA,QAAA;AAAA,QAEhCP;AAAA,QACAE;AAAA,QACAE;AAAA,QACAf;AAAA,MAAA;AAAA,MAEF,OAAOK;AAAA,MAEN,UAAA;AAAA,QAAAa,MAAS,cAAc,gBAAAM,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAnB,GAAM;AAAA,QACrFe,KACC,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOhB,KAAa;AAAA,YACpB,MAAML;AAAA,YACN,WAAWmB,EAAW,EAAE,aAAaL,MAAS,OAAA,GAAUX,CAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxEc,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAAA,cACT;AAAA,gBACE,mBAAmBL,MAAS,UAAUA,MAAS;AAAA,cAAA;AAAA,cAEjDV;AAAA,YAAA;AAAA,YAGD,UAAAH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.0-rc.2",
+  "version": "1.3.0-rc.4",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -51,16 +51,16 @@
       "import": "./molecules/Forms/Checkboxes/index.js",
       "default": "./molecules/Forms/Checkboxes/index.js"
     },
-    "./molecules/Forms/Radios": {
-      "types": "./molecules/Forms/Radios/index.d.ts",
-      "import": "./molecules/Forms/Radios/index.js",
-      "default": "./molecules/Forms/Radios/index.js"
-    },
     "./molecules/Forms/Password": {
       "types": "./molecules/Forms/Password/index.d.ts",
       "import": "./molecules/Forms/Password/index.js",
       "default": "./molecules/Forms/Password/index.js"
     },
+    "./molecules/Forms/Radios": {
+      "types": "./molecules/Forms/Radios/index.d.ts",
+      "import": "./molecules/Forms/Radios/index.js",
+      "default": "./molecules/Forms/Radios/index.js"
+    },
     "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",
@@ -88,9 +88,14 @@
       "default": "./types/*.js"
     },
     "./utils/*": {
-      "types": "./utils/*.d.ts",
-      "import": "./utils/*.js",
-      "default": "./utils/*.js"
+      "types": "./helpers/*.d.ts",
+      "import": "./helpers/*.js",
+      "default": "./helpers/*.js"
+    },
+    "./helpers/*": {
+      "types": "./helpers/*.d.ts",
+      "import": "./helpers/*.js",
+      "default": "./helpers/*.js"
     }
   },
   "scripts": {

package/types/Colors.d.ts

@@ -0,0 +1,2 @@
+import { Colors as EnumColors } from '../helpers/colors/colors';
+export type Colors = keyof typeof EnumColors;

package/types/Colors.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Colors.js.map

package/types/Colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/Direction.d.ts

@@ -0,0 +1 @@
+export type Direction = 'ltr' | 'rtl';

package/types/Direction.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Direction.js.map

package/types/Direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Direction.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/LiteralUnion.d.ts

@@ -0,0 +1 @@
+export type LiteralUnion<LiteralType, BaseType extends string = string> = LiteralType | (BaseType & Record<never, never>);

package/types/LiteralUnion.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=LiteralUnion.js.map

package/types/LiteralUnion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiteralUnion.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/ScrollerLabels.d.ts

@@ -0,0 +1,4 @@
+export interface ScrollerLabels {
+    next: string;
+    previous: string;
+}

package/types/ScrollerLabels.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=ScrollerLabels.js.map

package/types/ScrollerLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollerLabels.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/Theme.d.ts

@@ -0,0 +1,2 @@
+import { Colors } from '@clubmed/ui/types/Colors.js';
+export type Theme = Colors | 'light' | 'dark' | 'yellow' | 'coreRange' | 'exclusiveCollection' | 'happyToCare' | 'joyview' | 'urbanOasis';

package/types/Theme.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Theme.js.map

package/types/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export type * from './Colors';
+export * from './Devices';
+export type * from './LiteralUnion';
+export type * from './ScrollerLabels';
+export type * from './Theme';

package/types/index.js

@@ -0,0 +1,5 @@
+import { QUERIES as E } from "./Devices.js";
+export {
+  E as QUERIES
+};
+//# sourceMappingURL=index.js.map

package/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/types/Colors.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=Colors.d.js.map

package/types/Colors.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Colors.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/Direction.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=Direction.d.js.map

package/types/Direction.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Direction.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/LiteralUnion.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=LiteralUnion.d.js.map

package/types/LiteralUnion.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LiteralUnion.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/ScrollerLabels.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=ScrollerLabels.d.js.map

package/types/ScrollerLabels.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollerLabels.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/types/Theme.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=Theme.d.js.map

package/types/Theme.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Theme.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}