@caratlogic/design-system 0.1.31 → 0.1.33

package/dist/ui.esm.js

@@ -2868,7 +2868,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 });
 function Button({ className, variant, size, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+    return (jsx(Comp, { "data-slot": "button", "data-variant": variant ?? 'default', className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 
 function Card({ className, ...props }) {
@@ -2993,30 +2993,74 @@ const DialogOverlay = t.forwardRef(({ className, ...props }, ref) => (jsx(Dialog
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
         'fixed inset-0 z-50 bg-black/50', className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = t.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn('bg-background fixed top-[50%] left-[50%] z-50 grid ' +
-                'w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] ' +
-                'gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg ' +
+const DIALOG_WIDTH = {
+    default: '32rem',
+    wide: '50rem',
+};
+/** Every dialog stops growing here; taller content scrolls inside it. */
+const DIALOG_MAX_HEIGHT = 'min(85vh, 45rem)';
+const DialogContent = t.forwardRef(({ className, children, hideCloseButton, size = 'default', style, ...props }, ref) => (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn('bg-card fixed top-[50%] left-[50%] z-50 grid ' +
+                'translate-x-[-50%] translate-y-[-50%] ' +
+                'gap-4 overflow-y-auto overscroll-contain rounded-2xl border border-border p-6 shadow-xl duration-200 ' +
+                // A footer closes the panel itself; sticky can't sit in the padding a negative margin would bleed into.
+                'has-[[data-slot=dialog-footer]]:pb-0 ' +
                 'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
                 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), ...props, children: [children, !hideCloseButton && (jsxs(DialogPrimitive.Close, { className: cn('absolute top-4 right-4 rounded-xs opacity-70 transition-opacity ' +
-                        'hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring ' +
-                        'focus:ring-offset-2 ring-offset-background disabled:pointer-events-none ' +
-                        '[&_svg]:pointer-events-none [&_svg]:shrink-0 ' +
+                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), style: {
+                ...style,
+                width: 'calc(100vw - 2rem)',
+                maxWidth: DIALOG_WIDTH[size],
+                maxHeight: DIALOG_MAX_HEIGHT,
+            }, ...props, children: [children, !hideCloseButton && (jsxs(DialogPrimitive.Close, { className: cn('absolute top-5 right-5 inline-flex size-7 items-center justify-center rounded-md ' +
+                        'text-muted-foreground transition-colors hover:bg-muted hover:text-foreground ' +
+                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
+                        'disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 ' +
                         "[&_svg:not([class*='size-'])]:size-4"), children: [jsx(X$1, {}), jsx("span", { className: "sr-only", children: "Close" })] }))] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-// Header
-function DialogHeader({ className, ...props }) {
-    return (jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+const DIALOG_ICON_TONE = {
+    primary: 'bg-primary/10 text-primary dark:bg-primary/20',
+    neutral: 'bg-muted text-muted-foreground',
+    warning: 'bg-badge-amber-bg text-badge-amber-text',
+    destructive: 'bg-badge-destructive-bg text-destructive',
+};
+/** The tinted tile that names a dialog's action; shared by every dialog header. */
+function DialogIcon({ tone = 'primary', className, children, }) {
+    return (jsx("span", { "aria-hidden": true, className: cn(
+        // 44px = the title's 24px line + the subtitle's 20px line, so the tile spans both.
+        'flex size-11 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5', DIALOG_ICON_TONE[tone], className), children: children }));
+}
+function DialogHeader({ className, icon, iconTone, children, ...props }) {
+    if (icon) {
+        return (jsxs("div", { "data-slot": "dialog-header", 
+            // A lone title centres on the icon; with a subtitle the pair starts at the icon's top.
+            className: cn('flex flex-row items-center gap-3.5 pr-8 text-left has-[[data-slot=dialog-description]]:items-start', className), ...props, children: [jsx(DialogIcon, { tone: iconTone, children: icon }), jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children })] }));
+    }
+    return (jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col pr-8 text-left', className), ...props, children: children }));
 }
 // Footer
+/** Neutral footer buttons get the card surface so they stand out from the tinted footer band. */
+const DIALOG_FOOTER_BUTTONS = '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:border ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:border-border ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:bg-card ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:shadow-xs ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:hover:bg-muted ' +
+    // The outline variant forces its own dark fill; keep every footer secondary button on the same card surface.
+    'dark:[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:!bg-card ' +
+    'dark:[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:!border-border ' +
+    'dark:[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:hover:!bg-muted';
 function DialogFooter({ className, ...props }) {
-    return (jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+    return (jsx("div", { "data-slot": "dialog-footer", 
+        // Bleeds to the dialog's side edges as a tinted band; dialogs that drop the default p-6 reset the margins.
+        className: cn(
+        // Sticky so the actions stay in view while a long body scrolls.
+        'sticky bottom-0 z-10 -mx-6 mt-1 flex shrink-0 flex-col-reverse gap-2 border-t border-border bg-[color-mix(in_srgb,var(--muted)_40%,var(--card))] px-6 py-4 ' +
+            'sm:flex-row sm:items-center sm:justify-end', DIALOG_FOOTER_BUTTONS, className), ...props }));
 }
 // Title
-const DialogTitle = t.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: cn('text-lg font-semibold leading-none', className), ...props })));
+const DialogTitle = t.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: cn('text-lg font-semibold leading-6 text-foreground', className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 // Description
-const DialogDescription = t.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn('text-sm text-muted-foreground', className), ...props })));
+const DialogDescription = t.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn('text-sm leading-5 text-muted-foreground', className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // ---------- Command Wrapper ----------
@@ -3422,5 +3466,5 @@ collisionPadding = 8, ...props }, ref) {
                     animate-in fade-in-0 zoom-in-95 ${className || ''}`, ...props }) }));
 });
 
-export { Alert, AlertDescription, AlertRoot, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, MultiSelect, MultiSelectContent, MultiSelectGroup, MultiSelectItem, MultiSelectSeparator, MultiSelectTrigger, MultiSelectValue, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants };
+export { Alert, AlertDescription, AlertRoot, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DIALOG_FOOTER_BUTTONS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, MultiSelect, MultiSelectContent, MultiSelectGroup, MultiSelectItem, MultiSelectSeparator, MultiSelectTrigger, MultiSelectValue, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants };
 //# sourceMappingURL=ui.esm.js.map