@assure-one/design-system 1.45.0 → 1.46.0

package/dist/{chunk-XNJP5LKC.js → chunk-JJ5JFA56.js}

@@ -1,4 +1,4 @@
-import { stateAttributes, slot, chipAnatomy, Pressable, CONTROL_GAP_CLASSES, EN_MESSAGES, microInteractions, listItemClasses, groupHeadingClasses, useDsMessages, withPortalContainer, Backdrop, sheetAnatomy, deprecate, OverlaySurface, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, OverlayTitle, OverlayDescription, Input, Textarea, Select, FileUpload, FileChip, Button, Checkbox, Tooltip, TooltipTrigger, TooltipContent, useMergedRefs, TooltipProvider, sidebarAnatomy, Slot, Avatar, DropdownMenu, DropdownMenuTrigger, sidebarBrandSwitcherAnatomy, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, buttonBase, CONTROL_SIZE_CLASSES, useFieldControl, useId as useId$1, useControllableState, Popover, PopoverAnchor, comboboxAnatomy, Spinner, IconButton, PopoverContent, LIST_SEPARATOR, listItemAttributes, optionElementId, FormBridge, useLinkComponent, useImageComponent, OverlayHeader, OverlayFooter, LIST_ITEM_INDICATOR_WELL } from './chunk-ZS5VLSJW.js';
+import { stateAttributes, slot, chipAnatomy, Pressable, CONTROL_GAP_CLASSES, EN_MESSAGES, microInteractions, listItemClasses, groupHeadingClasses, useDsMessages, withPortalContainer, Backdrop, sheetAnatomy, deprecate, OverlaySurface, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, OverlayTitle, OverlayDescription, Input, Textarea, Select, FileUpload, FileChip, Button, Checkbox, Tooltip, TooltipTrigger, TooltipContent, useMergedRefs, TooltipProvider, sidebarAnatomy, Slot, Avatar, DropdownMenu, DropdownMenuTrigger, sidebarBrandSwitcherAnatomy, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, buttonBase, CONTROL_SIZE_CLASSES, useFieldControl, useId as useId$1, useControllableState, Popover, PopoverAnchor, comboboxAnatomy, Spinner, IconButton, PopoverContent, LIST_SEPARATOR, listItemAttributes, optionElementId, FormBridge, useLinkComponent, useImageComponent, OverlayHeader, OverlayFooter, LIST_ITEM_INDICATOR_WELL } from './chunk-IIBDSTOG.js';
 import { cn, XIcon, CheckIcon, EyeIcon, DownloadIcon, PhoneIcon, MailIcon, GlobeIcon, HomeIcon, ChevronLeftIcon, ChevronRightIcon, ReceiptIcon, RotateCcwIcon, CreditCardIcon, LockIcon, FileTextIcon, PlayIcon, InfoIcon, ClockIcon, PenSignIcon, TrashIcon, PlusIcon, CheckCircleSolidIcon, HelpCircleIcon, MinusIcon, PanelLeftCloseIcon, PanelLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronDownIcon } from './chunk-ARCWF2S3.js';
 import { parseHexColor, contrastRatio, WHITE, formatHexColor, darkenUntilContrast } from './chunk-EUHGZA6Q.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -1094,8 +1094,9 @@ var CollapsibleTrigger = React6.forwardRef(function CollapsibleTrigger2({ classN
     {
       ref,
       className: cn(
-        "ds:flex ds:w-full ds:items-center",
+        "ds:flex ds:w-full ds:cursor-pointer ds:items-center",
         "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+        "ds:disabled:cursor-not-allowed",
         className
       ),
       ...props
@@ -3415,7 +3416,19 @@ var Sidebar = React6.forwardRef(function Sidebar2({
           "ds:group/sidebar group/sidebar ds:scrollbar-thin ds:flex ds:shrink-0 ds:flex-col ds:overflow-y-auto ds:px-3 ds:pt-4 ds:pb-4",
           // Classic: full-height column flush to the left edge with a right
           // rule. The legacy look.
-          !isFloating && "ds:h-dvh ds:border-rule ds:bg-bg-2 ds:border-r",
+          !isFloating && "ds:h-dvh ds:border-rule ds:border-r",
+          !isFloating && (isFlush ? "ds:bg-surface" : "ds:bg-bg-2"),
+          // Flush against a `bg-bg` canvas (Shell's own background) `bg-bg-2`
+          // (--color-bg-2, #f1f3f8 light / #141416 dark) sits only ~1.06:1 off
+          // the page (#f7f8fa / #0a0a0b) — the two regions read as one grey
+          // field with a hairline in the middle, not two surfaces. `surface`
+          // (white / #16161a) against the same canvas is the ~2–3x bigger
+          // luminance step the classic Notion/Linear sidebar convention reads
+          // on, and it is the token every card in the product already sits
+          // on, so the column now looks like the same kind of "raised" surface
+          // as the content it fronts, not a third, unrelated grey. `classic`
+          // and `floating` are unchanged (visual change note: the sidebar
+          // background change below is for `variant="flush"` only).
           // Floating: a detached, rounded card inset from the viewport with a
           // soft shadow — the modern SaaS pattern. The clear figure/ground gap
           // (Aesthetic-Usability) reads as its own surface above the canvas.
@@ -3482,7 +3495,7 @@ var SidebarTrigger = React6.forwardRef(
         },
         ...slot(sidebarAnatomy, "trigger"),
         className: cn(
-          "ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+          "ds:inline-flex ds:size-7 ds:shrink-0 ds:cursor-pointer ds:items-center ds:justify-center ds:rounded-md",
           "ds:text-fg-3 ds:hover:bg-bg-3 ds:hover:text-fg",
           "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
           "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
@@ -3531,7 +3544,7 @@ var SidebarPinButton = React6.forwardRef(
         ...slot(sidebarAnatomy, "pin"),
         ...stateAttributes({ selected: isPinned }),
         className: cn(
-          "ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+          "ds:inline-flex ds:size-7 ds:shrink-0 ds:cursor-pointer ds:items-center ds:justify-center ds:rounded-md",
           "ds:text-fg-4 ds:hover:bg-bg-3 ds:hover:text-fg ds:aria-pressed:text-fg",
           "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
           "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -3561,7 +3574,10 @@ var SidebarBrand = React6.forwardRef(
           // pass behind it instead of over it. `data-scrolled` is only ever
           // set while flush (see <Sidebar>), so the hairline needs no variant
           // check of its own — one derived attribute, one rule.
-          "ds:group-data-[variant=flush]/sidebar:bg-bg-2 ds:group-data-[variant=flush]/sidebar:sticky ds:group-data-[variant=flush]/sidebar:top-0 ds:group-data-[variant=flush]/sidebar:z-[var(--z-sticky)]",
+          // Sticky row's fill matches the aside's own flush background
+          // (`bg-surface`, W-cursor-sidebar-tooltips) so scrolled nav rows
+          // disappear behind it rather than showing through.
+          "ds:group-data-[variant=flush]/sidebar:bg-surface ds:group-data-[variant=flush]/sidebar:sticky ds:group-data-[variant=flush]/sidebar:top-0 ds:group-data-[variant=flush]/sidebar:z-[var(--z-sticky)]",
           "ds:group-data-[variant=flush]/sidebar:border-b ds:group-data-[variant=flush]/sidebar:border-transparent ds:group-data-[variant=flush]/sidebar:transition-colors ds:group-data-[variant=flush]/sidebar:duration-[var(--duration-normal)] ds:group-data-[variant=flush]/sidebar:ease-[var(--ease-out-quart)] ds:group-data-[variant=flush]/sidebar:motion-reduce:transition-none",
           "ds:group-data-[scrolled=true]/sidebar:border-rule",
           className
@@ -3698,7 +3714,7 @@ var SidebarLink = React6.forwardRef(
         "aria-label": accessibleLabel,
         ...slot(sidebarAnatomy, "link"),
         className: cn(
-          "ds:group/link ds:relative ds:mb-px ds:flex ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2.5 ds:py-1.5",
+          "ds:group/link ds:relative ds:mb-px ds:flex ds:cursor-pointer ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2.5 ds:py-1.5",
           "ds:text-fg-2 ds:text-[13px] ds:font-normal ds:no-underline",
           "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
           "ds:motion-reduce:transition-none",
@@ -3902,7 +3918,7 @@ var SidebarLinkGroup = React6.forwardRef(
     };
     const contentId = `${id}-content`;
     const bodyClassName = cn(
-      "ds:group/link ds:relative ds:flex ds:flex-1 ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2.5 ds:py-1.5",
+      "ds:group/link ds:relative ds:flex ds:flex-1 ds:cursor-pointer ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2.5 ds:py-1.5",
       "ds:text-fg-2 ds:text-[13px] ds:font-normal ds:no-underline",
       "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
       "ds:motion-reduce:transition-none",
@@ -3980,7 +3996,7 @@ var SidebarLinkGroup = React6.forwardRef(
                 onClick: handleChevronClick,
                 ...slot(sidebarAnatomy, "group-trigger"),
                 className: cn(
-                  "ds:ml-px ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+                  "ds:ml-px ds:inline-flex ds:size-7 ds:shrink-0 ds:cursor-pointer ds:items-center ds:justify-center ds:rounded-md",
                   "ds:text-fg-4 ds:hover:bg-bg-3 ds:hover:text-fg-2",
                   "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
                   "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
@@ -4155,8 +4171,9 @@ var SidebarBrandSwitcher = React6.forwardRef(
             // Flush — mirrors <SidebarBrand>: pinned to the top of the
             // scrolling column, with a hairline that appears once the list
             // has scrolled. `data-scrolled` is only ever set while flush, so
-            // the hairline rule needs no variant check of its own.
-            "ds:group-data-[variant=flush]/sidebar:bg-bg-2 ds:group-data-[variant=flush]/sidebar:sticky ds:group-data-[variant=flush]/sidebar:top-0 ds:group-data-[variant=flush]/sidebar:z-[var(--z-sticky)]",
+            // the hairline rule needs no variant check of its own. Fill
+            // matches the aside's own flush background (`bg-surface`).
+            "ds:group-data-[variant=flush]/sidebar:bg-surface ds:group-data-[variant=flush]/sidebar:sticky ds:group-data-[variant=flush]/sidebar:top-0 ds:group-data-[variant=flush]/sidebar:z-[var(--z-sticky)]",
             "ds:group-data-[variant=flush]/sidebar:border-b ds:group-data-[variant=flush]/sidebar:border-transparent ds:group-data-[variant=flush]/sidebar:transition-colors ds:group-data-[variant=flush]/sidebar:duration-[var(--duration-normal)] ds:group-data-[variant=flush]/sidebar:ease-[var(--ease-out-quart)] ds:group-data-[variant=flush]/sidebar:motion-reduce:transition-none",
             "ds:group-data-[scrolled=true]/sidebar:border-rule",
             className
@@ -4173,7 +4190,7 @@ var SidebarBrandSwitcher = React6.forwardRef(
                     // the column edge while the inner padding holds the brand
                     // glyph at the same x-position as direct <SidebarBrand>
                     // children — same hover affordance, no glyph drift.
-                    "ds:group/brand-trigger ds:-ml-2 ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2 ds:rounded-md ds:py-1.5 ds:pr-1.5 ds:pl-2",
+                    "ds:group/brand-trigger ds:-ml-2 ds:flex ds:min-w-0 ds:flex-1 ds:cursor-pointer ds:items-center ds:gap-2 ds:rounded-md ds:py-1.5 ds:pr-1.5 ds:pl-2",
                     "ds:text-fg ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
                     // `aria-expanded` twin: a TooltipTrigger asChild ancestor can
                     // clobber this trigger's own `data-state` with the tooltip's
@@ -4397,5 +4414,5 @@ var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }
 BrandScope.displayName = "BrandScope";
 
 export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, BrandScope, BrandScopeProvider, Chip, ClientSelect, CmdkCompatContext, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComingSoon, DEFAULT_COMBOBOX_MESSAGES, Grid, Logo, PlainLink, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QUESTION_TYPES, QUESTION_TYPE_CONTRACT_VERSION, Questions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, assetPath, brandLabel, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState };
-//# sourceMappingURL=chunk-XNJP5LKC.js.map
-//# sourceMappingURL=chunk-XNJP5LKC.js.map
+//# sourceMappingURL=chunk-JJ5JFA56.js.map
+//# sourceMappingURL=chunk-JJ5JFA56.js.map