@me1a/ui 2.2.0 → 2.2.2

package/dist/rhf/rhf-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/textarea/textarea.tsx","../../src/components/atoms/label/label.tsx","../../src/components/rhf/form/form.tsx","../../src/components/rhf/rhf-textarea/rhf-textarea.tsx"],"names":["cn","inputs","twMerge","clsx","Textarea","c","className","autoResize","props","ref","internalRef","textarea","resizeTextarea","jsx","labelVariants","cva","Label","V","C","FormFieldContext","s","FormField","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","FormLabel","error","formItemId","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","RHFTextarea","name","label","description","warningText","required","disabled","readOnly","placeholder","ariaLabel","ariaDescribedby","onBlur","other","control","field","jsxs","e"],"mappings":"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","file":"rhf-textarea.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cn } from \"@/utils/index\"\nimport { TextareaProps } from \"./textarea.types\"\n\n/**\n * Textarea component for creating accessible text areas.\n * Built on top of shadcn/ui's Textarea component.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-textarea--docs\n *\n * @example\n * ```tsx\n * <Textarea placeholder=\"Enter text\" />\n * ```\n */\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, autoResize = false, ...props }, ref) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n\n    React.useEffect(() => {\n      if (!autoResize || !internalRef.current) return\n\n      const textarea = internalRef.current\n      const resizeTextarea = () => {\n        textarea.style.height = \"auto\"\n        textarea.style.height = `${textarea.scrollHeight}px`\n      }\n\n      textarea.addEventListener(\"input\", resizeTextarea)\n      resizeTextarea() // Initial resize\n\n      return () => textarea.removeEventListener(\"input\", resizeTextarea)\n    }, [autoResize])\n\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm 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)\n\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\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","\"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 { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Textarea } from \"@/components/atoms/textarea\"\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 RHFTextareaProps } from \"./rhf-textarea.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A textarea 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-rhftextarea--docs\n *\n * @example\n * ```tsx\n * <Form>\n *   <RHFTextarea name=\"description\" label=\"Description\" />\n * </Form>\n * ```\n */\nexport function RHFTextarea<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  name,\n  label,\n  description,\n  className,\n  warningText,\n  required,\n  disabled,\n  readOnly,\n  placeholder,\n  autoResize,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedby,\n  onBlur,\n  ...other\n}: RHFTextareaProps<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            <Textarea\n              {...field}\n              value={field.value}\n              onChange={(e) => {\n                field.onChange(e.target.value)\n              }}\n              onBlur={(e) => {\n                // trim if a string\n                if (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              autoResize={autoResize}\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"]}

package/dist/rhf/rhf-textarea.mjs

