@acronis-platform/ui-react 0.53.0 → 0.55.0

package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-secondary.js","sources":["../../../../src/components/ui/sidebar-secondary/sidebar-secondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport {\n  ChevronDownIcon,\n  ChevronRightIcon,\n  SquareArrowUpRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Composable SidebarSecondary primitives mirroring the Figma \"SidebarSecondary\"\n// component set (node 2468:59502, variant expanded|collapsed). Every color and\n// metric is wired to a next-gen `--ui-sidebar-secondary-*` token from\n// @acronis-platform/tokens-pd — no hex, no invented tokens.\n//\n// Like SidebarPrimary, expanded/collapsed is a width-reflow state (not a panel\n// show/hide), modelled as a controlled/uncontrolled `expanded` prop (default\n// true) that sets `data-state=\"expanded|collapsed\"` on the root and is shared to\n// descendants via context. The collapsed rail replaces the section list with a\n// vertical breadcrumb (parent → separator → current page), toggled purely by the\n// `data-[state]` selectors so it is SSR-present and needs no JS branch.\n//\n// Menu-item color wiring DIVERGES from Primary (DESIGN §6.2): Secondary recolors\n// only the CONTAINER per selected/unselected; the icon and label use the shared\n// `--ui-sidebar-secondary-menu-item-global-{icon,label}-color-color` tokens\n// across both variants and every interaction state (the next-gen token sync\n// collapsed the former per-state idle/hover/active icon+label colors into a\n// single value each). So the cva base carries the global icon/label colors and\n// the two variants only swap the container fill.\n//\n// The Level-1 expandable disclosure (SidebarSecondaryMenuSub) is the canonical\n// Base UI Collapsible use — it gives `aria-expanded`/`aria-controls` for free and\n// per-row open state. The trigger gets `data-panel-open` when open, which rotates\n// the chevron.\n//\n// R6 (collapsed separator icon): resolved from the Figma node metadata — the\n// collapsed `iconSeparator` instance's mainComponent is \"ChevronRight\", so the\n// separator defaults to `ChevronRightIcon` (16px), tinted by\n// `--ui-sidebar-secondary-collapsed-icon-separator-color`. The disclosure chevron\n// uses `ChevronDownIcon` rotated via `data-panel-open`. The focus ring reuses the\n// shared `--ui-focus-brand` (no sidebar focus token exists — R1).\n\ninterface SidebarSecondaryContextValue {\n  expanded: boolean;\n  /** Flip the panel width — drives the controlled/uncontrolled `expanded` state. */\n  toggleExpanded: () => void;\n}\n\nconst SidebarSecondaryContext =\n  React.createContext<SidebarSecondaryContextValue | null>(null);\n\nfunction useSidebarSecondaryContext(): SidebarSecondaryContextValue {\n  // Default to expanded so parts render standalone (in isolation tests /\n  // stories) without a wrapping root; the toggle is a no-op outside a root.\n  return (\n    React.useContext(SidebarSecondaryContext) ?? {\n      expanded: true,\n      toggleExpanded: () => {},\n    }\n  );\n}\n\n/**\n * Controlled + uncontrolled boolean state (the Base UI idiom). When `controlled`\n * is provided it wins and the setter only emits the change callback; otherwise\n * the setter updates internal state. `onChange` is ALWAYS invoked with the next\n * value so a consumer can react in either mode.\n */\nfunction useControllableBoolean(\n  controlled: boolean | undefined,\n  defaultValue: boolean,\n  onChange?: (next: boolean) => void\n): [boolean, (next: boolean) => void] {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\n  const isControlled = controlled !== undefined;\n  const value = isControlled ? controlled : uncontrolled;\n  const setValue = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolled(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n  return [value, setValue];\n}\n\nexport interface SidebarSecondaryProps\n  extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Controlled expanded (rail width) state. */\n  expanded?: boolean;\n  /** Uncontrolled initial expanded state. Defaults to `true` (full width). */\n  defaultExpanded?: boolean;\n  /** Fires when the expanded state changes (e.g. a consumer toggle). */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Replace the rendered `<nav>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondary = React.forwardRef<HTMLElement, SidebarSecondaryProps>(\n  (\n    {\n      className,\n      expanded: expandedProp,\n      defaultExpanded = true,\n      onExpandedChange,\n      'aria-label': ariaLabel = 'Section navigation',\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [expanded, setExpanded] = useControllableBoolean(\n      expandedProp,\n      defaultExpanded,\n      onExpandedChange\n    );\n\n    // Collapse is driven by the consumer through the layout context — the\n    // `SidebarSecondaryCollapseTrigger` calls `toggleExpanded`, which updates\n    // uncontrolled state and always emits `onExpandedChange`. Controlled\n    // consumers ignore the internal state and react to the callback.\n    const context = React.useMemo<SidebarSecondaryContextValue>(\n      () => ({ expanded, toggleExpanded: () => setExpanded(!expanded) }),\n      [expanded, setExpanded]\n    );\n\n    const element = useRender({\n      render,\n      ref,\n      defaultTagName: 'nav',\n      props: mergeProps<'nav'>(\n        {\n          'aria-label': ariaLabel,\n          // `data-state` drives every collapsed/expanded token switch via\n          // attribute selectors; typed loosely because React's nav attribute\n          // map doesn't include arbitrary data-* keys as literals.\n          ...({ 'data-state': expanded ? 'expanded' : 'collapsed' } as Record<\n            string,\n            string\n          >),\n          className: cn(\n            'group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-r border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-right-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]',\n            className\n          ),\n          children,\n        },\n        props\n      ),\n    });\n\n    return (\n      <SidebarSecondaryContext.Provider value={context}>\n        {element}\n      </SidebarSecondaryContext.Provider>\n    );\n  }\n);\nSidebarSecondary.displayName = 'SidebarSecondary';\n\nexport interface SidebarSecondaryHeaderProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Heading text (or pass as children). */\n  label?: React.ReactNode;\n}\n\nconst SidebarSecondaryHeader = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryHeaderProps\n>(({ className, label, children, ...props }, ref) => (\n  // Hidden in collapsed mode — the CollapsedBreadcrumb's parent label carries the\n  // section context in the rail, so a truncated single-letter heading is omitted.\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center shrink-0',\n      'hidden group-data-[state=expanded]/sidebar:flex',\n      'px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]',\n      'group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]',\n      className\n    )}\n    {...props}\n  >\n    <h2 className=\"ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]\">\n      {label ?? children}\n    </h2>\n  </div>\n));\nSidebarSecondaryHeader.displayName = 'SidebarSecondaryHeader';\n\nconst SidebarSecondaryContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  // Expanded: the section list. Hidden in collapsed mode, where the\n  // CollapsedBreadcrumb sibling takes over.\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]',\n      'hidden group-data-[state=expanded]/sidebar:flex',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryContent.displayName = 'SidebarSecondaryContent';\n\nexport interface SidebarSecondaryCollapsedBreadcrumbProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** The parent section label (breadcrumbLabel). */\n  parentLabel: React.ReactNode;\n  /** The current page label (labelCurrentPage). */\n  currentLabel: React.ReactNode;\n  /** Separator between the two; defaults to a 16px ChevronRightIcon (R6). */\n  separator?: React.ReactNode;\n}\n\nconst SidebarSecondaryCollapsedBreadcrumb = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryCollapsedBreadcrumbProps\n>(({ className, parentLabel, currentLabel, separator, ...props }, ref) => (\n  // Shown only in collapsed mode — toggled by the same data-[state] selector so\n  // it stays in the DOM (SSR-present) with no JS branch. Stacked top→bottom:\n  // parent → separator → current page. In the ~48px rail the labels are rotated\n  // to read vertically (`writing-mode: vertical-rl`, glyphs tilted 90° clockwise,\n  // reading top-to-bottom) so long labels run down the rail instead of clipping;\n  // the separator chevron is turned to point down to match that flow.\n  <div\n    ref={ref}\n    className={cn(\n      // `flex-1` so the rail fills the space between the (hidden) header and the\n      // footer, keeping the collapse trigger pinned to the bottom; the breadcrumb\n      // content stays at the top of that space.\n      'flex flex-1 flex-col items-center',\n      'gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]',\n      'flex group-data-[state=expanded]/sidebar:hidden',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"ui-sidebar-secondary-collapsed-breadcrumb-label-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]\">\n      {parentLabel}\n    </span>\n    <span\n      aria-hidden=\"true\"\n      className=\"inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]\"\n    >\n      {separator ?? <ChevronRightIcon size={16} className=\"rotate-90\" />}\n    </span>\n    <span className=\"ui-sidebar-secondary-collapsed-label-current-page-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]\">\n      {currentLabel}\n    </span>\n  </div>\n));\nSidebarSecondaryCollapsedBreadcrumb.displayName =\n  'SidebarSecondaryCollapsedBreadcrumb';\n\nconst SidebarSecondaryFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col shrink-0',\n      'border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]',\n      'py-[var(--ui-sidebar-secondary-section-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryFooter.displayName = 'SidebarSecondaryFooter';\n\n// A section can be a static group (label + items) or an EXPANDABLE disclosure\n// (Figma Section `expandable=yes-*`): the label becomes a chevron toggle that\n// shows/hides the whole item list. Whether a section is expandable is shared to\n// its label + menu via this context (default: static), so the same `SectionLabel`\n// / `Menu` parts adapt without a separate component set.\ninterface SidebarSecondarySectionContextValue {\n  expandable: boolean;\n}\n\nconst SidebarSecondarySectionContext =\n  React.createContext<SidebarSecondarySectionContextValue>({ expandable: false });\n\nconst SECTION_STATIC: SidebarSecondarySectionContextValue = { expandable: false };\nconst SECTION_EXPANDABLE: SidebarSecondarySectionContextValue = { expandable: true };\n\nexport interface SidebarSecondarySectionProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Make the section a collapsible disclosure: the `SidebarSecondarySectionLabel`\n   * becomes a chevron toggle and the `SidebarSecondaryMenu` becomes its panel.\n   */\n  expandable?: boolean;\n  /** Controlled open state (expandable sections only). */\n  open?: boolean;\n  /** Uncontrolled initial open state (expandable sections only). Defaults to open. */\n  defaultOpen?: boolean;\n  /** Fires with the next open value when an expandable section toggles. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst SidebarSecondarySection = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondarySectionProps\n>(\n  (\n    { className, expandable = false, open, defaultOpen = true, onOpenChange, children, ...props },\n    ref\n  ) => {\n    // Sections are separated by vertical padding + the section label; the next-gen\n    // token sync removed the inter-section divider (no\n    // `--ui-sidebar-secondary-section-container-border-*` token survives).\n    const sectionClass = cn(\n      'flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]',\n      className\n    );\n\n    if (!expandable) {\n      return (\n        <SidebarSecondarySectionContext.Provider value={SECTION_STATIC}>\n          <div ref={ref} className={sectionClass} {...props}>\n            {children}\n          </div>\n        </SidebarSecondarySectionContext.Provider>\n      );\n    }\n\n    // Expandable: Base UI Collapsible owns the open state (controlled or\n    // uncontrolled) + the aria-expanded/aria-controls wiring on the trigger.\n    return (\n      <SidebarSecondarySectionContext.Provider value={SECTION_EXPANDABLE}>\n        <Collapsible.Root\n          ref={ref}\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          render={<div className={sectionClass} />}\n          {...props}\n        >\n          {children}\n        </Collapsible.Root>\n      </SidebarSecondarySectionContext.Provider>\n    );\n  }\n);\nSidebarSecondarySection.displayName = 'SidebarSecondarySection';\n\nexport interface SidebarSecondarySectionLabelProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Trailing header actions (e.g. a ghost `ButtonIcon`). Rendered outside the toggle. */\n  actions?: React.ReactNode;\n  /**\n   * A rollup badge (e.g. a `Tag` with an unread count) shown in the header only\n   * when an expandable section is collapsed. Ignored for static sections.\n   */\n  unreadRollup?: React.ReactNode;\n}\n\nconst sectionLabelTextClass =\n  'ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]';\nconst sectionHeaderPadClass =\n  'pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]';\n\nconst SidebarSecondarySectionLabel = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondarySectionLabelProps\n>(({ className, actions, unreadRollup, children, ...props }, ref) => {\n  const { expandable } = React.useContext(SidebarSecondarySectionContext);\n\n  if (!expandable) {\n    // Static header: preserve the original markup when there are no actions so\n    // existing layouts/baselines are unchanged.\n    const base = cn(sectionLabelTextClass, sectionHeaderPadClass, className);\n    if (actions == null) {\n      return (\n        <div ref={ref} className={base} {...props}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          base,\n          'flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]'\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n        <span className=\"flex shrink-0 items-center\">{actions}</span>\n      </div>\n    );\n  }\n\n  // Expandable header: a chevron toggle (the Collapsible trigger) plus optional\n  // trailing actions kept OUTSIDE the trigger button (no nested buttons). The\n  // unread-rollup badge sits inside the trigger and shows only while collapsed.\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]',\n        sectionHeaderPadClass,\n        className\n      )}\n      {...props}\n    >\n      <Collapsible.Trigger\n        className={cn(\n          'group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-left',\n          sectionLabelTextClass,\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset'\n        )}\n      >\n        <ChevronDownIcon\n          size={16}\n          aria-hidden=\"true\"\n          className=\"shrink-0 -rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]\"\n        />\n        <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n        {unreadRollup != null && (\n          <span className=\"flex shrink-0 items-center group-data-[panel-open]/section:hidden\">\n            {unreadRollup}\n          </span>\n        )}\n      </Collapsible.Trigger>\n      {actions != null && (\n        <span className=\"flex shrink-0 items-center\">{actions}</span>\n      )}\n    </div>\n  );\n});\nSidebarSecondarySectionLabel.displayName = 'SidebarSecondarySectionLabel';\n\nconst SidebarSecondaryMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => {\n  const { expandable } = React.useContext(SidebarSecondarySectionContext);\n  const list = (\n    <ul\n      ref={ref}\n      className={cn(\n        'flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]',\n        className\n      )}\n      {...props}\n    />\n  );\n  // Inside an expandable section the item list IS the collapsible panel, so it\n  // mounts/unmounts with the section's open state.\n  return expandable ? <Collapsible.Panel>{list}</Collapsible.Panel> : list;\n});\nSidebarSecondaryMenu.displayName = 'SidebarSecondaryMenu';\n\n// Shared row geometry + the GLOBAL icon/label state colors (shared across\n// selected/unselected — DESIGN §6.2). The cva `variant` only swaps the container\n// fill. Each interaction state is wired to its own token even where acronis's\n// value is unchanged (runtime var() references honor brand overrides only on the\n// referenced token).\nconst sidebarSecondaryRowClasses =\n  'group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]';\n\nconst sidebarSecondaryMenuItemVariants = cva(sidebarSecondaryRowClasses, {\n  variants: {\n    variant: {\n      unselected:\n        'bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]',\n      selected:\n        'bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'unselected',\n  },\n});\n\nexport interface SidebarSecondaryMenuItemProps\n  extends Omit<React.ComponentPropsWithoutRef<'a'>, 'children'>,\n    Omit<VariantProps<typeof sidebarSecondaryMenuItemVariants>, 'variant'> {\n  /** Marks the current route: sets the `selected` variant + `aria-current=\"page\"`. */\n  selected?: boolean;\n  /** Optional leading 16px icon (Level-1 only; `hasIcon` in Figma). */\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  /** Replace the rendered `<a>` (e.g. a router `Link` or a `<button>`). */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondaryMenuItem = React.forwardRef<\n  HTMLAnchorElement,\n  SidebarSecondaryMenuItemProps\n>(({ className, selected = false, icon, render, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n\n  // Trailing extras (tag / shortcut / external link) are passed as children but\n  // must sit at the right edge of the row, after the title — so split them out:\n  // the title takes the remaining width and truncates with an ellipsis, while the\n  // extras stay `shrink-0` on the right (the row's `gap` is their left margin).\n  const items = React.Children.toArray(children);\n  const extras = items.filter(\n    (child): child is React.ReactElement =>\n      React.isValidElement(child) &&\n      (child.type as { displayName?: string }).displayName ===\n        'SidebarSecondaryMenuItemExtras'\n  );\n  const label = items.filter(\n    (child) => !extras.includes(child as React.ReactElement)\n  );\n\n  const inner = useRender({\n    render,\n    ref,\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          sidebarSecondaryMenuItemVariants({\n            variant: selected ? 'selected' : 'unselected',\n          }),\n          className\n        ),\n        'aria-current': selected ? 'page' : undefined,\n        children: (\n          <>\n            {icon != null && (\n              <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]\">\n                {icon}\n              </span>\n            )}\n            {/* Keep the label in the DOM as `sr-only` in collapsed/rail mode so\n                an icon-only row keeps an accessible name (a11y §7). */}\n            <span\n              className={cn(\n                'min-w-0 flex-1 truncate text-left',\n                !expanded && 'sr-only'\n              )}\n            >\n              {label}\n            </span>\n            {extras.length > 0 && (\n              <span className=\"flex shrink-0 items-center\">{extras}</span>\n            )}\n          </>\n        ),\n      },\n      props\n    ),\n  });\n\n  return <li className=\"contents\">{inner}</li>;\n});\nSidebarSecondaryMenuItem.displayName = 'SidebarSecondaryMenuItem';\n\nexport type SidebarSecondaryMenuSubProps = React.ComponentPropsWithoutRef<\n  typeof Collapsible.Root\n>;\n\nconst SidebarSecondaryMenuSub = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryMenuSubProps\n>(({ className, render, ...props }, ref) => (\n  // Disclosure row: Base UI Collapsible gives per-row open state +\n  // aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.\n  <Collapsible.Root\n    ref={ref}\n    render={render ?? <li />}\n    className={cn('contents', className)}\n    {...props}\n  />\n));\nSidebarSecondaryMenuSub.displayName = 'SidebarSecondaryMenuSub';\n\nexport interface SidebarSecondaryMenuSubTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof Collapsible.Trigger> {\n  /** Marks the parent row as selected. */\n  selected?: boolean;\n  /** Optional leading 16px icon. */\n  icon?: React.ReactNode;\n}\n\nconst SidebarSecondaryMenuSubTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarSecondaryMenuSubTriggerProps\n>(({ className, selected = false, icon, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n\n  return (\n    <Collapsible.Trigger\n      ref={ref}\n      aria-current={selected ? 'page' : undefined}\n      className={cn(\n        sidebarSecondaryMenuItemVariants({\n          variant: selected ? 'selected' : 'unselected',\n        }),\n        'text-left',\n        className\n      )}\n      {...props}\n    >\n      {icon != null && (\n        <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]\">\n          {icon}\n        </span>\n      )}\n      <span className={cn('flex-1 truncate', !expanded && 'sr-only')}>\n        {children}\n      </span>\n      {/* Chevron rotates when the panel is open (Base UI sets data-panel-open\n          on the trigger). Hidden in collapsed rail mode. */}\n      <ChevronDownIcon\n        size={16}\n        aria-hidden=\"true\"\n        className={cn(\n          'shrink-0 transition-transform group-data-[panel-open]/row:rotate-180',\n          !expanded && 'hidden'\n        )}\n      />\n    </Collapsible.Trigger>\n  );\n});\nSidebarSecondaryMenuSubTrigger.displayName = 'SidebarSecondaryMenuSubTrigger';\n\nexport type SidebarSecondaryMenuSubContentProps =\n  React.ComponentPropsWithoutRef<typeof Collapsible.Panel>;\n\nconst SidebarSecondaryMenuSubContent = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryMenuSubContentProps\n>(({ className, children, ...props }, ref) => (\n  <Collapsible.Panel ref={ref} className={cn(className)} {...props}>\n    <ul className=\"flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]\">\n      {children}\n    </ul>\n  </Collapsible.Panel>\n));\nSidebarSecondaryMenuSubContent.displayName = 'SidebarSecondaryMenuSubContent';\n\nexport interface SidebarSecondaryMenuSubItemProps\n  extends Omit<React.ComponentPropsWithoutRef<'a'>, 'children'> {\n  /** Marks the current route (Level-2 — no icon). */\n  selected?: boolean;\n  children?: React.ReactNode;\n  /** Replace the rendered `<a>` (e.g. a router `Link`). */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondaryMenuSubItem = React.forwardRef<\n  HTMLAnchorElement,\n  SidebarSecondaryMenuSubItemProps\n>(({ className, selected = false, render, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n\n  const inner = useRender({\n    render,\n    ref,\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          sidebarSecondaryMenuItemVariants({\n            variant: selected ? 'selected' : 'unselected',\n          }),\n          // Level-2 left indent (no icon column). The dedicated level-2 padding\n          // token was removed in the next-gen sync; reconstruct the indent from\n          // surviving tokens so the label aligns under level-1 labels (row\n          // padding + icon column + gap).\n          'pl-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-menu-item-global-icon-size)+var(--ui-sidebar-secondary-menu-item-global-container-gap))]',\n          className\n        ),\n        'aria-current': selected ? 'page' : undefined,\n        children: (\n          <span className={cn('flex-1 truncate text-left', !expanded && 'sr-only')}>\n            {children}\n          </span>\n        ),\n      },\n      props\n    ),\n  });\n\n  return <li className=\"contents\">{inner}</li>;\n});\nSidebarSecondaryMenuSubItem.displayName = 'SidebarSecondaryMenuSubItem';\n\nexport interface SidebarSecondaryMenuItemExtrasProps\n  extends React.ComponentPropsWithoutRef<'span'> {\n  /** Which trailing affordance to render. */\n  variant: 'tag' | 'externalLink' | 'shortcut' | 'tag-externalLink';\n  /** Shortcut text for the `shortcut` variant. */\n  shortcut?: string;\n  /** Tag content for the `tag` / `tag-externalLink` variants. */\n  tag?: React.ReactNode;\n}\n\nconst SidebarSecondaryMenuItemExtras = React.forwardRef<\n  HTMLSpanElement,\n  SidebarSecondaryMenuItemExtrasProps\n>(({ className, variant, shortcut, tag, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n  const showTag = variant === 'tag' || variant === 'tag-externalLink';\n  const showExternal =\n    variant === 'externalLink' || variant === 'tag-externalLink';\n  const showShortcut = variant === 'shortcut';\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]',\n        !expanded && 'hidden',\n        className\n      )}\n      {...props}\n    >\n      {showTag && (tag ?? children)}\n      {showShortcut && (\n        <span className=\"ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]\">\n          {shortcut ?? children}\n        </span>\n      )}\n      {showExternal && (\n        <SquareArrowUpRightIcon\n          size={16}\n          className=\"text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]\"\n        />\n      )}\n    </span>\n  );\n});\nSidebarSecondaryMenuItemExtras.displayName = 'SidebarSecondaryMenuItemExtras';\n\nexport interface SidebarSecondaryCollapseTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {\n  /** Leading 16px icon (e.g. a panel-left glyph). */\n  icon?: React.ReactNode;\n  /**\n   * Optional trailing keyboard-shortcut hint (e.g. `⌘J`), right-aligned and\n   * hidden alongside the label in collapsed mode.\n   */\n  shortcut?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\n// The footer \"Collapse menu\" affordance. A row-styled `<button>` that flips the\n// panel width via the layout context — the live wiring for the controllable\n// `expanded` state (B1). Keeps its label as `sr-only` in collapsed mode.\nconst SidebarSecondaryCollapseTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarSecondaryCollapseTriggerProps\n>(({ className, icon, shortcut, children, onClick, ...props }, ref) => {\n  const { expanded, toggleExpanded } = useSidebarSecondaryContext();\n\n  return (\n    <li className=\"contents\">\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={expanded}\n        className={cn(\n          sidebarSecondaryMenuItemVariants({ variant: 'unselected' }),\n          'text-left',\n          className\n        )}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) toggleExpanded();\n        }}\n        {...props}\n      >\n        {icon != null && (\n          // Flip the chevron when collapsed so a chevron-left (\"collapse\")\n          // becomes a chevron-right (\"expand\") — the icon always points toward\n          // the action it triggers.\n          <span\n            className={cn(\n              'flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform',\n              !expanded && 'rotate-180'\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span className={cn('flex-1 truncate', !expanded && 'sr-only')}>\n          {children}\n        </span>\n        {shortcut != null && (\n          <span\n            className={cn(\n              'shrink-0 ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]',\n              !expanded && 'sr-only'\n            )}\n          >\n            {shortcut}\n          </span>\n        )}\n      </button>\n    </li>\n  );\n});\nSidebarSecondaryCollapseTrigger.displayName = 'SidebarSecondaryCollapseTrigger';\n\nexport {\n  SidebarSecondary,\n  SidebarSecondaryHeader,\n  SidebarSecondaryContent,\n  SidebarSecondaryCollapsedBreadcrumb,\n  SidebarSecondaryFooter,\n  SidebarSecondarySection,\n  SidebarSecondarySectionLabel,\n  SidebarSecondaryMenu,\n  SidebarSecondaryMenuItem,\n  SidebarSecondaryMenuSub,\n  SidebarSecondaryMenuSubTrigger,\n  SidebarSecondaryMenuSubContent,\n  SidebarSecondaryMenuSubItem,\n  SidebarSecondaryMenuItemExtras,\n  SidebarSecondaryCollapseTrigger,\n  sidebarSecondaryMenuItemVariants,\n};\n"],"names":["SidebarSecondaryContext","React","useSidebarSecondaryContext","useControllableBoolean","controlled","defaultValue","onChange","uncontrolled","setUncontrolled","isControlled","value","setValue","next","SidebarSecondary","className","expandedProp","defaultExpanded","onExpandedChange","ariaLabel","render","children","props","ref","expanded","setExpanded","context","element","useRender","mergeProps","cn","SidebarSecondaryHeader","label","jsx","SidebarSecondaryContent","SidebarSecondaryCollapsedBreadcrumb","parentLabel","currentLabel","separator","jsxs","ChevronRightIcon","SidebarSecondaryFooter","SidebarSecondarySectionContext","SECTION_STATIC","SECTION_EXPANDABLE","SidebarSecondarySection","expandable","open","defaultOpen","onOpenChange","sectionClass","Collapsible","sectionLabelTextClass","sectionHeaderPadClass","SidebarSecondarySectionLabel","actions","unreadRollup","base","ChevronDownIcon","SidebarSecondaryMenu","list","sidebarSecondaryRowClasses","sidebarSecondaryMenuItemVariants","cva","SidebarSecondaryMenuItem","selected","icon","items","extras","child","inner","Fragment","SidebarSecondaryMenuSub","SidebarSecondaryMenuSubTrigger","SidebarSecondaryMenuSubContent","SidebarSecondaryMenuSubItem","SidebarSecondaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarSecondaryCollapseTrigger","onClick","toggleExpanded","event"],"mappings":"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"}
+{"version":3,"file":"sidebar-secondary.js","sources":["../../../../src/components/ui/sidebar-secondary/sidebar-secondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport {\n  ChevronDownIcon,\n  SquareArrowUpRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\n\n/** Document direction — SSR-safe (defaults to 'ltr', syncs after mount). */\nfunction useDocDir(): 'ltr' | 'rtl' {\n  const [dir, setDir] = React.useState<'ltr' | 'rtl'>('ltr');\n  React.useEffect(() => {\n    setDir(document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr');\n  }, []);\n  return dir;\n}\n\n/**\n * Tracks whether `ref`'s element is clipping its own content (`scrollWidth >\n * clientWidth`) — used to gate a tooltip so it only opens when a truncated\n * label is actually cut off. Re-measures via `ResizeObserver` (covers the\n * rail's expand/collapse width transition); `enabled` skips measurement\n * entirely (e.g. while collapsed, where the label is `sr-only`).\n */\nfunction useIsOverflowing<T extends Element>(\n  ref: React.RefObject<T | null>,\n  { enabled }: { enabled: boolean }\n): boolean {\n  const [isOverflowing, setIsOverflowing] = React.useState(false);\n\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element) {\n      setIsOverflowing(false);\n      return;\n    }\n    const measure = () =>\n      setIsOverflowing(element.scrollWidth > element.clientWidth);\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled]);\n\n  return isOverflowing;\n}\n\n// Resize constraints — mirrors the design-token defaults.\n// CSS still uses `var(--ui-sidebar-secondary-expanded-container-width)` so\n// brands that override the token get the correct visual width; these JS\n// constants only govern the drag-resize clamping range.\nconst SIDEBAR_EXPANDED_WIDTH = 256; // --ui-sidebar-secondary-expanded-container-width\nconst SIDEBAR_MAX_WIDTH = SIDEBAR_EXPANDED_WIDTH * 2;\n\n// Composable SidebarSecondary primitives mirroring the Figma \"SidebarSecondary\"\n// component set (node 2468:59502, variant expanded|collapsed). Every color and\n// metric is wired to a next-gen `--ui-sidebar-secondary-*` token from\n// @acronis-platform/tokens-pd — no hex, no invented tokens.\n//\n// Like SidebarPrimary, expanded/collapsed is a width-reflow state (not a panel\n// show/hide), modelled as a controlled/uncontrolled `expanded` prop (default\n// true) that sets `data-state=\"expanded|collapsed\"` on the root and is shared to\n// descendants via context. The collapsed rail replaces the section list with a\n// vertical breadcrumb (parent → separator → current page), toggled purely by the\n// `data-[state]` selectors so it is SSR-present and needs no JS branch.\n//\n// Menu-item color wiring DIVERGES from Primary (DESIGN §6.2): Secondary recolors\n// only the CONTAINER per selected/unselected; the icon and label use the shared\n// `--ui-sidebar-secondary-menu-item-global-{icon,label}-color-color` tokens\n// across both variants and every interaction state (the next-gen token sync\n// collapsed the former per-state idle/hover/active icon+label colors into a\n// single value each). So the cva base carries the global icon/label colors and\n// the two variants only swap the container fill.\n//\n// R6 (collapsed separator icon): resolved from the Figma node metadata — the\n// collapsed `iconSeparator` instance's mainComponent is \"ChevronDown\" (updated\n// from ChevronRight), so the separator defaults to `ChevronDownIcon` (16px),\n// tinted by `--ui-sidebar-secondary-collapsed-icon-separator-color`. In the\n// vertical breadcrumb flow (writing-mode: vertical-rl) the downward chevron\n// visually points \"forward\" in the reading direction. The disclosure chevron\n// uses `ChevronDownIcon` rotated via `data-panel-open`. The focus ring reuses the\n// shared `--ui-focus-brand` (no sidebar focus token exists — R1).\n\nconst defaultResizeTooltipExpanded = (\n  <>\n    <span className=\"font-semibold\">Resize:</span> Drag\n    <br />\n    <span className=\"font-semibold\">Collapse:</span> Click\n    <br />\n    <span className=\"font-semibold\">Reset size:</span> Double click\n  </>\n);\n\nconst defaultResizeTooltipCollapsed = (\n  <>\n    <span className=\"font-semibold\">Resize:</span> Drag\n    <br />\n    <span className=\"font-semibold\">Expand:</span> Click\n  </>\n);\n\ninterface SidebarSecondaryContextValue {\n  expanded: boolean;\n  /** Flip the panel width — drives the controlled/uncontrolled `expanded` state. */\n  toggleExpanded: () => void;\n  /** Whether resize is enabled. */\n  resizable: boolean;\n  /** Current width in px (only meaningful when resizable + expanded). */\n  width: number;\n  /** Update the width (used by the resize edge during drag). */\n  setWidth: (width: number) => void;\n  /** Min resize width — derived from `--ui-sidebar-secondary-expanded-container-width`. */\n  minWidth: number;\n  /** Max resize width — expanded-width × RESIZE_MAX_WIDTH_FACTOR. */\n  maxWidth: number;\n  /** Default (reset) width — equals expanded-container-width token. */\n  defaultWidth: number;\n  /** Label registered by `SidebarSecondaryHeader` — consumed by the collapsed breadcrumb. */\n  headerLabel: React.ReactNode;\n  /** Register the header label (called by `SidebarSecondaryHeader`). */\n  setHeaderLabel: (label: React.ReactNode) => void;\n  /** Label of the currently selected `MenuItem` — consumed by the collapsed breadcrumb. */\n  selectedLabel: React.ReactNode;\n  /** Register the selected item label (called by `SidebarSecondaryMenuItem`). */\n  setSelectedLabel: (label: React.ReactNode) => void;\n  /** Accessible label for the resize edge separator. */\n  resizeAriaLabel: string;\n  /** Tooltip content shown when the sidebar is expanded. */\n  resizeTooltipExpanded: React.ReactNode;\n  /** Tooltip content shown when the sidebar is collapsed. */\n  resizeTooltipCollapsed: React.ReactNode;\n}\n\nconst SidebarSecondaryContext =\n  React.createContext<SidebarSecondaryContextValue | null>(null);\n\nfunction useSidebarSecondaryContext(): SidebarSecondaryContextValue {\n  // Default to expanded so parts render standalone (in isolation tests /\n  // stories) without a wrapping root; the toggle is a no-op outside a root.\n  return (\n    React.useContext(SidebarSecondaryContext) ?? {\n      expanded: true,\n      toggleExpanded: () => {},\n      resizable: false,\n      width: SIDEBAR_EXPANDED_WIDTH,\n      setWidth: () => {},\n      minWidth: SIDEBAR_EXPANDED_WIDTH,\n      maxWidth: SIDEBAR_MAX_WIDTH,\n      defaultWidth: SIDEBAR_EXPANDED_WIDTH,\n      headerLabel: undefined,\n      setHeaderLabel: () => {},\n      selectedLabel: undefined,\n      setSelectedLabel: () => {},\n      resizeAriaLabel: 'Resize sidebar',\n      resizeTooltipExpanded: defaultResizeTooltipExpanded,\n      resizeTooltipCollapsed: defaultResizeTooltipCollapsed,\n    }\n  );\n}\n\n/**\n * Controlled + uncontrolled boolean state (the Base UI idiom). When `controlled`\n * is provided it wins and the setter only emits the change callback; otherwise\n * the setter updates internal state. `onChange` is ALWAYS invoked with the next\n * value so a consumer can react in either mode.\n */\nfunction useControllableBoolean(\n  controlled: boolean | undefined,\n  defaultValue: boolean,\n  onChange?: (next: boolean) => void\n): [boolean, (next: boolean) => void] {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\n  const isControlled = controlled !== undefined;\n  const value = isControlled ? controlled : uncontrolled;\n  const setValue = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolled(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n  return [value, setValue];\n}\n\nexport interface SidebarSecondaryProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Controlled expanded (rail width) state. */\n  expanded?: boolean;\n  /** Uncontrolled initial expanded state. Defaults to `true` (full width). */\n  defaultExpanded?: boolean;\n  /** Fires when the expanded state changes (e.g. a consumer toggle). */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Enable the draggable resize edge on the right border.\n   * When `true`, the sidebar can be resized between the expanded-width token\n   * and twice that value.\n   */\n  resizable?: boolean;\n  /** Controlled width in px (only used when `resizable`). */\n  width?: number;\n  /** Fires when the width changes due to a drag interaction. */\n  onWidthChange?: (width: number) => void;\n  /** Accessible label for the resize edge (`role=\"separator\"`). Defaults to `'Resize sidebar'`. */\n  resizeAriaLabel?: string;\n  /** Tooltip content shown when the sidebar is expanded. Pass `null` to hide the tooltip entirely. */\n  resizeTooltipExpanded?: React.ReactNode;\n  /** Tooltip content shown when the sidebar is collapsed. Pass `null` to hide the tooltip entirely. */\n  resizeTooltipCollapsed?: React.ReactNode;\n  /**\n   * Replace the rendered `<nav>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n}\n\n// ---------------------------------------------------------------------------\n// SidebarSecondaryResizeEdge — internal drag/click handle on the right edge\n// ---------------------------------------------------------------------------\n// Styled identically to `ResizableHandle` (Figma 4649:6681): 9px hit-area,\n// 1px centered divider, idle → `--ui-border-on-surface-border`,\n// hover → `--ui-resizable-border-color-hover`,\n// drag  → `--ui-resizable-border-color-active`.\n// ---------------------------------------------------------------------------\n\nfunction SidebarSecondaryResizeEdge() {\n  const ctx = useSidebarSecondaryContext();\n  const { expanded, toggleExpanded, resizable } = ctx;\n  const dir = useDocDir();\n\n  // Mutable ref so the closure-captured pointermove handler always reads\n  // the latest context without re-attaching listeners.\n  const ctxRef = React.useRef(ctx);\n  ctxRef.current = ctx;\n\n  // Track whether a pointermove actually happened between down→up so we can\n  // suppress the click that the browser fires after every pointerup.\n  const didDragRef = React.useRef(false);\n\n  // Hide the tooltip while dragging.\n  const [tooltipOpen, setTooltipOpen] = React.useState(false);\n  const [dragging, setDragging] = React.useState(false);\n\n  // Delay single-click so a double-click can cancel it.\n  const clickTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n    null\n  );\n\n  // Clear any pending click timer on unmount.\n  React.useEffect(() => {\n    return () => {\n      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);\n    };\n  }, []);\n\n  if (!resizable) return null;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    const el = e.currentTarget;\n    el.setPointerCapture(e.pointerId);\n    didDragRef.current = false;\n    setDragging(true);\n    setTooltipOpen(false);\n\n    // Disable the width transition while dragging so resize follows the\n    // cursor without animation lag.\n    const sidebarEl = el.closest('[data-state]') as HTMLElement | null;\n    if (!sidebarEl) {\n      setDragging(false);\n      el.releasePointerCapture(e.pointerId);\n      return;\n    }\n    sidebarEl.style.transitionProperty = 'none';\n    const isRtl = getComputedStyle(sidebarEl).direction === 'rtl';\n    const sidebarRect = sidebarEl.getBoundingClientRect();\n\n    const { minWidth, maxWidth } = ctxRef.current;\n    const collapseThreshold = minWidth / 2;\n\n    const onPointerMove = (ev: PointerEvent) => {\n      didDragRef.current = true;\n      const newWidth = isRtl\n        ? sidebarRect.right - ev.clientX\n        : ev.clientX - sidebarRect.left;\n      const { expanded: isExpanded } = ctxRef.current;\n\n      if (isExpanded) {\n        if (newWidth < collapseThreshold) {\n          ctxRef.current.toggleExpanded();\n        } else {\n          ctxRef.current.setWidth(\n            Math.min(Math.max(newWidth, minWidth), maxWidth)\n          );\n        }\n      } else {\n        if (newWidth > collapseThreshold) {\n          ctxRef.current.toggleExpanded();\n        }\n      }\n    };\n\n    const onPointerUp = () => {\n      setDragging(false);\n      // Restore transition so collapse/expand animates.\n      if (sidebarEl) sidebarEl.style.transitionProperty = '';\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', onPointerUp);\n    };\n\n    window.addEventListener('pointermove', onPointerMove);\n    window.addEventListener('pointerup', onPointerUp);\n  };\n\n  const handleClick = () => {\n    // Suppress click when the interaction was a drag.\n    if (didDragRef.current) return;\n    // Cancel any pending click timer (dblclick fires two clicks).\n    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);\n    // Wait to see if a double-click follows.\n    clickTimerRef.current = setTimeout(() => {\n      toggleExpanded();\n    }, 250);\n  };\n\n  const handleDoubleClick = () => {\n    // Cancel the pending single-click toggle.\n    if (clickTimerRef.current) {\n      clearTimeout(clickTimerRef.current);\n      clickTimerRef.current = null;\n    }\n    if (!expanded) toggleExpanded();\n    ctxRef.current.setWidth(ctxRef.current.defaultWidth);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    const {\n      minWidth,\n      maxWidth,\n      defaultWidth,\n      width: w,\n      setWidth: sw,\n      expanded: exp,\n      toggleExpanded: te,\n    } = ctxRef.current;\n    const step = 16;\n    const growKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n    const shrinkKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n    if (e.key === growKey && exp) {\n      e.preventDefault();\n      sw(Math.min(w + step, maxWidth));\n    } else if (e.key === shrinkKey && exp) {\n      e.preventDefault();\n      const next = w - step;\n      if (next < minWidth) {\n        te();\n      } else {\n        sw(next);\n      }\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      te();\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      if (!exp) te();\n      sw(defaultWidth);\n    }\n  };\n\n  const handleTooltipOpenChange = (open: boolean) => {\n    // Never open the tooltip while dragging.\n    if (dragging) return;\n    setTooltipOpen(open);\n  };\n\n  return (\n    <Tooltip open={tooltipOpen} onOpenChange={handleTooltipOpenChange}>\n      <TooltipTrigger\n        render={\n          <div\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label={ctx.resizeAriaLabel}\n            className={cn(\n              // 9px hit area matching ResizableHandle, absolutely positioned on inline-end edge.\n              // No after: divider — the sidebar's own border-e changes color via :has() on hover/active/focus.\n              'absolute end-0 top-0 h-full w-[9px] ltr:translate-x-1/2 rtl:-translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10',\n              'focus-visible:outline-none'\n            )}\n            tabIndex={0}\n            onKeyDown={handleKeyDown}\n            onPointerDown={handlePointerDown}\n            onClick={handleClick}\n            onDoubleClick={handleDoubleClick}\n          />\n        }\n      />\n      {(expanded ? ctx.resizeTooltipExpanded : ctx.resizeTooltipCollapsed) !=\n        null && (\n        <TooltipContent side={dir === 'rtl' ? 'left' : 'right'} align=\"center\">\n          {expanded ? ctx.resizeTooltipExpanded : ctx.resizeTooltipCollapsed}\n        </TooltipContent>\n      )}\n    </Tooltip>\n  );\n}\n\nconst SidebarSecondary = React.forwardRef<HTMLElement, SidebarSecondaryProps>(\n  (\n    {\n      className,\n      expanded: expandedProp,\n      defaultExpanded = true,\n      onExpandedChange,\n      resizable: resizableProp = true,\n      width: widthProp,\n      onWidthChange,\n      resizeAriaLabel = 'Resize sidebar',\n      resizeTooltipExpanded = defaultResizeTooltipExpanded,\n      resizeTooltipCollapsed = defaultResizeTooltipCollapsed,\n      'aria-label': ariaLabel = 'Section navigation',\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [expanded, setExpanded] = useControllableBoolean(\n      expandedProp,\n      defaultExpanded,\n      onExpandedChange\n    );\n\n    // Width is independent of expanded/collapsed — it persists across cycles.\n    const [width, setWidthState] = React.useState(SIDEBAR_EXPANDED_WIDTH);\n    const isWidthControlled = widthProp !== undefined;\n    const currentWidth = isWidthControlled ? widthProp : width;\n    const setWidth = React.useCallback(\n      (next: number) => {\n        if (!isWidthControlled) setWidthState(next);\n        onWidthChange?.(next);\n      },\n      [isWidthControlled, onWidthChange]\n    );\n\n    // Collapse is driven by the consumer through the layout context — the\n    // `SidebarSecondaryCollapseTrigger` calls `toggleExpanded`, which updates\n    // uncontrolled state and always emits `onExpandedChange`. Controlled\n    // consumers ignore the internal state and react to the callback.\n    // Breadcrumb auto-wiring: Header and the selected MenuItem register their\n    // labels so the collapsed breadcrumb can display them without manual props.\n    const [headerLabel, setHeaderLabel] =\n      React.useState<React.ReactNode>(undefined);\n    const [selectedLabel, setSelectedLabel] =\n      React.useState<React.ReactNode>(undefined);\n\n    const context = React.useMemo<SidebarSecondaryContextValue>(\n      () => ({\n        expanded,\n        toggleExpanded: () => setExpanded(!expanded),\n        resizable: resizableProp,\n        width: currentWidth,\n        setWidth,\n        minWidth: SIDEBAR_EXPANDED_WIDTH,\n        maxWidth: SIDEBAR_MAX_WIDTH,\n        defaultWidth: SIDEBAR_EXPANDED_WIDTH,\n        headerLabel,\n        setHeaderLabel,\n        selectedLabel,\n        setSelectedLabel,\n        resizeAriaLabel,\n        resizeTooltipExpanded,\n        resizeTooltipCollapsed,\n      }),\n      [\n        expanded,\n        setExpanded,\n        resizableProp,\n        currentWidth,\n        setWidth,\n        headerLabel,\n        selectedLabel,\n        resizeAriaLabel,\n        resizeTooltipExpanded,\n        resizeTooltipCollapsed,\n      ]\n    );\n\n    // When resizable + expanded, apply inline width ONLY when the user has\n    // actively resized (or width is controlled). Otherwise the CSS token\n    // `--ui-sidebar-secondary-expanded-container-width` drives the width,\n    // so brand overrides are honoured and no inline style wins specificity.\n    const hasWidthOverride =\n      isWidthControlled || currentWidth !== SIDEBAR_EXPANDED_WIDTH;\n    const inlineStyle: React.CSSProperties | undefined =\n      resizableProp && expanded && hasWidthOverride\n        ? { width: currentWidth }\n        : undefined;\n\n    const element = useRender({\n      render,\n      ref,\n      defaultTagName: 'nav',\n      props: mergeProps<'nav'>(\n        {\n          'aria-label': ariaLabel,\n          // `data-state` drives every collapsed/expanded token switch via\n          // attribute selectors; typed loosely because React's nav attribute\n          // map doesn't include arbitrary data-* keys as literals.\n          ...({ 'data-state': expanded ? 'expanded' : 'collapsed' } as Record<\n            string,\n            string\n          >),\n          style: inlineStyle,\n          className: cn(\n            'group/sidebar relative flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-e border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-inline-end-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]',\n            resizableProp &&\n              'transition-[width,border-color] has-[[role=separator]:hover]:border-[var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:border-[var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:border-[var(--ui-resizable-border-color-hover)] has-[[role=separator]:focus-visible]:ring-[3px] has-[[role=separator]:focus-visible]:ring-[var(--ui-focus-primary)]',\n            className\n          ),\n          children: (\n            <>\n              <SidebarSecondaryCollapsedBreadcrumb />\n              {children}\n              <SidebarSecondaryResizeEdge />\n            </>\n          ),\n        },\n        props\n      ),\n    });\n\n    return (\n      <SidebarSecondaryContext.Provider value={context}>\n        {element}\n      </SidebarSecondaryContext.Provider>\n    );\n  }\n);\nSidebarSecondary.displayName = 'SidebarSecondary';\n\nexport interface SidebarSecondaryHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Heading text (or pass as children). */\n  label?: React.ReactNode;\n}\n\nconst SidebarSecondaryHeader = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryHeaderProps\n>(({ className, label, children, ...props }, ref) => {\n  const { setHeaderLabel } = useSidebarSecondaryContext();\n  const resolvedLabel = label ?? children;\n\n  // Register the header text so the collapsed breadcrumb can auto-display it.\n  React.useEffect(() => {\n    setHeaderLabel(resolvedLabel);\n  }, [resolvedLabel, setHeaderLabel]);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'hidden items-center shrink-0',\n        'group-data-[state=expanded]/sidebar:flex',\n        'px-[var(--ui-sidebar-secondary-global-container-header-padding-x)] py-[var(--ui-sidebar-secondary-global-container-header-padding-y)]',\n        className\n      )}\n      {...props}\n    >\n      <h2 className=\"ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]\">\n        {resolvedLabel}\n      </h2>\n    </div>\n  );\n});\nSidebarSecondaryHeader.displayName = 'SidebarSecondaryHeader';\n\nconst SidebarSecondaryContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  // Expanded: the section list. Hidden in collapsed mode, where the\n  // CollapsedBreadcrumb sibling takes over.\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]',\n      'hidden group-data-[state=expanded]/sidebar:flex',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryContent.displayName = 'SidebarSecondaryContent';\n\nexport interface SidebarSecondaryCollapsedBreadcrumbProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * The parent section label (breadcrumbLabel).\n   * Auto-derived from the `SidebarSecondaryHeader` label when omitted.\n   */\n  parentLabel?: React.ReactNode;\n  /**\n   * The current page label (labelCurrentPage).\n   * Auto-derived from the selected `SidebarSecondaryMenuItem` when omitted.\n   */\n  currentLabel?: React.ReactNode;\n  /** Separator between the two; defaults to a 16px ChevronDownIcon. */\n  separator?: React.ReactNode;\n}\n\nconst SidebarSecondaryCollapsedBreadcrumb = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryCollapsedBreadcrumbProps\n>(({ className, parentLabel, currentLabel, separator, ...props }, ref) => {\n  const { headerLabel, selectedLabel } = useSidebarSecondaryContext();\n  const resolvedParent = parentLabel ?? headerLabel;\n  const resolvedCurrent = currentLabel ?? selectedLabel;\n\n  return (\n    // Shown only in collapsed mode — toggled by the same data-[state] selector so\n    // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:\n    // parent → separator → current page.\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-1 flex-col items-center min-h-0',\n        'gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]',\n        'flex group-data-[state=expanded]/sidebar:hidden',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"[writing-mode:vertical-rl] [direction:ltr] shrink-0 ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]\">\n        {resolvedParent}\n      </span>\n      <span\n        aria-hidden=\"true\"\n        className=\"inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]\"\n      >\n        {separator ?? <ChevronDownIcon size={16} />}\n      </span>\n      <span className=\"[writing-mode:vertical-rl] [direction:ltr] flex-1 min-h-0 overflow-hidden ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]\">\n        {resolvedCurrent}\n      </span>\n    </div>\n  );\n});\nSidebarSecondaryCollapsedBreadcrumb.displayName =\n  'SidebarSecondaryCollapsedBreadcrumb';\n\nconst SidebarSecondaryFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col shrink-0',\n      'border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]',\n      'py-[var(--ui-sidebar-secondary-section-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryFooter.displayName = 'SidebarSecondaryFooter';\n\n// A section can be a static group (label + items) or an EXPANDABLE disclosure\n// (Figma Section `expandable=yes-*`): the label becomes a chevron toggle that\n// shows/hides the whole item list. Whether a section is expandable is shared to\n// its label + menu via this context (default: static), so the same `SectionLabel`\n// / `Menu` parts adapt without a separate component set.\ninterface SidebarSecondarySectionContextValue {\n  expandable: boolean;\n}\n\nconst SidebarSecondarySectionContext =\n  React.createContext<SidebarSecondarySectionContextValue>({\n    expandable: false,\n  });\n\nconst SECTION_STATIC: SidebarSecondarySectionContextValue = {\n  expandable: false,\n};\nconst SECTION_EXPANDABLE: SidebarSecondarySectionContextValue = {\n  expandable: true,\n};\n\nexport interface SidebarSecondarySectionProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Make the section a collapsible disclosure: the `SidebarSecondarySectionLabel`\n   * becomes a chevron toggle and the `SidebarSecondaryMenu` becomes its panel.\n   */\n  expandable?: boolean;\n  /** Controlled open state (expandable sections only). */\n  open?: boolean;\n  /** Uncontrolled initial open state (expandable sections only). Defaults to open. */\n  defaultOpen?: boolean;\n  /** Fires with the next open value when an expandable section toggles. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst SidebarSecondarySection = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondarySectionProps\n>(\n  (\n    {\n      className,\n      expandable = false,\n      open,\n      defaultOpen = true,\n      onOpenChange,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Sections are separated by vertical padding + the section label; the next-gen\n    // token sync removed the inter-section divider (no\n    // `--ui-sidebar-secondary-section-container-border-*` token survives).\n    const sectionClass = cn(\n      'flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]',\n      className\n    );\n\n    if (!expandable) {\n      return (\n        <SidebarSecondarySectionContext.Provider value={SECTION_STATIC}>\n          <div ref={ref} className={sectionClass} {...props}>\n            {children}\n          </div>\n        </SidebarSecondarySectionContext.Provider>\n      );\n    }\n\n    // Expandable: Base UI Collapsible owns the open state (controlled or\n    // uncontrolled) + the aria-expanded/aria-controls wiring on the trigger.\n    return (\n      <SidebarSecondarySectionContext.Provider value={SECTION_EXPANDABLE}>\n        <Collapsible.Root\n          ref={ref}\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          render={<div className={sectionClass} />}\n          {...props}\n        >\n          {children}\n        </Collapsible.Root>\n      </SidebarSecondarySectionContext.Provider>\n    );\n  }\n);\nSidebarSecondarySection.displayName = 'SidebarSecondarySection';\n\nexport interface SidebarSecondarySectionLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Trailing header actions (e.g. a ghost `ButtonIcon`). Rendered outside the toggle. */\n  actions?: React.ReactNode;\n  /**\n   * A rollup badge (e.g. a `Tag` with an unread count) shown in the header only\n   * when an expandable section is collapsed. Ignored for static sections.\n   */\n  unreadRollup?: React.ReactNode;\n}\n\nconst sectionLabelTextClass =\n  'ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]';\nconst sectionHeaderPadClass =\n  'min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] py-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]';\n\nconst SidebarSecondarySectionLabel = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondarySectionLabelProps\n>(({ className, actions, unreadRollup, children, ...props }, ref) => {\n  const { expandable } = React.useContext(SidebarSecondarySectionContext);\n  const labelRef = React.useRef<HTMLSpanElement>(null);\n  const isOverflowing = useIsOverflowing(labelRef, { enabled: true });\n\n  const labelTooltip = (\n    <Tooltip disabled={!isOverflowing}>\n      <TooltipTrigger\n        render={\n          <span\n            ref={labelRef}\n            className=\"min-w-0 flex-1 truncate\"\n          />\n        }\n      >\n        {children}\n      </TooltipTrigger>\n      <TooltipContent>{children}</TooltipContent>\n    </Tooltip>\n  );\n\n  if (!expandable) {\n    // Static header: preserve the original markup when there are no actions so\n    // existing layouts/baselines are unchanged.\n    const base = cn(sectionLabelTextClass, sectionHeaderPadClass, className);\n    if (actions == null) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            base,\n            'flex items-center'\n          )}\n          {...props}\n        >\n          {labelTooltip}\n        </div>\n      );\n    }\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          base,\n          'flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]'\n        )}\n        {...props}\n      >\n        {labelTooltip}\n        <span className=\"flex shrink-0 items-center\">{actions}</span>\n      </div>\n    );\n  }\n\n  // Expandable header: a chevron toggle (the Collapsible trigger) plus optional\n  // trailing actions kept OUTSIDE the trigger button (no nested buttons). The\n  // unread-rollup badge sits inside the trigger and shows only while collapsed.\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]',\n        sectionHeaderPadClass,\n        className\n      )}\n      {...props}\n    >\n      <Collapsible.Trigger\n        className={cn(\n          'group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start',\n          sectionLabelTextClass,\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset'\n        )}\n      >\n        <ChevronDownIcon\n          size={16}\n          aria-hidden=\"true\"\n          className=\"shrink-0 ltr:-rotate-90 rtl:rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]\"\n        />\n        {labelTooltip}\n        {unreadRollup != null && (\n          <span className=\"flex shrink-0 items-center group-data-[panel-open]/section:hidden\">\n            {unreadRollup}\n          </span>\n        )}\n      </Collapsible.Trigger>\n      {actions != null && (\n        <span className=\"flex shrink-0 items-center\">{actions}</span>\n      )}\n    </div>\n  );\n});\nSidebarSecondarySectionLabel.displayName = 'SidebarSecondarySectionLabel';\n\nconst SidebarSecondaryMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => {\n  const { expandable } = React.useContext(SidebarSecondarySectionContext);\n  const list = (\n    <ul\n      ref={ref}\n      className={cn(\n        'flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]',\n        className\n      )}\n      {...props}\n    />\n  );\n  // Inside an expandable section the item list IS the collapsible panel, so it\n  // mounts/unmounts with the section's open state.\n  return expandable ? <Collapsible.Panel>{list}</Collapsible.Panel> : list;\n});\nSidebarSecondaryMenu.displayName = 'SidebarSecondaryMenu';\n\n// Shared row geometry + the GLOBAL icon/label state colors (shared across\n// selected/unselected — DESIGN §6.2). The cva `variant` only swaps the container\n// fill. Each interaction state is wired to its own token even where acronis's\n// value is unchanged (runtime var() references honor brand overrides only on the\n// referenced token).\nconst sidebarSecondaryRowClasses =\n  'group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]';\n\nconst sidebarSecondaryMenuItemVariants = cva(sidebarSecondaryRowClasses, {\n  variants: {\n    variant: {\n      unselected:\n        'bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]',\n      selected:\n        'bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'unselected',\n  },\n});\n\nexport interface SidebarSecondaryMenuItemProps\n  extends\n    Omit<React.ComponentPropsWithoutRef<'a'>, 'children'>,\n    Omit<VariantProps<typeof sidebarSecondaryMenuItemVariants>, 'variant'> {\n  /** Marks the current route: sets the `selected` variant + `aria-current=\"page\"`. */\n  selected?: boolean;\n  /** Optional leading 16px icon (`hasIcon` in Figma). */\n  icon?: React.ReactNode;\n  /** Trailing extras (tag, shortcut, external-link icon — `hasExtras` in Figma). */\n  extras?: React.ReactNode;\n  children?: React.ReactNode;\n  /** Replace the rendered `<a>` (e.g. a router `Link` or a `<button>`). */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondaryMenuItem = React.forwardRef<\n  HTMLAnchorElement,\n  SidebarSecondaryMenuItemProps\n>(\n  (\n    { className, selected = false, icon, extras, render, children, ...props },\n    ref\n  ) => {\n    const { expanded, setSelectedLabel } = useSidebarSecondaryContext();\n    const { expandable } = React.useContext(SidebarSecondarySectionContext);\n    const labelRef = React.useRef<HTMLSpanElement>(null);\n    const isOverflowing = useIsOverflowing(labelRef, { enabled: expanded });\n\n    // Register this item's label when selected so the collapsed breadcrumb\n    // auto-displays the current page without manual props.\n    React.useEffect(() => {\n      if (selected) setSelectedLabel(children);\n    }, [selected, children, setSelectedLabel]);\n\n    const inner = useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(\n            sidebarSecondaryMenuItemVariants({\n              variant: selected ? 'selected' : 'unselected',\n            }),\n            // Inside an expandable section, increase start padding so the\n            // label aligns with the section header text (after chevron + gap)\n            // while keeping the container full-width for hover/active fills.\n            expandable &&\n              'ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]',\n            className\n          ),\n          'aria-current': selected ? 'page' : undefined,\n          children: (\n            <>\n              {icon != null && (\n                <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]\">\n                  {icon}\n                </span>\n              )}\n              {/* Keep the label in the DOM as `sr-only` in collapsed/rail mode so\n                an icon-only row keeps an accessible name (a11y §7). The tooltip\n                trigger is the label span itself — it only opens when the label\n                is actually clipped. */}\n              <Tooltip disabled={!isOverflowing}>\n                <TooltipTrigger\n                  render={\n                    <span\n                      ref={labelRef}\n                      className={cn(\n                        'flex-1 min-w-[60px] truncate text-start',\n                        !expanded && 'sr-only'\n                      )}\n                    />\n                  }\n                >\n                  {children}\n                </TooltipTrigger>\n                <TooltipContent>{children}</TooltipContent>\n              </Tooltip>\n              {extras}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n\n    return <li className=\"contents\">{inner}</li>;\n  }\n);\nSidebarSecondaryMenuItem.displayName = 'SidebarSecondaryMenuItem';\n\nexport interface SidebarSecondaryMenuItemExtrasProps extends React.ComponentPropsWithoutRef<'span'> {\n  /** Which trailing affordance to render. */\n  variant: 'tag' | 'externalLink' | 'shortcut' | 'tag-externalLink';\n  /** Shortcut text for the `shortcut` variant. */\n  shortcut?: string;\n  /** Tag content for the `tag` / `tag-externalLink` variants. */\n  tag?: React.ReactNode;\n}\n\nconst SidebarSecondaryMenuItemExtras = React.forwardRef<\n  HTMLSpanElement,\n  SidebarSecondaryMenuItemExtrasProps\n>(({ className, variant, shortcut, tag, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n  const showTag = variant === 'tag' || variant === 'tag-externalLink';\n  const showExternal =\n    variant === 'externalLink' || variant === 'tag-externalLink';\n  const showShortcut = variant === 'shortcut';\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center shrink-0 min-h-6 overflow-clip gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]',\n        !expanded && 'hidden',\n        className\n      )}\n      {...props}\n    >\n      {showTag && (tag ?? children)}\n      {showShortcut && (\n        <span className=\"ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]\">\n          {shortcut ?? children}\n        </span>\n      )}\n      {showExternal && (\n        <SquareArrowUpRightIcon\n          size={16}\n          className=\"text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]\"\n        />\n      )}\n    </span>\n  );\n});\nSidebarSecondaryMenuItemExtras.displayName = 'SidebarSecondaryMenuItemExtras';\n\nexport interface SidebarSecondaryCollapseTriggerProps extends Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'children'\n> {\n  /** Icon shown when the sidebar is expanded (collapse affordance). */\n  icon?: React.ReactNode;\n  /** Icon shown when the sidebar is collapsed (expand affordance). Falls back to `icon` when omitted. */\n  expandIcon?: React.ReactNode;\n  /** Tooltip text shown when the sidebar is collapsed. Defaults to `'Expand'`. */\n  expandTooltip?: React.ReactNode;\n  /** Trailing extras (e.g. a keyboard shortcut hint), same slot as `SidebarSecondaryMenuItem`. */\n  extras?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\n// The footer \"Collapse menu\" affordance. A row-styled `<button>` that flips the\n// panel width via the layout context — the live wiring for the controllable\n// `expanded` state (B1). Keeps its label as `sr-only` in collapsed mode.\n// When collapsed, wraps the button in a Tooltip showing \"Expand\".\nconst SidebarSecondaryCollapseTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarSecondaryCollapseTriggerProps\n>(\n  (\n    {\n      className,\n      icon,\n      expandIcon,\n      expandTooltip = 'Expand',\n      extras,\n      children,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const { expanded, toggleExpanded } = useSidebarSecondaryContext();\n    const dir = useDocDir();\n    const labelRef = React.useRef<HTMLSpanElement>(null);\n    const isOverflowing = useIsOverflowing(labelRef, { enabled: expanded });\n\n    const activeIcon = expanded ? icon : (expandIcon ?? icon);\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={expanded}\n        className={cn(\n          sidebarSecondaryMenuItemVariants({ variant: 'unselected' }),\n          'text-start',\n          className\n        )}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) toggleExpanded();\n        }}\n        {...props}\n      >\n        {activeIcon != null && (\n          <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] rtl:-scale-x-100\">\n            {activeIcon}\n          </span>\n        )}\n        <Tooltip disabled={!isOverflowing}>\n          <TooltipTrigger\n            render={\n              <span\n                ref={labelRef}\n                className={cn('flex-1 min-w-[60px] truncate', !expanded && 'sr-only')}\n              />\n            }\n          >\n            {children}\n          </TooltipTrigger>\n          <TooltipContent>{children}</TooltipContent>\n        </Tooltip>\n        {extras}\n      </button>\n    );\n\n    return (\n      <li className=\"contents\">\n        {expanded ? (\n          button\n        ) : (\n          <Tooltip>\n            <TooltipTrigger render={button} />\n            <TooltipContent side={dir === 'rtl' ? 'left' : 'right'}>\n              {expandTooltip}\n            </TooltipContent>\n          </Tooltip>\n        )}\n      </li>\n    );\n  }\n);\nSidebarSecondaryCollapseTrigger.displayName = 'SidebarSecondaryCollapseTrigger';\n\nexport {\n  SidebarSecondary,\n  SidebarSecondaryHeader,\n  SidebarSecondaryContent,\n  SidebarSecondaryCollapsedBreadcrumb,\n  SidebarSecondaryFooter,\n  SidebarSecondarySection,\n  SidebarSecondarySectionLabel,\n  SidebarSecondaryMenu,\n  SidebarSecondaryMenuItem,\n  SidebarSecondaryMenuItemExtras,\n  SidebarSecondaryCollapseTrigger,\n  sidebarSecondaryMenuItemVariants,\n};\n"],"names":["useDocDir","dir","setDir","React","useIsOverflowing","ref","enabled","isOverflowing","setIsOverflowing","element","measure","observer","SIDEBAR_EXPANDED_WIDTH","SIDEBAR_MAX_WIDTH","defaultResizeTooltipExpanded","jsxs","Fragment","jsx","defaultResizeTooltipCollapsed","SidebarSecondaryContext","useSidebarSecondaryContext","useControllableBoolean","controlled","defaultValue","onChange","uncontrolled","setUncontrolled","isControlled","value","setValue","next","SidebarSecondaryResizeEdge","ctx","expanded","toggleExpanded","resizable","ctxRef","didDragRef","tooltipOpen","setTooltipOpen","dragging","setDragging","clickTimerRef","handlePointerDown","e","el","sidebarEl","isRtl","sidebarRect","minWidth","maxWidth","collapseThreshold","onPointerMove","ev","newWidth","isExpanded","onPointerUp","handleClick","handleDoubleClick","handleKeyDown","defaultWidth","w","sw","exp","te","step","growKey","shrinkKey","Tooltip","open","TooltipTrigger","cn","TooltipContent","SidebarSecondary","className","expandedProp","defaultExpanded","onExpandedChange","resizableProp","widthProp","onWidthChange","resizeAriaLabel","resizeTooltipExpanded","resizeTooltipCollapsed","ariaLabel","render","children","props","setExpanded","width","setWidthState","isWidthControlled","currentWidth","setWidth","headerLabel","setHeaderLabel","selectedLabel","setSelectedLabel","context","useRender","mergeProps","SidebarSecondaryCollapsedBreadcrumb","SidebarSecondaryHeader","label","resolvedLabel","SidebarSecondaryContent","parentLabel","currentLabel","separator","resolvedParent","resolvedCurrent","ChevronDownIcon","SidebarSecondaryFooter","SidebarSecondarySectionContext","SECTION_STATIC","SECTION_EXPANDABLE","SidebarSecondarySection","expandable","defaultOpen","onOpenChange","sectionClass","Collapsible","sectionLabelTextClass","sectionHeaderPadClass","SidebarSecondarySectionLabel","actions","unreadRollup","labelRef","labelTooltip","base","SidebarSecondaryMenu","list","sidebarSecondaryRowClasses","sidebarSecondaryMenuItemVariants","cva","SidebarSecondaryMenuItem","selected","icon","extras","inner","SidebarSecondaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarSecondaryCollapseTrigger","expandIcon","expandTooltip","onClick","activeIcon","button","event"],"mappings":"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"}

