@powerhousedao/design-system 6.0.0-dev.24 → 6.0.0-dev.241

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

@@ -0,0 +1,2 @@
+import { t as CommonTextProps } from "../../../types-BzoMu6VB.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-Db1dLIxg.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-DTHkTkyy.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-DoFR9kRM.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-MGhQTCdM.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-DWMigXJz.js";
+export { ValidationOptions, withFieldValidation };

package/dist/ui/components/with-field-validation/with-field-validation.js

@@ -0,0 +1,120 @@
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Controller, useFormContext, useFormState } from "react-hook-form";
+//#region src/ui/components/with-field-validation/with-field-validation.tsx
+const withFieldValidation = (Component, options) => {
+	return /* @__PURE__ */ forwardRef(({ value, name, showErrorOnBlur, showErrorOnChange, validators: customValidators, ...props }, ref) => {
+		const { onChange: onChangeProp, onBlur: onBlurProp } = props;
+		const { control, formState: { errors: formErrors, defaultValues }, trigger, setValue, getValues } = useFormContext();
+		const { submitCount } = useFormState();
+		if (!name) throw new Error(`[Field: ${Component.displayName}] The name prop is required.`);
+		const errors = [...formErrors[name]?.types ? Object.values(formErrors[name].types ?? []) : []];
+		if (errors.length === 0 && !!formErrors[name]) errors.push("Invalid value");
+		useEffect(() => {
+			if (submitCount > 0) trigger(name);
+		}, [props.required]);
+		useEffect(() => {
+			if (props.errors && props.errors.length > 0) trigger(name);
+		}, [
+			name,
+			props.errors,
+			trigger
+		]);
+		const [initialized, setInitialized] = useState(false);
+		useEffect(() => {
+			if (initialized) setValue(name, value);
+			setInitialized(true);
+		}, [name, value]);
+		if (value !== void 0 && !onChangeProp) console.warn(`[Field: ${name}] Value prop provided without onChange so it will be ignored. Use disabled/readOnly if you want to prevent changes.`);
+		return /* @__PURE__ */ jsx(Controller, {
+			control,
+			name,
+			defaultValue: value ?? props.defaultValue,
+			disabled: props.disabled,
+			render: ({ field: { onChange: _, onBlur: onBlurController, value: internalValue, ...rest } }) => {
+				const onBlurCallback = useCallback((event) => {
+					if (showErrorOnBlur) trigger(name);
+					else onBlurController();
+					if (onBlurProp) onBlurProp(event);
+				}, [onBlurController, showErrorOnBlur]);
+				const onChangeCallback = useCallback((event) => {
+					if (onChangeProp) {
+						if (Object.hasOwn(event, "target")) setValue(name, event.target.value);
+						else setValue(name, event);
+						onChangeProp(event);
+					} else {
+						let value = event;
+						if (event instanceof Event || event.target instanceof HTMLElement) value = event.target.value;
+						setValue(name, value);
+					}
+					if (showErrorOnChange === void 0 && showErrorOnBlur === void 0) {
+						if (submitCount > 0) trigger(name);
+					} else if (showErrorOnChange) trigger(name);
+				}, [
+					internalValue,
+					showErrorOnChange,
+					showErrorOnBlur,
+					submitCount
+				]);
+				const { ref: formFieldRef } = rest;
+				const combinedRef = (element) => {
+					if (typeof ref === "function") ref(element);
+					else if (ref) ref.current = element;
+					formFieldRef(element);
+				};
+				return /* @__PURE__ */ jsx(Component, {
+					...props,
+					...rest,
+					value: internalValue,
+					onBlur: onBlurCallback,
+					onChange: onChangeCallback,
+					errors,
+					ref: combinedRef
+				});
+			},
+			rules: {
+				...props.required ? { required: {
+					value: props.required,
+					message: "This field is required"
+				} } : { required: void 0 },
+				...props.pattern && { pattern: {
+					value: new RegExp(props.pattern),
+					message: "This field does not match the required pattern"
+				} },
+				...props.maxLength !== void 0 && props.maxLength >= 0 ? { maxLength: {
+					value: props.maxLength,
+					message: `This field must be at most ${props.maxLength} characters`
+				} } : { maxLength: void 0 },
+				...props.minLength !== void 0 && props.minLength >= 0 ? { minLength: {
+					value: props.minLength,
+					message: `This field must be at least ${props.minLength} characters`
+				} } : { minLength: void 0 },
+				...props.minValue && { min: {
+					value: props.minValue,
+					message: `This field must be greater than or equal to ${props.minValue}`
+				} },
+				...props.maxValue && { max: {
+					value: props.maxValue,
+					message: `This field must be less than or equal to ${props.maxValue}`
+				} },
+				validate: {
+					...props.errors ? Object.fromEntries(Array.isArray(props.errors) ? props.errors.map((error, index) => [`_propError${index}`, () => error]) : []) : {},
+					...options?.validations ? Object.fromEntries(Object.entries(options.validations).map(([key, validatorFactory]) => {
+						return [key, validatorFactory({
+							value: getValues(name),
+							name,
+							showErrorOnBlur,
+							showErrorOnChange,
+							...props
+						})];
+					})) : {},
+					...customValidators !== void 0 ? Object.fromEntries((Array.isArray(customValidators) ? customValidators : [customValidators]).map((validator, index) => [`customValidation${index}`, validator])) : {}
+				}
+			}
+		});
+	});
+};
+//#endregion
+export { withFieldValidation };
+
+//# sourceMappingURL=with-field-validation.js.map

