@clubmed/trident-ui 2.0.0-beta.41 → 2.0.0-beta.43

package/examples/countdown-demo.d.ts

@@ -0,0 +1 @@
+export default function CountdownDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/countdown-demo.js

@@ -0,0 +1,39 @@
+"use client";
+import { Countdown as e } from "../ui/Countdown.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/countdown-demo.tsx
+var r = {
+	days: "days",
+	hours: "hours",
+	minutes: "minutes",
+	seconds: "seconds"
+}, i = /* @__PURE__ */ new Date();
+i.setDate(i.getDate() + 1);
+var a = /* @__PURE__ */ new Date();
+a.setDate(a.getDate() + 7);
+function o() {
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ t(e, {
+			countdown: {
+				to: i.toISOString(),
+				labels: r
+			},
+			theme: "saffron"
+		}), /* @__PURE__ */ t("div", {
+			className: "bg-ultramarine p-6 rounded-16",
+			children: /* @__PURE__ */ t(e, {
+				countdown: {
+					to: a.toISOString(),
+					labels: r
+				},
+				theme: "white",
+				className: "text-white"
+			})
+		})]
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=countdown-demo.js.map

package/examples/countdown-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown-demo.js","names":[],"sources":["../../lib/examples/countdown-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Countdown } from '@/ui/Countdown';\n\nconst labels = {\n  days: 'days',\n  hours: 'hours',\n  minutes: 'minutes',\n  seconds: 'seconds',\n};\n\nconst tomorrow = new Date();\ntomorrow.setDate(tomorrow.getDate() + 1);\n\nconst nextWeek = new Date();\nnextWeek.setDate(nextWeek.getDate() + 7);\n\nexport default function CountdownDemo() {\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <Countdown countdown={{ to: tomorrow.toISOString(), labels }} theme=\"saffron\" />\n      <div className=\"bg-ultramarine p-6 rounded-16\">\n        <Countdown\n          countdown={{ to: nextWeek.toISOString(), labels }}\n          theme=\"white\"\n          className=\"text-white\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAS;CACb,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEK,oBAAW,IAAI,MAAM;AAC3B,EAAS,QAAQ,EAAS,SAAS,GAAG,EAAE;AAExC,IAAM,oBAAW,IAAI,MAAM;AAC3B,EAAS,QAAQ,EAAS,SAAS,GAAG,EAAE;AAExC,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAW,WAAW;IAAE,IAAI,EAAS,aAAa;IAAE;IAAQ;GAAE,OAAM;GAAY,CAAA,EAChF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,WAAW;KAAE,IAAI,EAAS,aAAa;KAAE;KAAQ;IACjD,OAAM;IACN,WAAU;IACV,CAAA;GACE,CAAA,CAAA"}

package/examples/floating-label-text-field-demo.d.ts

@@ -0,0 +1 @@
+export default function FloatingLabelTextFieldDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/floating-label-text-field-demo.js

@@ -0,0 +1,32 @@
+"use client";
+import { FloatingLabelTextField as e } from "../ui/forms/FloatingLabelTextField.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/floating-label-text-field-demo.tsx
+function r() {
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-16 w-full max-w-[496px]",
+		children: [
+			/* @__PURE__ */ t(e, { label: "Select" }),
+			/* @__PURE__ */ t(e, {
+				label: "Select",
+				value: "First value of the list",
+				hasDropdown: !0
+			}),
+			/* @__PURE__ */ t(e, {
+				label: "Select",
+				value: "First value of the list",
+				validationStatus: "error",
+				errorMessage: "Please select a value",
+				hasDropdown: !0
+			}),
+			/* @__PURE__ */ t(e, {
+				label: "Select",
+				disabled: !0
+			})
+		]
+	});
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=floating-label-text-field-demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floating-label-text-field-demo.js","names":[],"sources":["../../lib/examples/floating-label-text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FloatingLabelTextField } from '@/ui/forms/FloatingLabelTextField';\n\nexport default function FloatingLabelTextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16 w-full max-w-[496px]\">\n      <FloatingLabelTextField label=\"Select\" />\n\n      <FloatingLabelTextField label=\"Select\" value=\"First value of the list\" hasDropdown />\n\n      <FloatingLabelTextField\n        label=\"Select\"\n        value=\"First value of the list\"\n        validationStatus=\"error\"\n        errorMessage=\"Please select a value\"\n        hasDropdown\n      />\n\n      <FloatingLabelTextField label=\"Select\" disabled />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAA6B;AACnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAwB,OAAM,UAAW,CAAA;GAEzC,kBAAC,GAAD;IAAwB,OAAM;IAAS,OAAM;IAA0B,aAAA;IAAc,CAAA;GAErF,kBAAC,GAAD;IACE,OAAM;IACN,OAAM;IACN,kBAAiB;IACjB,cAAa;IACb,aAAA;IACA,CAAA;GAEF,kBAAC,GAAD;IAAwB,OAAM;IAAS,UAAA;IAAW,CAAA"}

package/package.json

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

package/styles/theme.css

@@ -1,7 +1,5 @@
 @theme {
   /* Colors */
-
-  --color-*: initial;
   --color-current: currentColor;
   --color-transparent: transparent;
 

package/ui/Countdown.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { Theme } from './types/Theme';
+export interface CountdownLabels {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+export interface CountdownProps extends Omit<ComponentProps<'div'>, 'children'> {
+    countdown: {
+        labels: CountdownLabels;
+        to: string;
+    };
+    theme?: Theme;
+}
+export declare function Countdown({ className, countdown, theme, ...props }: CountdownProps): import("react/jsx-runtime").JSX.Element;

package/ui/Countdown.js

@@ -0,0 +1,61 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { FlipCard as t } from "./FlipCard.js";
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/ui/Countdown.tsx
+var o = 1e3, s = o * 60, c = s * 60, l = c * 24, u = (e) => Math.max(Math.floor(e / l), 0), d = (e) => Math.max(Math.floor(e % l / c), 0), f = (e) => Math.max(Math.floor(e % c / s), 0), p = (e) => Math.max(Math.floor(e % s / o), 0);
+function m({ className: n, countdown: r, theme: o = "white", ...s }) {
+	let { to: c, labels: l } = r, [u, d, f, p] = h(c), m = [
+		[u, l.days],
+		[d, l.hours],
+		[f, l.minutes],
+		[p, l.seconds]
+	];
+	return /* @__PURE__ */ i("div", {
+		"data-name": "Countdown",
+		role: "timer",
+		...s,
+		dir: "ltr",
+		className: e("flex gap-x-4", n),
+		children: m.map(([e, n], r) => {
+			let s = m.slice(0, r).every(([e]) => e === 0), c = e === 0 && s ? "black" : o;
+			return /* @__PURE__ */ a("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ i("div", {
+					className: "flex flex-row items-center gap-x-2 px-2",
+					children: e.toString().padStart(2, "0").split("").map((e, n) => /* @__PURE__ */ i(t, {
+						theme: c,
+						value: parseInt(e)
+					}, n))
+				}), /* @__PURE__ */ i("span", {
+					className: "text-b5 block max-w-58 truncate text-center",
+					children: n
+				})]
+			}, n);
+		})
+	});
+}
+function h(e) {
+	let t = new Date(e).getTime(), i = t - Date.now(), [a, o] = r(() => u(i)), [s, c] = r(() => d(i)), [l, m] = r(() => f(i)), [h, g] = r(() => p(i));
+	return n(() => {
+		let e = setInterval(() => {
+			let n = t - Date.now();
+			if (n < 0) {
+				clearInterval(e);
+				return;
+			}
+			o(u(n)), c(d(n)), m(f(n)), g(p(n));
+		}, 1e3);
+		return () => clearInterval(e);
+	}, [t]), [
+		a,
+		s,
+		l,
+		h
+	];
+}
+//#endregion
+export { m as Countdown };
+
+//# sourceMappingURL=Countdown.js.map

