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.d.cts
CHANGED
|
@@ -2,6 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Node, Extension } from '@tiptap/core';
|
|
4
4
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
5
|
+
import * as vaul from 'vaul';
|
|
6
|
+
import { Drawer as Drawer$1 } from 'vaul';
|
|
5
7
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
6
8
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
7
9
|
import { VariantProps } from 'class-variance-authority';
|
|
@@ -21,6 +23,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
|
21
23
|
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
22
24
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
23
25
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
26
|
+
export { toast as rawToast } from 'sonner';
|
|
24
27
|
|
|
25
28
|
/**
|
|
26
29
|
* hazo_ui_config.ts
|
|
@@ -792,6 +795,39 @@ declare const DialogFooter: {
|
|
|
792
795
|
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
793
796
|
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
794
797
|
|
|
798
|
+
declare const Drawer: {
|
|
799
|
+
({ shouldScaleBackground, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
|
|
800
|
+
displayName: string;
|
|
801
|
+
};
|
|
802
|
+
declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
803
|
+
declare const DrawerPortal: typeof vaul.Portal;
|
|
804
|
+
declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
805
|
+
declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
806
|
+
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
807
|
+
declare const DrawerHeader: {
|
|
808
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
809
|
+
displayName: string;
|
|
810
|
+
};
|
|
811
|
+
declare const DrawerFooter: {
|
|
812
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
813
|
+
displayName: string;
|
|
814
|
+
};
|
|
815
|
+
declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
816
|
+
declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
817
|
+
|
|
818
|
+
/**
|
|
819
|
+
* Returns whether the given media query currently matches.
|
|
820
|
+
* Re-renders the consumer when the match state changes.
|
|
821
|
+
*
|
|
822
|
+
* @param query - A CSS media query string, e.g. "(max-width: 640px)"
|
|
823
|
+
* @returns boolean — `true` when the query matches, `false` during SSR or before mount
|
|
824
|
+
*
|
|
825
|
+
* @example
|
|
826
|
+
* const isMobile = useMediaQuery("(max-width: 640px)");
|
|
827
|
+
* const Shell = isMobile ? Drawer : Dialog;
|
|
828
|
+
*/
|
|
829
|
+
declare function useMediaQuery(query: string): boolean;
|
|
830
|
+
|
|
795
831
|
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
796
832
|
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
797
833
|
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -968,4 +1004,179 @@ declare function ButtonGroupText({ className, asChild, ...props }: React.Compone
|
|
|
968
1004
|
}): react_jsx_runtime.JSX.Element;
|
|
969
1005
|
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
|
|
970
1006
|
|
|
971
|
-
|
|
1007
|
+
interface SkeletonBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1008
|
+
className?: string;
|
|
1009
|
+
}
|
|
1010
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
1011
|
+
interface SkeletonCircleProps {
|
|
1012
|
+
/** Diameter in px. Default 40. */
|
|
1013
|
+
size?: number;
|
|
1014
|
+
className?: string;
|
|
1015
|
+
}
|
|
1016
|
+
declare function SkeletonCircle({ size, className }: SkeletonCircleProps): react_jsx_runtime.JSX.Element;
|
|
1017
|
+
interface SkeletonBarProps {
|
|
1018
|
+
/** CSS width — accepts px (number) or any CSS length string. Default "100%". */
|
|
1019
|
+
width?: number | string;
|
|
1020
|
+
/** Height in px. Default 12. */
|
|
1021
|
+
height?: number;
|
|
1022
|
+
className?: string;
|
|
1023
|
+
}
|
|
1024
|
+
declare function SkeletonBar({ width, height, className }: SkeletonBarProps): react_jsx_runtime.JSX.Element;
|
|
1025
|
+
interface SkeletonRectProps {
|
|
1026
|
+
width?: number | string;
|
|
1027
|
+
height?: number | string;
|
|
1028
|
+
/** CSS border-radius. Default 6 (matches rounded-md). */
|
|
1029
|
+
radius?: number | string;
|
|
1030
|
+
className?: string;
|
|
1031
|
+
}
|
|
1032
|
+
declare function SkeletonRect({ width, height, radius, className }: SkeletonRectProps): react_jsx_runtime.JSX.Element;
|
|
1033
|
+
interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1034
|
+
/** Optional `aria-label` for the loading region. Default "Loading content". */
|
|
1035
|
+
label?: string;
|
|
1036
|
+
children: React.ReactNode;
|
|
1037
|
+
}
|
|
1038
|
+
declare function SkeletonGroup({ label, children, className, ...rest }: SkeletonGroupProps): react_jsx_runtime.JSX.Element;
|
|
1039
|
+
|
|
1040
|
+
interface EmptyStateProps {
|
|
1041
|
+
/** Icon element. Recommended size 48x48. Wrap a lucide icon in a div if you want background styling. */
|
|
1042
|
+
icon?: React.ReactNode;
|
|
1043
|
+
/** Required main heading. */
|
|
1044
|
+
title: string;
|
|
1045
|
+
/** Optional secondary description. */
|
|
1046
|
+
description?: React.ReactNode;
|
|
1047
|
+
/** Optional CTA region — typically one or two <Button> elements. */
|
|
1048
|
+
action?: React.ReactNode;
|
|
1049
|
+
/** Visual size. "sm" for inline use (cards, panels), "md" default, "lg" for full-page emptiness. */
|
|
1050
|
+
size?: "sm" | "md" | "lg";
|
|
1051
|
+
className?: string;
|
|
1052
|
+
}
|
|
1053
|
+
declare function EmptyState({ icon, title, description, action, size, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
1054
|
+
|
|
1055
|
+
type ErrorBannerSeverity = "warning" | "error";
|
|
1056
|
+
interface ErrorBannerProps {
|
|
1057
|
+
/** Defaults to "error". */
|
|
1058
|
+
severity?: ErrorBannerSeverity;
|
|
1059
|
+
/** Optional bold heading shown above the message. */
|
|
1060
|
+
title?: string;
|
|
1061
|
+
/** Required body text or node. */
|
|
1062
|
+
message: React.ReactNode;
|
|
1063
|
+
/** Override the auto-selected icon. */
|
|
1064
|
+
icon?: React.ReactNode;
|
|
1065
|
+
/** Optional CTA region — typically one <Button>. */
|
|
1066
|
+
action?: React.ReactNode;
|
|
1067
|
+
/** When provided, renders a dismiss "X" button that calls this on click. */
|
|
1068
|
+
onDismiss?: () => void;
|
|
1069
|
+
className?: string;
|
|
1070
|
+
}
|
|
1071
|
+
declare function ErrorBanner({ severity, title, message, icon, action, onDismiss, className, }: ErrorBannerProps): react_jsx_runtime.JSX.Element;
|
|
1072
|
+
|
|
1073
|
+
interface ErrorPageProps {
|
|
1074
|
+
/** Defaults to "Something went wrong". */
|
|
1075
|
+
title?: string;
|
|
1076
|
+
/** Optional explanation paragraph(s). */
|
|
1077
|
+
description?: React.ReactNode;
|
|
1078
|
+
/** Short symbolic code (e.g., "500", "NOT_FOUND") rendered as a tag. */
|
|
1079
|
+
errorCode?: string;
|
|
1080
|
+
/** Correlation id from hazo_logs — rendered in a copyable mono block when present. */
|
|
1081
|
+
correlationId?: string;
|
|
1082
|
+
/** CTA region — typically one or two <Button> elements ("Try again", "Go home"). */
|
|
1083
|
+
actions?: React.ReactNode;
|
|
1084
|
+
/** Override the default OctagonAlert icon. */
|
|
1085
|
+
illustration?: React.ReactNode;
|
|
1086
|
+
className?: string;
|
|
1087
|
+
}
|
|
1088
|
+
declare function ErrorPage({ title, description, errorCode, correlationId, actions, illustration, className, }: ErrorPageProps): react_jsx_runtime.JSX.Element;
|
|
1089
|
+
|
|
1090
|
+
interface LoadingTimeoutProps {
|
|
1091
|
+
/** When true, the timeout runs and escalation states render. When false, renders children. */
|
|
1092
|
+
active: boolean;
|
|
1093
|
+
/** Children shown when not loading. */
|
|
1094
|
+
children?: React.ReactNode;
|
|
1095
|
+
/** Optional skeleton rendered during the "silent" phase (0–5s). */
|
|
1096
|
+
skeleton?: React.ReactNode;
|
|
1097
|
+
/** Called when the user clicks the retry button in the "expired" phase. */
|
|
1098
|
+
onRetry?: () => void;
|
|
1099
|
+
/** Customise the timeout thresholds in ms. Defaults: 5000/15000/30000. */
|
|
1100
|
+
thresholds?: {
|
|
1101
|
+
gentle?: number;
|
|
1102
|
+
firm?: number;
|
|
1103
|
+
expired?: number;
|
|
1104
|
+
};
|
|
1105
|
+
/** Optional label used in the gentle/firm messages. Default "content". */
|
|
1106
|
+
label?: string;
|
|
1107
|
+
className?: string;
|
|
1108
|
+
}
|
|
1109
|
+
declare function LoadingTimeout({ active, children, skeleton, onRetry, thresholds, label, className, }: LoadingTimeoutProps): react_jsx_runtime.JSX.Element;
|
|
1110
|
+
|
|
1111
|
+
interface ProgressiveImageProps {
|
|
1112
|
+
/** Required final image src. */
|
|
1113
|
+
src: string;
|
|
1114
|
+
/** Required alt text. Empty string is allowed for decorative images. */
|
|
1115
|
+
alt: string;
|
|
1116
|
+
/** Low-quality placeholder data URL or tiny image url. Renders blurred under the main image. */
|
|
1117
|
+
lqip?: string;
|
|
1118
|
+
/** Width in px or CSS length. Required for stable aspect ratio. */
|
|
1119
|
+
width: number | string;
|
|
1120
|
+
/** Height in px or CSS length. Required for stable aspect ratio. */
|
|
1121
|
+
height: number | string;
|
|
1122
|
+
/** Native loading attribute. Default "lazy". */
|
|
1123
|
+
loading?: "eager" | "lazy";
|
|
1124
|
+
/** Object fit for the final image. Default "cover". */
|
|
1125
|
+
fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
1126
|
+
className?: string;
|
|
1127
|
+
onLoad?: () => void;
|
|
1128
|
+
onError?: () => void;
|
|
1129
|
+
}
|
|
1130
|
+
declare function ProgressiveImage({ src, alt, lqip, width, height, loading, fit, className, onLoad, onError, }: ProgressiveImageProps): react_jsx_runtime.JSX.Element;
|
|
1131
|
+
|
|
1132
|
+
interface HazoUiToasterProps {
|
|
1133
|
+
/** Position of the toast stack. Default "bottom-right". */
|
|
1134
|
+
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
|
|
1135
|
+
/** Whether toasts include a close (X) button. Default true. */
|
|
1136
|
+
closeButton?: boolean;
|
|
1137
|
+
/** Max number of toasts visible at once. Default 5. */
|
|
1138
|
+
visibleToasts?: number;
|
|
1139
|
+
}
|
|
1140
|
+
declare function HazoUiToaster({ position, closeButton, visibleToasts, }?: HazoUiToasterProps): react_jsx_runtime.JSX.Element;
|
|
1141
|
+
interface ToastOptions {
|
|
1142
|
+
title: string;
|
|
1143
|
+
description?: string;
|
|
1144
|
+
/** Auto-dismiss duration in ms. Default 3000 for success, 5000 for error. */
|
|
1145
|
+
duration?: number;
|
|
1146
|
+
/** Optional action button rendered inside the toast. */
|
|
1147
|
+
action?: {
|
|
1148
|
+
label: string;
|
|
1149
|
+
onClick: () => void;
|
|
1150
|
+
};
|
|
1151
|
+
}
|
|
1152
|
+
declare function successToast({ title, description, duration, action }: ToastOptions): string | number;
|
|
1153
|
+
declare function errorToast({ title, description, duration, action }: ToastOptions): string | number;
|
|
1154
|
+
|
|
1155
|
+
interface UseLoadingStateResult {
|
|
1156
|
+
/** Current loading flag. */
|
|
1157
|
+
isLoading: boolean;
|
|
1158
|
+
/** Set the loading flag manually. */
|
|
1159
|
+
setLoading: (value: boolean) => void;
|
|
1160
|
+
/**
|
|
1161
|
+
* Wraps an async function: sets loading=true, awaits the function,
|
|
1162
|
+
* sets loading=false in a finally block. Returns the function's result
|
|
1163
|
+
* (or throws its error).
|
|
1164
|
+
*/
|
|
1165
|
+
withLoading: <T>(fn: () => Promise<T>) => Promise<T>;
|
|
1166
|
+
}
|
|
1167
|
+
declare function useLoadingState(initial?: boolean): UseLoadingStateResult;
|
|
1168
|
+
|
|
1169
|
+
interface UseErrorDisplayResult {
|
|
1170
|
+
/** Current error message, or null when cleared. */
|
|
1171
|
+
error: string | null;
|
|
1172
|
+
/**
|
|
1173
|
+
* Set the error. Accepts a string, an Error instance (uses .message),
|
|
1174
|
+
* or null to clear. Anything else is coerced via String().
|
|
1175
|
+
*/
|
|
1176
|
+
setError: (value: unknown) => void;
|
|
1177
|
+
/** Clear the error. Same as `setError(null)`. */
|
|
1178
|
+
clearError: () => void;
|
|
1179
|
+
}
|
|
1180
|
+
declare function useErrorDisplay(): UseErrorDisplayResult;
|
|
1181
|
+
|
|
1182
|
+
export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AnimationPreset, type BaseCommandInputProps, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type CommandEditContext, type CommandItem$1 as CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type ConfirmDialogVariant, type DialogVariant, 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, type EmptyStateProps, ErrorBanner, type ErrorBannerProps, type ErrorBannerSeverity, ErrorPage, type ErrorPageProps, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiConfirmDialog, type HazoUiConfirmDialogProps, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, type HazoUiPillRadioItem, type HazoUiPillRadioProps, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, HazoUiToaster, type HazoUiToasterProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InsertedCommand, Label, LoadingTimeout, type LoadingTimeoutProps, Popover, PopoverContent, PopoverTrigger, type PrefixColor, type PrefixConfig, ProgressiveImage, type ProgressiveImageProps, RadioGroup, RadioGroupItem, type RteAttachment, type RteOutput, type RteVariable, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, type SkeletonBarProps, SkeletonCircle, type SkeletonCircleProps, SkeletonGroup, type SkeletonGroupProps, SkeletonRect, type SkeletonRectProps, type SortConfig, type SortField, Spinner, type SuggestionState, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ToastOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseErrorDisplayResult, type UseLoadingStateResult, 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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Node, Extension } from '@tiptap/core';
|
|
4
4
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
5
|
+
import * as vaul from 'vaul';
|
|
6
|
+
import { Drawer as Drawer$1 } from 'vaul';
|
|
5
7
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
6
8
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
7
9
|
import { VariantProps } from 'class-variance-authority';
|
|
@@ -21,6 +23,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
|
21
23
|
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
22
24
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
23
25
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
26
|
+
export { toast as rawToast } from 'sonner';
|
|
24
27
|
|
|
25
28
|
/**
|
|
26
29
|
* hazo_ui_config.ts
|
|
@@ -792,6 +795,39 @@ declare const DialogFooter: {
|
|
|
792
795
|
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
793
796
|
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
794
797
|
|
|
798
|
+
declare const Drawer: {
|
|
799
|
+
({ shouldScaleBackground, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
|
|
800
|
+
displayName: string;
|
|
801
|
+
};
|
|
802
|
+
declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
803
|
+
declare const DrawerPortal: typeof vaul.Portal;
|
|
804
|
+
declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
805
|
+
declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
806
|
+
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
807
|
+
declare const DrawerHeader: {
|
|
808
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
809
|
+
displayName: string;
|
|
810
|
+
};
|
|
811
|
+
declare const DrawerFooter: {
|
|
812
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
813
|
+
displayName: string;
|
|
814
|
+
};
|
|
815
|
+
declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
816
|
+
declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
817
|
+
|
|
818
|
+
/**
|
|
819
|
+
* Returns whether the given media query currently matches.
|
|
820
|
+
* Re-renders the consumer when the match state changes.
|
|
821
|
+
*
|
|
822
|
+
* @param query - A CSS media query string, e.g. "(max-width: 640px)"
|
|
823
|
+
* @returns boolean — `true` when the query matches, `false` during SSR or before mount
|
|
824
|
+
*
|
|
825
|
+
* @example
|
|
826
|
+
* const isMobile = useMediaQuery("(max-width: 640px)");
|
|
827
|
+
* const Shell = isMobile ? Drawer : Dialog;
|
|
828
|
+
*/
|
|
829
|
+
declare function useMediaQuery(query: string): boolean;
|
|
830
|
+
|
|
795
831
|
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
796
832
|
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
797
833
|
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -968,4 +1004,179 @@ declare function ButtonGroupText({ className, asChild, ...props }: React.Compone
|
|
|
968
1004
|
}): react_jsx_runtime.JSX.Element;
|
|
969
1005
|
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
|
|
970
1006
|
|
|
971
|
-
|
|
1007
|
+
interface SkeletonBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1008
|
+
className?: string;
|
|
1009
|
+
}
|
|
1010
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
1011
|
+
interface SkeletonCircleProps {
|
|
1012
|
+
/** Diameter in px. Default 40. */
|
|
1013
|
+
size?: number;
|
|
1014
|
+
className?: string;
|
|
1015
|
+
}
|
|
1016
|
+
declare function SkeletonCircle({ size, className }: SkeletonCircleProps): react_jsx_runtime.JSX.Element;
|
|
1017
|
+
interface SkeletonBarProps {
|
|
1018
|
+
/** CSS width — accepts px (number) or any CSS length string. Default "100%". */
|
|
1019
|
+
width?: number | string;
|
|
1020
|
+
/** Height in px. Default 12. */
|
|
1021
|
+
height?: number;
|
|
1022
|
+
className?: string;
|
|
1023
|
+
}
|
|
1024
|
+
declare function SkeletonBar({ width, height, className }: SkeletonBarProps): react_jsx_runtime.JSX.Element;
|
|
1025
|
+
interface SkeletonRectProps {
|
|
1026
|
+
width?: number | string;
|
|
1027
|
+
height?: number | string;
|
|
1028
|
+
/** CSS border-radius. Default 6 (matches rounded-md). */
|
|
1029
|
+
radius?: number | string;
|
|
1030
|
+
className?: string;
|
|
1031
|
+
}
|
|
1032
|
+
declare function SkeletonRect({ width, height, radius, className }: SkeletonRectProps): react_jsx_runtime.JSX.Element;
|
|
1033
|
+
interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1034
|
+
/** Optional `aria-label` for the loading region. Default "Loading content". */
|
|
1035
|
+
label?: string;
|
|
1036
|
+
children: React.ReactNode;
|
|
1037
|
+
}
|
|
1038
|
+
declare function SkeletonGroup({ label, children, className, ...rest }: SkeletonGroupProps): react_jsx_runtime.JSX.Element;
|
|
1039
|
+
|
|
1040
|
+
interface EmptyStateProps {
|
|
1041
|
+
/** Icon element. Recommended size 48x48. Wrap a lucide icon in a div if you want background styling. */
|
|
1042
|
+
icon?: React.ReactNode;
|
|
1043
|
+
/** Required main heading. */
|
|
1044
|
+
title: string;
|
|
1045
|
+
/** Optional secondary description. */
|
|
1046
|
+
description?: React.ReactNode;
|
|
1047
|
+
/** Optional CTA region — typically one or two <Button> elements. */
|
|
1048
|
+
action?: React.ReactNode;
|
|
1049
|
+
/** Visual size. "sm" for inline use (cards, panels), "md" default, "lg" for full-page emptiness. */
|
|
1050
|
+
size?: "sm" | "md" | "lg";
|
|
1051
|
+
className?: string;
|
|
1052
|
+
}
|
|
1053
|
+
declare function EmptyState({ icon, title, description, action, size, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
1054
|
+
|
|
1055
|
+
type ErrorBannerSeverity = "warning" | "error";
|
|
1056
|
+
interface ErrorBannerProps {
|
|
1057
|
+
/** Defaults to "error". */
|
|
1058
|
+
severity?: ErrorBannerSeverity;
|
|
1059
|
+
/** Optional bold heading shown above the message. */
|
|
1060
|
+
title?: string;
|
|
1061
|
+
/** Required body text or node. */
|
|
1062
|
+
message: React.ReactNode;
|
|
1063
|
+
/** Override the auto-selected icon. */
|
|
1064
|
+
icon?: React.ReactNode;
|
|
1065
|
+
/** Optional CTA region — typically one <Button>. */
|
|
1066
|
+
action?: React.ReactNode;
|
|
1067
|
+
/** When provided, renders a dismiss "X" button that calls this on click. */
|
|
1068
|
+
onDismiss?: () => void;
|
|
1069
|
+
className?: string;
|
|
1070
|
+
}
|
|
1071
|
+
declare function ErrorBanner({ severity, title, message, icon, action, onDismiss, className, }: ErrorBannerProps): react_jsx_runtime.JSX.Element;
|
|
1072
|
+
|
|
1073
|
+
interface ErrorPageProps {
|
|
1074
|
+
/** Defaults to "Something went wrong". */
|
|
1075
|
+
title?: string;
|
|
1076
|
+
/** Optional explanation paragraph(s). */
|
|
1077
|
+
description?: React.ReactNode;
|
|
1078
|
+
/** Short symbolic code (e.g., "500", "NOT_FOUND") rendered as a tag. */
|
|
1079
|
+
errorCode?: string;
|
|
1080
|
+
/** Correlation id from hazo_logs — rendered in a copyable mono block when present. */
|
|
1081
|
+
correlationId?: string;
|
|
1082
|
+
/** CTA region — typically one or two <Button> elements ("Try again", "Go home"). */
|
|
1083
|
+
actions?: React.ReactNode;
|
|
1084
|
+
/** Override the default OctagonAlert icon. */
|
|
1085
|
+
illustration?: React.ReactNode;
|
|
1086
|
+
className?: string;
|
|
1087
|
+
}
|
|
1088
|
+
declare function ErrorPage({ title, description, errorCode, correlationId, actions, illustration, className, }: ErrorPageProps): react_jsx_runtime.JSX.Element;
|
|
1089
|
+
|
|
1090
|
+
interface LoadingTimeoutProps {
|
|
1091
|
+
/** When true, the timeout runs and escalation states render. When false, renders children. */
|
|
1092
|
+
active: boolean;
|
|
1093
|
+
/** Children shown when not loading. */
|
|
1094
|
+
children?: React.ReactNode;
|
|
1095
|
+
/** Optional skeleton rendered during the "silent" phase (0–5s). */
|
|
1096
|
+
skeleton?: React.ReactNode;
|
|
1097
|
+
/** Called when the user clicks the retry button in the "expired" phase. */
|
|
1098
|
+
onRetry?: () => void;
|
|
1099
|
+
/** Customise the timeout thresholds in ms. Defaults: 5000/15000/30000. */
|
|
1100
|
+
thresholds?: {
|
|
1101
|
+
gentle?: number;
|
|
1102
|
+
firm?: number;
|
|
1103
|
+
expired?: number;
|
|
1104
|
+
};
|
|
1105
|
+
/** Optional label used in the gentle/firm messages. Default "content". */
|
|
1106
|
+
label?: string;
|
|
1107
|
+
className?: string;
|
|
1108
|
+
}
|
|
1109
|
+
declare function LoadingTimeout({ active, children, skeleton, onRetry, thresholds, label, className, }: LoadingTimeoutProps): react_jsx_runtime.JSX.Element;
|
|
1110
|
+
|
|
1111
|
+
interface ProgressiveImageProps {
|
|
1112
|
+
/** Required final image src. */
|
|
1113
|
+
src: string;
|
|
1114
|
+
/** Required alt text. Empty string is allowed for decorative images. */
|
|
1115
|
+
alt: string;
|
|
1116
|
+
/** Low-quality placeholder data URL or tiny image url. Renders blurred under the main image. */
|
|
1117
|
+
lqip?: string;
|
|
1118
|
+
/** Width in px or CSS length. Required for stable aspect ratio. */
|
|
1119
|
+
width: number | string;
|
|
1120
|
+
/** Height in px or CSS length. Required for stable aspect ratio. */
|
|
1121
|
+
height: number | string;
|
|
1122
|
+
/** Native loading attribute. Default "lazy". */
|
|
1123
|
+
loading?: "eager" | "lazy";
|
|
1124
|
+
/** Object fit for the final image. Default "cover". */
|
|
1125
|
+
fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
1126
|
+
className?: string;
|
|
1127
|
+
onLoad?: () => void;
|
|
1128
|
+
onError?: () => void;
|
|
1129
|
+
}
|
|
1130
|
+
declare function ProgressiveImage({ src, alt, lqip, width, height, loading, fit, className, onLoad, onError, }: ProgressiveImageProps): react_jsx_runtime.JSX.Element;
|
|
1131
|
+
|
|
1132
|
+
interface HazoUiToasterProps {
|
|
1133
|
+
/** Position of the toast stack. Default "bottom-right". */
|
|
1134
|
+
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
|
|
1135
|
+
/** Whether toasts include a close (X) button. Default true. */
|
|
1136
|
+
closeButton?: boolean;
|
|
1137
|
+
/** Max number of toasts visible at once. Default 5. */
|
|
1138
|
+
visibleToasts?: number;
|
|
1139
|
+
}
|
|
1140
|
+
declare function HazoUiToaster({ position, closeButton, visibleToasts, }?: HazoUiToasterProps): react_jsx_runtime.JSX.Element;
|
|
1141
|
+
interface ToastOptions {
|
|
1142
|
+
title: string;
|
|
1143
|
+
description?: string;
|
|
1144
|
+
/** Auto-dismiss duration in ms. Default 3000 for success, 5000 for error. */
|
|
1145
|
+
duration?: number;
|
|
1146
|
+
/** Optional action button rendered inside the toast. */
|
|
1147
|
+
action?: {
|
|
1148
|
+
label: string;
|
|
1149
|
+
onClick: () => void;
|
|
1150
|
+
};
|
|
1151
|
+
}
|
|
1152
|
+
declare function successToast({ title, description, duration, action }: ToastOptions): string | number;
|
|
1153
|
+
declare function errorToast({ title, description, duration, action }: ToastOptions): string | number;
|
|
1154
|
+
|
|
1155
|
+
interface UseLoadingStateResult {
|
|
1156
|
+
/** Current loading flag. */
|
|
1157
|
+
isLoading: boolean;
|
|
1158
|
+
/** Set the loading flag manually. */
|
|
1159
|
+
setLoading: (value: boolean) => void;
|
|
1160
|
+
/**
|
|
1161
|
+
* Wraps an async function: sets loading=true, awaits the function,
|
|
1162
|
+
* sets loading=false in a finally block. Returns the function's result
|
|
1163
|
+
* (or throws its error).
|
|
1164
|
+
*/
|
|
1165
|
+
withLoading: <T>(fn: () => Promise<T>) => Promise<T>;
|
|
1166
|
+
}
|
|
1167
|
+
declare function useLoadingState(initial?: boolean): UseLoadingStateResult;
|
|
1168
|
+
|
|
1169
|
+
interface UseErrorDisplayResult {
|
|
1170
|
+
/** Current error message, or null when cleared. */
|
|
1171
|
+
error: string | null;
|
|
1172
|
+
/**
|
|
1173
|
+
* Set the error. Accepts a string, an Error instance (uses .message),
|
|
1174
|
+
* or null to clear. Anything else is coerced via String().
|
|
1175
|
+
*/
|
|
1176
|
+
setError: (value: unknown) => void;
|
|
1177
|
+
/** Clear the error. Same as `setError(null)`. */
|
|
1178
|
+
clearError: () => void;
|
|
1179
|
+
}
|
|
1180
|
+
declare function useErrorDisplay(): UseErrorDisplayResult;
|
|
1181
|
+
|
|
1182
|
+
export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AnimationPreset, type BaseCommandInputProps, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type CommandEditContext, type CommandItem$1 as CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type ConfirmDialogVariant, type DialogVariant, 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, type EmptyStateProps, ErrorBanner, type ErrorBannerProps, type ErrorBannerSeverity, ErrorPage, type ErrorPageProps, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiConfirmDialog, type HazoUiConfirmDialogProps, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, type HazoUiPillRadioItem, type HazoUiPillRadioProps, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, HazoUiToaster, type HazoUiToasterProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InsertedCommand, Label, LoadingTimeout, type LoadingTimeoutProps, Popover, PopoverContent, PopoverTrigger, type PrefixColor, type PrefixConfig, ProgressiveImage, type ProgressiveImageProps, RadioGroup, RadioGroupItem, type RteAttachment, type RteOutput, type RteVariable, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, type SkeletonBarProps, SkeletonCircle, type SkeletonCircleProps, SkeletonGroup, type SkeletonGroupProps, SkeletonRect, type SkeletonRectProps, type SortConfig, type SortField, Spinner, type SuggestionState, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ToastOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseErrorDisplayResult, type UseLoadingStateResult, 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 };
|