npm - @powerhousedao/design-system - Versions diffs - 6.0.0-dev.247 → 6.0.0-dev.249 - Mend

@powerhousedao/design-system 6.0.0-dev.247 → 6.0.0-dev.249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

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

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import { CharacterCounter } from "../character-counter/character-counter.js";
 import { FormLabel } from "../form-label/form-label.js";
 import { FormMessageList } from "../form-message/message-list.js";

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

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
@@ -7,7 +7,7 @@ const TooltipContent = /* @__PURE__ */ forwardRef(({ children, className, ...pro
 	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),
+		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-zoom-in", "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
 	});
 });

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

	@@ -1 +1 @@
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"}
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-zoom-in\",\n \"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,qCACA,wCAEA,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/with-field-validation/with-field-validation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, 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
@@ -32,12 +32,12 @@ const withFieldValidation = (Component, options) => {
 			defaultValue: value ?? props.defaultValue,
 			disabled: props.disabled,
 			render: ({ field: { onChange: _, onBlur: onBlurController, value: internalValue, ...rest } }) => {
-				const onBlurCallback = useCallback((event) => {
+				const onBlurCallback = (event) => {
 					if (showErrorOnBlur) trigger(name);
 					else onBlurController();
 					if (onBlurProp) onBlurProp(event);
-				}, [onBlurController, showErrorOnBlur]);
-				const onChangeCallback = useCallback((event) => {
+				};
+				const onChangeCallback = (event) => {
 					if (onChangeProp) {
 						if (Object.hasOwn(event, "target")) setValue(name, event.target.value);
 						else setValue(name, event);
@@ -50,12 +50,7 @@ const withFieldValidation = (Component, options) => {
 					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);

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

	@@ -1 +1 @@
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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"}
1	+ {"version":3,"file":"with-field-validation.js","names":["forwardRef","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, 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 = (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\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 = (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\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 CHANGED Viewed

@@ -4,10 +4,10 @@ import { n as ButtonProps, r as buttonVariants, t as Button } from "../button-49
 import { n as CharacterCounterProps, t as CharacterCounter } from "../character-counter-BcuG4STA.js";
 import { n as CheckboxValue, t as CheckboxBase } from "../checkbox-base-8xXJvAbj.js";
 import { n as CheckboxProps, t as Checkbox } from "../checkbox-dqrYEK5V.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-CThXmS49.js";
-import { n as RadioGroupFieldProps, t as RadioGroupField } from "../radio-group-field-DNapUn2b.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-CjupIOR8.js";
+import { n as RadioGroupFieldProps, t as RadioGroupField } from "../radio-group-field-CY2UGZp_.js";
 import { n as SelectFieldProps, r as SelectFieldRaw, t as SelectField } from "../select-field-BClhLm83.js";
-import { n as EnumFieldProps, t as EnumField } from "../enum-field-8s8P6tjO.js";
+import { n as EnumFieldProps, t as EnumField } from "../enum-field-Db9I-jO3.js";
 import { n as FormDescriptionProps, t as FormDescription } from "../form-description-BpST5Ww-.js";
 import { t as FormGroup } from "../form-group-BauWlFkQ.js";
 import { n as FormLabelProps, t as FormLabel } from "../form-label-Cz_gcj-B.js";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/design-system",
-  "version": "6.0.0-dev.247",
+  "version": "6.0.0-dev.249",
   "description": "",
   "files": [
     "dist",
@@ -80,6 +80,7 @@
     "@storybook/types": "^8.6.18",
     "@tailwindcss/cli": "4.2.2",
     "@tailwindcss/vite": "4.2.2",
+    "@tanstack/react-query": "^5.49.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -101,7 +102,7 @@
     "tsx": "4.21.0",
     "vite": "8.0.8",
     "vitest": "4.1.1",
-    "@powerhousedao/config": "6.0.0-dev.247"
+    "@powerhousedao/config": "6.0.0-dev.249"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -117,7 +118,6 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@tanstack/react-query": "^5.49.2",
     "@tanstack/react-virtual": "^3.8.1",
     "@uiw/react-json-view": "2.0.0-alpha.42",
     "change-case": "5.4.4",
@@ -134,8 +134,8 @@
     "tailwind-merge": "3.4.0",
     "type-fest": "5.6.0",
     "usehooks-ts": "^3.1.1",
-    "@powerhousedao/shared": "6.0.0-dev.247",
-    "@powerhousedao/reactor-browser": "6.0.0-dev.247"
+    "@powerhousedao/reactor-browser": "6.0.0-dev.249",
+    "@powerhousedao/shared": "6.0.0-dev.249"
   },
   "scripts": {
     "tsc": "tsc",

package/theme.css CHANGED Viewed

@@ -25,7 +25,6 @@
   --color-slate-700: hsl(204 9% 11%);
   --color-slate-800: hsl(195 9% 9%);
   --color-slate-900: hsl(195 6% 6%);
-  --color-slate-950: hsl(0 0% 0%);
   --color-blue-100: hsl(209 100% 90%);
   --color-blue-200: hsl(209 97% 85%);
   --color-blue-300: hsl(209 100% 80%);
@@ -104,7 +103,8 @@
     0px -1px 1px 0px rgba(0, 0, 0, 0.04) inset,
     0px 2px 0px 0px rgba(255, 255, 255, 0.25) inset,
     0px 4px 8px -4px rgba(0, 0, 0, 0.1);
+--shadow-charcoal: 1px 4px 15px rgba(74, 88, 115, 0.25);
+--shadow-inner: inset 0px 0px 2px rgba(255, 255, 255, 0.5);
   --animate-fade-in: fadeIn 0.3s ease-in-out;
   --animate-fade-out: fadeOut 0.1s ease-in-out;
   --animate-zoom-in: zoomIn 0.3s ease-in-out;