@arolariu/components 0.5.0 → 1.0.0

package/dist/components/ui/form.js

@@ -1,11 +1,27 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { createContext, forwardRef, useContext, useId } from "react";
-import { Controller, FormProvider, useFormContext } from "react-hook-form";
-import { Label } from "./label.js";
+import { cloneElement, createContext, forwardRef, isValidElement, useContext, useId } from "react";
+import { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 import { cn } from "../../lib/utilities.js";
-const Form = FormProvider;
+import form_module from "./form.module.js";
+const Form = Object.assign(FormProvider, {
+    displayName: "Form"
+});
+function assignRef(ref, value) {
+    if ("function" == typeof ref) return void ref(value);
+    if (ref) ref.current = value;
+}
+function composeRefs(...refs) {
+    return (value)=>{
+        for (const ref of refs)assignRef(ref, value);
+    };
+}
+function mergeAriaDescribedBy(...describedByValues) {
+    const tokens = describedByValues.flatMap((describedByValue)=>describedByValue?.split(/\s+/u) ?? []).filter((token)=>token.length > 0);
+    return tokens.length > 0 ? [
+        ...new Set(tokens)
+    ].join(" ") : void 0;
+}
 const FormFieldContext = /*#__PURE__*/ createContext(null);
 const FormField = ({ ...props })=>/*#__PURE__*/ jsx(FormFieldContext.Provider, {
         value: {
@@ -24,12 +40,16 @@ const useFormField = ()=>{
     const fieldState = getFieldState(fieldContext.name, formState);
     const { id } = itemContext;
     return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
+        error: fieldState.error,
         formDescriptionId: `${id}-form-item-description`,
+        formItemId: `${id}-form-item`,
         formMessageId: `${id}-form-item-message`,
-        ...fieldState
+        id,
+        invalid: fieldState.invalid,
+        isDirty: fieldState.isDirty,
+        isTouched: fieldState.isTouched,
+        isValidating: fieldState.isValidating,
+        name: fieldContext.name
     };
 };
 const FormItemContext = /*#__PURE__*/ createContext(null);
@@ -41,7 +61,7 @@ const FormItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
         },
         children: /*#__PURE__*/ jsx("div", {
             ref: ref,
-            className: cn("space-y-2", className),
+            className: cn(form_module.item, className),
             ...props
         })
     });
@@ -49,22 +69,35 @@ const FormItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
 FormItem.displayName = "FormItem";
 const FormLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     const { error, formItemId } = useFormField();
-    return /*#__PURE__*/ jsx(Label, {
+    return /*#__PURE__*/ jsx("label", {
         ref: ref,
-        className: cn(error && "text-red-500 dark:text-red-900", className),
+        className: cn(error && form_module.labelError, className),
         htmlFor: formItemId,
         ...props
     });
 });
 FormLabel.displayName = "FormLabel";
-const FormControl = /*#__PURE__*/ forwardRef(({ ...props }, ref)=>{
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return /*#__PURE__*/ jsx(Slot, {
+const FormControl = /*#__PURE__*/ forwardRef(({ children, ...props }, ref)=>{
+    const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
+    const describedBy = mergeAriaDescribedBy("string" == typeof props["aria-describedby"] ? props["aria-describedby"] : void 0, formDescriptionId, error ? formMessageId : void 0);
+    if (/*#__PURE__*/ isValidElement(children)) {
+        const child = children;
+        const childDescribedBy = "string" == typeof child.props["aria-describedby"] ? child.props["aria-describedby"] : void 0;
+        return /*#__PURE__*/ cloneElement(child, {
+            ...props,
+            ref: composeRefs(ref, child.props.ref),
+            id: formItemId,
+            "aria-describedby": mergeAriaDescribedBy(childDescribedBy, describedBy),
+            "aria-invalid": Boolean(error)
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
         ref: ref,
         id: formItemId,
-        "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
+        "aria-describedby": describedBy,
         "aria-invalid": Boolean(error),
-        ...props
+        ...props,
+        children: children
     });
 });
 FormControl.displayName = "FormControl";
@@ -73,24 +106,25 @@ const FormDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=
     return /*#__PURE__*/ jsx("p", {
         ref: ref,
         id: formDescriptionId,
-        className: cn("text-[0.8rem] text-neutral-500 dark:text-neutral-400", className),
+        className: cn(form_module.description, className),
         ...props
     });
 });
 FormDescription.displayName = "FormDescription";
 const FormMessage = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
     const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message ?? "") : children;
+    const body = error ? String(error.message ?? "") : children;
     if (!body) return null;
     return /*#__PURE__*/ jsx("p", {
         ref: ref,
         id: formMessageId,
-        className: cn("text-[0.8rem] font-medium text-red-500 dark:text-red-900", className),
+        className: cn(form_module.message, className),
         ...props,
         children: body
     });
 });
 FormMessage.displayName = "FormMessage";
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+FormField.displayName = "FormField";
+export { Controller, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useController, useFieldArray, useForm, useFormContext, useFormField, useFormState, useWatch };
 
 //# sourceMappingURL=form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/form.js","sources":["../../../src/components/ui/form.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport * as React from \"react\";\r\nimport {Controller, FormProvider, useFormContext, type ControllerProps, type FieldPath, type FieldValues} from \"react-hook-form\";\r\n\r\nimport {Label} from \"@/components/ui/label\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst Form = FormProvider;\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n  name: TName;\r\n};\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null);\r\n\r\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\r\n  ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{name: props.name}}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  );\r\n};\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext);\r\n  const itemContext = React.useContext(FormItemContext);\r\n  const {getFieldState, formState} = useFormContext();\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\");\r\n  }\r\n\r\n  if (!itemContext) {\r\n    throw new Error(\"useFormField should be used within <FormItem>\");\r\n  }\r\n\r\n  const fieldState = getFieldState(fieldContext.name, formState);\r\n\r\n  const {id} = itemContext;\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  };\r\n};\r\n\r\ntype FormItemContextValue = {\r\n  id: string;\r\n};\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\r\n\r\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {\r\n  const id = React.useId();\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{id}}>\r\n      <div\r\n        ref={ref}\r\n        className={cn(\"space-y-2\", className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  );\r\n});\r\nFormItem.displayName = \"FormItem\";\r\n\r\nconst FormLabel = React.forwardRef<\r\n  React.ComponentRef<typeof LabelPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\r\n>(({className, ...props}, ref) => {\r\n  const {error, formItemId} = useFormField();\r\n\r\n  return (\r\n    <Label\r\n      ref={ref}\r\n      className={cn(error && \"text-red-500 dark:text-red-900\", className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormLabel.displayName = \"FormLabel\";\r\n\r\nconst FormControl = React.forwardRef<React.ComponentRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({...props}, ref) => {\r\n  const {error, formItemId, formDescriptionId, formMessageId} = useFormField();\r\n\r\n  return (\r\n    <Slot\r\n      ref={ref}\r\n      id={formItemId}\r\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`}\r\n      aria-invalid={Boolean(error)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormControl.displayName = \"FormControl\";\r\n\r\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({className, ...props}, ref) => {\r\n  const {formDescriptionId} = useFormField();\r\n\r\n  return (\r\n    <p\r\n      ref={ref}\r\n      id={formDescriptionId}\r\n      className={cn(\"text-[0.8rem] text-neutral-500 dark:text-neutral-400\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormDescription.displayName = \"FormDescription\";\r\n\r\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\r\n  ({className, children, ...props}, ref) => {\r\n    const {error, formMessageId} = useFormField();\r\n    const body = error ? String(error?.message ?? \"\") : children;\r\n\r\n    if (!body) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <p\r\n        ref={ref}\r\n        id={formMessageId}\r\n        className={cn(\"text-[0.8rem] font-medium text-red-500 dark:text-red-900\", className)}\r\n        {...props}>\r\n        {body}\r\n      </p>\r\n    );\r\n  },\r\n);\r\nFormMessage.displayName = \"FormMessage\";\r\n\r\nexport {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField};\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","Error","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","Boolean","FormDescription","FormMessage","children","body","String"],"mappings":"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"}