package/dist/ui/components/with-field-validation/with-field-validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-field-validation.js","names":["forwardRef","useCallback","useEffect","useState","Controller","useFormContext","useFormState","withFieldValidation","Component","options","value","name","showErrorOnBlur","showErrorOnChange","validators","customValidators","props","ref","onChange","onChangeProp","onBlur","onBlurProp","control","formState","errors","formErrors","defaultValues","trigger","setValue","getValues","submitCount","Error","displayName","types","Object","values","length","push","required","initialized","setInitialized","undefined","console","warn","defaultValue","disabled","field","_","onBlurController","internalValue","rest","onBlurCallback","event","onChangeCallback","hasOwn","target","Event","HTMLElement","formFieldRef","combinedRef","element","current","message","pattern","RegExp","maxLength","minLength","minValue","min","maxValue","max","validate","fromEntries","Array","isArray","map","error","index","validations","entries","key","validatorFactory","propsWithValues","validator"],"sources":["../../../../src/ui/components/with-field-validation/with-field-validation.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  ComponentType,\n  ElementRef,\n  FocusEvent,\n  ForwardRefExoticComponent,\n  PropsWithoutRef,\n  RefAttributes,\n} from \"react\";\nimport { forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { Controller, useFormContext, useFormState } from \"react-hook-form\";\nimport type {\n  FieldErrorHandling,\n  InputBaseProps,\n  ValidatorHandler,\n} from \"../../types.js\";\n\ninterface PossibleProps extends InputBaseProps<unknown>, FieldErrorHandling {\n  pattern?: RegExp;\n  maxLength?: number;\n  minLength?: number;\n  minValue?: number;\n  maxValue?: number;\n}\n\ninterface PossibleEventsProps {\n  onChange?: (event: ChangeEvent<unknown>) => unknown;\n  onBlur?: (event: FocusEvent<unknown>) => unknown;\n}\n\nexport interface ValidationOptions<T> {\n  validations?: Record<string, (parentProps: T) => ValidatorHandler>;\n  transformValue?: (value: any) => any;\n}\n\nexport const withFieldValidation = <\n  T extends PossibleProps,\n  R extends ElementRef<any> = ElementRef<any>,\n>(\n  Component: ComponentType<T>,\n  options?: ValidationOptions<T>,\n): ForwardRefExoticComponent<PropsWithoutRef<T> & RefAttributes<R>> => {\n  return forwardRef<R, T>(\n    (\n      {\n        value,\n        name,\n        showErrorOnBlur,\n        showErrorOnChange,\n        validators: customValidators,\n        ...props\n      },\n      ref,\n    ) => {\n      const { onChange: onChangeProp, onBlur: onBlurProp } =\n        props as PossibleEventsProps;\n      const {\n        control,\n        formState: { errors: formErrors, defaultValues },\n        trigger,\n        setValue,\n        getValues,\n      } = useFormContext();\n      const { submitCount } = useFormState();\n\n      if (!name) {\n        throw new Error(\n          `[Field: ${Component.displayName}] The name prop is required.`,\n        );\n      }\n\n      const errors = [\n        ...(formErrors[name]?.types\n          ? (Object.values(formErrors[name].types ?? []) as string[])\n          : []),\n      ];\n      if (errors.length === 0 && !!formErrors[name]) {\n        // the field is invalid but no error message was provided\n        errors.push(\"Invalid value\");\n      }\n\n      useEffect(() => {\n        if (submitCount > 0) {\n          void trigger(name);\n        }\n        // we should trigger a re-validation after the form is submitted, the errors are shown\n        // and the required prop is changed. Other deps can not be added, otherwise a revalidation\n        // will be triggered unnecessarily\n      }, [props.required]);\n\n      useEffect(() => {\n        // if custom errors are provided, then we need to trigger the validation\n        // otherwise the errors will not be shown till the form is submitted\n        if (props.errors && props.errors.length > 0) {\n          void trigger(name);\n        }\n      }, [name, props.errors, trigger]);\n\n      const [initialized, setInitialized] = useState(false);\n      useEffect(() => {\n        if (initialized) {\n          setValue(name, value);\n        }\n        setInitialized(true);\n        // initialized can not be in the dependencies because it would cause\n        // a change of the value on initial render\n      }, [name, value]);\n\n      if (value !== undefined && !onChangeProp) {\n        console.warn(\n          `[Field: ${name}] Value prop provided without onChange so it will be ignored. Use disabled/readOnly if you want to prevent changes.`,\n        );\n      }\n\n      return (\n        <Controller\n          control={control}\n          name={name}\n          defaultValue={(value ?? props.defaultValue) as unknown}\n          disabled={props.disabled}\n          render={({\n            field: {\n              // just preventing that onChange is included in the rest of the props\n              onChange: _,\n              onBlur: onBlurController,\n              value: internalValue,\n              ...rest\n            },\n          }) => {\n            // ignore eslint that flags an error here:\n            // React Hook \"useCallback\" cannot be called inside a callback.\n            // React Hooks must be called in a React function component or a custom React Hook function.\n\n            const onBlurCallback = useCallback(\n              (event: FocusEvent<HTMLInputElement>) => {\n                if (showErrorOnBlur) {\n                  void trigger(name);\n                } else {\n                  onBlurController(); // default behavior\n                }\n\n                // trigger parent onBlur\n                if (onBlurProp) {\n                  onBlurProp(event);\n                }\n              },\n              [onBlurController, showErrorOnBlur],\n            );\n\n            // ignore eslint that flags an error here:\n            // React Hook \"useCallback\" cannot be called inside a callback.\n            // React Hooks must be called in a React function component or a custom React Hook function.\n\n            const onChangeCallback = useCallback(\n              (event: ChangeEvent<HTMLInputElement>) => {\n                // update value state\n                if (onChangeProp) {\n                  if (Object.hasOwn(event, \"target\")) {\n                    // it is probably an actual event\n                    setValue(name, event.target.value);\n                  } else {\n                    // it is a custom onChange and it pass the value directly\n                    setValue(name, event);\n                  }\n\n                  // the fields is controlled by the parent\n                  onChangeProp(event);\n                } else {\n                  // sometimes the onChange is overridden by the parent and use the new value as parameter instead of event\n                  let value: unknown = event;\n                  if (\n                    event instanceof Event ||\n                    event.target instanceof HTMLElement\n                  ) {\n                    value = event.target.value;\n                  }\n                  setValue(name, value); // default behavior\n                }\n\n                // now let's validate the field\n                if (\n                  showErrorOnChange === undefined &&\n                  showErrorOnBlur === undefined\n                ) {\n                  // use form validation mode...\n                  // if previously validated, then validate on change\n                  if (submitCount > 0) {\n                    void trigger(name);\n                  }\n                } else {\n                  // default validation behavior was overridden\n                  if (showErrorOnChange) {\n                    void trigger(name);\n                  }\n                }\n              },\n              // `internalValue` is the value of the field that is controlled by the form\n              // it is used to trigger the validation on change, so we need to add it to the dependencies\n              // otherwise the validation will not be triggered on change\n              [internalValue, showErrorOnChange, showErrorOnBlur, submitCount],\n            );\n\n            // extract ref from rest\n            const { ref: formFieldRef } = rest;\n\n            // create a combined ref\n            const combinedRef = (element: R) => {\n              // apply external ref if exists\n              if (typeof ref === \"function\") {\n                ref(element);\n              } else if (ref) {\n                ref.current = element;\n              }\n              // apply field ref\n              formFieldRef(element);\n            };\n\n            return (\n              <Component\n                {...(props as unknown as T)}\n                {...rest}\n                value={internalValue as unknown}\n                onBlur={onBlurCallback}\n                onChange={onChangeCallback}\n                errors={errors}\n                ref={combinedRef}\n              />\n            );\n          }}\n          rules={{\n            ...(props.required\n              ? {\n                  required: {\n                    value: props.required,\n                    message: \"This field is required\",\n                  },\n                }\n              : {\n                  required: undefined,\n                }),\n            ...(props.pattern && {\n              pattern: {\n                value: new RegExp(props.pattern),\n                message: \"This field does not match the required pattern\",\n              },\n            }),\n            ...(props.maxLength !== undefined && props.maxLength >= 0\n              ? {\n                  maxLength: {\n                    value: props.maxLength,\n                    message: `This field must be at most ${props.maxLength} characters`,\n                  },\n                }\n              : {\n                  maxLength: undefined,\n                }),\n            ...(props.minLength !== undefined && props.minLength >= 0\n              ? {\n                  minLength: {\n                    value: props.minLength,\n                    message: `This field must be at least ${props.minLength} characters`,\n                  },\n                }\n              : {\n                  minLength: undefined,\n                }),\n            ...(props.minValue && {\n              min: {\n                value: props.minValue,\n                message: `This field must be greater than or equal to ${props.minValue}`,\n              },\n            }),\n            ...(props.maxValue && {\n              max: {\n                value: props.maxValue,\n                message: `This field must be less than or equal to ${props.maxValue}`,\n              },\n            }),\n            validate: {\n              // custom errors provided as props\n              ...(props.errors\n                ? Object.fromEntries(\n                    Array.isArray(props.errors)\n                      ? props.errors.map((error, index) => [\n                          `_propError${index}`,\n                          () => error,\n                        ])\n                      : [],\n                  )\n                : {}),\n              // built in validations by the field in the library\n              ...(options?.validations\n                ? Object.fromEntries(\n                    Object.entries(options.validations).map(\n                      ([key, validatorFactory]) => {\n                        const propsWithValues = {\n                          value: getValues(name) as unknown, // get the actual value of the field in the form\n                          name,\n                          showErrorOnBlur,\n                          showErrorOnChange,\n                          ...props,\n                        };\n                        return [\n                          key,\n                          validatorFactory(propsWithValues as unknown as T),\n                        ];\n                      },\n                    ),\n                  )\n                : {}),\n              // custom validations by the user/developer\n              ...(customValidators !== undefined\n                ? Object.fromEntries(\n                    (Array.isArray(customValidators)\n                      ? customValidators\n                      : [customValidators]\n                    ).map((validator, index) => [\n                      `customValidation${index}`,\n                      validator,\n                    ]),\n                  )\n                : {}),\n            },\n          }}\n        />\n      );\n    },\n  );\n};\n"],"mappings":"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"}