@@ -0,0 +1,2 @@
+import {useFormContext,Controller}from'react-hook-form';import*as s from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';import {Slot}from'@radix-ui/react-slot';import*as C from'@radix-ui/react-label';import {cva}from'class-variance-authority';function i(...e){return twMerge(clsx(e))}var v=s.forwardRef(({className:e,autoResize:t=false,...r},a)=>{let m=s.useRef(null);return s.useEffect(()=>{if(!t||!m.current)return;let o=m.current,l=()=>{o.style.height="auto",o.style.height=`${o.scrollHeight}px`;};return o.addEventListener("input",l),l(),()=>o.removeEventListener("input",l)},[t]),jsx("textarea",{className:i("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm 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:a,...r})});v.displayName="Textarea";var z=cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),f=s.forwardRef(({className:e,...t},r)=>jsx(C.Root,{ref:r,className:i(z(),e),...t}));f.displayName=C.Root.displayName;var L=s.createContext({}),g=({...e})=>jsx(L.Provider,{value:{name:e.name},children:jsx(Controller,{...e})}),u=()=>{let e=s.useContext(L),t=s.useContext(h),{getFieldState:r,formState:a}=useFormContext(),m=r(e.name,a);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:o}=t;return {id:o,name:e.name,formItemId:`${o}-form-item`,formDescriptionId:`${o}-form-item-description`,formMessageId:`${o}-form-item-message`,...m}},h=s.createContext({}),x=s.forwardRef(({className:e,...t},r)=>{let a=s.useId();return jsx(h.Provider,{value:{id:a},children:jsx("div",{ref:r,className:i("space-y-2",e),...t})})});x.displayName="FormItem";var R=s.forwardRef(({className:e,...t},r)=>{let{error:a,formItemId:m}=u();return jsx(f,{ref:r,className:i(a&&"text-destructive",e),htmlFor:m,...t})});R.displayName="FormLabel";var b=s.forwardRef(({...e},t)=>{let{error:r,formItemId:a,formDescriptionId:m,formMessageId:o}=u();return jsx(Slot,{ref:t,id:a,"aria-describedby":r?`${m} ${o}`:`${m}`,"aria-invalid":!!r,...e})});b.displayName="FormControl";var P=s.forwardRef(({className:e,...t},r)=>{let{formDescriptionId:a}=u();return jsx("p",{ref:r,id:a,className:i("text-sm text-muted-foreground",e),...t})});P.displayName="FormDescription";var y=s.forwardRef(({className:e,children:t,...r},a)=>{let{error:m,formMessageId:o}=u(),l=m?String(m?.message??""):t;return l?jsx("p",{ref:a,id:o,className:i("text-sm font-medium text-destructive",e),...r,children:l}):null});y.displayName="FormMessage";function Te({name:e,label:t,description:r,className:a,warningText:m,required:o,disabled:l,readOnly:N,placeholder:M,autoResize:w,"aria-label":E,"aria-describedby":H,onBlur:D,...S}){let{control:$}=useFormContext();return jsx(g,{name:e,control:$,render:({field:d,fieldState:{error:F}})=>jsxs(x,{children:[t&&jsxs(R,{children:[t,o&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),jsx(b,{children:jsx(v,{...d,value:d.value,onChange:T=>{d.onChange(T.target.value);},onBlur:T=>{typeof d.value=="string"&&d.onChange(d.value.trim()),d.onBlur(),D?.(T);},className:i(F&&"border-destructive focus-visible:ring-destructive",a),disabled:l,readOnly:N,required:o,placeholder:M,"aria-label":E,"aria-describedby":H,"aria-invalid":!!F,"aria-required":o,autoResize:w,...S})}),r&&jsx(P,{children:r}),F&&jsx(y,{children:F.message}),!F&&m&&jsx("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:m})]})})}export{Te as RHFTextarea};//# sourceMappingURL=rhf-textarea.mjs.map
+//# sourceMappingURL=rhf-textarea.mjs.map

package/dist/rhf/rhf-textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/textarea/textarea.tsx","../../src/components/atoms/label/label.tsx","../../src/components/rhf/form/form.tsx","../../src/components/rhf/rhf-textarea/rhf-textarea.tsx"],"names":["cn","inputs","twMerge","clsx","Textarea","c","className","autoResize","props","ref","internalRef","textarea","resizeTextarea","jsx","labelVariants","cva","Label","V","FormFieldContext","FormField","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","FormLabel","error","formItemId","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","RHFTextarea","name","label","description","warningText","required","disabled","readOnly","placeholder","ariaLabel","ariaDescribedby","onBlur","other","control","field","jsxs","e"],"mappings":"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","file":"rhf-textarea.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cn } from \"@/utils/index\"\nimport { TextareaProps } from \"./textarea.types\"\n\n/**\n * Textarea component for creating accessible text areas.\n * Built on top of shadcn/ui's Textarea component.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-textarea--docs\n *\n * @example\n * ```tsx\n * <Textarea placeholder=\"Enter text\" />\n * ```\n */\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, autoResize = false, ...props }, ref) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n\n    React.useEffect(() => {\n      if (!autoResize || !internalRef.current) return\n\n      const textarea = internalRef.current\n      const resizeTextarea = () => {\n        textarea.style.height = \"auto\"\n        textarea.style.height = `${textarea.scrollHeight}px`\n      }\n\n      textarea.addEventListener(\"input\", resizeTextarea)\n      resizeTextarea() // Initial resize\n\n      return () => textarea.removeEventListener(\"input\", resizeTextarea)\n    }, [autoResize])\n\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm 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)\n\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\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","\"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 { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Textarea } from \"@/components/atoms/textarea\"\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 RHFTextareaProps } from \"./rhf-textarea.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A textarea 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-rhftextarea--docs\n *\n * @example\n * ```tsx\n * <Form>\n *   <RHFTextarea name=\"description\" label=\"Description\" />\n * </Form>\n * ```\n */\nexport function RHFTextarea<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  name,\n  label,\n  description,\n  className,\n  warningText,\n  required,\n  disabled,\n  readOnly,\n  placeholder,\n  autoResize,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedby,\n  onBlur,\n  ...other\n}: RHFTextareaProps<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            <Textarea\n              {...field}\n              value={field.value}\n              onChange={(e) => {\n                field.onChange(e.target.value)\n              }}\n              onBlur={(e) => {\n                // trim if a string\n                if (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              autoResize={autoResize}\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"]}