+{"version":3,"file":"components/ui/form.js","sources":["../../../src/components/ui/form.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/* eslint-disable react/prop-types */\r\n\r\nimport * as React from \"react\";\r\nimport {Controller, FormProvider, useFormContext, type ControllerProps, type FieldPath, type FieldValues} from \"react-hook-form\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nimport styles from \"./form.module.css\";\r\n\r\n/**\r\n * Provides the `react-hook-form` context to nested form primitives.\r\n *\r\n * @remarks\r\n * - Renders the `FormProvider` component from `react-hook-form`\r\n * - Built on `react-hook-form`\r\n *\r\n * @example\r\n * ```tsx\r\n * <Form {...form}>\r\n *   <form>...</form>\r\n * </Form>\r\n * ```\r\n *\r\n * @see {@link https://react-hook-form.com/docs/formprovider | React Hook Form FormProvider Docs}\r\n */\r\nconst Form = Object.assign(FormProvider, {displayName: \"Form\"});\r\n\r\ntype FormControlElementProps = React.HTMLAttributes<HTMLElement> & {\r\n  ref?: React.Ref<HTMLElement>;\r\n};\r\n\r\ninterface FormControlProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\r\n  /**\r\n   * Single form control element or fallback content to receive field accessibility attributes.\r\n   * @default undefined\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\nfunction assignRef<TValue>(ref: React.Ref<TValue> | undefined, value: TValue | null): void {\r\n  if (typeof ref === \"function\") {\r\n    ref(value);\r\n    return;\r\n  }\r\n\r\n  if (ref) {\r\n    ref.current = value;\r\n  }\r\n}\r\n\r\nfunction composeRefs<TValue>(...refs: Array<React.Ref<TValue> | undefined>): React.RefCallback<TValue> {\r\n  return (value: TValue | null): void => {\r\n    for (const ref of refs) {\r\n      assignRef(ref, value);\r\n    }\r\n  };\r\n}\r\n\r\nfunction mergeAriaDescribedBy(...describedByValues: Array<string | undefined>): string | undefined {\r\n  const tokens = describedByValues\r\n    .flatMap((describedByValue) => describedByValue?.split(/\\s+/u) ?? [])\r\n    .filter((token): token is string => token.length > 0);\r\n\r\n  return tokens.length > 0 ? [...new Set(tokens)].join(\" \") : undefined;\r\n}\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n  name: TName;\r\n};\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null);\r\n\r\n/**\r\n * Binds a single field name to the shared form field context.\r\n *\r\n * @remarks\r\n * - Renders the `Controller` component from `react-hook-form`\r\n * - Built on `react-hook-form` controller primitives\r\n *\r\n * @example\r\n * ```tsx\r\n * <FormField\r\n *   control={form.control}\r\n *   name='email'\r\n *   render={({field}) => <input {...field} />}\r\n * />\r\n * ```\r\n *\r\n * @see {@link https://react-hook-form.com/docs/usecontroller/controller | React Hook Form Controller Docs}\r\n */\r\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\r\n  ...props\r\n}: ControllerProps<TFieldValues, TName>): React.JSX.Element => {\r\n  return (\r\n    <FormFieldContext.Provider value={{name: props.name}}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  );\r\n};\r\n\r\ntype UseFormFieldReturn = {\r\n  id: string;\r\n  name: FieldPath<FieldValues>;\r\n  formItemId: string;\r\n  formDescriptionId: string;\r\n  formMessageId: string;\r\n  invalid: boolean;\r\n  isDirty: boolean;\r\n  isTouched: boolean;\r\n  isValidating: boolean;\r\n  error?: ReturnType<ReturnType<typeof useFormContext>[\"getFieldState\"]>[\"error\"];\r\n};\r\n\r\n/**\r\n * Returns the resolved form field metadata for nested form primitives.\r\n *\r\n * @remarks\r\n * Reads the nearest {@link FormField} and {@link FormItem} contexts, then combines them\r\n * with `react-hook-form` field state to expose stable IDs and validation metadata.\r\n *\r\n * @example\r\n * ```tsx\r\n * const field = useFormField();\r\n * ```\r\n *\r\n * @see {@link https://react-hook-form.com/docs/useformcontext | React Hook Form useFormContext Docs}\r\n */\r\nconst useFormField = (): UseFormFieldReturn => {\r\n  const fieldContext = React.useContext(FormFieldContext);\r\n  const itemContext = React.useContext(FormItemContext);\r\n  const {getFieldState, formState} = useFormContext();\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\");\r\n  }\r\n\r\n  if (!itemContext) {\r\n    throw new Error(\"useFormField should be used within <FormItem>\");\r\n  }\r\n\r\n  const fieldState = getFieldState(fieldContext.name, formState);\r\n  const {id} = itemContext;\r\n\r\n  return {\r\n    error: fieldState.error,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formItemId: `${id}-form-item`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    id,\r\n    invalid: fieldState.invalid,\r\n    isDirty: fieldState.isDirty,\r\n    isTouched: fieldState.isTouched,\r\n    isValidating: fieldState.isValidating,\r\n    name: fieldContext.name as FieldPath<FieldValues>,\r\n  };\r\n};\r\n\r\ntype FormItemContextValue = {\r\n  id: string;\r\n};\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\r\n\r\n/**\r\n * Wraps a label, control, description, and message into a single form item.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element\r\n * - Built on the shared form item context\r\n *\r\n * @example\r\n * ```tsx\r\n * <FormItem>\r\n *   <FormLabel>Email</FormLabel>\r\n * </FormItem>\r\n * ```\r\n *\r\n * @see {@link https://react-hook-form.com/docs/useformcontext | React Hook Form Docs}\r\n */\r\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {\r\n  const id = React.useId();\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{id}}>\r\n      <div\r\n        ref={ref}\r\n        className={cn(styles.item, className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  );\r\n});\r\nFormItem.displayName = \"FormItem\";\r\n\r\n/**\r\n * Renders the accessible label for the current form item.\r\n *\r\n * @remarks\r\n * - Renders a `<label>` element\r\n * - Built on the shared form field metadata hook\r\n *\r\n * @example\r\n * ```tsx\r\n * <FormLabel>Email</FormLabel>\r\n * ```\r\n *\r\n * @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/label | HTML label element}\r\n */\r\nconst FormLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(({className, ...props}, ref) => {\r\n  const {error, formItemId} = useFormField();\r\n\r\n  return (\r\n    <label\r\n      ref={ref}\r\n      className={cn(error && styles.labelError, className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormLabel.displayName = \"FormLabel\";\r\n\r\n/**\r\n * Provides react-hook-form field metadata to a single control element.\r\n *\r\n * @remarks\r\n * This replaces the former Radix Slot-based implementation by cloning the\r\n * direct child element and merging the accessibility attributes required by the\r\n * surrounding form primitives. A fallback wrapper is rendered only when the\r\n * child is not a valid React element.\r\n */\r\nconst FormControl = React.forwardRef<HTMLElement, FormControlProps>(\r\n  ({children, ...props}: Readonly<FormControlProps>, ref): React.JSX.Element => {\r\n    const {error, formDescriptionId, formItemId, formMessageId} = useFormField();\r\n    const describedBy = mergeAriaDescribedBy(\r\n      typeof props[\"aria-describedby\"] === \"string\" ? props[\"aria-describedby\"] : undefined,\r\n      formDescriptionId,\r\n      error ? formMessageId : undefined,\r\n    );\r\n\r\n    if (React.isValidElement(children)) {\r\n      const child = children as React.ReactElement<FormControlElementProps>;\r\n      const childDescribedBy = typeof child.props[\"aria-describedby\"] === \"string\" ? child.props[\"aria-describedby\"] : undefined;\r\n\r\n      // eslint-disable-next-line react-x/no-clone-element -- removes Radix Slot while preserving child element semantics\r\n      return React.cloneElement(child, {\r\n        ...props,\r\n        ref: composeRefs(ref, child.props.ref),\r\n        id: formItemId,\r\n        \"aria-describedby\": mergeAriaDescribedBy(childDescribedBy, describedBy),\r\n        \"aria-invalid\": Boolean(error),\r\n      });\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref as React.Ref<HTMLDivElement>}\r\n        id={formItemId}\r\n        aria-describedby={describedBy}\r\n        aria-invalid={Boolean(error)}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nFormControl.displayName = \"FormControl\";\r\n\r\n/**\r\n * Renders helper text that describes the current form control.\r\n *\r\n * @remarks\r\n * - Renders a `<p>` element\r\n * - Built on the shared form field metadata hook\r\n *\r\n * @example\r\n * ```tsx\r\n * <FormDescription>We'll never share your email.</FormDescription>\r\n * ```\r\n *\r\n * @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/p | HTML paragraph element}\r\n */\r\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({className, ...props}, ref) => {\r\n  const {formDescriptionId} = useFormField();\r\n\r\n  return (\r\n    <p\r\n      ref={ref}\r\n      id={formDescriptionId}\r\n      className={cn(styles.description, className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormDescription.displayName = \"FormDescription\";\r\n\r\n/**\r\n * Renders the validation message or fallback message for the current form control.\r\n *\r\n * @remarks\r\n * - Renders a `<p>` element when content is available\r\n * - Built on the shared form field metadata hook\r\n *\r\n * @example\r\n * ```tsx\r\n * <FormMessage />\r\n * ```\r\n *\r\n * @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid | ARIA invalid state}\r\n */\r\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\r\n  ({className, children, ...props}, ref) => {\r\n    const {error, formMessageId} = useFormField();\r\n    const body = error ? String(error.message ?? \"\") : children;\r\n\r\n    if (!body) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <p\r\n        ref={ref}\r\n        id={formMessageId}\r\n        className={cn(styles.message, className)}\r\n        {...props}>\r\n        {body}\r\n      </p>\r\n    );\r\n  },\r\n);\r\nFormMessage.displayName = \"FormMessage\";\r\nFormField.displayName = \"FormField\";\r\n\r\nexport {Controller, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch} from \"react-hook-form\";\r\nexport type {\r\n  Control,\r\n  ControllerFieldState,\r\n  ControllerProps,\r\n  ControllerRenderProps,\r\n  DefaultValues,\r\n  FieldError,\r\n  FieldErrors,\r\n  FieldPath,\r\n  FieldValues,\r\n  Path,\r\n  RegisterOptions,\r\n  Resolver,\r\n  SubmitHandler,\r\n  UseControllerReturn,\r\n  UseFieldArrayReturn,\r\n  UseFormReturn,\r\n} from \"react-hook-form\";\r\nexport {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField};\r\nexport type {FormControlProps};\r\n"],"names":["Form","Object","FormProvider","assignRef","ref","value","composeRefs","refs","mergeAriaDescribedBy","describedByValues","tokens","describedByValue","token","Set","undefined","FormFieldContext","React","FormField","props","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","Error","fieldState","id","FormItem","className","cn","styles","FormLabel","error","formItemId","FormControl","children","formDescriptionId","formMessageId","describedBy","child","childDescribedBy","Boolean","FormDescription","FormMessage","body","String"],"mappings":"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"}

