@powerhousedao/design-system 6.0.0-dev.20 → 6.0.0-dev.200

package/dist/ui/components/select-field/selected-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selected-content.js","names":["cn","Icon","React","SelectedContent","selectedValues","options","multiple","searchable","placeholder","handleClear","renderIcon","IconComponent","length","map","value","index","option","find","o","icon","label","e","preventDefault","stopPropagation"],"sources":["../../../../src/ui/components/select-field/selected-content.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#design-system\";\nimport React from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface SelectedContentProps {\n  selectedValues: string[];\n  options: SelectProps[\"options\"];\n  multiple?: boolean;\n  searchable?: boolean;\n  placeholder?: string;\n  handleClear: () => void;\n}\n\nexport const SelectedContent: React.FC<SelectedContentProps> = ({\n  selectedValues,\n  options = [],\n  multiple,\n  searchable,\n  placeholder,\n  handleClear,\n}) => {\n  const renderIcon = (\n    IconComponent:\n      | IconName\n      | React.ComponentType<{ className?: string }>\n      | undefined,\n  ) => {\n    if (typeof IconComponent === \"string\") {\n      return <Icon name={IconComponent} size={16} />;\n    }\n    return IconComponent && <IconComponent className=\"size-4\" />;\n  };\n\n  if (selectedValues.length === 0) {\n    return (\n      <div\n        className={cn(\n          \"mx-auto flex w-full items-center\",\n          placeholder ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {placeholder && (\n          <span className=\"text-[14px] font-normal leading-5 text-gray-600 dark:text-gray-500\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center justify-between gap-2\">\n      <div\n        className={cn(\n          \"max-w-full truncate text-gray-900 dark:text-gray-50\",\n          !multiple && \"flex items-center gap-2\",\n        )}\n      >\n        {selectedValues.map((value, index) => {\n          const option = options.find((o) => o.value === value);\n          return !multiple ? (\n            <React.Fragment key={value}>\n              {renderIcon(option?.icon)}\n              <span className=\"truncate text-[14px] font-normal leading-5\">\n                {option?.label}\n              </span>\n            </React.Fragment>\n          ) : (\n            <span\n              key={value}\n              className={cn(\n                \"text-[14px] font-normal leading-5\",\n                index !== selectedValues.length - 1 && \"mr-1\",\n              )}\n            >\n              {index !== selectedValues.length - 1\n                ? `${option?.label},`\n                : option?.label}\n            </span>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center justify-between gap-2\">\n        {multiple && selectedValues.length > 0 && (\n          <div\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              handleClear();\n            }}\n            className=\"size-4 p-0\"\n          >\n            <Icon\n              name=\"XmarkLight\"\n              size={16}\n              className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAcA,MAAaG,mBAAmD,EAC9DC,gBACAC,UAAU,EAAE,EACZC,UACAC,YACAC,aACAC,kBACI;CACJ,MAAMC,cACJC,kBAIG;AACH,MAAI,OAAOA,kBAAkB,SAC3B,QAAO,oBAAC,MAAD;GAAM,MAAMA;GAAe,MAAM;GAAM,CAAA;AAEhD,SAAOA,iBAAiB,oBAAC,eAAD,EAAe,WAAU,UAAW,CAAA;;AAG9D,KAAIP,eAAeQ,WAAW,EAC5B,QACE,qBAAC,OAAD;EACE,WAAWZ,GACT,oCACAQ,cAAc,oBAAoB,cACnC;YAJH,CAMGA,eACC,oBAAC,QAAD;GAAM,WAAU;aACbA;GAEJ,CAAA,EACAD,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,GAEF,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GAEb,CAAA,CACG;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,WAAWP,GACT,uDACA,CAACM,YAAY,0BACd;aAEAF,eAAeS,KAAKC,OAAOC,UAAU;IACpC,MAAMC,SAASX,QAAQY,MAAMC,MAAMA,EAAEJ,UAAUA,MAAM;AACrD,WAAO,CAACR,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACGI,WAAWM,QAAQG,KAAK,EACzB,oBAAC,QAAD;KAAM,WAAU;eACbH,QAAQI;KACL,CAAA,CACS,EAAA,EALIN,MAKJ,GAEjB,oBAAC,QAAD;KAEE,WAAWd,GACT,qCACAe,UAAUX,eAAeQ,SAAS,KAAK,OACxC;eAEAG,UAAUX,eAAeQ,SAAS,IAC/B,GAAGI,QAAQI,MAAK,KAChBJ,QAAQI;KAEf,EAVQN,MAUR;KACD;GACC,CAAA,EACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGR,YAAYF,eAAeQ,SAAS,KACnC,oBAAC,OAAD;IACE,UAAUS,MAAM;AACdA,OAAEC,gBAAgB;AAClBD,OAAEE,iBAAiB;AACnBd,kBAAa;;IAEf,WAAU;cAEV,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;KAAiD,CAAA;IAGhE,CAAA,EACAF,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,GAEF,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IAEb,CAAA,CACE;KACD"}

package/dist/ui/components/select-field/subcomponents/CommandItemList.d.ts

@@ -0,0 +1,18 @@
+import { C as SelectProps } from "../../../../index-B6YyDoT1.js";
+import React from "react";
+
+//#region src/ui/components/select-field/subcomponents/CommandItemList.d.ts
+interface FavoriteOptionsProps {
+  options: SelectProps["options"];
+  selectedValues: string[];
+  multiple?: boolean;
+  selectionIcon: "auto" | "checkmark";
+  selectionIconPosition: "left" | "right";
+  hasAnyIcon: boolean;
+  toggleOption: (value: string) => void;
+  tabIndex?: number;
+}
+declare const CommandItemList: React.FC<FavoriteOptionsProps>;
+//#endregion
+export { CommandItemList };
+//# sourceMappingURL=CommandItemList.d.ts.map

package/dist/ui/components/select-field/subcomponents/CommandItemList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItemList.d.ts","names":[],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"mappings":";;;;UAMU,oBAAA;EACR,OAAA,EAAS,WAAA;EACT,cAAA;EACA,QAAA;EACA,aAAA;EACA,qBAAA;EACA,UAAA;EACA,YAAA,GAAe,KAAA;EACf,QAAA;AAAA;AAAA,cA2BW,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/ui/components/select-field/subcomponents/CommandItemList.js

@@ -0,0 +1,64 @@
+import { h as Icon, t as cn } from "../../../../src-8xf1ueaA.js";
+import { CommandItem } from "../../command/command.js";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/select-field/subcomponents/CommandItemList.tsx
+const renderIcon = (IconComponent) => {
+	if (typeof IconComponent === "string") return /* @__PURE__ */ jsx(Icon, {
+		name: IconComponent,
+		size: 16,
+		className: cn("text-gray-700 dark:text-gray-400")
+	});
+	return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: cn("size-4", "text-gray-700 dark:text-gray-400") });
+};
+const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex }) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((opt) => {
+		const isSelected = selectedValues.includes(opt.value);
+		return /* @__PURE__ */ jsxs(CommandItem, {
+			tabIndex,
+			value: opt.label,
+			onSelect: () => !opt.disabled && toggleOption(opt.value),
+			disabled: opt.disabled,
+			className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900", opt.disabled && "!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent"),
+			role: "option",
+			"aria-selected": isSelected,
+			children: [
+				selectionIcon === "auto" && (multiple ? /* @__PURE__ */ jsx("div", {
+					className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", isSelected && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"),
+					children: isSelected && /* @__PURE__ */ jsx(Icon, {
+						name: "Checkmark",
+						size: 16
+					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: cn("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-gray-400" : "border-gray-800 dark:border-gray-400", "bg-transparent dark:bg-transparent"),
+					children: isSelected && /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })
+				})),
+				selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && /* @__PURE__ */ jsx("div", {
+					className: "size-4",
+					children: selectionIconPosition === "left" && isSelected && /* @__PURE__ */ jsx(Icon, {
+						name: "Checkmark",
+						size: 16,
+						className: "text-gray-900 dark:text-gray-50"
+					})
+				}),
+				renderIcon(opt.icon),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("flex-1 truncate text-[14px] font-normal leading-4", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"),
+					children: opt.label
+				}),
+				selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
+					className: "size-4",
+					children: isSelected && /* @__PURE__ */ jsx(Icon, {
+						name: "Checkmark",
+						size: 16,
+						className: "text-gray-900 dark:text-gray-50"
+					})
+				})
+			]
+		}, `favorite-${opt.value}`);
+	}) });
+};
+//#endregion
+export { CommandItemList };
+
+//# sourceMappingURL=CommandItemList.js.map

