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

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.42",
   "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/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":"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"}