package/ui/Countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.js","names":[],"sources":["../../lib/ui/Countdown.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { FlipCard } from './FlipCard';\nimport type { Theme } from './types/Theme';\n\nexport interface CountdownLabels {\n  days: string;\n  hours: string;\n  minutes: string;\n  seconds: string;\n}\n\nexport interface CountdownProps extends Omit<ComponentProps<'div'>, 'children'> {\n  countdown: {\n    labels: CountdownLabels;\n    to: string;\n  };\n  theme?: Theme;\n}\n\nconst ONE_SEC = 1000;\nconst ONE_MIN = ONE_SEC * 60;\nconst ONE_HOUR = ONE_MIN * 60;\nconst ONE_DAY = ONE_HOUR * 24;\n\nconst getDay = (distance: number) => Math.max(Math.floor(distance / ONE_DAY), 0);\nconst getHour = (distance: number) => Math.max(Math.floor((distance % ONE_DAY) / ONE_HOUR), 0);\nconst getMinute = (distance: number) => Math.max(Math.floor((distance % ONE_HOUR) / ONE_MIN), 0);\nconst getSecond = (distance: number) => Math.max(Math.floor((distance % ONE_MIN) / ONE_SEC), 0);\n\nexport function Countdown({ className, countdown, theme = 'white', ...props }: CountdownProps) {\n  const { to, labels } = countdown;\n  const [days, hours, minutes, seconds] = useCountdown(to);\n\n  const structure: [number, string][] = [\n    [days, labels.days],\n    [hours, labels.hours],\n    [minutes, labels.minutes],\n    [seconds, labels.seconds],\n  ];\n\n  return (\n    <div\n      data-name=\"Countdown\"\n      role=\"timer\"\n      {...props}\n      dir=\"ltr\"\n      className={clsx('flex gap-x-4', className)}\n    >\n      {structure.map(([division, label], index) => {\n        const areAllPreviousZero = structure.slice(0, index).every(([d]) => d === 0);\n        const divisionTheme = division === 0 && areAllPreviousZero ? 'black' : theme;\n\n        return (\n          <div className=\"space-y-4\" key={label}>\n            <div className=\"flex flex-row items-center gap-x-2 px-2\">\n              {division\n                .toString()\n                .padStart(2, '0')\n                .split('')\n                .map((digit, i) => (\n                  <FlipCard key={i} theme={divisionTheme} value={parseInt(digit)} />\n                ))}\n            </div>\n            <span className=\"text-b5 block max-w-58 truncate text-center\">{label}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction useCountdown(to: string): [number, number, number, number] {\n  const toMs = new Date(to).getTime();\n  const distance = toMs - Date.now();\n  const [days, setDays] = useState(() => getDay(distance));\n  const [hours, setHours] = useState(() => getHour(distance));\n  const [minutes, setMinutes] = useState(() => getMinute(distance));\n  const [seconds, setSeconds] = useState(() => getSecond(distance));\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      const dist = toMs - Date.now();\n      if (dist < 0) {\n        clearInterval(interval);\n        return;\n      }\n      setDays(getDay(dist));\n      setHours(getHour(dist));\n      setMinutes(getMinute(dist));\n      setSeconds(getSecond(dist));\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [toMs]);\n\n  return [days, hours, minutes, seconds];\n}\n"],"mappings":";;;;;;AAuBA,IAAM,IAAU,KACV,IAAU,IAAU,IACpB,IAAW,IAAU,IACrB,IAAU,IAAW,IAErB,KAAU,MAAqB,KAAK,IAAI,KAAK,MAAM,IAAW,EAAQ,EAAE,EAAE,EAC1E,KAAW,MAAqB,KAAK,IAAI,KAAK,MAAO,IAAW,IAAW,EAAS,EAAE,EAAE,EACxF,KAAa,MAAqB,KAAK,IAAI,KAAK,MAAO,IAAW,IAAY,EAAQ,EAAE,EAAE,EAC1F,KAAa,MAAqB,KAAK,IAAI,KAAK,MAAO,IAAW,IAAW,EAAQ,EAAE,EAAE;AAE/F,SAAgB,EAAU,EAAE,cAAW,cAAW,WAAQ,SAAS,GAAG,KAAyB;CAC7F,IAAM,EAAE,OAAI,cAAW,GACjB,CAAC,GAAM,GAAO,GAAS,KAAW,EAAa,EAAG,EAElD,IAAgC;EACpC,CAAC,GAAM,EAAO,KAAK;EACnB,CAAC,GAAO,EAAO,MAAM;EACrB,CAAC,GAAS,EAAO,QAAQ;EACzB,CAAC,GAAS,EAAO,QAAA;EAClB;AAED,QACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,GAAI;EACJ,KAAI;EACJ,WAAW,EAAK,gBAAgB,EAAU;YAEzC,EAAU,KAAK,CAAC,GAAU,IAAQ,MAAU;GAC3C,IAAM,IAAqB,EAAU,MAAM,GAAG,EAAM,CAAC,OAAO,CAAC,OAAO,MAAM,EAAE,EACtE,IAAgB,MAAa,KAAK,IAAqB,UAAU;AAEvE,UACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EACE,UAAU,CACV,SAAS,GAAG,IAAI,CAChB,MAAM,GAAG,CACT,KAAK,GAAO,MACX,kBAAC,GAAD;MAAkB,OAAO;MAAe,OAAO,SAAS,EAAA;MAAU,EAAnD,EAAmD,CAAA;KAElE,CAAA,EACN,kBAAC,QAAD;KAAM,WAAU;eAA+C;KAAa,CAAA,CAAA;MAV9C,EAW1B;;EAGN,CAAA;;AAIV,SAAS,EAAa,GAA8C;CAClE,IAAM,IAAO,IAAI,KAAK,EAAG,CAAC,SAAS,EAC7B,IAAW,IAAO,KAAK,KAAK,EAC5B,CAAC,GAAM,KAAW,QAAe,EAAO,EAAS,CAAC,EAClD,CAAC,GAAO,KAAY,QAAe,EAAQ,EAAS,CAAC,EACrD,CAAC,GAAS,KAAc,QAAe,EAAU,EAAS,CAAC,EAC3D,CAAC,GAAS,KAAc,QAAe,EAAU,EAAS,CAAC;AAkBjE,QAhBA,QAAgB;EACd,IAAM,IAAW,kBAAkB;GACjC,IAAM,IAAO,IAAO,KAAK,KAAK;AAC9B,OAAI,IAAO,GAAG;AACZ,kBAAc,EAAS;AACvB;;AAKF,GAHA,EAAQ,EAAO,EAAK,CAAC,EACrB,EAAS,EAAQ,EAAK,CAAC,EACvB,EAAW,EAAU,EAAK,CAAC,EAC3B,EAAW,EAAU,EAAK,CAAC;KAC1B,IAAK;AAER,eAAa,cAAc,EAAS;IACnC,CAAC,EAAK,CAAC,EAEH;EAAC;EAAM;EAAO;EAAS;EAAQ"}