package/dist/ui/index.d.ts

@@ -0,0 +1,39 @@
+import { C as SelectProps, S as SelectOption, _ as WithDifference, a as AmountInputPropsGeneric, b as RadioGroupProps, c as Currency, d as ErrorMessage, f as FieldErrorHandling, g as ViewMode, h as ValidatorResult, i as AmountFiat, l as CurrencyTicker, m as ValidatorHandler, n as AmountCrypto, o as AmountPercentage, p as InputBaseProps, r as AmountCurrency, s as AmountValue, t as Amount, u as DiffMode, v as IdAutocompleteOption, x as SelectBaseProps, y as IdAutocompleteProps } from "../index-DoFR9kRM.js";
+import { a as TransformerType, c as WeekStartDayNumber, i as TransformerTrigger, n as DatePickerView, o as ValueTransformerFn, r as TransformerObject, s as ValueTransformerProps, t as DateFieldValue } from "../types-BLss8ZBX.js";
+import { n as ButtonProps, r as buttonVariants, t as Button } from "../button-DIE3LLBZ.js";
+import { n as CharacterCounterProps, t as CharacterCounter } from "../character-counter-BZ-4xC7Q.js";
+import { n as CheckboxValue, t as CheckboxBase } from "../checkbox-base-Bh08IVG2.js";
+import { n as CheckboxProps, t as Checkbox } from "../checkbox-BgS8z46p.js";
+import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../command-BGOzfK_L.js";
+import { n as RadioGroupFieldProps, t as RadioGroupField } from "../radio-group-field-maxYxQ6A.js";
+import { n as SelectFieldProps, r as SelectFieldRaw, t as SelectField } from "../select-field-U8KSDxbg.js";
+import { n as EnumFieldProps, t as EnumField } from "../enum-field-CU6jo1T9.js";
+import { n as FormDescriptionProps, t as FormDescription } from "../form-description-Bsurk7mm.js";
+import { t as FormGroup } from "../form-group-B092xF-f.js";
+import { n as FormLabelProps, t as FormLabel } from "../form-label-CURXUfpb.js";
+import { n as FormMessageProps, r as FormMessageType, t as FormMessage } from "../form-message-BeAVBzjc.js";
+import { t as FormServerErrorMessage } from "../form-server-error-message-CbKMtocn.js";
+import { t as FormMessageList } from "../message-list-DDi6OrSM.js";
+import { t as Form } from "../form-6Lmx7pU_.js";
+import { n as IdAutocompleteInputContainerProps, t as IdAutocompleteInputContainer } from "../id-autocomplete-input-container-DefHskQg.js";
+import { n as IdAutocompleteListOptionProps, t as IdAutocompleteListOption } from "../id-autocomplete-list-option-CyF3v8IB.js";
+import { n as IdAutocompleteListProps, t as IdAutocompleteList } from "../id-autocomplete-list-C5uiH5nJ.js";
+import { t as IdAutocomplete } from "../id-autocomplete-DGTfhFRw.js";
+import { t as useIdAutocomplete } from "../use-id-autocomplete-BRzpIF4U.js";
+import { n as InputProps, t as Input } from "../input-BMf1G8BP.js";
+import { t as SplittedInputDiff } from "../splitted-input-diff-DSME-KaQ.js";
+import { t as JsonViewer } from "../json-viewer-DD7b-PP2.js";
+import { i as PopoverTrigger, n as PopoverAnchor, r as PopoverContent, t as Popover } from "../popover-BXlVJZZW.js";
+import { n as RadioGroup, t as CustomizableRadioGroupProps } from "../radio-group-D2NSfihe.js";
+import { n as RadioProps, t as Radio } from "../radio-YzIhzpRk.js";
+import { n as SearchAutocompleteProps, r as SearchAutocompleteRowContext, t as SearchAutocompleteOption } from "../types-BDeBOEOj.js";
+import { t as SearchAutocomplete } from "../search-autocomplete-CfSjqceY.js";
+import { t as useSearchAutocomplete } from "../use-search-autocomplete-ZLxfAC6X.js";
+import { t as Content } from "../content-ZWaCzypo.js";
+import { t as SelectedContent } from "../selected-content-iwV6vmSI.js";
+import { n as TextInputProps, t as TextInput } from "../text-input-t0uGOMAO.js";
+import { n as TextFieldProps, t as TextField } from "../text-field-Cxpz1D2u.js";
+import { a as TooltipProps, i as TooltipContent, n as Root, o as Trigger, r as Tooltip, t as Provider } from "../tooltip-Db1dLIxg.js";
+import { t as ValueTransformer } from "../value-transformer-MGhQTCdM.js";
+import { n as withFieldValidation, t as ValidationOptions } from "../with-field-validation-DWMigXJz.js";
+export { Amount, AmountCrypto, AmountCurrency, AmountFiat, AmountInputPropsGeneric, AmountPercentage, AmountValue, Button, ButtonProps, CharacterCounter, CharacterCounterProps, Checkbox, CheckboxBase, CheckboxProps, CheckboxValue, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, Content, Currency, CurrencyTicker, CustomizableRadioGroupProps, DateFieldValue, DatePickerView, DiffMode, EnumField, EnumFieldProps, ErrorMessage, FieldErrorHandling, Form, FormDescription, FormDescriptionProps, FormGroup, FormLabel, FormLabelProps, FormMessage, FormMessageList, FormMessageProps, FormMessageType, FormServerErrorMessage, IdAutocomplete, IdAutocompleteInputContainer, IdAutocompleteInputContainerProps, IdAutocompleteList, IdAutocompleteListOption, IdAutocompleteListOptionProps, IdAutocompleteListProps, IdAutocompleteOption, IdAutocompleteProps, Input, InputBaseProps, InputProps, JsonViewer, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Radio, RadioGroup, RadioGroupField, RadioGroupFieldProps, RadioGroupProps, RadioProps, SearchAutocomplete, SearchAutocompleteOption, SearchAutocompleteProps, SearchAutocompleteRowContext, SelectBaseProps, SelectField, SelectFieldProps, SelectFieldRaw, SelectOption, SelectProps, SelectedContent, SplittedInputDiff, TextField, TextFieldProps, TextInput, TextInputProps, Tooltip, TooltipContent, TooltipProps, Provider as TooltipProvider, Root as TooltipRoot, Trigger as TooltipTrigger, TransformerObject, TransformerTrigger, TransformerType, ValidationOptions, ValidatorHandler, ValidatorResult, ValueTransformer, ValueTransformerFn, ValueTransformerProps, ViewMode, WeekStartDayNumber, WithDifference, buttonVariants, useIdAutocomplete, useSearchAutocomplete, withFieldValidation };

