@classytic/fluid 0.2.1 → 0.2.4

package/dist/index.js

@@ -13,11 +13,12 @@ import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, Pagi
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@/components/ui/table';
-import { Check, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, AlertTriangle, Loader2, AlertCircle, RefreshCw, InboxIcon, SearchX, FileX2, CheckCircle2, Info, X, Copy, Search, ArrowUp, ArrowDown, ArrowUpDown, MoreHorizontal, Sun, Moon, MinusIcon, ChevronUpIcon, ChevronDownIcon, ArrowLeft, ArrowRight, CalendarIcon, Wand2, Tag, Plus } from 'lucide-react';
+import { Check, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, AlertTriangle, Loader2, AlertCircle, RefreshCw, InboxIcon, CheckCircle2, Info, X, Copy, Search, ArrowUp, ArrowDown, ArrowUpDown, MoreHorizontal, Sun, Moon, MinusIcon, ChevronUpIcon, ChevronDownIcon, ArrowLeft, ArrowRight, CalendarIcon, Wand2, Tag, Plus, FileX2, SearchX } from 'lucide-react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { Button } from '@/components/ui/button';
 import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-dialog';
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@/components/ui/empty';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
@@ -1444,17 +1445,17 @@ function ErrorStateInline({
 }
 var PRESETS = {
   noResults: {
-    icon: SearchX,
+    icon: /* @__PURE__ */ jsx(SearchX, { className: "h-6 w-6" }),
     title: "No results found",
     description: "Try adjusting your search or filter criteria."
   },
   noData: {
-    icon: InboxIcon,
+    icon: /* @__PURE__ */ jsx(InboxIcon, { className: "h-6 w-6" }),
     title: "No data yet",
     description: "Get started by creating your first item."
   },
   notFound: {
-    icon: FileX2,
+    icon: /* @__PURE__ */ jsx(FileX2, { className: "h-6 w-6" }),
     title: "Not found",
     description: "The item you're looking for doesn't exist or has been removed."
   }
@@ -1462,35 +1463,24 @@ var PRESETS = {
 function EmptyState({
   title = "Nothing here",
   description,
-  icon: IconProp = InboxIcon,
+  icon = /* @__PURE__ */ jsx(InboxIcon, { className: "h-6 w-6" }),
   action,
   secondaryAction,
   variant = "default",
   className,
   children
 }) {
-  const isLucideIcon = typeof IconProp === "function";
-  const Icon = IconProp;
-  const iconElement = isLucideIcon ? /* @__PURE__ */ jsx(
-    Icon,
-    {
-      className: cn(
-        "text-muted-foreground/60",
-        variant === "compact" ? "h-8 w-8" : "h-12 w-12"
-      ),
-      strokeWidth: 1.5
-    }
-  ) : IconProp;
   if (variant === "compact") {
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-slot": "empty-state",
         className: cn(
           "flex items-center gap-3 py-6 px-4 text-muted-foreground",
           className
         ),
         children: [
-          iconElement,
+          icon && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", children: icon }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
             description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/80 mt-0.5", children: description })
@@ -1501,50 +1491,23 @@ function EmptyState({
     );
   }
   return /* @__PURE__ */ jsxs(
-    "div",
+    Empty,
     {
       className: cn(
-        "flex flex-col items-center justify-center text-center",
-        variant === "card" && "rounded-lg border border-dashed border-muted-foreground/25 bg-muted/30",
-        variant === "default" ? "py-16 px-6" : "py-12 px-8",
+        variant === "card" && "border border-dashed",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-center rounded-full bg-muted/60",
-              variant === "default" ? "h-20 w-20 mb-6" : "h-16 w-16 mb-5"
-            ),
-            children: iconElement
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "h3",
-          {
-            className: cn(
-              "font-semibold tracking-tight",
-              variant === "default" ? "text-lg" : "text-base"
-            ),
-            children: title
-          }
-        ),
-        description && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(
-              "text-muted-foreground max-w-sm mt-2",
-              variant === "default" ? "text-sm" : "text-xs"
-            ),
-            children: description
-          }
-        ),
-        children && /* @__PURE__ */ jsx("div", { className: "mt-4 w-full max-w-md", children }),
-        (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-6", children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+          icon && /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: icon }),
+          /* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+          description && /* @__PURE__ */ jsx(EmptyDescription, { children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx(EmptyContent, { children }),
+        (action || secondaryAction) && /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           action,
           secondaryAction
-        ] })
+        ] }) })
       ]
     }
   );
@@ -5276,10 +5239,9 @@ function ComboboxInput({
   onChange: propOnChange
 }) {
   const descriptionText = description || helperText;
-  const itemValues = useMemo(() => items.map((item) => item.value), [items]);
   const handleValueChange = useCallback(
-    (newValue, field) => {
-      const safeValue = newValue || "";
+    (newItem, field) => {
+      const safeValue = newItem?.value || "";
       if (field) {
         field.onChange(safeValue);
       } else if (propOnChange) {
@@ -5290,12 +5252,13 @@ function ComboboxInput({
     [propOnChange, onValueChange]
   );
   const renderCombobox = (currentValue, field, isDisabled) => {
+    const selectedItem = currentValue ? items.find((item) => item.value === currentValue) ?? null : null;
     return /* @__PURE__ */ jsxs(
       Combobox,
       {
-        items: itemValues,
-        value: currentValue,
-        onValueChange: (value) => handleValueChange(value, field),
+        items,
+        value: selectedItem,
+        onValueChange: (item) => handleValueChange(item, field),
         disabled: isDisabled,
         children: [
           /* @__PURE__ */ jsx(
@@ -5307,17 +5270,16 @@ function ComboboxInput({
           ),
           /* @__PURE__ */ jsxs(ComboboxContent, { children: [
             /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }),
-            /* @__PURE__ */ jsx(ComboboxList, { children: (itemValue) => {
-              const option = items.find((item) => item.value === itemValue);
-              if (!option) return null;
+            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
+              if (!item) return null;
               return /* @__PURE__ */ jsx(
                 ComboboxItem,
                 {
-                  value: option.value,
-                  disabled: option.disabled,
-                  children: renderOption ? renderOption(option) : option.label
+                  value: item,
+                  disabled: item.disabled,
+                  children: renderOption ? renderOption(item) : item.label
                 },
-                option.value
+                item.value
               );
             } })
           ] })