package/dist/ui/components/select-field/subcomponents/CommandItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItemList.js","names":["cn","Icon","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#design-system\";\nimport React from \"react\";\nimport { CommandItem } from \"../../command/command.js\";\nimport type { SelectProps } from \"../../enum-field/types.js\";\n\ninterface FavoriteOptionsProps {\n  options: SelectProps[\"options\"];\n  selectedValues: string[];\n  multiple?: boolean;\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  hasAnyIcon: boolean;\n  toggleOption: (value: string) => void;\n  tabIndex?: number;\n}\n\nconst renderIcon = (\n  IconComponent:\n    | IconName\n    | React.ComponentType<{ className?: string }>\n    | undefined,\n) => {\n  if (typeof IconComponent === \"string\") {\n    return (\n      <Icon\n        name={IconComponent}\n        size={16}\n        className={cn(\"text-gray-700 dark:text-gray-400\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent\n        className={cn(\"size-4\", \"text-gray-700 dark:text-gray-400\")}\n      />\n    )\n  );\n};\n\nexport const CommandItemList: React.FC<FavoriteOptionsProps> = ({\n  options = [],\n  selectedValues,\n  multiple,\n  selectionIcon,\n  selectionIconPosition,\n  hasAnyIcon,\n  toggleOption,\n  tabIndex,\n}) => {\n  return (\n    <>\n      {options.map((opt) => {\n        const isSelected = selectedValues.includes(opt.value);\n        return (\n          <CommandItem\n            tabIndex={tabIndex}\n            key={`favorite-${opt.value}`}\n            value={opt.label}\n            onSelect={() => !opt.disabled && toggleOption(opt.value)}\n            disabled={opt.disabled}\n            className={cn(\n              \"cursor-pointer\",\n              \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              opt.disabled &&\n                \"!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n            )}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {selectionIcon === \"auto\" &&\n              (multiple ? (\n                <div\n                  className={cn(\n                    \"flex size-4 items-center justify-center rounded-md border\",\n                    \"border-gray-700 dark:border-gray-400\",\n                    isSelected &&\n                      \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\",\n                  )}\n                >\n                  {isSelected && <Icon name=\"Checkmark\" size={16} />}\n                </div>\n              ) : (\n                <div\n                  className={cn(\n                    \"relative size-4 rounded-full border\",\n                    isSelected\n                      ? \"border-gray-900 dark:border-gray-400\"\n                      : \"border-gray-800 dark:border-gray-400\",\n                    \"bg-transparent dark:bg-transparent\",\n                  )}\n                >\n                  {isSelected && (\n                    <div className=\"absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400\" />\n                  )}\n                </div>\n              ))}\n            {selectionIcon === \"checkmark\" &&\n              !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                <div className=\"size-4\">\n                  {selectionIconPosition === \"left\" && isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n            {renderIcon(opt.icon)}\n            <span\n              className={cn(\n                \"flex-1 truncate text-[14px] font-normal leading-4\",\n                \"text-gray-700 dark:text-gray-500\",\n                opt.disabled && \"text-gray-600 dark:text-gray-600\",\n              )}\n            >\n              {opt.label}\n            </span>\n            {selectionIcon === \"checkmark\" &&\n              selectionIconPosition === \"right\" && (\n                <div className=\"size-4\">\n                  {isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;AAiBA,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWL,GAAG,mCAAmC;EACjD,CAAA;AAGN,QACEK,iBACE,oBAAC,eAAD,EACE,WAAWL,GAAG,UAAU,mCAAmC,EAE9D,CAAA;;AAIL,MAAaM,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWrB,GACT,kBACA,0EACAgB,IAAIK,YACF,yFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWT,GACT,6DACA,wCACAiB,cACE,6DACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWjB,GACT,uCACAiB,aACI,yCACA,wCACJ,qCACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,kHAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWtB,GACT,qDACA,oCACAgB,IAAIK,YAAY,mCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}

package/dist/ui/components/select-field/use-select-field.d.ts

@@ -0,0 +1,29 @@
+import { C as SelectProps } from "../../../index-B6YyDoT1.js";
+import * as react from "react";
+
+//#region src/ui/components/select-field/use-select-field.d.ts
+interface UseSelectFieldProps {
+  options?: SelectProps["options"];
+  multiple?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+}
+declare function useSelectField({
+  options,
+  multiple,
+  defaultValue,
+  value,
+  onChange
+}: UseSelectFieldProps): {
+  selectedValues: string[];
+  isPopoverOpen: boolean;
+  commandListRef: react.RefObject<HTMLDivElement | null>;
+  toggleOption: (optionValue: string) => void;
+  handleClear: () => void;
+  toggleAll: () => void;
+  handleOpenChange: (open: boolean) => void;
+};
+//#endregion
+export { useSelectField };
+//# sourceMappingURL=use-select-field.d.ts.map

package/dist/ui/components/select-field/use-select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-select-field.d.ts","names":[],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"mappings":";;;;UAGU,mBAAA;EACR,OAAA,GAAU,WAAA;EACV,QAAA;EACA,YAAA;EACA,KAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,iBAGE,cAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,YAAA;EACA,KAAA;EACA;AAAA,GACC,mBAAA"}

package/dist/ui/components/select-field/use-select-field.js

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/components/select-field/use-select-field.ts
+function useSelectField({ options = [], multiple = false, defaultValue, value, onChange }) {
+	const isInternalChange = useRef(false);
+	const commandListRef = useRef(null);
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+	const [selectedValues, setSelectedValues] = useState(() => {
+		const initialValue = value ?? defaultValue ?? [];
+		if (initialValue === "") return [];
+		return Array.isArray(initialValue) ? initialValue : [initialValue];
+	});
+	useEffect(() => {
+		if (isInternalChange.current) {
+			isInternalChange.current = false;
+			return;
+		}
+		const newValue = value ?? defaultValue ?? [];
+		if (newValue === "") setSelectedValues([]);
+		else setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);
+	}, [value]);
+	const handleOpenChange = useCallback((open) => {
+		setIsPopoverOpen(open);
+	}, []);
+	const toggleOption = useCallback((optionValue) => {
+		isInternalChange.current = true;
+		let newValues;
+		if (multiple) newValues = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+		else {
+			newValues = selectedValues[0] === optionValue ? [] : [optionValue];
+			setIsPopoverOpen(false);
+		}
+		setSelectedValues(newValues);
+		onChange?.(multiple ? newValues : newValues[0] ?? "");
+	}, [
+		multiple,
+		selectedValues,
+		options,
+		onChange
+	]);
+	const handleClear = useCallback(() => {
+		isInternalChange.current = true;
+		setSelectedValues([]);
+		onChange?.(multiple ? [] : "");
+	}, [multiple, onChange]);
+	const toggleAll = useCallback(() => {
+		isInternalChange.current = true;
+		const enabledOptions = options.filter((opt) => !opt.disabled).map((opt) => opt.value);
+		const newValues = selectedValues.length === enabledOptions.length ? [] : enabledOptions;
+		setSelectedValues(newValues);
+		onChange?.(multiple ? newValues : newValues[0]);
+	}, [
+		options,
+		selectedValues,
+		multiple,
+		onChange
+	]);
+	const prevMultiple = useRef(multiple);
+	useEffect(() => {
+		if (prevMultiple.current === multiple) return;
+		prevMultiple.current = multiple;
+		if (!multiple && selectedValues.length > 1) {
+			isInternalChange.current = true;
+			setSelectedValues([selectedValues[0]]);
+			onChange?.(selectedValues[0]);
+			return;
+		}
+		if (selectedValues.length > 0) {
+			isInternalChange.current = true;
+			onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);
+		}
+	}, [multiple]);
+	return {
+		selectedValues,
+		isPopoverOpen,
+		commandListRef,
+		toggleOption,
+		handleClear,
+		toggleAll,
+		handleOpenChange
+	};
+}
+//#endregion
+export { useSelectField };
+
+//# sourceMappingURL=use-select-field.js.map

