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

package/ui/forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    hasDropdown = true,\n    clear = '',\n    iconFirst = true,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          style={\n            {\n              '--nbIconsStart': Number(!!icon && iconFirst),\n              '--nbIconsEnd':\n                Number(!!icon && !iconFirst) +\n                Number(shouldDisplayClearButton || hasDropdown) +\n                Number(internalStatus === 'error' || internalStatus === 'success'),\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\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={name}\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\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={() => setValue('' as Value)}\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    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAM;EAAc;EAAU;EAAW,CAAC,EAClF,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAe;IAClD,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OAAO,KAA4B,EAAY,GAC/C,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,2KACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAe,OACd,IACC,kBAAC,UAAD;OACE,WAAU;OACV,eAAe,EAAS,GAAY;OACpC,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    hasDropdown = false,\n    clear = '',\n    iconFirst = true,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          style={\n            {\n              '--nbIconsStart': Number(!!icon && iconFirst),\n              '--nbIconsEnd':\n                Number(!!icon && !iconFirst) +\n                Number(\n                  (hasDropdown && !shouldDisplayClearButton) ||\n                    (shouldDisplayClearButton && internalStatus !== 'error'),\n                ) +\n                Number(internalStatus === 'error' || internalStatus === 'success'),\n            } as React.CSSProperties\n          }\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 ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\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={name}\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              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n                </button>\n              ) : (\n                <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n              ))}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || (shouldDisplayClearButton && internalStatus !== 'error')) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\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    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OACG,KAAe,CAAC,KACd,KAA4B,MAAmB,QACnD,GACD,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,qPACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,YACjB,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,OAAM;QAAO,MAAM;QAAY,CAAA;OAClD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG5D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAgB,KAA4B,MAAmB,aAC9D,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}

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

@@ -1,9 +1,14 @@
 import { ComponentPropsWithoutRef, Ref } from 'react';
 import { Colors } from '../../types/Colors';
-export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+import { ValidationStatus } from '../../hooks/useInternalStatus';
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
     color?: Colors;
     size?: string;
-}
-export declare function Checkbox(props: CheckboxProps & {
+    value?: string | number | boolean;
+    validationStatus?: ValidationStatus;
+    errorMessage?: string;
+    ['data-testid']?: string;
     ref?: Ref<HTMLInputElement>;
-}): import("react/jsx-runtime").JSX.Element;
+    onChange?: (event: Event, value: boolean) => void;
+}
+export declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/checkboxes/Checkbox.js

@@ -1,30 +1,50 @@
 import { t as e } from "../../../chunks/clsx.js";
 import { getBorderColor as t, getTextColor as n } from "../../helpers/colors/colors.js";
-import { useId as r } from "react";
-import { Icon as i } from "@clubmed/trident-icons";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { FormControlError as r } from "../FormControlError.js";
+import { useInternalStatus as i } from "../../hooks/useInternalStatus.js";
+import { useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Icon as c } from "@clubmed/trident-icons";
 //#region lib/ui/forms/checkboxes/Checkbox.tsx