package/dist/components/ui/form.module.js

@@ -0,0 +1,10 @@
+import "./form_module.css";
+const form_module = {
+    item: "item-kXRJ67",
+    labelError: "labelError-R0Bie6",
+    description: "description-yOLp5t",
+    message: "message-yxAxP5"
+};
+export default form_module;
+
+//# sourceMappingURL=form.module.js.map

package/dist/components/ui/form.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/form.module.js","sources":["../../../src/components/ui/form.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./form_module.css\"\nexport default {\"item\":\"item-kXRJ67\",\"labelError\":\"labelError-R0Bie6\",\"description\":\"description-yOLp5t\",\"message\":\"message-yxAxP5\"};"],"names":[],"mappings":";AAEA,oBAAe;IAAC,MAAO;IAAc,YAAa;IAAoB,aAAc;IAAqB,SAAU;AAAgB"}

package/dist/components/ui/form_module.css

@@ -0,0 +1,22 @@
+.item-kXRJ67 {
+  gap: var(--ac-space-2);
+  display: grid;
+}
+
+.labelError-R0Bie6 {
+  color: var(--ac-destructive);
+}
+
+.description-yOLp5t {
+  color: var(--ac-muted-foreground);
+  font-size: .8rem;
+}
+
+.message-yxAxP5 {
+  color: var(--ac-destructive);
+  font-size: .8rem;
+  font-weight: 500;
+}
+
+
+/*# sourceMappingURL=form_module.css.map */