package/dist/ui/components/select-field/use-select-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-select-field.js","names":["useCallback","useEffect","useRef","useState","useSelectField","options","multiple","defaultValue","value","onChange","isInternalChange","commandListRef","isPopoverOpen","setIsPopoverOpen","selectedValues","setSelectedValues","initialValue","Array","isArray","current","newValue","handleOpenChange","open","toggleOption","optionValue","newValues","includes","filter","v","handleClear","toggleAll","enabledOptions","opt","disabled","map","length","prevMultiple"],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface UseSelectFieldProps {\n  options?: SelectProps[\"options\"];\n  multiple?: boolean;\n  defaultValue?: string | string[];\n  value?: string | string[];\n  onChange?: (value: string | string[]) => void;\n}\n\nexport function useSelectField({\n  options = [],\n  multiple = false,\n  defaultValue,\n  value,\n  onChange,\n}: UseSelectFieldProps) {\n  const isInternalChange = useRef(false);\n  const commandListRef = useRef<HTMLDivElement>(null);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<string[]>(() => {\n    const initialValue = value ?? defaultValue ?? [];\n    if (initialValue === \"\") {\n      return [];\n    }\n    return Array.isArray(initialValue) ? initialValue : [initialValue];\n  });\n\n  useEffect(() => {\n    if (isInternalChange.current) {\n      isInternalChange.current = false;\n      return;\n    }\n    const newValue = value ?? defaultValue ?? [];\n    if (newValue === \"\") {\n      setSelectedValues([]);\n    } else {\n      setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);\n    }\n  }, [value]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsPopoverOpen(open);\n  }, []);\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      isInternalChange.current = true;\n      let newValues: string[];\n\n      if (multiple) {\n        newValues = selectedValues.includes(optionValue)\n          ? selectedValues.filter((v) => v !== optionValue)\n          : [...selectedValues, optionValue];\n      } else {\n        newValues = selectedValues[0] === optionValue ? [] : [optionValue];\n\n        setIsPopoverOpen(false);\n      }\n\n      setSelectedValues(newValues);\n      onChange?.(multiple ? newValues : (newValues[0] ?? \"\"));\n    },\n    [multiple, selectedValues, options, onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    isInternalChange.current = true;\n    setSelectedValues([]);\n    onChange?.(multiple ? [] : \"\");\n  }, [multiple, onChange]);\n\n  const toggleAll = useCallback(() => {\n    isInternalChange.current = true;\n    const enabledOptions = options\n      .filter((opt) => !opt.disabled)\n      .map((opt) => opt.value);\n\n    const newValues =\n      selectedValues.length === enabledOptions.length ? [] : enabledOptions;\n\n    setSelectedValues(newValues);\n    onChange?.(multiple ? newValues : newValues[0]);\n  }, [options, selectedValues, multiple, onChange]);\n\n  // handles changes to the \"multiple\" prop avoiding calling onChange on mount\n  const prevMultiple = useRef(multiple);\n  useEffect(() => {\n    if (prevMultiple.current === multiple) {\n      return;\n    }\n    prevMultiple.current = multiple;\n\n    if (!multiple && selectedValues.length > 1) {\n      isInternalChange.current = true;\n      setSelectedValues([selectedValues[0]]);\n      onChange?.(selectedValues[0]);\n      return;\n    }\n    if (selectedValues.length > 0) {\n      isInternalChange.current = true;\n      onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);\n    }\n  }, [multiple]);\n\n  return {\n    selectedValues,\n    isPopoverOpen,\n    commandListRef,\n    toggleOption,\n    handleClear,\n    toggleAll,\n    handleOpenChange,\n  };\n}\n"],"mappings":";;AAWA,SAAgBI,eAAe,EAC7BC,UAAU,EAAE,EACZC,WAAW,OACXC,cACAC,OACAC,YACsB;CACtB,MAAMC,mBAAmBR,OAAO,MAAM;CACtC,MAAMS,iBAAiBT,OAAuB,KAAK;CACnD,MAAM,CAACU,eAAeC,oBAAoBV,SAAS,MAAM;CACzD,MAAM,CAACW,gBAAgBC,qBAAqBZ,eAAyB;EACnE,MAAMa,eAAeR,SAASD,gBAAgB,EAAE;AAChD,MAAIS,iBAAiB,GACnB,QAAO,EAAE;AAEX,SAAOC,MAAMC,QAAQF,aAAa,GAAGA,eAAe,CAACA,aAAa;GAClE;AAEFf,iBAAgB;AACd,MAAIS,iBAAiBS,SAAS;AAC5BT,oBAAiBS,UAAU;AAC3B;;EAEF,MAAMC,WAAWZ,SAASD,gBAAgB,EAAE;AAC5C,MAAIa,aAAa,GACfL,mBAAkB,EAAE,CAAC;MAErBA,mBAAkBE,MAAMC,QAAQE,SAAS,GAAGA,WAAW,CAACA,SAAS,CAAC;IAEnE,CAACZ,MAAM,CAAC;CAEX,MAAMa,mBAAmBrB,aAAasB,SAAkB;AACtDT,mBAAiBS,KAAK;IACrB,EAAE,CAAC;CAEN,MAAMC,eAAevB,aAClBwB,gBAAwB;AACvBd,mBAAiBS,UAAU;EAC3B,IAAIM;AAEJ,MAAInB,SACFmB,aAAYX,eAAeY,SAASF,YAAY,GAC5CV,eAAea,QAAQC,MAAMA,MAAMJ,YAAY,GAC/C,CAAC,GAAGV,gBAAgBU,YAAY;OAC/B;AACLC,eAAYX,eAAe,OAAOU,cAAc,EAAE,GAAG,CAACA,YAAY;AAElEX,oBAAiB,MAAM;;AAGzBE,oBAAkBU,UAAU;AAC5BhB,aAAWH,WAAWmB,YAAaA,UAAU,MAAM,GAAI;IAEzD;EAACnB;EAAUQ;EAAgBT;EAASI;EACtC,CAAC;CAED,MAAMoB,cAAc7B,kBAAkB;AACpCU,mBAAiBS,UAAU;AAC3BJ,oBAAkB,EAAE,CAAC;AACrBN,aAAWH,WAAW,EAAE,GAAG,GAAG;IAC7B,CAACA,UAAUG,SAAS,CAAC;CAExB,MAAMqB,YAAY9B,kBAAkB;AAClCU,mBAAiBS,UAAU;EAC3B,MAAMY,iBAAiB1B,QACpBsB,QAAQK,QAAQ,CAACA,IAAIC,SAAS,CAC9BC,KAAKF,QAAQA,IAAIxB,MAAM;EAE1B,MAAMiB,YACJX,eAAeqB,WAAWJ,eAAeI,SAAS,EAAE,GAAGJ;AAEzDhB,oBAAkBU,UAAU;AAC5BhB,aAAWH,WAAWmB,YAAYA,UAAU,GAAG;IAC9C;EAACpB;EAASS;EAAgBR;EAAUG;EAAS,CAAC;CAGjD,MAAM2B,eAAelC,OAAOI,SAAS;AACrCL,iBAAgB;AACd,MAAImC,aAAajB,YAAYb,SAC3B;AAEF8B,eAAajB,UAAUb;AAEvB,MAAI,CAACA,YAAYQ,eAAeqB,SAAS,GAAG;AAC1CzB,oBAAiBS,UAAU;AAC3BJ,qBAAkB,CAACD,eAAe,GAAG,CAAC;AACtCL,cAAWK,eAAe,GAAG;AAC7B;;AAEF,MAAIA,eAAeqB,SAAS,GAAG;AAC7BzB,oBAAiBS,UAAU;AAC3BV,cAAWH,WAAW,CAACQ,eAAe,GAAG,GAAGA,eAAe,GAAG;;IAE/D,CAACR,SAAS,CAAC;AAEd,QAAO;EACLQ;EACAF;EACAD;EACAY;EACAM;EACAC;EACAT;EACD"}

