@powerhousedao/design-system 6.0.0-dev.19 → 6.0.0-dev.191

package/dist/types-bVze9lWE.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/ui/components/search-autocomplete/types.d.ts
+interface SearchAutocompleteOption {
+  value: string;
+  label: string;
+  version?: string;
+  description?: string;
+  meta?: string;
+  disabled?: boolean;
+  disabledLabel?: string;
+}
+interface SearchAutocompleteProps {
+  fetchOptions?: (query: string) => Promise<SearchAutocompleteOption[]>;
+  onSelect: (value: string) => void | Promise<void>;
+  selectLabel?: string;
+  selectingContent?: ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+  renderOption?: (option: SearchAutocompleteOption) => ReactNode;
+  debounceMs?: number;
+}
+//#endregion
+export { SearchAutocompleteProps as n, SearchAutocompleteOption as t };
+//# sourceMappingURL=types-bVze9lWE.d.ts.map

package/dist/types-bVze9lWE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-bVze9lWE.d.ts","names":[],"sources":["../src/ui/components/search-autocomplete/types.ts"],"mappings":";;;UAEiB,wBAAA;EACf,KAAA;EACA,KAAA;EACA,OAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,aAAA;AAAA;AAAA,UAGe,uBAAA;EACf,YAAA,IAAgB,KAAA,aAAkB,OAAA,CAAQ,wBAAA;EAC1C,QAAA,GAAW,KAAA,oBAAyB,OAAA;EACpC,WAAA;EACA,gBAAA,GAAmB,SAAA;EACnB,WAAA;EACA,QAAA;EACA,OAAA;EACA,SAAA;EACA,YAAA,IAAgB,MAAA,EAAQ,wBAAA,KAA6B,SAAA;EACrD,UAAA;AAAA"}

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

@@ -0,0 +1,2 @@
+import { n as ButtonProps, r as buttonVariants, t as Button } from "../../../button-nudlf0Je.js";
+export { Button, ButtonProps, buttonVariants };

package/dist/ui/components/button/button.js

@@ -0,0 +1,28 @@
+import { t as cn } from "../../../src-BwsYkPPG.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/ui/components/button/button.tsx
+const buttonVariants = cva(cn("inline-flex items-center justify-center gap-2", "whitespace-nowrap rounded-md text-sm font-medium", "transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"), {
+	variants: { variant: {
+		default: "",
+		outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+		ghost: "hover:bg-accent hover:text-accent-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const Button = forwardRef(({ variant, className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+//#endregion
+export { Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../../../src/ui/components/button/button.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\n\nconst buttonVariants = cva(\n  cn(\n    \"inline-flex items-center justify-center gap-2\",\n    \"whitespace-nowrap rounded-md text-sm font-medium\",\n    \"transition-colors\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n    \"disabled:pointer-events-none\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ),\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ variant, className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;AAMA,MAAM,iBAAiB,IACrB,GACE,iDACA,oDACA,qBACA,+EACA,gCACA,8DACD,EACD;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SACE;EACF,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AASD,MAAM,SAAS,YACZ,EAAE,SAAS,WAAW,UAAU,OAAO,GAAG,SAAS,QAAQ;AAE1D,QACE,oBAFW,UAAU,OAAO,UAE5B;EACE,WAAW,GAAG,eAAe;GAAE;GAAS;GAAW,CAAC,CAAC;EAChD;EACL,GAAI;EACJ,CAAA;EAGP"}

package/dist/ui/components/character-counter/character-counter.d.ts

@@ -0,0 +1,2 @@
+import { n as CharacterCounterProps, t as CharacterCounter } from "../../../character-counter-DGG-KjTk.js";
+export { CharacterCounter, CharacterCounterProps };

package/dist/ui/components/character-counter/character-counter.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/character-counter/character-counter.tsx
+const counterVariants = {
+	normal: "text-gray-500",
+	warning: "text-yellow-900",
+	error: "text-red-900"
+};
+const maxLengthVariants = {
+	normal: "text-gray-300 dark:text-gray-700",
+	warning: "text-yellow-400 dark:text-[#644E00]",
+	error: "text-red-400 dark:text-[#7D3D37]"
+};
+const CharacterCounter = ({ maxLength, value }) => {
+	const remaining = value.length / maxLength * 100;
+	const state = remaining < 90 ? "normal" : remaining <= 100 ? "warning" : "error";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center text-[10px] leading-3",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: counterVariants[state],
+			children: value.length
+		}), /* @__PURE__ */ jsxs("span", {
+			className: maxLengthVariants[state],
+			children: ["/", maxLength]
+		})]
+	});
+};
+//#endregion
+export { CharacterCounter };
+
+//# sourceMappingURL=character-counter.js.map

package/dist/ui/components/character-counter/character-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"character-counter.js","names":[],"sources":["../../../../src/ui/components/character-counter/character-counter.tsx"],"sourcesContent":["export interface CharacterCounterProps {\n  maxLength: number;\n  value: string;\n}\n\nconst counterVariants = {\n  normal: \"text-gray-500\",\n  warning: \"text-yellow-900\",\n  error: \"text-red-900\",\n};\n\nconst maxLengthVariants = {\n  normal: \"text-gray-300 dark:text-gray-700\",\n  warning: \"text-yellow-400 dark:text-[#644E00]\",\n  error: \"text-red-400 dark:text-[#7D3D37]\",\n};\n\nexport const CharacterCounter: React.FC<CharacterCounterProps> = ({\n  maxLength,\n  value,\n}) => {\n  const remaining = (value.length / maxLength) * 100;\n  const state =\n    remaining < 90 ? \"normal\" : remaining <= 100 ? \"warning\" : \"error\";\n\n  return (\n    <div className=\"flex items-center text-[10px] leading-3\">\n      <span className={counterVariants[state]}>{value.length}</span>\n      <span className={maxLengthVariants[state]}>/{maxLength}</span>\n    </div>\n  );\n};\n"],"mappings":";;AAKA,MAAM,kBAAkB;CACtB,QAAQ;CACR,SAAS;CACT,OAAO;CACR;AAED,MAAM,oBAAoB;CACxB,QAAQ;CACR,SAAS;CACT,OAAO;CACR;AAED,MAAa,oBAAqD,EAChE,WACA,YACI;CACJ,MAAM,YAAa,MAAM,SAAS,YAAa;CAC/C,MAAM,QACJ,YAAY,KAAK,WAAW,aAAa,MAAM,YAAY;AAE7D,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAAM,WAAW,gBAAgB;aAAS,MAAM;GAAc,CAAA,EAC9D,qBAAC,QAAD;GAAM,WAAW,kBAAkB;aAAnC,CAA2C,KAAE,UAAiB;KAC1D"}