package/dist/components/ui/form_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/form.module.css","webpack://./src/components/ui/form.module.css"],"names":[],"mappings":"AADA;ECEE,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,iCAAiC;EACjC,gBAAgB;AAClB;;AAEA;EACE,4BAA4B;EAC5B,gBAAgB;EAChB,gBAAgB;AAClB","sourcesContent":[".item{display:grid;gap:var(--ac-space-2)}.labelError{color:var(--ac-destructive)}.description{color:var(--ac-muted-foreground);font-size:.8rem}.message{color:var(--ac-destructive);font-size:.8rem;font-weight:500}",".item {\n  gap: var(--ac-space-2);\n  display: grid;\n}\n\n.labelError {\n  color: var(--ac-destructive);\n}\n\n.description {\n  color: var(--ac-muted-foreground);\n  font-size: .8rem;\n}\n\n.message {\n  color: var(--ac-destructive);\n  font-size: .8rem;\n  font-weight: 500;\n}\n"],"sourceRoot":""}

package/dist/components/ui/gradient-background.d.ts

@@ -1,8 +1,26 @@
-import { HTMLMotionProps, type Transition } from "motion/react";
+import { type HTMLMotionProps, type Transition } from "motion/react";
 import * as React from "react";
-interface GradientBackgroundProps extends HTMLMotionProps<"div"> {
+/** Props accepted by {@link GradientBackground}. */
+export interface GradientBackgroundProps extends HTMLMotionProps<"div"> {
+    /** Motion timing used for the animated background-position sweep. @default {duration: 15, ease: "easeInOut", repeat: Infinity} */
     transition?: Transition;
 }
+/**
+ * Renders a continuously shifting multicolor gradient background.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <GradientBackground />
+ * ```
+ *
+ * @see {@link GradientBackgroundProps} for available props
+ */
 declare const GradientBackground: React.ForwardRefExoticComponent<Omit<GradientBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { GradientBackground, type GradientBackgroundProps };
+export { GradientBackground };
 //# sourceMappingURL=gradient-background.d.ts.map

package/dist/components/ui/gradient-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gradient-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/gradient-background.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAU,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,uBAAwB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC9D,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,6GAcvB,CAAC;AAIF,OAAO,EAAC,kBAAkB,EAAE,KAAK,uBAAuB,EAAC,CAAC"}
+{"version":3,"file":"gradient-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/gradient-background.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,eAAe,EAAE,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,oDAAoD;AACpD,MAAM,WAAW,uBAAwB,SAAQ,eAAe,CAAC,KAAK,CAAC;IACrE,kIAAkI;IAClI,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,kBAAkB,6GAiBvB,CAAC;AAIF,OAAO,EAAC,kBAAkB,EAAC,CAAC"}

package/dist/components/ui/gradient-background.js

@@ -3,13 +3,16 @@ import { jsx } from "react/jsx-runtime";
 import { motion } from "motion/react";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
+import gradient_background_module from "./gradient-background.module.js";
 const GradientBackground = /*#__PURE__*/ forwardRef(({ className, transition = {
     duration: 15,
     ease: "easeInOut",
     repeat: 1 / 0
-}, ...props }, ref)=>/*#__PURE__*/ jsx(motion.div, {
+}, ...props }, ref)=>{
+    const { key: _ignoredKey, ...restProps } = props;
+    return /*#__PURE__*/ jsx(motion.div, {
         ref: ref,
-        className: cn("size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]", className),
+        className: cn(gradient_background_module.root, className),
         animate: {
             backgroundPosition: [
                 "0% 50%",
@@ -18,8 +21,9 @@ const GradientBackground = /*#__PURE__*/ forwardRef(({ className, transition = {
             ]
         },
         transition: transition,
-        ...props
-    }));
+        ...restProps
+    });
+});
 GradientBackground.displayName = "GradientBackground";
 export { GradientBackground };
 

package/dist/components/ui/gradient-background.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/gradient-background.js","sources":["../../../src/components/ui/gradient-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {HTMLMotionProps, motion, type Transition} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\ninterface GradientBackgroundProps extends HTMLMotionProps<\"div\"> {\r\n  transition?: Transition;\r\n}\r\n\r\nconst GradientBackground = React.forwardRef<HTMLDivElement, GradientBackgroundProps>(\r\n  ({className, transition = {duration: 15, ease: \"easeInOut\", repeat: Infinity}, ...props}, ref) => {\r\n    return (\r\n      <motion.div\r\n        ref={ref}\r\n        className={cn(\"size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]\", className)}\r\n        animate={{\r\n          backgroundPosition: [\"0% 50%\", \"100% 50%\", \"0% 50%\"],\r\n        }}\r\n        transition={transition}\r\n        {...props}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nGradientBackground.displayName = \"GradientBackground\";\r\n\r\nexport {GradientBackground, type GradientBackgroundProps};\r\n"],"names":["GradientBackground","React","className","transition","Infinity","props","ref","motion","cn"],"mappings":";;;;;AAWA,MAAMA,qBAAqB,WAArBA,GAAqBC,WACzB,CAAC,EAACC,SAAS,EAAEC,aAAa;IAAC,UAAU;IAAI,MAAM;IAAa,QAAQC;AAAQ,CAAC,EAAE,GAAGC,OAAM,EAAEC,MACjF,WAAP,GACE,IAACC,OAAO,GAAG;QACT,KAAKD;QACL,WAAWE,GAAG,8FAA8FN;QAC5G,SAAS;YACP,oBAAoB;gBAAC;gBAAU;gBAAY;aAAS;QACtD;QACA,YAAYC;QACX,GAAGE,KAAK;;AAMjBL,mBAAmB,WAAW,GAAG"}
+{"version":3,"file":"components/ui/gradient-background.js","sources":["../../../src/components/ui/gradient-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, type HTMLMotionProps, type Transition} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./gradient-background.module.css\";\r\n\r\n/** Props accepted by {@link GradientBackground}. */\r\nexport interface GradientBackgroundProps extends HTMLMotionProps<\"div\"> {\r\n  /** Motion timing used for the animated background-position sweep. @default {duration: 15, ease: \"easeInOut\", repeat: Infinity} */\r\n  transition?: Transition;\r\n}\r\n\r\n/**\r\n * Renders a continuously shifting multicolor gradient background.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <GradientBackground />\r\n * ```\r\n *\r\n * @see {@link GradientBackgroundProps} for available props\r\n */\r\nconst GradientBackground = React.forwardRef<HTMLDivElement, GradientBackgroundProps>(\r\n  ({className, transition = {duration: 15, ease: \"easeInOut\", repeat: Infinity}, ...props}, ref) => {\r\n    // eslint-disable-next-line sonarjs/no-unused-vars -- removing React key avoids implicit key spreading\r\n    const {key: _ignoredKey, ...restProps} = props;\r\n\r\n    return (\r\n      <motion.div\r\n        ref={ref}\r\n        className={cn(styles.root, className)}\r\n        animate={{\r\n          backgroundPosition: [\"0% 50%\", \"100% 50%\", \"0% 50%\"],\r\n        }}\r\n        transition={transition}\r\n        {...restProps}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nGradientBackground.displayName = \"GradientBackground\";\r\n\r\nexport {GradientBackground};\r\n"],"names":["GradientBackground","React","className","transition","Infinity","props","ref","_ignoredKey","restProps","motion","cn","styles"],"mappings":";;;;;;AA8BA,MAAMA,qBAAqB,WAAHA,GAAGC,WACzB,CAAC,EAACC,SAAS,EAAEC,aAAa;IAAC,UAAU;IAAI,MAAM;IAAa,QAAQC;AAAQ,CAAC,EAAE,GAAGC,OAAM,EAAEC;IAExF,MAAM,EAAC,KAAKC,WAAW,EAAE,GAAGC,WAAU,GAAGH;IAEzC,OAAO,WAAP,GACE,IAACI,OAAO,GAAG;QACT,KAAKH;QACL,WAAWI,GAAGC,2BAAAA,IAAW,EAAET;QAC3B,SAAS;YACP,oBAAoB;gBAAC;gBAAU;gBAAY;aAAS;QACtD;QACA,YAAYC;QACX,GAAGK,SAAS;;AAGnB;AAGFR,mBAAmB,WAAW,GAAG"}