package/dist/ui/components/text-field/text-field.d.ts

@@ -0,0 +1,2 @@
+import { n as TextFieldProps, t as TextField } from "../../../text-field-Bi7Ze25A.js";
+export { TextField, TextFieldProps };

package/dist/ui/components/text-field/text-field.js

@@ -0,0 +1,16 @@
+import { withFieldValidation } from "../with-field-validation/with-field-validation.js";
+import { TextInput } from "../text-input/text-input.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/text-field/text-field.tsx
+const TextField = /* @__PURE__ */ forwardRef(function TextField(props, ref) {
+	return /* @__PURE__ */ jsx(withFieldValidation(TextInput), {
+		...props,
+		ref
+	});
+});
+TextField.displayName = "TextField";
+//#endregion
+export { TextField };
+
+//# sourceMappingURL=text-field.js.map

package/dist/ui/components/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","names":["forwardRef","TextInput","withFieldValidation","TextField","props","ref","Component","displayName"],"sources":["../../../../src/ui/components/text-field/text-field.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { FieldErrorHandling, WithDifference } from \"../../types.js\";\nimport { type TextInputProps, TextInput } from \"../text-input/text-input.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\n\nexport type TextFieldProps = TextInputProps &\n  FieldErrorHandling &\n  WithDifference<string>;\n\nexport const TextField = forwardRef(function TextField(\n  props: TextFieldProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const Component = withFieldValidation<TextFieldProps>(TextInput);\n  return <Component {...props} ref={ref} />;\n});\n\nTextField.displayName = \"TextField\";\n"],"mappings":";;;;;AAUA,MAAaG,YAAYH,2BAAW,SAASG,UAC3CC,OACAC,KACA;AAEA,QAAO,oBADWH,oBAAoCD,UAAU,EACzD;EAAW,GAAIG;EAAYC;EAAO,CAAA;EACzC;AAEFF,UAAUI,cAAc"}

package/dist/ui/components/text-input/text-input-diff.d.ts

@@ -0,0 +1,2 @@
+import { t as TextInputDiff } from "../../../text-input-diff-Bx-zFOZd.js";
+export { TextInputDiff as default };

package/dist/ui/components/text-input/text-input-diff.js

@@ -0,0 +1,21 @@
+import { FormLabel } from "../form-label/form-label.js";
+import { FormGroup } from "../form-group/form-group.js";
+import { SplittedInputDiff } from "../input/splitted-input-diff.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/text-input/text-input-diff.tsx
+const TextInputDiff = ({ value, label, required, baseValue = "", viewMode = "edition", diffMode = "sentences" }) => {
+	return /* @__PURE__ */ jsxs(FormGroup, { children: [label && /* @__PURE__ */ jsx(FormLabel, {
+		disabled: true,
+		required,
+		children: label
+	}), /* @__PURE__ */ jsx(SplittedInputDiff, {
+		value,
+		baseValue,
+		diffMode,
+		viewMode
+	})] });
+};
+//#endregion
+export { TextInputDiff as default };
+
+//# sourceMappingURL=text-input-diff.js.map

package/dist/ui/components/text-input/text-input-diff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input-diff.js","names":["FormGroup","FormLabel","SplittedInputDiff","TextInputDiff","value","label","required","baseValue","viewMode","diffMode"],"sources":["../../../../src/ui/components/text-input/text-input-diff.tsx"],"sourcesContent":["import type { WithDifference } from \"../../types.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { SplittedInputDiff } from \"../input/splitted-input-diff.js\";\n\ninterface TextInputDiffProps extends WithDifference<string> {\n  value: string;\n  label?: React.ReactNode;\n  required?: boolean;\n}\nconst TextInputDiff = ({\n  value,\n  label,\n  required,\n  baseValue = \"\",\n  viewMode = \"edition\",\n  diffMode = \"sentences\",\n}: TextInputDiffProps) => {\n  return (\n    <FormGroup>\n      {label && (\n        <FormLabel disabled={true} required={required}>\n          {label}\n        </FormLabel>\n      )}\n      <SplittedInputDiff\n        value={value}\n        baseValue={baseValue}\n        diffMode={diffMode}\n        viewMode={viewMode}\n      />\n    </FormGroup>\n  );\n};\n\nexport default TextInputDiff;\n"],"mappings":";;;;;AAUA,MAAMG,iBAAiB,EACrBC,OACAC,OACAC,UACAC,YAAY,IACZC,WAAW,WACXC,WAAW,kBACa;AACxB,QACE,qBAAC,WAAD,EAAA,UAAA,CACGJ,SACC,oBAAC,WAAD;EAAW,UAAU;EAAgBC;YAClCD;EAEJ,CAAA,EACD,oBAAC,mBAAD;EACSD;EACIG;EACDE;EACAD;EAAS,CAAA,CAEX,EAAA,CAAA"}

package/dist/ui/components/text-input/text-input.d.ts

@@ -0,0 +1,2 @@
+import { n as TextInputProps, t as TextInput } from "../../../text-input-BAO78Lzx.js";
+export { TextInput, TextInputProps };

package/dist/ui/components/text-input/text-input.js

