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.cjs
CHANGED
|
@@ -57,6 +57,7 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
|
57
57
|
var Suggestion = require('@tiptap/suggestion');
|
|
58
58
|
var state = require('@tiptap/pm/state');
|
|
59
59
|
var reactDom = require('react-dom');
|
|
60
|
+
var vaul = require('vaul');
|
|
60
61
|
var AccordionPrimitive = require('@radix-ui/react-accordion');
|
|
61
62
|
var CheckboxPrimitive = require('@radix-ui/react-checkbox');
|
|
62
63
|
var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
|
|
@@ -67,6 +68,7 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
|
|
|
67
68
|
var TogglePrimitive = require('@radix-ui/react-toggle');
|
|
68
69
|
var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
|
|
69
70
|
var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
|
|
71
|
+
var sonner = require('sonner');
|
|
70
72
|
|
|
71
73
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
72
74
|
|
|
@@ -254,23 +256,23 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
254
256
|
);
|
|
255
257
|
var variant_styles = {
|
|
256
258
|
default: {
|
|
257
|
-
backgroundColor: "var(--primary)",
|
|
258
|
-
color: "var(--primary-foreground)",
|
|
259
|
-
border: "1px solid var(--primary)"
|
|
259
|
+
backgroundColor: "hsl(var(--primary))",
|
|
260
|
+
color: "hsl(var(--primary-foreground))",
|
|
261
|
+
border: "1px solid hsl(var(--primary))"
|
|
260
262
|
},
|
|
261
263
|
destructive: {
|
|
262
|
-
backgroundColor: "var(--destructive)",
|
|
263
|
-
color: "
|
|
264
|
-
border: "1px solid var(--destructive)"
|
|
264
|
+
backgroundColor: "hsl(var(--destructive))",
|
|
265
|
+
color: "hsl(var(--destructive-foreground))",
|
|
266
|
+
border: "1px solid hsl(var(--destructive))"
|
|
265
267
|
},
|
|
266
268
|
outline: {
|
|
267
|
-
backgroundColor: "var(--background)",
|
|
268
|
-
color: "var(--foreground)",
|
|
269
|
-
border: "1px solid var(--border)"
|
|
269
|
+
backgroundColor: "hsl(var(--background))",
|
|
270
|
+
color: "hsl(var(--foreground))",
|
|
271
|
+
border: "1px solid hsl(var(--border))"
|
|
270
272
|
},
|
|
271
273
|
secondary: {
|
|
272
|
-
backgroundColor: "var(--secondary)",
|
|
273
|
-
color: "var(--secondary-foreground)"
|
|
274
|
+
backgroundColor: "hsl(var(--secondary))",
|
|
275
|
+
color: "hsl(var(--secondary-foreground))"
|
|
274
276
|
}
|
|
275
277
|
};
|
|
276
278
|
var Button = React27__namespace.forwardRef(
|
|
@@ -6798,6 +6800,112 @@ function HazoUiConfirmDialog({
|
|
|
6798
6800
|
)
|
|
6799
6801
|
] }) });
|
|
6800
6802
|
}
|
|
6803
|
+
var Drawer = ({
|
|
6804
|
+
shouldScaleBackground = true,
|
|
6805
|
+
...props
|
|
6806
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { shouldScaleBackground, ...props });
|
|
6807
|
+
Drawer.displayName = "Drawer";
|
|
6808
|
+
var DrawerTrigger = vaul.Drawer.Trigger;
|
|
6809
|
+
var DrawerPortal = vaul.Drawer.Portal;
|
|
6810
|
+
var DrawerClose = vaul.Drawer.Close;
|
|
6811
|
+
var DrawerOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6812
|
+
vaul.Drawer.Overlay,
|
|
6813
|
+
{
|
|
6814
|
+
ref,
|
|
6815
|
+
className: cn(
|
|
6816
|
+
"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",
|
|
6817
|
+
className
|
|
6818
|
+
),
|
|
6819
|
+
...props
|
|
6820
|
+
}
|
|
6821
|
+
));
|
|
6822
|
+
DrawerOverlay.displayName = "DrawerOverlay";
|
|
6823
|
+
var DrawerContent = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
|
|
6824
|
+
/* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
|
|
6825
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6826
|
+
vaul.Drawer.Content,
|
|
6827
|
+
{
|
|
6828
|
+
ref,
|
|
6829
|
+
className: cn(
|
|
6830
|
+
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto max-h-[96dvh] flex-col rounded-t-[10px] border bg-background",
|
|
6831
|
+
className
|
|
6832
|
+
),
|
|
6833
|
+
...props,
|
|
6834
|
+
children: [
|
|
6835
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
|
|
6836
|
+
children
|
|
6837
|
+
]
|
|
6838
|
+
}
|
|
6839
|
+
)
|
|
6840
|
+
] }));
|
|
6841
|
+
DrawerContent.displayName = "DrawerContent";
|
|
6842
|
+
var DrawerHeader = ({
|
|
6843
|
+
className,
|
|
6844
|
+
...props
|
|
6845
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6846
|
+
"div",
|
|
6847
|
+
{
|
|
6848
|
+
className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
|
|
6849
|
+
...props
|
|
6850
|
+
}
|
|
6851
|
+
);
|
|
6852
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
6853
|
+
var DrawerFooter = ({
|
|
6854
|
+
className,
|
|
6855
|
+
...props
|
|
6856
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6857
|
+
"div",
|
|
6858
|
+
{
|
|
6859
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
6860
|
+
...props
|
|
6861
|
+
}
|
|
6862
|
+
);
|
|
6863
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
6864
|
+
var DrawerTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6865
|
+
vaul.Drawer.Title,
|
|
6866
|
+
{
|
|
6867
|
+
ref,
|
|
6868
|
+
className: cn(
|
|
6869
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
6870
|
+
className
|
|
6871
|
+
),
|
|
6872
|
+
...props
|
|
6873
|
+
}
|
|
6874
|
+
));
|
|
6875
|
+
DrawerTitle.displayName = "DrawerTitle";
|
|
6876
|
+
var DrawerDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6877
|
+
vaul.Drawer.Description,
|
|
6878
|
+
{
|
|
6879
|
+
ref,
|
|
6880
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
6881
|
+
...props
|
|
6882
|
+
}
|
|
6883
|
+
));
|
|
6884
|
+
DrawerDescription.displayName = "DrawerDescription";
|
|
6885
|
+
function useMediaQuery(query) {
|
|
6886
|
+
const get_match = React27__namespace.useCallback(() => {
|
|
6887
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
6888
|
+
return false;
|
|
6889
|
+
}
|
|
6890
|
+
return window.matchMedia(query).matches;
|
|
6891
|
+
}, [query]);
|
|
6892
|
+
const [matches, set_matches] = React27__namespace.useState(false);
|
|
6893
|
+
React27__namespace.useEffect(() => {
|
|
6894
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
6895
|
+
return;
|
|
6896
|
+
}
|
|
6897
|
+
const media_query_list = window.matchMedia(query);
|
|
6898
|
+
set_matches(media_query_list.matches);
|
|
6899
|
+
const handle_change = (event) => set_matches(event.matches);
|
|
6900
|
+
if (typeof media_query_list.addEventListener === "function") {
|
|
6901
|
+
media_query_list.addEventListener("change", handle_change);
|
|
6902
|
+
return () => media_query_list.removeEventListener("change", handle_change);
|
|
6903
|
+
}
|
|
6904
|
+
media_query_list.addListener(handle_change);
|
|
6905
|
+
return () => media_query_list.removeListener(handle_change);
|
|
6906
|
+
}, [query, get_match]);
|
|
6907
|
+
return matches;
|
|
6908
|
+
}
|
|
6801
6909
|
var Accordion = AccordionPrimitive__namespace.Root;
|
|
6802
6910
|
var AccordionItem = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6803
6911
|
AccordionPrimitive__namespace.Item,
|
|
@@ -7202,7 +7310,359 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
|
7202
7310
|
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
7203
7311
|
return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
|
|
7204
7312
|
}
|
|
7313
|
+
var SkeletonBase = React27__namespace.forwardRef(
|
|
7314
|
+
({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
7315
|
+
"div",
|
|
7316
|
+
{
|
|
7317
|
+
ref,
|
|
7318
|
+
"data-hazo-skeleton": "",
|
|
7319
|
+
"aria-hidden": "true",
|
|
7320
|
+
className: cn("hazo-shimmer rounded-md", className),
|
|
7321
|
+
...rest
|
|
7322
|
+
}
|
|
7323
|
+
)
|
|
7324
|
+
);
|
|
7325
|
+
SkeletonBase.displayName = "Skeleton";
|
|
7326
|
+
var Skeleton = SkeletonBase;
|
|
7327
|
+
function SkeletonCircle({ size = 40, className }) {
|
|
7328
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7329
|
+
SkeletonBase,
|
|
7330
|
+
{
|
|
7331
|
+
className: cn("rounded-full", className),
|
|
7332
|
+
style: { width: size, height: size }
|
|
7333
|
+
}
|
|
7334
|
+
);
|
|
7335
|
+
}
|
|
7336
|
+
function SkeletonBar({ width = "100%", height = 12, className }) {
|
|
7337
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7338
|
+
SkeletonBase,
|
|
7339
|
+
{
|
|
7340
|
+
className,
|
|
7341
|
+
style: { width, height }
|
|
7342
|
+
}
|
|
7343
|
+
);
|
|
7344
|
+
}
|
|
7345
|
+
function SkeletonRect({ width = "100%", height = 96, radius = 6, className }) {
|
|
7346
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7347
|
+
SkeletonBase,
|
|
7348
|
+
{
|
|
7349
|
+
className,
|
|
7350
|
+
style: { width, height, borderRadius: radius }
|
|
7351
|
+
}
|
|
7352
|
+
);
|
|
7353
|
+
}
|
|
7354
|
+
function SkeletonGroup({ label = "Loading content", children, className, ...rest }) {
|
|
7355
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7356
|
+
"div",
|
|
7357
|
+
{
|
|
7358
|
+
role: "status",
|
|
7359
|
+
"aria-busy": "true",
|
|
7360
|
+
"aria-label": label,
|
|
7361
|
+
className: cn("space-y-2", className),
|
|
7362
|
+
...rest,
|
|
7363
|
+
children: [
|
|
7364
|
+
children,
|
|
7365
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
|
|
7366
|
+
]
|
|
7367
|
+
}
|
|
7368
|
+
);
|
|
7369
|
+
}
|
|
7370
|
+
function EmptyState({
|
|
7371
|
+
icon,
|
|
7372
|
+
title,
|
|
7373
|
+
description,
|
|
7374
|
+
action,
|
|
7375
|
+
size = "md",
|
|
7376
|
+
className
|
|
7377
|
+
}) {
|
|
7378
|
+
const sizing = {
|
|
7379
|
+
sm: { wrap: "py-6 gap-2", icon: "w-8 h-8 mb-1", title: "text-sm font-medium", desc: "text-xs" },
|
|
7380
|
+
md: { wrap: "py-10 gap-3", icon: "w-12 h-12 mb-2", title: "text-base font-semibold", desc: "text-sm" },
|
|
7381
|
+
lg: { wrap: "py-16 gap-4", icon: "w-16 h-16 mb-3", title: "text-lg font-semibold", desc: "text-base" }
|
|
7382
|
+
}[size];
|
|
7383
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7384
|
+
"div",
|
|
7385
|
+
{
|
|
7386
|
+
className: cn(
|
|
7387
|
+
"flex flex-col items-center justify-center text-center text-muted-foreground",
|
|
7388
|
+
sizing.wrap,
|
|
7389
|
+
className
|
|
7390
|
+
),
|
|
7391
|
+
children: [
|
|
7392
|
+
icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground/60", sizing.icon), children: icon }) : null,
|
|
7393
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-foreground", sizing.title), children: title }),
|
|
7394
|
+
description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-md text-muted-foreground", sizing.desc), children: description }) : null,
|
|
7395
|
+
action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
|
|
7396
|
+
]
|
|
7397
|
+
}
|
|
7398
|
+
);
|
|
7399
|
+
}
|
|
7400
|
+
function ErrorBanner({
|
|
7401
|
+
severity = "error",
|
|
7402
|
+
title,
|
|
7403
|
+
message,
|
|
7404
|
+
icon,
|
|
7405
|
+
action,
|
|
7406
|
+
onDismiss,
|
|
7407
|
+
className
|
|
7408
|
+
}) {
|
|
7409
|
+
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";
|
|
7410
|
+
const iconColor = severity === "warning" ? "text-amber-600" : "text-destructive";
|
|
7411
|
+
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" }));
|
|
7412
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7413
|
+
"div",
|
|
7414
|
+
{
|
|
7415
|
+
role: "alert",
|
|
7416
|
+
"aria-live": severity === "error" ? "assertive" : "polite",
|
|
7417
|
+
className: cn(
|
|
7418
|
+
"flex items-start gap-3 rounded-md border px-4 py-3 text-sm",
|
|
7419
|
+
palette,
|
|
7420
|
+
className
|
|
7421
|
+
),
|
|
7422
|
+
children: [
|
|
7423
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5", children: resolvedIcon }),
|
|
7424
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
7425
|
+
title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold leading-tight", children: title }) : null,
|
|
7426
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-snug", title ? "mt-1" : ""), children: message }),
|
|
7427
|
+
action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
|
|
7428
|
+
] }),
|
|
7429
|
+
onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
7430
|
+
"button",
|
|
7431
|
+
{
|
|
7432
|
+
type: "button",
|
|
7433
|
+
onClick: onDismiss,
|
|
7434
|
+
"aria-label": "Dismiss",
|
|
7435
|
+
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",
|
|
7436
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4", "aria-hidden": "true" })
|
|
7437
|
+
}
|
|
7438
|
+
) : null
|
|
7439
|
+
]
|
|
7440
|
+
}
|
|
7441
|
+
);
|
|
7442
|
+
}
|
|
7443
|
+
function ErrorPage({
|
|
7444
|
+
title = "Something went wrong",
|
|
7445
|
+
description,
|
|
7446
|
+
errorCode,
|
|
7447
|
+
correlationId,
|
|
7448
|
+
actions,
|
|
7449
|
+
illustration,
|
|
7450
|
+
className
|
|
7451
|
+
}) {
|
|
7452
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7453
|
+
"div",
|
|
7454
|
+
{
|
|
7455
|
+
role: "alert",
|
|
7456
|
+
"aria-live": "assertive",
|
|
7457
|
+
className: cn(
|
|
7458
|
+
"mx-auto flex max-w-md flex-col items-center justify-center gap-4 px-6 py-16 text-center",
|
|
7459
|
+
className
|
|
7460
|
+
),
|
|
7461
|
+
children: [
|
|
7462
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive", children: illustration ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonAlert, { className: "h-16 w-16", "aria-hidden": "true" }) }),
|
|
7463
|
+
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,
|
|
7464
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-foreground", children: title }),
|
|
7465
|
+
description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null,
|
|
7466
|
+
correlationId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full rounded-md border bg-muted/40 px-3 py-2 text-left", children: [
|
|
7467
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Correlation ID" }),
|
|
7468
|
+
/* @__PURE__ */ jsxRuntime.jsx("code", { className: "break-all text-xs", children: correlationId })
|
|
7469
|
+
] }) : null,
|
|
7470
|
+
actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: actions }) : null
|
|
7471
|
+
]
|
|
7472
|
+
}
|
|
7473
|
+
);
|
|
7474
|
+
}
|
|
7475
|
+
function LoadingTimeout({
|
|
7476
|
+
active,
|
|
7477
|
+
children,
|
|
7478
|
+
skeleton,
|
|
7479
|
+
onRetry,
|
|
7480
|
+
thresholds,
|
|
7481
|
+
label = "content",
|
|
7482
|
+
className
|
|
7483
|
+
}) {
|
|
7484
|
+
const t = {
|
|
7485
|
+
gentle: thresholds?.gentle ?? 5e3,
|
|
7486
|
+
firm: thresholds?.firm ?? 15e3,
|
|
7487
|
+
expired: thresholds?.expired ?? 3e4
|
|
7488
|
+
};
|
|
7489
|
+
const [phase, setPhase] = React27__namespace.useState(active ? "silent" : "idle");
|
|
7490
|
+
React27__namespace.useEffect(() => {
|
|
7491
|
+
if (!active) {
|
|
7492
|
+
setPhase("idle");
|
|
7493
|
+
return;
|
|
7494
|
+
}
|
|
7495
|
+
setPhase("silent");
|
|
7496
|
+
const gentleTimer = window.setTimeout(() => setPhase("gentle"), t.gentle);
|
|
7497
|
+
const firmTimer = window.setTimeout(() => setPhase("firm"), t.firm);
|
|
7498
|
+
const expiredTimer = window.setTimeout(() => setPhase("expired"), t.expired);
|
|
7499
|
+
return () => {
|
|
7500
|
+
window.clearTimeout(gentleTimer);
|
|
7501
|
+
window.clearTimeout(firmTimer);
|
|
7502
|
+
window.clearTimeout(expiredTimer);
|
|
7503
|
+
};
|
|
7504
|
+
}, [active, t.gentle, t.firm, t.expired]);
|
|
7505
|
+
if (!active) {
|
|
7506
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
|
7507
|
+
}
|
|
7508
|
+
if (phase === "expired") {
|
|
7509
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className, role: "alert", "aria-busy": "false", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7510
|
+
ErrorBanner,
|
|
7511
|
+
{
|
|
7512
|
+
severity: "error",
|
|
7513
|
+
title: "This is taking longer than expected",
|
|
7514
|
+
message: `We're still trying to load the ${label}. The connection may be slow.`,
|
|
7515
|
+
action: onRetry ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
7516
|
+
"button",
|
|
7517
|
+
{
|
|
7518
|
+
type: "button",
|
|
7519
|
+
onClick: onRetry,
|
|
7520
|
+
className: "rounded bg-foreground/10 px-3 py-1.5 text-sm font-medium hover:bg-foreground/15",
|
|
7521
|
+
children: "Try again"
|
|
7522
|
+
}
|
|
7523
|
+
) : null
|
|
7524
|
+
}
|
|
7525
|
+
) });
|
|
7526
|
+
}
|
|
7527
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, role: "status", "aria-busy": "true", "aria-live": "polite", children: [
|
|
7528
|
+
skeleton,
|
|
7529
|
+
phase === "gentle" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: [
|
|
7530
|
+
"Loading ",
|
|
7531
|
+
label,
|
|
7532
|
+
"\u2026"
|
|
7533
|
+
] }) : null,
|
|
7534
|
+
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
|
|
7535
|
+
] });
|
|
7536
|
+
}
|
|
7537
|
+
function ProgressiveImage({
|
|
7538
|
+
src,
|
|
7539
|
+
alt,
|
|
7540
|
+
lqip,
|
|
7541
|
+
width,
|
|
7542
|
+
height,
|
|
7543
|
+
loading = "lazy",
|
|
7544
|
+
fit = "cover",
|
|
7545
|
+
className,
|
|
7546
|
+
onLoad,
|
|
7547
|
+
onError
|
|
7548
|
+
}) {
|
|
7549
|
+
const [loaded, setLoaded] = React27__namespace.useState(false);
|
|
7550
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7551
|
+
"div",
|
|
7552
|
+
{
|
|
7553
|
+
className: cn("relative overflow-hidden bg-muted", className),
|
|
7554
|
+
style: { width, height },
|
|
7555
|
+
children: [
|
|
7556
|
+
lqip ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
7557
|
+
"img",
|
|
7558
|
+
{
|
|
7559
|
+
src: lqip,
|
|
7560
|
+
alt: "",
|
|
7561
|
+
"aria-hidden": "true",
|
|
7562
|
+
className: cn(
|
|
7563
|
+
"absolute inset-0 h-full w-full object-cover blur-md scale-110 transition-opacity duration-300",
|
|
7564
|
+
loaded ? "opacity-0" : "opacity-100"
|
|
7565
|
+
)
|
|
7566
|
+
}
|
|
7567
|
+
) : null,
|
|
7568
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7569
|
+
"img",
|
|
7570
|
+
{
|
|
7571
|
+
src,
|
|
7572
|
+
alt,
|
|
7573
|
+
loading,
|
|
7574
|
+
onLoad: () => {
|
|
7575
|
+
setLoaded(true);
|
|
7576
|
+
onLoad?.();
|
|
7577
|
+
},
|
|
7578
|
+
onError,
|
|
7579
|
+
className: cn(
|
|
7580
|
+
"absolute inset-0 h-full w-full transition-opacity duration-300",
|
|
7581
|
+
`object-${fit}`,
|
|
7582
|
+
loaded ? "opacity-100" : "opacity-0"
|
|
7583
|
+
)
|
|
7584
|
+
}
|
|
7585
|
+
)
|
|
7586
|
+
]
|
|
7587
|
+
}
|
|
7588
|
+
);
|
|
7589
|
+
}
|
|
7590
|
+
function HazoUiToaster({
|
|
7591
|
+
position = "bottom-right",
|
|
7592
|
+
closeButton = true,
|
|
7593
|
+
visibleToasts = 5
|
|
7594
|
+
} = {}) {
|
|
7595
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7596
|
+
sonner.Toaster,
|
|
7597
|
+
{
|
|
7598
|
+
position,
|
|
7599
|
+
closeButton,
|
|
7600
|
+
visibleToasts,
|
|
7601
|
+
theme: "system",
|
|
7602
|
+
richColors: true,
|
|
7603
|
+
toastOptions: {
|
|
7604
|
+
classNames: {
|
|
7605
|
+
toast: "group rounded-md border bg-background text-foreground shadow-lg",
|
|
7606
|
+
title: "font-medium",
|
|
7607
|
+
description: "text-muted-foreground text-sm"
|
|
7608
|
+
}
|
|
7609
|
+
}
|
|
7610
|
+
}
|
|
7611
|
+
);
|
|
7612
|
+
}
|
|
7613
|
+
function successToast({ title, description, duration = 3e3, action }) {
|
|
7614
|
+
return sonner.toast.success(title, {
|
|
7615
|
+
description,
|
|
7616
|
+
duration,
|
|
7617
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 text-emerald-600" }),
|
|
7618
|
+
action: action ? { label: action.label, onClick: action.onClick } : void 0
|
|
7619
|
+
});
|
|
7620
|
+
}
|
|
7621
|
+
function errorToast({ title, description, duration = 5e3, action }) {
|
|
7622
|
+
return sonner.toast.error(title, {
|
|
7623
|
+
description,
|
|
7624
|
+
duration,
|
|
7625
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonAlert, { className: "h-4 w-4 text-destructive" }),
|
|
7626
|
+
action: action ? { label: action.label, onClick: action.onClick } : void 0
|
|
7627
|
+
});
|
|
7628
|
+
}
|
|
7629
|
+
function useLoadingState(initial = false) {
|
|
7630
|
+
const [isLoading, setLoading] = React27.useState(initial);
|
|
7631
|
+
const withLoading = React27.useCallback(async (fn) => {
|
|
7632
|
+
setLoading(true);
|
|
7633
|
+
try {
|
|
7634
|
+
return await fn();
|
|
7635
|
+
} finally {
|
|
7636
|
+
setLoading(false);
|
|
7637
|
+
}
|
|
7638
|
+
}, []);
|
|
7639
|
+
return { isLoading, setLoading, withLoading };
|
|
7640
|
+
}
|
|
7641
|
+
function useErrorDisplay() {
|
|
7642
|
+
const [error, setRaw] = React27.useState(null);
|
|
7643
|
+
const setError = React27.useCallback((value) => {
|
|
7644
|
+
if (value == null) {
|
|
7645
|
+
setRaw(null);
|
|
7646
|
+
return;
|
|
7647
|
+
}
|
|
7648
|
+
if (typeof value === "string") {
|
|
7649
|
+
setRaw(value);
|
|
7650
|
+
return;
|
|
7651
|
+
}
|
|
7652
|
+
if (value instanceof Error) {
|
|
7653
|
+
setRaw(value.message);
|
|
7654
|
+
return;
|
|
7655
|
+
}
|
|
7656
|
+
setRaw(String(value));
|
|
7657
|
+
}, []);
|
|
7658
|
+
const clearError = React27.useCallback(() => setRaw(null), []);
|
|
7659
|
+
return { error, setError, clearError };
|
|
7660
|
+
}
|
|
7205
7661
|
|
|
7662
|
+
Object.defineProperty(exports, "rawToast", {
|
|
7663
|
+
enumerable: true,
|
|
7664
|
+
get: function () { return sonner.toast; }
|
|
7665
|
+
});
|
|
7206
7666
|
exports.ANIMATION_PRESETS = ANIMATION_PRESETS;
|
|
7207
7667
|
exports.Accordion = Accordion;
|
|
7208
7668
|
exports.AccordionContent = AccordionContent;
|
|
@@ -7237,6 +7697,16 @@ exports.CollapsibleTrigger = CollapsibleTrigger2;
|
|
|
7237
7697
|
exports.CommandNodeExtension = CommandNodeExtension;
|
|
7238
7698
|
exports.CommandPill = CommandPill;
|
|
7239
7699
|
exports.CommandPopover = CommandPopover;
|
|
7700
|
+
exports.Drawer = Drawer;
|
|
7701
|
+
exports.DrawerClose = DrawerClose;
|
|
7702
|
+
exports.DrawerContent = DrawerContent;
|
|
7703
|
+
exports.DrawerDescription = DrawerDescription;
|
|
7704
|
+
exports.DrawerFooter = DrawerFooter;
|
|
7705
|
+
exports.DrawerHeader = DrawerHeader;
|
|
7706
|
+
exports.DrawerOverlay = DrawerOverlay;
|
|
7707
|
+
exports.DrawerPortal = DrawerPortal;
|
|
7708
|
+
exports.DrawerTitle = DrawerTitle;
|
|
7709
|
+
exports.DrawerTrigger = DrawerTrigger;
|
|
7240
7710
|
exports.DropdownMenu = DropdownMenu;
|
|
7241
7711
|
exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
|
|
7242
7712
|
exports.DropdownMenuContent = DropdownMenuContent;
|
|
@@ -7252,6 +7722,9 @@ exports.DropdownMenuSub = DropdownMenuSub;
|
|
|
7252
7722
|
exports.DropdownMenuSubContent = DropdownMenuSubContent;
|
|
7253
7723
|
exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
|
|
7254
7724
|
exports.DropdownMenuTrigger = DropdownMenuTrigger;
|
|
7725
|
+
exports.EmptyState = EmptyState;
|
|
7726
|
+
exports.ErrorBanner = ErrorBanner;
|
|
7727
|
+
exports.ErrorPage = ErrorPage;
|
|
7255
7728
|
exports.HazoUiConfirmDialog = HazoUiConfirmDialog;
|
|
7256
7729
|
exports.HazoUiDialog = HazoUiDialog;
|
|
7257
7730
|
exports.HazoUiDialogClose = DialogClose;
|
|
@@ -7272,14 +7745,17 @@ exports.HazoUiPillRadio = HazoUiPillRadio;
|
|
|
7272
7745
|
exports.HazoUiRte = HazoUiRte;
|
|
7273
7746
|
exports.HazoUiTextarea = HazoUiTextarea;
|
|
7274
7747
|
exports.HazoUiTextbox = HazoUiTextbox;
|
|
7748
|
+
exports.HazoUiToaster = HazoUiToaster;
|
|
7275
7749
|
exports.HoverCard = HoverCard;
|
|
7276
7750
|
exports.HoverCardContent = HoverCardContent;
|
|
7277
7751
|
exports.HoverCardTrigger = HoverCardTrigger;
|
|
7278
7752
|
exports.Input = Input;
|
|
7279
7753
|
exports.Label = Label2;
|
|
7754
|
+
exports.LoadingTimeout = LoadingTimeout;
|
|
7280
7755
|
exports.Popover = Popover;
|
|
7281
7756
|
exports.PopoverContent = PopoverContent;
|
|
7282
7757
|
exports.PopoverTrigger = PopoverTrigger;
|
|
7758
|
+
exports.ProgressiveImage = ProgressiveImage;
|
|
7283
7759
|
exports.RadioGroup = RadioGroup;
|
|
7284
7760
|
exports.RadioGroupItem = RadioGroupItem;
|
|
7285
7761
|
exports.ScrollArea = ScrollArea;
|
|
@@ -7301,6 +7777,11 @@ exports.ShadcnCommandGroup = CommandGroup;
|
|
|
7301
7777
|
exports.ShadcnCommandInput = CommandInput;
|
|
7302
7778
|
exports.ShadcnCommandItem = CommandItem;
|
|
7303
7779
|
exports.ShadcnCommandList = CommandList;
|
|
7780
|
+
exports.Skeleton = Skeleton;
|
|
7781
|
+
exports.SkeletonBar = SkeletonBar;
|
|
7782
|
+
exports.SkeletonCircle = SkeletonCircle;
|
|
7783
|
+
exports.SkeletonGroup = SkeletonGroup;
|
|
7784
|
+
exports.SkeletonRect = SkeletonRect;
|
|
7304
7785
|
exports.Spinner = Spinner;
|
|
7305
7786
|
exports.Switch = Switch;
|
|
7306
7787
|
exports.Tabs = Tabs;
|
|
@@ -7317,12 +7798,17 @@ exports.TooltipProvider = TooltipProvider;
|
|
|
7317
7798
|
exports.TooltipTrigger = TooltipTrigger;
|
|
7318
7799
|
exports.buttonGroupVariants = buttonGroupVariants;
|
|
7319
7800
|
exports.create_command_suggestion_extension = create_command_suggestion_extension;
|
|
7801
|
+
exports.errorToast = errorToast;
|
|
7320
7802
|
exports.get_hazo_ui_config = get_hazo_ui_config;
|
|
7321
7803
|
exports.parse_commands_from_text = parse_commands_from_text;
|
|
7322
7804
|
exports.reset_hazo_ui_config = reset_hazo_ui_config;
|
|
7323
7805
|
exports.resolve_animation_classes = resolve_animation_classes;
|
|
7324
7806
|
exports.set_hazo_ui_config = set_hazo_ui_config;
|
|
7807
|
+
exports.successToast = successToast;
|
|
7325
7808
|
exports.text_to_tiptap_content = text_to_tiptap_content;
|
|
7326
7809
|
exports.toggleVariants = toggleVariants;
|
|
7810
|
+
exports.useErrorDisplay = useErrorDisplay;
|
|
7811
|
+
exports.useLoadingState = useLoadingState;
|
|
7812
|
+
exports.useMediaQuery = useMediaQuery;
|
|
7327
7813
|
//# sourceMappingURL=index.cjs.map
|
|
7328
7814
|
//# sourceMappingURL=index.cjs.map
|