package/ui/FlipCard.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+import { Theme } from './types/Theme';
+export interface FlipCardProps extends Omit<ComponentProps<'div'>, 'children'> {
+    theme?: Theme;
+    value: number;
+}
+export declare function FlipCard({ className, theme, value, ...props }: FlipCardProps): import("react/jsx-runtime").JSX.Element;

package/ui/FlipCard.js

@@ -0,0 +1,59 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { getBgColor as t, getComplementaryTextColor as n, getThemeColor as r } from "./helpers/colors/colors.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/ui/FlipCard.tsx
+var l = "flex w-full justify-center overflow-hidden", u = e(l, "relative h-full"), d = e(u, "rounded-16 rounded-b-4"), f = e(u, "rounded-16 rounded-t-4"), p = e(l, "absolute inset-x-0 h-16 w-full"), m = e(p, "rounded-16 rounded-b-4 top-0 origin-bottom [transform:rotateX(0deg)] [backface-visibility:hidden] [transform-style:preserve-3d]"), h = e(p, "rounded-16 rounded-t-4 top-16 origin-top [transform:rotateX(180deg)] [backface-visibility:hidden] [transform-style:preserve-3d]");
+function g({ className: a, theme: l = "white", value: u, ...p }) {
+	let [g, v] = o(0), [y, b] = o(!1), x = _(g);
+	i(() => {
+		u !== x && (v(u), b((e) => !e));
+	}, [u, x]);
+	let S = r(l), C = t(S), w = n(S);
+	return /* @__PURE__ */ c("div", {
+		...p,
+		role: "figure",
+		className: e("relative isolate grid h-32 w-22 grid-rows-2 [perspective:40px] [perspective-origin:50%_50%]", a),
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: e(d, C),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4 translate-y-1/3", w),
+					children: g
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e(f, C),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4 -translate-y-2/3", w),
+					children: x
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e(y ? m : h, C, y ? "animate-tick" : "animate-tock"),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4", y ? "translate-y-1/3" : "-translate-y-2/3", w),
+					children: y ? x : g
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e(y ? h : m, C, y ? "animate-tock" : "animate-tick"),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4", y ? "-translate-y-2/3" : "translate-y-1/3", w),
+					children: y ? g : x
+				})
+			})
+		]
+	});
+}
+function _(e) {
+	let t = a(0);
+	return i(() => {
+		t.current = e;
+	}, [e]), t.current;
+}
+//#endregion
+export { g as FlipCard };
+
+//# sourceMappingURL=FlipCard.js.map

package/ui/FlipCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlipCard.js","names":[],"sources":["../../lib/ui/FlipCard.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport type { Theme } from './types/Theme';\n\nexport interface FlipCardProps extends Omit<ComponentProps<'div'>, 'children'> {\n  theme?: Theme;\n  value: number;\n}\n\nconst commonSection = 'flex w-full justify-center overflow-hidden';\nconst staticCard = clsx(commonSection, 'relative h-full');\nconst staticTop = clsx(staticCard, 'rounded-16 rounded-b-4');\nconst staticBottom = clsx(staticCard, 'rounded-16 rounded-t-4');\n\nconst animatedCard = clsx(commonSection, 'absolute inset-x-0 h-16 w-full');\nconst animatedTop = clsx(\n  animatedCard,\n  'rounded-16 rounded-b-4 top-0 origin-bottom [transform:rotateX(0deg)] [backface-visibility:hidden] [transform-style:preserve-3d]',\n);\nconst animatedBottom = clsx(\n  animatedCard,\n  'rounded-16 rounded-t-4 top-16 origin-top [transform:rotateX(180deg)] [backface-visibility:hidden] [transform-style:preserve-3d]',\n);\n\nexport function FlipCard({ className, theme = 'white', value, ...props }: FlipCardProps) {\n  const [currentNumber, setCurrentNumber] = useState(0);\n  const [tick, setTick] = useState(false);\n  const previousNumber = usePrevious(currentNumber);\n\n  useEffect(() => {\n    if (value === previousNumber) return;\n    setCurrentNumber(value);\n    setTick((t) => !t);\n  }, [value, previousNumber]);\n\n  const themeColor = getThemeColor(theme);\n  const thBackground = getBgColor(themeColor);\n  const thText = getComplementaryTextColor(themeColor);\n\n  return (\n    <div\n      {...props}\n      role=\"figure\"\n      className={clsx(\n        'relative isolate grid h-32 w-22 grid-rows-2 [perspective:40px] [perspective-origin:50%_50%]',\n        className,\n      )}\n    >\n      <div className={clsx(staticTop, thBackground)}>\n        <span className={clsx('text-b4 translate-y-1/3', thText)}>{currentNumber}</span>\n      </div>\n      <div className={clsx(staticBottom, thBackground)}>\n        <span className={clsx('text-b4 -translate-y-2/3', thText)}>{previousNumber}</span>\n      </div>\n      <div\n        className={clsx(\n          tick ? animatedTop : animatedBottom,\n          thBackground,\n          tick ? 'animate-tick' : 'animate-tock',\n        )}\n      >\n        <span className={clsx('text-b4', tick ? 'translate-y-1/3' : '-translate-y-2/3', thText)}>\n          {tick ? previousNumber : currentNumber}\n        </span>\n      </div>\n      <div\n        className={clsx(\n          tick ? animatedBottom : animatedTop,\n          thBackground,\n          tick ? 'animate-tock' : 'animate-tick',\n        )}\n      >\n        <span className={clsx('text-b4', tick ? '-translate-y-2/3' : 'translate-y-1/3', thText)}>\n          {tick ? currentNumber : previousNumber}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction usePrevious(currentValue: number) {\n  const ref = useRef(0);\n  useEffect(() => {\n    ref.current = currentValue;\n  }, [currentValue]);\n  return ref.current;\n}\n"],"mappings":";;;;;;AAaA,IAAM,IAAgB,8CAChB,IAAa,EAAK,GAAe,kBAAkB,EACnD,IAAY,EAAK,GAAY,yBAAyB,EACtD,IAAe,EAAK,GAAY,yBAAyB,EAEzD,IAAe,EAAK,GAAe,iCAAiC,EACpE,IAAc,EAClB,GACA,kIACD,EACK,IAAiB,EACrB,GACA,kIACD;AAED,SAAgB,EAAS,EAAE,cAAW,WAAQ,SAAS,UAAO,GAAG,KAAwB;CACvF,IAAM,CAAC,GAAe,KAAoB,EAAS,EAAE,EAC/C,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAiB,EAAY,EAAc;AAEjD,SAAgB;AACV,QAAU,MACd,EAAiB,EAAM,EACvB,GAAS,MAAM,CAAC,EAAE;IACjB,CAAC,GAAO,EAAe,CAAC;CAE3B,IAAM,IAAa,EAAc,EAAM,EACjC,IAAe,EAAW,EAAW,EACrC,IAAS,EAA0B,EAAW;AAEpD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,MAAK;EACL,WAAW,EACT,+FACA,EACD;YANH;GAQE,kBAAC,OAAD;IAAK,WAAW,EAAK,GAAW,EAAa;cAC3C,kBAAC,QAAD;KAAM,WAAW,EAAK,2BAA2B,EAAO;eAAG;KAAqB,CAAA;IAC5E,CAAA;GACN,kBAAC,OAAD;IAAK,WAAW,EAAK,GAAc,EAAa;cAC9C,kBAAC,QAAD;KAAM,WAAW,EAAK,4BAA4B,EAAO;eAAG;KAAsB,CAAA;IAC9E,CAAA;GACN,kBAAC,OAAD;IACE,WAAW,EACT,IAAO,IAAc,GACrB,GACA,IAAO,iBAAiB,eACzB;cAED,kBAAC,QAAD;KAAM,WAAW,EAAK,WAAW,IAAO,oBAAoB,oBAAoB,EAAO;eACpF,IAAO,IAAiB;KACpB,CAAA;IACH,CAAA;GACN,kBAAC,OAAD;IACE,WAAW,EACT,IAAO,IAAiB,GACxB,GACA,IAAO,iBAAiB,eACzB;cAED,kBAAC,QAAD;KAAM,WAAW,EAAK,WAAW,IAAO,qBAAqB,mBAAmB,EAAO;eACpF,IAAO,IAAgB;KACnB,CAAA;IACH,CAAA;;;;AAKZ,SAAS,EAAY,GAAsB;CACzC,IAAM,IAAM,EAAO,EAAE;AAIrB,QAHA,QAAgB;AACd,IAAI,UAAU;IACb,CAAC,EAAa,CAAC,EACX,EAAI"}

