hazo_ui 2.9.0 → 2.11.0

package/dist/index.cjs

@@ -68,6 +68,7 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var sonner = require('sonner');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -255,23 +256,23 @@ var buttonVariants = classVarianceAuthority.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__namespace.forwardRef(
@@ -7309,7 +7310,359 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
+var SkeletonBase = React27__namespace.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    SkeletonBase,
+    {
+      className: cn("rounded-full", className),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonBar({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonBase,
+    {
+      className,
+      style: { width, height }
+    }
+  );
+}
+function SkeletonRect({ width = "100%", height = 96, radius = 6, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonBase,
+    {
+      className,
+      style: { width, height, borderRadius: radius }
+    }
+  );
+}
+function SkeletonGroup({ label = "Loading content", children, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className: cn("space-y-2", className),
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center text-center text-muted-foreground",
+        sizing.wrap,
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground/60", sizing.icon), children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-foreground", sizing.title), children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-md text-muted-foreground", sizing.desc), children: description }) : null,
+        action ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: cn("h-5 w-5", iconColor), "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonAlert, { className: cn("h-5 w-5", iconColor), "aria-hidden": "true" }));
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5", children: resolvedIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold leading-tight", children: title }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-snug", title ? "mt-1" : ""), children: message }),
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ErrorPage({
+  title = "Something went wrong",
+  description,
+  errorCode,
+  correlationId,
+  actions,
+  illustration,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-destructive", children: illustration ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonAlert, { className: "h-16 w-16", "aria-hidden": "true" }) }),
+        errorCode ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null,
+        correlationId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full rounded-md border bg-muted/40 px-3 py-2 text-left", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Correlation ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "break-all text-xs", children: correlationId })
+        ] }) : null,
+        actions ? /* @__PURE__ */ jsxRuntime.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__namespace.useState(active ? "silent" : "idle");
+  React27__namespace.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  if (phase === "expired") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, role: "alert", "aria-busy": "false", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className, role: "status", "aria-busy": "true", "aria-live": "polite", children: [
+    skeleton,
+    phase === "gentle" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: [
+      "Loading ",
+      label,
+      "\u2026"
+    ] }) : null,
+    phase === "firm" ? /* @__PURE__ */ jsxRuntime.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__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("relative overflow-hidden bg-muted", className),
+      style: { width, height },
+      children: [
+        lqip ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    sonner.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 sonner.toast.success(title, {
+    description,
+    duration,
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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 sonner.toast.error(title, {
+    description,
+    duration,
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = React27.useState(initial);
+  const withLoading = React27.useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { isLoading, setLoading, withLoading };
+}
+function useErrorDisplay() {
+  const [error, setRaw] = React27.useState(null);
+  const setError = React27.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 = React27.useCallback(() => setRaw(null), []);
+  return { error, setError, clearError };
+}
 
+Object.defineProperty(exports, "rawToast", {
+  enumerable: true,
+  get: function () { return sonner.toast; }
+});
 exports.ANIMATION_PRESETS = ANIMATION_PRESETS;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -7369,6 +7722,9 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EmptyState = EmptyState;
+exports.ErrorBanner = ErrorBanner;
+exports.ErrorPage = ErrorPage;
 exports.HazoUiConfirmDialog = HazoUiConfirmDialog;
 exports.HazoUiDialog = HazoUiDialog;
 exports.HazoUiDialogClose = DialogClose;
@@ -7389,14 +7745,17 @@ exports.HazoUiPillRadio = HazoUiPillRadio;
 exports.HazoUiRte = HazoUiRte;
 exports.HazoUiTextarea = HazoUiTextarea;
 exports.HazoUiTextbox = HazoUiTextbox;
+exports.HazoUiToaster = HazoUiToaster;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Input = Input;
 exports.Label = Label2;
+exports.LoadingTimeout = LoadingTimeout;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.ProgressiveImage = ProgressiveImage;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.ScrollArea = ScrollArea;
@@ -7418,6 +7777,11 @@ exports.ShadcnCommandGroup = CommandGroup;
 exports.ShadcnCommandInput = CommandInput;
 exports.ShadcnCommandItem = CommandItem;
 exports.ShadcnCommandList = CommandList;
+exports.Skeleton = Skeleton;
+exports.SkeletonBar = SkeletonBar;
+exports.SkeletonCircle = SkeletonCircle;
+exports.SkeletonGroup = SkeletonGroup;
+exports.SkeletonRect = SkeletonRect;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
@@ -7434,13 +7798,17 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
+exports.errorToast = errorToast;
 exports.get_hazo_ui_config = get_hazo_ui_config;
 exports.parse_commands_from_text = parse_commands_from_text;
 exports.reset_hazo_ui_config = reset_hazo_ui_config;
 exports.resolve_animation_classes = resolve_animation_classes;
 exports.set_hazo_ui_config = set_hazo_ui_config;
+exports.successToast = successToast;
 exports.text_to_tiptap_content = text_to_tiptap_content;
 exports.toggleVariants = toggleVariants;
+exports.useErrorDisplay = useErrorDisplay;
+exports.useLoadingState = useLoadingState;
 exports.useMediaQuery = useMediaQuery;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map