package/dist/components/ui/gradient-background.module.js

@@ -0,0 +1,7 @@
+import "./gradient-background_module.css";
+const gradient_background_module = {
+    root: "root-k726lA"
+};
+export default gradient_background_module;
+
+//# sourceMappingURL=gradient-background.module.js.map

package/dist/components/ui/gradient-background.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/gradient-background.module.js","sources":["../../../src/components/ui/gradient-background.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./gradient-background_module.css\"\nexport default {\"root\":\"root-k726lA\"};"],"names":[],"mappings":";AAEA,mCAAe;IAAC,MAAO;AAAa"}

package/dist/components/ui/gradient-background_module.css

@@ -0,0 +1,9 @@
+.root-k726lA {
+  background-image: linear-gradient(135deg, #3b82f6, #a855f7 50%, #ec4899);
+  background-size: 400% 400%;
+  width: 100%;
+  height: 100%;
+}
+
+
+/*# sourceMappingURL=gradient-background_module.css.map */

package/dist/components/ui/gradient-background_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/gradient-background.module.css","webpack://./src/components/ui/gradient-background.module.css"],"names":[],"mappings":"AADA;ECEE,wEAAwE;EACxE,0BAA0B;EAC1B,WAAW;EACX,YAAY;AACd","sourcesContent":[".root{background-image:linear-gradient(135deg,#3b82f6,#a855f7 50%,#ec4899);background-size:400% 400%;height:100%;width:100%}",".root {\n  background-image: linear-gradient(135deg, #3b82f6, #a855f7 50%, #ec4899);\n  background-size: 400% 400%;\n  width: 100%;\n  height: 100%;\n}\n"],"sourceRoot":""}

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

@@ -1,11 +1,32 @@
 import { type Transition } from "motion/react";
 import * as React from "react";
-interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+/** Props accepted by {@link GradientText}. */
+export interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Text content rendered with the animated gradient fill. @default undefined */
     text: string;
+    /** CSS gradient string assigned to the animated text fill. @default "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)" */
     gradient?: string;
+    /** Adds a blurred neon duplicate behind the primary text layer. @default false */
     neon?: boolean;
+    /** Motion timing used for the animated gradient background. @default {duration: 50, repeat: Infinity, ease: "linear"} */
     transition?: Transition;
 }
+/**
+ * Renders animated gradient-filled text with an optional neon glow layer.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <GradientText text="Launch ready" />
+ * ```
+ *
+ * @see {@link GradientTextProps} for available props
+ */
 declare const GradientText: React.ForwardRefExoticComponent<GradientTextProps & React.RefAttributes<HTMLSpanElement>>;
-export { GradientText, type GradientTextProps };
+export { GradientText };
 //# sourceMappingURL=gradient-text.d.ts.map