package/dist/rhf.d.mts

@@ -3,15 +3,21 @@ import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as React from 'react';
 import { TextareaHTMLAttributes } from 'react';
-import { I as Input, C as Checkbox, S as Switch, R as RadioGroup } from './checkbox-DxgDKaHx.mjs';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import '@radix-ui/react-switch';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import '@radix-ui/react-radio-group';
-import '@radix-ui/react-checkbox';
+
+/**
+ * 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 */
@@ -114,6 +120,21 @@ interface RHFTextareaProps<TFieldValues extends FieldValues = FieldValues, TName
  */
 declare function RHFTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, autoResize, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextareaProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Checkbox component built on top of Radix UI's Checkbox primitive.
+ * Provides a customizable checkbox input with proper accessibility and keyboard navigation.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-checkbox--docs
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="terms" name="terms" />
+ * <label htmlFor="terms">Accept terms and conditions</label>
+ * ```
+ */
+
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Checkbox>, "name"> {
     /** The name of the field in the form */
     name: TName;
@@ -150,6 +171,21 @@ interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName
  */
 declare function RHFCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFCheckboxProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Switch component that provides a toggle input control.
+ * Built on top of Radix UI's Switch primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-switch--docs
+ *
+ * @example
+ * ```tsx
+ * <Switch />
+ * <Switch defaultChecked />
+ * <Switch disabled />
+ * ```
+ */
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Switch>, "name"> {
     /** The name of the field in the form */
     name: TName;
@@ -186,6 +222,22 @@ interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName e
  */
 declare function RHFSwitch<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFSwitchProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
 
+/**
+ * RadioGroup component that allows users to select a single option from a list.
+ * Built on top of Radix UI's RadioGroup primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-radio-group--docs
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup defaultValue="option-1">
+ *   <RadioGroupItem value="option-1">Option 1</RadioGroupItem>
+ *   <RadioGroupItem value="option-2">Option 2</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 interface RHFRadioGroupOption {
     label: string;
     id: string;
@@ -405,4 +457,158 @@ type FormItemContextValue = {
     id: string;
 };
 
-export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFCheckbox, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSwitch, RHFTextField, RHFTextarea, useFormField };
+type SelectOption = {
+    id: string;
+    label: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+type SelectProps = {
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Currently selected value */
+    value: string;
+    /** Array of options to display in the select */
+    options: SelectOption[];
+    /** Callback fired when the value changes */
+    onChange: (value: string) => void;
+    /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
+    renderCommandList?: (options: SelectOption[]) => React.ReactNode;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Additional class name for the select */
+    className?: string;
+    /** ID for the select element */
+    id?: string;
+};
+
+type MultiSelectOption = {
+    id: string;
+    label: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+type MultiSelectProps = {
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Array of options to display in the select */
+    options: MultiSelectOption[];
+    /** Currently selected values */
+    value: string[];
+    /** Callback fired when the values change */
+    onChange: (value: string[]) => void;
+    /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
+    renderCommandList?: (options: MultiSelectOption[]) => React.ReactNode;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Additional class name for the select */
+    className?: string;
+    /** ID for the select element */
+    id?: string;
+    /** Maximum number of selections allowed */
+    maxSelections?: number;
+    /** Whether to show the select all option */
+    showSelectAll?: boolean;
+};
+
+interface RHFMultiSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<MultiSelectProps, "name" | "value" | "onChange"> {
+    /** 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 read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A multi-select 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-rhfmultiselect--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFMultiSelect
+ *     name="countries"
+ *     label="Countries"
+ *     options={[
+ *       { id: "us", label: "United States" },
+ *       { id: "ca", label: "Canada" }
+ *     ]}
+ *
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFMultiSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFMultiSelectProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+type RHFSelectOption = SelectOption;
+interface RHFSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<SelectProps, "name" | "value" | "onChange"> {
+    /** 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 read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A select 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-rhfselect--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFSelect
+ *     name="country"
+ *     label="Country"
+ *     options={[
+ *       { id: "us", label: "United States" },
+ *       { id: "ca", label: "Canada" }
+ *     ]}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFSelectProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFCheckbox, RHFMultiSelect, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSelect, type RHFSelectOption, type RHFSelectProps, RHFSwitch, RHFTextField, RHFTextarea, useFormField };

package/dist/rhf.d.ts

@@ -3,15 +3,21 @@ import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as React from 'react';
 import { TextareaHTMLAttributes } from 'react';
-import { I as Input, C as Checkbox, S as Switch, R as RadioGroup } from './checkbox-DxgDKaHx.js';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import '@radix-ui/react-switch';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import '@radix-ui/react-radio-group';
-import '@radix-ui/react-checkbox';
+
+/**
+ * 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 */
@@ -114,6 +120,21 @@ interface RHFTextareaProps<TFieldValues extends FieldValues = FieldValues, TName
  */
 declare function RHFTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, autoResize, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextareaProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Checkbox component built on top of Radix UI's Checkbox primitive.
+ * Provides a customizable checkbox input with proper accessibility and keyboard navigation.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-checkbox--docs
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="terms" name="terms" />
+ * <label htmlFor="terms">Accept terms and conditions</label>
+ * ```
+ */
+
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Checkbox>, "name"> {
     /** The name of the field in the form */
     name: TName;
@@ -150,6 +171,21 @@ interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName
  */
 declare function RHFCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFCheckboxProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Switch component that provides a toggle input control.
+ * Built on top of Radix UI's Switch primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-switch--docs
+ *
+ * @example
+ * ```tsx
+ * <Switch />
+ * <Switch defaultChecked />
+ * <Switch disabled />
+ * ```
+ */
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Switch>, "name"> {
     /** The name of the field in the form */
     name: TName;
@@ -186,6 +222,22 @@ interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName e
  */
 declare function RHFSwitch<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFSwitchProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
 
+/**
+ * RadioGroup component that allows users to select a single option from a list.
+ * Built on top of Radix UI's RadioGroup primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-radio-group--docs
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup defaultValue="option-1">
+ *   <RadioGroupItem value="option-1">Option 1</RadioGroupItem>
+ *   <RadioGroupItem value="option-2">Option 2</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 interface RHFRadioGroupOption {
     label: string;
     id: string;
@@ -405,4 +457,158 @@ type FormItemContextValue = {
     id: string;
 };
 
-export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFCheckbox, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSwitch, RHFTextField, RHFTextarea, useFormField };
+type SelectOption = {
+    id: string;
+    label: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+type SelectProps = {
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Currently selected value */
+    value: string;
+    /** Array of options to display in the select */
+    options: SelectOption[];
+    /** Callback fired when the value changes */
+    onChange: (value: string) => void;
+    /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
+    renderCommandList?: (options: SelectOption[]) => React.ReactNode;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Additional class name for the select */
+    className?: string;
+    /** ID for the select element */
+    id?: string;
+};
+
+type MultiSelectOption = {
+    id: string;
+    label: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+type MultiSelectProps = {
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Array of options to display in the select */
+    options: MultiSelectOption[];
+    /** Currently selected values */
+    value: string[];
+    /** Callback fired when the values change */
+    onChange: (value: string[]) => void;
+    /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
+    renderCommandList?: (options: MultiSelectOption[]) => React.ReactNode;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Additional class name for the select */
+    className?: string;
+    /** ID for the select element */
+    id?: string;
+    /** Maximum number of selections allowed */
+    maxSelections?: number;
+    /** Whether to show the select all option */
+    showSelectAll?: boolean;
+};
+
+interface RHFMultiSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<MultiSelectProps, "name" | "value" | "onChange"> {
+    /** 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 read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A multi-select 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-rhfmultiselect--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFMultiSelect
+ *     name="countries"
+ *     label="Countries"
+ *     options={[
+ *       { id: "us", label: "United States" },
+ *       { id: "ca", label: "Canada" }
+ *     ]}
+ *
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFMultiSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFMultiSelectProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+type RHFSelectOption = SelectOption;
+interface RHFSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<SelectProps, "name" | "value" | "onChange"> {
+    /** 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 read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A select 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-rhfselect--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFSelect
+ *     name="country"
+ *     label="Country"
+ *     options={[
+ *       { id: "us", label: "United States" },
+ *       { id: "ca", label: "Canada" }
+ *     ]}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFSelectProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFCheckbox, RHFMultiSelect, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSelect, type RHFSelectOption, type RHFSelectProps, RHFSwitch, RHFTextField, RHFTextarea, useFormField };