shadcn-ui-react 0.3.4 → 0.3.5

package/README.md

@@ -65,6 +65,7 @@ export default function App() {
 - `Dialog`
 - `Drawer`
 - `DropdownMenu`
+- `Dropzone`
 - `HoverCard`
 - `Input`
 - `InputOtp`

package/dist/index.cjs

@@ -158,6 +158,7 @@ __export(index_exports, {
   DropdownMenuSubContent: () => DropdownMenuSubContent,
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  Dropzone: () => Dropzone,
   FileUpload: () => FileUpload,
   Form: () => Form,
   FormControl: () => FormControl,
@@ -7838,7 +7839,6 @@ function FileUpload({
   const { getRootProps, getInputProps } = (0, import_react_dropzone.useDropzone)({
     accept: "image/*",
     onDrop: (acceptedFiles) => {
-      console.log("files acceptedFiles=>", acceptedFiles);
       onUpdateFile(acceptedFiles);
     }
   });
@@ -7991,6 +7991,52 @@ function PaginationSection({
     ] })
   ] }) }) });
 }
+
+// src/shared/dropzone.tsx
+var import_react_dropzone2 = require("react-dropzone");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function Dropzone({
+  label,
+  onChange,
+  value,
+  className,
+  description = "Drag and drop some files here, or click to select files",
+  descriptionActive = "Drop the files here ...",
+  accept,
+  options,
+  descriptionClassName,
+  dropzoneClassName,
+  valueClassName,
+  labelClassName
+}) {
+  const { getRootProps, getInputProps, isDragActive } = (0, import_react_dropzone2.useDropzone)(__spreadValues({
+    onDrop: (acceptedFiles) => {
+      onChange(acceptedFiles);
+    },
+    accept
+  }, options));
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: cn("font-medium", labelClassName), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, getRootProps()), {
+        className: cn(
+          "cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400",
+          isDragActive && "border-blue-500 bg-blue-50",
+          dropzoneClassName
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("input", __spreadValues({}, getInputProps())),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: cn("text-gray-600", descriptionClassName), children: isDragActive ? descriptionActive : description })
+        ]
+      })
+    ),
+    value && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: cn("text-sm text-gray-700 space-y-1", valueClassName), children: value.map((file, idx) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("li", { children: [
+      "\u2022 ",
+      file.name
+    ] }, idx)) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -8092,6 +8138,7 @@ function PaginationSection({
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Dropzone,
   FileUpload,
   Form,
   FormControl,

package/dist/index.d.cts

@@ -42,6 +42,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { ColumnDef } from '@tanstack/react-table';
+import { Accept, DropzoneOptions } from 'react-dropzone';
 import { ClassValue } from 'clsx';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
@@ -755,14 +756,14 @@ type DataTableSkeletonProps = {
 };
 declare function DataTableSkeleton({ columnCount, rowCount, searchableColumnCount, filterableColumnCount, showViewOptions, }: DataTableSkeletonProps): react_jsx_runtime.JSX.Element;
 
-type TFileUploadProps = {
+type TFileUploadProps$1 = {
     label?: string;
     onChange: (value: File[]) => void;
     value: File[];
     className?: string;
     classNameContent?: string;
 };
-declare function FileUpload({ onChange, value, label, className, classNameContent, }: TFileUploadProps): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ onChange, value, label, className, classNameContent, }: TFileUploadProps$1): react_jsx_runtime.JSX.Element;
 declare function ImagePreview({ file }: {
     file: File;
 }): react_jsx_runtime.JSX.Element | null;
@@ -786,6 +787,22 @@ type TPaginationSectionProps = {
 };
 declare function PaginationSection({ totalPosts, postsPerPage, currentPage, setCurrentPage, }: TPaginationSectionProps): react_jsx_runtime.JSX.Element;
 
+type TFileUploadProps = {
+    label?: string;
+    description?: string;
+    descriptionActive?: string;
+    onChange: (value: File[]) => void;
+    value?: File[];
+    className?: string;
+    descriptionClassName?: string;
+    dropzoneClassName?: string;
+    valueClassName?: string;
+    labelClassName?: string;
+    accept?: Accept;
+    options?: DropzoneOptions;
+};
+declare function Dropzone({ label, onChange, value, className, description, descriptionActive, accept, options, descriptionClassName, dropzoneClassName, valueClassName, labelClassName, }: TFileUploadProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableSkeleton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useFormField, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableSkeleton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useFormField, useToast };

package/dist/index.d.ts

@@ -42,6 +42,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { ColumnDef } from '@tanstack/react-table';
+import { Accept, DropzoneOptions } from 'react-dropzone';
 import { ClassValue } from 'clsx';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
@@ -755,14 +756,14 @@ type DataTableSkeletonProps = {
 };
 declare function DataTableSkeleton({ columnCount, rowCount, searchableColumnCount, filterableColumnCount, showViewOptions, }: DataTableSkeletonProps): react_jsx_runtime.JSX.Element;
 
-type TFileUploadProps = {
+type TFileUploadProps$1 = {
     label?: string;
     onChange: (value: File[]) => void;
     value: File[];
     className?: string;
     classNameContent?: string;
 };
-declare function FileUpload({ onChange, value, label, className, classNameContent, }: TFileUploadProps): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ onChange, value, label, className, classNameContent, }: TFileUploadProps$1): react_jsx_runtime.JSX.Element;
 declare function ImagePreview({ file }: {
     file: File;
 }): react_jsx_runtime.JSX.Element | null;
@@ -786,6 +787,22 @@ type TPaginationSectionProps = {
 };
 declare function PaginationSection({ totalPosts, postsPerPage, currentPage, setCurrentPage, }: TPaginationSectionProps): react_jsx_runtime.JSX.Element;
 
+type TFileUploadProps = {
+    label?: string;
+    description?: string;
+    descriptionActive?: string;
+    onChange: (value: File[]) => void;
+    value?: File[];
+    className?: string;
+    descriptionClassName?: string;
+    dropzoneClassName?: string;
+    valueClassName?: string;
+    labelClassName?: string;
+    accept?: Accept;
+    options?: DropzoneOptions;
+};
+declare function Dropzone({ label, onChange, value, className, description, descriptionActive, accept, options, descriptionClassName, dropzoneClassName, valueClassName, labelClassName, }: TFileUploadProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableSkeleton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useFormField, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableSkeleton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useFormField, useToast };

package/dist/index.js

@@ -7644,7 +7644,6 @@ function FileUpload({
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     onDrop: (acceptedFiles) => {
-      console.log("files acceptedFiles=>", acceptedFiles);
       onUpdateFile(acceptedFiles);
     }
   });
@@ -7797,6 +7796,52 @@ function PaginationSection({
     ] })
   ] }) }) });
 }
+
+// src/shared/dropzone.tsx
+import { useDropzone as useDropzone2 } from "react-dropzone";
+import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+function Dropzone({
+  label,
+  onChange,
+  value,
+  className,
+  description = "Drag and drop some files here, or click to select files",
+  descriptionActive = "Drop the files here ...",
+  accept,
+  options,
+  descriptionClassName,
+  dropzoneClassName,
+  valueClassName,
+  labelClassName
+}) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone2(__spreadValues({
+    onDrop: (acceptedFiles) => {
+      onChange(acceptedFiles);
+    },
+    accept
+  }, options));
+  return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsx54("p", { className: cn("font-medium", labelClassName), children: label }),
+    /* @__PURE__ */ jsxs28(
+      "div",
+      __spreadProps(__spreadValues({}, getRootProps()), {
+        className: cn(
+          "cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400",
+          isDragActive && "border-blue-500 bg-blue-50",
+          dropzoneClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx54("input", __spreadValues({}, getInputProps())),
+          /* @__PURE__ */ jsx54("p", { className: cn("text-gray-600", descriptionClassName), children: isDragActive ? descriptionActive : description })
+        ]
+      })
+    ),
+    value && value.length > 0 && /* @__PURE__ */ jsx54("ul", { className: cn("text-sm text-gray-700 space-y-1", valueClassName), children: value.map((file, idx) => /* @__PURE__ */ jsxs28("li", { children: [
+      "\u2022 ",
+      file.name
+    ] }, idx)) })
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
@@ -7897,6 +7942,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Dropzone,
   FileUpload,
   Form,
   FormControl,

package/dist/style.css

@@ -26,9 +26,14 @@
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-blue-50: oklch(97% 0.014 254.604);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -866,6 +871,9 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
   .border-destructive {
     border-color: var(--destructive);
   }
@@ -875,6 +883,9 @@
       border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
     }
   }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -908,6 +919,9 @@
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
   }
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
   .bg-border {
     background-color: var(--border);
   }
@@ -1154,6 +1168,12 @@
   .text-gray-100 {
     color: var(--color-gray-100);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1573,6 +1593,13 @@
       z-index: 20;
     }
   }
+  .hover\:border-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-400);
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",