package/dist/ui/index.js

@@ -0,0 +1,36 @@
+import { Button, buttonVariants } from "./components/button/button.js";
+import { CharacterCounter } from "./components/character-counter/character-counter.js";
+import { CheckboxBase } from "./components/checkbox/checkbox-base.js";
+import { Tooltip, TooltipContent, TooltipProvider as Provider, TooltipRoot as Root, TooltipTrigger as Trigger } from "./components/tooltip/tooltip.js";
+import { FormLabel } from "./components/form-label/form-label.js";
+import { FormMessage } from "./components/form-message/form-message.js";
+import { FormMessageList } from "./components/form-message/message-list.js";
+import { Checkbox } from "./components/checkbox/checkbox.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading } from "./components/command/command.js";
+import { withFieldValidation } from "./components/with-field-validation/with-field-validation.js";
+import { RadioGroup } from "./components/radio-group-field/radio-group.js";
+import { Radio } from "./components/radio-group-field/radio.js";
+import { RadioGroupField } from "./components/radio-group-field/radio-group-field.js";
+import { FormDescription } from "./components/form-description/form-description.js";
+import { FormGroup } from "./components/form-group/form-group.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./components/popover/popover.js";
+import { Content } from "./components/select-field/content.js";
+import { SelectedContent } from "./components/select-field/selected-content.js";
+import { SelectField, SelectFieldRaw } from "./components/select-field/select-field.js";
+import { EnumField } from "./components/enum-field/enum-field.js";
+import { FormServerErrorMessage } from "./components/form-message/form-server-error-message.js";
+import { Form } from "./components/form/form.js";
+import { Input } from "./components/input/input.js";
+import { ValueTransformer } from "./components/value-transformer/value-transformer.js";
+import { IdAutocompleteInputContainer } from "./components/id-autocomplete/id-autocomplete-input-container.js";
+import { IdAutocompleteListOption } from "./components/id-autocomplete/id-autocomplete-list-option.js";
+import { IdAutocompleteList } from "./components/id-autocomplete/id-autocomplete-list.js";
+import { useIdAutocomplete } from "./components/id-autocomplete/use-id-autocomplete.js";
+import { IdAutocomplete } from "./components/id-autocomplete/id-autocomplete.js";
+import { SplittedInputDiff } from "./components/input/splitted-input-diff.js";
+import { JsonViewer } from "./components/json-viewer/json-viewer.js";
+import { useSearchAutocomplete } from "./components/search-autocomplete/use-search-autocomplete.js";
+import { SearchAutocomplete } from "./components/search-autocomplete/search-autocomplete.js";
+import { TextInput } from "./components/text-input/text-input.js";
+import { TextField } from "./components/text-field/text-field.js";
+export { Button, CharacterCounter, Checkbox, CheckboxBase, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, Content, EnumField, Form, FormDescription, FormGroup, FormLabel, FormMessage, FormMessageList, FormServerErrorMessage, IdAutocomplete, IdAutocompleteInputContainer, IdAutocompleteList, IdAutocompleteListOption, Input, JsonViewer, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Radio, RadioGroup, RadioGroupField, SearchAutocomplete, SelectField, SelectFieldRaw, SelectedContent, SplittedInputDiff, TextField, TextInput, Tooltip, TooltipContent, Provider as TooltipProvider, Root as TooltipRoot, Trigger as TooltipTrigger, ValueTransformer, buttonVariants, useIdAutocomplete, useSearchAutocomplete, withFieldValidation };