package/ui/forms/Filter.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {
+export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
     /**
      * Is it attached to a dropdown?
      */
@@ -9,6 +9,7 @@ export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'si
      */
     dataTestId?: string;
     'data-testid'?: string;
+    value?: string | number | boolean;
     onChange?: (event: Event, value: boolean) => void;
 }
 export declare function Filter(props: FilterProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Filter.js

@@ -4,20 +4,21 @@ import { Icon as n } from "@clubmed/trident-icons";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/ui/forms/Filter.tsx
 function a(a) {
-	let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, onChange: h, children: g, ..._ } = a;
+	let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, onChange: h, value: g, children: _, ...v } = a;
 	return /* @__PURE__ */ r("div", {
 		className: e(l, "relative"),
 		children: /* @__PURE__ */ i("label", {
 			"data-testid": `filter-container-${s}`,
 			className: "relative",
 			children: [/* @__PURE__ */ r("input", {
-				..._,
+				...v,
 				id: s,
 				name: c,
 				"data-testid": f ?? u,
 				type: "checkbox",
 				tabIndex: p,
 				"data-name": "Filter",
+				value: typeof g == "boolean" ? String(g) : g,
 				disabled: d,
 				onChange: (e) => {
 					h?.(e.nativeEvent, e.target.checked);
@@ -25,7 +26,7 @@ function a(a) {
 			}), /* @__PURE__ */ i("span", { children: [
 				/* @__PURE__ */ r("span", {
 					className: "font-semibold",
-					children: g
+					children: _
 				}),
 				/* @__PURE__ */ r(n, {
 					className: "check",

package/ui/forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Filter(props: FilterProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    'data-testid': dataTestIdProp,\n    tabIndex = 0,\n    hasDropdown,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          data-testid={dataTestIdProp ?? dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          data-name=\"Filter\"\n          disabled={disabled}\n          onChange={(e) => {\n            onChange?.(e.nativeEvent, e.target.checked);\n          }}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACA;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}
+{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n  value?: string | number | boolean;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Filter(props: FilterProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    'data-testid': dataTestIdProp,\n    tabIndex = 0,\n    hasDropdown,\n    onChange,\n    value,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          data-testid={dataTestIdProp ?? dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          data-name=\"Filter\"\n          value={typeof value === 'boolean' ? String(value) : value}\n          disabled={disabled}\n          onChange={(e) => {\n            onChange?.(e.nativeEvent, e.target.checked);\n          }}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,UACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACV,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IAC1C;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}

package/ui/forms/FloatingLabelTextField.d.ts

@@ -0,0 +1,12 @@
+import { UseValueProps } from '../hooks/useValue';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { FormControlProps } from './FormControl';
+export interface FloatingLabelTextFieldProps<Value = string> extends FormControlProps<Value> {
+    icon?: IconicNames;
+    iconType?: IconicTypes;
+    formatter?: UseValueProps<Value>['formatter'];
+    hasDropdown?: boolean;
+    clear?: string;
+    iconFirst?: boolean;
+}
+export declare const FloatingLabelTextField: <Value = string>(props: FloatingLabelTextFieldProps<Value>) => import("react/jsx-runtime").JSX.Element;

package/ui/forms/FloatingLabelTextField.js

@@ -0,0 +1,132 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { FormControlError as t } from "./FormControlError.js";
+import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
+import { useValue as r } from "../hooks/useValue.js";
+import { useId as i, useRef as a, useState as o } from "react";
+import { Icon as s } from "@clubmed/trident-icons";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region lib/ui/forms/FloatingLabelTextField.tsx
+var u = (u) => {
+	let d = i(), { id: f = d, name: p = f, label: m, labelClassName: h, value: g, validationStatus: _ = "default", errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, description: S, icon: C, iconType: w, iconFirst: T = !0, hasDropdown: E = !1, clear: D = "", className: O, dataTestId: k, dataName: A, "data-testid": j, onChange: M, formatter: N, ...P } = u, { value: F, setValue: I } = r({
+		initialValue: g,
+		onChange: M,
+		formatter: N
+	}), L = n({
+		isDisabled: y,
+		validationStatus: _
+	}), [R, z] = o(!1), B = a(null), V = R || F !== "" && F != null, H = L === "error" && v, U = !y && F !== "" && F != null && !!D, W = Number(!!C && T), G = Number(!!C && !T) + Number(U || E) + Number(L === "error" || L === "success");
+	return /* @__PURE__ */ l("div", {
+		className: e("flex flex-col gap-4", O),
+		"data-name": A ?? "FloatingLabelTextField",
+		"data-testid": j ?? k,
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ c("input", {
+						...P,
+						ref: B,
+						id: f,
+						name: p,
+						disabled: y,
+						required: b,
+						value: F,
+						onChange: (e) => I(e.target.value, e.nativeEvent),
+						onFocus: () => z(!0),
+						onBlur: () => z(!1),
+						style: {
+							"--nbIconsStart": W,
+							"--nbIconsEnd": G
+						},
+						className: e("text-b3 rounded-pill w-full border h-60 font-normal outline-none", "ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+							"pt-[26px] pb-[8px]": V && m,
+							"py-12": !(V && m),
+							"border-middleGrey focus:border-black active:border-black": L === "default",
+							"bg-white text-black": L !== "disabled",
+							"bg-pearl border-middleGrey": L === "disabled",
+							"border-red": L === "error",
+							"border-green": L === "success"
+						}),
+						"aria-label": m ? void 0 : p,
+						"aria-invalid": L === "error",
+						"aria-describedby": H ? `${f}-error` : void 0
+					}),
+					m && /* @__PURE__ */ l("label", {
+						htmlFor: f,
+						style: { left: `calc(20px + ${W} * 32px)` },
+						className: e("pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+							"top-[10px] text-b6 font-semibold": V,
+							"top-1/2 -translate-y-1/2 text-b3 font-normal": !V,
+							"text-red": L === "error" && V,
+							"text-middleGrey": L !== "error" && V,
+							"text-black": !V && L !== "disabled",
+							"text-grey": L === "disabled"
+						}, h),
+						children: [m, b && !x && /* @__PURE__ */ c("span", {
+							className: "text-red ms-4",
+							"aria-hidden": "true",
+							children: "*"
+						})]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
+							"text-grey": L === "disabled",
+							"text-red": L === "error",
+							"text-green": L === "success"
+						}),
+						children: [C && T && /* @__PURE__ */ c(s, {
+							name: C,
+							width: "24px"
+						}), /* @__PURE__ */ l("span", {
+							className: "ms-auto flex gap-x-8",
+							children: [
+								L === "error" && /* @__PURE__ */ c(s, {
+									name: "CrossDefault",
+									width: "24px",
+									type: w
+								}),
+								L === "success" && /* @__PURE__ */ c(s, {
+									name: "CheckDefault",
+									width: "24px",
+									type: w
+								}),
+								(E || U) && (U ? /* @__PURE__ */ c("button", {
+									className: "pointer-events-auto",
+									onClick: (e) => I("", e.nativeEvent),
+									"aria-label": D,
+									type: "reset",
+									children: /* @__PURE__ */ c(s, {
+										name: "CrossDefault",
+										className: "text-black",
+										width: "24px"
+									})
+								}) : /* @__PURE__ */ c(s, {
+									name: "ArrowDefaultDown",
+									className: "text-black",
+									width: "24px"
+								})),
+								!T && C && /* @__PURE__ */ c(s, {
+									name: C,
+									width: "24px"
+								})
+							]
+						})]
+					})
+				]
+			}),
+			S && /* @__PURE__ */ c("span", {
+				className: "text-b4 text-darkGrey font-normal px-20",
+				children: S
+			}),
+			H && /* @__PURE__ */ c(t, {
+				id: `${f}-error`,
+				children: v
+			})
+		]
+	});
+};
+//#endregion
+export { u as FloatingLabelTextField };
+
+//# sourceMappingURL=FloatingLabelTextField.js.map

package/ui/forms/FloatingLabelTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLabelTextField.js","names":[],"sources":["../../../lib/ui/forms/FloatingLabelTextField.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControlError } from './FormControlError';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { type FormControlProps } from './FormControl';\n\nexport interface FloatingLabelTextFieldProps<Value = string> extends FormControlProps<Value> {\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const FloatingLabelTextField = <Value = string,>(\n  props: FloatingLabelTextFieldProps<Value>,\n) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    labelClassName,\n    value: initialValue,\n    validationStatus = 'default',\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    description,\n    icon,\n    iconType,\n    iconFirst = true,\n    hasDropdown = false,\n    clear = '',\n    className,\n    dataTestId,\n    dataName,\n    'data-testid': dataTestIdProp,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const isFloating = focused || (value !== '' && value !== null && value !== undefined);\n  const showError = internalStatus === 'error' && errorMessage;\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  const nbIconsStart = Number(!!icon && iconFirst);\n  const nbIconsEnd =\n    Number(!!icon && !iconFirst) +\n    Number(shouldDisplayClearButton || hasDropdown) +\n    Number(internalStatus === 'error' || internalStatus === 'success');\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName ?? 'FloatingLabelTextField'}\n      data-testid={dataTestIdProp ?? dataTestId}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as string}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          style={\n            {\n              '--nbIconsStart': nbIconsStart,\n              '--nbIconsEnd': nbIconsEnd,\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border h-60 font-normal outline-none',\n            'ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'pt-[26px] pb-[8px]': isFloating && label,\n              'py-12': !(isFloating && label),\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={label ? undefined : name}\n          aria-invalid={internalStatus === 'error'}\n          aria-describedby={showError ? `${id}-error` : undefined}\n        />\n\n        {label && (\n          <label\n            htmlFor={id}\n            style={\n              {\n                left: `calc(20px + ${nbIconsStart} * 32px)`,\n              } as React.CSSProperties\n            }\n            className={clsx(\n              'pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n              {\n                'top-[10px] text-b6 font-semibold': isFloating,\n                'top-1/2 -translate-y-1/2 text-b3 font-normal': !isFloating,\n                'text-red': internalStatus === 'error' && isFloating,\n                'text-middleGrey': internalStatus !== 'error' && isFloating,\n                'text-black': !isFloating && internalStatus !== 'disabled',\n                'text-grey': internalStatus === 'disabled',\n              },\n              labelClassName,\n            )}\n          >\n            {label}\n            {required && !hideRequiredStar && (\n              <span className=\"text-red ms-4\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || shouldDisplayClearButton) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n\n      {description && (\n        <span className=\"text-b4 text-darkGrey font-normal px-20\">{description}</span>\n      )}\n\n      {showError && <FormControlError id={`${id}-error`}>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAmBA,IAAa,KACX,MACG;CACH,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,mBACA,OAAO,GACP,sBAAmB,WACnB,iBACA,cAAW,IACX,cAAW,IACX,qBACA,gBACA,SACA,aACA,eAAY,IACZ,iBAAc,IACd,WAAQ,IACR,cACA,eACA,aACA,eAAe,GACf,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EAAE,YAAY;EAAU;EAAkB,CAAC,EAC9E,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAW,EAAyB,KAAK,EAEzC,IAAa,KAAY,MAAU,MAAM,KAAU,MACnD,IAAY,MAAmB,WAAW,GAC1C,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC,GAEpE,IAAe,OAAO,CAAC,CAAC,KAAQ,EAAU,EAC1C,IACJ,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OAAO,KAA4B,EAAY,GAC/C,OAAO,MAAmB,WAAW,MAAmB,UAAU;AAEpE,QACE,kBAAC,OAAD;EACE,WAAW,EAAK,uBAAuB,EAAU;EACjD,aAAW,KAAY;EACvB,eAAa,KAAkB;YAHjC;GAKE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,SAAD;MACE,GAAI;MACJ,KAAK;MACD;MACE;MACI;MACA;MACH;MACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;MACjE,eAAe,EAAW,GAAK;MAC/B,cAAc,EAAW,GAAM;MAC/B,OACE;OACE,kBAAkB;OAClB,gBAAgB;OACjB;MAEH,WAAW,EACT,oEACA,mFACA;OACE,sBAAsB,KAAc;OACpC,SAAS,EAAE,KAAc;OACzB,4DACE,MAAmB;OACrB,uBAAuB,MAAmB;OAC1C,8BAA8B,MAAmB;OACjD,cAAc,MAAmB;OACjC,gBAAgB,MAAmB;OACpC,CACF;MACD,cAAY,IAAQ,KAAA,IAAY;MAChC,gBAAc,MAAmB;MACjC,oBAAkB,IAAY,GAAG,EAAG,UAAU,KAAA;MAC9C,CAAA;KAED,KACC,kBAAC,SAAD;MACE,SAAS;MACT,OACE,EACE,MAAM,eAAe,EAAa,WACnC;MAEH,WAAW,EACT,uHACA;OACE,oCAAoC;OACpC,gDAAgD,CAAC;OACjD,YAAY,MAAmB,WAAW;OAC1C,mBAAmB,MAAmB,WAAW;OACjD,cAAc,CAAC,KAAc,MAAmB;OAChD,aAAa,MAAmB;OACjC,EACD,EACD;gBAlBH,CAoBG,GACA,KAAY,CAAC,KACZ,kBAAC,QAAD;OAAM,WAAU;OAAgB,eAAY;iBAAO;OAE5C,CAAA,CAAA;;KAKb,kBAAC,OAAD;MACE,WAAW,EACT,sFACA;OACE,aAAa,MAAmB;OAChC,YAAY,MAAmB;OAC/B,cAAc,MAAmB;OAClC,CACF;gBARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA,EAEvD,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG,MAAmB,WAClB,kBAAC,GAAD;SAAM,MAAK;SAAe,OAAM;SAAO,MAAM;SAAY,CAAA;QAE1D,MAAmB,aAClB,kBAAC,GAAD;SAAM,MAAK;SAAe,OAAM;SAAO,MAAM;SAAY,CAAA;SAEzD,KAAe,OACd,IACC,kBAAC,UAAD;SACE,WAAU;SACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;SACpD,cAAY;SACZ,MAAK;mBAEL,kBAAC,GAAD;UAAM,MAAK;UAAe,WAAU;UAAa,OAAM;UAAS,CAAA;SACzD,CAAA,GAET,kBAAC,GAAD;SAAM,MAAK;SAAmB,WAAU;SAAa,OAAM;SAAS,CAAA;QAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;SAAM,MAAM;SAAM,OAAM;SAAS,CAAA;;;;;;GAK7D,KACC,kBAAC,QAAD;IAAM,WAAU;cAA2C;IAAmB,CAAA;GAG/E,KAAa,kBAAC,GAAD;IAAkB,IAAI,GAAG,EAAG;cAAU;IAAgC,CAAA"}

package/ui/forms/Switch.d.ts

@@ -1,8 +1,9 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Colors } from '../types/Colors';
-export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'defaultChecked' | 'onChange'> {
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'> {
     checked: boolean;
     color?: Colors;
+    value?: string | number | boolean;
     onChange?: (event: Event, value: boolean) => void;
 }
-export declare function Switch({ id, name, checked, className, color, onChange, disabled, tabIndex, children, role, ...attrs }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ id, name, checked, className, color, onChange, disabled, tabIndex, children, role, value, ...attrs }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Switch.js

@@ -4,26 +4,27 @@ import { getBgColor as t } from "../helpers/colors/colors.js";
 import { useId as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/ui/forms/Switch.tsx
-function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch", ...h }) {
-	let g = n(), _ = a ?? g, v = o ?? _, y = p != null, b = e("inline-flex items-center relative", {
-		"gap-4": y,
+function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch", value: h, ...g }) {
+	let _ = n(), v = a ?? _, y = o ?? v, b = p != null, x = e("inline-flex items-center relative", {
+		"gap-4": b,
 		"cursor-pointer": !d,
 		"cursor-not-allowed": d
 	});
-	return /* @__PURE__ */ i(y ? "label" : "span", {
-		htmlFor: _,
-		className: b,
+	return /* @__PURE__ */ i(b ? "label" : "span", {
+		htmlFor: v,
+		className: x,
 		children: [
 			/* @__PURE__ */ r("input", {
-				...h,
-				id: _,
-				name: v,
+				...g,
+				id: v,
+				name: y,
 				checked: s,
 				"data-name": "Switch",
 				disabled: d,
 				role: m,
 				tabIndex: f,
 				type: "checkbox",
+				value: typeof h == "boolean" ? String(h) : h,
 				className: "absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full",
 				onChange: (e) => {
 					u?.(e.nativeEvent, e.target.checked);

package/ui/forms/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'defaultChecked' | 'onChange'> {\n  checked: boolean;\n  color?: Colors;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Switch({\n  id,\n  name,\n  checked,\n  className,\n  color = 'saffron',\n  onChange,\n  disabled = false,\n  tabIndex = 0,\n  children,\n  role = 'switch',\n  ...attrs\n}: SwitchProps) {\n  const internalId = useId();\n  const inputId = id ?? internalId;\n  const inputName = name ?? inputId;\n  const hasChildren = children !== undefined && children !== null;\n  const rootClassName = clsx('inline-flex items-center relative', {\n    'gap-4': hasChildren,\n    'cursor-pointer': !disabled,\n    'cursor-not-allowed': disabled,\n  });\n  const Node = hasChildren ? 'label' : 'span';\n\n  return (\n    <Node htmlFor={inputId} className={rootClassName}>\n      <input\n        {...attrs}\n        id={inputId}\n        name={inputName}\n        checked={checked}\n        data-name=\"Switch\"\n        disabled={disabled}\n        role={role}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        className=\"absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full\"\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n\n      <span\n        className={clsx(\n          className,\n          'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n          { 'bg-middleGrey': !checked },\n          { [getBgColor(color)]: checked },\n        )}\n      >\n        <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n          <g>\n            <circle cx={12} cy={12} r={12} fill=\"var(--color-white)\" />\n            <circle cx={12} cy={12} r={4} fill=\"var(--color-middleGrey)\" />\n            <path d=\"M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37\" />\n          </g>\n        </svg>\n      </span>\n      {children}\n    </Node>\n  );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,EAAO,EACrB,OACA,SACA,YACA,cACA,WAAQ,WACR,aACA,cAAW,IACX,cAAW,GACX,aACA,UAAO,UACP,GAAG,KACW;CACd,IAAM,IAAa,GAAO,EACpB,IAAU,KAAM,GAChB,IAAY,KAAQ,GACpB,IAAc,KAAuC,MACrD,IAAgB,EAAK,qCAAqC;EAC9D,SAAS;EACT,kBAAkB,CAAC;EACnB,sBAAsB;EACvB,CAAC;AAGF,QACE,kBAHW,IAAc,UAAU,QAGnC;EAAM,SAAS;EAAS,WAAW;YAAnC;GACE,kBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAM;IACG;IACT,aAAU;IACA;IACJ;IACI;IACV,MAAK;IACL,WAAU;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA;GAEF,kBAAC,QAAD;IACE,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;cAED,kBAAC,OAAD;KAAK,WAAU;KAAU,SAAQ;eAC/B,kBAAC,KAAD,EAAA,UAAA;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAI,MAAK;OAAuB,CAAA;MAC3D,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAG,MAAK;OAA4B,CAAA;MAC/D,kBAAC,QAAD,EAAM,GAAE,kLAAmL,CAAA;MACzL,EAAA,CAAA;KACA,CAAA;IACD,CAAA;GACN"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<'input'>,\n    'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'\n  > {\n  checked: boolean;\n  color?: Colors;\n  value?: string | number | boolean;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Switch({\n  id,\n  name,\n  checked,\n  className,\n  color = 'saffron',\n  onChange,\n  disabled = false,\n  tabIndex = 0,\n  children,\n  role = 'switch',\n  value,\n  ...attrs\n}: SwitchProps) {\n  const internalId = useId();\n  const inputId = id ?? internalId;\n  const inputName = name ?? inputId;\n  const hasChildren = children !== undefined && children !== null;\n  const rootClassName = clsx('inline-flex items-center relative', {\n    'gap-4': hasChildren,\n    'cursor-pointer': !disabled,\n    'cursor-not-allowed': disabled,\n  });\n  const Node = hasChildren ? 'label' : 'span';\n\n  return (\n    <Node htmlFor={inputId} className={rootClassName}>\n      <input\n        {...attrs}\n        id={inputId}\n        name={inputName}\n        checked={checked}\n        data-name=\"Switch\"\n        disabled={disabled}\n        role={role}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        className=\"absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full\"\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n\n      <span\n        className={clsx(\n          className,\n          'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n          { 'bg-middleGrey': !checked },\n          { [getBgColor(color)]: checked },\n        )}\n      >\n        <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n          <g>\n            <circle cx={12} cy={12} r={12} fill=\"var(--color-white)\" />\n            <circle cx={12} cy={12} r={4} fill=\"var(--color-middleGrey)\" />\n            <path d=\"M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37\" />\n          </g>\n        </svg>\n      </span>\n      {children}\n    </Node>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAO,EACrB,OACA,SACA,YACA,cACA,WAAQ,WACR,aACA,cAAW,IACX,cAAW,GACX,aACA,UAAO,UACP,UACA,GAAG,KACW;CACd,IAAM,IAAa,GAAO,EACpB,IAAU,KAAM,GAChB,IAAY,KAAQ,GACpB,IAAc,KAAuC,MACrD,IAAgB,EAAK,qCAAqC;EAC9D,SAAS;EACT,kBAAkB,CAAC;EACnB,sBAAsB;EACvB,CAAC;AAGF,QACE,kBAHW,IAAc,UAAU,QAGnC;EAAM,SAAS;EAAS,WAAW;YAAnC;GACE,kBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAM;IACG;IACT,aAAU;IACA;IACJ;IACI;IACV,MAAK;IACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IACpD,WAAU;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA;GAEF,kBAAC,QAAD;IACE,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;cAED,kBAAC,OAAD;KAAK,WAAU;KAAU,SAAQ;eAC/B,kBAAC,KAAD,EAAA,UAAA;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAI,MAAK;OAAuB,CAAA;MAC3D,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAG,MAAK;OAA4B,CAAA;MAC/D,kBAAC,QAAD,EAAM,GAAE,kLAAmL,CAAA;MACzL,EAAA,CAAA;KACA,CAAA;IACD,CAAA;GACN"}

package/ui/forms/checkboxes/Checkbox.d.ts

@@ -1,9 +1,10 @@
 import { ComponentPropsWithoutRef, Ref } from 'react';
 import { Colors } from '../../types/Colors';
 import { ValidationStatus } from '../../hooks/useInternalStatus';
-export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
     color?: Colors;
     size?: string;
+    value?: string | number | boolean;
     validationStatus?: ValidationStatus;
     errorMessage?: string;
     ['data-testid']?: string;

package/ui/forms/checkboxes/Checkbox.js

@@ -7,17 +7,17 @@ import { Icon as o } from "@clubmed/trident-icons";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/ui/forms/checkboxes/Checkbox.tsx
 function l(l) {
-	let u = a(), { id: d = u, name: f = d, className: p, color: m = "black", size: h = "size-24", disabled: g = !1, tabIndex: _ = 0, validationStatus: v = "default", errorMessage: y, children: b, ref: x, onChange: S, "data-testid": C, ...w } = l, T = i({
+	let u = a(), { id: d = u, name: f = d, className: p, color: m = "black", size: h = "size-24", disabled: g = !1, tabIndex: _ = 0, validationStatus: v = "default", errorMessage: y, children: b, ref: x, onChange: S, value: C, "data-testid": w, ...T } = l, E = i({
 		isDisabled: g,
 		validationStatus: v
-	}), E = T === "disabled", D = T === "error" && y, O = e({
-		"!border-red !text-red": T === "error",
-		"bg-pearl": E
-	}), k = /* @__PURE__ */ c("span", {
-		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h, O, p),
+	}), D = E === "disabled", O = E === "error" && y, k = e({
+		"!border-red !text-red": E === "error",
+		"bg-pearl": D
+	}), A = /* @__PURE__ */ c("span", {
+		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h, k, p),
 		"data-name": "Checkbox",
 		children: [/* @__PURE__ */ s("input", {
-			...w,
+			...T,
 			disabled: g,
 			id: d,
 			name: f,
@@ -25,6 +25,7 @@ function l(l) {
 			ref: x,
 			tabIndex: _,
 			type: "checkbox",
+			value: typeof C == "boolean" ? String(C) : C,
 			onChange: (e) => {
 				S?.(e.nativeEvent, e.target.checked);
 			}
@@ -34,13 +35,13 @@ function l(l) {
 			width: "100%"
 		})]
 	});
-	return !b && !y ? k : /* @__PURE__ */ c("div", {
+	return !b && !y ? A : /* @__PURE__ */ c("div", {
 		className: e("flex flex-col space-y-2", p),
-		"data-testid": C || `checkbox-container-${d}`,
+		"data-testid": w || `checkbox-container-${d}`,
 		children: [/* @__PURE__ */ c("label", {
 			className: e("relative flex items-center gap-8", { "text-grey": g }),
-			children: [k, b]
-		}), D && /* @__PURE__ */ s(r, { children: y })]
+			children: [A, b]
+		}), O && /* @__PURE__ */ s(r, { children: y })]
 	});
 }
 //#endregion

package/ui/forms/checkboxes/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef, type Ref } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { Colors } from '../../types/Colors';\nimport { getBorderColor, getTextColor } from '../../helpers/colors/colors';\nimport { FormControlError } from '@/ui/forms/FormControlError';\nimport { useInternalStatus, type ValidationStatus } from '@/ui/hooks/useInternalStatus';\n\nexport interface CheckboxProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n  color?: Colors;\n  size?: string;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  ['data-testid']?: string;\n  ref?: Ref<HTMLInputElement>;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    color = 'black',\n    size = 'size-24',\n    disabled = false,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    ref,\n    onChange,\n    'data-testid': dataTestId,\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n  const isDisabled = internalStatus === 'disabled';\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  // Apply validation styling to checkbox via className\n  const checkboxClassName = clsx({\n    '!border-red !text-red': internalStatus === 'error',\n    'bg-pearl': isDisabled,\n  });\n\n  const checkbox = (\n    <span\n      className={clsx(\n        'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60',\n        getBorderColor(color),\n        getTextColor(color),\n        size,\n        checkboxClassName,\n        className,\n      )}\n      data-name=\"Checkbox\"\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        ref={ref}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n      <Icon\n        className=\"scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100\"\n        name=\"CheckDefault\"\n        width=\"100%\"\n      />\n    </span>\n  );\n\n  if (!children && !errorMessage) {\n    return checkbox;\n  }\n\n  return (\n    <div\n      className={clsx('flex flex-col space-y-2', className)}\n      data-testid={dataTestId || `checkbox-container-${id}`}\n    >\n      <label\n        className={clsx('relative flex items-center gap-8', {\n          'text-grey': disabled,\n        })}\n      >\n        {checkbox}\n        {children}\n      </label>\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,WAAQ,SACR,UAAO,WACP,cAAW,IACX,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,QACA,aACA,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,yBAAyB,MAAmB;EAC5C,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,4JACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,GACA,EACD;EACD,aAAU;YATZ,CAWE,kBAAC,SAAD;GACE,GAAI;GACM;GACN;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,WAAW,MAAM;AACf,QAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;GAE7C,CAAA,EACF,kBAAC,GAAD;GACE,WAAU;GACV,MAAK;GACL,OAAM;GACN,CAAA,CACG;;AAOT,QAJI,CAAC,KAAY,CAAC,IACT,IAIP,kBAAC,OAAD;EACE,WAAW,EAAK,2BAA2B,EAAU;EACrD,eAAa,KAAc,sBAAsB;YAFnD,CAIE,kBAAC,SAAD;GACE,WAAW,EAAK,oCAAoC,EAClD,aAAa,GACd,CAAC;aAHJ,CAKG,GACA,EACK;MACP,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA,CAC7E"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef, type Ref } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { Colors } from '../../types/Colors';\nimport { getBorderColor, getTextColor } from '../../helpers/colors/colors';\nimport { FormControlError } from '@/ui/forms/FormControlError';\nimport { useInternalStatus, type ValidationStatus } from '@/ui/hooks/useInternalStatus';\n\nexport interface CheckboxProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n  color?: Colors;\n  size?: string;\n  value?: string | number | boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  ['data-testid']?: string;\n  ref?: Ref<HTMLInputElement>;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    color = 'black',\n    size = 'size-24',\n    disabled = false,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    ref,\n    onChange,\n    value,\n    'data-testid': dataTestId,\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n  const isDisabled = internalStatus === 'disabled';\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  // Apply validation styling to checkbox via className\n  const checkboxClassName = clsx({\n    '!border-red !text-red': internalStatus === 'error',\n    'bg-pearl': isDisabled,\n  });\n\n  const checkbox = (\n    <span\n      className={clsx(\n        'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60',\n        getBorderColor(color),\n        getTextColor(color),\n        size,\n        checkboxClassName,\n        className,\n      )}\n      data-name=\"Checkbox\"\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        ref={ref}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n      <Icon\n        className=\"scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100\"\n        name=\"CheckDefault\"\n        width=\"100%\"\n      />\n    </span>\n  );\n\n  if (!children && !errorMessage) {\n    return checkbox;\n  }\n\n  return (\n    <div\n      className={clsx('flex flex-col space-y-2', className)}\n      data-testid={dataTestId || `checkbox-container-${id}`}\n    >\n      <label\n        className={clsx('relative flex items-center gap-8', {\n          'text-grey': disabled,\n        })}\n      >\n        {checkbox}\n        {children}\n      </label>\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,WAAQ,SACR,UAAO,WACP,cAAW,IACX,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,QACA,aACA,UACA,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,yBAAyB,MAAmB;EAC5C,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,4JACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,GACA,EACD;EACD,aAAU;YATZ,CAWE,kBAAC,SAAD;GACE,GAAI;GACM;GACN;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;GACpD,WAAW,MAAM;AACf,QAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;GAE7C,CAAA,EACF,kBAAC,GAAD;GACE,WAAU;GACV,MAAK;GACL,OAAM;GACN,CAAA,CACG;;AAOT,QAJI,CAAC,KAAY,CAAC,IACT,IAIP,kBAAC,OAAD;EACE,WAAW,EAAK,2BAA2B,EAAU;EACrD,eAAa,KAAc,sBAAsB;YAFnD,CAIE,kBAAC,SAAD;GACE,WAAW,EAAK,oCAAoC,EAClD,aAAa,GACd,CAAC;aAHJ,CAKG,GACA,EACK;MACP,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA,CAC7E"}