package/dist/ui/components/checkbox/checkbox-base.d.ts

@@ -0,0 +1,2 @@
+import { n as CheckboxValue, t as CheckboxBase } from "../../../checkbox-base-C0Sa2qHx.js";
+export { CheckboxBase, CheckboxValue };

package/dist/ui/components/checkbox/checkbox-base.js

@@ -0,0 +1,43 @@
+import { t as cn } from "../../../src-BwsYkPPG.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region src/ui/components/checkbox/checkbox-base.tsx
+const CheckboxBase = React$1.forwardRef(({ className, checked, invalid, ...props }, ref) => /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+	ref,
+	className: cn("peer size-4 shrink-0 rounded", "border-input border shadow-sm shadow-black/[.04]", "ring-offset-background transition-shadow", "focus-visible:border-ring focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-gray-700 disabled:data-[invalid=false]:data-[state=checked]:bg-gray-700 disabled:data-[invalid=false]:data-[state=indeterminate]:bg-gray-700 dark:disabled:data-[invalid=false]:data-[state=checked]:bg-gray-500 dark:disabled:data-[invalid=false]:data-[state=indeterminate]:bg-gray-500", "data-[state]:border-gray-700 dark:data-[state]:border-gray-500", "data-[state=checked]:bg-gray-900 data-[state=indeterminate]:bg-gray-900 dark:data-[state=checked]:bg-gray-400 dark:data-[state=indeterminate]:bg-gray-400", "data-[state=checked]:text-slate-50 data-[state=indeterminate]:text-slate-50 dark:data-[state=checked]:text-gray-900 dark:data-[state=indeterminate]:text-gray-900", !props.disabled && ["group-hover:border-gray-900 data-[state=checked]:group-hover:bg-gray-900 data-[state=indeterminate]:group-hover:bg-gray-900", "dark:group-hover:border-slate-50 dark:data-[state=checked]:group-hover:bg-slate-50 dark:data-[state=indeterminate]:group-hover:bg-slate-50"], "data-[invalid=true]:data-[state]:!border-red-800 data-[invalid=true]:data-[state=checked]:!bg-red-800 data-[invalid=true]:data-[state=indeterminate]:!bg-red-800", "dark:data-[invalid=true]:data-[state]:!border-red-800 dark:data-[invalid=true]:data-[state=checked]:!bg-red-800 dark:data-[invalid=true]:data-[state=indeterminate]:!bg-red-800", "data-[invalid=true]:group-hover:!border-red-900 data-[invalid=true]:data-[state=checked]:group-hover:!bg-red-900 data-[invalid=true]:data-[state=indeterminate]:group-hover:!bg-red-900", className),
+	checked,
+	"data-invalid": invalid,
+	...props,
+	children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+		className: "flex items-center justify-center text-current",
+		children: checked === "indeterminate" ? /* @__PURE__ */ jsx("svg", {
+			width: "9",
+			height: "9",
+			viewBox: "0 0 9 9",
+			fill: "currentcolor",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
+			})
+		}) : checked ? /* @__PURE__ */ jsx("svg", {
+			width: "9",
+			height: "9",
+			viewBox: "0 0 9 9",
+			fill: "currentcolor",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
+			})
+		}) : null
+	})
+}));
+CheckboxBase.displayName = "CheckboxBase";
+//#endregion
+export { CheckboxBase };
+
+//# sourceMappingURL=checkbox-base.js.map