@@ -0,0 +1,79 @@
+import { t as cn } from "../../../src-8xf1ueaA.js";
+import { CharacterCounter } from "../character-counter/character-counter.js";
+import { FormLabel } from "../form-label/form-label.js";
+import { FormMessageList } from "../form-message/message-list.js";
+import { FormDescription } from "../form-description/form-description.js";
+import { FormGroup } from "../form-group/form-group.js";
+import { sharedValueTransformers } from "../../lib/shared-value-transformers.js";
+import { Input } from "../input/input.js";
+import { ValueTransformer } from "../value-transformer/value-transformer.js";
+import TextInputDiff from "./text-input-diff.js";
+import { forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/text-input/text-input.tsx
+const TextInput = /* @__PURE__ */ forwardRef(({ label, description, value, defaultValue, onChange, errors, warnings, pattern, trim, uppercase, lowercase, maxLength, autoComplete, baseValue, viewMode = "edition", diffMode, ...props }, ref) => {
+	const idGenerated = useId();
+	const id = props.id ?? idGenerated;
+	const autoCompleteValue = autoComplete === void 0 ? void 0 : autoComplete ? "on" : "off";
+	const hasContentBelow = !!description || Array.isArray(warnings) && warnings.length > 0 || Array.isArray(errors) && errors.length > 0;
+	const transformers = useMemo(() => [
+		sharedValueTransformers.trimOnBlur(!!trim),
+		sharedValueTransformers.lowercaseOnChange(!!lowercase),
+		sharedValueTransformers.uppercaseOnChange(!!uppercase),
+		sharedValueTransformers.trimOnEnter(!!trim)
+	], [
+		trim,
+		lowercase,
+		uppercase
+	]);
+	if (viewMode === "edition") return /* @__PURE__ */ jsxs(FormGroup, { children: [
+		label && /* @__PURE__ */ jsx(FormLabel, {
+			htmlFor: id,
+			required: props.required,
+			disabled: props.disabled,
+			hasError: !!errors?.length,
+			children: label
+		}),
+		/* @__PURE__ */ jsx(ValueTransformer, {
+			transformers,
+			children: /* @__PURE__ */ jsx(Input, {
+				id,
+				value: value ?? defaultValue ?? "",
+				onChange,
+				pattern: pattern?.toString(),
+				autoComplete: autoCompleteValue,
+				...props,
+				ref
+			})
+		}),
+		typeof maxLength === "number" && maxLength > 0 && /* @__PURE__ */ jsx("div", {
+			className: cn("mt-[-6px] flex justify-end", hasContentBelow && "-mb-1"),
+			children: /* @__PURE__ */ jsx(CharacterCounter, {
+				maxLength,
+				value: value ?? ""
+			})
+		}),
+		description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		warnings && /* @__PURE__ */ jsx(FormMessageList, {
+			messages: warnings,
+			type: "warning"
+		}),
+		errors && /* @__PURE__ */ jsx(FormMessageList, {
+			messages: errors,
+			type: "error"
+		})
+	] });
+	return /* @__PURE__ */ jsx(TextInputDiff, {
+		value: value ?? defaultValue ?? "",
+		viewMode,
+		diffMode,
+		baseValue,
+		label,
+		required: props.required
+	});
+});
+TextInput.displayName = "TextInput";
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=text-input.js.map

package/dist/ui/components/text-input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","names":["cn","forwardRef","useId","useMemo","sharedValueTransformers","CharacterCounter","FormDescription","FormGroup","FormLabel","FormMessageList","Input","ValueTransformer","TextInputDiff","TextInput","label","description","value","defaultValue","onChange","errors","warnings","pattern","trim","uppercase","lowercase","maxLength","autoComplete","baseValue","viewMode","diffMode","props","ref","idGenerated","id","autoCompleteValue","undefined","hasContentBelow","Array","isArray","length","transformers","trimOnBlur","lowercaseOnChange","uppercaseOnChange","trimOnEnter","required","disabled","toString","displayName"],"sources":["../../../../src/ui/components/text-input/text-input.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport { forwardRef, useId, useMemo } from \"react\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport type { DiffMode, InputBaseProps, WithDifference } from \"../../types.js\";\nimport { CharacterCounter } from \"../character-counter/character-counter.js\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Input } from \"../input/input.js\";\nimport type { TransformerType } from \"#design-system\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport TextInputDiff from \"./text-input-diff.js\";\nimport type { CommonTextProps } from \"./types.js\";\n\ninterface TextInputProps\n  extends\n    Omit<\n      InputBaseProps<string> &\n        Omit<React.InputHTMLAttributes<HTMLInputElement>, \"pattern\"> &\n        CommonTextProps,\n      \"value\" | \"autoComplete\"\n    >,\n    Omit<WithDifference<string>, \"diffMode\"> {\n  value?: string;\n  autoComplete?: boolean;\n  diffMode?: Extract<DiffMode, \"sentences\">;\n}\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      label,\n      description,\n      value,\n      defaultValue,\n      onChange,\n      errors,\n      warnings,\n      // TextProps\n      pattern,\n      trim,\n      uppercase,\n      lowercase,\n      maxLength,\n      autoComplete,\n      // Difference Props\n      baseValue,\n      viewMode = \"edition\",\n      diffMode,\n      ...props\n    },\n    ref,\n  ) => {\n    const idGenerated = useId();\n    const id = props.id ?? idGenerated;\n    const autoCompleteValue =\n      autoComplete === undefined ? undefined : autoComplete ? \"on\" : \"off\";\n    const hasContentBelow =\n      !!description ||\n      (Array.isArray(warnings) && warnings.length > 0) ||\n      (Array.isArray(errors) && errors.length > 0);\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(!!trim),\n        sharedValueTransformers.lowercaseOnChange(!!lowercase),\n        sharedValueTransformers.uppercaseOnChange(!!uppercase),\n        sharedValueTransformers.trimOnEnter(!!trim),\n      ],\n      [trim, lowercase, uppercase],\n    );\n\n    if (viewMode === \"edition\") {\n      return (\n        <FormGroup>\n          {label && (\n            <FormLabel\n              htmlFor={id}\n              required={props.required}\n              disabled={props.disabled}\n              hasError={!!errors?.length}\n            >\n              {label}\n            </FormLabel>\n          )}\n          <ValueTransformer transformers={transformers}>\n            <Input\n              id={id}\n              value={value ?? defaultValue ?? \"\"}\n              onChange={onChange}\n              pattern={pattern?.toString()}\n              autoComplete={autoCompleteValue}\n              {...props}\n              ref={ref}\n            />\n          </ValueTransformer>\n          {typeof maxLength === \"number\" && maxLength > 0 && (\n            <div\n              className={cn(\n                \"mt-[-6px] flex justify-end\",\n                hasContentBelow && \"-mb-1\",\n              )}\n            >\n              <CharacterCounter maxLength={maxLength} value={value ?? \"\"} />\n            </div>\n          )}\n          {description && <FormDescription>{description}</FormDescription>}\n          {warnings && <FormMessageList messages={warnings} type=\"warning\" />}\n          {errors && <FormMessageList messages={errors} type=\"error\" />}\n        </FormGroup>\n      );\n    }\n\n    // Diff mode\n    return (\n      <TextInputDiff\n        value={value ?? defaultValue ?? \"\"}\n        viewMode={viewMode}\n        diffMode={diffMode}\n        baseValue={baseValue}\n        label={label}\n        required={props.required}\n      />\n    );\n  },\n);\n\nTextInput.displayName = \"TextInput\";\n\nexport { TextInput, type TextInputProps };\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAMa,YAAYZ,4BAEd,EACEa,OACAC,aACAC,OACAC,cACAC,UACAC,QACAC,UAEAC,SACAC,MACAC,WACAC,WACAC,WACAC,cAEAC,WACAC,WAAW,WACXC,UACA,GAAGC,SAELC,QACG;CACH,MAAMC,cAAc9B,OAAO;CAC3B,MAAM+B,KAAKH,MAAMG,MAAMD;CACvB,MAAME,oBACJR,iBAAiBS,KAAAA,IAAYA,KAAAA,IAAYT,eAAe,OAAO;CACjE,MAAMU,kBACJ,CAAC,CAACrB,eACDsB,MAAMC,QAAQlB,SAAS,IAAIA,SAASmB,SAAS,KAC7CF,MAAMC,QAAQnB,OAAO,IAAIA,OAAOoB,SAAS;CAE5C,MAAMC,eAAgCrC,cAC9B;EACJC,wBAAwBqC,WAAW,CAAC,CAACnB,KAAK;EAC1ClB,wBAAwBsC,kBAAkB,CAAC,CAAClB,UAAU;EACtDpB,wBAAwBuC,kBAAkB,CAAC,CAACpB,UAAU;EACtDnB,wBAAwBwC,YAAY,CAAC,CAACtB,KAAK;EAC5C,EACD;EAACA;EAAME;EAAWD;EACpB,CAAC;AAED,KAAIK,aAAa,UACf,QACE,qBAAC,WAAD,EAAA,UAAA;EACGd,SACC,oBAAC,WAAD;GACE,SAASmB;GACT,UAAUH,MAAMe;GAChB,UAAUf,MAAMgB;GAChB,UAAU,CAAC,CAAC3B,QAAQoB;aAEnBzB;GAEJ,CAAA;EACD,oBAAC,kBAAD;GAAgC0B;aAC9B,oBAAC,OAAD;IACMP;IACJ,OAAOjB,SAASC,gBAAgB;IACtBC;IACV,SAASG,SAAS0B,UAAU;IAC5B,cAAcb;IACd,GAAIJ;IACCC;IAAI,CAAA;GAEK,CAAA;EACjB,OAAON,cAAc,YAAYA,YAAY,KAC5C,oBAAC,OAAD;GACE,WAAWzB,GACT,8BACAoC,mBAAmB,QACpB;aAED,oBAAC,kBAAD;IAA6BX;IAAW,OAAOT,SAAS;IAAG,CAAA;GAE9D,CAAA;EACAD,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EAC/DK,YAAY,oBAAC,iBAAD;GAAiB,UAAUA;GAAU,MAAK;GAAY,CAAA;EAClED,UAAU,oBAAC,iBAAD;GAAiB,UAAUA;GAAQ,MAAK;GAAU,CAAA;EACnD,EAAA,CAAA;AAKhB,QACE,oBAAC,eAAD;EACE,OAAOH,SAASC,gBAAgB;EACtBW;EACAC;EACCF;EACJb;EACP,UAAUgB,MAAMe;EAChB,CAAA;EAGP;AAEDhC,UAAUmC,cAAc"}

