@ai-matrx/design-system 0.10.1 → 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 +64 -74
- package/README.md +20 -1
- package/dist/index.cjs +399 -297
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +106 -30
- package/dist/index.d.ts +106 -30
- package/dist/index.js +436 -331
- package/dist/index.js.map +1 -1
- package/dist/styles.css +10 -59
- package/dist/tokens.css +0 -5
- 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
|
*
|
|
@@ -1750,36 +1854,8 @@ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProp
|
|
|
1750
1854
|
*/
|
|
1751
1855
|
/** Modal scrims: Dialog, AlertDialog, Sheet, CommandDialog. Fade only. */
|
|
1752
1856
|
declare const MOTION_OVERLAY = "matrx-motion-overlay";
|
|
1753
|
-
/** The centred dialog card. Fades and scales
|
|
1857
|
+
/** The centred dialog card. Fades and scales, ending on the `-50%` centring. */
|
|
1754
1858
|
declare const MOTION_DIALOG = "matrx-motion-dialog";
|
|
1755
|
-
/**
|
|
1756
|
-
* THE CENTRING OF A CENTRED DIALOG CARD — package-owned, in the `translate`
|
|
1757
|
-
* property, and NEVER a Tailwind `translate-x-[-50%] translate-y-[-50%]` pair.
|
|
1758
|
-
*
|
|
1759
|
-
* Those utilities do not compile to the same thing in every host: Tailwind v3
|
|
1760
|
-
* writes them into `transform`, Tailwind v4 writes them into the independent
|
|
1761
|
-
* `translate` property, which COMPOSES with `transform` instead of being
|
|
1762
|
-
* replaced by it. 0.10.0's keyframes restated the centring inside `transform`,
|
|
1763
|
-
* which was harmless on v3 and doubled the centring on v4 — the card flew in
|
|
1764
|
-
* from off the top-left of the viewport for the animation's whole duration and
|
|
1765
|
-
* snapped into place at the end (fixed in 0.10.1).
|
|
1766
|
-
*
|
|
1767
|
-
* Owning it here means one spelling that reads the same on both, and it frees
|
|
1768
|
-
* `transform` so the keyframes carry ONLY the delta. Put this on every centred
|
|
1769
|
-
* surface UNCONDITIONALLY — it is geometry, so unlike {@link MOTION_DIALOG} it
|
|
1770
|
-
* must survive `animated={false}`. Its rule ships in `styles.css`.
|
|
1771
|
-
*/
|
|
1772
|
-
declare const CENTERED_DIALOG = "matrx-dialog-centered";
|
|
1773
|
-
/**
|
|
1774
|
-
* The resting gap between a `popper`-positioned surface and its trigger, for
|
|
1775
|
-
* the primitives that want one (today: `Select`). Same law and same reason as
|
|
1776
|
-
* {@link CENTERED_DIALOG} — a position an animated surface holds AT REST is
|
|
1777
|
-
* the `translate` property's job, never a Tailwind translate utility, because
|
|
1778
|
-
* those land in `transform` on a v3 host and in `translate` on a v4 one while
|
|
1779
|
-
* the keyframes animate `transform` either way. Sizes from
|
|
1780
|
-
* `--matrx-popper-offset`; keys off Radix's `data-side`.
|
|
1781
|
-
*/
|
|
1782
|
-
declare const POPPER_OFFSET = "matrx-popper-offset";
|
|
1783
1859
|
/** The mobile Dialog / CommandDialog bottom sheet. Slides up and fades. */
|
|
1784
1860
|
declare const MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
|
|
1785
1861
|
/**
|
|
@@ -1816,4 +1892,4 @@ declare const ALL_MOTION_CLASSES: readonly ["matrx-motion-overlay", "matrx-motio
|
|
|
1816
1892
|
*/
|
|
1817
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"];
|
|
1818
1894
|
|
|
1819
|
-
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,
|
|
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
|
*
|
|
@@ -1750,36 +1854,8 @@ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProp
|
|
|
1750
1854
|
*/
|
|
1751
1855
|
/** Modal scrims: Dialog, AlertDialog, Sheet, CommandDialog. Fade only. */
|
|
1752
1856
|
declare const MOTION_OVERLAY = "matrx-motion-overlay";
|
|
1753
|
-
/** The centred dialog card. Fades and scales
|
|
1857
|
+
/** The centred dialog card. Fades and scales, ending on the `-50%` centring. */
|
|
1754
1858
|
declare const MOTION_DIALOG = "matrx-motion-dialog";
|
|
1755
|
-
/**
|
|
1756
|
-
* THE CENTRING OF A CENTRED DIALOG CARD — package-owned, in the `translate`
|
|
1757
|
-
* property, and NEVER a Tailwind `translate-x-[-50%] translate-y-[-50%]` pair.
|
|
1758
|
-
*
|
|
1759
|
-
* Those utilities do not compile to the same thing in every host: Tailwind v3
|
|
1760
|
-
* writes them into `transform`, Tailwind v4 writes them into the independent
|
|
1761
|
-
* `translate` property, which COMPOSES with `transform` instead of being
|
|
1762
|
-
* replaced by it. 0.10.0's keyframes restated the centring inside `transform`,
|
|
1763
|
-
* which was harmless on v3 and doubled the centring on v4 — the card flew in
|
|
1764
|
-
* from off the top-left of the viewport for the animation's whole duration and
|
|
1765
|
-
* snapped into place at the end (fixed in 0.10.1).
|
|
1766
|
-
*
|
|
1767
|
-
* Owning it here means one spelling that reads the same on both, and it frees
|
|
1768
|
-
* `transform` so the keyframes carry ONLY the delta. Put this on every centred
|
|
1769
|
-
* surface UNCONDITIONALLY — it is geometry, so unlike {@link MOTION_DIALOG} it
|
|
1770
|
-
* must survive `animated={false}`. Its rule ships in `styles.css`.
|
|
1771
|
-
*/
|
|
1772
|
-
declare const CENTERED_DIALOG = "matrx-dialog-centered";
|
|
1773
|
-
/**
|
|
1774
|
-
* The resting gap between a `popper`-positioned surface and its trigger, for
|
|
1775
|
-
* the primitives that want one (today: `Select`). Same law and same reason as
|
|
1776
|
-
* {@link CENTERED_DIALOG} — a position an animated surface holds AT REST is
|
|
1777
|
-
* the `translate` property's job, never a Tailwind translate utility, because
|
|
1778
|
-
* those land in `transform` on a v3 host and in `translate` on a v4 one while
|
|
1779
|
-
* the keyframes animate `transform` either way. Sizes from
|
|
1780
|
-
* `--matrx-popper-offset`; keys off Radix's `data-side`.
|
|
1781
|
-
*/
|
|
1782
|
-
declare const POPPER_OFFSET = "matrx-popper-offset";
|
|
1783
1859
|
/** The mobile Dialog / CommandDialog bottom sheet. Slides up and fades. */
|
|
1784
1860
|
declare const MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
|
|
1785
1861
|
/**
|
|
@@ -1816,4 +1892,4 @@ declare const ALL_MOTION_CLASSES: readonly ["matrx-motion-overlay", "matrx-motio
|
|
|
1816
1892
|
*/
|
|
1817
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"];
|
|
1818
1894
|
|
|
1819
|
-
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,
|
|
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 };
|