package/dist/ui/components/checkbox/checkbox-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-base.js","names":["React"],"sources":["../../../../src/ui/components/checkbox/checkbox-base.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\n\ntype CheckboxValue = boolean | \"indeterminate\";\n\ntype CheckboxBaseProps = React.ComponentPropsWithoutRef<\n  typeof CheckboxPrimitive.Root\n> & {\n  invalid?: boolean;\n};\n\nconst CheckboxBase = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxBaseProps\n>(({ className, checked, invalid, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      // Base styles\n      \"peer size-4 shrink-0 rounded\",\n      // Border & Shadow\n      \"border-input border shadow-sm shadow-black/[.04]\",\n      // Background & Ring\n      \"ring-offset-background transition-shadow\",\n      // Focus styles\n      \"focus-visible:border-ring focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n      // Disabled state\n      \"disabled:cursor-not-allowed disabled:border-gray-700 disabled:data-[invalid=false]:data-[state=checked]:bg-gray-700 disabled:data-[invalid=false]:data-[state=indeterminate]:bg-gray-700 dark:disabled:data-[invalid=false]:data-[state=checked]:bg-gray-500 dark:disabled:data-[invalid=false]:data-[state=indeterminate]:bg-gray-500\",\n      // Checked & Indeterminate states\n      \"data-[state]:border-gray-700 dark:data-[state]:border-gray-500\",\n      \"data-[state=checked]:bg-gray-900 data-[state=indeterminate]:bg-gray-900 dark:data-[state=checked]:bg-gray-400 dark:data-[state=indeterminate]:bg-gray-400\",\n      \"data-[state=checked]:text-slate-50 data-[state=indeterminate]:text-slate-50 dark:data-[state=checked]:text-gray-900 dark:data-[state=indeterminate]:text-gray-900\",\n      // hover states\n      !props.disabled && [\n        \"group-hover:border-gray-900 data-[state=checked]:group-hover:bg-gray-900 data-[state=indeterminate]:group-hover:bg-gray-900\",\n        \"dark:group-hover:border-slate-50 dark:data-[state=checked]:group-hover:bg-slate-50 dark:data-[state=indeterminate]:group-hover:bg-slate-50\",\n      ],\n      // Error state\n      \"data-[invalid=true]:data-[state]:!border-red-800 data-[invalid=true]:data-[state=checked]:!bg-red-800 data-[invalid=true]:data-[state=indeterminate]:!bg-red-800\",\n      \"dark:data-[invalid=true]:data-[state]:!border-red-800 dark:data-[invalid=true]:data-[state=checked]:!bg-red-800 dark:data-[invalid=true]:data-[state=indeterminate]:!bg-red-800\",\n      // error hover states\n      \"data-[invalid=true]:group-hover:!border-red-900 data-[invalid=true]:data-[state=checked]:group-hover:!bg-red-900 data-[invalid=true]:data-[state=indeterminate]:group-hover:!bg-red-900\",\n      className,\n    )}\n    checked={checked}\n    data-invalid={invalid}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n      {checked === \"indeterminate\" ? (\n        <svg\n          width=\"9\"\n          height=\"9\"\n          viewBox=\"0 0 9 9\"\n          fill=\"currentcolor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z\"\n          />\n        </svg>\n      ) : checked ? (\n        <svg\n          width=\"9\"\n          height=\"9\"\n          viewBox=\"0 0 9 9\"\n          fill=\"currentcolor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z\"\n          />\n        </svg>\n      ) : null}\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\n\nCheckboxBase.displayName = \"CheckboxBase\";\n\nexport { CheckboxBase, type CheckboxValue };\n"],"mappings":";;;;;AAYA,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,SAAS,SAAS,GAAG,SAAS,QAC5C,oBAAC,kBAAkB,MAAnB;CACO;CACL,WAAW,GAET,gCAEA,oDAEA,4CAEA,iIAEA,0UAEA,kEACA,6JACA,qKAEA,CAAC,MAAM,YAAY,CACjB,+HACA,6IACD,EAED,oKACA,mLAEA,2LACA,UACD;CACQ;CACT,gBAAc;CACd,GAAI;WAEJ,oBAAC,kBAAkB,WAAnB;EAA6B,WAAU;YACpC,YAAY,kBACX,oBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;aAEN,oBAAC,QAAD;IACE,UAAS;IACT,UAAS;IACT,GAAE;IACF,CAAA;GACE,CAAA,GACJ,UACF,oBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;aAEN,oBAAC,QAAD;IACE,UAAS;IACT,UAAS;IACT,GAAE;IACF,CAAA;GACE,CAAA,GACJ;EACwB,CAAA;CACP,CAAA,CACzB;AAEF,aAAa,cAAc"}

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

@@ -0,0 +1,2 @@
+import { n as CheckboxProps, t as Checkbox } from "../../../checkbox-Bv_YDLcz.js";
+export { Checkbox, CheckboxProps };

package/dist/ui/components/checkbox/checkbox.js

