@clubmed/trident-ui 2.0.0-beta.7 → 2.0.0-beta.74

package/ui/criteria/CriteriaTransports.js

@@ -0,0 +1,224 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { ElasticHeight as t } from "../ElasticHeight.js";
+import { Button as n } from "../buttons/Button.js";
+import { Chip as r } from "../Chip.js";
+import { Switch as i } from "../forms/Switch.js";
+import { Radio as a } from "../forms/radios/Radio.js";
+import { RadioSelect as o } from "../forms/RadioSelect.js";
+import { TextField as s } from "../forms/TextField.js";
+import { RadioGroup as c } from "../forms/radios/RadioGroup.js";
+import { memo as l, useCallback as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Icon as m } from "@clubmed/trident-icons";
+//#region lib/ui/criteria/CriteriaTransports.tsx
+var h = l(function({ option: t, isSelected: n, isSmall: r, onChange: i }) {
+	let a = u(() => {
+		i({
+			type: "select",
+			payload: n ? null : t.id
+		});
+	}, [
+		n,
+		i,
+		t.id
+	]);
+	return /* @__PURE__ */ p("button", {
+		"aria-pressed": n,
+		className: e("flex w-full items-center gap-12 text-left", r ? "rounded-8 px-8 py-4 text-b4" : "rounded-16 p-12 text-b3", n ? "bg-black text-white" : "bg-white"),
+		onClick: a,
+		type: "button",
+		children: [/* @__PURE__ */ f("span", {
+			className: "min-w-0 flex-1",
+			children: t.label
+		}), /* @__PURE__ */ f("span", {
+			className: "shrink-0 size-24",
+			children: n ? /* @__PURE__ */ f(m, {
+				"aria-hidden": !0,
+				name: "CheckDefault",
+				width: "24px"
+			}) : null
+		})]
+	});
+}), g = l(function({ section: e, selectedId: t, isSmall: n, onChange: r }) {
+	return /* @__PURE__ */ p("div", {
+		className: "space-y-8",
+		children: [/* @__PURE__ */ f("div", {
+			className: "border-lightGrey border-b px-4 py-12",
+			children: /* @__PURE__ */ f("p", {
+				className: "text-b3 font-semibold",
+				children: e.title
+			})
+		}), /* @__PURE__ */ f("div", {
+			className: "space-y-4",
+			children: e.options.map((e) => /* @__PURE__ */ f(h, {
+				isSelected: e.id === t,
+				isSmall: n,
+				onChange: r,
+				option: e
+			}, e.id))
+		})]
+	});
+}), _ = ({ onReset: e, onApply: t, resetLabel: r, applyLabel: i, withSpacer: a }) => !e && !t ? null : /* @__PURE__ */ p("div", {
+	className: "flex items-center justify-between",
+	children: [e && r ? /* @__PURE__ */ f("button", {
+		className: "text-b3 cursor-pointer font-semibold underline",
+		onClick: e,
+		type: "button",
+		children: r
+	}) : a ? /* @__PURE__ */ f("span", {}) : null, t && i ? /* @__PURE__ */ f(n, {
+		color: "saffron",
+		onClick: t,
+		children: i
+	}) : null]
+}), v = ({ labels: n, title: l, variant: u = "card", mode: h = "b2c", enabled: v, sections: y, selectedId: b, className: x, onChange: S, onReset: C, onApply: w, promotionalCard: T, error: E, flightType: D, flightTypeLabels: O, flightClass: k, flightClassLabel: A, flightClasses: j, fromQuery: M, fromQueryLabel: N }) => {
+	let P = u === "card", F = h === "b2b", I = F, L = /* @__PURE__ */ p("div", {
+		className: "gap-12 flex flex-col flex-1 min-h-0",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "space-y-8 px-8 pb-8",
+				children: [l ? /* @__PURE__ */ f("p", {
+					className: "text-b2 font-semibold",
+					children: l
+				}) : null, /* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ f("p", {
+						className: "text-b3 font-semibold",
+						children: n.addTransportationFrom
+					}), /* @__PURE__ */ f(i, {
+						checked: v,
+						onChange: (e, t) => S({
+							type: "enabled",
+							payload: t
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ f(t, {
+				isExpanded: !F && !v && !!T,
+				children: /* @__PURE__ */ f("div", {
+					className: "pb-4 px-8",
+					children: T ? /* @__PURE__ */ p("div", {
+						className: "rounded-16 border-lightGrey bg-white border p-20 space-y-12",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-start gap-20",
+							children: [T.icon ? /* @__PURE__ */ f("div", {
+								className: "rounded-full bg-lightSand shrink-0 p-12",
+								children: /* @__PURE__ */ f(m, {
+									"aria-hidden": !0,
+									name: T.icon,
+									width: "24px"
+								})
+							}) : null, /* @__PURE__ */ f("p", {
+								className: "text-b3 font-semibold",
+								children: T.title
+							})]
+						}), /* @__PURE__ */ f("p", {
+							className: "text-b3",
+							children: T.description
+						})]
+					}) : null
+				})
+			}),
+			/* @__PURE__ */ f(t, {
+				isExpanded: v,
+				className: "flex-1 min-h-0",
+				innerClassName: "flex flex-col min-h-0",
+				children: /* @__PURE__ */ f("div", {
+					className: "flex flex-col gap-8 px-8 pb-4 min-h-0 flex-1",
+					children: E ? /* @__PURE__ */ f("div", {
+						className: "rounded-16 border-lightGrey bg-white border p-20",
+						children: /* @__PURE__ */ p("div", {
+							className: "flex items-center gap-20",
+							children: [/* @__PURE__ */ f(r, {
+								color: "sienna",
+								icon: "Error",
+								size: "size-48",
+								theme: "solid"
+							}), /* @__PURE__ */ f("p", {
+								className: "text-b3 font-semibold text-sienna",
+								children: E
+							})]
+						})
+					}) : /* @__PURE__ */ p(d, { children: [
+						F && O && D !== void 0 ? /* @__PURE__ */ p(c, {
+							name: "flightType",
+							value: D,
+							onChange: (e, t) => S({
+								type: "flightType",
+								payload: t
+							}),
+							children: [/* @__PURE__ */ f(a, {
+								value: "round-trip",
+								className: "text-b3",
+								children: O.roundTrip
+							}), /* @__PURE__ */ f(a, {
+								value: "one-way",
+								className: "text-b3",
+								children: O.oneWay
+							})]
+						}) : null,
+						F && A && k !== void 0 && j?.length ? /* @__PURE__ */ f(o, {
+							label: A,
+							name: "flightClass",
+							value: k,
+							options: j.map((e) => ({
+								value: e,
+								label: e
+							})),
+							onChange: (e, t) => S({
+								type: "flightClass",
+								payload: t
+							})
+						}) : null,
+						F && N && M !== void 0 ? /* @__PURE__ */ f(s, {
+							label: N,
+							name: N,
+							value: M,
+							icon: "Search",
+							placeholder: N,
+							onChange: (e, t) => S({
+								type: "fromQuery",
+								payload: t
+							})
+						}) : null,
+						/* @__PURE__ */ f("div", {
+							className: "flex flex-col gap-20 overflow-y-auto flex-1 min-h-0",
+							children: y.map((e) => /* @__PURE__ */ f(g, {
+								isSmall: I,
+								onChange: S,
+								section: e,
+								selectedId: b
+							}, e.title))
+						})
+					] })
+				})
+			})
+		]
+	});
+	return P ? /* @__PURE__ */ p("div", {
+		className: e("rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20 max-h-full", x),
+		children: [/* @__PURE__ */ f("div", {
+			className: "rounded-16 bg-lightSand flex flex-col flex-1 min-h-0 py-20 px-12",
+			children: L
+		}), /* @__PURE__ */ f(_, {
+			applyLabel: n.apply,
+			onApply: w,
+			onReset: C,
+			resetLabel: n.reset,
+			withSpacer: !0
+		})]
+	}) : /* @__PURE__ */ p("div", {
+		className: e("space-y-20 flex flex-col h-full", x),
+		children: [L, /* @__PURE__ */ f(_, {
+			applyLabel: n.apply,
+			onApply: w,
+			onReset: C,
+			resetLabel: n.reset
+		})]
+	});
+};
+//#endregion
+export { v as CriteriaTransports };
+
+//# sourceMappingURL=CriteriaTransports.js.map

package/ui/criteria/CriteriaTransports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriteriaTransports.js","names":[],"sources":["../../../lib/ui/criteria/CriteriaTransports.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { memo, useCallback, type Dispatch, type FunctionComponent } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { Chip } from '../Chip';\nimport { ElasticHeight } from '../ElasticHeight';\nimport { Button } from '../buttons/Button';\nimport { RadioSelect } from '../forms/RadioSelect';\nimport { Switch } from '../forms/Switch';\nimport { TextField } from '../forms/TextField';\nimport { Radio } from '../forms/radios/Radio';\nimport { RadioGroup } from '../forms/radios/RadioGroup';\n\nexport interface TransportOption {\n  id: string;\n  label: string;\n}\n\nexport interface TransportSection {\n  title: string;\n  options: TransportOption[];\n}\n\nexport interface TransportPromotionalCard {\n  icon?: string;\n  title: string;\n  description: string;\n}\n\nexport interface CriteriaTransportsLabels {\n  addTransportationFrom: string;\n  reset?: string;\n  apply?: string;\n}\n\nexport type CriteriaTransportsAction =\n  | { type: 'enabled'; payload: boolean }\n  | { type: 'select'; payload: string | null }\n  | { type: 'flightType'; payload: 'round-trip' | 'one-way' }\n  | { type: 'flightClass'; payload: string }\n  | { type: 'fromQuery'; payload: string };\n\nexport interface CriteriaTransportsProps {\n  labels: CriteriaTransportsLabels;\n  title?: string;\n  /** card (default): white outer card with sand inner. flat: no background, content rendered directly */\n  variant?: 'card' | 'flat';\n  /** b2c (default): large items + promotional card. b2b: compact items + flight controls */\n  mode?: 'b2c' | 'b2b';\n  enabled: boolean;\n  sections: TransportSection[];\n  selectedId: string | null;\n  className?: string;\n  onChange: Dispatch<CriteriaTransportsAction>;\n  onReset?: () => void;\n  onApply?: () => void;\n  /** B2C: promotional card shown in the sand area when enabled=false */\n  promotionalCard?: TransportPromotionalCard;\n  /** Error message — shown instead of sections when enabled=true */\n  error?: string;\n  /** B2B: controlled flight type */\n  flightType?: 'round-trip' | 'one-way';\n  /** B2B: labels for the round-trip/one-way radio row */\n  flightTypeLabels?: { roundTrip: string; oneWay: string };\n  /** B2B: controlled selected class label */\n  flightClass?: string;\n  /** B2B: label for the class selector field */\n  flightClassLabel?: string;\n  /** B2B: available class options */\n  flightClasses?: string[];\n  /** B2B: controlled from/search query */\n  fromQuery?: string;\n  /** B2B: label for the from search field */\n  fromQueryLabel?: string;\n}\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\ninterface TransportOptionButtonProps {\n  option: TransportOption;\n  isSelected: boolean;\n  isSmall: boolean;\n  onChange: Dispatch<CriteriaTransportsAction>;\n}\n\n/** Toggle button for a single airport / transport option. */\nconst TransportOptionButton = memo(function TransportOptionButton({\n  option,\n  isSelected,\n  isSmall,\n  onChange,\n}: TransportOptionButtonProps) {\n  const handleClick = useCallback(() => {\n    onChange({ type: 'select', payload: isSelected ? null : option.id });\n  }, [isSelected, onChange, option.id]);\n\n  return (\n    <button\n      aria-pressed={isSelected}\n      className={clsx(\n        'flex w-full items-center gap-12 text-left',\n        isSmall ? 'rounded-8 px-8 py-4 text-b4' : 'rounded-16 p-12 text-b3',\n        isSelected ? 'bg-black text-white' : 'bg-white',\n      )}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <span className=\"min-w-0 flex-1\">{option.label}</span>\n      <span className=\"shrink-0 size-24\">\n        {isSelected ? <Icon aria-hidden name=\"CheckDefault\" width=\"24px\" /> : null}\n      </span>\n    </button>\n  );\n});\n\ninterface TransportSectionItemProps {\n  section: TransportSection;\n  selectedId: string | null;\n  isSmall: boolean;\n  onChange: Dispatch<CriteriaTransportsAction>;\n}\n\n/** A titled section with its list of selectable transport option buttons. */\nconst TransportSectionItem = memo(function TransportSectionItem({\n  section,\n  selectedId,\n  isSmall,\n  onChange,\n}: TransportSectionItemProps) {\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"border-lightGrey border-b px-4 py-12\">\n        <p className=\"text-b3 font-semibold\">{section.title}</p>\n      </div>\n      <div className=\"space-y-4\">\n        {section.options.map((option) => (\n          <TransportOptionButton\n            key={option.id}\n            isSelected={option.id === selectedId}\n            isSmall={isSmall}\n            onChange={onChange}\n            option={option}\n          />\n        ))}\n      </div>\n    </div>\n  );\n});\n\nconst Footer: FunctionComponent<{\n  onReset?: () => void;\n  onApply?: () => void;\n  resetLabel?: string;\n  applyLabel?: string;\n  withSpacer?: boolean;\n}> = ({ onReset, onApply, resetLabel, applyLabel, withSpacer }) => {\n  if (!onReset && !onApply) return null;\n  return (\n    <div className=\"flex items-center justify-between\">\n      {onReset && resetLabel ? (\n        <button\n          className=\"text-b3 cursor-pointer font-semibold underline\"\n          onClick={onReset}\n          type=\"button\"\n        >\n          {resetLabel}\n        </button>\n      ) : withSpacer ? (\n        <span />\n      ) : null}\n      {onApply && applyLabel ? (\n        <Button color=\"saffron\" onClick={onApply}>\n          {applyLabel}\n        </Button>\n      ) : null}\n    </div>\n  );\n};\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\nexport const CriteriaTransports: FunctionComponent<CriteriaTransportsProps> = ({\n  labels,\n  title,\n  variant = 'card',\n  mode = 'b2c',\n  enabled,\n  sections,\n  selectedId,\n  className,\n  onChange,\n  onReset,\n  onApply,\n  promotionalCard,\n  error,\n  flightType,\n  flightTypeLabels,\n  flightClass,\n  flightClassLabel,\n  flightClasses,\n  fromQuery,\n  fromQueryLabel,\n}) => {\n  const isCard = variant === 'card';\n  const isB2b = mode === 'b2b';\n  const isSmall = isB2b;\n\n  const sandContent = (\n    <div className=\"gap-12 flex flex-col flex-1 min-h-0\">\n      <div className=\"space-y-8 px-8 pb-8\">\n        {title ? <p className=\"text-b2 font-semibold\">{title}</p> : null}\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-b3 font-semibold\">{labels.addTransportationFrom}</p>\n          <Switch\n            checked={enabled}\n            onChange={(_, val) => onChange({ type: 'enabled', payload: val })}\n          />\n        </div>\n      </div>\n\n      <ElasticHeight isExpanded={!isB2b && !enabled && !!promotionalCard}>\n        <div className=\"pb-4 px-8\">\n          {promotionalCard ? (\n            <div className=\"rounded-16 border-lightGrey bg-white border p-20 space-y-12\">\n              <div className=\"flex items-start gap-20\">\n                {promotionalCard.icon ? (\n                  <div className=\"rounded-full bg-lightSand shrink-0 p-12\">\n                    <Icon aria-hidden name={promotionalCard.icon as never} width=\"24px\" />\n                  </div>\n                ) : null}\n                <p className=\"text-b3 font-semibold\">{promotionalCard.title}</p>\n              </div>\n              <p className=\"text-b3\">{promotionalCard.description}</p>\n            </div>\n          ) : null}\n        </div>\n      </ElasticHeight>\n\n      <ElasticHeight\n        isExpanded={enabled}\n        className=\"flex-1 min-h-0\"\n        innerClassName=\"flex flex-col min-h-0\"\n      >\n        <div className=\"flex flex-col gap-8 px-8 pb-4 min-h-0 flex-1\">\n          {error ? (\n            <div className=\"rounded-16 border-lightGrey bg-white border p-20\">\n              <div className=\"flex items-center gap-20\">\n                <Chip color=\"sienna\" icon=\"Error\" size=\"size-48\" theme=\"solid\" />\n                <p className=\"text-b3 font-semibold text-sienna\">{error}</p>\n              </div>\n            </div>\n          ) : (\n            <>\n              {isB2b && flightTypeLabels && flightType !== undefined ? (\n                <RadioGroup\n                  name=\"flightType\"\n                  value={flightType}\n                  onChange={(_event, value) =>\n                    onChange({ type: 'flightType', payload: value as 'round-trip' | 'one-way' })\n                  }\n                >\n                  <Radio value=\"round-trip\" className=\"text-b3\">\n                    {flightTypeLabels.roundTrip}\n                  </Radio>\n                  <Radio value=\"one-way\" className=\"text-b3\">\n                    {flightTypeLabels.oneWay}\n                  </Radio>\n                </RadioGroup>\n              ) : null}\n\n              {isB2b && flightClassLabel && flightClass !== undefined && flightClasses?.length ? (\n                <RadioSelect\n                  label={flightClassLabel}\n                  name=\"flightClass\"\n                  value={flightClass}\n                  options={flightClasses.map((cls) => ({ value: cls, label: cls }))}\n                  onChange={(_event, value) => onChange({ type: 'flightClass', payload: value })}\n                />\n              ) : null}\n\n              {isB2b && fromQueryLabel && fromQuery !== undefined ? (\n                <TextField\n                  label={fromQueryLabel}\n                  name={fromQueryLabel}\n                  value={fromQuery}\n                  icon=\"Search\"\n                  placeholder={fromQueryLabel}\n                  onChange={(_event, value) =>\n                    onChange({ type: 'fromQuery', payload: value as string })\n                  }\n                />\n              ) : null}\n\n              <div className=\"flex flex-col gap-20 overflow-y-auto flex-1 min-h-0\">\n                {sections.map((section) => (\n                  <TransportSectionItem\n                    key={section.title}\n                    isSmall={isSmall}\n                    onChange={onChange}\n                    section={section}\n                    selectedId={selectedId}\n                  />\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n\n  if (!isCard) {\n    return (\n      <div className={clsx('space-y-20 flex flex-col h-full', className)}>\n        {sandContent}\n        <Footer\n          applyLabel={labels.apply}\n          onApply={onApply}\n          onReset={onReset}\n          resetLabel={labels.reset}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={clsx(\n        'rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20 max-h-full',\n        className,\n      )}\n    >\n      <div className=\"rounded-16 bg-lightSand flex flex-col flex-1 min-h-0 py-20 px-12\">\n        {sandContent}\n      </div>\n      <Footer\n        applyLabel={labels.apply}\n        onApply={onApply}\n        onReset={onReset}\n        resetLabel={labels.reset}\n        withSpacer\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/CheckboxSelect.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { ValidationStatus } from '../hooks/useInternalStatus';
+export interface CheckboxSelectOption<Value = string> {
+    value: Value;
+    label: ReactNode;
+}
+export interface CheckboxSelectGroup<Value = string> {
+    label?: ReactNode;
+    options: CheckboxSelectOption<Value>[];
+}
+export interface CheckboxSelectProps<Value = string> {
+    id?: string;
+    name?: string;
+    label?: ReactNode;
+    description?: string;
+    placeholder?: string;
+    value?: Value[];
+    options?: CheckboxSelectOption<Value>[];
+    groups?: CheckboxSelectGroup<Value>[];
+    onChange?: (event: Event, value: Value[]) => void;
+    disabled?: boolean;
+    required?: boolean;
+    hideRequiredStar?: boolean;
+    validationStatus?: ValidationStatus;
+    errorMessage?: string;
+    className?: string;
+    'data-testid'?: string;
+    /** Renders the selected values summary in the trigger */
+    renderValue?: (selected: Value[]) => ReactNode;
+}
+export declare function CheckboxSelect<Value = string>({ id: idProp, name: nameProp, label, description, placeholder, value: controlledValue, options, groups, onChange, disabled, required, hideRequiredStar, validationStatus, errorMessage, className, 'data-testid': dataTestId, renderValue, }: CheckboxSelectProps<Value>): import("react/jsx-runtime").JSX.Element;

package/ui/forms/CheckboxSelect.js

@@ -0,0 +1,119 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Checkbox as t } from "./checkboxes/Checkbox.js";
+import { FormControl as n } from "./FormControl.js";
+import { useDropdown as r } from "../Dropdown.js";
+import { useEffect as i, useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Icon as l } from "@clubmed/trident-icons";
+//#region lib/ui/forms/CheckboxSelect.tsx
+function u({ children: t, selected: n }) {
+	return /* @__PURE__ */ s("span", {
+		ref: (e) => {
+			e && (e.title = e.textContent ?? "");
+		},
+		className: e("text-b3 text-black truncate", { "font-semibold": n }),
+		children: t
+	});
+}
+function d({ id: d, name: f, label: p, description: m, placeholder: h = "Select...", value: g, options: _, groups: v, onChange: y, disabled: b = !1, required: x = !1, hideRequiredStar: S, validationStatus: C = "default", errorMessage: w, className: T, "data-testid": E, renderValue: D }) {
+	let O = a(), k = d ?? O, A = f ?? k, { open: j, toggle: M, containerRef: N, isLeaving: P } = r(), [F, I] = o(g ?? []);
+	i(() => {
+		g !== void 0 && I(g);
+	}, [g]);
+	let L = (e, t) => {
+		let n = F.includes(t) ? F.filter((e) => e !== t) : [...F, t];
+		I(n), y?.(e, n);
+	}, R = _ || (v ?? []).flatMap((e) => e.options), z = F.length === 0 ? /* @__PURE__ */ s("span", {
+		className: "text-darkGrey",
+		children: h
+	}) : D ? D(F) : /* @__PURE__ */ s("span", { children: R.filter((e) => F.includes(e.value)).map((e) => e.label).join(", ") }), B = C === "error", V = C === "success", H = b, U = (e) => /* @__PURE__ */ s("div", {
+		className: "flex flex-col gap-12",
+		children: e.map((e, n) => /* @__PURE__ */ s(t, {
+			name: A,
+			value: String(e.value),
+			checked: F.includes(e.value),
+			disabled: b,
+			onChange: (t) => L(t, e.value),
+			children: /* @__PURE__ */ s(u, {
+				selected: F.includes(e.value),
+				children: e.label
+			})
+		}, n))
+	});
+	return /* @__PURE__ */ s(n, {
+		id: k,
+		label: p,
+		description: m,
+		className: T,
+		dataName: "CheckboxSelect",
+		"data-testid": E,
+		disabled: b,
+		required: x,
+		hideRequiredStar: S,
+		validationStatus: C,
+		errorMessage: w,
+		children: /* @__PURE__ */ c("div", {
+			ref: N,
+			className: "relative",
+			children: [/* @__PURE__ */ c("button", {
+				type: "button",
+				id: k,
+				"aria-haspopup": "listbox",
+				"aria-expanded": j,
+				"aria-disabled": H,
+				disabled: H,
+				onClick: M,
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8", {
+					"bg-white text-black border-middleGrey focus:border-black active:border-black": !H && !B && !V,
+					"bg-pearl border-middleGrey text-grey": H,
+					"border-red bg-white": B,
+					"border-green bg-white": V
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "truncate flex-1",
+					children: z
+				}), /* @__PURE__ */ c("span", {
+					className: "flex items-center gap-8 shrink-0",
+					children: [
+						B && /* @__PURE__ */ s(l, {
+							name: "CrossDefault",
+							width: "24px",
+							className: "text-red"
+						}),
+						V && /* @__PURE__ */ s(l, {
+							name: "CheckDefault",
+							width: "24px",
+							className: "text-green"
+						}),
+						/* @__PURE__ */ s(l, {
+							name: "ArrowDefaultDown",
+							width: "24px",
+							className: e("text-black transition-transform", { "rotate-180": j })
+						})
+					]
+				})]
+			}), /* @__PURE__ */ s("div", {
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-hidden": !j && !P,
+				className: e("absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]", {
+					"animate-zoom-in": j,
+					"animate-zoom-out pointer-events-none": !j && P,
+					"opacity-0 scale-90 pointer-events-none": !j && !P
+				}),
+				children: v ? v.map((t, n) => /* @__PURE__ */ c("div", {
+					className: e({ "mt-16 first:mt-0": n > 0 }),
+					children: [t.label && /* @__PURE__ */ s("p", {
+						className: "text-b4 text-darkGrey font-semibold mb-8 ps-4",
+						children: t.label
+					}), U(t.options)]
+				}, n)) : U(R)
+			})]
+		})
+	});
+}
+//#endregion
+export { d as CheckboxSelect };
+
+//# sourceMappingURL=CheckboxSelect.js.map

