@me1a/ui 2.2.5 → 2.2.7

package/dist/rhf-dnd-input/index.d.mts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, FieldPath, RegisterOptions } from 'react-hook-form';
+import React from 'react';
+import { DropzoneOptions } from 'react-dropzone';
+
+/**
+ * Props interface for the DndInput component.
+ * Extends react-dropzone's DropzoneOptions to provide file drag-and-drop functionality.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dnd-input--docs
+ *
+ * @example
+ * ```tsx
+ * <DndInput
+ *   onDrop={(acceptedFiles) => console.log(acceptedFiles)}
+ *   accept={{ 'image/*': ['.png', '.jpg'] }}
+ * >
+ *   <CustomUploadContent />
+ * </DndInput>
+ * ```
+ */
+interface DndInputProps extends DropzoneOptions {
+    /** Additional CSS class name for styling the dropzone container */
+    className?: string;
+    /** Custom content to render inside the dropzone. If not provided, a default upload UI will be shown */
+    children?: React.ReactNode;
+}
+
+/**
+ * Props interface for the RhfDndInput component.
+ * Extends DndInputProps to add React Hook Form specific properties.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dnd-input--docs
+ */
+interface RhfDndInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<DndInputProps, "name"> {
+    /** The name of the form field */
+    name: TName;
+    /** React Hook Form validation rules */
+    rules?: RegisterOptions<TFieldValues, TName>;
+    /** Label text for the form field */
+    label?: string;
+    /** Description text for the form field */
+    description?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** ARIA label for accessibility */
+    "aria-label"?: string;
+    /** ARIA describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * RhfDndInput is a React Hook Form wrapper around the DndInput component.
+ * It provides form integration with validation and error handling.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dnd-input--docs
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with React Hook Form
+ * <Form>
+ *   <RhfDndInput
+ *     name="files"
+ *     label="Upload Files"
+ *     rules={{ required: "Please upload a file" }}
+ *   />
+ * </Form>
+ *
+ * // With file type restrictions
+ * <Form>
+ *   <RhfDndInput
+ *     name="files"
+ *     label="Upload Images"
+ *     accept={{ 'image/*': ['.png', '.jpg'] }}
+ *     rules={{
+ *       required: "Please upload a file",
+ *       validate: (files) => files.length > 0 || "At least one file is required"
+ *     }}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RhfDndInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, required, disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RhfDndInputProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+export { RhfDndInput, type RhfDndInputProps };

package/dist/rhf-dnd-input/index.mjs

@@ -0,0 +1,2 @@
+import{useFormContext as O}from"react-hook-form";import{useDropzone as A}from"react-dropzone";import{clsx as S}from"clsx";import{twMerge as $}from"tailwind-merge";function m(...e){return $(S(e))}import{UploadIcon as W}from"lucide-react";import{Fragment as z,jsx as F,jsxs as I}from"react/jsx-runtime";var U=I(z,{children:[F(W,{className:"text-blue-600 mr-2","aria-hidden":"true"}),I("span",{children:[F("span",{className:"underline",children:"Upload"})," or drop a file right here"]}),F("span",{className:"ml-auto text-gray-400 text-sm",children:"all file types"})]}),h=({onDrop:e,accept:o,className:t,children:r,...a})=>{let{getRootProps:s,getInputProps:n,isDragActive:C,isFocused:c}=A({onDrop:e,accept:o,...a});return I("div",{...s({className:m("flex items-center border-2 border-dashed border-blue-500 rounded-lg p-4 cursor-pointer transition-colors",t,C?"bg-blue-50 border-blue-700":"",c?"ring-2 ring-blue-400":""),"aria-label":"File upload area",tabIndex:0,role:"button"}),"data-testid":"dnd-input",children:[F("input",{...n()}),r||U]})};import*as i from"react";import{Slot as G}from"@radix-ui/react-slot";import{Controller as J,FormProvider as ce,useFormContext as K}from"react-hook-form";import*as T from"react";import*as V from"@radix-ui/react-label";import{cva as k}from"class-variance-authority";import{jsx as B}from"react/jsx-runtime";var q=k("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),f=T.forwardRef(({className:e,...o},t)=>B(V.Root,{ref:t,className:m(q(),e),...o}));f.displayName=V.Root.displayName;import{jsx as l}from"react/jsx-runtime";var N=i.createContext({}),g=({...e})=>l(N.Provider,{value:{name:e.name},children:l(J,{...e})}),p=()=>{let e=i.useContext(N),o=i.useContext(D),{getFieldState:t,formState:r}=K(),a=t(e.name,r);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:s}=o;return{id:s,name:e.name,formItemId:`${s}-form-item`,formDescriptionId:`${s}-form-item-description`,formMessageId:`${s}-form-item-message`,...a}},D=i.createContext({}),b=i.forwardRef(({className:e,...o},t)=>{let r=i.useId();return l(D.Provider,{value:{id:r},children:l("div",{ref:t,className:m("space-y-2",e),...o})})});b.displayName="FormItem";var x=i.forwardRef(({className:e,...o},t)=>{let{error:r,formItemId:a}=p();return l(f,{ref:t,className:m(r&&"text-destructive",e),htmlFor:a,...o})});x.displayName="FormLabel";var P=i.forwardRef(({...e},o)=>{let{error:t,formItemId:r,formDescriptionId:a,formMessageId:s}=p();return l(G,{ref:o,id:r,"aria-describedby":t?`${a} ${s}`:`${a}`,"aria-invalid":!!t,...e})});P.displayName="FormControl";var R=i.forwardRef(({className:e,...o},t)=>{let{formDescriptionId:r}=p();return l("p",{ref:t,id:r,className:m("text-sm text-muted-foreground",e),...o})});R.displayName="FormDescription";var y=i.forwardRef(({className:e,children:o,...t},r)=>{let{error:a,formMessageId:s}=p(),n=a?String(a?.message??""):o;return n?l("p",{ref:r,id:s,className:m("text-sm font-medium text-destructive",e),...t,children:n}):null});y.displayName="FormMessage";import{jsx as d,jsxs as M}from"react/jsx-runtime";function ge({name:e,label:o,description:t,className:r,required:a,disabled:s,"aria-label":n,"aria-describedby":C,...c}){let{control:w}=O();return d(g,{name:e,control:w,render:({field:v,fieldState:{error:u}})=>M(b,{children:[o&&M(x,{children:[o,a&&d("span",{className:"text-destructive ml-1",children:"*"})]}),d(P,{children:d(h,{...v,...c,disabled:s,"aria-label":n,"aria-describedby":C,"aria-invalid":!!u,"aria-required":a,className:m(u&&"border-destructive focus-visible:ring-destructive",r),onDrop:(L,E,H)=>{v.onChange(L),c.onDrop?.(L,E,H)}})}),t&&d(R,{children:t}),u&&d(y,{children:u.message})]})})}export{ge as RhfDndInput};
+//# sourceMappingURL=index.mjs.map

package/dist/rhf-dnd-input/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/rhf/rhf-dnd-input/rhf-dnd-input.tsx","../../src/components/atoms/dnd-input/dnd-input.tsx","../../src/utils/cn.ts","../../src/components/rhf/form/form.tsx","../../src/components/atoms/label/label.tsx"],"sourcesContent":["\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { DndInput } from \"@/components/atoms/dnd-input\"\nimport { cn } from \"@/utils/cn\"\nimport {\n  FormControl,\n  FormItem,\n  FormMessage,\n  FormLabel,\n  FormDescription,\n  FormField\n} from \"@/components/rhf/form\"\nimport type { RhfDndInputProps } from \"./rhf-dnd-input.types\"\n\n/**\n * RhfDndInput is a React Hook Form wrapper around the DndInput component.\n * It provides form integration with validation and error handling.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dnd-input--docs\n *\n * @example\n * ```tsx\n * // Basic usage with React Hook Form\n * <Form>\n *   <RhfDndInput\n *     name=\"files\"\n *     label=\"Upload Files\"\n *     rules={{ required: \"Please upload a file\" }}\n *   />\n * </Form>\n *\n * // With file type restrictions\n * <Form>\n *   <RhfDndInput\n *     name=\"files\"\n *     label=\"Upload Images\"\n *     accept={{ 'image/*': ['.png', '.jpg'] }}\n *     rules={{\n *       required: \"Please upload a file\",\n *       validate: (files) => files.length > 0 || \"At least one file is required\"\n *     }}\n *   />\n * </Form>\n * ```\n */\nexport function RhfDndInput<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  name,\n  label,\n  description,\n  className,\n  required,\n  disabled,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedby,\n  ...other\n}: RhfDndInputProps<TFieldValues, TName>) {\n  const { control } = useFormContext<TFieldValues>()\n\n  return (\n    <FormField\n      name={name}\n      control={control}\n      render={({ field, fieldState: { error } }) => (\n        <FormItem>\n          {label && (\n            <FormLabel>\n              {label}\n              {required && <span className=\"text-destructive ml-1\">*</span>}\n            </FormLabel>\n          )}\n          <FormControl>\n            <DndInput\n              {...field}\n              {...other}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              aria-describedby={ariaDescribedby}\n              aria-invalid={!!error}\n              aria-required={required}\n              className={cn(\n                error && \"border-destructive focus-visible:ring-destructive\",\n                className\n              )}\n              onDrop={(acceptedFiles, fileRejections, event) => {\n                field.onChange(acceptedFiles)\n                other.onDrop?.(acceptedFiles, fileRejections, event)\n              }}\n            />\n          </FormControl>\n          {description && <FormDescription>{description}</FormDescription>}\n          {error && <FormMessage>{error.message}</FormMessage>}\n        </FormItem>\n      )}\n    />\n  )\n}\n","\"use client\";\n\"use client\"\n\nimport React from \"react\"\nimport { useDropzone } from \"react-dropzone\"\nimport { cn } from \"@/utils\"\nimport { UploadIcon } from \"lucide-react\" // or your icon\n\nimport type { DndInputProps } from \"./dnd-input.types\"\n\n/**\n * Default content shown when no children are provided to the DndInput component.\n * Displays an upload icon, text prompt, and file type information.\n */\nconst defaultContent = (\n  <>\n    <UploadIcon className=\"text-blue-600 mr-2\" aria-hidden=\"true\" />\n    <span>\n      <span className=\"underline\">Upload</span> or drop a file right here\n    </span>\n    <span className=\"ml-auto text-gray-400 text-sm\">all file types</span>\n  </>\n)\n\n/**\n * DndInput is a drag-and-drop file upload component built on top of react-dropzone.\n * It provides a customizable dropzone area for file uploads with visual feedback for drag states.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dnd-input--docs\n *\n * @example\n * ```tsx\n * // Basic usage with default UI\n * <DndInput onDrop={(files) => handleFiles(files)} />\n *\n * // Custom content with file type restrictions\n * <DndInput\n *   accept={{ 'image/*': ['.png', '.jpg'] }}\n *   onDrop={(files) => handleFiles(files)}\n * >\n *   <div>Custom upload UI</div>\n * </DndInput>\n * ```\n */\nexport const DndInput: React.FC<DndInputProps> = ({\n  onDrop,\n  accept,\n  className,\n  children,\n  ...props\n}) => {\n  // Initialize dropzone functionality with provided options\n  const { getRootProps, getInputProps, isDragActive, isFocused } = useDropzone({\n    onDrop,\n    accept,\n    ...props\n  })\n\n  return (\n    <div\n      {...getRootProps({\n        className: cn(\n          // Base styles for the dropzone container\n          \"flex items-center border-2 border-dashed border-blue-500 rounded-lg p-4 cursor-pointer transition-colors\",\n          // Custom className prop for additional styling\n          className,\n          // Visual feedback for drag state\n          isDragActive ? \"bg-blue-50 border-blue-700\" : \"\",\n          // Visual feedback for focus state\n          isFocused ? \"ring-2 ring-blue-400\" : \"\"\n        ),\n        \"aria-label\": \"File upload area\",\n        tabIndex: 0,\n        role: \"button\"\n      })}\n      data-testid=\"dnd-input\"\n    >\n      <input {...getInputProps()} />\n      {children || defaultContent}\n    </div>\n  )\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n    )\n  }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n    VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n  ({ className, ...props }, ref) => (\n    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n  )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":"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","names":["useFormContext","useDropzone","clsx","twMerge","cn","inputs","UploadIcon","Fragment","jsx","jsxs","defaultContent","DndInput","onDrop","accept","className","children","props","getRootProps","getInputProps","isDragActive","isFocused","useDropzone","cn","React","Slot","Controller","FormProvider","useFormContext","React","LabelPrimitive","cva","jsx","labelVariants","cva","Label","className","props","ref","cn","jsx","FormFieldContext","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","jsx","jsxs","RhfDndInput","name","label","description","className","required","disabled","ariaLabel","ariaDescribedby","other","control","useFormContext","FormField","field","error","FormItem","FormLabel","FormControl","DndInput","cn","acceptedFiles","fileRejections","event","FormDescription","FormMessage"]}

package/dist/rhf-text-field/index.d.mts

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, FieldPath } from 'react-hook-form';
+import * as React from 'react';
+
+/**
+ * Input component for creating accessible input fields.
+ * Built on top of shadcn/ui's Input component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-input--docs
+ *
+ */
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+interface RHFTextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Input>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** The type of input (text, number, email, etc.) */
+    type?: React.HTMLInputTypeAttribute;
+    /** Optional placeholder text */
+    placeholder?: string;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A text field component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhftextfield--docs
+ *
+ * * @example
+ * ```tsx
+ * <Form>
+ *   <RHFTextField name="name" label="Name" />
+ *   <RHFTextField name="email" label="Email" />
+ * </Form>
+ * ```
+ */
+declare function RHFTextField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, type, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextFieldProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+export { RHFTextField };

package/dist/rhf-text-field/index.mjs

@@ -0,0 +1,2 @@
+"use client";import{useFormContext as K}from"react-hook-form";import*as V from"react";import{clsx as A}from"clsx";import{twMerge as W}from"tailwind-merge";function m(...e){return W(A(e))}import{jsx as B}from"react/jsx-runtime";var C=V.forwardRef(({className:e,type:o,...t},r)=>B("input",{type:o,className:m("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:r,...t}));C.displayName="Input";import*as i from"react";import{Slot as z}from"@radix-ui/react-slot";import{Controller as G,FormProvider as ne,useFormContext as J}from"react-hook-form";import*as L from"react";import*as v from"@radix-ui/react-label";import{cva as k}from"class-variance-authority";import{jsx as q}from"react/jsx-runtime";var O=k("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),f=L.forwardRef(({className:e,...o},t)=>q(v.Root,{ref:t,className:m(O(),e),...o}));f.displayName=v.Root.displayName;import{jsx as n}from"react/jsx-runtime";var T=i.createContext({}),g=({...e})=>n(T.Provider,{value:{name:e.name},children:n(G,{...e})}),u=()=>{let e=i.useContext(T),o=i.useContext(I),{getFieldState:t,formState:r}=J(),a=t(e.name,r);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:l}=o;return{id:l,name:e.name,formItemId:`${l}-form-item`,formDescriptionId:`${l}-form-item-description`,formMessageId:`${l}-form-item-message`,...a}},I=i.createContext({}),x=i.forwardRef(({className:e,...o},t)=>{let r=i.useId();return n(I.Provider,{value:{id:r},children:n("div",{ref:t,className:m("space-y-2",e),...o})})});x.displayName="FormItem";var b=i.forwardRef(({className:e,...o},t)=>{let{error:r,formItemId:a}=u();return n(f,{ref:t,className:m(r&&"text-destructive",e),htmlFor:a,...o})});b.displayName="FormLabel";var R=i.forwardRef(({...e},o)=>{let{error:t,formItemId:r,formDescriptionId:a,formMessageId:l}=u();return n(z,{ref:o,id:r,"aria-describedby":t?`${a} ${l}`:`${a}`,"aria-invalid":!!t,...e})});R.displayName="FormControl";var P=i.forwardRef(({className:e,...o},t)=>{let{formDescriptionId:r}=u();return n("p",{ref:t,id:r,className:m("text-sm text-muted-foreground",e),...o})});P.displayName="FormDescription";var y=i.forwardRef(({className:e,children:o,...t},r)=>{let{error:a,formMessageId:l}=u(),p=a?String(a?.message??""):o;return p?n("p",{ref:r,id:l,className:m("text-sm font-medium text-destructive",e),...t,children:p}):null});y.displayName="FormMessage";import{jsx as d,jsxs as h}from"react/jsx-runtime";function Ce({name:e,label:o,description:t,className:r,type:a="text",warningText:l,required:p,disabled:N,readOnly:M,placeholder:w,"aria-label":H,"aria-describedby":D,onBlur:E,...S}){let{control:$}=K();return d(g,{name:e,control:$,render:({field:s,fieldState:{error:c}})=>h(x,{children:[o&&h(b,{children:[o,p&&d("span",{className:"text-destructive ml-1",children:"*"})]}),d(R,{children:d(C,{...s,type:a,value:a==="number"&&s.value===0?"":s.value,onChange:F=>{a==="number"?s.onChange(Number(F.target.value)):s.onChange(F.target.value)},onBlur:F=>{a!=="number"&&typeof s.value=="string"&&s.onChange(s.value.trim()),s.onBlur(),E?.(F)},className:m(c&&"border-destructive focus-visible:ring-destructive",r),disabled:N,readOnly:M,required:p,placeholder:w,"aria-label":H,"aria-describedby":D,"aria-invalid":!!c,"aria-required":p,...S})}),t&&d(P,{children:t}),c&&d(y,{children:c.message}),!c&&l&&d("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:l})]})})}export{Ce as RHFTextField};
+//# sourceMappingURL=index.mjs.map

package/dist/rhf-text-field/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/rhf/rhf-text-field/rhf-text-field.tsx","../../src/components/atoms/input/input.tsx","../../src/utils/cn.ts","../../src/components/rhf/form/form.tsx","../../src/components/atoms/label/label.tsx"],"sourcesContent":["\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Input } from \"@/components/atoms/input\"\nimport { cn } from \"@/utils/cn\"\nimport {\n  FormControl,\n  FormItem,\n  FormMessage,\n  FormLabel,\n  FormDescription,\n  FormField\n} from \"@/components/rhf/form\"\nimport { type RHFTextFieldProps } from \"./rhf-text-field.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A text field component that integrates with React Hook Form.\n * Provides form validation, error handling, and accessibility features.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhftextfield--docs\n *\n * * @example\n * ```tsx\n * <Form>\n *   <RHFTextField name=\"name\" label=\"Name\" />\n *   <RHFTextField name=\"email\" label=\"Email\" />\n * </Form>\n * ```\n */\nexport function RHFTextField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  name,\n  label,\n  description,\n  className,\n  type = \"text\",\n  warningText,\n  required,\n  disabled,\n  readOnly,\n  placeholder,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedby,\n  onBlur,\n  ...other\n}: RHFTextFieldProps<TFieldValues, TName>) {\n  const { control } = useFormContext<TFieldValues>()\n\n  return (\n    <FormField\n      name={name}\n      control={control}\n      render={({ field, fieldState: { error } }) => (\n        <FormItem>\n          {label && (\n            <FormLabel>\n              {label}\n              {required && <span className=\"text-destructive ml-1\">*</span>}\n            </FormLabel>\n          )}\n          <FormControl>\n            <Input\n              {...field}\n              type={type}\n              value={type === \"number\" && field.value === 0 ? \"\" : field.value}\n              onChange={(e) => {\n                if (type === \"number\") {\n                  field.onChange(Number(e.target.value))\n                } else {\n                  field.onChange(e.target.value)\n                }\n              }}\n              onBlur={(e) => {\n                // trim if a string\n                if (type !== \"number\" && typeof field.value === \"string\") {\n                  field.onChange(field.value.trim())\n                }\n                field.onBlur() // pass to react-hook-form\n                onBlur?.(e) // pass to wrapper\n              }}\n              className={cn(\n                error && \"border-destructive focus-visible:ring-destructive\",\n                className\n              )}\n              disabled={disabled}\n              readOnly={readOnly}\n              required={required}\n              placeholder={placeholder}\n              aria-label={ariaLabel}\n              aria-describedby={ariaDescribedby}\n              aria-invalid={!!error}\n              aria-required={required}\n              {...other}\n            />\n          </FormControl>\n          {description && <FormDescription>{description}</FormDescription>}\n          {error && <FormMessage>{error.message}</FormMessage>}\n          {!error && warningText && (\n            <p className=\"text-sm text-yellow-600 dark:text-yellow-500\" role=\"alert\">\n              {warningText}\n            </p>\n          )}\n        </FormItem>\n      )}\n    />\n  )\n}\n","import * as React from \"react\"\n\nimport { cn } from \"@/utils/cn\"\n\n/**\n * Input component for creating accessible input fields.\n * Built on top of shadcn/ui's Input component.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-input--docs\n *\n */\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n    )\n  }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n    VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n  ({ className, ...props }, ref) => (\n    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n  )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":"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","names":["useFormContext","React","clsx","twMerge","cn","inputs","jsx","Input","className","type","props","ref","cn","React","Slot","Controller","FormProvider","useFormContext","React","LabelPrimitive","cva","jsx","labelVariants","cva","Label","className","props","ref","cn","jsx","FormFieldContext","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","jsx","jsxs","RHFTextField","name","label","description","className","type","warningText","required","disabled","readOnly","placeholder","ariaLabel","ariaDescribedby","onBlur","other","control","useFormContext","FormField","field","error","FormItem","FormLabel","FormControl","Input","e","cn","FormDescription","FormMessage"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@me1a/ui",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "private": false,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -105,6 +105,10 @@
       "types": "./dist/input/index.d.mts",
       "import": "./dist/input/index.mjs"
     },
+    "./dnd-input": {
+      "types": "./dist/dnd-input/index.d.mts",
+      "import": "./dist/dnd-input/index.mjs"
+    },
     "./dialog": {
       "types": "./dist/dialog/index.d.mts",
       "import": "./dist/dialog/index.mjs"
@@ -177,6 +181,10 @@
       "types": "./dist/rhf-textarea/index.d.mts",
       "import": "./dist/rhf-textarea/index.mjs"
     },
+    "./rhf-text-field": {
+      "types": "./dist/rhf-text-field/index.d.mts",
+      "import": "./dist/rhf-text-field/index.mjs"
+    },
     "./rhf-switch": {
       "types": "./dist/rhf-switch/index.d.mts",
       "import": "./dist/rhf-switch/index.mjs"
@@ -197,6 +205,10 @@
       "types": "./dist/rhf-multi-select/index.d.mts",
       "import": "./dist/rhf-multi-select/index.mjs"
     },
+    "./rhf-dnd-input": {
+      "types": "./dist/rhf-dnd-input/index.d.mts",
+      "import": "./dist/rhf-dnd-input/index.mjs"
+    },
     "./rhf-checkbox": {
       "types": "./dist/rhf-checkbox/index.d.mts",
       "import": "./dist/rhf-checkbox/index.mjs"
@@ -302,6 +314,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.511.0",
+    "react-dropzone": "^14.3.8",
     "react-resizable-panels": "^3.0.2",
     "vaul": "^1.1.2",
     "vite": "^6.3.5"