@@ -0,0 +1,59 @@
+import { t as cn } from "../../../src-BwsYkPPG.js";
+import { CheckboxBase } from "./checkbox-base.js";
+import { FormLabel } from "../form-label/form-label.js";
+import { FormMessageList } from "../form-message/message-list.js";
+import React, { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/checkbox/checkbox.tsx
+const Checkbox = React.forwardRef(({ id: idProp, name, label, value, defaultValue, disabled, required, description, errors, warnings, onChange, className, ...props }, ref) => {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const hasError = !!errors?.length;
+	const castValue = (value) => {
+		if (value === "true") return true;
+		if (value === "false") return false;
+		return value;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("group flex items-center space-x-2", className),
+				children: [/* @__PURE__ */ jsx(CheckboxBase, {
+					id,
+					name,
+					checked: castValue(value ?? defaultValue),
+					disabled,
+					onCheckedChange: onChange,
+					required,
+					invalid: hasError,
+					"aria-invalid": hasError,
+					ref,
+					...props
+				}), /* @__PURE__ */ jsx(FormLabel, {
+					htmlFor: id,
+					required,
+					disabled,
+					hasError,
+					description,
+					className: cn(!disabled && "group-hover:cursor-pointer"),
+					inline: true,
+					children: label
+				})]
+			}),
+			warnings && /* @__PURE__ */ jsx(FormMessageList, {
+				type: "warning",
+				messages: warnings
+			}),
+			errors && /* @__PURE__ */ jsx(FormMessageList, {
+				type: "error",
+				messages: errors
+			})
+		]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../src/ui/components/checkbox/checkbox.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport React, { useId } from \"react\";\nimport type { InputBaseProps } from \"../../types.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport type { CheckboxValue } from \"./checkbox-base.js\";\nimport { CheckboxBase } from \"./checkbox-base.js\";\n\ntype CheckboxBaseProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof InputBaseProps<CheckboxValue> | \"onChange\"\n>;\n\nexport interface CheckboxProps\n  extends CheckboxBaseProps, InputBaseProps<CheckboxValue> {\n  onChange?: ((checked: CheckboxValue) => void) | ((checked: boolean) => void);\n}\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      id: idProp,\n      name,\n      label,\n      value,\n      defaultValue,\n      disabled,\n      required,\n      description,\n      errors,\n      warnings,\n      onChange,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const hasError = !!errors?.length;\n\n    const castValue = (value: unknown) => {\n      if (value === \"true\") return true;\n      if (value === \"false\") return false;\n      return value;\n    };\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\")}>\n        <div className={cn(\"group flex items-center space-x-2\", className)}>\n          <CheckboxBase\n            id={id}\n            name={name}\n            checked={castValue(value ?? defaultValue) as CheckboxValue}\n            disabled={disabled}\n            onCheckedChange={onChange}\n            required={required}\n            invalid={hasError}\n            aria-invalid={hasError}\n            ref={ref}\n            {...props}\n          />\n          <FormLabel\n            htmlFor={id}\n            required={required}\n            disabled={disabled}\n            hasError={hasError}\n            description={description}\n            className={cn(!disabled && \"group-hover:cursor-pointer\")}\n            inline\n          >\n            {label}\n          </FormLabel>\n        </div>\n        {warnings && <FormMessageList type=\"warning\" messages={warnings} />}\n        {errors && <FormMessageList type=\"error\" messages={errors} />}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAkBA,MAAM,WAAW,MAAM,YAEnB,EACE,IAAI,QACJ,MACA,OACA,OACA,cACA,UACA,UACA,aACA,QACA,UACA,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,UAAU;CACrB,MAAM,WAAW,CAAC,CAAC,QAAQ;CAE3B,MAAM,aAAa,UAAmB;AACpC,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,UAAU,QAAS,QAAO;AAC9B,SAAO;;AAGT,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,sBAAsB;YAAzC;GACE,qBAAC,OAAD;IAAK,WAAW,GAAG,qCAAqC,UAAU;cAAlE,CACE,oBAAC,cAAD;KACM;KACE;KACN,SAAS,UAAU,SAAS,aAAa;KAC/B;KACV,iBAAiB;KACP;KACV,SAAS;KACT,gBAAc;KACT;KACL,GAAI;KACJ,CAAA,EACF,oBAAC,WAAD;KACE,SAAS;KACC;KACA;KACA;KACG;KACb,WAAW,GAAG,CAAC,YAAY,6BAA6B;KACxD,QAAA;eAEC;KACS,CAAA,CACR;;GACL,YAAY,oBAAC,iBAAD;IAAiB,MAAK;IAAU,UAAU;IAAY,CAAA;GAClE,UAAU,oBAAC,iBAAD;IAAiB,MAAK;IAAQ,UAAU;IAAU,CAAA;GACzD;;EAGX;AAED,SAAS,cAAc"}

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

@@ -0,0 +1,2 @@
+import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../../../command-Cl1OUbPV.js";
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading };

package/dist/ui/components/command/command.js

