@clubmed/trident-ui 2.0.0-beta.2 → 2.0.0-beta.21

package/ui/forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '../hooks/useValue';\nimport type { FormControlProps } from './FormControl';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) setValue(!checked);\n          }}\n          checked={checked}\n          data-name=\"Filter\"\n          disabled={disabled}\n          value={value as any}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,EAAuB,GAA2B;CAChE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,SAAS,IAAiB,IAC1B,UACA,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,gBACA,aACA,GAAG,MACD,GAEE,EAAE,OAAO,GAAS,gBAAa,EAAkB;EACrD;EACA,cAAc;EACd,SAAS,GAAM,GAAS;AACtB,OAAW,GAAM,IAAY,MAAU,KAAA,IAAoB,IAAR,IAA6B,KAAK;;EAExF,CAAC,EAOI,IALiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,KAEmD,WAAW;AAEhE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YAA3C,CACE,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACE;IACN,eAAa;IACb,MAAK;IACK;IACV,gBAAgB;AACd,KAAK,KAAU,EAAS,CAAC,EAAQ;;IAE1B;IACT,aAAU;IACA;IACH;IACP,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;MAEP,KACC,kBAAC,QAAD;GAAM,WAAU;GAAoD,MAAK;aAAzE,CACE,kBAAC,GAAD;IAAM,MAAK;IAAQ,OAAM;IAAS,CAAA,EACjC,EACI;KAEL"}
+{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n}\n\nexport function Filter(props: FilterProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    'data-testid': dataTestIdProp,\n    tabIndex = 0,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          data-testid={dataTestIdProp ?? dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          data-name=\"Filter\"\n          disabled={disabled}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAgBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACA;IACV,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}

package/ui/forms/FormControl.js

@@ -1,11 +1,11 @@
 import { t as e } from "../../chunks/clsx.js";
-import { useInternalStatus as t } from "../hooks/useInternalStatus.js";
-import { FormLabel as n } from "./FormLabel.js";
-import { FormControlError as r } from "./FormControlError.js";
+import { FormControlError as t } from "./FormControlError.js";
+import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
+import { FormLabel as r } from "./FormLabel.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/ui/forms/FormControl.tsx
 var o = ({ id: o, label: s, description: c, disabled: l, required: u, className: d, validationStatus: f = "default", children: p, errorMessage: m, dataTestId: h, "data-testid": g, dataName: _, labelClassName: v, hideRequiredStar: y, layout: b, inline: x }) => {
-	let S = t({
+	let S = n({
 		isDisabled: !!l,
 		validationStatus: f
 	}) === "error" && m;
@@ -14,7 +14,7 @@ var o = ({ id: o, label: s, description: c, disabled: l, required: u, className:
 		"data-name": _,
 		"data-testid": g ?? h,
 		children: [
-			s && o && /* @__PURE__ */ i(n, {
+			s && o && /* @__PURE__ */ i(r, {
 				description: c,
 				id: o,
 				layout: b,
@@ -24,7 +24,7 @@ var o = ({ id: o, label: s, description: c, disabled: l, required: u, className:
 				children: s
 			}),
 			p,
-			S && /* @__PURE__ */ i(r, { children: m })
+			S && /* @__PURE__ */ i(t, { children: m })
 		]
 	});
 };

package/ui/forms/NumberField.d.ts

@@ -34,14 +34,11 @@ export declare function useNumberField(props: NumberFieldProps): {
     errorMessage?: string;
     color?: string | undefined | undefined;
     size?: number | undefined | undefined;
-    description?: string | undefined;
-    layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
-    required?: boolean | undefined | undefined;
-    hideRequiredStar?: boolean | undefined;
-    className?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    prefix?: string | undefined | undefined;
     children?: import('react').ReactNode;
-    form?: string | undefined | undefined;
-    htmlFor?: string | undefined | undefined;
+    className?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -62,14 +59,11 @@ export declare function useNumberField(props: NumberFieldProps): {
     style?: import('react').CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
     resource?: string | undefined | undefined;
@@ -317,6 +311,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     onTransitionRunCapture?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
     onTransitionStart?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
     onTransitionStartCapture?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
+    form?: string | undefined | undefined;
     list?: string | undefined | undefined;
     pattern?: string | undefined | undefined;
     width?: number | string | undefined | undefined;
@@ -336,9 +331,14 @@ export declare function useNumberField(props: NumberFieldProps): {
     multiple?: boolean | undefined | undefined;
     placeholder?: string | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
+    required?: boolean | undefined | undefined;
     src?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
     type?: import('react').HTMLInputTypeAttribute | undefined;
+    description?: string | undefined;
+    layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
+    hideRequiredStar?: boolean | undefined;
+    htmlFor?: string | undefined | undefined;
 };
 export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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": w === "error",
+		"bg-pearl": T
+	}), O = /* @__PURE__ */ c("span", {
+		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border", 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': 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',\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,eAAe,MAAmB;EAClC,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,gFACA,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/helpers/colors/colors.d.ts

@@ -8,6 +8,7 @@ export declare enum Colors {
     lightSand = "lightSand",
     marygold = "marygold",
     orange = "orange",
+    pearl = "pearl",
     red = "red",
     saffron = "saffron",
     sand = "sand",
@@ -47,6 +48,7 @@ declare const BG_COLORS: {
     readonly lightSand: "bg-lightSand";
     readonly marygold: "bg-marygold";
     readonly orange: "bg-orange";
+    readonly pearl: "bg-pearl";
     readonly red: "bg-red";
     readonly saffron: "bg-saffron";
     readonly sand: "bg-sand";
@@ -65,6 +67,7 @@ declare const TEXT_COLORS: {
     readonly lightSand: "text-lightSand";
     readonly marygold: "text-marygold";
     readonly orange: "text-orange";
+    readonly pearl: "text-pearl";
     readonly red: "text-red";
     readonly saffron: "text-saffron";
     readonly sand: "text-sand";
@@ -85,6 +88,7 @@ declare const TO_COLORS: {
     readonly lightSand: "to-lightSand";
     readonly marygold: "to-marygold";
     readonly orange: "to-orange";
+    readonly pearl: "to-pearl";
     readonly red: "to-red";
     readonly saffron: "to-saffron";
     readonly sand: "to-sand";

package/ui/helpers/colors/colors.js

@@ -1,6 +1,6 @@
 //#region lib/ui/helpers/colors/colors.ts
 var e = /* @__PURE__ */ function(e) {
-	return e.black = "black", e.darkGrey = "darkGrey", e.green = "green", e.lavender = "lavender", e.lightGrey = "lightGrey", e.lightSand = "lightSand", e.marygold = "marygold", e.orange = "orange", e.red = "red", e.saffron = "saffron", e.sand = "sand", e.sienna = "sienna", e.ultramarine = "ultramarine", e.verdigris = "verdigris", e.wave = "wave", e.white = "white", e.current = "current", e;
+	return e.black = "black", e.darkGrey = "darkGrey", e.green = "green", e.lavender = "lavender", e.lightGrey = "lightGrey", e.lightSand = "lightSand", e.marygold = "marygold", e.orange = "orange", e.pearl = "pearl", e.red = "red", e.saffron = "saffron", e.sand = "sand", e.sienna = "sienna", e.ultramarine = "ultramarine", e.verdigris = "verdigris", e.wave = "wave", e.white = "white", e.current = "current", e;
 }({}), t = {
 	[e.black]: "border-black",
 	[e.darkGrey]: "border-darkGrey",
@@ -28,6 +28,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.lightSand]: "bg-lightSand",
 	[e.marygold]: "bg-marygold",
 	[e.orange]: "bg-orange",
+	[e.pearl]: "bg-pearl",
 	[e.red]: "bg-red",
 	[e.saffron]: "bg-saffron",
 	[e.sand]: "bg-sand",
@@ -44,6 +45,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.lightSand]: "text-lightSand",
 	[e.marygold]: "text-marygold",
 	[e.orange]: "text-orange",
+	[e.pearl]: "text-pearl",
 	[e.red]: "text-red",
 	[e.saffron]: "text-saffron",
 	[e.sand]: "text-sand",
@@ -62,6 +64,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.lightSand]: "to-lightSand",
 	[e.marygold]: "to-marygold",
 	[e.orange]: "to-orange",
+	[e.pearl]: "to-pearl",
 	[e.red]: "to-red",
 	[e.saffron]: "to-saffron",
 	[e.sand]: "to-sand",
@@ -80,6 +83,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.sand]: e.black,
 	[e.verdigris]: e.black,
 	[e.white]: e.black,
+	[e.pearl]: e.black,
 	[e.black]: e.white,
 	[e.green]: e.white,
 	[e.lavender]: e.white,
@@ -111,6 +115,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.green]: "text-white",
 	[e.lavender]: "text-white",
 	[e.orange]: "text-white",
+	[e.pearl]: "text-white",
 	[e.red]: "text-white",
 	[e.sienna]: "text-white",
 	[e.ultramarine]: "text-white",

package/ui/helpers/colors/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":[],"sources":["../../../../lib/ui/helpers/colors/colors.ts"],"sourcesContent":["import type { Theme } from '../../types/Theme';\n\nexport enum Colors {\n  black = 'black',\n  darkGrey = 'darkGrey',\n  green = 'green',\n  lavender = 'lavender',\n  lightGrey = 'lightGrey',\n  lightSand = 'lightSand',\n  marygold = 'marygold',\n  orange = 'orange',\n  red = 'red',\n  saffron = 'saffron',\n  sand = 'sand',\n  sienna = 'sienna',\n  ultramarine = 'ultramarine',\n  verdigris = 'verdigris',\n  wave = 'wave',\n  white = 'white',\n  current = 'current',\n}\n\nconst BORDER_COLORS = {\n  [Colors.black]: 'border-black',\n  [Colors.darkGrey]: 'border-darkGrey',\n  [Colors.green]: 'border-green',\n  [Colors.lavender]: 'border-lavender',\n  [Colors.lightGrey]: 'border-lightGrey',\n  [Colors.lightSand]: 'border-lightSand',\n  [Colors.marygold]: 'border-marygold',\n  [Colors.orange]: 'border-orange',\n  [Colors.red]: 'border-red',\n  [Colors.saffron]: 'border-saffron',\n  [Colors.sand]: 'border-sand',\n  [Colors.sienna]: 'border-sienna',\n  [Colors.ultramarine]: 'border-ultramarine',\n  [Colors.verdigris]: 'border-verdigris',\n  [Colors.wave]: 'border-wave',\n  [Colors.white]: 'border-white',\n  [Colors.current]: 'border-current',\n} as const satisfies Record<string, `border-${string}`>;\n\nexport type BorderColor = keyof typeof BORDER_COLORS;\n\nconst BG_COLORS = {\n  [Colors.black]: 'bg-black',\n  [Colors.darkGrey]: 'bg-darkGrey',\n  [Colors.green]: 'bg-green',\n  [Colors.lavender]: 'bg-lavender',\n  [Colors.lightGrey]: 'bg-lightGrey',\n  [Colors.lightSand]: 'bg-lightSand',\n  [Colors.marygold]: 'bg-marygold',\n  [Colors.orange]: 'bg-orange',\n  [Colors.red]: 'bg-red',\n  [Colors.saffron]: 'bg-saffron',\n  [Colors.sand]: 'bg-sand',\n  [Colors.sienna]: 'bg-sienna',\n  [Colors.ultramarine]: 'bg-ultramarine',\n  [Colors.verdigris]: 'bg-verdigris',\n  [Colors.wave]: 'bg-wave',\n  [Colors.white]: 'bg-white',\n  [Colors.current]: 'bg-current',\n} as const satisfies Record<Colors, `bg-${string}`>;\n\nexport type BgColor = keyof typeof BG_COLORS;\n\nconst TEXT_COLORS = {\n  [Colors.black]: 'text-black',\n  [Colors.green]: 'text-green',\n  [Colors.lavender]: 'text-lavender',\n  [Colors.lightSand]: 'text-lightSand',\n  [Colors.marygold]: 'text-marygold',\n  [Colors.orange]: 'text-orange',\n  [Colors.red]: 'text-red',\n  [Colors.saffron]: 'text-saffron',\n  [Colors.sand]: 'text-sand',\n  [Colors.sienna]: 'text-sienna',\n  [Colors.ultramarine]: 'text-ultramarine',\n  [Colors.verdigris]: 'text-verdigris',\n  [Colors.wave]: 'text-wave',\n  [Colors.white]: 'text-white',\n  [Colors.darkGrey]: 'text-darkGrey',\n  [Colors.lightGrey]: 'text-lightGrey',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<Colors, `text-${string}`>;\n\nexport type TextColor = keyof typeof TEXT_COLORS;\n\nconst TO_COLORS = {\n  [Colors.black]: `to-black`,\n  [Colors.green]: `to-green`,\n  [Colors.lavender]: `to-lavender`,\n  [Colors.lightSand]: `to-lightSand`,\n  [Colors.marygold]: `to-marygold`,\n  [Colors.orange]: `to-orange`,\n  [Colors.red]: `to-red`,\n  [Colors.saffron]: `to-saffron`,\n  [Colors.sand]: `to-sand`,\n  [Colors.sienna]: `to-sienna`,\n  [Colors.ultramarine]: `to-ultramarine`,\n  [Colors.verdigris]: `to-verdigris`,\n  [Colors.wave]: `to-wave`,\n  [Colors.white]: `to-white`,\n  [Colors.darkGrey]: `to-darkGrey`,\n  [Colors.lightGrey]: `to-lightGrey`,\n  [Colors.current]: `to-current`,\n} as const satisfies Record<keyof typeof Colors, `to-${string}`>;\n\nexport type ToColor = keyof typeof TO_COLORS;\n\nconst COMPLEMENTARY_COLORS = {\n  [Colors.lightSand]: Colors.black,\n  [Colors.marygold]: Colors.black,\n  [Colors.saffron]: Colors.black,\n  [Colors.sand]: Colors.black,\n  [Colors.verdigris]: Colors.black,\n  [Colors.white]: Colors.black,\n  [Colors.black]: Colors.white,\n  [Colors.green]: Colors.white,\n  [Colors.lavender]: Colors.white,\n  [Colors.orange]: Colors.white,\n  [Colors.red]: Colors.white,\n  [Colors.sienna]: Colors.white,\n  [Colors.ultramarine]: Colors.white,\n  [Colors.wave]: Colors.white,\n  [Colors.darkGrey]: Colors.white,\n  [Colors.lightGrey]: Colors.black,\n  [Colors.current]: Colors.white,\n} as const satisfies Record<keyof typeof Colors, Colors.white | Colors.black>;\n\nconst THEME_TO_COLOR: Record<string, Colors> = {\n  dark: Colors.ultramarine,\n  exclusiveCollection: Colors.ultramarine,\n  coreRange: Colors.lightSand,\n  light: Colors.lightSand,\n  happyToCare: Colors.verdigris,\n  joyview: Colors.wave,\n  urbanOasis: Colors.marygold,\n  yellow: Colors.saffron,\n};\n\nconst COMPLEMENTARY_TEXT_COLOR_CONFIG = {\n  [Colors.lightSand]: 'text-black',\n  [Colors.marygold]: 'text-black',\n  [Colors.saffron]: 'text-black',\n  [Colors.sand]: 'text-black',\n  [Colors.verdigris]: 'text-black',\n  [Colors.white]: 'text-black',\n  [Colors.black]: 'text-white',\n  [Colors.green]: 'text-white',\n  [Colors.lavender]: 'text-white',\n  [Colors.orange]: 'text-white',\n  [Colors.red]: 'text-white',\n  [Colors.sienna]: 'text-white',\n  [Colors.ultramarine]: 'text-white',\n  [Colors.wave]: 'text-white',\n  [Colors.darkGrey]: 'text-white',\n  [Colors.lightGrey]: 'text-black',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<keyof typeof Colors, `text-${string}`>;\n\nconst colorGuard = <T extends Record<string, string>, K extends keyof T>(\n  color: string | K,\n  obj: T,\n): color is K => {\n  return color in obj;\n};\n\nexport const getBorderColor = (color: string): `border-${string}` => {\n  if (colorGuard(color, BORDER_COLORS)) {\n    return BORDER_COLORS[color];\n  }\n\n  return `border-${color}`;\n};\n\nexport const getBgColor = (color: string): `bg-${string}` => {\n  if (colorGuard(color, BG_COLORS)) {\n    return BG_COLORS[color];\n  }\n\n  return `bg-${color}`;\n};\n\nexport const getTextColor = (color: string): `text-${string}` => {\n  if (colorGuard(color, TEXT_COLORS)) {\n    return TEXT_COLORS[color];\n  }\n\n  return `text-${color}`;\n};\n\nexport const getGradientToColor = (color: string): `to-${string}` => {\n  if (colorGuard(color, TO_COLORS)) {\n    return TO_COLORS[color];\n  }\n\n  return `to-${color}`;\n};\n\nexport const getComplementaryTextColor = (color: string): `text-${string}` => {\n  return COMPLEMENTARY_TEXT_COLOR_CONFIG[color as Colors] || 'text-white';\n};\n\nexport const getComplementaryColor = (color: string): Colors => {\n  return COMPLEMENTARY_COLORS[color as Colors] || 'white';\n};\n\nexport const getThemeColor = (theme: Theme): Colors => {\n  return THEME_TO_COLOR[theme] || theme;\n};\n"],"mappings":"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"}
+{"version":3,"file":"colors.js","names":[],"sources":["../../../../lib/ui/helpers/colors/colors.ts"],"sourcesContent":["import type { Theme } from '../../types/Theme';\n\nexport enum Colors {\n  black = 'black',\n  darkGrey = 'darkGrey',\n  green = 'green',\n  lavender = 'lavender',\n  lightGrey = 'lightGrey',\n  lightSand = 'lightSand',\n  marygold = 'marygold',\n  orange = 'orange',\n  pearl = 'pearl',\n  red = 'red',\n  saffron = 'saffron',\n  sand = 'sand',\n  sienna = 'sienna',\n  ultramarine = 'ultramarine',\n  verdigris = 'verdigris',\n  wave = 'wave',\n  white = 'white',\n  current = 'current',\n}\n\nconst BORDER_COLORS = {\n  [Colors.black]: 'border-black',\n  [Colors.darkGrey]: 'border-darkGrey',\n  [Colors.green]: 'border-green',\n  [Colors.lavender]: 'border-lavender',\n  [Colors.lightGrey]: 'border-lightGrey',\n  [Colors.lightSand]: 'border-lightSand',\n  [Colors.marygold]: 'border-marygold',\n  [Colors.orange]: 'border-orange',\n  [Colors.red]: 'border-red',\n  [Colors.saffron]: 'border-saffron',\n  [Colors.sand]: 'border-sand',\n  [Colors.sienna]: 'border-sienna',\n  [Colors.ultramarine]: 'border-ultramarine',\n  [Colors.verdigris]: 'border-verdigris',\n  [Colors.wave]: 'border-wave',\n  [Colors.white]: 'border-white',\n  [Colors.current]: 'border-current',\n} as const satisfies Record<string, `border-${string}`>;\n\nexport type BorderColor = keyof typeof BORDER_COLORS;\n\nconst BG_COLORS = {\n  [Colors.black]: 'bg-black',\n  [Colors.darkGrey]: 'bg-darkGrey',\n  [Colors.green]: 'bg-green',\n  [Colors.lavender]: 'bg-lavender',\n  [Colors.lightGrey]: 'bg-lightGrey',\n  [Colors.lightSand]: 'bg-lightSand',\n  [Colors.marygold]: 'bg-marygold',\n  [Colors.orange]: 'bg-orange',\n  [Colors.pearl]: 'bg-pearl',\n  [Colors.red]: 'bg-red',\n  [Colors.saffron]: 'bg-saffron',\n  [Colors.sand]: 'bg-sand',\n  [Colors.sienna]: 'bg-sienna',\n  [Colors.ultramarine]: 'bg-ultramarine',\n  [Colors.verdigris]: 'bg-verdigris',\n  [Colors.wave]: 'bg-wave',\n  [Colors.white]: 'bg-white',\n  [Colors.current]: 'bg-current',\n} as const satisfies Record<Colors, `bg-${string}`>;\n\nexport type BgColor = keyof typeof BG_COLORS;\n\nconst TEXT_COLORS = {\n  [Colors.black]: 'text-black',\n  [Colors.green]: 'text-green',\n  [Colors.lavender]: 'text-lavender',\n  [Colors.lightSand]: 'text-lightSand',\n  [Colors.marygold]: 'text-marygold',\n  [Colors.orange]: 'text-orange',\n  [Colors.pearl]: 'text-pearl',\n  [Colors.red]: 'text-red',\n  [Colors.saffron]: 'text-saffron',\n  [Colors.sand]: 'text-sand',\n  [Colors.sienna]: 'text-sienna',\n  [Colors.ultramarine]: 'text-ultramarine',\n  [Colors.verdigris]: 'text-verdigris',\n  [Colors.wave]: 'text-wave',\n  [Colors.white]: 'text-white',\n  [Colors.darkGrey]: 'text-darkGrey',\n  [Colors.lightGrey]: 'text-lightGrey',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<Colors, `text-${string}`>;\n\nexport type TextColor = keyof typeof TEXT_COLORS;\n\nconst TO_COLORS = {\n  [Colors.black]: `to-black`,\n  [Colors.green]: `to-green`,\n  [Colors.lavender]: `to-lavender`,\n  [Colors.lightSand]: `to-lightSand`,\n  [Colors.marygold]: `to-marygold`,\n  [Colors.orange]: `to-orange`,\n  [Colors.pearl]: `to-pearl`,\n  [Colors.red]: `to-red`,\n  [Colors.saffron]: `to-saffron`,\n  [Colors.sand]: `to-sand`,\n  [Colors.sienna]: `to-sienna`,\n  [Colors.ultramarine]: `to-ultramarine`,\n  [Colors.verdigris]: `to-verdigris`,\n  [Colors.wave]: `to-wave`,\n  [Colors.white]: `to-white`,\n  [Colors.darkGrey]: `to-darkGrey`,\n  [Colors.lightGrey]: `to-lightGrey`,\n  [Colors.current]: `to-current`,\n} as const satisfies Record<keyof typeof Colors, `to-${string}`>;\n\nexport type ToColor = keyof typeof TO_COLORS;\n\nconst COMPLEMENTARY_COLORS = {\n  [Colors.lightSand]: Colors.black,\n  [Colors.marygold]: Colors.black,\n  [Colors.saffron]: Colors.black,\n  [Colors.sand]: Colors.black,\n  [Colors.verdigris]: Colors.black,\n  [Colors.white]: Colors.black,\n  [Colors.pearl]: Colors.black,\n  [Colors.black]: Colors.white,\n  [Colors.green]: Colors.white,\n  [Colors.lavender]: Colors.white,\n  [Colors.orange]: Colors.white,\n  [Colors.red]: Colors.white,\n  [Colors.sienna]: Colors.white,\n  [Colors.ultramarine]: Colors.white,\n  [Colors.wave]: Colors.white,\n  [Colors.darkGrey]: Colors.white,\n  [Colors.lightGrey]: Colors.black,\n  [Colors.current]: Colors.white,\n} as const satisfies Record<keyof typeof Colors, Colors.white | Colors.black>;\n\nconst THEME_TO_COLOR: Record<string, Colors> = {\n  dark: Colors.ultramarine,\n  exclusiveCollection: Colors.ultramarine,\n  coreRange: Colors.lightSand,\n  light: Colors.lightSand,\n  happyToCare: Colors.verdigris,\n  joyview: Colors.wave,\n  urbanOasis: Colors.marygold,\n  yellow: Colors.saffron,\n};\n\nconst COMPLEMENTARY_TEXT_COLOR_CONFIG = {\n  [Colors.lightSand]: 'text-black',\n  [Colors.marygold]: 'text-black',\n  [Colors.saffron]: 'text-black',\n  [Colors.sand]: 'text-black',\n  [Colors.verdigris]: 'text-black',\n  [Colors.white]: 'text-black',\n  [Colors.black]: 'text-white',\n  [Colors.green]: 'text-white',\n  [Colors.lavender]: 'text-white',\n  [Colors.orange]: 'text-white',\n  [Colors.pearl]: 'text-white',\n  [Colors.red]: 'text-white',\n  [Colors.sienna]: 'text-white',\n  [Colors.ultramarine]: 'text-white',\n  [Colors.wave]: 'text-white',\n  [Colors.darkGrey]: 'text-white',\n  [Colors.lightGrey]: 'text-black',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<keyof typeof Colors, `text-${string}`>;\n\nconst colorGuard = <T extends Record<string, string>, K extends keyof T>(\n  color: string | K,\n  obj: T,\n): color is K => {\n  return color in obj;\n};\n\nexport const getBorderColor = (color: string): `border-${string}` => {\n  if (colorGuard(color, BORDER_COLORS)) {\n    return BORDER_COLORS[color];\n  }\n\n  return `border-${color}`;\n};\n\nexport const getBgColor = (color: string): `bg-${string}` => {\n  if (colorGuard(color, BG_COLORS)) {\n    return BG_COLORS[color];\n  }\n\n  return `bg-${color}`;\n};\n\nexport const getTextColor = (color: string): `text-${string}` => {\n  if (colorGuard(color, TEXT_COLORS)) {\n    return TEXT_COLORS[color];\n  }\n\n  return `text-${color}`;\n};\n\nexport const getGradientToColor = (color: string): `to-${string}` => {\n  if (colorGuard(color, TO_COLORS)) {\n    return TO_COLORS[color];\n  }\n\n  return `to-${color}`;\n};\n\nexport const getComplementaryTextColor = (color: string): `text-${string}` => {\n  return COMPLEMENTARY_TEXT_COLOR_CONFIG[color as Colors] || 'text-white';\n};\n\nexport const getComplementaryColor = (color: string): Colors => {\n  return COMPLEMENTARY_COLORS[color as Colors] || 'white';\n};\n\nexport const getThemeColor = (theme: Theme): Colors => {\n  return THEME_TO_COLOR[theme] || theme;\n};\n"],"mappings":"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"}

package/ui/hooks/useValue.js

@@ -3,7 +3,7 @@ import { useEffect as e, useState as t } from "react";
 function n({ name: n, initialValue: r, onChange: i, defaultValue: a = "", formatter: o = (e) => e }) {
 	let [s, c] = t(o(r || a));
 	e(() => {
-		r !== void 0 && c(o(r));
+		c(o(r ?? a));
 	}, [r]);
 	function l(e) {
 		e = o(e), c(e), i && i(n, e);

package/ui/hooks/useValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useValue.js","names":[],"sources":["../../../lib/ui/hooks/useValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface UseValueProps<Value = string, InitialValue = Value> {\n  name: string;\n  initialValue?: InitialValue;\n  defaultValue?: Value | string;\n  formatter?: (v: Value) => Value;\n  onChange?: (name: string, value: Value) => void;\n}\n\nexport function useValue<Value = string, InitialValue = Value>({\n  name,\n  initialValue,\n  onChange,\n  defaultValue = '',\n  formatter = (v: Value) => v as unknown as Value,\n}: UseValueProps<Value, InitialValue>) {\n  const [value, setValue] = useState<Value>(formatter((initialValue || defaultValue) as Value));\n\n  useEffect(() => {\n    if (initialValue !== undefined) {\n      setValue(formatter(initialValue as Value));\n    }\n  }, [initialValue]);\n\n  function setNewValue(newValue: Value) {\n    newValue = formatter(newValue);\n    setValue(newValue);\n    if (onChange) onChange(name, newValue);\n  }\n\n  function resetValue() {\n    setValue(defaultValue as Value);\n  }\n\n  return {\n    value,\n    setValue: setNewValue,\n    resetValue,\n  };\n}\n"],"mappings":";;AAUA,SAAgB,EAA+C,EAC7D,SACA,iBACA,aACA,kBAAe,IACf,gBAAa,MAAa,KACW;CACrC,IAAM,CAAC,GAAO,KAAY,EAAgB,EAAW,KAAgB,EAAuB,CAAC;AAE7F,SAAgB;AACd,EAAI,MAAiB,KAAA,KACnB,EAAS,EAAU,EAAsB,CAAC;IAE3C,CAAC,EAAa,CAAC;CAElB,SAAS,EAAY,GAAiB;AAGpC,EAFA,IAAW,EAAU,EAAS,EAC9B,EAAS,EAAS,EACd,KAAU,EAAS,GAAM,EAAS;;CAGxC,SAAS,IAAa;AACpB,IAAS,EAAsB;;AAGjC,QAAO;EACL;EACA,UAAU;EACV;EACD"}
+{"version":3,"file":"useValue.js","names":[],"sources":["../../../lib/ui/hooks/useValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface UseValueProps<Value = string, InitialValue = Value> {\n  name: string;\n  initialValue?: InitialValue;\n  defaultValue?: Value | string;\n  formatter?: (v: Value) => Value;\n  onChange?: (name: string, value: Value) => void;\n}\n\nexport function useValue<Value = string, InitialValue = Value>({\n  name,\n  initialValue,\n  onChange,\n  defaultValue = '',\n  formatter = (v: Value) => v as unknown as Value,\n}: UseValueProps<Value, InitialValue>) {\n  const [value, setValue] = useState<Value>(formatter((initialValue || defaultValue) as Value));\n\n  useEffect(() => {\n    // Use ?? operator to fallback to defaultValue when initialValue is undefined/null\n    // This ensures the component resets properly when controlled value becomes undefined\n    setValue(formatter((initialValue ?? defaultValue) as Value));\n  }, [initialValue]);\n\n  function setNewValue(newValue: Value) {\n    newValue = formatter(newValue);\n    setValue(newValue);\n    if (onChange) onChange(name, newValue);\n  }\n\n  function resetValue() {\n    setValue(defaultValue as Value);\n  }\n\n  return {\n    value,\n    setValue: setNewValue,\n    resetValue,\n  };\n}\n"],"mappings":";;AAUA,SAAgB,EAA+C,EAC7D,SACA,iBACA,aACA,kBAAe,IACf,gBAAa,MAAa,KACW;CACrC,IAAM,CAAC,GAAO,KAAY,EAAgB,EAAW,KAAgB,EAAuB,CAAC;AAE7F,SAAgB;AAGd,IAAS,EAAW,KAAgB,EAAuB,CAAC;IAC3D,CAAC,EAAa,CAAC;CAElB,SAAS,EAAY,GAAiB;AAGpC,EAFA,IAAW,EAAU,EAAS,EAC9B,EAAS,EAAS,EACd,KAAU,EAAS,GAAM,EAAS;;CAGxC,SAAS,IAAa;AACpB,IAAS,EAAsB;;AAGjC,QAAO;EACL;EACA,UAAU;EACV;EACD"}

package/ui/Breadcrumb.themes.d.ts

@@ -1,8 +0,0 @@
-import { Theme } from './types/Theme';
-export declare const getTheme: (theme: Theme) => {
-    thStart: string;
-    thEnd: string;
-} | {
-    readonly thStart: "text-middleGrey";
-    readonly thEnd: "text-black font-bold";
-};

package/ui/Breadcrumb.themes.js

@@ -1,16 +0,0 @@
-//#region lib/ui/Breadcrumb.themes.ts
-var e = {
-	thStart: "bg-ultramarine",
-	thEnd: "bg-ultramarine font-bold"
-}, t = {
-	dark: e,
-	wave: e,
-	light: {
-		thStart: "text-middleGrey",
-		thEnd: "text-black font-bold"
-	}
-}, n = (e) => t[e] || t.light;
-//#endregion
-export { n as getTheme };
-
-//# sourceMappingURL=Breadcrumb.themes.js.map

package/ui/Breadcrumb.themes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumb.themes.js","names":[],"sources":["../../lib/ui/Breadcrumb.themes.ts"],"sourcesContent":["import type { Theme } from './types/Theme';\nconst dark = {\n  thStart: 'bg-ultramarine',\n  thEnd: 'bg-ultramarine font-bold',\n};\n\nconst THEME = {\n  dark,\n  wave: dark,\n  light: {\n    thStart: 'text-middleGrey',\n    thEnd: 'text-black font-bold',\n  },\n} as const satisfies Record<string, { thStart: string; thEnd: string }>;\n\nexport const getTheme = (theme: Theme) => {\n  return THEME[theme as keyof typeof THEME] || THEME.light;\n};\n"],"mappings":";AACA,IAAM,IAAO;CACX,SAAS;CACT,OAAO;CACR,EAEK,IAAQ;CACZ;CACA,MAAM;CACN,OAAO;EACL,SAAS;EACT,OAAO;EACR;CACF,EAEY,KAAY,MAChB,EAAM,MAAgC,EAAM"}