package/ui/forms/CheckboxSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (event: Event, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (event: Event, val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(event, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={(event) => toggleOption(event, option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out pointer-events-none': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":"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"}

package/ui/forms/Filter.d.ts

@@ -1,9 +1,15 @@
-import { FormControlProps } from './FormControl';
-export interface FilterProps<Value = string> extends FormControlProps<Value> {
+import { ComponentPropsWithoutRef } from 'react';
+export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
     /**
      * Is it attached to a dropdown?
      */
     hasDropdown?: boolean;
-    onChange?: (name: string, value: Value | null) => void;
+    /**
+     * @deprecated use ["data-testid"] instead
+     */
+    dataTestId?: string;
+    'data-testid'?: string;
+    value?: string | number | boolean;
+    onChange?: (event: Event, value: boolean) => void;
 }
-export declare function Filter<Value = string>(props: FilterProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Filter(props: FilterProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Filter.js

@@ -1,68 +1,50 @@
 import { t as e } from "../../chunks/clsx.js";
-import { useValue as t } from "../hooks/useValue.js";
-import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
-import { useId as r } from "react";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Icon as i } from "@clubmed/trident-icons";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region lib/ui/forms/Filter.tsx
-function s(s) {
-	let c = r(), { id: l = c, name: u = l, className: d, dataTestId: f, disabled: p = !1, checked: m = !1, value: h, tabIndex: g = 0, validationStatus: _ = "default", errorMessage: v, onChange: y, hasDropdown: b, children: x, ...S } = s, { value: C, setValue: w } = t({
-		name: u,
-		initialValue: m,
-		onChange(e, t) {
-			y?.(e, t ? h === void 0 ? t : h : null);
-		}
-	}), T = n({
-		isDisabled: p,
-		validationStatus: _
-	}) === "error" && v;
-	return /* @__PURE__ */ o("div", {
-		className: e(d, "relative"),
-		children: [/* @__PURE__ */ o("label", {
-			"data-testid": `filter-container-${l}`,
+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, value: g, children: _, ...v } = a;
+	return /* @__PURE__ */ n("div", {
+		className: e(l, "relative"),
+		children: /* @__PURE__ */ r("label", {
+			"data-testid": `filter-container-${s}`,
 			className: "relative",
-			children: [/* @__PURE__ */ a("input", {
-				...S,
-				name: u,
-				"data-testid": f,
+			children: [/* @__PURE__ */ n("input", {
+				...v,
+				id: s,
+				name: c,
+				"data-testid": f ?? u,
 				type: "checkbox",
-				tabIndex: g,
-				onChange: () => {
-					p || w(!C);
-				},
-				checked: C,
+				tabIndex: p,
 				"data-name": "Filter",
-				disabled: p,
-				value: h
-			}), /* @__PURE__ */ o("span", { children: [
-				/* @__PURE__ */ a("span", {
+				value: typeof g == "boolean" ? String(g) : g,
+				disabled: d,
+				onChange: (e) => {
+					h?.(e.nativeEvent, e.target.checked);
+				}
+			}), /* @__PURE__ */ r("span", { children: [
+				/* @__PURE__ */ n("span", {
 					className: "font-semibold",
-					children: x
+					children: _
 				}),
-				/* @__PURE__ */ a(i, {
+				/* @__PURE__ */ n(i, {
 					className: "check",
 					width: null,
 					name: "CheckDefault",
 					color: "black"
 				}),
-				b && /* @__PURE__ */ a(i, {
+				m && /* @__PURE__ */ n(i, {
 					name: "ArrowDefaultDown",
 					className: "ml-8",
 					width: "24px",
 					color: "black"
 				})
 			] })]
-		}), T && /* @__PURE__ */ o("span", {
-			className: "text-red text-b4 flex items-start space-x-4 ps-20",
-			role: "alert",
-			children: [/* @__PURE__ */ a(i, {
-				name: "Error",
-				width: "20px"
-			}), v]
-		})]
+		})
 	});
 }
 //#endregion
-export { s as Filter };
+export { a as Filter };
 
 //# sourceMappingURL=Filter.js.map

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 } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '../hooks/useValue';\nimport type { FormControlProps } from './FormControl';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) setValue(!checked);\n          }}\n          checked={checked}\n          data-name=\"Filter\"\n          disabled={disabled}\n          value={value as any}\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\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,EAAuB,GAA2B;CAChE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,SAAS,IAAiB,IAC1B,UACA,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,gBACA,aACA,GAAG,MACD,GAEE,EAAE,OAAO,GAAS,gBAAa,EAAkB;EACrD;EACA,cAAc;EACd,SAAS,GAAM,GAAS;AACtB,OAAW,GAAM,IAAY,MAAU,KAAA,IAAoB,IAAR,IAA6B,KAAK;;EAExF,CAAC,EAOI,IALiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,KAEmD,WAAW;AAEhE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YAA3C,CACE,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACE;IACN,eAAa;IACb,MAAK;IACK;IACV,gBAAgB;AACd,KAAK,KAAU,EAAS,CAAC,EAAQ;;IAE1B;IACT,aAAU;IACA;IACH;IACP,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;MAEP,KACC,kBAAC,QAAD;GAAM,WAAU;GAAoD,MAAK;aAAzE,CACE,kBAAC,GAAD;IAAM,MAAK;IAAQ,OAAM;IAAS,CAAA,EACjC,EACI;KAEL"}
+{"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;