@@ -0,0 +1,57 @@
+import { h as Icon, t as cn } from "../../../src-BwsYkPPG.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+//#region src/ui/components/command/command.tsx
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+	ref,
+	className: cn("flex size-full flex-col rounded-md [&_[cmdk-label]]:hidden", className),
+	...props
+}));
+Command.displayName = Command$1.displayName;
+const CommandInput = React.forwardRef(({ wrapperClassName, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	className: cn("group relative flex items-center border-b", "border-b-gray-300 dark:border-b-gray-900", "hover:border-b-gray-300 dark:hover:border-b-gray-800", "hover:bg-gray-100 dark:hover:bg-gray-900", "focus-within:border-b-gray-300 dark:focus-within:border-b-gray-800", "focus-within:bg-gray-100 dark:focus-within:bg-gray-900", wrapperClassName),
+	"cmdk-input-wrapper": "",
+	children: [/* @__PURE__ */ jsx(Icon, {
+		name: "Search",
+		size: 16,
+		className: cn("pointer-events-none absolute left-2 top-3.5 text-gray-500 dark:text-gray-700", "group-hover:text-gray-700 dark:group-hover:text-gray-500", "group-focus-within:!text-gray-900 dark:group-focus-within:!text-gray-50")
+	}), /* @__PURE__ */ jsx(Command$1.Input, {
+		ref,
+		className: cn("flex w-full bg-transparent pb-2 pl-8 pr-3 pt-3 text-[14px] font-normal leading-5 outline-none", "placeholder:text-gray-500 dark:placeholder:text-gray-700", "group-hover:placeholder:text-gray-700 dark:group-hover:placeholder:text-gray-500", "group-focus-within:placeholder:!text-gray-700 dark:group-focus-within:placeholder:!text-gray-300", "disabled:cursor-not-allowed", className),
+		...props
+	})]
+}));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+	ref,
+	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", "focus:outline-none", "scrollbar-thin scrollbar-gutter-stable", "scrollbar-track-transparent", "scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-300", "dark:scrollbar-thumb-charcoal-700 dark:hover:scrollbar-thumb-charcoal-700", "scrollbar-thumb-rounded-md", className),
+	...props
+}));
+CommandList.displayName = Command$1.List.displayName;
+const CommandLoading = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Loading, {
+	ref,
+	...props
+}));
+CommandLoading.displayName = Command$1.Loading.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+	ref,
+	...props
+}));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+	ref,
+	className: cn("overflow-hidden px-0.5 py-1", "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+	...props
+}));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+	ref,
+	className: cn("relative flex select-none items-center justify-between", "h-8 gap-2 rounded-md py-1.5 pl-1.5 pr-2.5", "text-[14px] leading-4 outline-none", "border-y-2 border-white dark:border-slate-600", "data-[disabled=true]:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+	...props
+}));
+CommandItem.displayName = Command$1.Item.displayName;
+//#endregion
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading };
+
+//# sourceMappingURL=command.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":["CommandPrimitive"],"sources":["../../../../src/ui/components/command/command.tsx"],"sourcesContent":["import { cn, Icon } from \"#design-system\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport React from \"react\";\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex size-full flex-col rounded-md [&_[cmdk-label]]:hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n    wrapperClassName?: string;\n  }\n>(({ wrapperClassName, className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"group relative flex items-center border-b\",\n      \"border-b-gray-300 dark:border-b-gray-900\",\n      \"hover:border-b-gray-300 dark:hover:border-b-gray-800\",\n      \"hover:bg-gray-100 dark:hover:bg-gray-900\",\n      \"focus-within:border-b-gray-300 dark:focus-within:border-b-gray-800\",\n      \"focus-within:bg-gray-100 dark:focus-within:bg-gray-900\",\n      wrapperClassName,\n    )}\n    cmdk-input-wrapper=\"\"\n  >\n    <Icon\n      name=\"Search\"\n      size={16}\n      className={cn(\n        \"pointer-events-none absolute left-2 top-3.5 text-gray-500 dark:text-gray-700\",\n        \"group-hover:text-gray-700 dark:group-hover:text-gray-500\",\n        \"group-focus-within:!text-gray-900 dark:group-focus-within:!text-gray-50\",\n      )}\n    />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex w-full bg-transparent pb-2 pl-8 pr-3 pt-3 text-[14px] font-normal leading-5 outline-none\",\n        \"placeholder:text-gray-500 dark:placeholder:text-gray-700\",\n        \"group-hover:placeholder:text-gray-700 dark:group-hover:placeholder:text-gray-500\",\n        \"group-focus-within:placeholder:!text-gray-700 dark:group-focus-within:placeholder:!text-gray-300\",\n        \"disabled:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\n));\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\n      \"max-h-[300px] overflow-y-auto overflow-x-hidden\",\n      \"focus:outline-none\",\n      \"scrollbar-thin scrollbar-gutter-stable\",\n      \"scrollbar-track-transparent\",\n      \"scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-300\",\n      \"dark:scrollbar-thumb-charcoal-700 dark:hover:scrollbar-thumb-charcoal-700\",\n      \"scrollbar-thumb-rounded-md\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>\n>((props, ref) => <CommandPrimitive.Loading ref={ref} {...props} />);\nCommandLoading.displayName = CommandPrimitive.Loading.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} {...props} />);\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden px-0.5 py-1\",\n      \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex select-none items-center justify-between\",\n      \"h-8 gap-2 rounded-md py-1.5 pl-1.5 pr-2.5\",\n      \"text-[14px] leading-4 outline-none\",\n      \"border-y-2 border-white dark:border-slate-600\",\n      \"data-[disabled=true]:pointer-events-none\",\n      \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandLoading,\n};\n"],"mappings":";;;;;AAIA,MAAM,UAAU,MAAM,YAGnB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA,WAAD;CACO;CACL,WAAW,GACT,8DACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,QAAQ,cAAcA,UAAiB;AAEvC,MAAM,eAAe,MAAM,YAKxB,EAAE,kBAAkB,WAAW,GAAG,SAAS,QAC5C,qBAAC,OAAD;CACE,WAAW,GACT,6CACA,4CACA,wDACA,4CACA,sEACA,0DACA,iBACD;CACD,sBAAmB;WAVrB,CAYE,oBAAC,MAAD;EACE,MAAK;EACL,MAAM;EACN,WAAW,GACT,gFACA,4DACA,0EACD;EACD,CAAA,EACF,oBAACA,UAAiB,OAAlB;EACO;EACL,WAAW,GACT,iGACA,4DACA,oFACA,oGACA,+BACA,UACD;EACD,GAAI;EACJ,CAAA,CACE;GACN;AACF,aAAa,cAAcA,UAAiB,MAAM;AAElD,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA,UAAiB,MAAlB;CACO;CACL,WAAW,GACT,mDACA,sBACA,0CACA,+BACA,2DACA,6EACA,8BACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,YAAY,cAAcA,UAAiB,KAAK;AAEhD,MAAM,iBAAiB,MAAM,YAG1B,OAAO,QAAQ,oBAACA,UAAiB,SAAlB;CAA+B;CAAK,GAAI;CAAS,CAAA,CAAC;AACpE,eAAe,cAAcA,UAAiB,QAAQ;AAEtD,MAAM,eAAe,MAAM,YAGxB,OAAO,QAAQ,oBAACA,UAAiB,OAAlB;CAA6B;CAAK,GAAI;CAAS,CAAA,CAAC;AAClE,aAAa,cAAcA,UAAiB,MAAM;AAElD,MAAM,eAAe,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA,UAAiB,OAAlB;CACO;CACL,WAAW,GACT,+BACA,uIACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,aAAa,cAAcA,UAAiB,MAAM;AAElD,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA,UAAiB,MAAlB;CACO;CACL,WAAW,GACT,0DACA,6CACA,sCACA,iDACA,4CACA,+DACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,YAAY,cAAcA,UAAiB,KAAK"}

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

