@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/ui/forms/password/Password.js

@@ -1,18 +1,17 @@
 import { t as e } from "../../../chunks/clsx.js";
 import { useInternalStatus as t } from "../../hooks/useInternalStatus.js";
-import { useValue as n } from "../../hooks/useValue.js";
-import { FormControl as r } from "../FormControl.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 = t({
 		isDisabled: _,
 		validationStatus: b
-	}), { value: k, setValue: A } = n({
-		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

@@ -6,7 +6,6 @@ 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 } = t({
-		name: d,
 		initialValue: p,
 		defaultValue: m,
 		onChange: h
@@ -15,7 +14,7 @@ function c(c) {
 		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);
+			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>;

package/ui/frame/FrameTitle.js

@@ -0,0 +1,25 @@
+import { t as e } from "../../chunks/clsx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/ui/frame/FrameTitle.tsx
+var n = ({ children: n, className: r, coverLink: i = !1, hasImage: a = !1, href: o, onClick: s, ...c }) => {
+	let l = !!o, u = l ? "a" : "div", d = l ? {
+		href: o,
+		onClick: s
+	} : null;
+	return /* @__PURE__ */ t(u, {
+		className: e("pointer-events-auto flex w-full gap-x-8 px-12 pb-12 sm:px-24 sm:pb-24", {
+			"justify-center text-center": !n,
+			"h-full items-end": i,
+			"mt-auto h-auto": !i,
+			"text-white": a,
+			"text-black": !a
+		}, r),
+		...d,
+		...c,
+		children: n
+	});
+};
+//#endregion
+export { n as FrameTitle };
+
+//# sourceMappingURL=FrameTitle.js.map

package/ui/frame/FrameTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameTitle.js","names":[],"sources":["../../../lib/ui/frame/FrameTitle.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { FunctionComponent, HTMLAttributes } from 'react';\n\nexport interface FrameTitleProps extends HTMLAttributes<HTMLDivElement | HTMLAnchorElement> {\n  coverLink?: boolean;\n  hasImage?: boolean;\n  href?: string;\n}\n\nexport const FrameTitle: FunctionComponent<FrameTitleProps> = ({\n  children,\n  className,\n  coverLink = false,\n  hasImage = false,\n  href,\n  onClick,\n  ...attrs\n}) => {\n  const hasLink = !!href;\n\n  const TagName = hasLink ? 'a' : 'div';\n  const tagProps = hasLink ? { href, onClick } : null;\n\n  return (\n    <TagName\n      className={clsx(\n        'pointer-events-auto flex w-full gap-x-8 px-12 pb-12 sm:px-24 sm:pb-24',\n        {\n          'justify-center text-center': !children,\n          'h-full items-end': coverLink,\n          'mt-auto h-auto': !coverLink,\n          'text-white': hasImage,\n          'text-black': !hasImage,\n        },\n        className,\n      )}\n      {...tagProps}\n      {...attrs}\n    >\n      {children}\n    </TagName>\n  );\n};\n"],"mappings":";;;AASA,IAAa,KAAkD,EAC7D,aACA,cACA,eAAY,IACZ,cAAW,IACX,SACA,YACA,GAAG,QACC;CACJ,IAAM,IAAU,CAAC,CAAC,GAEZ,IAAU,IAAU,MAAM,OAC1B,IAAW,IAAU;EAAE;EAAM;EAAS,GAAG;AAE/C,QACE,kBAAC,GAAD;EACE,WAAW,EACT,yEACA;GACE,8BAA8B,CAAC;GAC/B,oBAAoB;GACpB,kBAAkB,CAAC;GACnB,cAAc;GACd,cAAc,CAAC;GAChB,EACD,EACD;EACD,GAAI;EACJ,GAAI;EAEH;EACO,CAAA"}

package/ui/frame/FrameWrapper.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+export interface FrameWrapperProps extends ComponentPropsWithoutRef<'article'> {
+    as?: 'article' | 'div' | 'span';
+    format?: 'horizontal' | 'vertical' | 'square' | 'custom';
+}
+export declare const FrameWrapper: FunctionComponent<FrameWrapperProps>;

package/ui/frame/FrameWrapper.js

@@ -0,0 +1,14 @@
+import { t as e } from "../../chunks/clsx.js";
+import { CARD_ASPECT_RATIOS as t } from "../cards/CardAspectRatios.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/ui/frame/FrameWrapper.tsx
+var r = ({ as: r = "article", children: i, className: a, format: o = "horizontal", ...s }) => /* @__PURE__ */ n(r, {
+	className: e(t[o], "group rounded-16 relative isolate overflow-hidden", a),
+	"data-name": "Frame",
+	...s,
+	children: i
+});
+//#endregion
+export { r as FrameWrapper };
+
+//# sourceMappingURL=FrameWrapper.js.map

package/ui/frame/FrameWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameWrapper.js","names":[],"sources":["../../../lib/ui/frame/FrameWrapper.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { CARD_ASPECT_RATIOS } from '../cards/CardAspectRatios';\n\nexport interface FrameWrapperProps extends ComponentPropsWithoutRef<'article'> {\n  as?: 'article' | 'div' | 'span';\n  format?: 'horizontal' | 'vertical' | 'square' | 'custom';\n}\n\nexport const FrameWrapper: FunctionComponent<FrameWrapperProps> = ({\n  as: TagName = 'article',\n  children,\n  className,\n  format = 'horizontal',\n  ...attrs\n}) => {\n  return (\n    <TagName\n      className={clsx(\n        CARD_ASPECT_RATIOS[format],\n        'group rounded-16 relative isolate overflow-hidden',\n        className,\n      )}\n      data-name=\"Frame\"\n      {...attrs}\n    >\n      {children}\n    </TagName>\n  );\n};\n"],"mappings":";;;;AAUA,IAAa,KAAsD,EACjE,IAAI,IAAU,WACd,aACA,cACA,YAAS,cACT,GAAG,QAGD,kBAAC,GAAD;CACE,WAAW,EACT,EAAmB,IACnB,qDACA,EACD;CACD,aAAU;CACV,GAAI;CAEH;CACO,CAAA"}

package/ui/frame/SliderFrame.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { ImageProps } from '../Image';
+import { FrameWrapperProps } from './FrameWrapper';
+interface SliderLabels {
+    next: string;
+    previous: string;
+}
+export interface SliderFrameProps extends FrameWrapperProps {
+    describedby?: string;
+    items: ImageProps[];
+    labels: SliderLabels;
+}
+export declare const SliderFrame: FunctionComponent<SliderFrameProps>;
+export {};

package/ui/frame/SliderFrame.js

@@ -0,0 +1,50 @@
+"use client";
+import { Image as e } from "../Image.js";
+import { FrameWrapper as t } from "./FrameWrapper.js";
+import { Carousel as n } from "../carousel/Carousel.js";
+import { CarouselBody as r } from "../carousel/CarouselBody.js";
+import { CarouselItem as i } from "../carousel/CarouselItem.js";
+import { CarouselNext as a } from "../carousel/CarouselNext.js";
+import { CarouselPrevious as o } from "../carousel/CarouselPrevious.js";
+import { useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region lib/ui/frame/SliderFrame.tsx
+var u = ({ children: u, describedby: d, items: f, labels: p, ...m }) => {
+	let h = f.length > 1, g = s(() => f.map((t) => /* @__PURE__ */ c(e, {
+		...t,
+		className: "pointer-events-none size-full object-cover"
+	}, t.src)), [f]);
+	return /* @__PURE__ */ l(t, {
+		...m,
+		children: [h ? /* @__PURE__ */ l(n, {
+			className: "rounded-16 h-full select-none",
+			children: [/* @__PURE__ */ c(r, {
+				className: "h-full",
+				scrollClassName: "h-full auto-cols-full",
+				children: g.map((e, t) => /* @__PURE__ */ c(i, {
+					index: t,
+					children: /* @__PURE__ */ c("div", {
+						className: "h-full overflow-hidden",
+						children: e
+					})
+				}, t))
+			}), /* @__PURE__ */ l("div", {
+				className: "pointer-events-none absolute inset-0 z-1 -mx-70 flex items-center justify-between gap-x-20 px-12 opacity-0 transition-all group-hover:mx-0 group-hover:opacity-100",
+				children: [/* @__PURE__ */ c(o, {
+					"aria-describedby": d,
+					label: p.previous
+				}), /* @__PURE__ */ c(a, {
+					"aria-describedby": d,
+					label: p.next
+				})]
+			})]
+		}) : /* @__PURE__ */ c(e, {
+			...f[0],
+			className: "size-full object-cover"
+		}), u]
+	});
+};
+//#endregion
+export { u as SliderFrame };
+
+//# sourceMappingURL=SliderFrame.js.map

package/ui/frame/SliderFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderFrame.js","names":[],"sources":["../../../lib/ui/frame/SliderFrame.tsx"],"sourcesContent":["'use client';\nimport { type FunctionComponent, useMemo } from 'react';\n\nimport { Image, type ImageProps } from '../Image';\nimport { Carousel } from '../carousel/Carousel';\nimport { CarouselBody } from '../carousel/CarouselBody';\nimport { CarouselItem } from '../carousel/CarouselItem';\nimport { CarouselNext } from '../carousel/CarouselNext';\nimport { CarouselPrevious } from '../carousel/CarouselPrevious';\n\nimport { FrameWrapper, type FrameWrapperProps } from './FrameWrapper';\n\ninterface SliderLabels {\n  next: string;\n  previous: string;\n}\n\nexport interface SliderFrameProps extends FrameWrapperProps {\n  describedby?: string;\n  items: ImageProps[];\n  labels: SliderLabels;\n}\n\nexport const SliderFrame: FunctionComponent<SliderFrameProps> = ({\n  children,\n  describedby,\n  items,\n  labels,\n  ...props\n}) => {\n  const hasScroll = items.length > 1;\n\n  const sliderItems = useMemo(\n    () =>\n      items.map((item) => (\n        <Image key={item.src} {...item} className=\"pointer-events-none size-full object-cover\" />\n      )),\n    [items],\n  );\n\n  return (\n    <FrameWrapper {...props}>\n      {hasScroll ? (\n        <Carousel className=\"rounded-16 h-full select-none\">\n          <CarouselBody className=\"h-full\" scrollClassName=\"h-full auto-cols-full\">\n            {sliderItems.map((item, i) => (\n              <CarouselItem index={i} key={i}>\n                <div className=\"h-full overflow-hidden\">{item}</div>\n              </CarouselItem>\n            ))}\n          </CarouselBody>\n          <div className=\"pointer-events-none absolute inset-0 z-1 -mx-70 flex items-center justify-between gap-x-20 px-12 opacity-0 transition-all group-hover:mx-0 group-hover:opacity-100\">\n            <CarouselPrevious aria-describedby={describedby} label={labels.previous} />\n            <CarouselNext aria-describedby={describedby} label={labels.next} />\n          </div>\n        </Carousel>\n      ) : (\n        <Image {...items[0]} className=\"size-full object-cover\" />\n      )}\n      {children}\n    </FrameWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAuBA,IAAa,KAAoD,EAC/D,aACA,gBACA,UACA,WACA,GAAG,QACC;CACJ,IAAM,IAAY,EAAM,SAAS,GAE3B,IAAc,QAEhB,EAAM,KAAK,MACT,kBAAC,GAAD;EAAsB,GAAI;EAAM,WAAU;EAA+C,EAA7E,EAAK,IAAwE,CACzF,EACJ,CAAC,EAAM,CACR;AAED,QACE,kBAAC,GAAD;EAAc,GAAI;YAAlB,CACG,IACC,kBAAC,GAAD;GAAU,WAAU;aAApB,CACE,kBAAC,GAAD;IAAc,WAAU;IAAS,iBAAgB;cAC9C,EAAY,KAAK,GAAM,MACtB,kBAAC,GAAD;KAAc,OAAO;eACnB,kBAAC,OAAD;MAAK,WAAU;gBAA0B;MAAW,CAAA;KACvC,EAFc,EAEd,CAAA;IAEJ,CAAA,EACf,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAkB,oBAAkB;KAAa,OAAO,EAAO;KAAY,CAAA,EAC3E,kBAAC,GAAD;KAAc,oBAAkB;KAAa,OAAO,EAAO;KAAQ,CAAA,CAAA;;OAIvE,kBAAC,GAAD;GAAO,GAAI,EAAM;GAAI,WAAU;GAA2B,CAAA,EAE3D,EAAA"}

package/ui/helpers/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/ui/helpers/cn.js

@@ -0,0 +1,10 @@
+import { t as e } from "../../chunks/clsx.js";
+import { twMerge as t } from "./twMerge.js";
+//#region lib/ui/helpers/cn.ts
+function n(...n) {
+	return t(e(n));
+}
+//#endregion
+export { n as cn };
+
+//# sourceMappingURL=cn.js.map

package/ui/helpers/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../../lib/ui/helpers/cn.ts"],"sourcesContent":["import clsx, { type ClassValue } from 'clsx';\n\nimport { twMerge } from './twMerge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAIA,SAAgB,EAAG,GAAG,GAAsB;AAC1C,QAAO,EAAQ,EAAK,EAAO,CAAC"}

package/ui/helpers/phone/defaultPrefixes.d.ts

@@ -4,6 +4,7 @@
 export interface PhonePrefix {
     code: string;
     label?: string;
+    fullLabel?: string;
     country?: string;
 }
 /**