hazo_ui 2.8.1 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGE_LOG.md +319 -0
- package/README.md +350 -0
- package/SETUP_CHECKLIST.md +418 -0
- package/dist/index.cjs +497 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +212 -1
- package/dist/index.d.ts +212 -1
- package/dist/index.js +470 -13
- package/dist/index.js.map +1 -1
- package/dist/styles.css +32 -0
- package/package.json +7 -3
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { clsx } from 'clsx';
|
|
|
7
7
|
import { twMerge } from 'tailwind-merge';
|
|
8
8
|
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
9
9
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
10
|
-
import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, Loader2, GripVertical, Calendar as Calendar$1 } from 'lucide-react';
|
|
10
|
+
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';
|
|
11
11
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
12
12
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
13
13
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
@@ -56,6 +56,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
|
56
56
|
import Suggestion from '@tiptap/suggestion';
|
|
57
57
|
import { PluginKey } from '@tiptap/pm/state';
|
|
58
58
|
import { createPortal } from 'react-dom';
|
|
59
|
+
import { Drawer as Drawer$1 } from 'vaul';
|
|
59
60
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
60
61
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
61
62
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
@@ -66,6 +67,8 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
|
66
67
|
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
67
68
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
68
69
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
70
|
+
import { Toaster, toast } from 'sonner';
|
|
71
|
+
export { toast as rawToast } from 'sonner';
|
|
69
72
|
|
|
70
73
|
var __create = Object.create;
|
|
71
74
|
var __defProp = Object.defineProperty;
|
|
@@ -185,23 +188,23 @@ var buttonVariants = cva(
|
|
|
185
188
|
);
|
|
186
189
|
var variant_styles = {
|
|
187
190
|
default: {
|
|
188
|
-
backgroundColor: "var(--primary)",
|
|
189
|
-
color: "var(--primary-foreground)",
|
|
190
|
-
border: "1px solid var(--primary)"
|
|
191
|
+
backgroundColor: "hsl(var(--primary))",
|
|
192
|
+
color: "hsl(var(--primary-foreground))",
|
|
193
|
+
border: "1px solid hsl(var(--primary))"
|
|
191
194
|
},
|
|
192
195
|
destructive: {
|
|
193
|
-
backgroundColor: "var(--destructive)",
|
|
194
|
-
color: "
|
|
195
|
-
border: "1px solid var(--destructive)"
|
|
196
|
+
backgroundColor: "hsl(var(--destructive))",
|
|
197
|
+
color: "hsl(var(--destructive-foreground))",
|
|
198
|
+
border: "1px solid hsl(var(--destructive))"
|
|
196
199
|
},
|
|
197
200
|
outline: {
|
|
198
|
-
backgroundColor: "var(--background)",
|
|
199
|
-
color: "var(--foreground)",
|
|
200
|
-
border: "1px solid var(--border)"
|
|
201
|
+
backgroundColor: "hsl(var(--background))",
|
|
202
|
+
color: "hsl(var(--foreground))",
|
|
203
|
+
border: "1px solid hsl(var(--border))"
|
|
201
204
|
},
|
|
202
205
|
secondary: {
|
|
203
|
-
backgroundColor: "var(--secondary)",
|
|
204
|
-
color: "var(--secondary-foreground)"
|
|
206
|
+
backgroundColor: "hsl(var(--secondary))",
|
|
207
|
+
color: "hsl(var(--secondary-foreground))"
|
|
205
208
|
}
|
|
206
209
|
};
|
|
207
210
|
var Button = React27.forwardRef(
|
|
@@ -6729,6 +6732,112 @@ function HazoUiConfirmDialog({
|
|
|
6729
6732
|
)
|
|
6730
6733
|
] }) });
|
|
6731
6734
|
}
|
|
6735
|
+
var Drawer = ({
|
|
6736
|
+
shouldScaleBackground = true,
|
|
6737
|
+
...props
|
|
6738
|
+
}) => /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground, ...props });
|
|
6739
|
+
Drawer.displayName = "Drawer";
|
|
6740
|
+
var DrawerTrigger = Drawer$1.Trigger;
|
|
6741
|
+
var DrawerPortal = Drawer$1.Portal;
|
|
6742
|
+
var DrawerClose = Drawer$1.Close;
|
|
6743
|
+
var DrawerOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
6744
|
+
Drawer$1.Overlay,
|
|
6745
|
+
{
|
|
6746
|
+
ref,
|
|
6747
|
+
className: cn(
|
|
6748
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
6749
|
+
className
|
|
6750
|
+
),
|
|
6751
|
+
...props
|
|
6752
|
+
}
|
|
6753
|
+
));
|
|
6754
|
+
DrawerOverlay.displayName = "DrawerOverlay";
|
|
6755
|
+
var DrawerContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
|
|
6756
|
+
/* @__PURE__ */ jsx(DrawerOverlay, {}),
|
|
6757
|
+
/* @__PURE__ */ jsxs(
|
|
6758
|
+
Drawer$1.Content,
|
|
6759
|
+
{
|
|
6760
|
+
ref,
|
|
6761
|
+
className: cn(
|
|
6762
|
+
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto max-h-[96dvh] flex-col rounded-t-[10px] border bg-background",
|
|
6763
|
+
className
|
|
6764
|
+
),
|
|
6765
|
+
...props,
|
|
6766
|
+
children: [
|
|
6767
|
+
/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
|
|
6768
|
+
children
|
|
6769
|
+
]
|
|
6770
|
+
}
|
|
6771
|
+
)
|
|
6772
|
+
] }));
|
|
6773
|
+
DrawerContent.displayName = "DrawerContent";
|
|
6774
|
+
var DrawerHeader = ({
|
|
6775
|
+
className,
|
|
6776
|
+
...props
|
|
6777
|
+
}) => /* @__PURE__ */ jsx(
|
|
6778
|
+
"div",
|
|
6779
|
+
{
|
|
6780
|
+
className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
|
|
6781
|
+
...props
|
|
6782
|
+
}
|
|
6783
|
+
);
|
|
6784
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
6785
|
+
var DrawerFooter = ({
|
|
6786
|
+
className,
|
|
6787
|
+
...props
|
|
6788
|
+
}) => /* @__PURE__ */ jsx(
|
|
6789
|
+
"div",
|
|
6790
|
+
{
|
|
6791
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
6792
|
+
...props
|
|
6793
|
+
}
|
|
6794
|
+
);
|
|
6795
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
6796
|
+
var DrawerTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
6797
|
+
Drawer$1.Title,
|
|
6798
|
+
{
|
|
6799
|
+
ref,
|
|
6800
|
+
className: cn(
|
|
6801
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
6802
|
+
className
|
|
6803
|
+
),
|
|
6804
|
+
...props
|
|
6805
|
+
}
|
|
6806
|
+
));
|
|
6807
|
+
DrawerTitle.displayName = "DrawerTitle";
|
|
6808
|
+
var DrawerDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
6809
|
+
Drawer$1.Description,
|
|
6810
|
+
{
|
|
6811
|
+
ref,
|
|
6812
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
6813
|
+
...props
|
|
6814
|
+
}
|
|
6815
|
+
));
|
|
6816
|
+
DrawerDescription.displayName = "DrawerDescription";
|
|
6817
|
+
function useMediaQuery(query) {
|
|
6818
|
+
const get_match = React27.useCallback(() => {
|
|
6819
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
6820
|
+
return false;
|
|
6821
|
+
}
|
|
6822
|
+
return window.matchMedia(query).matches;
|
|
6823
|
+
}, [query]);
|
|
6824
|
+
const [matches, set_matches] = React27.useState(false);
|
|
6825
|
+
React27.useEffect(() => {
|
|
6826
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
6827
|
+
return;
|
|
6828
|
+
}
|
|
6829
|
+
const media_query_list = window.matchMedia(query);
|
|
6830
|
+
set_matches(media_query_list.matches);
|
|
6831
|
+
const handle_change = (event) => set_matches(event.matches);
|
|
6832
|
+
if (typeof media_query_list.addEventListener === "function") {
|
|
6833
|
+
media_query_list.addEventListener("change", handle_change);
|
|
6834
|
+
return () => media_query_list.removeEventListener("change", handle_change);
|
|
6835
|
+
}
|
|
6836
|
+
media_query_list.addListener(handle_change);
|
|
6837
|
+
return () => media_query_list.removeListener(handle_change);
|
|
6838
|
+
}, [query, get_match]);
|
|
6839
|
+
return matches;
|
|
6840
|
+
}
|
|
6732
6841
|
var Accordion = AccordionPrimitive.Root;
|
|
6733
6842
|
var AccordionItem = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
6734
6843
|
AccordionPrimitive.Item,
|
|
@@ -7133,7 +7242,355 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
|
7133
7242
|
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
7134
7243
|
return /* @__PURE__ */ jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
|
|
7135
7244
|
}
|
|
7245
|
+
var SkeletonBase = React27.forwardRef(
|
|
7246
|
+
({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
|
|
7247
|
+
"div",
|
|
7248
|
+
{
|
|
7249
|
+
ref,
|
|
7250
|
+
"data-hazo-skeleton": "",
|
|
7251
|
+
"aria-hidden": "true",
|
|
7252
|
+
className: cn("hazo-shimmer rounded-md", className),
|
|
7253
|
+
...rest
|
|
7254
|
+
}
|
|
7255
|
+
)
|
|
7256
|
+
);
|
|
7257
|
+
SkeletonBase.displayName = "Skeleton";
|
|
7258
|
+
var Skeleton = SkeletonBase;
|
|
7259
|
+
function SkeletonCircle({ size = 40, className }) {
|
|
7260
|
+
return /* @__PURE__ */ jsx(
|
|
7261
|
+
SkeletonBase,
|
|
7262
|
+
{
|
|
7263
|
+
className: cn("rounded-full", className),
|
|
7264
|
+
style: { width: size, height: size }
|
|
7265
|
+
}
|
|
7266
|
+
);
|
|
7267
|
+
}
|
|
7268
|
+
function SkeletonBar({ width = "100%", height = 12, className }) {
|
|
7269
|
+
return /* @__PURE__ */ jsx(
|
|
7270
|
+
SkeletonBase,
|
|
7271
|
+
{
|
|
7272
|
+
className,
|
|
7273
|
+
style: { width, height }
|
|
7274
|
+
}
|
|
7275
|
+
);
|
|
7276
|
+
}
|
|
7277
|
+
function SkeletonRect({ width = "100%", height = 96, radius = 6, className }) {
|
|
7278
|
+
return /* @__PURE__ */ jsx(
|
|
7279
|
+
SkeletonBase,
|
|
7280
|
+
{
|
|
7281
|
+
className,
|
|
7282
|
+
style: { width, height, borderRadius: radius }
|
|
7283
|
+
}
|
|
7284
|
+
);
|
|
7285
|
+
}
|
|
7286
|
+
function SkeletonGroup({ label = "Loading content", children, className, ...rest }) {
|
|
7287
|
+
return /* @__PURE__ */ jsxs(
|
|
7288
|
+
"div",
|
|
7289
|
+
{
|
|
7290
|
+
role: "status",
|
|
7291
|
+
"aria-busy": "true",
|
|
7292
|
+
"aria-label": label,
|
|
7293
|
+
className: cn("space-y-2", className),
|
|
7294
|
+
...rest,
|
|
7295
|
+
children: [
|
|
7296
|
+
children,
|
|
7297
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
|
|
7298
|
+
]
|
|
7299
|
+
}
|
|
7300
|
+
);
|
|
7301
|
+
}
|
|
7302
|
+
function EmptyState({
|
|
7303
|
+
icon,
|
|
7304
|
+
title,
|
|
7305
|
+
description,
|
|
7306
|
+
action,
|
|
7307
|
+
size = "md",
|
|
7308
|
+
className
|
|
7309
|
+
}) {
|
|
7310
|
+
const sizing = {
|
|
7311
|
+
sm: { wrap: "py-6 gap-2", icon: "w-8 h-8 mb-1", title: "text-sm font-medium", desc: "text-xs" },
|
|
7312
|
+
md: { wrap: "py-10 gap-3", icon: "w-12 h-12 mb-2", title: "text-base font-semibold", desc: "text-sm" },
|
|
7313
|
+
lg: { wrap: "py-16 gap-4", icon: "w-16 h-16 mb-3", title: "text-lg font-semibold", desc: "text-base" }
|
|
7314
|
+
}[size];
|
|
7315
|
+
return /* @__PURE__ */ jsxs(
|
|
7316
|
+
"div",
|
|
7317
|
+
{
|
|
7318
|
+
className: cn(
|
|
7319
|
+
"flex flex-col items-center justify-center text-center text-muted-foreground",
|
|
7320
|
+
sizing.wrap,
|
|
7321
|
+
className
|
|
7322
|
+
),
|
|
7323
|
+
children: [
|
|
7324
|
+
icon ? /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground/60", sizing.icon), children: icon }) : null,
|
|
7325
|
+
/* @__PURE__ */ jsx("div", { className: cn("text-foreground", sizing.title), children: title }),
|
|
7326
|
+
description ? /* @__PURE__ */ jsx("div", { className: cn("max-w-md text-muted-foreground", sizing.desc), children: description }) : null,
|
|
7327
|
+
action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
|
|
7328
|
+
]
|
|
7329
|
+
}
|
|
7330
|
+
);
|
|
7331
|
+
}
|
|
7332
|
+
function ErrorBanner({
|
|
7333
|
+
severity = "error",
|
|
7334
|
+
title,
|
|
7335
|
+
message,
|
|
7336
|
+
icon,
|
|
7337
|
+
action,
|
|
7338
|
+
onDismiss,
|
|
7339
|
+
className
|
|
7340
|
+
}) {
|
|
7341
|
+
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";
|
|
7342
|
+
const iconColor = severity === "warning" ? "text-amber-600" : "text-destructive";
|
|
7343
|
+
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" }));
|
|
7344
|
+
return /* @__PURE__ */ jsxs(
|
|
7345
|
+
"div",
|
|
7346
|
+
{
|
|
7347
|
+
role: "alert",
|
|
7348
|
+
"aria-live": severity === "error" ? "assertive" : "polite",
|
|
7349
|
+
className: cn(
|
|
7350
|
+
"flex items-start gap-3 rounded-md border px-4 py-3 text-sm",
|
|
7351
|
+
palette,
|
|
7352
|
+
className
|
|
7353
|
+
),
|
|
7354
|
+
children: [
|
|
7355
|
+
/* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: resolvedIcon }),
|
|
7356
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
7357
|
+
title ? /* @__PURE__ */ jsx("div", { className: "font-semibold leading-tight", children: title }) : null,
|
|
7358
|
+
/* @__PURE__ */ jsx("div", { className: cn("leading-snug", title ? "mt-1" : ""), children: message }),
|
|
7359
|
+
action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
|
|
7360
|
+
] }),
|
|
7361
|
+
onDismiss ? /* @__PURE__ */ jsx(
|
|
7362
|
+
"button",
|
|
7363
|
+
{
|
|
7364
|
+
type: "button",
|
|
7365
|
+
onClick: onDismiss,
|
|
7366
|
+
"aria-label": "Dismiss",
|
|
7367
|
+
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",
|
|
7368
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
|
|
7369
|
+
}
|
|
7370
|
+
) : null
|
|
7371
|
+
]
|
|
7372
|
+
}
|
|
7373
|
+
);
|
|
7374
|
+
}
|
|
7375
|
+
function ErrorPage({
|
|
7376
|
+
title = "Something went wrong",
|
|
7377
|
+
description,
|
|
7378
|
+
errorCode,
|
|
7379
|
+
correlationId,
|
|
7380
|
+
actions,
|
|
7381
|
+
illustration,
|
|
7382
|
+
className
|
|
7383
|
+
}) {
|
|
7384
|
+
return /* @__PURE__ */ jsxs(
|
|
7385
|
+
"div",
|
|
7386
|
+
{
|
|
7387
|
+
role: "alert",
|
|
7388
|
+
"aria-live": "assertive",
|
|
7389
|
+
className: cn(
|
|
7390
|
+
"mx-auto flex max-w-md flex-col items-center justify-center gap-4 px-6 py-16 text-center",
|
|
7391
|
+
className
|
|
7392
|
+
),
|
|
7393
|
+
children: [
|
|
7394
|
+
/* @__PURE__ */ jsx("div", { className: "text-destructive", children: illustration ?? /* @__PURE__ */ jsx(OctagonAlert, { className: "h-16 w-16", "aria-hidden": "true" }) }),
|
|
7395
|
+
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,
|
|
7396
|
+
/* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground", children: title }),
|
|
7397
|
+
description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null,
|
|
7398
|
+
correlationId ? /* @__PURE__ */ jsxs("div", { className: "w-full rounded-md border bg-muted/40 px-3 py-2 text-left", children: [
|
|
7399
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Correlation ID" }),
|
|
7400
|
+
/* @__PURE__ */ jsx("code", { className: "break-all text-xs", children: correlationId })
|
|
7401
|
+
] }) : null,
|
|
7402
|
+
actions ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: actions }) : null
|
|
7403
|
+
]
|
|
7404
|
+
}
|
|
7405
|
+
);
|
|
7406
|
+
}
|
|
7407
|
+
function LoadingTimeout({
|
|
7408
|
+
active,
|
|
7409
|
+
children,
|
|
7410
|
+
skeleton,
|
|
7411
|
+
onRetry,
|
|
7412
|
+
thresholds,
|
|
7413
|
+
label = "content",
|
|
7414
|
+
className
|
|
7415
|
+
}) {
|
|
7416
|
+
const t = {
|
|
7417
|
+
gentle: thresholds?.gentle ?? 5e3,
|
|
7418
|
+
firm: thresholds?.firm ?? 15e3,
|
|
7419
|
+
expired: thresholds?.expired ?? 3e4
|
|
7420
|
+
};
|
|
7421
|
+
const [phase, setPhase] = React27.useState(active ? "silent" : "idle");
|
|
7422
|
+
React27.useEffect(() => {
|
|
7423
|
+
if (!active) {
|
|
7424
|
+
setPhase("idle");
|
|
7425
|
+
return;
|
|
7426
|
+
}
|
|
7427
|
+
setPhase("silent");
|
|
7428
|
+
const gentleTimer = window.setTimeout(() => setPhase("gentle"), t.gentle);
|
|
7429
|
+
const firmTimer = window.setTimeout(() => setPhase("firm"), t.firm);
|
|
7430
|
+
const expiredTimer = window.setTimeout(() => setPhase("expired"), t.expired);
|
|
7431
|
+
return () => {
|
|
7432
|
+
window.clearTimeout(gentleTimer);
|
|
7433
|
+
window.clearTimeout(firmTimer);
|
|
7434
|
+
window.clearTimeout(expiredTimer);
|
|
7435
|
+
};
|
|
7436
|
+
}, [active, t.gentle, t.firm, t.expired]);
|
|
7437
|
+
if (!active) {
|
|
7438
|
+
return /* @__PURE__ */ jsx(Fragment$1, { children });
|
|
7439
|
+
}
|
|
7440
|
+
if (phase === "expired") {
|
|
7441
|
+
return /* @__PURE__ */ jsx("div", { className, role: "alert", "aria-busy": "false", children: /* @__PURE__ */ jsx(
|
|
7442
|
+
ErrorBanner,
|
|
7443
|
+
{
|
|
7444
|
+
severity: "error",
|
|
7445
|
+
title: "This is taking longer than expected",
|
|
7446
|
+
message: `We're still trying to load the ${label}. The connection may be slow.`,
|
|
7447
|
+
action: onRetry ? /* @__PURE__ */ jsx(
|
|
7448
|
+
"button",
|
|
7449
|
+
{
|
|
7450
|
+
type: "button",
|
|
7451
|
+
onClick: onRetry,
|
|
7452
|
+
className: "rounded bg-foreground/10 px-3 py-1.5 text-sm font-medium hover:bg-foreground/15",
|
|
7453
|
+
children: "Try again"
|
|
7454
|
+
}
|
|
7455
|
+
) : null
|
|
7456
|
+
}
|
|
7457
|
+
) });
|
|
7458
|
+
}
|
|
7459
|
+
return /* @__PURE__ */ jsxs("div", { className, role: "status", "aria-busy": "true", "aria-live": "polite", children: [
|
|
7460
|
+
skeleton,
|
|
7461
|
+
phase === "gentle" ? /* @__PURE__ */ jsxs("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: [
|
|
7462
|
+
"Loading ",
|
|
7463
|
+
label,
|
|
7464
|
+
"\u2026"
|
|
7465
|
+
] }) : null,
|
|
7466
|
+
phase === "firm" ? /* @__PURE__ */ jsx("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: "Still working on it \u2014 almost there." }) : null
|
|
7467
|
+
] });
|
|
7468
|
+
}
|
|
7469
|
+
function ProgressiveImage({
|
|
7470
|
+
src,
|
|
7471
|
+
alt,
|
|
7472
|
+
lqip,
|
|
7473
|
+
width,
|
|
7474
|
+
height,
|
|
7475
|
+
loading = "lazy",
|
|
7476
|
+
fit = "cover",
|
|
7477
|
+
className,
|
|
7478
|
+
onLoad,
|
|
7479
|
+
onError
|
|
7480
|
+
}) {
|
|
7481
|
+
const [loaded, setLoaded] = React27.useState(false);
|
|
7482
|
+
return /* @__PURE__ */ jsxs(
|
|
7483
|
+
"div",
|
|
7484
|
+
{
|
|
7485
|
+
className: cn("relative overflow-hidden bg-muted", className),
|
|
7486
|
+
style: { width, height },
|
|
7487
|
+
children: [
|
|
7488
|
+
lqip ? /* @__PURE__ */ jsx(
|
|
7489
|
+
"img",
|
|
7490
|
+
{
|
|
7491
|
+
src: lqip,
|
|
7492
|
+
alt: "",
|
|
7493
|
+
"aria-hidden": "true",
|
|
7494
|
+
className: cn(
|
|
7495
|
+
"absolute inset-0 h-full w-full object-cover blur-md scale-110 transition-opacity duration-300",
|
|
7496
|
+
loaded ? "opacity-0" : "opacity-100"
|
|
7497
|
+
)
|
|
7498
|
+
}
|
|
7499
|
+
) : null,
|
|
7500
|
+
/* @__PURE__ */ jsx(
|
|
7501
|
+
"img",
|
|
7502
|
+
{
|
|
7503
|
+
src,
|
|
7504
|
+
alt,
|
|
7505
|
+
loading,
|
|
7506
|
+
onLoad: () => {
|
|
7507
|
+
setLoaded(true);
|
|
7508
|
+
onLoad?.();
|
|
7509
|
+
},
|
|
7510
|
+
onError,
|
|
7511
|
+
className: cn(
|
|
7512
|
+
"absolute inset-0 h-full w-full transition-opacity duration-300",
|
|
7513
|
+
`object-${fit}`,
|
|
7514
|
+
loaded ? "opacity-100" : "opacity-0"
|
|
7515
|
+
)
|
|
7516
|
+
}
|
|
7517
|
+
)
|
|
7518
|
+
]
|
|
7519
|
+
}
|
|
7520
|
+
);
|
|
7521
|
+
}
|
|
7522
|
+
function HazoUiToaster({
|
|
7523
|
+
position = "bottom-right",
|
|
7524
|
+
closeButton = true,
|
|
7525
|
+
visibleToasts = 5
|
|
7526
|
+
} = {}) {
|
|
7527
|
+
return /* @__PURE__ */ jsx(
|
|
7528
|
+
Toaster,
|
|
7529
|
+
{
|
|
7530
|
+
position,
|
|
7531
|
+
closeButton,
|
|
7532
|
+
visibleToasts,
|
|
7533
|
+
theme: "system",
|
|
7534
|
+
richColors: true,
|
|
7535
|
+
toastOptions: {
|
|
7536
|
+
classNames: {
|
|
7537
|
+
toast: "group rounded-md border bg-background text-foreground shadow-lg",
|
|
7538
|
+
title: "font-medium",
|
|
7539
|
+
description: "text-muted-foreground text-sm"
|
|
7540
|
+
}
|
|
7541
|
+
}
|
|
7542
|
+
}
|
|
7543
|
+
);
|
|
7544
|
+
}
|
|
7545
|
+
function successToast({ title, description, duration = 3e3, action }) {
|
|
7546
|
+
return toast.success(title, {
|
|
7547
|
+
description,
|
|
7548
|
+
duration,
|
|
7549
|
+
icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }),
|
|
7550
|
+
action: action ? { label: action.label, onClick: action.onClick } : void 0
|
|
7551
|
+
});
|
|
7552
|
+
}
|
|
7553
|
+
function errorToast({ title, description, duration = 5e3, action }) {
|
|
7554
|
+
return toast.error(title, {
|
|
7555
|
+
description,
|
|
7556
|
+
duration,
|
|
7557
|
+
icon: /* @__PURE__ */ jsx(OctagonAlert, { className: "h-4 w-4 text-destructive" }),
|
|
7558
|
+
action: action ? { label: action.label, onClick: action.onClick } : void 0
|
|
7559
|
+
});
|
|
7560
|
+
}
|
|
7561
|
+
function useLoadingState(initial = false) {
|
|
7562
|
+
const [isLoading, setLoading] = useState(initial);
|
|
7563
|
+
const withLoading = useCallback(async (fn) => {
|
|
7564
|
+
setLoading(true);
|
|
7565
|
+
try {
|
|
7566
|
+
return await fn();
|
|
7567
|
+
} finally {
|
|
7568
|
+
setLoading(false);
|
|
7569
|
+
}
|
|
7570
|
+
}, []);
|
|
7571
|
+
return { isLoading, setLoading, withLoading };
|
|
7572
|
+
}
|
|
7573
|
+
function useErrorDisplay() {
|
|
7574
|
+
const [error, setRaw] = useState(null);
|
|
7575
|
+
const setError = useCallback((value) => {
|
|
7576
|
+
if (value == null) {
|
|
7577
|
+
setRaw(null);
|
|
7578
|
+
return;
|
|
7579
|
+
}
|
|
7580
|
+
if (typeof value === "string") {
|
|
7581
|
+
setRaw(value);
|
|
7582
|
+
return;
|
|
7583
|
+
}
|
|
7584
|
+
if (value instanceof Error) {
|
|
7585
|
+
setRaw(value.message);
|
|
7586
|
+
return;
|
|
7587
|
+
}
|
|
7588
|
+
setRaw(String(value));
|
|
7589
|
+
}, []);
|
|
7590
|
+
const clearError = useCallback(() => setRaw(null), []);
|
|
7591
|
+
return { error, setError, clearError };
|
|
7592
|
+
}
|
|
7136
7593
|
|
|
7137
|
-
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, 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 };
|
|
7594
|
+
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 };
|
|
7138
7595
|
//# sourceMappingURL=index.js.map
|
|
7139
7596
|
//# sourceMappingURL=index.js.map
|