@@ -0,0 +1,8 @@
+import { o as DecoratorFunction, t as Decorator } from "../../index-S0ouSBFY.js";
+
+//#region src/ui/components/decorators.d.ts
+declare const withForm: Decorator;
+declare const withTimestampsAsISOStrings: DecoratorFunction<any>;
+//#endregion
+export { withForm, withTimestampsAsISOStrings };
+//# sourceMappingURL=decorators.d.ts.map

package/dist/ui/components/decorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.d.ts","names":[],"sources":["../../../src/ui/components/decorators.tsx"],"mappings":";;;cAyBa,QAAA,EAAU,SAAA;AAAA,cA0GV,0BAAA,EAA4B,iBAAA"}

package/dist/ui/components/decorators.js

@@ -0,0 +1,113 @@
+import { Button } from "./button/button.js";
+import { Checkbox } from "./checkbox/checkbox.js";
+import { Form } from "./form/form.js";
+import { useCallback, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+//#region src/ui/components/decorators.tsx
+function _isValidRegex(pattern) {
+	try {
+		new RegExp(pattern);
+		return true;
+	} catch {
+		return false;
+	}
+}
+const withForm = (Story, context) => {
+	const formRef = useRef(null);
+	const [showFormButtons, setShowFormButtons] = useState(false);
+	const [resetKey, setResetKey] = useState(0);
+	const checkboxId = useId();
+	const { viewMode, parameters } = context;
+	const isDocs = viewMode === "docs";
+	const formParameters = parameters.form;
+	const resetBehavior = formParameters?.resetBehavior ?? "reset";
+	const onReset = useCallback(() => {
+		if (resetBehavior === "unmount") setResetKey((prev) => prev + 1);
+		else {
+			const defaultValues = Object.fromEntries(Object.keys(formRef.current?.control._fields ?? {}).map((fieldName) => [fieldName, formParameters?.defaultValues?.[fieldName] ?? ""]));
+			formRef.current?.reset(defaultValues);
+		}
+	}, [formParameters, resetBehavior]);
+	const onSubmit = useCallback((data) => {
+		const serializedData = JSON.stringify(data, (key, value) => typeof value === "bigint" ? `BigInt(${value.toString()})` : value, 2);
+		setTimeout(() => {
+			alert(serializedData);
+		}, 300);
+	}, []);
+	const onShowFormButtonsChange = useCallback((checked) => {
+		setShowFormButtons(checked);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Form, {
+		ref: formRef,
+		onSubmit,
+		children: [/* @__PURE__ */ jsx(Story, { args: {
+			...context.args,
+			...Array.isArray(context.args.warnings) ? { warnings: context.args.warnings } : { warnings: void 0 },
+			...context.args.pattern !== void 0 ? _isValidRegex(context.args.pattern) ? { pattern: context.args.pattern } : { pattern: "" } : {}
+		} }), showFormButtons || isDocs ? /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				className: "mt-4 w-full",
+				color: "light",
+				type: "reset",
+				onClick: onReset,
+				children: "Reset"
+			}), /* @__PURE__ */ jsx(Button, {
+				className: "mt-4 w-full",
+				color: "dark",
+				type: "submit",
+				children: "Submit"
+			})]
+		}) : /* @__PURE__ */ jsx("input", {
+			type: "submit",
+			className: "hidden"
+		})]
+	}, resetKey), !isDocs && /* @__PURE__ */ jsx("div", {
+		className: "absolute bottom-5 right-5 z-50",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				id: checkboxId,
+				value: showFormButtons,
+				onChange: onShowFormButtonsChange
+			}), /* @__PURE__ */ jsx("label", {
+				className: "cursor-pointer dark:text-gray-400",
+				htmlFor: checkboxId,
+				children: "Show form buttons"
+			})]
+		})
+	})] });
+};
+const withTimestampsAsISOStrings = (Story, context) => {
+	const { args } = context;
+	const convertTimestampsToDates = (args) => {
+		const newArgs = { ...args };
+		Object.keys(newArgs).forEach((key) => {
+			const value = newArgs[key];
+			if ((key === "minDate" || key === "maxDate") && typeof value === "string") {
+				const timestamp = new Date(value).getTime();
+				if (!isNaN(timestamp)) {
+					const date = new Date(timestamp);
+					date.setHours(12, 0, 0, 0);
+					newArgs[key] = format(date, "dd-MMM-yyyy");
+				}
+			}
+			if (typeof value === "number" && value > 16094592e5) {
+				const date = new Date(value);
+				date.setHours(12, 0, 0, 0);
+				newArgs[key] = format(date, "dd-MMM-yyyy");
+			}
+		});
+		return newArgs;
+	};
+	const convertedArgs = convertTimestampsToDates(args);
+	return /* @__PURE__ */ jsx(Story, {
+		...context,
+		args: convertedArgs
+	});
+};
+//#endregion
+export { withForm, withTimestampsAsISOStrings };
+
+//# sourceMappingURL=decorators.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","names":[],"sources":["../../../src/ui/components/decorators.tsx"],"sourcesContent":["import type { Decorator } from \"@storybook/react\";\nimport type { Args, DecoratorFunction } from \"@storybook/types\";\nimport { format } from \"date-fns\";\nimport { useCallback, useId, useRef, useState } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\nimport { Button } from \"../components/button/button.js\";\nimport { Checkbox } from \"../components/checkbox/checkbox.js\";\nimport { Form } from \"../components/form/form.js\";\n\nfunction _isValidRegex(pattern: unknown): boolean {\n  try {\n    new RegExp(pattern as string);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\ninterface StoryFormParameters {\n  form?: {\n    defaultValues?: Record<string, any>;\n    resetBehavior?: \"unmount\" | \"reset\";\n  };\n}\n\nexport const withForm: Decorator = (Story, context) => {\n  const formRef = useRef<UseFormReturn>(null);\n  const [showFormButtons, setShowFormButtons] = useState<boolean>(false);\n  const [resetKey, setResetKey] = useState(0);\n  const checkboxId = useId();\n  const { viewMode, parameters } = context;\n  const isDocs = viewMode === \"docs\";\n\n  // Ensure we're properly accessing the parameters\n  const formParameters = (parameters as StoryFormParameters).form;\n  const resetBehavior = formParameters?.resetBehavior ?? \"reset\";\n\n  const onReset = useCallback(() => {\n    if (resetBehavior === \"unmount\") {\n      setResetKey((prev) => prev + 1);\n    } else {\n      const defaultValues = Object.fromEntries(\n        Object.keys(formRef.current?.control._fields ?? {}).map((fieldName) => [\n          fieldName,\n          formParameters?.defaultValues?.[fieldName] ?? \"\",\n        ]),\n      );\n      formRef.current?.reset(defaultValues);\n    }\n  }, [formParameters, resetBehavior]);\n\n  const onSubmit = useCallback((data: any) => {\n    // Allow to show bigInt values in the alert\n    const serializedData = JSON.stringify(\n      data,\n      (key, value): any =>\n        typeof value === \"bigint\" ? `BigInt(${value.toString()})` : value,\n      2,\n    );\n\n    // delay the alert to allow component JS to finish the execution\n    setTimeout(() => {\n      alert(serializedData);\n    }, 300);\n  }, []);\n\n  const onShowFormButtonsChange = useCallback((checked: boolean) => {\n    setShowFormButtons(checked);\n  }, []);\n\n  // override the warnings in the args to avoid breaking the storybook\n  // as storybook set by default an object instead of an array\n  const overrideArgs = {\n    ...context.args,\n    ...(Array.isArray(context.args.warnings)\n      ? { warnings: context.args.warnings }\n      : { warnings: undefined }),\n    ...(context.args.pattern !== undefined\n      ? _isValidRegex(context.args.pattern)\n        ? { pattern: context.args.pattern }\n        : { pattern: \"\" }\n      : {}),\n  };\n\n  return (\n    <div>\n      <Form ref={formRef} onSubmit={onSubmit} key={resetKey}>\n        <Story args={overrideArgs} />\n\n        {showFormButtons || isDocs ? (\n          <div className=\"flex gap-2\">\n            <Button\n              className=\"mt-4 w-full\"\n              color=\"light\"\n              type=\"reset\"\n              onClick={onReset}\n            >\n              Reset\n            </Button>\n            <Button className=\"mt-4 w-full\" color=\"dark\" type=\"submit\">\n              Submit\n            </Button>\n          </div>\n        ) : (\n          // allow to \"submit\" the form from the story\n          // it is needed as some browsers do not submit on Enter key press when there're several inputs and no submit button\n          <input type=\"submit\" className=\"hidden\" />\n        )}\n      </Form>\n\n      {!isDocs && (\n        <div className=\"absolute bottom-5 right-5 z-50\">\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              id={checkboxId}\n              value={showFormButtons}\n              onChange={onShowFormButtonsChange}\n            />\n            <label\n              className=\"cursor-pointer dark:text-gray-400\"\n              htmlFor={checkboxId}\n            >\n              Show form buttons\n            </label>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const withTimestampsAsISOStrings: DecoratorFunction<any> = (\n  Story,\n  context,\n) => {\n  const { args } = context;\n\n  // Function to convert timestamps to Date objects\n  const convertTimestampsToDates = (args: Args) => {\n    const newArgs = { ...args };\n\n    // Iterate through all args properties\n    Object.keys(newArgs).forEach((key) => {\n      const value = newArgs[key] as unknown;\n      if (\n        (key === \"minDate\" || key === \"maxDate\") &&\n        typeof value === \"string\"\n      ) {\n        const timestamp = new Date(value).getTime();\n        if (!isNaN(timestamp)) {\n          const date = new Date(timestamp);\n          date.setHours(12, 0, 0, 0);\n          // Format that Storybook accepts: \"22-Mar-2025\"\n          newArgs[key] = format(date, \"dd-MMM-yyyy\");\n        }\n      }\n      if (typeof value === \"number\" && value > 1609459200000) {\n        const date = new Date(value);\n        date.setHours(12, 0, 0, 0);\n        newArgs[key] = format(date, \"dd-MMM-yyyy\");\n      }\n    });\n\n    return newArgs;\n  };\n  const convertedArgs = convertTimestampsToDates(args);\n  return <Story {...context} args={convertedArgs} />;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { n as EnumFieldProps, t as EnumField } from "../../../enum-field-Dw-mnOL_.js";
+export { EnumField, EnumFieldProps };

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