package/dist/ui/lib/date-picker.d.ts

@@ -0,0 +1,11 @@
+import { t as DateFieldValue } from "../../types-BLss8ZBX.js";
+
+//#region src/ui/lib/date-picker.d.ts
+declare const splitIso8601DateTime: (isoString: string) => {
+  date: string;
+  time: string;
+};
+declare const getDateFromValue: (value: DateFieldValue) => string;
+//#endregion
+export { getDateFromValue, splitIso8601DateTime };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/ui/lib/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","names":[],"sources":["../../../src/ui/lib/date-picker.ts"],"mappings":";;;cAGa,oBAAA,GAAwB,SAAA;;;;cAiCxB,gBAAA,GAAoB,KAAA,EAAO,cAAA"}

package/dist/ui/lib/date-picker.js

@@ -0,0 +1,39 @@
+import { isValid } from "date-fns";
+//#region src/ui/lib/date-picker.ts
+const splitIso8601DateTime = (isoString) => {
+	const [datePart, timePart] = isoString.split("T");
+	return {
+		date: datePart,
+		time: timePart
+	};
+};
+const splitDateTime = (value) => {
+	const defaultResult = {
+		date: "",
+		time: ""
+	};
+	if (!value) return defaultResult;
+	if (typeof value === "string") {
+		const { date, time } = splitIso8601DateTime(value);
+		return {
+			date,
+			time
+		};
+	}
+	if (isValid(value)) {
+		const { date, time } = splitIso8601DateTime(value.toISOString());
+		return {
+			date,
+			time
+		};
+	}
+	return defaultResult;
+};
+const getDateFromValue = (value) => {
+	const { date } = splitDateTime(value);
+	return date;
+};
+//#endregion
+export { getDateFromValue, splitIso8601DateTime };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/ui/lib/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":["isValid","splitIso8601DateTime","isoString","datePart","timePart","split","date","time","splitDateTime","value","defaultResult","dateString","toISOString","getDateFromValue"],"sources":["../../../src/ui/lib/date-picker.ts"],"sourcesContent":["import { isValid } from \"date-fns\";\nimport type { DateFieldValue } from \"./types.js\";\n\nexport const splitIso8601DateTime = (isoString: string) => {\n  const [datePart, timePart] = isoString.split(\"T\");\n\n  return {\n    date: datePart,\n    time: timePart,\n  };\n};\n\nconst splitDateTime = (\n  value: DateFieldValue,\n): { date: string; time: string } => {\n  const defaultResult = { date: \"\", time: \"\" };\n\n  if (!value) {\n    return defaultResult;\n  }\n\n  if (typeof value === \"string\") {\n    const { date, time } = splitIso8601DateTime(value);\n\n    return { date, time };\n  }\n\n  if (isValid(value)) {\n    const dateString = value.toISOString();\n    const { date, time } = splitIso8601DateTime(dateString);\n    return { date, time };\n  }\n\n  return defaultResult;\n};\n\nexport const getDateFromValue = (value: DateFieldValue): string => {\n  const { date } = splitDateTime(value);\n  return date;\n};\n"],"mappings":";;AAGA,MAAaC,wBAAwBC,cAAsB;CACzD,MAAM,CAACC,UAAUC,YAAYF,UAAUG,MAAM,IAAI;AAEjD,QAAO;EACLC,MAAMH;EACNI,MAAMH;EACP;;AAGH,MAAMI,iBACJC,UACmC;CACnC,MAAMC,gBAAgB;EAAEJ,MAAM;EAAIC,MAAM;EAAI;AAE5C,KAAI,CAACE,MACH,QAAOC;AAGT,KAAI,OAAOD,UAAU,UAAU;EAC7B,MAAM,EAAEH,MAAMC,SAASN,qBAAqBQ,MAAM;AAElD,SAAO;GAAEH;GAAMC;GAAM;;AAGvB,KAAIP,QAAQS,MAAM,EAAE;EAElB,MAAM,EAAEH,MAAMC,SAASN,qBADJQ,MAAMG,aAAa,CACiB;AACvD,SAAO;GAAEN;GAAMC;GAAM;;AAGvB,QAAOG;;AAGT,MAAaG,oBAAoBJ,UAAkC;CACjE,MAAM,EAAEH,SAASE,cAAcC,MAAM;AACrC,QAAOH"}