package/dist/ui/components/text-input/types.d.ts

@@ -0,0 +1,2 @@
+import { t as CommonTextProps } from "../../../types-Bsn62tJB.js";
+export { CommonTextProps };

package/dist/ui/components/tooltip/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { a as TooltipProps, i as TooltipContent, n as Root, o as Trigger, r as Tooltip, t as Provider } from "../../../tooltip-CsucyiCV.js";
+export { Tooltip, TooltipContent, TooltipProps, Provider as TooltipProvider, Root as TooltipRoot, Trigger as TooltipTrigger };

package/dist/ui/components/tooltip/tooltip.js

@@ -0,0 +1,35 @@
+import { t as cn } from "../../../src-8xf1ueaA.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
+//#region src/ui/components/tooltip/tooltip.tsx
+const TooltipContent = /* @__PURE__ */ forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Content, {
+		ref,
+		...props,
+		className: cn("z-50 overflow-hidden rounded-md text-sm", "border border-gray-200 bg-white text-gray-900 dark:border-gray-900 dark:bg-slate-900 dark:text-gray-200", "px-3 py-1.5 shadow-md", "data-[state=open]:animate-fade-in data-[state=open]:animate-zoom-in", "data-[state=closed]:animate-fade-out data-[state=closed]:animate-zoom-out", "data-[side=bottom]:animate-slide-in-from-top", "data-[side=left]:animate-slide-in-from-right", "data-[side=right]:animate-slide-in-from-left", "data-[side=top]:animate-slide-in-from-bottom", className),
+		children
+	});
+});
+const Tooltip = ({ content, children, triggerAsChild = false, delayDuration = 0, ...props }) => {
+	const { open, defaultOpen, onOpenChange, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Root, {
+		defaultOpen,
+		delayDuration,
+		onOpenChange,
+		open,
+		children: [/* @__PURE__ */ jsx(Trigger, {
+			asChild: triggerAsChild,
+			type: triggerAsChild ? void 0 : "button",
+			children
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(TooltipContent, {
+			sideOffset: 3,
+			...rest,
+			children: content
+		}) })]
+	});
+};
+//#endregion
+export { Tooltip, TooltipContent, Provider as TooltipProvider, Root as TooltipRoot, Trigger as TooltipTrigger };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/ui/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["cn","Content","Portal","Provider","Root","Trigger","forwardRef","TooltipContent","children","className","props","ref","Tooltip","content","triggerAsChild","delayDuration","open","defaultOpen","onOpenChange","rest","undefined","TooltipProvider","TooltipRoot","TooltipTrigger"],"sources":["../../../../src/ui/components/tooltip/tooltip.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport type {\n  TooltipContentProps,\n  TooltipProps as TooltipPrimitiveProps,\n} from \"@radix-ui/react-tooltip\";\nimport {\n  Content,\n  Portal,\n  Provider,\n  Root,\n  Trigger,\n} from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\n\ninterface TooltipProps\n  extends TooltipPrimitiveProps, Omit<TooltipContentProps, \"content\"> {\n  content: React.ReactNode;\n  className?: string;\n  triggerAsChild?: boolean;\n}\n\nconst TooltipContent = forwardRef<\n  React.ElementRef<typeof Content>,\n  TooltipContentProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Content\n      ref={ref}\n      {...props}\n      className={cn(\n        // Base styles\n        \"z-50 overflow-hidden rounded-md text-sm\",\n        // Colors & Border\n        \"border border-gray-200 bg-white text-gray-900 dark:border-gray-900 dark:bg-slate-900 dark:text-gray-200\",\n        // Padding & Shadow\n        \"px-3 py-1.5 shadow-md\",\n        // Animations\n        \"data-[state=open]:animate-fade-in data-[state=open]:animate-zoom-in\",\n        \"data-[state=closed]:animate-fade-out data-[state=closed]:animate-zoom-out\",\n        // Slide animations based on position\n        \"data-[side=bottom]:animate-slide-in-from-top\",\n        \"data-[side=left]:animate-slide-in-from-right\",\n        \"data-[side=right]:animate-slide-in-from-left\",\n        \"data-[side=top]:animate-slide-in-from-bottom\",\n        className,\n      )}\n    >\n      {children}\n    </Content>\n  );\n});\n\nconst Tooltip: React.FC<TooltipProps> = ({\n  content,\n  children,\n  triggerAsChild = false,\n  delayDuration = 0,\n  ...props\n}) => {\n  const { open, defaultOpen, onOpenChange, ...rest } = props;\n\n  return (\n    <Root\n      defaultOpen={defaultOpen}\n      delayDuration={delayDuration}\n      onOpenChange={onOpenChange}\n      open={open}\n    >\n      <Trigger\n        asChild={triggerAsChild}\n        type={triggerAsChild ? undefined : \"button\"} // Prevent form submission when default trigger is clicked\n      >\n        {children}\n      </Trigger>\n      <Portal>\n        <TooltipContent sideOffset={3} {...rest}>\n          {content}\n        </TooltipContent>\n      </Portal>\n    </Root>\n  );\n};\n\nexport {\n  Tooltip,\n  TooltipContent,\n  Provider as TooltipProvider,\n  Root as TooltipRoot,\n  Trigger as TooltipTrigger,\n  type TooltipProps,\n};\n"],"mappings":";;;;;AAqBA,MAAMO,iBAAiBD,4BAGpB,EAAEE,UAAUC,WAAW,GAAGC,SAASC,QAAQ;AAC5C,QACE,oBAAC,SAAD;EACOA;EACL,GAAID;EACJ,WAAWV,GAET,2CAEA,2GAEA,yBAEA,uEACA,6EAEA,gDACA,gDACA,gDACA,gDACAS,UACD;EAEAD;EACO,CAAA;EAEZ;AAEF,MAAMI,WAAmC,EACvCC,SACAL,UACAM,iBAAiB,OACjBC,gBAAgB,GAChB,GAAGL,YACC;CACJ,MAAM,EAAEM,MAAMC,aAAaC,cAAc,GAAGC,SAAST;AAErD,QACE,qBAAC,MAAD;EACeO;EACEF;EACDG;EACRF;YAJR,CAME,oBAAC,SAAD;GACE,SAASF;GACT,MAAMA,iBAAiBM,KAAAA,IAAY;GAElCZ;GACM,CAAA,EACT,oBAAC,QAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,YAAY;GAAG,GAAIW;aAChCN;GACa,CAAA,EACV,CAAA,CACH"}

package/dist/ui/components/types.d.ts

