@ai-matrx/design-system 0.10.0 → 0.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/CHANGELOG.md +85 -2
- package/README.md +20 -1
- package/dist/index.cjs +395 -284
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +105 -1
- package/dist/index.d.ts +105 -1
- package/dist/index.js +432 -318
- package/dist/index.js.map +1 -1
- package/package.json +6 -2
package/dist/index.d.cts
CHANGED
|
@@ -478,6 +478,110 @@ declare const CommandShortcut: {
|
|
|
478
478
|
displayName: string;
|
|
479
479
|
};
|
|
480
480
|
|
|
481
|
+
/**
|
|
482
|
+
* ConfirmDialog — the `window.confirm` replacement, declarative half.
|
|
483
|
+
*
|
|
484
|
+
* WHY IT LIVES HERE AND NOT IN `@ai-matrx/kit` (census row 19i, decided by the
|
|
485
|
+
* package-graph ruling of 2026-09-07, on the row-20a Tooltip precedent).
|
|
486
|
+
*
|
|
487
|
+
* kit shipped this dialog with its own inlined AlertDialog, its own inlined
|
|
488
|
+
* button class strings, a hardcoded 80%-opaque black scrim, and
|
|
489
|
+
* `data-[state=open]:animate-in … zoom-in-95 … slide-in-from-top-[48%]` —
|
|
490
|
+
* host-plugin utilities `tailwindcss-animate`/`tw-animate-css` supply and a
|
|
491
|
+
* package cannot ship. kit ships NO stylesheet at all, so in three of the four
|
|
492
|
+
* consumers the most consequential surface in the app (the one standing
|
|
493
|
+
* between a user and a destroyed thing) appeared with no animation, no error,
|
|
494
|
+
* and a scrim that ignored the theme. kit could not import the fix:
|
|
495
|
+
* `@ai-matrx/design-system` depends on `@ai-matrx/kit`, so importing back is a
|
|
496
|
+
* cycle; giving kit its own sheet would invent a second required-CSS contract
|
|
497
|
+
* no consumer performs (the C26 silent host contract, one layer down).
|
|
498
|
+
*
|
|
499
|
+
* The resolution is the one row 20a already proved: the surface moves to the
|
|
500
|
+
* package that owns the surface. This file is built on THIS package's
|
|
501
|
+
* `AlertDialog` — so it inherits, for free and forever:
|
|
502
|
+
*
|
|
503
|
+
* - the package motion layer (`matrx-motion-overlay` / `matrx-motion-dialog`),
|
|
504
|
+
* whose rules ship in `styles.css` and are proven present in the tarball;
|
|
505
|
+
* - `--matrx-overlay-scrim`, a token that answers to the host's theme,
|
|
506
|
+
* instead of an opaque black literal;
|
|
507
|
+
* - AlertDialog ruling 3 — clamped to `max-h-[85dvh]`, scrolling inside
|
|
508
|
+
* itself, with a sticky footer. **This is what makes the consequence-first
|
|
509
|
+
* copy law survivable**: a confirmation that names everything it is about
|
|
510
|
+
* to destroy can be long, and in kit's copy a long one pushed Cancel and
|
|
511
|
+
* Continue below the fold of a short viewport with no backdrop dismissal —
|
|
512
|
+
* a dead end on a destructive action;
|
|
513
|
+
* - `buttonVariants` as the ONE source of button appearance, including the
|
|
514
|
+
* 44px coarse-pointer target;
|
|
515
|
+
* - `PortalContainerProvider`, so a dialog opened inside a popped-out window
|
|
516
|
+
* panel renders in THAT window's document.
|
|
517
|
+
*
|
|
518
|
+
* kit keeps `./confirm-opener` — the pure, React-free imperative `confirm()`
|
|
519
|
+
* and its `globalThis`-slotted host registry — and re-exports nothing of this.
|
|
520
|
+
* Consumers mount `<ConfirmDialogHost />` from here and call `confirm()` from
|
|
521
|
+
* there. See `confirm-host.tsx` for the join.
|
|
522
|
+
*
|
|
523
|
+
* BEHAVIOR IS THE KIT PORT, VERBATIM. Every prop, default and interaction is
|
|
524
|
+
* unchanged; only the chrome underneath it is the package's.
|
|
525
|
+
*
|
|
526
|
+
* Pattern: hold the pending target in state, render `<ConfirmDialog />` once at
|
|
527
|
+
* the bottom of the component, and open it by setting the target. When busy
|
|
528
|
+
* state is meaningful (a network delete that should hold the dialog open with a
|
|
529
|
+
* spinner), use THIS component inline; the imperative `confirm()` closes
|
|
530
|
+
* immediately on click.
|
|
531
|
+
*/
|
|
532
|
+
|
|
533
|
+
interface ConfirmDialogProps {
|
|
534
|
+
open: boolean;
|
|
535
|
+
onOpenChange: (open: boolean) => void;
|
|
536
|
+
title: React.ReactNode;
|
|
537
|
+
/**
|
|
538
|
+
* THE CONSEQUENCE. Per the platform's destructive-and-expensive-actions law,
|
|
539
|
+
* a confirmation must name what is lost, what is duplicated, and/or what it
|
|
540
|
+
* costs — "Are you sure?" is not a confirmation. This renders as the dialog's
|
|
541
|
+
* accessible description, so a screen-reader user is told the consequence
|
|
542
|
+
* too, and it is never clamped or truncated.
|
|
543
|
+
*/
|
|
544
|
+
description?: React.ReactNode | undefined;
|
|
545
|
+
/**
|
|
546
|
+
* Rich body rendered between the header and the footer, OUTSIDE the
|
|
547
|
+
* description `<p>` — use for block-level content (diffs, previews, lists of
|
|
548
|
+
* exactly what is about to be deleted) that would be invalid HTML inside
|
|
549
|
+
* `description`.
|
|
550
|
+
*/
|
|
551
|
+
content?: React.ReactNode | undefined;
|
|
552
|
+
/** Extra classes for the dialog content (e.g. a wider max-w for diffs). */
|
|
553
|
+
contentClassName?: string | undefined;
|
|
554
|
+
confirmLabel?: string | undefined;
|
|
555
|
+
/**
|
|
556
|
+
* `null` hides the cancel button entirely — for acknowledge-only dialogs
|
|
557
|
+
* where there is nothing to cancel. Anything else labels it.
|
|
558
|
+
*/
|
|
559
|
+
cancelLabel?: string | null | undefined;
|
|
560
|
+
variant?: "default" | "destructive" | undefined;
|
|
561
|
+
busy?: boolean | undefined;
|
|
562
|
+
/**
|
|
563
|
+
* Blocks confirming without pretending work is in flight. For a dialog whose
|
|
564
|
+
* `content` asks the user something the action cannot proceed without — the
|
|
565
|
+
* choice is missing, not loading — `busy` would show a misleading spinner.
|
|
566
|
+
*/
|
|
567
|
+
confirmDisabled?: boolean | undefined;
|
|
568
|
+
/**
|
|
569
|
+
* Explicit portal target. Default (undefined): the container injected by
|
|
570
|
+
* `PortalContainerProvider`, else `document.body`. Hosts with retargeting
|
|
571
|
+
* needs (a popped-out browser window whose dialog must render in THAT
|
|
572
|
+
* window's document) may still pass the element directly.
|
|
573
|
+
*/
|
|
574
|
+
portalContainer?: HTMLElement | null | undefined;
|
|
575
|
+
onConfirm: () => void | Promise<void>;
|
|
576
|
+
}
|
|
577
|
+
/**
|
|
578
|
+
* Drop-in replacement for `window.confirm`. Use this anywhere you would
|
|
579
|
+
* otherwise reach for a browser-level confirm dialog.
|
|
580
|
+
*/
|
|
581
|
+
declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
|
|
582
|
+
|
|
583
|
+
declare function ConfirmDialogHost(): React.JSX.Element;
|
|
584
|
+
|
|
481
585
|
/**
|
|
482
586
|
* ContextMenu — the right-click menu primitive.
|
|
483
587
|
*
|
|
@@ -1788,4 +1892,4 @@ declare const ALL_MOTION_CLASSES: readonly ["matrx-motion-overlay", "matrx-motio
|
|
|
1788
1892
|
*/
|
|
1789
1893
|
declare const FORBIDDEN_HOST_MOTION_UTILITIES: readonly ["animate-in", "animate-out", "fade-in", "fade-out", "zoom-in", "zoom-out", "slide-in-from", "slide-out-to", "animate-accordion", "animate-slide-down", "animate-slide-up", "animate-pulse", "animate-spin"];
|
|
1790
1894
|
|
|
1791
|
-
export { ALL_MOTION_CLASSES, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, type CollapsibleContentProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, Dialog, DialogClose, DialogContent, DialogContentPrimitive, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerContentPrimitive, type DrawerContentProps, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, FORBIDDEN_HOST_MOTION_UTILITIES, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSize, RadixDialogModalProvider, type RadixDialogModalProviderProps, ResizableHandle, type ResizableHandleProps, type ResizableHandleSize, ResizablePanel, ResizablePanelGroup, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Switch, type SwitchProps, type SwitchSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseScrollFadeResult, alertVariants, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, toggleVariants, useAccordionSize, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
|
|
1895
|
+
export { ALL_MOTION_CLASSES, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, type CollapsibleContentProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, ConfirmDialogHost, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, Dialog, DialogClose, DialogContent, DialogContentPrimitive, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerContentPrimitive, type DrawerContentProps, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, FORBIDDEN_HOST_MOTION_UTILITIES, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSize, RadixDialogModalProvider, type RadixDialogModalProviderProps, ResizableHandle, type ResizableHandleProps, type ResizableHandleSize, ResizablePanel, ResizablePanelGroup, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Switch, type SwitchProps, type SwitchSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseScrollFadeResult, alertVariants, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, toggleVariants, useAccordionSize, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -478,6 +478,110 @@ declare const CommandShortcut: {
|
|
|
478
478
|
displayName: string;
|
|
479
479
|
};
|
|
480
480
|
|
|
481
|
+
/**
|
|
482
|
+
* ConfirmDialog — the `window.confirm` replacement, declarative half.
|
|
483
|
+
*
|
|
484
|
+
* WHY IT LIVES HERE AND NOT IN `@ai-matrx/kit` (census row 19i, decided by the
|
|
485
|
+
* package-graph ruling of 2026-09-07, on the row-20a Tooltip precedent).
|
|
486
|
+
*
|
|
487
|
+
* kit shipped this dialog with its own inlined AlertDialog, its own inlined
|
|
488
|
+
* button class strings, a hardcoded 80%-opaque black scrim, and
|
|
489
|
+
* `data-[state=open]:animate-in … zoom-in-95 … slide-in-from-top-[48%]` —
|
|
490
|
+
* host-plugin utilities `tailwindcss-animate`/`tw-animate-css` supply and a
|
|
491
|
+
* package cannot ship. kit ships NO stylesheet at all, so in three of the four
|
|
492
|
+
* consumers the most consequential surface in the app (the one standing
|
|
493
|
+
* between a user and a destroyed thing) appeared with no animation, no error,
|
|
494
|
+
* and a scrim that ignored the theme. kit could not import the fix:
|
|
495
|
+
* `@ai-matrx/design-system` depends on `@ai-matrx/kit`, so importing back is a
|
|
496
|
+
* cycle; giving kit its own sheet would invent a second required-CSS contract
|
|
497
|
+
* no consumer performs (the C26 silent host contract, one layer down).
|
|
498
|
+
*
|
|
499
|
+
* The resolution is the one row 20a already proved: the surface moves to the
|
|
500
|
+
* package that owns the surface. This file is built on THIS package's
|
|
501
|
+
* `AlertDialog` — so it inherits, for free and forever:
|
|
502
|
+
*
|
|
503
|
+
* - the package motion layer (`matrx-motion-overlay` / `matrx-motion-dialog`),
|
|
504
|
+
* whose rules ship in `styles.css` and are proven present in the tarball;
|
|
505
|
+
* - `--matrx-overlay-scrim`, a token that answers to the host's theme,
|
|
506
|
+
* instead of an opaque black literal;
|
|
507
|
+
* - AlertDialog ruling 3 — clamped to `max-h-[85dvh]`, scrolling inside
|
|
508
|
+
* itself, with a sticky footer. **This is what makes the consequence-first
|
|
509
|
+
* copy law survivable**: a confirmation that names everything it is about
|
|
510
|
+
* to destroy can be long, and in kit's copy a long one pushed Cancel and
|
|
511
|
+
* Continue below the fold of a short viewport with no backdrop dismissal —
|
|
512
|
+
* a dead end on a destructive action;
|
|
513
|
+
* - `buttonVariants` as the ONE source of button appearance, including the
|
|
514
|
+
* 44px coarse-pointer target;
|
|
515
|
+
* - `PortalContainerProvider`, so a dialog opened inside a popped-out window
|
|
516
|
+
* panel renders in THAT window's document.
|
|
517
|
+
*
|
|
518
|
+
* kit keeps `./confirm-opener` — the pure, React-free imperative `confirm()`
|
|
519
|
+
* and its `globalThis`-slotted host registry — and re-exports nothing of this.
|
|
520
|
+
* Consumers mount `<ConfirmDialogHost />` from here and call `confirm()` from
|
|
521
|
+
* there. See `confirm-host.tsx` for the join.
|
|
522
|
+
*
|
|
523
|
+
* BEHAVIOR IS THE KIT PORT, VERBATIM. Every prop, default and interaction is
|
|
524
|
+
* unchanged; only the chrome underneath it is the package's.
|
|
525
|
+
*
|
|
526
|
+
* Pattern: hold the pending target in state, render `<ConfirmDialog />` once at
|
|
527
|
+
* the bottom of the component, and open it by setting the target. When busy
|
|
528
|
+
* state is meaningful (a network delete that should hold the dialog open with a
|
|
529
|
+
* spinner), use THIS component inline; the imperative `confirm()` closes
|
|
530
|
+
* immediately on click.
|
|
531
|
+
*/
|
|
532
|
+
|
|
533
|
+
interface ConfirmDialogProps {
|
|
534
|
+
open: boolean;
|
|
535
|
+
onOpenChange: (open: boolean) => void;
|
|
536
|
+
title: React.ReactNode;
|
|
537
|
+
/**
|
|
538
|
+
* THE CONSEQUENCE. Per the platform's destructive-and-expensive-actions law,
|
|
539
|
+
* a confirmation must name what is lost, what is duplicated, and/or what it
|
|
540
|
+
* costs — "Are you sure?" is not a confirmation. This renders as the dialog's
|
|
541
|
+
* accessible description, so a screen-reader user is told the consequence
|
|
542
|
+
* too, and it is never clamped or truncated.
|
|
543
|
+
*/
|
|
544
|
+
description?: React.ReactNode | undefined;
|
|
545
|
+
/**
|
|
546
|
+
* Rich body rendered between the header and the footer, OUTSIDE the
|
|
547
|
+
* description `<p>` — use for block-level content (diffs, previews, lists of
|
|
548
|
+
* exactly what is about to be deleted) that would be invalid HTML inside
|
|
549
|
+
* `description`.
|
|
550
|
+
*/
|
|
551
|
+
content?: React.ReactNode | undefined;
|
|
552
|
+
/** Extra classes for the dialog content (e.g. a wider max-w for diffs). */
|
|
553
|
+
contentClassName?: string | undefined;
|
|
554
|
+
confirmLabel?: string | undefined;
|
|
555
|
+
/**
|
|
556
|
+
* `null` hides the cancel button entirely — for acknowledge-only dialogs
|
|
557
|
+
* where there is nothing to cancel. Anything else labels it.
|
|
558
|
+
*/
|
|
559
|
+
cancelLabel?: string | null | undefined;
|
|
560
|
+
variant?: "default" | "destructive" | undefined;
|
|
561
|
+
busy?: boolean | undefined;
|
|
562
|
+
/**
|
|
563
|
+
* Blocks confirming without pretending work is in flight. For a dialog whose
|
|
564
|
+
* `content` asks the user something the action cannot proceed without — the
|
|
565
|
+
* choice is missing, not loading — `busy` would show a misleading spinner.
|
|
566
|
+
*/
|
|
567
|
+
confirmDisabled?: boolean | undefined;
|
|
568
|
+
/**
|
|
569
|
+
* Explicit portal target. Default (undefined): the container injected by
|
|
570
|
+
* `PortalContainerProvider`, else `document.body`. Hosts with retargeting
|
|
571
|
+
* needs (a popped-out browser window whose dialog must render in THAT
|
|
572
|
+
* window's document) may still pass the element directly.
|
|
573
|
+
*/
|
|
574
|
+
portalContainer?: HTMLElement | null | undefined;
|
|
575
|
+
onConfirm: () => void | Promise<void>;
|
|
576
|
+
}
|
|
577
|
+
/**
|
|
578
|
+
* Drop-in replacement for `window.confirm`. Use this anywhere you would
|
|
579
|
+
* otherwise reach for a browser-level confirm dialog.
|
|
580
|
+
*/
|
|
581
|
+
declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
|
|
582
|
+
|
|
583
|
+
declare function ConfirmDialogHost(): React.JSX.Element;
|
|
584
|
+
|
|
481
585
|
/**
|
|
482
586
|
* ContextMenu — the right-click menu primitive.
|
|
483
587
|
*
|
|
@@ -1788,4 +1892,4 @@ declare const ALL_MOTION_CLASSES: readonly ["matrx-motion-overlay", "matrx-motio
|
|
|
1788
1892
|
*/
|
|
1789
1893
|
declare const FORBIDDEN_HOST_MOTION_UTILITIES: readonly ["animate-in", "animate-out", "fade-in", "fade-out", "zoom-in", "zoom-out", "slide-in-from", "slide-out-to", "animate-accordion", "animate-slide-down", "animate-slide-up", "animate-pulse", "animate-spin"];
|
|
1790
1894
|
|
|
1791
|
-
export { ALL_MOTION_CLASSES, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, type CollapsibleContentProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, Dialog, DialogClose, DialogContent, DialogContentPrimitive, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerContentPrimitive, type DrawerContentProps, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, FORBIDDEN_HOST_MOTION_UTILITIES, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSize, RadixDialogModalProvider, type RadixDialogModalProviderProps, ResizableHandle, type ResizableHandleProps, type ResizableHandleSize, ResizablePanel, ResizablePanelGroup, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Switch, type SwitchProps, type SwitchSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseScrollFadeResult, alertVariants, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, toggleVariants, useAccordionSize, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
|
|
1895
|
+
export { ALL_MOTION_CLASSES, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, type CollapsibleContentProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, ConfirmDialogHost, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, Dialog, DialogClose, DialogContent, DialogContentPrimitive, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerContentPrimitive, type DrawerContentProps, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, FORBIDDEN_HOST_MOTION_UTILITIES, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSize, RadixDialogModalProvider, type RadixDialogModalProviderProps, ResizableHandle, type ResizableHandleProps, type ResizableHandleSize, ResizablePanel, ResizablePanelGroup, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Switch, type SwitchProps, type SwitchSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseScrollFadeResult, alertVariants, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, toggleVariants, useAccordionSize, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
|