package/dist/components/ui/gradient-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gradient-text.d.ts","sourceRoot":"","sources":["../../../src/components/ui/gradient-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,2FA2CjB,CAAC;AAIF,OAAO,EAAC,YAAY,EAAE,KAAK,iBAAiB,EAAC,CAAC"}
+{"version":3,"file":"gradient-text.d.ts","sourceRoot":"","sources":["../../../src/components/ui/gradient-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,8CAA8C;AAC9C,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9E,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,iKAAiK;IACjK,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yHAAyH;IACzH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAMD;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,YAAY,2FA4CjB,CAAC;AAIF,OAAO,EAAC,YAAY,EAAC,CAAC"}

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

@@ -3,21 +3,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
+import gradient_text_module from "./gradient-text.module.js";
 const GradientText = /*#__PURE__*/ forwardRef(({ text, className, gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)", neon = false, transition = {
     duration: 50,
     repeat: 1 / 0,
     ease: "linear"
 }, ...props }, ref)=>{
     const baseStyle = {
-        backgroundImage: gradient
+        "--ac-gradient-text-background": gradient
     };
     return /*#__PURE__*/ jsxs("span", {
         ref: ref,
-        className: cn("relative inline-block", className),
+        className: cn(gradient_text_module.root, className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(motion.span, {
-                className: "m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent",
+                className: gradient_text_module.text,
                 style: baseStyle,
                 initial: {
                     backgroundPosition: "0% 0%"
@@ -28,8 +29,9 @@ const GradientText = /*#__PURE__*/ forwardRef(({ text, className, gradient = "li
                 transition: transition,
                 children: text
             }),
-            Boolean(neon) && /*#__PURE__*/ jsx(motion.span, {
-                className: "absolute top-0 left-0 m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent mix-blend-plus-lighter blur-[8px]",
+            neon ? /*#__PURE__*/ jsx(motion.span, {
+                "aria-hidden": "true",
+                className: gradient_text_module.neon,
                 style: baseStyle,
                 initial: {
                     backgroundPosition: "0% 0%"
@@ -39,7 +41,7 @@ const GradientText = /*#__PURE__*/ forwardRef(({ text, className, gradient = "li
                 },
                 transition: transition,
                 children: text
-            })
+            }) : null
         ]
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/gradient-text.js","sources":["../../../src/components/ui/gradient-text.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, type Transition} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\ninterface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  text: string;\r\n  gradient?: string;\r\n  neon?: boolean;\r\n  transition?: Transition;\r\n}\r\n\r\nconst GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(\r\n  (\r\n    {\r\n      text,\r\n      className,\r\n      gradient = \"linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)\",\r\n      neon = false,\r\n      transition = {duration: 50, repeat: Infinity, ease: \"linear\"},\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const baseStyle: React.CSSProperties = {\r\n      backgroundImage: gradient,\r\n    };\r\n\r\n    return (\r\n      <span\r\n        ref={ref}\r\n        className={cn(\"relative inline-block\", className)}\r\n        {...props}>\r\n        <motion.span\r\n          className='m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent'\r\n          style={baseStyle}\r\n          initial={{backgroundPosition: \"0% 0%\"}}\r\n          animate={{backgroundPosition: \"500% 100%\"}}\r\n          transition={transition}>\r\n          {text}\r\n        </motion.span>\r\n\r\n        {Boolean(neon) && (\r\n          <motion.span\r\n            className='absolute top-0 left-0 m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent mix-blend-plus-lighter blur-[8px]'\r\n            style={baseStyle}\r\n            initial={{backgroundPosition: \"0% 0%\"}}\r\n            animate={{backgroundPosition: \"500% 100%\"}}\r\n            transition={transition}>\r\n            {text}\r\n          </motion.span>\r\n        )}\r\n      </span>\r\n    );\r\n  },\r\n);\r\n\r\nGradientText.displayName = \"GradientText\";\r\n\r\nexport {GradientText, type GradientTextProps};\r\n"],"names":["GradientText","React","text","className","gradient","neon","transition","Infinity","props","ref","baseStyle","cn","motion","Boolean"],"mappings":";;;;;AAcA,MAAMA,eAAe,WAAfA,GAAeC,WACnB,CACE,EACEC,IAAI,EACJC,SAAS,EACTC,WAAW,yFAAyF,EACpGC,OAAO,KAAK,EACZC,aAAa;IAAC,UAAU;IAAI,QAAQC;IAAU,MAAM;AAAQ,CAAC,EAC7D,GAAGC,OACJ,EACDC;IAEA,MAAMC,YAAiC;QACrC,iBAAiBN;IACnB;IAEA,OAAO,WAAP,GACE,KAAC;QACC,KAAKK;QACL,WAAWE,GAAG,yBAAyBR;QACtC,GAAGK,KAAK;;0BACT,IAACI,OAAO,IAAI;gBACV,WAAU;gBACV,OAAOF;gBACP,SAAS;oBAAC,oBAAoB;gBAAO;gBACrC,SAAS;oBAAC,oBAAoB;gBAAW;gBACzC,YAAYJ;0BACXJ;;YAGFW,QAAQR,SAAS,WAATA,GACP,IAACO,OAAO,IAAI;gBACV,WAAU;gBACV,OAAOF;gBACP,SAAS;oBAAC,oBAAoB;gBAAO;gBACrC,SAAS;oBAAC,oBAAoB;gBAAW;gBACzC,YAAYJ;0BACXJ;;;;AAKX;AAGFF,aAAa,WAAW,GAAG"}
+{"version":3,"file":"components/ui/gradient-text.js","sources":["../../../src/components/ui/gradient-text.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, type Transition} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./gradient-text.module.css\";\r\n\r\n/** Props accepted by {@link GradientText}. */\r\nexport interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  /** Text content rendered with the animated gradient fill. @default undefined */\r\n  text: string;\r\n  /** CSS gradient string assigned to the animated text fill. @default \"linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)\" */\r\n  gradient?: string;\r\n  /** Adds a blurred neon duplicate behind the primary text layer. @default false */\r\n  neon?: boolean;\r\n  /** Motion timing used for the animated gradient background. @default {duration: 50, repeat: Infinity, ease: \"linear\"} */\r\n  transition?: Transition;\r\n}\r\n\r\ntype GradientStyleProperties = React.CSSProperties & {\r\n  \"--ac-gradient-text-background\": string;\r\n};\r\n\r\n/**\r\n * Renders animated gradient-filled text with an optional neon glow layer.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<span>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <GradientText text=\"Launch ready\" />\r\n * ```\r\n *\r\n * @see {@link GradientTextProps} for available props\r\n */\r\nconst GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(\r\n  (\r\n    {\r\n      text,\r\n      className,\r\n      gradient = \"linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)\",\r\n      neon = false,\r\n      transition = {duration: 50, repeat: Infinity, ease: \"linear\"},\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const baseStyle: GradientStyleProperties = {\r\n      \"--ac-gradient-text-background\": gradient,\r\n    };\r\n\r\n    return (\r\n      <span\r\n        ref={ref}\r\n        className={cn(styles.root, className)}\r\n        {...props}>\r\n        <motion.span\r\n          className={styles.text}\r\n          style={baseStyle}\r\n          initial={{backgroundPosition: \"0% 0%\"}}\r\n          animate={{backgroundPosition: \"500% 100%\"}}\r\n          transition={transition}>\r\n          {text}\r\n        </motion.span>\r\n\r\n        {neon ? (\r\n          <motion.span\r\n            aria-hidden='true'\r\n            className={styles.neon}\r\n            style={baseStyle}\r\n            initial={{backgroundPosition: \"0% 0%\"}}\r\n            animate={{backgroundPosition: \"500% 100%\"}}\r\n            transition={transition}>\r\n            {text}\r\n          </motion.span>\r\n        ) : null}\r\n      </span>\r\n    );\r\n  },\r\n);\r\n\r\nGradientText.displayName = \"GradientText\";\r\n\r\nexport {GradientText};\r\n"],"names":["GradientText","React","text","className","gradient","neon","transition","Infinity","props","ref","baseStyle","cn","styles","motion"],"mappings":";;;;;;AAwCA,MAAMA,eAAe,WAAHA,GAAGC,WACnB,CACE,EACEC,IAAI,EACJC,SAAS,EACTC,WAAW,yFAAyF,EACpGC,OAAO,KAAK,EACZC,aAAa;IAAC,UAAU;IAAI,QAAQC;IAAU,MAAM;AAAQ,CAAC,EAC7D,GAAGC,OACJ,EACDC;IAEA,MAAMC,YAAqC;QACzC,iCAAiCN;IACnC;IAEA,OAAO,WAAP,GACE,KAAC;QACC,KAAKK;QACL,WAAWE,GAAGC,qBAAAA,IAAW,EAAET;QAC1B,GAAGK,KAAK;;0BACT,IAACK,OAAO,IAAI;gBACV,WAAWD,qBAAAA,IAAW;gBACtB,OAAOF;gBACP,SAAS;oBAAC,oBAAoB;gBAAO;gBACrC,SAAS;oBAAC,oBAAoB;gBAAW;gBACzC,YAAYJ;0BACXJ;;YAGFG,OAAO,WAAPA,GACC,IAACQ,OAAO,IAAI;gBACV,eAAY;gBACZ,WAAWD,qBAAAA,IAAW;gBACtB,OAAOF;gBACP,SAAS;oBAAC,oBAAoB;gBAAO;gBACrC,SAAS;oBAAC,oBAAoB;gBAAW;gBACzC,YAAYJ;0BACXJ;iBAED;;;AAGV;AAGFF,aAAa,WAAW,GAAG"}

package/dist/components/ui/gradient-text.module.js

@@ -0,0 +1,9 @@
+import "./gradient-text_module.css";
+const gradient_text_module = {
+    root: "root-lzRVsJ",
+    neon: "neon-gZ2mQJ",
+    text: "text-P04R0z"
+};
+export default gradient_text_module;
+
+//# sourceMappingURL=gradient-text.module.js.map

package/dist/components/ui/gradient-text.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/gradient-text.module.js","sources":["../../../src/components/ui/gradient-text.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./gradient-text_module.css\"\nexport default {\"root\":\"root-lzRVsJ\",\"neon\":\"neon-gZ2mQJ\",\"text\":\"text-P04R0z\"};"],"names":[],"mappings":";AAEA,6BAAe;IAAC,MAAO;IAAc,MAAO;IAAc,MAAO;AAAa"}

package/dist/components/ui/gradient-text_module.css

@@ -0,0 +1,24 @@
+.root-lzRVsJ {
+  display: inline-block;
+  position: relative;
+}
+
+.neon-gZ2mQJ, .text-P04R0z {
+  background-clip: text;
+  background-image: var(--ac-gradient-text-background);
+  color: #0000;
+  background-position: 0 0;
+  background-size: 700% 100%;
+  margin: 0;
+}
+
+.neon-gZ2mQJ {
+  filter: blur(8px);
+  mix-blend-mode: plus-lighter;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+
+/*# sourceMappingURL=gradient-text_module.css.map */

package/dist/components/ui/gradient-text_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/gradient-text.module.css","webpack://./src/components/ui/gradient-text.module.css"],"names":[],"mappings":"AADA;ECEE,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;EACE,qBAAqB;EACrB,oDAAoD;EACpD,YAAY;EACZ,wBAAwB;EACxB,0BAA0B;EAC1B,SAAS;AACX;;AAEA;EACE,iBAAiB;EACjB,4BAA4B;EAC5B,oBAAoB;EACpB,kBAAkB;EAClB,QAAQ;AACV","sourcesContent":[".root{display:inline-block;position:relative}.neon,.text{-webkit-background-clip:text;background-clip:text;background-image:var(--ac-gradient-text-background);background-position:0 0;background-size:700% 100%;color:transparent;margin:0}.neon{filter:blur(8px);inset:0;mix-blend-mode:plus-lighter;pointer-events:none;position:absolute}",".root {\n  display: inline-block;\n  position: relative;\n}\n\n.neon, .text {\n  background-clip: text;\n  background-image: var(--ac-gradient-text-background);\n  color: #0000;\n  background-position: 0 0;\n  background-size: 700% 100%;\n  margin: 0;\n}\n\n.neon {\n  filter: blur(8px);\n  mix-blend-mode: plus-lighter;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n}\n"],"sourceRoot":""}

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

@@ -1,12 +1,34 @@
 import { type HTMLMotionProps, type Transition, type UseInViewOptions } from "motion/react";
 import * as React from "react";
-interface HighlightTextProps extends HTMLMotionProps<"span"> {
+/** Props accepted by {@link HighlightText}. */
+export interface HighlightTextProps extends HTMLMotionProps<"span"> {
+    /** Inline text content that receives the animated highlight sweep. @default undefined */
     text: string;
+    /** Delays the highlight animation until the text enters the viewport. @default false */
     inView?: boolean;
+    /** Margin passed to the in-view observer when `inView` is enabled. @default "0px" */
     inViewMargin?: UseInViewOptions["margin"];
+    /** Prevents the in-view animation from replaying after the first reveal. @default true */
     inViewOnce?: boolean;
+    /** Motion timing used for the highlight fill animation. @default {duration: 2, ease: "easeInOut"} */
     transition?: Transition;
 }
+/**
+ * Animates a gradient highlight fill behind inline text content.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <HighlightText text="Highlighted copy" />
+ * ```
+ *
+ * @see {@link HighlightTextProps} for available props
+ */
 declare const HighlightText: React.ForwardRefExoticComponent<Omit<HighlightTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export { HighlightText, type HighlightTextProps };
+export { HighlightText };
 //# sourceMappingURL=highlight-text.d.ts.map

package/dist/components/ui/highlight-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight-text.d.ts","sourceRoot":"","sources":["../../../src/components/ui/highlight-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,KAAK,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC7G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,kBAAmB,SAAQ,eAAe,CAAC,MAAM,CAAC;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAID,QAAA,MAAM,aAAa,yGAiClB,CAAC;AAGF,OAAO,EAAC,aAAa,EAAE,KAAK,kBAAkB,EAAC,CAAC"}
+{"version":3,"file":"highlight-text.d.ts","sourceRoot":"","sources":["../../../src/components/ui/highlight-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,KAAK,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC7G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,+CAA+C;AAC/C,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,MAAM,CAAC;IACjE,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,YAAY,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC1C,0FAA0F;IAC1F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAID;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,aAAa,yGA+BlB,CAAC;AAIF,OAAO,EAAC,aAAa,EAAC,CAAC"}

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

@@ -3,17 +3,19 @@ import { jsx } from "react/jsx-runtime";
 import { motion, useInView } from "motion/react";
 import { forwardRef, useImperativeHandle, useRef } from "react";
 import { cn } from "../../lib/utilities.js";
+import highlight_text_module from "./highlight-text.module.js";
 const animation = {
     backgroundSize: "100% 100%"
 };
-const HighlightText = /*#__PURE__*/ forwardRef(({ text, className, inView = false, inViewMargin = "0px", transition = {
+const HighlightText = /*#__PURE__*/ forwardRef(({ text, className, inView = false, inViewMargin = "0px", inViewOnce = true, transition = {
     duration: 2,
     ease: "easeInOut"
 }, ...props }, ref)=>{
+    const { key: _ignoredKey, ...restProps } = props;
     const localRef = useRef(null);
-    useImperativeHandle(ref, ()=>localRef.current);
+    useImperativeHandle(ref, ()=>localRef.current, []);
     const inViewResult = useInView(localRef, {
-        once: true,
+        once: inViewOnce,
         margin: inViewMargin
     });
     const isInView = !inView || inViewResult;
@@ -24,13 +26,8 @@ const HighlightText = /*#__PURE__*/ forwardRef(({ text, className, inView = fals
         },
         animate: isInView ? animation : void 0,
         transition: transition,
-        style: {
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "left center",
-            display: "inline"
-        },
-        className: cn("relative inline-block rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 px-2 py-1 dark:from-blue-500 dark:to-purple-500", className),
-        ...props,
+        className: cn(highlight_text_module.highlight, className),
+        ...restProps,
         children: text
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/highlight-text.js","sources":["../../../src/components/ui/highlight-text.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, useInView, type HTMLMotionProps, type Transition, type UseInViewOptions} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\ninterface HighlightTextProps extends HTMLMotionProps<\"span\"> {\r\n  text: string;\r\n  inView?: boolean;\r\n  inViewMargin?: UseInViewOptions[\"margin\"];\r\n  inViewOnce?: boolean;\r\n  transition?: Transition;\r\n}\r\n\r\nconst animation = {backgroundSize: \"100% 100%\"};\r\n\r\nconst HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(\r\n  ({text, className, inView = false, inViewMargin = \"0px\", transition = {duration: 2, ease: \"easeInOut\"}, ...props}, ref) => {\r\n    const localRef = React.useRef<HTMLSpanElement>(null);\r\n    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\r\n\r\n    const inViewResult = useInView(localRef, {\r\n      once: true,\r\n      margin: inViewMargin,\r\n    });\r\n    const isInView = !inView || inViewResult;\r\n\r\n    return (\r\n      <motion.span\r\n        ref={localRef}\r\n        initial={{\r\n          backgroundSize: \"0% 100%\",\r\n        }}\r\n        animate={isInView ? animation : undefined}\r\n        transition={transition}\r\n        style={{\r\n          backgroundRepeat: \"no-repeat\",\r\n          backgroundPosition: \"left center\",\r\n          display: \"inline\",\r\n        }}\r\n        className={cn(\r\n          `relative inline-block rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 px-2 py-1 dark:from-blue-500 dark:to-purple-500`,\r\n          className,\r\n        )}\r\n        {...props}>\r\n        {text}\r\n      </motion.span>\r\n    );\r\n  },\r\n);\r\nHighlightText.displayName = \"HighlightText\";\r\n\r\nexport {HighlightText, type HighlightTextProps};\r\n"],"names":["animation","HighlightText","React","text","className","inView","inViewMargin","transition","props","ref","localRef","inViewResult","useInView","isInView","motion","undefined","cn"],"mappings":";;;;;AAeA,MAAMA,YAAY;IAAC,gBAAgB;AAAW;AAE9C,MAAMC,gBAAgB,WAAhBA,GAAgBC,WACpB,CAAC,EAACC,IAAI,EAAEC,SAAS,EAAEC,SAAS,KAAK,EAAEC,eAAe,KAAK,EAAEC,aAAa;IAAC,UAAU;IAAG,MAAM;AAAW,CAAC,EAAE,GAAGC,OAAM,EAAEC;IACjH,MAAMC,WAAWR,OAA8B;IAC/CA,oBAA0BO,KAAK,IAAMC,SAAS,OAAO;IAErD,MAAMC,eAAeC,UAAUF,UAAU;QACvC,MAAM;QACN,QAAQJ;IACV;IACA,MAAMO,WAAW,CAACR,UAAUM;IAE5B,OAAO,WAAP,GACE,IAACG,OAAO,IAAI;QACV,KAAKJ;QACL,SAAS;YACP,gBAAgB;QAClB;QACA,SAASG,WAAWb,YAAYe;QAChC,YAAYR;QACZ,OAAO;YACL,kBAAkB;YAClB,oBAAoB;YACpB,SAAS;QACX;QACA,WAAWS,GACT,iIACAZ;QAED,GAAGI,KAAK;kBACRL;;AAGP;AAEFF,cAAc,WAAW,GAAG"}
+{"version":3,"file":"components/ui/highlight-text.js","sources":["../../../src/components/ui/highlight-text.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, useInView, type HTMLMotionProps, type Transition, type UseInViewOptions} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./highlight-text.module.css\";\r\n\r\n/** Props accepted by {@link HighlightText}. */\r\nexport interface HighlightTextProps extends HTMLMotionProps<\"span\"> {\r\n  /** Inline text content that receives the animated highlight sweep. @default undefined */\r\n  text: string;\r\n  /** Delays the highlight animation until the text enters the viewport. @default false */\r\n  inView?: boolean;\r\n  /** Margin passed to the in-view observer when `inView` is enabled. @default \"0px\" */\r\n  inViewMargin?: UseInViewOptions[\"margin\"];\r\n  /** Prevents the in-view animation from replaying after the first reveal. @default true */\r\n  inViewOnce?: boolean;\r\n  /** Motion timing used for the highlight fill animation. @default {duration: 2, ease: \"easeInOut\"} */\r\n  transition?: Transition;\r\n}\r\n\r\nconst animation = {backgroundSize: \"100% 100%\"};\r\n\r\n/**\r\n * Animates a gradient highlight fill behind inline text content.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<span>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <HighlightText text=\"Highlighted copy\" />\r\n * ```\r\n *\r\n * @see {@link HighlightTextProps} for available props\r\n */\r\nconst HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(\r\n  (\r\n    {text, className, inView = false, inViewMargin = \"0px\", inViewOnce = true, transition = {duration: 2, ease: \"easeInOut\"}, ...props},\r\n    ref,\r\n  ) => {\r\n    // eslint-disable-next-line sonarjs/no-unused-vars -- removing React key avoids implicit key spreading\r\n    const {key: _ignoredKey, ...restProps} = props;\r\n    const localRef = React.useRef<HTMLSpanElement>(null);\r\n\r\n    React.useImperativeHandle(ref, () => localRef.current!, []);\r\n\r\n    const inViewResult = useInView(localRef, {\r\n      once: inViewOnce,\r\n      margin: inViewMargin,\r\n    });\r\n    const isInView = !inView || inViewResult;\r\n\r\n    return (\r\n      <motion.span\r\n        ref={localRef}\r\n        initial={{\r\n          backgroundSize: \"0% 100%\",\r\n        }}\r\n        animate={isInView ? animation : undefined}\r\n        transition={transition}\r\n        className={cn(styles.highlight, className)}\r\n        {...restProps}>\r\n        {text}\r\n      </motion.span>\r\n    );\r\n  },\r\n);\r\n\r\nHighlightText.displayName = \"HighlightText\";\r\n\r\nexport {HighlightText};\r\n"],"names":["animation","HighlightText","React","text","className","inView","inViewMargin","inViewOnce","transition","props","ref","_ignoredKey","restProps","localRef","inViewResult","useInView","isInView","motion","undefined","cn","styles"],"mappings":";;;;;;AAsBA,MAAMA,YAAY;IAAC,gBAAgB;AAAW;AAkB9C,MAAMC,gBAAgB,WAAHA,GAAGC,WACpB,CACE,EAACC,IAAI,EAAEC,SAAS,EAAEC,SAAS,KAAK,EAAEC,eAAe,KAAK,EAAEC,aAAa,IAAI,EAAEC,aAAa;IAAC,UAAU;IAAG,MAAM;AAAW,CAAC,EAAE,GAAGC,OAAM,EACnIC;IAGA,MAAM,EAAC,KAAKC,WAAW,EAAE,GAAGC,WAAU,GAAGH;IACzC,MAAMI,WAAWX,OAA8B;IAE/CA,oBAA0BQ,KAAK,IAAMG,SAAS,OAAO,EAAG,EAAE;IAE1D,MAAMC,eAAeC,UAAUF,UAAU;QACvC,MAAMN;QACN,QAAQD;IACV;IACA,MAAMU,WAAW,CAACX,UAAUS;IAE5B,OAAO,WAAP,GACE,IAACG,OAAO,IAAI;QACV,KAAKJ;QACL,SAAS;YACP,gBAAgB;QAClB;QACA,SAASG,WAAWhB,YAAYkB;QAChC,YAAYV;QACZ,WAAWW,GAAGC,sBAAAA,SAAgB,EAAEhB;QAC/B,GAAGQ,SAAS;kBACZT;;AAGP;AAGFF,cAAc,WAAW,GAAG"}

package/dist/components/ui/highlight-text.module.js

@@ -0,0 +1,7 @@
+import "./highlight-text_module.css";
+const highlight_text_module = {
+    highlight: "highlight-roGyzF"
+};
+export default highlight_text_module;
+
+//# sourceMappingURL=highlight-text.module.js.map