@@ -0,0 +1,2 @@
+import { C as SelectProps, S as SelectOption, b as RadioGroupProps, v as IdAutocompleteOption, x as SelectBaseProps, y as IdAutocompleteProps } from "../../index-B6YyDoT1.js";
+export { IdAutocompleteOption, IdAutocompleteProps, RadioGroupProps, SelectBaseProps, SelectOption, SelectProps };

package/dist/ui/components/value-transformer/value-transformer.d.ts

@@ -0,0 +1,2 @@
+import { t as ValueTransformer } from "../../../value-transformer-2yvrA5Rp.js";
+export { ValueTransformer };

package/dist/ui/components/value-transformer/value-transformer.js

@@ -0,0 +1,102 @@
+import { deepEqual } from "../../lib/deep-equal.js";
+import React, { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+//#region src/ui/components/value-transformer/value-transformer.tsx
+function setNativeValue(element, value) {
+	const valueSetter = Object.getOwnPropertyDescriptor(element, "value")?.set;
+	const prototype = Object.getPrototypeOf(element);
+	const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+	if (valueSetter && valueSetter !== prototypeValueSetter) prototypeValueSetter?.call(element, value);
+	else valueSetter?.call(element, value);
+}
+function _applyTransformers(transformers, value, filter = "blur") {
+	return transformers.reduce((value, transformer) => {
+		if (typeof transformer === "function") {
+			if (filter === "blur" || filter === "all") return transformer(value);
+			return value;
+		}
+		if ((transformer.options?.trigger ?? "blur") !== filter && filter !== "all") return value;
+		if (transformer.options?.if === void 0 || transformer.options.if) return transformer.transformer(value);
+		return value;
+	}, value);
+}
+/**
+* Apply transformers to the value of the input element. A transformer is a function that
+* will be applied to the value of the input element modifying the value.
+*
+* @param transformers - An array of transformers. A transformer is an object with a
+* `transformer` property, which is a function that will be applied to the value of
+* the input element, and an optional `options` property. The `options` property can
+* have a `trigger` property, which is the event that triggers the transformer, and
+* an `if` property, which is a boolean that indicates if the transformer should be
+* applied.
+* @param children - The input element to apply the transformers to as children
+*
+* @example
+* <ValueTransformer transformers={[
+*   {
+*     transformer: (value) => value.toUpperCase(),
+*     options: {
+*       trigger: "change",
+*     },
+*   },
+* ]}>
+*   <Input />
+* </ValueTransformer>
+*
+* @example
+* <ValueTransformer transformers={[
+*   {
+*     // trim the value on blur
+*     transformer: (value) => (value as string).trim(),
+*   },
+* ]}>
+*   <Input />
+* </ValueTransformer>
+*/
+function ValueTransformer({ transformers, children }) {
+	const setValue = useFormContext()?.setValue;
+	useEffect(() => {
+		const value = children.props.value;
+		const transformedValue = _applyTransformers(transformers, value, "all");
+		if (!deepEqual(transformedValue, value)) if (typeof setValue === "function") setValue(children.props.name, transformedValue);
+		else children.props.onChange?.({ target: { value: transformedValue } });
+	}, [transformers, setValue]);
+	return /* @__PURE__ */ React.cloneElement(children, {
+		...children.props,
+		onChange: (event) => {
+			const transformedValue = _applyTransformers(transformers, event.target.value, "change");
+			if (transformedValue !== event.target.value && setValue) {
+				setValue(children.props.name, transformedValue);
+				setNativeValue(event.target, transformedValue);
+			}
+			children.props.onChange?.(event);
+		},
+		onBlur: (event) => {
+			children.props.onBlur?.(event);
+			const target = event.target;
+			const transformedValue = _applyTransformers(transformers, target.value, "blur");
+			if (!deepEqual(transformedValue, target.value)) {
+				setNativeValue(target, transformedValue);
+				const changeEvent = new Event("change", { bubbles: true });
+				target.dispatchEvent(changeEvent);
+			}
+		},
+		onKeyDown: (event) => {
+			children.props.onKeyDown?.(event);
+			if (event.key === "Enter") {
+				const target = event.target;
+				const transformedValue = _applyTransformers(transformers, target.value, "keyDown");
+				if (!deepEqual(transformedValue, target.value)) {
+					setNativeValue(target, transformedValue);
+					const changeEvent = new Event("change", { bubbles: true });
+					target.dispatchEvent(changeEvent);
+				}
+			}
+		}
+	});
+}
+//#endregion
+export { ValueTransformer };
+
+//# sourceMappingURL=value-transformer.js.map

package/dist/ui/components/value-transformer/value-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-transformer.js","names":["deepEqual","React","useEffect","useFormContext","setNativeValue","element","value","valueSetter","Object","getOwnPropertyDescriptor","set","prototype","getPrototypeOf","prototypeValueSetter","call","_applyTransformers","transformers","filter","reduce","transformer","options","trigger","if","undefined","ValueTransformer","children","formContext","setValue","props","transformedValue","name","onChange","target","cloneElement","event","onBlur","changeEvent","Event","bubbles","dispatchEvent","onKeyDown","key"],"sources":["../../../../src/ui/components/value-transformer/value-transformer.tsx"],"sourcesContent":["import type {\n  TransformerTrigger,\n  TransformerType,\n  ValueTransformerProps,\n} from \"#design-system\";\nimport { deepEqual } from \"#design-system/ui/lib\";\nimport React, { useEffect } from \"react\";\nimport { useFormContext } from \"react-hook-form\";\n\n// Workaround to set the value of an input element\n// following react core team recommendation\n// https://github.com/facebook/react/issues/10135\nfunction setNativeValue(element: HTMLInputElement, value: any) {\n  const valueSetter = Object.getOwnPropertyDescriptor(element, \"value\")?.set;\n  const prototype = Object.getPrototypeOf(element) as HTMLInputElement;\n  const prototypeValueSetter = Object.getOwnPropertyDescriptor(\n    prototype,\n    \"value\",\n  )?.set;\n\n  if (valueSetter && valueSetter !== prototypeValueSetter) {\n    prototypeValueSetter?.call(element, value);\n  } else {\n    valueSetter?.call(element, value);\n  }\n}\n\n// apply transformers to the value\nfunction _applyTransformers(\n  transformers: TransformerType,\n  value: unknown,\n  filter: TransformerTrigger | \"all\" = \"blur\",\n) {\n  return transformers.reduce<unknown>((value, transformer) => {\n    if (typeof transformer === \"function\") {\n      if (filter === \"blur\" || filter === \"all\") {\n        // array of transformers are only applied on blur\n        return transformer(value);\n      }\n      return value;\n    }\n\n    // it is a transformer object\n    if (\n      (transformer.options?.trigger ?? \"blur\") !== filter &&\n      filter !== \"all\"\n    ) {\n      return value;\n    }\n    // if no set, we assume true\n    if (transformer.options?.if === undefined || transformer.options.if) {\n      return transformer.transformer(value);\n    }\n    return value;\n  }, value);\n}\n\n/**\n * Apply transformers to the value of the input element. A transformer is a function that\n * will be applied to the value of the input element modifying the value.\n *\n * @param transformers - An array of transformers. A transformer is an object with a\n * `transformer` property, which is a function that will be applied to the value of\n * the input element, and an optional `options` property. The `options` property can\n * have a `trigger` property, which is the event that triggers the transformer, and\n * an `if` property, which is a boolean that indicates if the transformer should be\n * applied.\n * @param children - The input element to apply the transformers to as children\n *\n * @example\n * <ValueTransformer transformers={[\n *   {\n *     transformer: (value) => value.toUpperCase(),\n *     options: {\n *       trigger: \"change\",\n *     },\n *   },\n * ]}>\n *   <Input />\n * </ValueTransformer>\n *\n * @example\n * <ValueTransformer transformers={[\n *   {\n *     // trim the value on blur\n *     transformer: (value) => (value as string).trim(),\n *   },\n * ]}>\n *   <Input />\n * </ValueTransformer>\n */\nexport function ValueTransformer({\n  transformers,\n  children,\n}: ValueTransformerProps) {\n  const formContext = useFormContext();\n  const setValue = formContext?.setValue;\n\n  useEffect(() => {\n    // apply all the transformers on mount to prevent untransformed values\n    // if the field is not touched by the user\n    const value = (children.props as { value: unknown }).value;\n    const transformedValue = _applyTransformers(transformers, value, \"all\");\n\n    if (!deepEqual(transformedValue, value)) {\n      if (typeof setValue === \"function\") {\n        setValue((children.props as { name: string }).name, transformedValue);\n      } else {\n        // if setValue is not available, then we're not inside a form context\n        // so we need to update the value using onChange if available\n        (children.props as React.HTMLAttributes<HTMLInputElement>).onChange?.({\n          target: { value: transformedValue },\n        } as React.ChangeEvent<HTMLInputElement>);\n      }\n    }\n  }, [transformers, setValue]);\n\n  return React.cloneElement(children, {\n    // @ts-expect-error - React.HTMLAttributes is not typed\n    ...children.props,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      // apply transformers on change\n      const transformedValue = _applyTransformers(\n        transformers,\n        event.target.value,\n        \"change\",\n      );\n\n      if (transformedValue !== event.target.value && setValue) {\n        setValue((children.props as { name: string }).name, transformedValue);\n        setNativeValue(event.target, transformedValue);\n      }\n\n      // call the original onChange\n      (children.props as React.HTMLAttributes<HTMLInputElement>).onChange?.(\n        event,\n      );\n    },\n    // apply transformers on blur\n    onBlur: (event: React.FocusEvent<HTMLInputElement>) => {\n      // call the original onBlur\n      (children.props as React.HTMLAttributes<HTMLInputElement>).onBlur?.(\n        event,\n      );\n\n      // apply the transformers\n      const target = event.target;\n      const transformedValue = _applyTransformers(\n        transformers,\n        target.value,\n        \"blur\",\n      );\n\n      if (!deepEqual(transformedValue, target.value)) {\n        // only dispatch change if the value has changed\n        setNativeValue(target, transformedValue);\n        const changeEvent = new Event(\"change\", { bubbles: true });\n        target.dispatchEvent(changeEvent);\n      }\n    },\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // call the original onKeyDown\n      (children.props as React.HTMLAttributes<HTMLInputElement>).onKeyDown?.(\n        event,\n      );\n\n      // apply the transformers\n      if (event.key === \"Enter\") {\n        const target = event.target as HTMLInputElement;\n        const transformedValue = _applyTransformers(\n          transformers,\n          target.value,\n          \"keyDown\",\n        );\n\n        // only dispatch change if the value has changed\n        if (!deepEqual(transformedValue, target.value)) {\n          setNativeValue(target, transformedValue);\n          const changeEvent = new Event(\"change\", { bubbles: true });\n          target.dispatchEvent(changeEvent);\n        }\n      }\n    },\n  });\n}\n"],"mappings":";;;;AAYA,SAASI,eAAeC,SAA2BC,OAAY;CAC7D,MAAMC,cAAcC,OAAOC,yBAAyBJ,SAAS,QAAQ,EAAEK;CACvE,MAAMC,YAAYH,OAAOI,eAAeP,QAA4B;CACpE,MAAMQ,uBAAuBL,OAAOC,yBAClCE,WACA,QACD,EAAED;AAEH,KAAIH,eAAeA,gBAAgBM,qBACjCA,uBAAsBC,KAAKT,SAASC,MAAM;KAE1CC,cAAaO,KAAKT,SAASC,MAAM;;AAKrC,SAASS,mBACPC,cACAV,OACAW,SAAqC,QACrC;AACA,QAAOD,aAAaE,QAAiBZ,OAAOa,gBAAgB;AAC1D,MAAI,OAAOA,gBAAgB,YAAY;AACrC,OAAIF,WAAW,UAAUA,WAAW,MAElC,QAAOE,YAAYb,MAAM;AAE3B,UAAOA;;AAIT,OACGa,YAAYC,SAASC,WAAW,YAAYJ,UAC7CA,WAAW,MAEX,QAAOX;AAGT,MAAIa,YAAYC,SAASE,OAAOC,KAAAA,KAAaJ,YAAYC,QAAQE,GAC/D,QAAOH,YAAYA,YAAYb,MAAM;AAEvC,SAAOA;IACNA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCX,SAAgBkB,iBAAiB,EAC/BR,cACAS,YACwB;CAExB,MAAME,WADcxB,gBAAgB,EACNwB;AAE9BzB,iBAAgB;EAGd,MAAMI,QAASmB,SAASG,MAA6BtB;EACrD,MAAMuB,mBAAmBd,mBAAmBC,cAAcV,OAAO,MAAM;AAEvE,MAAI,CAACN,UAAU6B,kBAAkBvB,MAAM,CACrC,KAAI,OAAOqB,aAAa,WACtBA,UAAUF,SAASG,MAA2BE,MAAMD,iBAAiB;MAIpEJ,UAASG,MAAiDG,WAAW,EACpEC,QAAQ,EAAE1B,OAAOuB,kBAAiB,EACI,CAAC;IAG5C,CAACb,cAAcW,SAAS,CAAC;AAE5B,QAAO1B,sBAAMgC,aAAaR,UAAU;EAElC,GAAGA,SAASG;EACZG,WAAWG,UAA+C;GAExD,MAAML,mBAAmBd,mBACvBC,cACAkB,MAAMF,OAAO1B,OACb,SACD;AAED,OAAIuB,qBAAqBK,MAAMF,OAAO1B,SAASqB,UAAU;AACvDA,aAAUF,SAASG,MAA2BE,MAAMD,iBAAiB;AACrEzB,mBAAe8B,MAAMF,QAAQH,iBAAiB;;AAI/CJ,YAASG,MAAiDG,WACzDG,MACD;;EAGHC,SAASD,UAA8C;AAEpDT,YAASG,MAAiDO,SACzDD,MACD;GAGD,MAAMF,SAASE,MAAMF;GACrB,MAAMH,mBAAmBd,mBACvBC,cACAgB,OAAO1B,OACP,OACD;AAED,OAAI,CAACN,UAAU6B,kBAAkBG,OAAO1B,MAAM,EAAE;AAE9CF,mBAAe4B,QAAQH,iBAAiB;IACxC,MAAMO,cAAc,IAAIC,MAAM,UAAU,EAAEC,SAAS,MAAM,CAAC;AAC1DN,WAAOO,cAAcH,YAAY;;;EAGrCI,YAAYN,UAAiD;AAE1DT,YAASG,MAAiDY,YACzDN,MACD;AAGD,OAAIA,MAAMO,QAAQ,SAAS;IACzB,MAAMT,SAASE,MAAMF;IACrB,MAAMH,mBAAmBd,mBACvBC,cACAgB,OAAO1B,OACP,UACD;AAGD,QAAI,CAACN,UAAU6B,kBAAkBG,OAAO1B,MAAM,EAAE;AAC9CF,oBAAe4B,QAAQH,iBAAiB;KACxC,MAAMO,cAAc,IAAIC,MAAM,UAAU,EAAEC,SAAS,MAAM,CAAC;AAC1DN,YAAOO,cAAcH,YAAY;;;;EAIxC,CAAC"}

package/dist/ui/components/with-field-validation/with-field-validation.d.ts

@@ -0,0 +1,2 @@
+import { n as withFieldValidation, t as ValidationOptions } from "../../../with-field-validation-YcGrdIrv.js";
+export { ValidationOptions, withFieldValidation };