package/dist/ui/lib/date-time-picker.d.ts

@@ -0,0 +1,34 @@
+//#region src/ui/lib/date-time-picker.d.ts
+declare const ALLOWED_FORMATS: string[];
+declare const dateFormatRegexes: {
+  "yyyy-MM-dd": RegExp;
+  "dd/MM/yyyy": RegExp;
+  "MM/dd/yyyy": RegExp;
+  "dd-MMM-yyyy": RegExp;
+  "MMM-dd-yyyy": RegExp;
+};
+/**
+ * Gets the current UTC offset for a specific time zone
+ * @param timeZone - The IANA time zone name (e.g. "America/New_York", "Europe/London").
+ *                   If not provided or invalid, falls back to local system timezone.
+ * @returns The offset in ISO 8601 format (±HH:mm) based on current DST rules.
+ * @example
+ * getOffset("America/New_York") // Returns "-04:00" (EDT) or "-05:00" (EST)
+ * getOffset("Asia/Kolkata")     // Returns "+05:30" (IST - no DST)
+ * getOffset("Invalid/Zone")     // Returns local system offset (e.g. "-03:00")
+ * getOffset()                   // Returns local system offset
+ */
+/**
+ * Parse an input string to a valid date format
+ * @param inputString - The input string to parse
+ * @param dateFormat - The date format to use
+ * @returns The parsed date string
+ * @example
+ * parseInputString("2024-01-01 12:00:00", "yyyy-MM-dd HH:mm:ss") // "2024-01-01 12:00:00"
+ */
+declare const parseInputString: (inputString: string, dateFormat?: string) => string;
+declare const getDateFormat: (displayFormat: string) => string | undefined;
+declare const normalizeMonthFormat: (dateString: string) => string;
+//#endregion
+export { ALLOWED_FORMATS, dateFormatRegexes, getDateFormat, normalizeMonthFormat, parseInputString };
+//# sourceMappingURL=date-time-picker.d.ts.map