@@ -0,0 +1,27 @@
+import { RadioGroupField } from "../radio-group-field/radio-group-field.js";
+import { SelectField } from "../select-field/select-field.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/enum-field/enum-field.tsx
+const EnumField = React.forwardRef(({ variant = "auto", options = [], ...props }, ref) => {
+	const radio = /* @__PURE__ */ jsx(RadioGroupField, {
+		options,
+		...props,
+		ref
+	});
+	const select = /* @__PURE__ */ jsx(SelectField, {
+		options,
+		...props,
+		ref
+	});
+	switch (variant) {
+		case "RadioGroup": return radio;
+		case "Select": return select;
+		case "auto": return options.length < 6 ? radio : select;
+	}
+});
+EnumField.displayName = "EnumField";
+//#endregion
+export { EnumField };
+
+//# sourceMappingURL=enum-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enum-field.js","names":[],"sources":["../../../../src/ui/components/enum-field/enum-field.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  RadioGroupField,\n  type RadioGroupFieldProps,\n} from \"../radio-group-field/radio-group-field.js\";\nimport {\n  SelectField,\n  type SelectFieldProps,\n} from \"../select-field/select-field.js\";\n\nexport type EnumFieldProps =\n  | ({\n      variant?: \"auto\";\n    } & (RadioGroupFieldProps | SelectFieldProps))\n  | ({\n      variant: \"RadioGroup\";\n    } & RadioGroupFieldProps)\n  | ({\n      variant: \"Select\";\n    } & SelectFieldProps);\n\nexport const EnumField = React.forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  EnumFieldProps\n>(({ variant = \"auto\", options = [], ...props }, ref) => {\n  const radio = (\n    <RadioGroupField\n      options={options}\n      {...(props as RadioGroupFieldProps)}\n      ref={ref as React.ForwardedRef<HTMLDivElement>}\n    />\n  );\n  const select = (\n    <SelectField\n      options={options}\n      {...(props as SelectFieldProps)}\n      ref={ref as React.ForwardedRef<HTMLButtonElement>}\n    />\n  );\n\n  switch (variant) {\n    case \"RadioGroup\":\n      return radio;\n    case \"Select\":\n      return select;\n    case \"auto\":\n      return options.length < 6 ? radio : select;\n  }\n});\n\nEnumField.displayName = \"EnumField\";\n"],"mappings":";;;;;AAqBA,MAAa,YAAY,MAAM,YAG5B,EAAE,UAAU,QAAQ,UAAU,EAAE,EAAE,GAAG,SAAS,QAAQ;CACvD,MAAM,QACJ,oBAAC,iBAAD;EACW;EACT,GAAK;EACA;EACL,CAAA;CAEJ,MAAM,SACJ,oBAAC,aAAD;EACW;EACT,GAAK;EACA;EACL,CAAA;AAGJ,SAAQ,SAAR;EACE,KAAK,aACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,KAAK,OACH,QAAO,QAAQ,SAAS,IAAI,QAAQ;;EAExC;AAEF,UAAU,cAAc"}

package/dist/ui/components/enum-field/types.d.ts

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

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

@@ -0,0 +1,2 @@
+import { t as Form } from "../../../form-xK4laHKj.js";
+export { Form };