hazo_ui 2.9.0 → 2.11.0

package/dist/index.js

@@ -7,7 +7,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, Loader2, GripVertical, Calendar as Calendar$1 } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, GripVertical, Calendar as Calendar$1 } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -67,6 +67,8 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Toaster, toast } from 'sonner';
+export { toast as rawToast } from 'sonner';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -186,23 +188,23 @@ var buttonVariants = cva(
 );
 var variant_styles = {
   default: {
-    backgroundColor: "var(--primary)",
-    color: "var(--primary-foreground)",
-    border: "1px solid var(--primary)"
+    backgroundColor: "hsl(var(--primary))",
+    color: "hsl(var(--primary-foreground))",
+    border: "1px solid hsl(var(--primary))"
   },
   destructive: {
-    backgroundColor: "var(--destructive)",
-    color: "white",
-    border: "1px solid var(--destructive)"
+    backgroundColor: "hsl(var(--destructive))",
+    color: "hsl(var(--destructive-foreground))",
+    border: "1px solid hsl(var(--destructive))"
   },
   outline: {
-    backgroundColor: "var(--background)",
-    color: "var(--foreground)",
-    border: "1px solid var(--border)"
+    backgroundColor: "hsl(var(--background))",
+    color: "hsl(var(--foreground))",
+    border: "1px solid hsl(var(--border))"
   },
   secondary: {
-    backgroundColor: "var(--secondary)",
-    color: "var(--secondary-foreground)"
+    backgroundColor: "hsl(var(--secondary))",
+    color: "hsl(var(--secondary-foreground))"
   }
 };
 var Button = React27.forwardRef(
@@ -7240,7 +7242,355 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
+var SkeletonBase = React27.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-hazo-skeleton": "",
+      "aria-hidden": "true",
+      className: cn("hazo-shimmer rounded-md", className),
+      ...rest
+    }
+  )
+);
+SkeletonBase.displayName = "Skeleton";
+var Skeleton = SkeletonBase;
+function SkeletonCircle({ size = 40, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      className: cn("rounded-full", className),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonBar({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      className,
+      style: { width, height }
+    }
+  );
+}
+function SkeletonRect({ width = "100%", height = 96, radius = 6, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      className,
+      style: { width, height, borderRadius: radius }
+    }
+  );
+}
+function SkeletonGroup({ label = "Loading content", children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className: cn("space-y-2", className),
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  size = "md",
+  className
+}) {
+  const sizing = {
+    sm: { wrap: "py-6 gap-2", icon: "w-8 h-8 mb-1", title: "text-sm font-medium", desc: "text-xs" },
+    md: { wrap: "py-10 gap-3", icon: "w-12 h-12 mb-2", title: "text-base font-semibold", desc: "text-sm" },
+    lg: { wrap: "py-16 gap-4", icon: "w-16 h-16 mb-3", title: "text-lg font-semibold", desc: "text-base" }
+  }[size];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center text-center text-muted-foreground",
+        sizing.wrap,
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground/60", sizing.icon), children: icon }) : null,
+        /* @__PURE__ */ jsx("div", { className: cn("text-foreground", sizing.title), children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: cn("max-w-md text-muted-foreground", sizing.desc), children: description }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
+      ]
+    }
+  );
+}
+function ErrorBanner({
+  severity = "error",
+  title,
+  message,
+  icon,
+  action,
+  onDismiss,
+  className
+}) {
+  const palette = severity === "warning" ? "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100" : "border-destructive/40 bg-destructive/10 text-destructive-foreground";
+  const iconColor = severity === "warning" ? "text-amber-600" : "text-destructive";
+  const resolvedIcon = icon ?? (severity === "warning" ? /* @__PURE__ */ jsx(AlertTriangle, { className: cn("h-5 w-5", iconColor), "aria-hidden": "true" }) : /* @__PURE__ */ jsx(OctagonAlert, { className: cn("h-5 w-5", iconColor), "aria-hidden": "true" }));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": severity === "error" ? "assertive" : "polite",
+      className: cn(
+        "flex items-start gap-3 rounded-md border px-4 py-3 text-sm",
+        palette,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: resolvedIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "font-semibold leading-tight", children: title }) : null,
+          /* @__PURE__ */ jsx("div", { className: cn("leading-snug", title ? "mt-1" : ""), children: message }),
+          action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss",
+            className: "flex-shrink-0 rounded p-1 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:hover:bg-white/5",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ErrorPage({
+  title = "Something went wrong",
+  description,
+  errorCode,
+  correlationId,
+  actions,
+  illustration,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      className: cn(
+        "mx-auto flex max-w-md flex-col items-center justify-center gap-4 px-6 py-16 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-destructive", children: illustration ?? /* @__PURE__ */ jsx(OctagonAlert, { className: "h-16 w-16", "aria-hidden": "true" }) }),
+        errorCode ? /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted px-3 py-1 text-xs font-mono uppercase tracking-wider text-muted-foreground", children: errorCode }) : null,
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null,
+        correlationId ? /* @__PURE__ */ jsxs("div", { className: "w-full rounded-md border bg-muted/40 px-3 py-2 text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Correlation ID" }),
+          /* @__PURE__ */ jsx("code", { className: "break-all text-xs", children: correlationId })
+        ] }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+function LoadingTimeout({
+  active,
+  children,
+  skeleton,
+  onRetry,
+  thresholds,
+  label = "content",
+  className
+}) {
+  const t = {
+    gentle: thresholds?.gentle ?? 5e3,
+    firm: thresholds?.firm ?? 15e3,
+    expired: thresholds?.expired ?? 3e4
+  };
+  const [phase, setPhase] = React27.useState(active ? "silent" : "idle");
+  React27.useEffect(() => {
+    if (!active) {
+      setPhase("idle");
+      return;
+    }
+    setPhase("silent");
+    const gentleTimer = window.setTimeout(() => setPhase("gentle"), t.gentle);
+    const firmTimer = window.setTimeout(() => setPhase("firm"), t.firm);
+    const expiredTimer = window.setTimeout(() => setPhase("expired"), t.expired);
+    return () => {
+      window.clearTimeout(gentleTimer);
+      window.clearTimeout(firmTimer);
+      window.clearTimeout(expiredTimer);
+    };
+  }, [active, t.gentle, t.firm, t.expired]);
+  if (!active) {
+    return /* @__PURE__ */ jsx(Fragment$1, { children });
+  }
+  if (phase === "expired") {
+    return /* @__PURE__ */ jsx("div", { className, role: "alert", "aria-busy": "false", children: /* @__PURE__ */ jsx(
+      ErrorBanner,
+      {
+        severity: "error",
+        title: "This is taking longer than expected",
+        message: `We're still trying to load the ${label}. The connection may be slow.`,
+        action: onRetry ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            className: "rounded bg-foreground/10 px-3 py-1.5 text-sm font-medium hover:bg-foreground/15",
+            children: "Try again"
+          }
+        ) : null
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, role: "status", "aria-busy": "true", "aria-live": "polite", children: [
+    skeleton,
+    phase === "gentle" ? /* @__PURE__ */ jsxs("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: [
+      "Loading ",
+      label,
+      "\u2026"
+    ] }) : null,
+    phase === "firm" ? /* @__PURE__ */ jsx("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: "Still working on it \u2014 almost there." }) : null
+  ] });
+}
+function ProgressiveImage({
+  src,
+  alt,
+  lqip,
+  width,
+  height,
+  loading = "lazy",
+  fit = "cover",
+  className,
+  onLoad,
+  onError
+}) {
+  const [loaded, setLoaded] = React27.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative overflow-hidden bg-muted", className),
+      style: { width, height },
+      children: [
+        lqip ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: lqip,
+            alt: "",
+            "aria-hidden": "true",
+            className: cn(
+              "absolute inset-0 h-full w-full object-cover blur-md scale-110 transition-opacity duration-300",
+              loaded ? "opacity-0" : "opacity-100"
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            loading,
+            onLoad: () => {
+              setLoaded(true);
+              onLoad?.();
+            },
+            onError,
+            className: cn(
+              "absolute inset-0 h-full w-full transition-opacity duration-300",
+              `object-${fit}`,
+              loaded ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function HazoUiToaster({
+  position = "bottom-right",
+  closeButton = true,
+  visibleToasts = 5
+} = {}) {
+  return /* @__PURE__ */ jsx(
+    Toaster,
+    {
+      position,
+      closeButton,
+      visibleToasts,
+      theme: "system",
+      richColors: true,
+      toastOptions: {
+        classNames: {
+          toast: "group rounded-md border bg-background text-foreground shadow-lg",
+          title: "font-medium",
+          description: "text-muted-foreground text-sm"
+        }
+      }
+    }
+  );
+}
+function successToast({ title, description, duration = 3e3, action }) {
+  return toast.success(title, {
+    description,
+    duration,
+    icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }),
+    action: action ? { label: action.label, onClick: action.onClick } : void 0
+  });
+}
+function errorToast({ title, description, duration = 5e3, action }) {
+  return toast.error(title, {
+    description,
+    duration,
+    icon: /* @__PURE__ */ jsx(OctagonAlert, { className: "h-4 w-4 text-destructive" }),
+    action: action ? { label: action.label, onClick: action.onClick } : void 0
+  });
+}
+function useLoadingState(initial = false) {
+  const [isLoading, setLoading] = useState(initial);
+  const withLoading = useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { isLoading, setLoading, withLoading };
+}
+function useErrorDisplay() {
+  const [error, setRaw] = useState(null);
+  const setError = useCallback((value) => {
+    if (value == null) {
+      setRaw(null);
+      return;
+    }
+    if (typeof value === "string") {
+      setRaw(value);
+      return;
+    }
+    if (value instanceof Error) {
+      setRaw(value.message);
+      return;
+    }
+    setRaw(String(value));
+  }, []);
+  const clearError = useCallback(() => setRaw(null), []);
+  return { error, setError, clearError };
+}
 
-export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, 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, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiRte, HazoUiTextarea, HazoUiTextbox, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label2 as Label, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonGroupVariants, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, text_to_tiptap_content, toggleVariants, useMediaQuery };
+export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, 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, EmptyState, ErrorBanner, ErrorPage, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiRte, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label2 as Label, LoadingTimeout, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonGroupVariants, create_command_suggestion_extension, errorToast, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, successToast, text_to_tiptap_content, toggleVariants, useErrorDisplay, useLoadingState, useMediaQuery };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map