@caratlogic/design-system 0.1.48 → 0.1.49

package/dist/index.esm.js

@@ -42711,7 +42711,16 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', inset && 'pl-8', className), ...props, children: [children, jsx(ChevronRight, { className: "ml-auto", "aria-hidden": "true" })] })));
+/**
+ * A disabled item ignores the pointer, so the tooltip hangs off a wrapper.
+ * Without a reason, a greyed-out item reads as a bug.
+ */
+function withDisabledReason(item, disabled, reason) {
+    if (!disabled || !reason)
+        return item;
+    return (jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { className: "cursor-not-allowed", children: item }) }), jsx(TooltipContent, { side: "left", children: reason })] }) }));
+}
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, disabledReason, ...props }, ref) => withDisabledReason(jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', inset && 'pl-8', className), ...props, children: [children, jsx(ChevronRight, { className: "ml-auto", "aria-hidden": "true" })] }), props.disabled, disabledReason));
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg flex flex-col gap-1 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props })));
@@ -42719,7 +42728,7 @@ DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 8, ...props }, ref) => (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-1 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn('relative flex cursor-pointer select-none items-center gap-2 rounded-sm p-2 text-sm leading-5 outline-none transition-colors focus:bg-secondary dark:focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', inset && 'pl-8', className), ...props })));
+const DropdownMenuItem = React.forwardRef(({ className, inset, disabledReason, ...props }, ref) => withDisabledReason(jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn('relative flex cursor-pointer select-none items-center gap-2 rounded-sm p-2 text-sm leading-5 outline-none transition-colors focus:bg-secondary dark:focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', inset && 'pl-8', className), ...props }), props.disabled, disabledReason));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('relative flex cursor-pointer select-none items-center gap-2 rounded-sm p-2 pl-8 text-sm leading-5 outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), checked: checked, ...props, children: [jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(Check, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName =