shadcn-ui-react 0.1.2 → 0.2.0

package/dist/index.cjs

@@ -64,6 +64,7 @@ __export(index_exports, {
   AccordionTrigger: () => AccordionTrigger,
   Alert: () => Alert,
   AlertDescription: () => AlertDescription,
+  AlertModal: () => AlertModal,
   AlertTitle: () => AlertTitle,
   AspectRatio: () => AspectRatio,
   Avatar: () => Avatar,
@@ -77,6 +78,7 @@ __export(index_exports, {
   BreadcrumbList: () => BreadcrumbList,
   BreadcrumbPage: () => BreadcrumbPage,
   BreadcrumbSeparator: () => BreadcrumbSeparator,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Calendar: () => Calendar,
   Card: () => Card,
@@ -118,6 +120,7 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  DataTableSkeleton: () => DataTableSkeleton,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -187,6 +190,7 @@ __export(index_exports, {
   MenubarSubTrigger: () => MenubarSubTrigger,
   MenubarTrigger: () => MenubarTrigger,
   Modal: () => Modal,
+  ModeToggle: () => ModeToggle,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuIndicator: () => NavigationMenuIndicator,
@@ -8991,6 +8995,124 @@ function useToast() {
     dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
   });
 }
+
+// src/shared/alert-modal.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var AlertModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  loading,
+  title = "Are you sure?",
+  description = "Are you sure you want to continue?",
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    Modal,
+    {
+      title,
+      description,
+      isOpen,
+      onClose,
+      className,
+      children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex w-full items-center justify-end space-x-2 pt-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { disabled: loading, variant: "outline", onClick: onClose, children: cancelText }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { disabled: loading, variant: "destructive", onClick: onConfirm, children: confirmText })
+      ] })
+    }
+  );
+};
+
+// src/shared/breadcrumbs.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_react34 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function Breadcrumbs({ items, className, classNameList }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Breadcrumb, { className, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbList, { className: classNameList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react34.Fragment, { children: [
+    index !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbLink, { href: item.link, children: item.title }) }),
+    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react3.Slash, {}) }),
+    index === items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbPage, { children: item.title })
+  ] }, item.title)) }) });
+}
+
+// src/shared/data-table-skeleton.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function DataTableSkeleton({
+  columnCount,
+  rowCount = 10,
+  searchableColumnCount = 0,
+  filterableColumnCount = 0,
+  showViewOptions = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "w-full space-y-3 overflow-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-1 items-center space-x-2 space-y-4", children: [
+        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-10 w-[150px] lg:w-[250px]" }, i)) : null,
+        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-10 w-[70px] border-dashed" }, i)) : null
+      ] }),
+      showViewOptions ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "ml-auto hidden h-7 w-[70px] lg:flex" }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableBody, { children: Array.from({ length: rowCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-8 w-40" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-8 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-8 w-[70px]" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "h-8 w-20" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "hidden size-8 lg:block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "size-8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "size-8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { className: "hidden size-8 lg:block" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/shared/theme-toggle.tsx
+var import_lucide_react4 = require("lucide-react");
+
+// src/providers/theme-provider.tsx
+var import_react35 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var initialState = {
+  theme: "system",
+  setTheme: () => null
+};
+var ThemeProviderContext = (0, import_react35.createContext)(initialState);
+var useTheme2 = () => {
+  const context = (0, import_react35.useContext)(ThemeProviderContext);
+  if (context === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+
+// src/shared/theme-toggle.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function ModeToggle() {
+  const { setTheme } = useTheme2();
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button, { variant: "outline", size: "icon", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react4.Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react4.Moon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "sr-only", children: "Toggle theme" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownMenuItem, { onClick: () => setTheme("system"), children: "System" })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -8999,6 +9121,7 @@ function useToast() {
   AccordionTrigger,
   Alert,
   AlertDescription,
+  AlertModal,
   AlertTitle,
   AspectRatio,
   Avatar,
@@ -9012,6 +9135,7 @@ function useToast() {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  Breadcrumbs,
   Button,
   Calendar,
   Card,
@@ -9053,6 +9177,7 @@ function useToast() {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DataTableSkeleton,
   Dialog,
   DialogClose,
   DialogContent,
@@ -9122,6 +9247,7 @@ function useToast() {
   MenubarSubTrigger,
   MenubarTrigger,
   Modal,
+  ModeToggle,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuIndicator,

package/dist/index.d.cts

@@ -649,6 +649,54 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
+type TAlertModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    loading: boolean;
+    title?: string;
+    description?: string;
+    className?: string;
+    cancelText?: string;
+    confirmText?: string;
+    children?: React.ReactNode;
+};
+declare const AlertModal: ({ isOpen, onClose, onConfirm, loading, title, description, cancelText, confirmText, className, children, }: TAlertModalProps) => react_jsx_runtime.JSX.Element;
+
+type BreadcrumbItemProps = {
+    title: string;
+    link: string;
+    className?: string;
+};
+type BreadcrumbsProps = {
+    items: BreadcrumbItemProps[];
+    className?: string;
+    classNameList?: string;
+    separator?: React.ReactNode;
+};
+declare function Breadcrumbs({ items, className, classNameList }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    title: string;
+    href: string;
+    disabled?: boolean;
+    external?: boolean;
+    icon?: keyof typeof Icons;
+    label?: string;
+    description?: string;
+}
+
+type DataTableSkeletonProps = {
+    columnCount: number;
+    rowCount?: number;
+    searchableColumnCount?: number;
+    filterableColumnCount?: number;
+    showViewOptions?: boolean;
+};
+declare function DataTableSkeleton({ columnCount, rowCount, searchableColumnCount, filterableColumnCount, showViewOptions }: DataTableSkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare function ModeToggle(): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, 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, 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, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, 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, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, 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, 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, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, 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, ModeToggle, type NavItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, 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

@@ -649,6 +649,54 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
+type TAlertModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    loading: boolean;
+    title?: string;
+    description?: string;
+    className?: string;
+    cancelText?: string;
+    confirmText?: string;
+    children?: React.ReactNode;
+};
+declare const AlertModal: ({ isOpen, onClose, onConfirm, loading, title, description, cancelText, confirmText, className, children, }: TAlertModalProps) => react_jsx_runtime.JSX.Element;
+
+type BreadcrumbItemProps = {
+    title: string;
+    link: string;
+    className?: string;
+};
+type BreadcrumbsProps = {
+    items: BreadcrumbItemProps[];
+    className?: string;
+    classNameList?: string;
+    separator?: React.ReactNode;
+};
+declare function Breadcrumbs({ items, className, classNameList }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    title: string;
+    href: string;
+    disabled?: boolean;
+    external?: boolean;
+    icon?: keyof typeof Icons;
+    label?: string;
+    description?: string;
+}
+
+type DataTableSkeletonProps = {
+    columnCount: number;
+    rowCount?: number;
+    searchableColumnCount?: number;
+    filterableColumnCount?: number;
+    showViewOptions?: boolean;
+};
+declare function DataTableSkeleton({ columnCount, rowCount, searchableColumnCount, filterableColumnCount, showViewOptions }: DataTableSkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare function ModeToggle(): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, 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, 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, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, 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, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, 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, 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, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, 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, ModeToggle, type NavItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, 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

@@ -8794,6 +8794,124 @@ function useToast() {
     dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
   });
 }
+
+// src/shared/alert-modal.tsx
+import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+var AlertModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  loading,
+  title = "Are you sure?",
+  description = "Are you sure you want to continue?",
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsx44(
+    Modal,
+    {
+      title,
+      description,
+      isOpen,
+      onClose,
+      className,
+      children: children ? children : /* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center justify-end space-x-2 pt-6", children: [
+        /* @__PURE__ */ jsx44(Button, { disabled: loading, variant: "outline", onClick: onClose, children: cancelText }),
+        /* @__PURE__ */ jsx44(Button, { disabled: loading, variant: "destructive", onClick: onConfirm, children: confirmText })
+      ] })
+    }
+  );
+};
+
+// src/shared/breadcrumbs.tsx
+import { Slash } from "lucide-react";
+import { Fragment } from "react";
+import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+function Breadcrumbs({ items, className, classNameList }) {
+  return /* @__PURE__ */ jsx45(Breadcrumb, { className, children: /* @__PURE__ */ jsx45(BreadcrumbList, { className: classNameList, children: items.map((item, index) => /* @__PURE__ */ jsxs19(Fragment, { children: [
+    index !== items.length - 1 && /* @__PURE__ */ jsx45(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ jsx45(BreadcrumbLink, { href: item.link, children: item.title }) }),
+    index < items.length - 1 && /* @__PURE__ */ jsx45(BreadcrumbSeparator, { children: /* @__PURE__ */ jsx45(Slash, {}) }),
+    index === items.length - 1 && /* @__PURE__ */ jsx45(BreadcrumbPage, { children: item.title })
+  ] }, item.title)) }) });
+}
+
+// src/shared/data-table-skeleton.tsx
+import { jsx as jsx46, jsxs as jsxs20 } from "react/jsx-runtime";
+function DataTableSkeleton({
+  columnCount,
+  rowCount = 10,
+  searchableColumnCount = 0,
+  filterableColumnCount = 0,
+  showViewOptions = true
+}) {
+  return /* @__PURE__ */ jsxs20("div", { className: "w-full space-y-3 overflow-auto", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 items-center space-x-2 space-y-4", children: [
+        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ jsx46(Skeleton, { className: "h-10 w-[150px] lg:w-[250px]" }, i)) : null,
+        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ jsx46(Skeleton, { className: "h-10 w-[70px] border-dashed" }, i)) : null
+      ] }),
+      showViewOptions ? /* @__PURE__ */ jsx46(Skeleton, { className: "ml-auto hidden h-7 w-[70px] lg:flex" }) : null
+    ] }),
+    /* @__PURE__ */ jsx46("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs20(Table, { children: [
+      /* @__PURE__ */ jsx46(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ jsx46(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ jsx46(TableHead, { children: /* @__PURE__ */ jsx46(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) }),
+      /* @__PURE__ */ jsx46(TableBody, { children: Array.from({ length: rowCount }).map((_, i) => /* @__PURE__ */ jsx46(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ jsx46(TableCell, { children: /* @__PURE__ */ jsx46(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8", children: [
+      /* @__PURE__ */ jsx46("div", { className: "flex-1", children: /* @__PURE__ */ jsx46(Skeleton, { className: "h-8 w-40" }) }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx46(Skeleton, { className: "h-8 w-24" }),
+          /* @__PURE__ */ jsx46(Skeleton, { className: "h-8 w-[70px]" })
+        ] }),
+        /* @__PURE__ */ jsx46("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: /* @__PURE__ */ jsx46(Skeleton, { className: "h-8 w-20" }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx46(Skeleton, { className: "hidden size-8 lg:block" }),
+          /* @__PURE__ */ jsx46(Skeleton, { className: "size-8" }),
+          /* @__PURE__ */ jsx46(Skeleton, { className: "size-8" }),
+          /* @__PURE__ */ jsx46(Skeleton, { className: "hidden size-8 lg:block" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/shared/theme-toggle.tsx
+import { Moon as Moon2, Sun } from "lucide-react";
+
+// src/providers/theme-provider.tsx
+import { createContext as createContext5, useContext as useContext6, useEffect as useEffect5, useState as useState5 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var initialState = {
+  theme: "system",
+  setTheme: () => null
+};
+var ThemeProviderContext = createContext5(initialState);
+var useTheme2 = () => {
+  const context = useContext6(ThemeProviderContext);
+  if (context === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+
+// src/shared/theme-toggle.tsx
+import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
+function ModeToggle() {
+  const { setTheme } = useTheme2();
+  return /* @__PURE__ */ jsxs21(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx48(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(Button, { variant: "outline", size: "icon", children: [
+      /* @__PURE__ */ jsx48(Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+      /* @__PURE__ */ jsx48(Moon2, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+      /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Toggle theme" })
+    ] }) }),
+    /* @__PURE__ */ jsxs21(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx48(DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }),
+      /* @__PURE__ */ jsx48(DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }),
+      /* @__PURE__ */ jsx48(DropdownMenuItem, { onClick: () => setTheme("system"), children: "System" })
+    ] })
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
@@ -8801,6 +8919,7 @@ export {
   AccordionTrigger,
   Alert,
   AlertDescription,
+  AlertModal,
   AlertTitle,
   AspectRatio,
   Avatar,
@@ -8814,6 +8933,7 @@ export {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  Breadcrumbs,
   Button,
   Calendar,
   Card,
@@ -8855,6 +8975,7 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DataTableSkeleton,
   Dialog,
   DialogClose,
   DialogContent,
@@ -8924,6 +9045,7 @@ export {
   MenubarSubTrigger,
   MenubarTrigger,
   Modal,
+  ModeToggle,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuIndicator,

package/dist/style.css

@@ -24,7 +24,11 @@
     --color-red-300: oklch(0.808 0.114 19.571);
     --color-red-400: oklch(0.704 0.191 22.216);
     --color-red-600: oklch(0.577 0.245 27.325);
+    --color-gray-100: oklch(0.967 0.003 264.542);
+    --color-gray-200: oklch(0.928 0.006 264.531);
+    --color-gray-300: oklch(0.872 0.01 258.338);
     --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-lg: 32rem;
@@ -34,9 +38,16 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-widest: 0.1em;
     --leading-relaxed: 1.625;
@@ -324,6 +335,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-5 {
+    bottom: calc(var(--spacing) * -5);
+  }
   .-bottom-12 {
     bottom: calc(var(--spacing) * -12);
   }
@@ -396,6 +410,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -417,6 +434,12 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-2\.5 {
+    margin-left: calc(var(--spacing) * 2.5);
+  }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -429,6 +452,12 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -438,6 +467,14 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -459,6 +496,9 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -471,9 +511,24 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
+  .h-\[1\.2rem\] {
+    height: 1.2rem;
+  }
   .h-\[1px\] {
     height: 1px;
   }
+  .h-\[calc\(80vh-220px\)\] {
+    height: calc(80vh - 220px);
+  }
   .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
     height: var(--radix-navigation-menu-viewport-height);
   }
@@ -489,6 +544,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -531,18 +589,48 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-\[1\.2rem\] {
+    width: 1.2rem;
+  }
   .w-\[1px\] {
     width: 1px;
   }
+  .w-\[70px\] {
+    width: 70px;
+  }
+  .w-\[80px\] {
+    width: 80px;
+  }
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[150px\] {
+    width: 150px;
+  }
   .w-full {
     width: 100%;
   }
@@ -575,6 +663,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-none {
+    flex: none;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -609,12 +700,30 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .rotate-0 {
+    rotate: 0deg;
+  }
   .rotate-45 {
     rotate: 45deg;
   }
   .rotate-90 {
     rotate: 90deg;
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -624,6 +733,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -651,12 +763,18 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -690,6 +808,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -711,6 +836,11 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -776,6 +906,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-destructive {
     border-color: var(--destructive);
   }
@@ -821,6 +955,12 @@
   .bg-foreground {
     background-color: var(--foreground);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -845,12 +985,19 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .fill-current {
     fill: currentColor;
   }
   .fill-primary {
     fill: var(--primary);
   }
+  .object-cover {
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -872,6 +1019,12 @@
   .p-\[1px\] {
     padding: 1px;
   }
+  .\!px-0 {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -905,6 +1058,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -917,6 +1073,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -953,6 +1112,10 @@
   .align-middle {
     vertical-align: middle;
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -961,6 +1124,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -972,6 +1139,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1001,6 +1172,9 @@
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
+  .text-black {
+    color: var(--color-black);
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -1019,6 +1193,9 @@
   .text-foreground\/50 {
     color: color-mix(in oklab, var(--foreground) 50%, transparent);
   }
+  .text-gray-100 {
+    color: var(--color-gray-100);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1034,6 +1211,9 @@
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -1049,6 +1229,9 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
   .opacity-90 {
     opacity: 90%;
   }
@@ -1061,6 +1244,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1185,6 +1377,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .duration-1000 {
     --tw-duration: 1000ms;
     transition-duration: 1000ms;
@@ -1221,6 +1417,9 @@
   .duration-300 {
     animation-duration: 300ms;
   }
+  .duration-500 {
+    animation-duration: 500ms;
+  }
   .duration-1000 {
     animation-duration: 1000ms;
   }
@@ -1474,6 +1673,13 @@
       }
     }
   }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -1481,6 +1687,13 @@
       }
     }
   }
+  .hover\:text-black {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-black);
+      }
+    }
+  }
   .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
@@ -2248,6 +2461,16 @@
       gap: calc(var(--spacing) * 2.5);
     }
   }
+  .sm\:gap-6 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:gap-8 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:space-y-0 {
     @media (width >= 40rem) {
       :where(& > :not(:last-child)) {
@@ -2285,6 +2508,12 @@
       text-align: left;
     }
   }
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
   .data-\[state\=open\]\:sm\:slide-in-from-bottom-full {
     &[data-state=open] {
       @media (width >= 40rem) {
@@ -2297,6 +2526,21 @@
       position: absolute;
     }
   }
+  .md\:ml-6 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:h-\[calc\(80dvh-80px\)\] {
+    @media (width >= 48rem) {
+      height: calc(80dvh - 80px);
+    }
+  }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     @media (width >= 48rem) {
       width: var(--radix-navigation-menu-viewport-width);
@@ -2312,6 +2556,62 @@
       max-width: 420px;
     }
   }
+  .md\:max-w-sm {
+    @media (width >= 48rem) {
+      max-width: var(--container-sm);
+    }
+  }
+  .md\:px-2 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+  }
+  .lg\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
+  .lg\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
+  .lg\:w-\[250px\] {
+    @media (width >= 64rem) {
+      width: 250px;
+    }
+  }
+  .lg\:gap-8 {
+    @media (width >= 64rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
+  .dark\:scale-0 {
+    &:is(.dark *) {
+      --tw-scale-x: 0%;
+      --tw-scale-y: 0%;
+      --tw-scale-z: 0%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .dark\:scale-100 {
+    &:is(.dark *) {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .dark\:-rotate-90 {
+    &:is(.dark *) {
+      rotate: calc(90deg * -1);
+    }
+  }
+  .dark\:rotate-0 {
+    &:is(.dark *) {
+      rotate: 0deg;
+    }
+  }
   .dark\:border-destructive {
     &:is(.dark *) {
       border-color: var(--destructive);
@@ -2636,6 +2936,9 @@
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
 @property --tw-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0); }
 @property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0); }
 @property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "React UI library for ShadCN",
@@ -55,20 +55,21 @@
     "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
+    "jest": "^29.7.0",
     "react": "^19.0.0",
     "react-day-picker": "^9.5.1",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.2.0",
     "react-test-renderer": "^19.0.0",
     "rimraf": "^6.0.1",
     "tailwindcss": "^4.0.9",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.4.0",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-ts-alias": "^0.1.1",
     "typescript": "^5.8.2",
     "vaul": "^1.1.2",
-    "jest": "^29.7.0",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-ts-alias": "^0.1.1"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.3.1 || ^19.0.0 || ^20.0.0",
@@ -107,6 +108,7 @@
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tanstack/react-table": "^8.21.2",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
     "class-variance-authority": "^0.7.1",
@@ -116,9 +118,12 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.477.0",
     "next-themes": "^0.4.4",
+    "react-dropzone": "^14.3.8",
+    "react-helmet-next": "^0.0.1",
     "react-resizable-panels": "^2.1.7",
     "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.2",
-    "tailwind-variants": "^0.3.1"
+    "tailwind-variants": "^0.3.1",
+    "use-debounce": "^10.0.4"
   }
 }