package/dist/ui/lib/date-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-picker.d.ts","names":[],"sources":["../../../src/ui/lib/date-time-picker.ts"],"mappings":";cAEa,eAAA;AAAA,cAQA,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;cA8BA,gBAAA,GACX,WAAA,UACA,UAAA;AAAA,cA4BW,aAAA,GAAiB,aAAA;AAAA,cAiBjB,oBAAA,GAAwB,UAAA"}

package/dist/ui/lib/date-time-picker.js

@@ -0,0 +1,84 @@
+import { format, isValid, parse } from "date-fns";
+//#region src/ui/lib/date-time-picker.ts
+const ALLOWED_FORMATS = [
+	"yyyy-MM-dd",
+	"dd/MM/yyyy",
+	"MM/dd/yyyy",
+	"dd-MMM-yyyy",
+	"MMM-dd-yyyy"
+];
+const dateFormatRegexes = {
+	"yyyy-MM-dd": /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,
+	"dd/MM/yyyy": /^(0[1-9]|[12]\d|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/,
+	"MM/dd/yyyy": /^(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/\d{4}$/,
+	"dd-MMM-yyyy": /^(0[1-9]|[12]\d|3[01])-(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-\d{4}$/,
+	"MMM-dd-yyyy": /^(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-(0[1-9]|[12]\d|3[01])-\d{4}$/
+};
+/**
+* Gets the current UTC offset for a specific time zone
+* @param timeZone - The IANA time zone name (e.g. "America/New_York", "Europe/London").
+*                   If not provided or invalid, falls back to local system timezone.
+* @returns The offset in ISO 8601 format (±HH:mm) based on current DST rules.
+* @example
+* getOffset("America/New_York") // Returns "-04:00" (EDT) or "-05:00" (EST)
+* getOffset("Asia/Kolkata")     // Returns "+05:30" (IST - no DST)
+* getOffset("Invalid/Zone")     // Returns local system offset (e.g. "-03:00")
+* getOffset()                   // Returns local system offset
+*/
+/**
+* Parse an input string to a valid date format
+* @param inputString - The input string to parse
+* @param dateFormat - The date format to use
+* @returns The parsed date string
+* @example
+* parseInputString("2024-01-01 12:00:00", "yyyy-MM-dd HH:mm:ss") // "2024-01-01 12:00:00"
+*/
+const parseInputString = (inputString, dateFormat = ALLOWED_FORMATS[0]) => {
+	const newInputString = normalizeMonthFormat(inputString);
+	if (!dateFormat || !inputString) return inputString;
+	if (dateFormatRegexes[dateFormat].test(newInputString)) {
+		const parsedDate = parse(newInputString, dateFormat, /* @__PURE__ */ new Date());
+		if (isValid(parsedDate)) return format(parsedDate, dateFormat);
+	}
+	for (const [formatStr, regex] of Object.entries(dateFormatRegexes)) if (regex.test(newInputString)) {
+		const parsedDate = parse(newInputString, formatStr, /* @__PURE__ */ new Date());
+		if (isValid(parsedDate)) return format(parsedDate, dateFormat || formatStr);
+	}
+	return inputString;
+};
+const getDateFormat = (displayFormat) => {
+	switch (displayFormat) {
+		case "YYYY-MM-DD": return "yyyy-MM-dd";
+		case "DD/MM/YYYY": return "dd/MM/yyyy";
+		case "MM/DD/YYYY": return "MM/dd/yyyy";
+		case "DD-MMM-YYYY": return "dd-MMM-yyyy";
+		case "MMM-DD-YYYY": return "MMM-dd-yyyy";
+		default: return;
+	}
+};
+const normalizeMonthFormat = (dateString) => {
+	const months = [
+		"JAN",
+		"FEB",
+		"MAR",
+		"APR",
+		"MAY",
+		"JUN",
+		"JUL",
+		"AUG",
+		"SEP",
+		"OCT",
+		"NOV",
+		"DEC"
+	];
+	return dateString.replace(/(JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)/i, (month) => {
+		const upperMonth = month.toUpperCase();
+		const monthIndex = months.indexOf(upperMonth);
+		if (monthIndex !== -1) return months[monthIndex].charAt(0) + months[monthIndex].slice(1).toLowerCase();
+		return month;
+	});
+};
+//#endregion
+export { ALLOWED_FORMATS, dateFormatRegexes, getDateFormat, normalizeMonthFormat, parseInputString };
+
+//# sourceMappingURL=date-time-picker.js.map