@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.40

package/ui/forms/PhoneFieldSplitInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  DEFAULT_PHONE_PREFIXES,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  type PhonePrefix,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (name: string, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  name: string;\n  pattern: string;\n  defaultPrefix: string;\n  onChange?: PhoneFieldChangeHandler;\n}) => {\n  const { externalValue, name, pattern, defaultPrefix, onChange } = args;\n  const numberInputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [prefix, setPrefix] = useState(defaultPrefix);\n  const [number, setNumber] = useState('');\n\n  const emitChange = useCallback(\n    (nextPrefix: string, nextNumber: string) => {\n      if (nextPrefix === prefix && nextNumber === number) {\n        return;\n      }\n\n      const full = `${nextPrefix} ${nextNumber}`.trim();\n\n      onChange?.(name, {\n        full,\n        prefix: nextPrefix,\n        number: nextNumber,\n        raw: extractDigits(full),\n      });\n    },\n    [name, number, onChange, prefix],\n  );\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && numberInputRef.current) {\n      numberInputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current,\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [number]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setPrefix(externalValue.prefix || defaultPrefix);\n      setNumber(externalValue.number || '');\n    }\n  }, [externalValue, defaultPrefix]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      const targetChar =\n        e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(number.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n\n      setNumber(formatted);\n\n      emitChange(prefix, formatted);\n    },\n    [emitChange, pattern, number, prefix],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setNumber(formattedValue.formatted);\n\n      emitChange(prefix, formattedValue.formatted);\n    },\n    [emitChange, pattern, prefix],\n  );\n\n  const onPrefixChange = useCallback(\n    (newPrefix: string) => {\n      setPrefix(newPrefix);\n\n      emitChange(newPrefix, number);\n    },\n    [emitChange, number],\n  );\n\n  return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  prefixes?: PhoneFieldSplitProps['prefixes'];\n  defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (name: string, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  prefixes = DEFAULT_PHONE_PREFIXES,\n  defaultPrefix = prefixes[0]?.code || '+1',\n  placeholder = '',\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...rest\n}: PhoneFieldSplitInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n    usePhoneField({\n      externalValue,\n      name: resolvedName,\n      pattern,\n      defaultPrefix,\n      onChange,\n    });\n\n  return (\n    <div className=\"flex gap-8\">\n      <div\n        className={clsx('relative rounded-pill z-0 w-[130px] flex-shrink-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          disabled={disabled}\n          value={prefix}\n          onChange={(e) => onPrefixChange(e.target.value)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-semibold outline-none appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n              'pe-[40px]': true,\n            },\n          )}\n          id={`${resolvedId}-prefix`}\n          aria-label={`${resolvedName}-prefix`}\n        >\n          {(prefixes as PhonePrefix[]).map((p) => (\n            <option key={p.code} value={p.code}>\n              {p.label ?? p.code}\n            </option>\n          ))}\n        </select>\n\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12 -z-1\">\n          <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n        </div>\n      </div>\n\n      <div className=\"relative flex-1\">\n        <input\n          {...(rest as Record<string, unknown>)}\n          ref={numberInputRef}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          value={number}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\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={`${resolvedName}-number`}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/Select.js

@@ -1,13 +1,13 @@
 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 { useId as i } from "react";
 import { Icon as a } from "@clubmed/trident-icons";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/ui/forms/Select.tsx
 var c = (c) => {
-	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", iconType: g, errorMessage: _, disabled: v = !1, required: y = !1, hideRequiredStar: b, className: x, dataTestId: S = u, onChange: C, children: w, ...T } = c, { value: E, setValue: D } = n({
+	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", iconType: g, errorMessage: _, disabled: v = !1, required: y = !1, hideRequiredStar: b, className: x, dataTestId: S = u, onChange: C, children: w, ...T } = c, { value: E, setValue: D } = r({
 		name: d,
 		initialValue: p,
 		onChange: C
@@ -15,7 +15,7 @@ var c = (c) => {
 		isDisabled: v,
 		validationStatus: h
 	});
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ o(n, {
 		id: u,
 		className: x,
 		label: f,

package/ui/forms/Switch.d.ts

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

package/ui/forms/Switch.js

@@ -1,42 +1,59 @@
 "use client";
 import { t as e } from "../../chunks/clsx.js";
 import { getBgColor as t } from "../helpers/colors/colors.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/ui/forms/Switch.tsx
-var i = ({ checked: i, className: a, color: o = "saffron", onClick: s, ...c }) => {
-	let l = (e) => {
-		c.disabled || s?.(e);
-	};
-	return /* @__PURE__ */ n("button", {
-		...c,
-		"aria-checked": i,
-		className: e(a, "rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors", { "bg-middleGrey": !i }, { [t(o)]: i }),
-		"data-name": "Switch",
-		onClick: l,
-		role: "switch",
-		type: "button",
-		children: /* @__PURE__ */ r("svg", {
-			className: "size-24",
-			viewBox: "0 0 24 24",
-			children: [
-				/* @__PURE__ */ n("circle", {
-					className: "fill-white",
-					cx: 12,
-					cy: 12,
-					r: 12
-				}),
-				/* @__PURE__ */ n("circle", {
-					className: "fill-middleGrey",
-					cx: 12,
-					cy: 12,
-					r: 4
-				}),
-				/* @__PURE__ */ n("path", { d: "M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37" })
-			]
-		})
+function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch", ...h }) {
+	let g = n(), _ = a ?? g, v = o ?? _, y = p != null, b = e("inline-flex items-center relative", {
+		"gap-4": y,
+		"cursor-pointer": !d,
+		"cursor-not-allowed": d
 	});
-};
+	return /* @__PURE__ */ i(y ? "label" : "span", {
+		htmlFor: _,
+		className: b,
+		children: [
+			/* @__PURE__ */ r("input", {
+				...h,
+				id: _,
+				name: v,
+				checked: s,
+				"data-name": "Switch",
+				disabled: d,
+				role: m,
+				tabIndex: f,
+				type: "checkbox",
+				className: "absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full",
+				onChange: u
+			}),
+			/* @__PURE__ */ r("span", {
+				className: e(c, "rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors", { "bg-middleGrey": !s }, { [t(l)]: s }),
+				children: /* @__PURE__ */ r("svg", {
+					className: "size-24",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ i("g", { children: [
+						/* @__PURE__ */ r("circle", {
+							cx: 12,
+							cy: 12,
+							r: 12,
+							fill: "var(--color-white)"
+						}),
+						/* @__PURE__ */ r("circle", {
+							cx: 12,
+							cy: 12,
+							r: 4,
+							fill: "var(--color-middleGrey)"
+						}),
+						/* @__PURE__ */ r("path", { d: "M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37" })
+					] })
+				})
+			}),
+			p
+		]
+	});
+}
 //#endregion
-export { i as Switch };
+export { a as Switch };
 
 //# sourceMappingURL=Switch.js.map

package/ui/forms/Switch.js.map

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

package/ui/forms/TextField.js

@@ -1,13 +1,13 @@
 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 { useId as i } from "react";
 import { Icon as a } from "@clubmed/trident-icons";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/ui/forms/TextField.tsx
 var c = (c) => {
-	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !0, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = n({
+	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !1, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = r({
 		name: d,
 		initialValue: p,
 		onChange: D,
@@ -16,7 +16,7 @@ var c = (c) => {
 		isDisabled: y,
 		validationStatus: h
 	}), N = !y && A !== "" && A != null && !!T;
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ o(n, {
 		id: u,
 		label: f,
 		className: S,

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>({ 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"}

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

@@ -1,14 +1,12 @@
-import { InputHTMLAttributes } from 'react';
-import { FormControlProps } from '../FormControl';
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * The data-testid to apply to the button.
-     * This is used for testing purposes.
-     * @deprecated use ["data-testid"] instead.
-     */
-    dataTestId?: string;
-    size?: number;
-    validationStatus?: FormControlProps['validationStatus'];
-    errorMessage?: FormControlProps['errorMessage'];
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { Colors } from '../../types/Colors';
+import { ValidationStatus } from '../../hooks/useInternalStatus';
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+    color?: Colors;
+    size?: string;
+    validationStatus?: ValidationStatus;
+    errorMessage?: string;
+    ['data-testid']?: string;
+    ref?: Ref<HTMLInputElement>;
 }
 export declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/checkboxes/Checkbox.js

@@ -1,63 +1,46 @@
 import { t as e } from "../../../chunks/clsx.js";
-import { useInternalStatus as t } from "../../hooks/useInternalStatus.js";
-import { useId as n } from "react";
-import { Icon as r } from "@clubmed/trident-icons";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { getBorderColor as t, getTextColor as n } from "../../helpers/colors/colors.js";
+import { FormControlError as r } from "../FormControlError.js";
+import { useInternalStatus as i } from "../../hooks/useInternalStatus.js";
+import { useId as a } from "react";
+import { Icon as o } from "@clubmed/trident-icons";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/ui/forms/checkboxes/Checkbox.tsx
-function o(o) {
-	let s = n(), { id: c = s, name: l = c, className: u, disabled: d = !1, size: f = 24, tabIndex: p = 0, validationStatus: m = "default", errorMessage: h, children: g, dataTestId: _, ...v } = o, y = t({
-		isDisabled: d,
-		validationStatus: m
-	}), b = y === "error" && h;
-	return /* @__PURE__ */ a("div", {
-		className: e("flex flex-col space-y-2", u),
-		"data-testid": `checkbox-container-${c}`,
-		children: [/* @__PURE__ */ a("label", {
-			className: e("cursor-pointer relative flex text-b3 items-center", {
-				"text-grey": y === "disabled",
-				"text-black": y !== "default"
-			}),
-			children: [/* @__PURE__ */ a("span", {
-				className: "relative self-start me-8",
-				children: [/* @__PURE__ */ i("input", {
-					"data-testid": _,
-					...v,
-					id: c,
-					name: l,
-					type: "checkbox",
-					tabIndex: p,
-					"data-name": "Checkbox",
-					disabled: d
-				}), /* @__PURE__ */ i("span", {
-					style: {
-						height: f,
-						width: f
-					},
-					className: e({
-						"!border-red": y === "error",
-						"bg-pearl": y === "disabled"
-					}),
-					"data-testid": `check-container-${c}`,
-					children: /* @__PURE__ */ i(r, {
-						name: "CheckDefault",
-						type: "svg",
-						width: `${f}px`,
-						color: "black",
-						className: "absolute"
-					})
-				})]
-			}), g]
-		}), b && /* @__PURE__ */ a("span", {
-			className: "text-red text-b4 flex items-start space-x-4 ps-20",
-			role: "alert",
-			children: [/* @__PURE__ */ i(r, {
-				name: "Error",
-				width: "20px"
-			}), h]
+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, "data-testid": S, ...C } = l, w = i({
+		isDisabled: g,
+		validationStatus: v
+	}), T = w === "disabled", E = w === "error" && y, D = e({
+		"!border-red !text-red": w === "error",
+		"bg-pearl": T
+	}), O = /* @__PURE__ */ c("span", {
+		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h, D, p),
+		"data-name": "Checkbox",
+		children: [/* @__PURE__ */ s("input", {
+			...C,
+			disabled: g,
+			id: d,
+			name: f,
+			className: "peer sr-only",
+			ref: x,
+			tabIndex: _,
+			type: "checkbox"
+		}), /* @__PURE__ */ s(o, {
+			className: "scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100",
+			name: "CheckDefault",
+			width: "100%"
 		})]
 	});
+	return !b && !y ? O : /* @__PURE__ */ c("div", {
+		className: e("flex flex-col space-y-2", p),
+		"data-testid": S || `checkbox-container-${d}`,
+		children: [/* @__PURE__ */ c("label", {
+			className: e("relative flex items-center gap-8", { "text-grey": g }),
+			children: [O, b]
+		}), E && /* @__PURE__ */ s(r, { children: y })]
+	});
 }
 //#endregion
-export { o 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 } from 'react';\nimport type { InputHTMLAttributes } from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport { useInternalStatus } from '@/ui/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {\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  size?: number;\n  validationStatus?: FormControlProps['validationStatus'];\n  errorMessage?: FormControlProps['errorMessage'];\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    disabled = false,\n    size = 24,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    dataTestId,\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={clsx('flex flex-col space-y-2', className)}\n      data-testid={`checkbox-container-${id}`}\n    >\n      <label\n        className={clsx('cursor-pointer relative flex text-b3 items-center', {\n          'text-grey': internalStatus === 'disabled',\n          'text-black': internalStatus !== 'default',\n        })}\n      >\n        <span className=\"relative self-start me-8\">\n          <input\n            data-testid={dataTestId}\n            {...rest}\n            id={id}\n            name={name}\n            type=\"checkbox\"\n            tabIndex={tabIndex}\n            data-name=\"Checkbox\"\n            disabled={disabled}\n          />\n\n          <span\n            style={{ height: size, width: size }}\n            className={clsx({\n              '!border-red': internalStatus === 'error',\n              'bg-pearl': internalStatus === 'disabled',\n            })}\n            data-testid={`check-container-${id}`}\n          >\n            <Icon\n              name=\"CheckDefault\"\n              type=\"svg\"\n              width={`${size}px`}\n              color=\"black\"\n              className=\"absolute\"\n            />\n          </span>\n        </span>\n\n        {children}\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,cAAW,IACX,UAAO,IACP,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,eACA,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IAA4B,MAAmB,WAAW;AAEhE,QACE,kBAAC,OAAD;EACE,WAAW,EAAK,2BAA2B,EAAU;EACrD,eAAa,sBAAsB;YAFrC,CAIE,kBAAC,SAAD;GACE,WAAW,EAAK,qDAAqD;IACnE,aAAa,MAAmB;IAChC,cAAc,MAAmB;IAClC,CAAC;aAJJ,CAME,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,SAAD;KACE,eAAa;KACb,GAAI;KACA;KACE;KACN,MAAK;KACK;KACV,aAAU;KACA;KACV,CAAA,EAEF,kBAAC,QAAD;KACE,OAAO;MAAE,QAAQ;MAAM,OAAO;MAAM;KACpC,WAAW,EAAK;MACd,eAAe,MAAmB;MAClC,YAAY,MAAmB;MAChC,CAAC;KACF,eAAa,mBAAmB;eAEhC,kBAAC,GAAD;MACE,MAAK;MACL,MAAK;MACL,OAAO,GAAG,EAAK;MACf,OAAM;MACN,WAAU;MACV,CAAA;KACG,CAAA,CACF;OAEN,EACK;MAEP,KACC,kBAAC,QAAD;GAAM,WAAU;GAAoD,MAAK;aAAzE,CACE,kBAAC,GAAD;IAAM,MAAK;IAAQ,OAAM;IAAS,CAAA,EACjC,EACI;KAEL"}
+{"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 extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  color?: Colors;\n  size?: string;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  ['data-testid']?: string;\n  ref?: Ref<HTMLInputElement>;\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    'data-testid': dataTestId,\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n  const isDisabled = internalStatus === 'disabled';\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  // Apply validation styling to checkbox via className\n  const checkboxClassName = clsx({\n    '!border-red !text-red': internalStatus === 'error',\n    'bg-pearl': isDisabled,\n  });\n\n  const checkbox = (\n    <span\n      className={clsx(\n        'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60',\n        getBorderColor(color),\n        getTextColor(color),\n        size,\n        checkboxClassName,\n        className,\n      )}\n      data-name=\"Checkbox\"\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        ref={ref}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n      />\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":";;;;;;;;AAiBA,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,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,yBAAyB,MAAmB;EAC5C,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,4JACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,GACA,EACD;EACD,aAAU;YATZ,CAWE,kBAAC,SAAD;GACE,GAAI;GACM;GACN;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,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.js

@@ -29,8 +29,8 @@ function s(s) {
 					tabIndex: _ + n + 1,
 					className: e(t.props.className || "mt-8 first:mt-0"),
 					checked: y.includes(i),
-					onChange(e, t) {
-						b(t === null ? y.filter((e) => e !== i) : y.concat(i));
+					onChange(e) {
+						e.target.checked ? b(y.concat(i)) : b(y.filter((e) => e !== i));
 					}
 				});
 			}

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 = (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(_: string, item: Value | null) {\n              if (item === null) {\n                setValue(value.filter((v) => v !== propValue));\n              } else {\n                setValue(value.concat(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,IAAa,EAAM,MAAwB;AAEjD,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,GAAW,GAAoB;AACtC,MACE,EADE,MAAS,OACF,EAAM,QAAQ,MAAM,MAAM,EAAU,GAEpC,EAAM,OAAO,EAAU,CAAC;;KAGtC,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\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"}

package/ui/forms/password/Password.js

@@ -1,7 +1,7 @@
 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";
@@ -11,7 +11,7 @@ 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({
+	}), { value: k, setValue: A } = r({
 		name: m,
 		initialValue: g,
 		onChange: T
@@ -20,7 +20,7 @@ function d(d) {
 		M(_ ? "password" : j);
 	}, [j, _]);
 	let N = () => M(j === "password" ? "text" : "password");
-	return /* @__PURE__ */ u(r, {
+	return /* @__PURE__ */ u(n, {
 		className: w,
 		id: p,
 		label: h,

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"}