@me1a/ui 2.2.6 → 2.2.8

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/scroll-area/index.d.mts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+/**
+ * ScrollArea component that provides a custom scrollable area with a styled scrollbar.
+ * Built on top of Radix UI's ScrollArea primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-scroll-area--docs
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+ *   <div className="space-y-4">
+ *     <h4 className="text-sm font-medium leading-none">Scroll Area</h4>
+ *     <p className="text-sm text-muted-foreground">
+ *       Scrollable content goes here...
+ *     </p>
+ *   </div>
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    orientation?: "vertical" | "horizontal";
+} & React.RefAttributes<HTMLDivElement>>;
+
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>;
+type ScrollBarProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
+    orientation?: "vertical" | "horizontal";
+};
+
+export { ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps };

package/dist/scroll-area/index.mjs

@@ -0,0 +1,2 @@
+import*as c from"react";import*as r from"@radix-ui/react-scroll-area";import{clsx as s}from"clsx";import{twMerge as S}from"tailwind-merge";function a(...l){return S(s(l))}import{jsx as o,jsxs as f}from"react/jsx-runtime";var p=c.forwardRef(({className:l,children:e,...i},t)=>f(r.Root,{ref:t,className:a("relative overflow-hidden",l),...i,children:[o(r.Viewport,{className:"h-full w-full rounded-[inherit]",children:e}),o(m,{}),o(r.Corner,{})]}));p.displayName=r.Root.displayName;var m=c.forwardRef(({className:l,orientation:e="vertical",...i},t)=>o(r.ScrollAreaScrollbar,{ref:t,orientation:e,className:a("flex touch-none select-none transition-colors",e==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",e==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",l),...i,children:o(r.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})}));m.displayName=r.ScrollAreaScrollbar.displayName;export{p as ScrollArea,m as ScrollBar};
+//# sourceMappingURL=index.mjs.map

package/dist/scroll-area/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/atoms/scroll-area/scroll-area.tsx","../../src/utils/cn.ts"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/utils/index\"\nimport { ScrollAreaProps, ScrollBarProps } from \"./scroll-area.types\"\n\n/**\n * ScrollArea component that provides a custom scrollable area with a styled scrollbar.\n * Built on top of Radix UI's ScrollArea primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-scroll-area--docs\n *\n * @example\n * ```tsx\n * <ScrollArea className=\"h-[200px] w-[350px] rounded-md border p-4\">\n *   <div className=\"space-y-4\">\n *     <h4 className=\"text-sm font-medium leading-none\">Scroll Area</h4>\n *     <p className=\"text-sm text-muted-foreground\">\n *       Scrollable content goes here...\n *     </p>\n *   </div>\n * </ScrollArea>\n * ```\n */\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ScrollBarProps\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" && \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\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"],"mappings":"AACA,UAAYA,MAAW,QACvB,UAAYC,MAAyB,8BCFrC,OAA0B,QAAAC,MAAY,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CDwBE,OAKE,OAAAC,EALF,QAAAC,MAAA,oBAJF,IAAMC,EAAmB,aAGvB,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IACpCL,EAAqB,OAApB,CACC,IAAKK,EACL,UAAWC,EAAG,2BAA4BJ,CAAS,EAClD,GAAGE,EAEJ,UAAAL,EAAqB,WAApB,CAA6B,UAAU,kCACrC,SAAAI,EACH,EACAJ,EAACQ,EAAA,EAAU,EACXR,EAAqB,SAApB,EAA2B,GAC9B,CACD,EACDE,EAAW,YAAkC,OAAK,YAElD,IAAMM,EAAkB,aAGtB,CAAC,CAAE,UAAAL,EAAW,YAAAM,EAAc,WAAY,GAAGJ,CAAM,EAAGC,IACpDN,EAAqB,sBAApB,CACC,IAAKM,EACL,YAAaG,EACb,UAAWF,EACT,gDACAE,IAAgB,YAAc,qDAC9BA,IAAgB,cAAgB,uDAChCN,CACF,EACC,GAAGE,EAEJ,SAAAL,EAAqB,kBAApB,CAAoC,UAAU,yCAAyC,EAC1F,CACD,EACDQ,EAAU,YAAkC,sBAAoB","names":["React","ScrollAreaPrimitive","clsx","twMerge","cn","inputs","jsx","jsxs","ScrollArea","className","children","props","ref","cn","ScrollBar","orientation"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@me1a/ui",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "private": false,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -77,6 +77,10 @@
       "types": "./dist/separator/index.d.mts",
       "import": "./dist/separator/index.mjs"
     },
+    "./scroll-area": {
+      "types": "./dist/scroll-area/index.d.mts",
+      "import": "./dist/scroll-area/index.mjs"
+    },
     "./resizable": {
       "types": "./dist/resizable/index.d.mts",
       "import": "./dist/resizable/index.mjs"
@@ -105,6 +109,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"
@@ -201,6 +209,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"
@@ -294,6 +306,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.12",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.3",
@@ -306,6 +319,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"