package/dist/components/ui/switch/switch.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as b } from "react/jsx-runtime";
 import * as r from "react";
-import { Switch as s } from "@base-ui/react/switch";
+import { Switch as t } from "@base-ui/react/switch";
 import { cn as i } from "../../../lib/utils.js";
 const u = i(
   "group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors",
@@ -9,17 +9,17 @@ const u = i(
   "data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]"
 ), h = i(
   "block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform",
-  "data-[checked]:translate-x-4",
+  "ltr:data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4",
   "group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]"
-), m = r.forwardRef(({ className: t, label: a, ...c }, d) => {
+), m = r.forwardRef(({ className: s, label: a, ...c }, d) => {
   const n = r.useId(), e = a != null ? `${n}-label` : void 0, l = /* @__PURE__ */ o(
-    s.Root,
+    t.Root,
     {
       ref: d,
       "aria-labelledby": e,
-      className: i(u, t),
+      className: i(u, s),
       ...c,
-      children: /* @__PURE__ */ o(s.Thumb, { className: h })
+      children: /* @__PURE__ */ o(t.Thumb, { className: h })
     }
   );
   return a == null ? l : /* @__PURE__ */ b("label", { className: "inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]", children: [

package/dist/components/ui/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\n// A binary on/off toggle: a Base UI Switch themed with the next-gen `--ui-switch-*`\n// `box`/`tick` token tier. A 32×16 track with a 12px thumb; the track fill is wired\n// per checked-state — off (`--ui-switch-off-box-color-idle`) / on\n// (`--ui-switch-on-box-color-idle`, green) — and disabled swaps to the muted box\n// fill + a light `tick`, plus a 1px inset border\n// (`--ui-switch-global-box-border-color-disabled`). Keyboard focus paints a 3px\n// `--ui-focus-primary` ring. The design has no hover/active color change (those token\n// stops equal idle). The disabled border is an inset box-shadow so it doesn't shrink\n// the 12px thumb's box (the Figma stroke is drawn inside).\n//\n// An optional `label` composes the full Figma field: the toggle plus its label in a\n// clickable `<label>` row (a Base UI switch renders a labelable <button>, so clicking\n// the text toggles it), wired via aria-labelledby and tinted with\n// `--ui-switch-global-label-color`. With no label, the bare toggle renders — name it\n// with `aria-label`.\nconst trackClasses = cn(\n  'group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors',\n  'data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]',\n  'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]'\n);\n\nconst thumbClasses = cn(\n  'block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform',\n  'data-[checked]:translate-x-4',\n  'group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]'\n);\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {\n  /** Optional label rendered beside the toggle; names the control. */\n  label?: React.ReactNode;\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n\n  const root = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      aria-labelledby={labelId}\n      className={cn(trackClasses, className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={thumbClasses} />\n    </SwitchPrimitive.Root>\n  );\n\n  if (label == null) return root;\n\n  return (\n    <label className=\"inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]\">\n      {root}\n      <span\n        id={labelId}\n        className=\"text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n});\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n"],"names":["trackClasses","cn","thumbClasses","Switch","React","className","label","props","ref","reactId","labelId","root","jsx","SwitchPrimitive","jsxs"],"mappings":";;;;AAoBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAeD;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAQME,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAAQ;AACzC,QAAMC,IAAUL,EAAM,MAAA,GAChBM,IAAUJ,KAAS,OAAO,GAAGG,CAAO,WAAW,QAE/CE,IACJ,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAL;AAAA,MACA,mBAAiBE;AAAA,MACjB,WAAWT,EAAGD,GAAcK,CAAS;AAAA,MACpC,GAAGE;AAAA,MAEJ,UAAA,gBAAAK,EAACC,EAAgB,OAAhB,EAAsB,WAAWX,EAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAIpD,SAAII,KAAS,OAAaK,IAGxB,gBAAAG,EAAC,SAAA,EAAM,WAAU,uFACd,UAAA;AAAA,IAAAH;AAAA,IACD,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIF;AAAA,QACJ,WAAU;AAAA,QAET,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACDH,EAAO,cAAc;"}
+{"version":3,"file":"switch.js","sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\n// A binary on/off toggle: a Base UI Switch themed with the next-gen `--ui-switch-*`\n// `box`/`tick` token tier. A 32×16 track with a 12px thumb; the track fill is wired\n// per checked-state — off (`--ui-switch-off-box-color-idle`) / on\n// (`--ui-switch-on-box-color-idle`, green) — and disabled swaps to the muted box\n// fill + a light `tick`, plus a 1px inset border\n// (`--ui-switch-global-box-border-color-disabled`). Keyboard focus paints a 3px\n// `--ui-focus-primary` ring. The design has no hover/active color change (those token\n// stops equal idle). The disabled border is an inset box-shadow so it doesn't shrink\n// the 12px thumb's box (the Figma stroke is drawn inside).\n//\n// An optional `label` composes the full Figma field: the toggle plus its label in a\n// clickable `<label>` row (a Base UI switch renders a labelable <button>, so clicking\n// the text toggles it), wired via aria-labelledby and tinted with\n// `--ui-switch-global-label-color`. With no label, the bare toggle renders — name it\n// with `aria-label`.\nconst trackClasses = cn(\n  'group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors',\n  'data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]',\n  'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]'\n);\n\nconst thumbClasses = cn(\n  'block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform',\n  'ltr:data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4',\n  'group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]'\n);\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {\n  /** Optional label rendered beside the toggle; names the control. */\n  label?: React.ReactNode;\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n\n  const root = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      aria-labelledby={labelId}\n      className={cn(trackClasses, className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={thumbClasses} />\n    </SwitchPrimitive.Root>\n  );\n\n  if (label == null) return root;\n\n  return (\n    <label className=\"inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]\">\n      {root}\n      <span\n        id={labelId}\n        className=\"text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n});\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n"],"names":["trackClasses","cn","thumbClasses","Switch","React","className","label","props","ref","reactId","labelId","root","jsx","SwitchPrimitive","jsxs"],"mappings":";;;;AAoBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAeD;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAQME,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAAQ;AACzC,QAAMC,IAAUL,EAAM,MAAA,GAChBM,IAAUJ,KAAS,OAAO,GAAGG,CAAO,WAAW,QAE/CE,IACJ,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAL;AAAA,MACA,mBAAiBE;AAAA,MACjB,WAAWT,EAAGD,GAAcK,CAAS;AAAA,MACpC,GAAGE;AAAA,MAEJ,UAAA,gBAAAK,EAACC,EAAgB,OAAhB,EAAsB,WAAWX,EAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAIpD,SAAII,KAAS,OAAaK,IAGxB,gBAAAG,EAAC,SAAA,EAAM,WAAU,uFACd,UAAA;AAAA,IAAAH;AAAA,IACD,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIF;AAAA,QACJ,WAAU;AAAA,QAET,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACDH,EAAO,cAAc;"}

package/dist/components/ui/table/table.js

@@ -1,8 +1,8 @@
 import { jsx as l, jsxs as b } from "react/jsx-runtime";
 import * as t from "react";
-import { ArrowUpIcon as n, ArrowDownIcon as m, ArrowsDownUpIcon as f } from "@acronis-platform/icons-react/stroke-mono";
+import { ArrowUpIcon as n, ArrowDownIcon as m, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as r } from "../../../lib/utils.js";
-const u = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ l(
+const f = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ l(
   "table",
   {
     ref: o,
@@ -13,7 +13,7 @@ const u = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l("div", {
     ...e
   }
 ) }));
-u.displayName = "Table";
+f.displayName = "Table";
 const p = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l("thead", { ref: o, className: r(a), ...e }));
 p.displayName = "TableHeader";
 const v = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
@@ -54,7 +54,7 @@ const h = t.forwardRef(
 h.displayName = "TableRow";
 function x({ direction: a }) {
   const e = "size-[var(--ui-table-header-sort-icon-size)]";
-  return a === "asc" ? /* @__PURE__ */ l(n, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ l(m, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ l(f, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
+  return a === "asc" ? /* @__PURE__ */ l(n, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ l(m, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ l(u, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
 }
 const w = t.forwardRef(
   ({ className: a, children: e, sortable: o, sortDirection: s = !1, onSort: i, ...c }, d) => /* @__PURE__ */ l(
@@ -63,7 +63,7 @@ const w = t.forwardRef(
       ref: d,
       "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : o ? "none" : void 0,
       className: r(
-        "h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0",
+        "h-10 px-[var(--ui-table-header-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0",
         o && "cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]",
         a
       ),
@@ -89,7 +89,7 @@ const N = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   {
     ref: o,
     className: r(
-      "h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      "h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0",
       a
     ),
     ...e
@@ -106,7 +106,7 @@ const T = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
 ));
 T.displayName = "TableCaption";
 export {
-  u as Table,
+  f as Table,
   v as TableBody,
   T as TableCaption,
   N as TableCell,

package/dist/components/ui/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{border-color,padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,cell-padding-x,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-cell-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, children, sortable, sortDirection = false, onSort, ...props }, ref) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0',\n        sortable &&\n          'cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","jsxs","TableCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{border-color,padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,cell-padding-x,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-cell-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, children, sortable, sortDirection = false, onSort, ...props }, ref) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'h-10 px-[var(--ui-table-header-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0',\n        sortable &&\n          'cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","jsxs","TableCell","TableCaption"],"mappings":"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"}

package/dist/components/ui/tabs/tabs.js

@@ -1,32 +1,32 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as o from "react";
-import { Tabs as a } from "@base-ui/react/tabs";
+import { Tabs as r } from "@base-ui/react/tabs";
 import { cn as t } from "../../../lib/utils.js";
-const b = a.Root, n = o.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ i(
-  a.List,
+const b = r.Root, n = o.forwardRef(({ className: e, ...s }, a) => /* @__PURE__ */ i(
+  r.List,
   {
-    ref: r,
+    ref: a,
     className: t("inline-flex items-stretch rounded-md", e),
     ...s
   }
 ));
 n.displayName = "TabsList";
-const d = o.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ i(
-  a.Tab,
+const d = o.forwardRef(({ className: e, ...s }, a) => /* @__PURE__ */ i(
+  r.Tab,
   {
-    ref: r,
+    ref: a,
     className: t(
-      "-mr-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-l-md last:-mr-0 last:rounded-r-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground",
+      "-me-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-s-md last:-me-0 last:rounded-e-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground",
       e
     ),
     ...s
   }
 ));
 d.displayName = "TabsTrigger";
-const m = o.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ i(
-  a.Panel,
+const m = o.forwardRef(({ className: e, ...s }, a) => /* @__PURE__ */ i(
+  r.Panel,
   {
-    ref: r,
+    ref: a,
     className: t(
       "mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
       e

package/dist/components/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `tabs`\n// (packages/ui-legacy/src/components/ui/tabs.tsx). A bordered segmented-control\n// tab group built on the Base UI Tabs primitive (keyboard nav, roving focus,\n// ARIA come from Base UI). No `--ui-tabs-*` token tier exists yet, so this\n// design-pending v1 themes from the shared semantic tokens:\n//   • trigger idle   -> border-secondary + text-secondary (brand outline segment)\n//   • trigger active -> bg-secondary + text-primary-foreground (data-[active])\n//     — pure-white label (glyph-on-brand-primary), like the default Button;\n//     NOT text-secondary-foreground, which is a dimmed 60% white.\n//   • focus ring     -> var(--ui-focus-primary)\n// NB: the brand action blue is the `secondary` bridge (--ui-background-brand-\n// secondary, the same blue Button's primary uses); `primary` bridges to the\n// dark navy --ui-background-brand-primary, so it is NOT used here.\n// The legacy active treatment was a `bg-primary/10` tint; the opacity hack is\n// dropped for a token-pure filled segment. Reconcile (and a possible\n// `--ui-tabs-*` tier / underline-indicator variant) with\n// `/figma-component Tabs <url> --update` once a mockup lands.\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn('inline-flex items-stretch rounded-md', className)}\n    {...props}\n  />\n));\nTabsList.displayName = 'TabsList';\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Tab>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Tab>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Tab\n    ref={ref}\n    className={cn(\n      '-mr-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-l-md last:-mr-0 last:rounded-r-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nTabsTrigger.displayName = 'TabsTrigger';\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Panel>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Panel>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Panel\n    ref={ref}\n    className={cn(\n      'mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = 'TabsContent';\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":["Tabs","TabsPrimitive","TabsList","React","className","props","ref","jsx","cn","TabsTrigger","TabsContent"],"mappings":";;;;AAuBA,MAAMA,IAAOC,EAAc,MAErBC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAG,wCAAwCJ,CAAS;AAAA,IAC9D,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAE1B,MAAMC,IAAcP,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `tabs`\n// (packages/ui-legacy/src/components/ui/tabs.tsx). A bordered segmented-control\n// tab group built on the Base UI Tabs primitive (keyboard nav, roving focus,\n// ARIA come from Base UI). No `--ui-tabs-*` token tier exists yet, so this\n// design-pending v1 themes from the shared semantic tokens:\n//   • trigger idle   -> border-secondary + text-secondary (brand outline segment)\n//   • trigger active -> bg-secondary + text-primary-foreground (data-[active])\n//     — pure-white label (glyph-on-brand-primary), like the default Button;\n//     NOT text-secondary-foreground, which is a dimmed 60% white.\n//   • focus ring     -> var(--ui-focus-primary)\n// NB: the brand action blue is the `secondary` bridge (--ui-background-brand-\n// secondary, the same blue Button's primary uses); `primary` bridges to the\n// dark navy --ui-background-brand-primary, so it is NOT used here.\n// The legacy active treatment was a `bg-primary/10` tint; the opacity hack is\n// dropped for a token-pure filled segment. Reconcile (and a possible\n// `--ui-tabs-*` tier / underline-indicator variant) with\n// `/figma-component Tabs <url> --update` once a mockup lands.\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn('inline-flex items-stretch rounded-md', className)}\n    {...props}\n  />\n));\nTabsList.displayName = 'TabsList';\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Tab>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Tab>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Tab\n    ref={ref}\n    className={cn(\n      '-me-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-s-md last:-me-0 last:rounded-e-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nTabsTrigger.displayName = 'TabsTrigger';\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Panel>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Panel>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Panel\n    ref={ref}\n    className={cn(\n      'mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = 'TabsContent';\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":["Tabs","TabsPrimitive","TabsList","React","className","props","ref","jsx","cn","TabsTrigger","TabsContent"],"mappings":";;;;AAuBA,MAAMA,IAAOC,EAAc,MAErBC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAG,wCAAwCJ,CAAS;AAAA,IAC9D,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAE1B,MAAMC,IAAcP,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;"}