-function s(s) {
-	let c = r(), { id: l = c, name: u = l, className: d, color: f = "black", size: p = "size-24", tabIndex: m = 0, ref: h, ...g } = s;
-	return /* @__PURE__ */ o("span", {
-		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border", t(f), n(f), p, d),
+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, value: C, "data-testid": w, ...T } = l, E = i({
+		isDisabled: g,
+		validationStatus: v
+	}), D = E === "disabled", O = E === "error" && y, k = e({
+		"!border-red !text-red": E === "error",
+		"bg-pearl": D
+	}), A = /* @__PURE__ */ s("span", {
+		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2", t(m), n(m), h, k, p),
 		"data-name": "Checkbox",
-		children: [/* @__PURE__ */ a("input", {
-			...g,
-			id: l,
-			name: u,
+		children: [/* @__PURE__ */ o("input", {
+			...T,
+			disabled: g,
+			id: d,
+			name: f,
 			className: "peer sr-only",
-			ref: h,
-			tabIndex: m,
-			type: "checkbox"
-		}), /* @__PURE__ */ a(i, {
+			ref: x,
+			tabIndex: _,
+			type: "checkbox",
+			value: typeof C == "boolean" ? String(C) : C,
+			onChange: (e) => {
+				S?.(e.nativeEvent, e.target.checked);
+			}
+		}), /* @__PURE__ */ o(c, {
 			className: "scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100",
 			name: "CheckDefault",
 			width: "100%"
 		})]
 	});
+	return !b && !y ? A : /* @__PURE__ */ s("div", {
+		className: e("flex flex-col space-y-2", p),
+		"data-testid": w || `checkbox-container-${d}`,
+		children: [/* @__PURE__ */ s("label", {
+			className: e("relative flex items-center gap-8", { "text-grey": g }),
+			children: [A, b]
+		}), O && /* @__PURE__ */ o(r, { children: y })]
+	});
 }
 //#endregion
-export { s as Checkbox };
+export { l as Checkbox };
 
 //# sourceMappingURL=Checkbox.js.map

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';\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  color?: Colors;\n  size?: string;\n}\n\nexport function Checkbox(props: CheckboxProps & { ref?: Ref<HTMLInputElement> }) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    color = 'black',\n    size = 'size-24',\n    tabIndex = 0,\n    ref,\n    ...rest\n  } = props;\n\n  return (\n    <span\n      className={clsx(\n        'rounded-8 inline-flex shrink-0 items-center justify-center self-start border',\n        getBorderColor(color),\n        getTextColor(color),\n        size,\n        className,\n      )}\n      data-name=\"Checkbox\"\n    >\n      <input\n        {...rest}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        ref={ref}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\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"],"mappings":";;;;;;AAWA,SAAgB,EAAS,GAAwD;CAC/E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,WAAQ,SACR,UAAO,WACP,cAAW,GACX,QACA,GAAG,MACD;AAEJ,QACE,kBAAC,QAAD;EACE,WAAW,EACT,gFACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,EACD;EACD,aAAU;YARZ,CAUE,kBAAC,SAAD;GACE,GAAI;GACA;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,CAAA,EACF,kBAAC,GAAD;GACE,WAAU;GACV,MAAK;GACL,OAAM;GACN,CAAA,CACG"}
+{"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 has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2',\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,0NACA,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"}

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

@@ -1,5 +1,10 @@
 import { HTMLAttributes } from 'react';
 import { FormControlProps } from '../FormControl';
 export interface CheckboxesProps<Value = string> extends Pick<FormControlProps<Value[]>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Should the tabIndex be overridden for each checkbox?
+     * @default true
+     */
+    overrideTabIndex?: boolean;
 }
 export declare function Checkboxes<Value = string>(props: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;

package/ui/forms/checkboxes/Checkboxes.js

@@ -4,8 +4,7 @@ import { Children as n, cloneElement as r, isValidElement as i, useId as a } fro
 import { jsx as o } from "react/jsx-runtime";
 //#region lib/ui/forms/checkboxes/Checkboxes.tsx
 function s(s) {
-	let c = a(), { id: l = c, name: u = l, children: d, value: f, defaultValue: p, onChange: m, disabled: h, readOnly: g, tabIndex: _ = 0, ...v } = s, { value: y, setValue: b } = t({
-		name: u,
+	let c = a(), { id: l = c, name: u = l, children: d, value: f, defaultValue: p, onChange: m, disabled: h, readOnly: g, tabIndex: _ = 0, overrideTabIndex: v = !0, ...y } = s, { value: b, setValue: x } = t({
 		initialValue: f,
 		formatter(e) {
 			return e === void 0 ? e : [].concat(e);
@@ -14,8 +13,8 @@ function s(s) {
 		onChange: m
 	});
 	return /* @__PURE__ */ o("div", {
-		...v,
-		className: v.className,
+		...y,
+		className: y.className,
 		role: "listbox",
 		children: n.map(d, (t, n) => {
 			if (i(t)) {
@@ -26,11 +25,12 @@ function s(s) {
 					id: `${l}-${n}`,
 					disabled: h,
 					readOnly: g,
-					tabIndex: _ + n + 1,
+					tabIndex: v ? _ + n + 1 : _,
 					className: e(t.props.className || "mt-8 first:mt-0"),
-					checked: y.includes(i),
-					onChange(e) {
-						e.target.checked ? b(y.concat(i)) : b(y.filter((e) => e !== i));
+					checked: b.includes(i),
+					onChange(...e) {
+						let t = e[0] instanceof Event ? e[0] : e[0]?.nativeEvent ?? new Event("change");
+						(typeof e[2] == "boolean" ? e[2] : typeof e[1] == "boolean" ? e[1] : e[0]?.target?.checked) ? x(b.concat(i), t) : x(b.filter((e) => e !== i), t);
 					}
 				});
 			}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkboxes.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkboxes.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport { useValue } from '../../hooks/useValue';\nimport type { CheckboxProps } from './Checkbox';\nimport clsx from 'clsx';\n\nexport interface CheckboxesProps<Value = string>\n  extends Pick<\n      FormControlProps<Value[]>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function Checkboxes<Value = string>(props: CheckboxesProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value[]>({\n    name,\n    initialValue,\n    formatter(value) {\n      return value !== undefined ? ([].concat(value as never) as Value[]) : value;\n    },\n    defaultValue: (defaultValue as Value[]) || ([] as Value[]),\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={rest.className} role=\"listbox\">\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const propValue: Value = (child.props as CheckboxProps).value as Value;\n\n          return cloneElement(child, {\n            ...(child.props as any),\n            name,\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: tabIndex + index + 1,\n            className: clsx((child.props as any).className || 'mt-8 first:mt-0'),\n            checked: value.includes(propValue),\n            onChange(e: React.ChangeEvent<HTMLInputElement>) {\n              if (e.target.checked) {\n                setValue(value.concat(propValue));\n              } else {\n                setValue(value.filter((v) => v !== propValue));\n              }\n            },\n          } as CheckboxProps);\n        }\n\n        return child;\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAA2B,GAA+B;CACxE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,aACA,OAAO,GACP,iBACA,aACA,aACA,aACA,cAAW,GACX,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAkB;EAC5C;EACA;EACA,UAAU,GAAO;AACf,UAAO,MAAU,KAAA,IAAqD,IAAxC,EAAE,CAAC,OAAO,EAAe;;EAEzD,cAAe,KAA6B,EAAE;EAC9C;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAK;EAAW,MAAK;YAC5C,EAAS,IAAI,IAAW,GAAO,MAAU;AACxC,OAAI,EAAe,EAAM,EAAE;IACzB,IAAM,IAAoB,EAAM,MAAwB;AAExD,WAAO,EAAa,GAAO;KACzB,GAAI,EAAM;KACV;KACA,IAAI,GAAG,EAAG,GAAG;KACb;KACA;KACA,UAAU,IAAW,IAAQ;KAC7B,WAAW,EAAM,EAAM,MAAc,aAAa,kBAAkB;KACpE,SAAS,EAAM,SAAS,EAAU;KAClC,SAAS,GAAwC;AAC/C,MAAI,EAAE,OAAO,UACX,EAAS,EAAM,OAAO,EAAU,CAAC,GAEjC,EAAS,EAAM,QAAQ,MAAM,MAAM,EAAU,CAAC;;KAGnD,CAAkB;;AAGrB,UAAO;IACP;EACE,CAAA"}
+{"version":3,"file":"Checkboxes.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkboxes.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport { useValue } from '../../hooks/useValue';\nimport type { CheckboxProps } from './Checkbox';\nimport clsx from 'clsx';\n\nexport interface CheckboxesProps<Value = string>\n  extends Pick<\n      FormControlProps<Value[]>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * Should the tabIndex be overridden for each checkbox?\n   * @default true\n   */\n  overrideTabIndex?: boolean;\n}\n\nexport function Checkboxes<Value = string>(props: CheckboxesProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    overrideTabIndex = true,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value[]>({\n    initialValue,\n    formatter(value) {\n      return value !== undefined ? ([].concat(value as never) as Value[]) : value;\n    },\n    defaultValue: (defaultValue as Value[]) || ([] as Value[]),\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={rest.className} role=\"listbox\">\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const propValue: Value = (child.props as CheckboxProps).value as Value;\n\n          return cloneElement(child, {\n            ...(child.props as any),\n            name,\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: overrideTabIndex ? tabIndex + index + 1 : tabIndex,\n            className: clsx((child.props as any).className || 'mt-8 first:mt-0'),\n            checked: value.includes(propValue),\n            onChange(...args: unknown[]) {\n              const event =\n                args[0] instanceof Event\n                  ? args[0]\n                  : (args[0] as React.ChangeEvent<HTMLInputElement>)?.nativeEvent ??\n                    new Event('change');\n              const checked =\n                typeof args[2] === 'boolean'\n                  ? args[2]\n                  : typeof args[1] === 'boolean'\n                    ? args[1]\n                    : (args[0] as React.ChangeEvent<HTMLInputElement>)?.target?.checked;\n\n              if (checked) {\n                setValue(value.concat(propValue), event);\n              } else {\n                setValue(\n                  value.filter((v) => v !== propValue),\n                  event,\n                );\n              }\n            },\n          } as CheckboxProps);\n        }\n\n        return child;\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA4BA,SAAgB,EAA2B,GAA+B;CACxE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,aACA,OAAO,GACP,iBACA,aACA,aACA,aACA,cAAW,GACX,sBAAmB,IACnB,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAkB;EAC5C;EACA,UAAU,GAAO;AACf,UAAO,MAAU,KAAA,IAAqD,IAAxC,EAAE,CAAC,OAAO,EAAe;;EAEzD,cAAe,KAA6B,EAAE;EAC9C;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAK;EAAW,MAAK;YAC5C,EAAS,IAAI,IAAW,GAAO,MAAU;AACxC,OAAI,EAAe,EAAM,EAAE;IACzB,IAAM,IAAoB,EAAM,MAAwB;AAExD,WAAO,EAAa,GAAO;KACzB,GAAI,EAAM;KACV;KACA,IAAI,GAAG,EAAG,GAAG;KACb;KACA;KACA,UAAU,IAAmB,IAAW,IAAQ,IAAI;KACpD,WAAW,EAAM,EAAM,MAAc,aAAa,kBAAkB;KACpE,SAAS,EAAM,SAAS,EAAU;KAClC,SAAS,GAAG,GAAiB;MAC3B,IAAM,IACJ,EAAK,cAAc,QACf,EAAK,KACJ,EAAK,IAA4C,eAClD,IAAI,MAAM,SAAS;AAQzB,OANE,OAAO,EAAK,MAAO,YACf,EAAK,KACL,OAAO,EAAK,MAAO,YACjB,EAAK,KACJ,EAAK,IAA4C,QAAQ,WAGhE,EAAS,EAAM,OAAO,EAAU,EAAE,EAAM,GAExC,EACE,EAAM,QAAQ,MAAM,MAAM,EAAU,EACpC,EACD;;KAGN,CAAkB;;AAGrB,UAAO;IACP;EACE,CAAA"}

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

@@ -1,3 +1,2 @@
 export * from './Checkbox.js';
 export * from './Checkboxes.js';
-export * from './FormCheckbox.js';

package/ui/forms/checkboxes/index.js

@@ -1,4 +1,3 @@
 import { Checkbox as e } from "./Checkbox.js";
 import { Checkboxes as t } from "./Checkboxes.js";
-import { FormCheckbox as n } from "./FormCheckbox.js";
-export { e as Checkbox, t as Checkboxes, n as FormCheckbox };
+export { e as Checkbox, t as Checkboxes };

package/ui/forms/password/Password.js

@@ -1,18 +1,17 @@
 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 { FormControl as r } from "../FormControl.js";
+import { useInternalStatus as t } from "../../hooks/useInternalStatus.js";
+import { FormControl as n } from "../FormControl.js";
+import { useValue as r } from "../../hooks/useValue.js";
 import { ValidationMessage as i } from "./ValidationMessage.js";
 import { useEffect as a, useId as o, useState as s } from "react";
-import { Icon as c } from "@clubmed/trident-icons";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Icon as u } from "@clubmed/trident-icons";
 //#region lib/ui/forms/password/Password.tsx
 function d(d) {
-	let f = o(), { id: p = f, name: m = p, label: h, value: g, disabled: _ = !1, required: v = !1, hideRequiredStar: y, validationStatus: b = "default", errorMessage: x, validationMessages: S = [], withoutFieldValidation: C = !1, className: w, onChange: T, dataTestId: E = "Password", ...D } = d, O = n({
+	let f = o(), { id: p = f, name: m = p, label: h, value: g, disabled: _ = !1, required: v = !1, hideRequiredStar: y, validationStatus: b = "default", errorMessage: x, validationMessages: S = [], withoutFieldValidation: C = !1, className: w, onChange: T, dataTestId: E = "Password", ...D } = d, O = t({
 		isDisabled: _,
 		validationStatus: b
-	}), { value: k, setValue: A } = t({
-		name: m,
+	}), { value: k, setValue: A } = r({
 		initialValue: g,
 		onChange: T
 	}), [j, M] = s("password");
@@ -20,7 +19,7 @@ function d(d) {
 		M(_ ? "password" : j);
 	}, [j, _]);
 	let N = () => M(j === "password" ? "text" : "password");
-	return /* @__PURE__ */ u(r, {
+	return /* @__PURE__ */ l(n, {
 		className: w,
 		id: p,
 		label: h,
@@ -31,9 +30,9 @@ function d(d) {
 		hideRequiredStar: y,
 		validationStatus: C ? "default" : b,
 		errorMessage: x,
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "relative",
-			children: [/* @__PURE__ */ l("input", {
+			children: [/* @__PURE__ */ c("input", {
 				...D,
 				id: p,
 				name: m,
@@ -41,8 +40,8 @@ function d(d) {
 				value: k,
 				disabled: _,
 				required: v,
-				onChange: (e) => A(e.target.value),
-				className: e("text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none", {
+				onChange: (e) => A(e.target.value, e.nativeEvent),
+				className: e("text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 					"border-middleGrey focus:border-black active:border-black pe-[52px]": (C || b === "default") && O !== "disabled",
 					"bg-white text-black": O !== "disabled",
 					"bg-pearl border-middleGrey": O === "disabled",
@@ -51,26 +50,26 @@ function d(d) {
 					"border-green": !C && b === "success"
 				}),
 				"aria-label": m
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"),
-				children: /* @__PURE__ */ u("span", {
+				children: /* @__PURE__ */ l("span", {
 					className: "ms-auto flex gap-x-8",
 					children: [
-						!C && b === "error" && /* @__PURE__ */ l(c, {
+						!C && b === "error" && /* @__PURE__ */ c(u, {
 							name: "CrossDefault",
 							color: "red",
 							width: "24px"
 						}),
-						!C && b === "success" && /* @__PURE__ */ l(c, {
+						!C && b === "success" && /* @__PURE__ */ c(u, {
 							name: "CheckDefault",
 							color: "green",
 							width: "24px"
 						}),
-						!_ && /* @__PURE__ */ l("button", {
+						!_ && /* @__PURE__ */ c("button", {
 							type: "button",
-							className: "pointer-events-auto size-24 inline-flex",
+							className: "pointer-events-auto size-24 inline-flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 							onClick: N,
-							children: /* @__PURE__ */ l(c, {
+							children: /* @__PURE__ */ c(u, {
 								name: j === "password" ? "Invisible" : "Visible",
 								width: "24px",
 								type: "svg"
@@ -79,9 +78,9 @@ function d(d) {
 					]
 				})
 			})]
-		}), S.length > 0 && /* @__PURE__ */ l("div", {
+		}), S.length > 0 && /* @__PURE__ */ c("div", {
 			className: "flex flex-col gap-[10px] mt-8",
-			children: S.map(({ label: e, status: t }, n) => /* @__PURE__ */ l(i, {
+			children: S.map(({ label: e, status: t }, n) => /* @__PURE__ */ c(i, {
 				label: e,
 				status: t
 			}, n))

package/ui/forms/password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","names":[],"sources":["../../../../lib/ui/forms/password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '../../hooks/useInternalStatus';\nimport clsx from 'clsx';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '../../hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@clubmed/trident-icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\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        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAyB,GAA6B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,cAAW,IACX,cAAW,IACX,qBACA,sBAAmB,WACnB,iBACA,wBAAqB,EAAE,EACvB,4BAAyB,IACzB,cACA,aACA,gBAAa,YACb,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,EAAE,UAAO,gBAAa,EAAgB;EAC1C;EACA;EACA;EACD,CAAC,EACI,CAAC,GAAM,KAAW,EAAiC,WAAW;AAEpE,SAAgB;AACd,EACE,EADE,IACM,aAEA,EAAK;IAEd,CAAC,GAAM,EAAS,CAAC;CAEpB,IAAM,UAAmB,EAAQ,MAAS,aAAa,SAAS,WAAW;AAE3E,QACE,kBAAC,GAAD;EACa;EACP;EACG;EACP,UAAS;EACG;EACF;EACA;EACQ;EAClB,kBAAkB,IAAyB,YAAY;EACzC;YAVhB,CAYE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACA;IACC;IACG;IACA;IACV,WAAW,MAAM,EAAS,EAAE,OAAO,MAAe;IAClD,WAAW,EACT,+FACA;KACE,uEACG,KAA0B,MAAqB,cAChD,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,aACE,CAAC,MACA,MAAqB,WAAW,MAAqB;KACxD,cAAc,CAAC,KAA0B,MAAqB;KAC9D,gBAAgB,CAAC,KAA0B,MAAqB;KACjE,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,qFACD;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,CAAC,KAA0B,MAAqB,WAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAM,OAAM;OAAS,CAAA;MAGtD,CAAC,KAA0B,MAAqB,aAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAQ,OAAM;OAAS,CAAA;MAGxD,CAAC,KACA,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;iBAET,kBAAC,GAAD;QACE,MAAM,MAAS,aAAa,cAAc;QAC1C,OAAM;QACN,MAAK;QACL,CAAA;OACK,CAAA;MAEN;;IACH,CAAA,CACF;MAEL,EAAmB,SAAS,KAC3B,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAmB,KAAK,EAAE,UAAO,aAAU,MAC1C,kBAAC,GAAD;IAA0B;IAAe;IAAsB,EAAT,EAAS,CAC/D;GACE,CAAA,CAEI"}
+{"version":3,"file":"Password.js","names":[],"sources":["../../../../lib/ui/forms/password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '../../hooks/useInternalStatus';\nimport clsx from 'clsx';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '../../hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@clubmed/trident-icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\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        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAyB,GAA6B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,cAAW,IACX,cAAW,IACX,qBACA,sBAAmB,WACnB,iBACA,wBAAqB,EAAE,EACvB,4BAAyB,IACzB,cACA,aACA,gBAAa,YACb,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,EAAE,UAAO,gBAAa,EAAgB;EAC1C;EACA;EACD,CAAC,EACI,CAAC,GAAM,KAAW,EAAiC,WAAW;AAEpE,SAAgB;AACd,EACE,EADE,IACM,aAEA,EAAK;IAEd,CAAC,GAAM,EAAS,CAAC;CAEpB,IAAM,UAAmB,EAAQ,MAAS,aAAa,SAAS,WAAW;AAE3E,QACE,kBAAC,GAAD;EACa;EACP;EACG;EACP,UAAS;EACG;EACF;EACA;EACQ;EAClB,kBAAkB,IAAyB,YAAY;EACzC;YAVhB,CAYE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACA;IACC;IACG;IACA;IACV,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,WAAW,EACT,yKACA;KACE,uEACG,KAA0B,MAAqB,cAChD,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,aACE,CAAC,MACA,MAAqB,WAAW,MAAqB;KACxD,cAAc,CAAC,KAA0B,MAAqB;KAC9D,gBAAgB,CAAC,KAA0B,MAAqB;KACjE,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,qFACD;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,CAAC,KAA0B,MAAqB,WAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAM,OAAM;OAAS,CAAA;MAGtD,CAAC,KAA0B,MAAqB,aAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAQ,OAAM;OAAS,CAAA;MAGxD,CAAC,KACA,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;iBAET,kBAAC,GAAD;QACE,MAAM,MAAS,aAAa,cAAc;QAC1C,OAAM;QACN,MAAK;QACL,CAAA;OACK,CAAA;MAEN;;IACH,CAAA,CACF;MAEL,EAAmB,SAAS,KAC3B,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAmB,KAAK,EAAE,UAAO,aAAU,MAC1C,kBAAC,GAAD;IAA0B;IAAe;IAAsB,EAAT,EAAS,CAC/D;GACE,CAAA,CAEI"}

package/ui/forms/password/ValidationMessage.js

@@ -1,6 +1,6 @@
 import { t as e } from "../../../chunks/clsx.js";
-import { Icon as t } from "@clubmed/trident-icons";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Icon as r } from "@clubmed/trident-icons";
 //#region lib/ui/forms/password/ValidationMessage.tsx
 var i = {
 	default: {
@@ -18,13 +18,13 @@ var i = {
 };
 function a({ label: a, status: o }) {
 	let { iconName: s, iconColor: c } = i[o];
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ n("div", {
 		className: "flex gap-[6px] px-20 items-center",
-		children: [/* @__PURE__ */ n(t, {
+		children: [/* @__PURE__ */ t(r, {
 			name: s,
 			width: "30px",
 			color: c
-		}), /* @__PURE__ */ n("span", {
+		}), /* @__PURE__ */ t("span", {
 			className: e("text-b3", `text-${c}`),
 			children: a
 		})]

package/ui/forms/radios/Radio.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
     /**
      * The data-testid to apply to the button.
      * This is used for testing purposes.
@@ -10,6 +10,7 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      * The diameter of the radio button.
      * */
     size?: number;
+    onChange?: (event: Event, value: string) => void;
 }
 export declare function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Radio {

package/ui/forms/radios/Radio.js

@@ -3,20 +3,23 @@ import { useId as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/ui/forms/radios/Radio.tsx
 function i(i) {
-	let a = t(), { id: o = a, name: s = o, className: c, dataTestId: l, disabled: u, size: d = 24, tabIndex: f = 0, children: p, ...m } = i;
+	let a = t(), { id: o = a, name: s = o, className: c, dataTestId: l, disabled: u, size: d = 24, tabIndex: f = 0, children: p, onChange: m, ...h } = i;
 	return /* @__PURE__ */ r("label", {
 		className: e(c, "relative flex items-center gap-8", { "text-grey": u }),
 		children: [/* @__PURE__ */ r("span", {
 			className: "relative",
 			children: [/* @__PURE__ */ n("input", {
 				"data-testid": l,
-				...m,
+				...h,
 				id: o,
 				name: s,
 				type: "radio",
 				tabIndex: f,
 				"data-name": "Radio",
-				disabled: u
+				disabled: u,
+				onChange: (e) => {
+					m?.(e.nativeEvent, e.target.value);
+				}
 			}), /* @__PURE__ */ n("span", {
 				style: {
 					height: d,

package/ui/forms/radios/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../../lib/ui/forms/radios/Radio.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type InputHTMLAttributes, useId } from 'react';\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * @deprecated use [\"data-testid\"] instead.\n   */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n}\n\nexport function Radio(props: RadioProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    size = 24,\n    tabIndex = 0,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <label\n      className={clsx(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          data-testid={dataTestId}\n          {...rest}\n          id={id}\n          name={name}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          data-name=\"Radio\"\n          disabled={disabled}\n        />\n\n        <span style={{ height: size, width: size }} className={clsx({ 'bg-pearl': disabled })}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'var(--color-saffron)' }} />\n            <circle cx=\"8\" cy=\"8\" r=\"4px\" style={{ fill: 'var(--color-black)' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n\nRadio.displayName = 'Radio';\n"],"mappings":";;;;AAgBA,SAAgB,EAAM,GAAmB;CACvC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,aACA,UAAO,IACP,cAAW,GACX,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,SAAD;EACE,WAAW,EAAK,GAAW,oCAAoC,EAC7D,aAAa,GACd,CAAC;YAHJ,CAKE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACE,kBAAC,SAAD;IACE,eAAa;IACb,GAAI;IACA;IACE;IACN,MAAK;IACK;IACV,aAAU;IACA;IACV,CAAA,EAEF,kBAAC,QAAD;IAAM,OAAO;KAAE,QAAQ;KAAM,OAAO;KAAM;IAAE,WAAW,EAAK,EAAE,YAAY,GAAU,CAAC;cACnF,kBAAC,OAAD;KAAK,SAAQ;KAAY,OAAQ,IAAO,IAAK;KAAG,WAAU;eAA1D,CACE,kBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAM,OAAO,EAAE,MAAM,wBAAwB;MAAI,CAAA,EACzE,kBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAM,OAAO,EAAE,MAAM,sBAAsB;MAAI,CAAA,CACnE;;IACD,CAAA,CACF;MAEN,EACK;;;AAIZ,EAAM,cAAc"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../../lib/ui/forms/radios/Radio.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type InputHTMLAttributes, useId } from 'react';\n\nexport interface RadioProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * @deprecated use [\"data-testid\"] instead.\n   */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n  onChange?: (event: Event, value: string) => void;\n}\n\nexport function Radio(props: RadioProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    size = 24,\n    tabIndex = 0,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  return (\n    <label\n      className={clsx(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          data-testid={dataTestId}\n          {...rest}\n          id={id}\n          name={name}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          data-name=\"Radio\"\n          disabled={disabled}\n          onChange={(e) => {\n            onChange?.(e.nativeEvent, e.target.value);\n          }}\n        />\n\n        <span style={{ height: size, width: size }} className={clsx({ 'bg-pearl': disabled })}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'var(--color-saffron)' }} />\n            <circle cx=\"8\" cy=\"8\" r=\"4px\" style={{ fill: 'var(--color-black)' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n\nRadio.displayName = 'Radio';\n"],"mappings":";;;;AAkBA,SAAgB,EAAM,GAAmB;CACvC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,aACA,UAAO,IACP,cAAW,GACX,aACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,SAAD;EACE,WAAW,EAAK,GAAW,oCAAoC,EAC7D,aAAa,GACd,CAAC;YAHJ,CAKE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACE,kBAAC,SAAD;IACE,eAAa;IACb,GAAI;IACA;IACE;IACN,MAAK;IACK;IACV,aAAU;IACA;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,MAAM;;IAE3C,CAAA,EAEF,kBAAC,QAAD;IAAM,OAAO;KAAE,QAAQ;KAAM,OAAO;KAAM;IAAE,WAAW,EAAK,EAAE,YAAY,GAAU,CAAC;cACnF,kBAAC,OAAD;KAAK,SAAQ;KAAY,OAAQ,IAAO,IAAK;KAAG,WAAU;eAA1D,CACE,kBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAM,OAAO,EAAE,MAAM,wBAAwB;MAAI,CAAA,EACzE,kBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAM,OAAO,EAAE,MAAM,sBAAsB;MAAI,CAAA,CACnE;;IACD,CAAA,CACF;MAEN,EACK;;;AAIZ,EAAM,cAAc"}

package/ui/forms/radios/RadioGroup.js

@@ -1,21 +1,20 @@
 import { t as e } from "../../../chunks/clsx.js";
-import { KEY as t } from "../../hooks/keyboard.constants.js";
-import { useValue as n } from "../../hooks/useValue.js";
+import { useValue as t } from "../../hooks/useValue.js";
+import { KEY as n } from "../../hooks/keyboard.constants.js";
 import { Children as r, cloneElement as i, isValidElement as a, useId as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 //#region lib/ui/forms/radios/RadioGroup.tsx
 function c(c) {
-	let l = o(), { id: u = l, name: d = u, children: f, value: p, defaultValue: m, onChange: h, disabled: g, readOnly: _, tabIndex: v = 0, ...y } = c, { value: b, setValue: x } = n({
-		name: d,
+	let l = o(), { id: u = l, name: d = u, children: f, value: p, defaultValue: m, onChange: h, disabled: g, readOnly: _, tabIndex: v = 0, ...y } = c, { value: b, setValue: x } = t({
 		initialValue: p,
 		defaultValue: m,
 		onChange: h
-	}), S = (e, n) => {
-		let r = n, i = e.target.parentNode.querySelectorAll("[role=\"radio\"]");
-		if (e.key === t.ARROW_RIGHT || e.key === t.ARROW_DOWN) r = (n + 1) % i.length, i[r]?.focus();
-		else if (e.key === t.ARROW_LEFT || e.key === t.ARROW_UP) r = (n - 1 + i.length) % i.length, i[r]?.focus();
-		else if (e.key === t.SPACE || e.key === t.ENTER) {
-			x(i[n].dataset.value);
+	}), S = (e, t) => {
+		let r = t, i = e.target.parentNode.querySelectorAll("[role=\"radio\"]");
+		if (e.key === n.ARROW_RIGHT || e.key === n.ARROW_DOWN) r = (t + 1) % i.length, i[r]?.focus();
+		else if (e.key === n.ARROW_LEFT || e.key === n.ARROW_UP) r = (t - 1 + i.length) % i.length, i[r]?.focus();
+		else if (e.key === n.SPACE || e.key === n.ENTER) {
+			x(i[t].dataset.value, e.nativeEvent);
 			return;
 		}
 	};
@@ -43,8 +42,8 @@ function c(c) {
 				"data-value": r,
 				"aria-checked": b === r,
 				onKeyDown: (e) => S(e, t),
-				onClick() {
-					!g && !_ && (x(r), e.props?.onClick?.(r));
+				onClick(t) {
+					!g && !_ && (x(r, t.nativeEvent), e.props?.onClick?.(r));
 				}
 			}) : i(e, {
 				...e.props,
@@ -55,8 +54,8 @@ function c(c) {
 				tabIndex: C(o, t),
 				checked: o,
 				value: r,
-				onChange() {
-					!g && !_ && x(r);
+				onChange(e) {
+					!g && !_ && x(r, e);
 				}
 			});
 		})

package/ui/forms/radios/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../../lib/ui/forms/radios/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  useId,\n  type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioProps } from './Radio';\nimport { useValue } from '../../hooks/useValue';\nimport clsx from 'clsx';\nimport type { ButtonProps } from '../../buttons/Button';\nimport { KEY } from '../../hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n  extends Pick<\n      FormControlProps<Value>,\n      'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    defaultValue: defaultValue as Value,\n    onChange,\n  });\n\n  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n    let newIndex = index;\n    const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n    if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n      newIndex = (index + 1) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n      newIndex = (index - 1 + options.length) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n      setValue(options[index].dataset.value as Value);\n      return;\n    }\n  };\n\n  function getTabIndex(checked: boolean, index: number) {\n    if (value === undefined || value === null || value === '') {\n      return tabIndex === index ? 0 : -1;\n    }\n\n    return checked ? 0 : -1;\n  }\n\n  return (\n    <div {...rest} className={clsx('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n        const itemValue = (child.props as ButtonProps | RadioProps).value;\n        const checked = value === itemValue;\n\n        if (type?.includes('Button')) {\n          return cloneElement(child, {\n            color: checked ? 'black' : 'white',\n            ...(child.props as any),\n            value: undefined,\n            role: 'radio',\n            name,\n            component: 'span',\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: getTabIndex(checked, index),\n            'data-value': itemValue,\n            'aria-checked': value === itemValue,\n            onKeyDown: (e: React.KeyboardEvent) => handleKeyDown(e, index),\n            onClick() {\n              if (!disabled && !readOnly) {\n                setValue(itemValue as Value);\n                (child.props as any)?.onClick?.(itemValue as Value);\n              }\n            },\n          } as ButtonProps);\n        }\n\n        return cloneElement(child, {\n          ...(child.props as any),\n          name,\n          id: `${id}-${index}`,\n          disabled,\n          readOnly,\n          tabIndex: getTabIndex(checked, index),\n          checked: checked,\n          value: itemValue,\n          onChange() {\n            if (!disabled && !readOnly) {\n              setValue(itemValue as Value);\n            }\n          },\n        } as RadioProps);\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAA2B,GAA+B;CACxE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,aACA,OAAO,GACP,iBACA,aACA,aACA,aACA,cAAW,GACX,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAC1C;EACA;EACc;EACd;EACD,CAAC,EAEI,KAAiB,GAAwB,MAAkB;EAC/D,IAAI,IAAW,GACT,IAAW,EAAE,OAAgB,WAAY,iBAAiB,mBAAiB;AAEjF,MAAI,EAAE,QAAQ,EAAI,eAAe,EAAE,QAAQ,EAAI,WAE7C,CADA,KAAY,IAAQ,KAAK,EAAQ,QACjC,EAAQ,IAAW,OAAO;WACjB,EAAE,QAAQ,EAAI,cAAc,EAAE,QAAQ,EAAI,SAEnD,CADA,KAAY,IAAQ,IAAI,EAAQ,UAAU,EAAQ,QAClD,EAAQ,IAAW,OAAO;WACjB,EAAE,QAAQ,EAAI,SAAS,EAAE,QAAQ,EAAI,OAAO;AACrD,KAAS,EAAQ,GAAO,QAAQ,MAAe;AAC/C;;;CAIJ,SAAS,EAAY,GAAkB,GAAe;AAKpD,SAJI,KAAiC,QAAQ,MAAU,KAC9C,MAAa,IAAQ,IAAI,KAG3B,IAAU,IAAI;;AAGvB,QACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAK,eAAe,EAAK,UAAU;EAAE,MAAK;YACjE,EAAS,IAAI,IAAW,GAAO,MAAU;AACxC,OAAI,CAAC,EAAe,EAAM,CACxB,QAAO;GAGT,IAAM,IAAQ,EAAM,KAA4D,aAC1E,IAAa,EAAM,MAAmC,OACtD,IAAU,MAAU;AA0B1B,UAxBI,GAAM,SAAS,SAAS,GACnB,EAAa,GAAO;IACzB,OAAO,IAAU,UAAU;IAC3B,GAAI,EAAM;IACV,OAAO,KAAA;IACP,MAAM;IACN;IACA,WAAW;IACX,IAAI,GAAG,EAAG,GAAG;IACb;IACA;IACA,UAAU,EAAY,GAAS,EAAM;IACrC,cAAc;IACd,gBAAgB,MAAU;IAC1B,YAAY,MAA2B,EAAc,GAAG,EAAM;IAC9D,UAAU;AACR,KAAI,CAAC,KAAY,CAAC,MAChB,EAAS,EAAmB,EAC3B,EAAM,OAAe,UAAU,EAAmB;;IAGxD,CAAgB,GAGZ,EAAa,GAAO;IACzB,GAAI,EAAM;IACV;IACA,IAAI,GAAG,EAAG,GAAG;IACb;IACA;IACA,UAAU,EAAY,GAAS,EAAM;IAC5B;IACT,OAAO;IACP,WAAW;AACT,KAAI,CAAC,KAAY,CAAC,KAChB,EAAS,EAAmB;;IAGjC,CAAe;IAChB;EACE,CAAA"}
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../../lib/ui/forms/radios/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  useId,\n  type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioProps } from './Radio';\nimport { useValue } from '../../hooks/useValue';\nimport clsx from 'clsx';\nimport type { ButtonProps } from '../../buttons/Button';\nimport { KEY } from '../../hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n  extends Pick<\n      FormControlProps<Value>,\n      'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    initialValue,\n    defaultValue: defaultValue as Value,\n    onChange,\n  });\n\n  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n    let newIndex = index;\n    const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n    if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n      newIndex = (index + 1) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n      newIndex = (index - 1 + options.length) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n      setValue(options[index].dataset.value as Value, e.nativeEvent);\n      return;\n    }\n  };\n\n  function getTabIndex(checked: boolean, index: number) {\n    if (value === undefined || value === null || value === '') {\n      return tabIndex === index ? 0 : -1;\n    }\n\n    return checked ? 0 : -1;\n  }\n\n  return (\n    <div {...rest} className={clsx('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n        const itemValue = (child.props as ButtonProps | RadioProps).value;\n        const checked = value === itemValue;\n\n        if (type?.includes('Button')) {\n          return cloneElement(child, {\n            color: checked ? 'black' : 'white',\n            ...(child.props as any),\n            value: undefined,\n            role: 'radio',\n            name,\n            component: 'span',\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: getTabIndex(checked, index),\n            'data-value': itemValue,\n            'aria-checked': value === itemValue,\n            onKeyDown: (e: React.KeyboardEvent) => handleKeyDown(e, index),\n            onClick(event: React.MouseEvent) {\n              if (!disabled && !readOnly) {\n                setValue(itemValue as Value, event.nativeEvent);\n                (child.props as any)?.onClick?.(itemValue as Value);\n              }\n            },\n          } as ButtonProps);\n        }\n\n        return cloneElement(child, {\n          ...(child.props as any),\n          name,\n          id: `${id}-${index}`,\n          disabled,\n          readOnly,\n          tabIndex: getTabIndex(checked, index),\n          checked: checked,\n          value: itemValue,\n          onChange(event: Event) {\n            if (!disabled && !readOnly) {\n              setValue(itemValue as Value, event);\n            }\n          },\n        } as RadioProps);\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAA2B,GAA+B;CACxE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,aACA,OAAO,GACP,iBACA,aACA,aACA,aACA,cAAW,GACX,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAC1C;EACc;EACd;EACD,CAAC,EAEI,KAAiB,GAAwB,MAAkB;EAC/D,IAAI,IAAW,GACT,IAAW,EAAE,OAAgB,WAAY,iBAAiB,mBAAiB;AAEjF,MAAI,EAAE,QAAQ,EAAI,eAAe,EAAE,QAAQ,EAAI,WAE7C,CADA,KAAY,IAAQ,KAAK,EAAQ,QACjC,EAAQ,IAAW,OAAO;WACjB,EAAE,QAAQ,EAAI,cAAc,EAAE,QAAQ,EAAI,SAEnD,CADA,KAAY,IAAQ,IAAI,EAAQ,UAAU,EAAQ,QAClD,EAAQ,IAAW,OAAO;WACjB,EAAE,QAAQ,EAAI,SAAS,EAAE,QAAQ,EAAI,OAAO;AACrD,KAAS,EAAQ,GAAO,QAAQ,OAAgB,EAAE,YAAY;AAC9D;;;CAIJ,SAAS,EAAY,GAAkB,GAAe;AAKpD,SAJI,KAAiC,QAAQ,MAAU,KAC9C,MAAa,IAAQ,IAAI,KAG3B,IAAU,IAAI;;AAGvB,QACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAK,eAAe,EAAK,UAAU;EAAE,MAAK;YACjE,EAAS,IAAI,IAAW,GAAO,MAAU;AACxC,OAAI,CAAC,EAAe,EAAM,CACxB,QAAO;GAGT,IAAM,IAAQ,EAAM,KAA4D,aAC1E,IAAa,EAAM,MAAmC,OACtD,IAAU,MAAU;AA0B1B,UAxBI,GAAM,SAAS,SAAS,GACnB,EAAa,GAAO;IACzB,OAAO,IAAU,UAAU;IAC3B,GAAI,EAAM;IACV,OAAO,KAAA;IACP,MAAM;IACN;IACA,WAAW;IACX,IAAI,GAAG,EAAG,GAAG;IACb;IACA;IACA,UAAU,EAAY,GAAS,EAAM;IACrC,cAAc;IACd,gBAAgB,MAAU;IAC1B,YAAY,MAA2B,EAAc,GAAG,EAAM;IAC9D,QAAQ,GAAyB;AAC/B,KAAI,CAAC,KAAY,CAAC,MAChB,EAAS,GAAoB,EAAM,YAAY,EAC9C,EAAM,OAAe,UAAU,EAAmB;;IAGxD,CAAgB,GAGZ,EAAa,GAAO;IACzB,GAAI,EAAM;IACV;IACA,IAAI,GAAG,EAAG,GAAG;IACb;IACA;IACA,UAAU,EAAY,GAAS,EAAM;IAC5B;IACT,OAAO;IACP,SAAS,GAAc;AACrB,KAAI,CAAC,KAAY,CAAC,KAChB,EAAS,GAAoB,EAAM;;IAGxC,CAAe;IAChB;EACE,CAAA"}

package/ui/frame/Frame.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { ImageProps } from '../Image';
+import { FrameWrapperProps } from './FrameWrapper';
+export interface FrameProps extends FrameWrapperProps {
+    image: ImageProps | null;
+    sizes?: ImageProps['sizes'];
+}
+export declare const Frame: FunctionComponent<FrameProps>;

package/ui/frame/Frame.js

@@ -0,0 +1,16 @@
+import { Image as e } from "../Image.js";
+import { FrameWrapper as t } from "./FrameWrapper.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/ui/frame/Frame.tsx
+var i = ({ children: i, image: a, sizes: o, ...s }) => /* @__PURE__ */ r(t, {
+	...s,
+	children: [a && /* @__PURE__ */ n(e, {
+		...a,
+		className: "h-full w-full object-cover",
+		sizes: o ?? a.sizes
+	}), i]
+});
+//#endregion
+export { i as Frame };
+
+//# sourceMappingURL=Frame.js.map

package/ui/frame/Frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.js","names":[],"sources":["../../../lib/ui/frame/Frame.tsx"],"sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Image, type ImageProps } from '../Image';\n\nimport { FrameWrapper, type FrameWrapperProps } from './FrameWrapper';\n\nexport interface FrameProps extends FrameWrapperProps {\n  image: ImageProps | null;\n  sizes?: ImageProps['sizes'];\n}\n\nexport const Frame: FunctionComponent<FrameProps> = ({ children, image, sizes, ...props }) => {\n  return (\n    <FrameWrapper {...props}>\n      {image && (\n        <Image {...image} className=\"h-full w-full object-cover\" sizes={sizes ?? image.sizes} />\n      )}\n      {children}\n    </FrameWrapper>\n  );\n};\n"],"mappings":";;;;AAWA,IAAa,KAAwC,EAAE,aAAU,UAAO,UAAO,GAAG,QAE9E,kBAAC,GAAD;CAAc,GAAI;WAAlB,CACG,KACC,kBAAC,GAAD;EAAO,GAAI;EAAO,WAAU;EAA6B,OAAO,KAAS,EAAM;EAAS,CAAA,EAEzF,EACY"}

package/ui/frame/FrameLabelsWrapper.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+export interface FrameLabelsWrapperProps extends ComponentPropsWithoutRef<'div'> {
+    hasImage: boolean;
+}
+export declare const FrameLabelsWrapper: FunctionComponent<FrameLabelsWrapperProps>;

package/ui/frame/FrameLabelsWrapper.js

@@ -0,0 +1,12 @@
+import { t as e } from "../../chunks/clsx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/ui/frame/FrameLabelsWrapper.tsx
+var n = ({ children: n, className: r, hasImage: i = !1, ...a }) => /* @__PURE__ */ t("div", {
+	...a,
+	className: e("rounded-16 pointer-events-none absolute inset-0 flex flex-col overflow-auto", { "bg-linear-to-b from-transparent via-transparent via-40% to-black/70": i }, r),
+	children: n
+});
+//#endregion
+export { n as FrameLabelsWrapper };
+
+//# sourceMappingURL=FrameLabelsWrapper.js.map

package/ui/frame/FrameLabelsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameLabelsWrapper.js","names":[],"sources":["../../../lib/ui/frame/FrameLabelsWrapper.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nexport interface FrameLabelsWrapperProps extends ComponentPropsWithoutRef<'div'> {\n  hasImage: boolean;\n}\n\nexport const FrameLabelsWrapper: FunctionComponent<FrameLabelsWrapperProps> = ({\n  children,\n  className,\n  hasImage = false,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'rounded-16 pointer-events-none absolute inset-0 flex flex-col overflow-auto',\n        {\n          'bg-linear-to-b from-transparent via-transparent via-40% to-black/70': hasImage,\n        },\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAOA,IAAa,KAAkE,EAC7E,aACA,cACA,cAAW,IACX,GAAG,QAGD,kBAAC,OAAD;CACE,GAAI;CACJ,WAAW,EACT,+EACA,EACE,uEAAuE,GACxE,EACD,EACD;CAEA;CACG,CAAA"}

package/ui/frame/FrameTitle.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, HTMLAttributes } from 'react';
+export interface FrameTitleProps extends HTMLAttributes<HTMLDivElement | HTMLAnchorElement> {
+    coverLink?: boolean;
+    hasImage?: boolean;
+    href?: string;
+}
+export declare const FrameTitle: FunctionComponent<FrameTitleProps>;