@bitrise/bitkit-v2 0.3.475 → 0.3.477-beta.3026

package/dist/components/BitkitTour/BitkitTour.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTour.js","names":[],"sources":["../../../lib/components/BitkitTour/BitkitTour.tsx"],"sourcesContent":["import {\n  Tour as ArkTour,\n  type TourStepDetails,\n  useTour,\n  type UseTourProps,\n  type UseTourReturn,\n} from '@ark-ui/react/tour';\nimport { Box } from '@chakra-ui/react/box';\nimport { useEnvironmentContext } from '@chakra-ui/react/environment';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { isIos } from '@zag-js/dom-query';\nimport { preventBodyScroll } from '@zag-js/remove-scroll';\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\ntype BitkitTourStepAction = NonNullable<TourStepDetails['actions']>[number];\n\n/**\n * The link-style action in the footer, e.g. `Skip tour` or `Learn more`. It either drives the tour\n * (`action`) or leaves the page (`href`) — the union makes passing both, or neither, a type error.\n */\nexport type BitkitTourSecondaryAction =\n  | {\n      /**\n       * A tour action — `'skip'`, `'dismiss'`, `'next'`, `'prev'`, or a function that receives the\n       * action map (`{ next, prev, dismiss, skip, goto }`) to do something else first.\n       */\n      action: NonNullable<BitkitTourStepAction['action']>;\n      href?: never;\n      label: string;\n    }\n  | {\n      action?: never;\n      /** Renders the action as a link out. */\n      href: string;\n      /** Opens the link in a new tab, with the matching `rel`. */\n      isExternal?: boolean;\n      label: string;\n    };\n\n/**\n * A single step of the tour. On top of Ark's step details it carries the three Bitkit slots —\n * `badge`, `content` and `secondaryAction`. Zag spreads the whole step object when it normalises\n * it, so these reach `tour.step` untouched. (Zag also offers a `meta` bag for this; flat fields\n * read better at the call site, at the cost of a name clash if Zag ever adds one of these.)\n *\n * Ark's step `type` is not part of this: every step is a card anchored to an element, so the hook\n * sets it. `target` is required for the same reason — Zag turns a step without one into a centred\n * dialog, which is a presentation this component doesn't have.\n */\nexport type BitkitTourStep = Omit<TourStepDetails, 'type'> & {\n  /**\n   * Rendered next to the title — a `BitkitBadge` in practice, e.g. `BETA` or `NEW`. Nothing about\n   * the badge is fixed here beyond its placement: the element itself comes from the caller.\n   */\n  badge?: ReactNode;\n  /** Rendered between the description and the footer — an image, a video, a table, anything. */\n  content?: ReactNode;\n  secondaryAction?: BitkitTourSecondaryAction;\n  /** The element the step points at. */\n  target: NonNullable<TourStepDetails['target']>;\n};\n\nexport interface BitkitTourOptions extends Omit<UseTourProps, 'closeOnInteractOutside' | 'onStepsChange' | 'steps'> {\n  /**\n   * Called whenever the tour ends, whichever way it ended — the close button, `Skip tour`, the last\n   * step's action, or a target that never appeared. It is the counterpart to `open`: turn your own\n   * value false here and the tour can be opened again, without having to know which of Zag's five\n   * statuses mean \"over\". `onStatusChange` still reports which one it was, for deciding whether to\n   * record the tour as seen.\n   */\n  onClose?: () => void;\n  /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */\n  onStepsChange?: (details: { steps: BitkitTourStep[] }) => void;\n  /**\n   * Drives the tour from a value the caller already has — it starts when this turns true and closes\n   * when it turns false. This is how a tour is opened: it announces something, so it appears once\n   * the user is eligible for it, never in answer to the interaction it would interrupt.\n   *\n   * Only the transitions count: a tour that ends on its own — `Skip tour`, a lost target, the last\n   * step — stays closed while this is still true, and starts again on the next `false → true`.\n   */\n  open?: boolean;\n  steps: BitkitTourStep[];\n}\n/** The tour api returned by `useBitkitTour` — pass it around to control the tour from anywhere. */\nexport type BitkitTourInstance = Omit<UseTourReturn, 'addStep' | 'setSteps' | 'step' | 'updateStep'> & {\n  addStep: (step: BitkitTourStep) => void;\n  setSteps: (steps: BitkitTourStep[]) => void;\n  /** The current step, with the Bitkit slots (`badge`, `content`, `secondaryAction`) still typed on it. */\n  step: BitkitTourStep | null;\n  /** Closes the tour, the same way its close button does. */\n  dismiss: () => void;\n  updateStep: (id: string, stepOverrides: Partial<BitkitTourStep>) => void;\n};\nexport type BitkitTourProps = {\n  /** The tour instance returned by `useBitkitTour`. */\n  tour: BitkitTourInstance;\n};\n\n/**\n * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options\n * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …) and\n * returns the api that reports and navigates it: `step`, `stepIndex`, `totalSteps`, `next()`,\n * `prev()`, `setStep()`. Closing on a click outside isn't among them — see below.\n *\n * A one-step tour announces a feature, and behaves the same wherever it's used:\n *\n * - it appears on its own — `open` turns true once the user is eligible, and nothing has to be\n *   clicked to bring it up;\n * - dismissing it closes it, and it doesn't come back;\n * - acting on the control it points at closes it too, reported as a dismissal like any other, so\n *   the target keeps doing whatever it did before;\n * - until one of those two happens, a reload or a new session brings it back — which means the\n *   dismissal is recorded for the user in `onStatusChange`, not kept in page state.\n */\nexport const useBitkitTour = (options: BitkitTourOptions): BitkitTourInstance => {\n  // The document the tour lives in — the global one unless a consumer renders under an\n  // `EnvironmentProvider`, e.g. into an iframe. Same route Zag's own machines take.\n  const { getDocument } = useEnvironmentContext();\n\n  // `onClose` is ours, not Zag's, so it is kept out of what reaches the machine. The ref keeps an\n  // inline callback from giving the machine a new `onStatusChange` on every render.\n  const { onClose, ...tourOptions } = options;\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n  // Zag reports the end of a tour more than once — a dismissal on the last step emits `dismissed`\n  // and then `completed` — so the run, not the status, is what `onClose` is tied to. Guarding on the\n  // status names instead would encode which pairs the machine currently emits together.\n  const hasClosedRef = useRef(false);\n\n  const tour = useTour({\n    // The highlight sits 8 around the target, and the card 12 from the highlight — the 8 the arrow\n    // takes plus the 4 gap the design asks for. Both are measured from the highlight, since Zag\n    // grows the anchor rect by `spotlightOffset` before positioning. `offset.mainAxis` replaces\n    // Zag's own gutter, and Popper adds half the arrow's box on top of it: 6 + 5.65 ≈ the 12.\n    spotlightOffset: { x: 8, y: 8 },\n    // 4 is also Zag's current default, but the design asks for it and a third-party default is not\n    // ours to rely on — the z-index contract already moved under us once between two minors.\n    spotlightRadius: 4,\n    ...tourOptions,\n    // Not part of the options, and set after the spread so it can't be turned back on: a tour is a\n    // guided flow with its own ways out — the close button, `Skip tour`, `Done` — and Zag would\n    // otherwise end it on any click outside the card, losing the whole thing to a stray click on\n    // the dimmed page. Escape is a deliberate keystroke rather than a stray click, so it keeps\n    // closing the tour by default — and unlike this one, `closeOnEscape` stays in the options for\n    // callers who want it off.\n    closeOnInteractOutside: false,\n    // Every status other than `started` is the tour ending, and `onClose` is what saves callers from\n    // knowing that. The caller's own `onStatusChange` runs first and unchanged — it reports every\n    // status, including the ones `onClose` collapses.\n    onStatusChange: (details) => {\n      tourOptions.onStatusChange?.(details);\n\n      if (details.status === 'started') {\n        hasClosedRef.current = false;\n\n        return;\n      }\n\n      if (hasClosedRef.current) {\n        return;\n      }\n\n      hasClosedRef.current = true;\n      onCloseRef.current?.();\n    },\n    // Same reason as the cast on `Tour.Root` below: our step type isn't a supertype of Ark's, so a\n    // callback taking ours doesn't match the signature Ark declares. The payload is Ark's.\n    onStepsChange: tourOptions.onStepsChange as UseTourProps['onStepsChange'],\n    // Zag's default is `close tour`, and this one is visible rather than screen-reader only: the\n    // close button shows its own aria-label in a tooltip. The rest of Zag's translations\n    // (`nextStep`, `prevStep`, `skip`) stay as they are — those only ever reach assistive tech.\n    translations: { close: 'Close tour', ...tourOptions.translations },\n    // `type` last: there is one presentation, so it isn't the caller's to pick.\n    steps: tourOptions.steps.map((step) => ({ offset: { mainAxis: 6 }, ...step, type: 'tooltip' as const })),\n  });\n\n  // Zag's api can start a tour but not stop one. Its close trigger's click handler *is* the\n  // machine's dismiss, so this borrows that instead of reaching into the machine. The cast says\n  // what the handler is rather than manufacturing an event for it: `actionMap.dismiss` takes none.\n  const dismiss = useCallback(() => {\n    const closeTriggerClick = tour.getCloseTriggerProps().onClick as (() => void) | undefined;\n\n    closeTriggerClick?.();\n  }, [tour]);\n\n  // A single-step tour points at one control, and operating that control is the same\n  // acknowledgement its close button is — there is no next step to go to, so the tour is done. Zag\n  // leaves the target clickable on purpose (it excludes it from interact-outside), so without this\n  // every caller has to wire the dismissal into the target's own handler, and the ones that forget\n  // show the tour again on the user's next visit. Multi-step tours are left alone: there, clicking\n  // the highlighted control could as easily mean \"go on\" as \"I'm done\", which isn't ours to guess.\n  //\n  // The listener is on the document rather than the target, resolving the target when the click\n  // happens: the target can re-render while the tour is open, and capture runs even when the\n  // caller's own handler stops propagation. `click` rather than `pointerdown` — a right-click or an\n  // abandoned drag isn't acting on it — and it still runs before a link's navigation, so a caller\n  // that records the dismissal gets its request away.\n  // `dismiss` closes over `tour`, which is a new object on every render, so listing it would put the\n  // effects below on every render as well — attaching and detaching the listener for nothing.\n  const dismissRef = useRef(dismiss);\n  dismissRef.current = dismiss;\n\n  const isSingleStep = options.steps.length === 1;\n  useEffect(() => {\n    if (!tour.open || !isSingleStep) {\n      return undefined;\n    }\n\n    const onDocumentClick = (event: MouseEvent) => {\n      const target = tour.step?.target?.();\n\n      // The event path rather than `target.contains(event.target)`: under an `EnvironmentProvider`\n      // the click comes from another realm, where a node is not an instance of this one's `Node`, so\n      // narrowing it that way is always false — and the path crosses shadow boundaries as well.\n      if (target && event.composedPath().includes(target)) {\n        dismissRef.current();\n      }\n    };\n\n    const doc = getDocument();\n\n    doc.addEventListener('click', onDocumentClick, true);\n\n    return () => doc.removeEventListener('click', onDocumentClick, true);\n    // `tour` is a new object on every render; the machine's own state is what matters here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [getDocument, isSingleStep, tour.open, tour.step?.id]);\n\n  // Edge-triggered, on the prop's own `false → true`: comparing it against `tour.open` instead made\n  // every close the machine performs for its own reasons look like a caller who wants the tour open,\n  // and started it again. Zag reports five statuses and callers reasonably handle `dismissed` only,\n  // so `Skip tour` (`skipped`) and a target that goes missing (`not-found`) both closed the tour and\n  // had it come straight back at step one. `undefined` as the initial value so an `open` that is\n  // already true on mount still starts the tour.\n  const { open } = tourOptions;\n  const previousOpen = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (open === undefined || open === previousOpen.current) {\n      return;\n    }\n\n    previousOpen.current = open;\n\n    if (open) {\n      tour.start();\n    } else {\n      dismissRef.current();\n    }\n    // `tour` is a new object on every render, and reacting to the machine's own `open` is exactly\n    // what this effect must not do.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  return { ...tour, dismiss, step: tour.step as BitkitTourStep | null };\n};\n\n// The Ark parts aren't Chakra components, so they're wrapped with the `chakra()` factory to accept\n// `css`. They're deliberately NOT wrapped with `asChild`: each Ark part falls back to the current\n// step's content (title, description, progress text, action label) only when it renders its own\n// children, and `asChild` would replace those children with the wrapper element.\nconst TourBackdrop = chakra(ArkTour.Backdrop);\nconst TourSpotlight = chakra(ArkTour.Spotlight);\nconst TourPositioner = chakra(ArkTour.Positioner);\nconst TourContent = chakra(ArkTour.Content);\nconst TourArrow = chakra(ArkTour.Arrow);\nconst TourArrowTip = chakra(ArkTour.ArrowTip);\nconst TourTitle = chakra(ArkTour.Title);\nconst TourDescription = chakra(ArkTour.Description);\nconst TourControl = chakra(ArkTour.Control);\nconst TourProgressText = chakra(ArkTour.ProgressText);\n\nconst SecondaryAction = ({ secondaryAction }: { secondaryAction: BitkitTourSecondaryAction }) => {\n  const { action, href, label } = secondaryAction;\n\n  if (href !== undefined) {\n    return (\n      <BitkitButton href={href} isExternal={secondaryAction.isExternal} size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    );\n  }\n\n  if (!action) return null;\n\n  return (\n    <ArkTour.ActionTrigger asChild action={{ action, label }} aria-label={label}>\n      <BitkitButton size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    </ArkTour.ActionTrigger>\n  );\n};\n\n/**\n * A guided product tour: a step card anchored to an element on the page, with a spotlight cut out\n * of the dimmed backdrop around that element.\n *\n * The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render\n * `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one\n * is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what\n * turns the card into the single-feature presentation.\n */\nconst BitkitTour = ({ tour }: BitkitTourProps) => {\n  const recipe = useSlotRecipe({ key: 'tour' });\n  const styles = recipe();\n  const step = tour.step;\n  const actions = step?.actions ?? [];\n\n  // Zag traps focus with fixed options, so it lands on the card's first tabbable — the close button,\n  // which means a screen reader opens the tour on `Close tour` instead of on what the step says. The\n  // card is what should take it: Zag gives the content `role=\"alertdialog\"`, `tabIndex: -1` and the\n  // `aria-labelledby`/`aria-describedby` pair exactly so it can be focused and read out. Measured\n  // alternatives that don't work: making the card tabbable (the trap picks a descendant either way)\n  // and a ref (it doesn't survive the `chakra()`-wrapped Ark part). This corrects the trap's choice\n  // instead of trying to beat it — the trap activates asynchronously too, and racing it with a frame\n  // loses whenever the first paint is slow. The listener takes the first focus that lands anywhere\n  // in the card, moves it to the card itself and then steps out of the way, so everything after it\n  // (Tab, the buttons, a click) behaves normally. It arms on open and not per step, so stepping on\n  // keeps the focus on the button that did it, rather than pulling the next keystroke back to the\n  // card. The lookup goes through the machine's own content id, so two mounted tours can't reach\n  // each other's card.\n  //\n  // The tour machine is the one Zag component that can't be told where to put focus: `dialog` takes\n  // an `initialFocusEl` and hands it to the same trap, and even defaults an `alertdialog` to its\n  // close trigger deliberately. Once the tour has that prop too, this effect goes away.\n  const { open } = tour;\n  // Everything below reaches for the document through the environment rather than the global one:\n  // under an `EnvironmentProvider` — a consumer rendering into an iframe — that is the document the\n  // portal, and so the tour, actually lives in. Zag's own machines take the same route.\n  const { getDocument } = useEnvironmentContext();\n\n  // The tour machine has no scroll handling of its own — no `preventScroll` prop, no listener —\n  // while Zag's dialog machine locks the body through this same helper. The tour needs it just as\n  // much: everything it paints is positioned in document coordinates from a target it resolves once,\n  // when the step opens, and never looks up again. Let the page scroll and any layout that swaps its\n  // elements around — a sticky header that moves its buttons into a portal is the common one —\n  // leaves the machine anchored to a node that is no longer in the document. A detached node\n  // measures zero, so the card, the spotlight and the backdrop's cut-out all collapse into the\n  // top-left corner of the page. Locking is the honest reading of the presentation anyway: the tour\n  // dims the page and takes focus, exactly like a modal dialog.\n  // Not on iOS, where the helper pins `<body>` with `position: fixed` instead of hiding the\n  // overflow: from there the machine's `scrollIntoView` on step entry can't move the viewport, so a\n  // target below the fold is unreachable and the tour locks the user onto a step they can't see —\n  // worse than the misalignment the lock is here to prevent. (`overflow: hidden` leaves programmatic\n  // scrolling alone, which is what makes the lock safe everywhere else.)\n  useEffect(() => (open && !isIos() ? preventBodyScroll(getDocument()) : undefined), [getDocument, open]);\n\n  const contentId = tour.getContentProps().id;\n  useEffect(() => {\n    if (!open || contentId === undefined) {\n      return undefined;\n    }\n\n    const contentEl = getDocument().getElementById(contentId);\n    if (!contentEl) {\n      return undefined;\n    }\n\n    const takeFocus = () => {\n      contentEl.removeEventListener('focusin', takeFocus);\n      // `preventScroll`, because this runs before Popper has placed the card, and until then the\n      // card is parked off-screen at `-100vh` — a plain `focus()` scrolls the page up to it and\n      // leaves the user looking at the top of the page with a tour they can't see. Zag passes the\n      // same option everywhere it moves focus itself.\n      contentEl.focus({ preventScroll: true });\n    };\n\n    contentEl.addEventListener('focusin', takeFocus);\n\n    return () => contentEl.removeEventListener('focusin', takeFocus);\n  }, [contentId, getDocument, open]);\n\n  return (\n    // `unmountOnExit` so a closed tour leaves nothing behind: the card, the backdrop and the\n    // spotlight are all page-level overlays, and there is no state to keep alive between two runs.\n    // The cast is the price of refining `step` and the step-mutating methods on the instance: our\n    // step type isn't a supertype of Ark's, so the methods no longer match its api signature. The\n    // object is Ark's api — only the types are ours.\n    <ArkTour.Root unmountOnExit tour={tour as UseTourReturn}>\n      <Portal>\n        <TourBackdrop css={styles.backdrop} />\n        <TourSpotlight css={styles.spotlight} />\n        <TourPositioner css={styles.positioner}>\n          <TourContent css={styles.content}>\n            {/* `hidden={false}` overrides Zag, which hides the arrow until the card has been\n                positioned — while Popper computes that position from the arrow's `clientHeight`, so\n                a hidden arrow measures 0 and the card lands 6 short of the design's 12, then drops\n                by that 6 as soon as anything recomputes. Nothing shows in the meantime: until it is\n                positioned the card itself sits off-screen at `-100vh`. */}\n            <TourArrow css={styles.arrow} hidden={false}>\n              <TourArrowTip css={styles.arrowTip} />\n            </TourArrow>\n            <Box css={styles.header}>\n              <Box css={styles.titleGroup}>\n                {tour.totalSteps > 1 ? <TourProgressText css={styles.progressText} /> : null}\n                <Box css={styles.titleRow}>\n                  <TourTitle css={styles.title} />\n                  {step?.badge ? <Box css={styles.badge}>{step.badge}</Box> : null}\n                </Box>\n              </Box>\n              <ArkTour.CloseTrigger asChild>\n                <BitkitCloseButton css={styles.closeTrigger} size=\"xs\" />\n              </ArkTour.CloseTrigger>\n            </Box>\n            <TourDescription css={styles.description} />\n            {step?.content ? <Box css={styles.media}>{step.content}</Box> : null}\n            <TourControl css={styles.control}>\n              {step?.secondaryAction ? <SecondaryAction secondaryAction={step.secondaryAction} /> : null}\n              <Box css={styles.actions}>\n                {actions.map((action, index) => (\n                  // Zag labels the trigger from its own translations (`close tour`, `next step`),\n                  // which would override the visible text as the accessible name — and put two\n                  // `Close tour` buttons on a card whose dismiss action reads `Got it`.\n                  <ArkTour.ActionTrigger key={action.label} asChild action={action} aria-label={action.label}>\n                    <BitkitButton size=\"sm\" variant={index === actions.length - 1 ? 'primary' : 'secondary'}>\n                      {action.label}\n                    </BitkitButton>\n                  </ArkTour.ActionTrigger>\n                ))}\n              </Box>\n            </TourControl>\n          </TourContent>\n        </TourPositioner>\n      </Portal>\n    </ArkTour.Root>\n  );\n};\n\nBitkitTour.displayName = 'BitkitTour';\n\nexport default BitkitTour;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitTour.js","names":["ArkTour"],"sources":["../../../lib/components/BitkitTour/BitkitTour.tsx"],"sourcesContent":["import {\n  Tour as ArkTour,\n  type TourStepDetails,\n  useTour,\n  type UseTourProps,\n  type UseTourReturn,\n} from '@ark-ui/react/tour';\nimport { Box } from '@chakra-ui/react/box';\nimport { useEnvironmentContext } from '@chakra-ui/react/environment';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { isIos } from '@zag-js/dom-query';\nimport { preventBodyScroll } from '@zag-js/remove-scroll';\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\ntype BitkitTourStepAction = NonNullable<TourStepDetails['actions']>[number];\n\n/**\n * The link-style action in the footer, e.g. `Skip tour` or `Learn more`. It either drives the tour\n * (`action`) or leaves the page (`href`) — the union makes passing both, or neither, a type error.\n */\nexport type BitkitTourSecondaryAction =\n  | {\n      /**\n       * A tour action — `'skip'`, `'dismiss'`, `'next'`, `'prev'`, or a function that receives the\n       * action map (`{ next, prev, dismiss, skip, goto }`) to do something else first.\n       */\n      action: NonNullable<BitkitTourStepAction['action']>;\n      href?: never;\n      label: string;\n    }\n  | {\n      action?: never;\n      /** Renders the action as a link out. */\n      href: string;\n      /** Opens the link in a new tab, with the matching `rel`. */\n      isExternal?: boolean;\n      label: string;\n    };\n\n/**\n * A single step of the tour. On top of Ark's step details it carries the three Bitkit slots —\n * `badge`, `content` and `secondaryAction`. Zag spreads the whole step object when it normalises\n * it, so these reach `tour.step` untouched. (Zag also offers a `meta` bag for this; flat fields\n * read better at the call site, at the cost of a name clash if Zag ever adds one of these.)\n *\n * Ark's step `type` is not part of this: every step is a card anchored to an element, so the hook\n * sets it. `target` is required for the same reason — Zag turns a step without one into a centred\n * dialog, which is a presentation this component doesn't have.\n */\nexport type BitkitTourStep = Omit<TourStepDetails, 'type'> & {\n  /**\n   * Rendered next to the title — a `BitkitBadge` in practice, e.g. `BETA` or `NEW`. Nothing about\n   * the badge is fixed here beyond its placement: the element itself comes from the caller.\n   */\n  badge?: ReactNode;\n  /** Rendered between the description and the footer — an image, a video, a table, anything. */\n  content?: ReactNode;\n  secondaryAction?: BitkitTourSecondaryAction;\n  /** The element the step points at. */\n  target: NonNullable<TourStepDetails['target']>;\n};\n\nexport interface BitkitTourOptions extends Omit<UseTourProps, 'closeOnInteractOutside' | 'onStepsChange' | 'steps'> {\n  /**\n   * Called whenever the tour ends, whichever way it ended — the close button, `Skip tour`, the last\n   * step's action, or a target that never appeared. It is the counterpart to `open`: turn your own\n   * value false here and the tour can be opened again, without having to know which of Zag's five\n   * statuses mean \"over\". `onStatusChange` still reports which one it was, for deciding whether to\n   * record the tour as seen.\n   */\n  onClose?: () => void;\n  /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */\n  onStepsChange?: (details: { steps: BitkitTourStep[] }) => void;\n  /**\n   * Drives the tour from a value the caller already has — it starts when this turns true and closes\n   * when it turns false. This is how a tour is opened: it announces something, so it appears once\n   * the user is eligible for it, never in answer to the interaction it would interrupt.\n   *\n   * Only the transitions count: a tour that ends on its own — `Skip tour`, a lost target, the last\n   * step — stays closed while this is still true, and starts again on the next `false → true`.\n   */\n  open?: boolean;\n  steps: BitkitTourStep[];\n}\n/** The tour api returned by `useBitkitTour` — pass it around to control the tour from anywhere. */\nexport type BitkitTourInstance = Omit<UseTourReturn, 'addStep' | 'setSteps' | 'step' | 'updateStep'> & {\n  addStep: (step: BitkitTourStep) => void;\n  setSteps: (steps: BitkitTourStep[]) => void;\n  /** The current step, with the Bitkit slots (`badge`, `content`, `secondaryAction`) still typed on it. */\n  step: BitkitTourStep | null;\n  /** Closes the tour, the same way its close button does. */\n  dismiss: () => void;\n  updateStep: (id: string, stepOverrides: Partial<BitkitTourStep>) => void;\n};\nexport type BitkitTourProps = {\n  /** The tour instance returned by `useBitkitTour`. */\n  tour: BitkitTourInstance;\n};\n\n/**\n * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options\n * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …) and\n * returns the api that reports and navigates it: `step`, `stepIndex`, `totalSteps`, `next()`,\n * `prev()`, `setStep()`. Closing on a click outside isn't among them — see below.\n *\n * A one-step tour announces a feature, and behaves the same wherever it's used:\n *\n * - it appears on its own — `open` turns true once the user is eligible, and nothing has to be\n *   clicked to bring it up;\n * - dismissing it closes it, and it doesn't come back;\n * - acting on the control it points at closes it too, reported as a dismissal like any other, so\n *   the target keeps doing whatever it did before;\n * - until one of those two happens, a reload or a new session brings it back — which means the\n *   dismissal is recorded for the user in `onStatusChange`, not kept in page state.\n */\nexport const useBitkitTour = (options: BitkitTourOptions): BitkitTourInstance => {\n  // The document the tour lives in — the global one unless a consumer renders under an\n  // `EnvironmentProvider`, e.g. into an iframe. Same route Zag's own machines take.\n  const { getDocument } = useEnvironmentContext();\n\n  // `onClose` is ours, not Zag's, so it is kept out of what reaches the machine. The ref keeps an\n  // inline callback from giving the machine a new `onStatusChange` on every render.\n  const { onClose, ...tourOptions } = options;\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n  // Zag reports the end of a tour more than once — a dismissal on the last step emits `dismissed`\n  // and then `completed` — so the run, not the status, is what `onClose` is tied to. Guarding on the\n  // status names instead would encode which pairs the machine currently emits together.\n  const hasClosedRef = useRef(false);\n\n  const tour = useTour({\n    // The highlight sits 8 around the target, and the card 12 from the highlight — the 8 the arrow\n    // takes plus the 4 gap the design asks for. Both are measured from the highlight, since Zag\n    // grows the anchor rect by `spotlightOffset` before positioning. `offset.mainAxis` replaces\n    // Zag's own gutter, and Popper adds half the arrow's box on top of it: 6 + 5.65 ≈ the 12.\n    spotlightOffset: { x: 8, y: 8 },\n    // 4 is also Zag's current default, but the design asks for it and a third-party default is not\n    // ours to rely on — the z-index contract already moved under us once between two minors.\n    spotlightRadius: 4,\n    ...tourOptions,\n    // Not part of the options, and set after the spread so it can't be turned back on: a tour is a\n    // guided flow with its own ways out — the close button, `Skip tour`, `Done` — and Zag would\n    // otherwise end it on any click outside the card, losing the whole thing to a stray click on\n    // the dimmed page. Escape is a deliberate keystroke rather than a stray click, so it keeps\n    // closing the tour by default — and unlike this one, `closeOnEscape` stays in the options for\n    // callers who want it off.\n    closeOnInteractOutside: false,\n    // Every status other than `started` is the tour ending, and `onClose` is what saves callers from\n    // knowing that. The caller's own `onStatusChange` runs first and unchanged — it reports every\n    // status, including the ones `onClose` collapses.\n    onStatusChange: (details) => {\n      tourOptions.onStatusChange?.(details);\n\n      if (details.status === 'started') {\n        hasClosedRef.current = false;\n\n        return;\n      }\n\n      if (hasClosedRef.current) {\n        return;\n      }\n\n      hasClosedRef.current = true;\n      onCloseRef.current?.();\n    },\n    // Same reason as the cast on `Tour.Root` below: our step type isn't a supertype of Ark's, so a\n    // callback taking ours doesn't match the signature Ark declares. The payload is Ark's.\n    onStepsChange: tourOptions.onStepsChange as UseTourProps['onStepsChange'],\n    // Zag's default is `close tour`, and this one is visible rather than screen-reader only: the\n    // close button shows its own aria-label in a tooltip. The rest of Zag's translations\n    // (`nextStep`, `prevStep`, `skip`) stay as they are — those only ever reach assistive tech.\n    translations: { close: 'Close tour', ...tourOptions.translations },\n    // `type` last: there is one presentation, so it isn't the caller's to pick.\n    steps: tourOptions.steps.map((step) => ({ offset: { mainAxis: 6 }, ...step, type: 'tooltip' as const })),\n  });\n\n  // Zag's api can start a tour but not stop one. Its close trigger's click handler *is* the\n  // machine's dismiss, so this borrows that instead of reaching into the machine. The cast says\n  // what the handler is rather than manufacturing an event for it: `actionMap.dismiss` takes none.\n  const dismiss = useCallback(() => {\n    const closeTriggerClick = tour.getCloseTriggerProps().onClick as (() => void) | undefined;\n\n    closeTriggerClick?.();\n  }, [tour]);\n\n  // A single-step tour points at one control, and operating that control is the same\n  // acknowledgement its close button is — there is no next step to go to, so the tour is done. Zag\n  // leaves the target clickable on purpose (it excludes it from interact-outside), so without this\n  // every caller has to wire the dismissal into the target's own handler, and the ones that forget\n  // show the tour again on the user's next visit. Multi-step tours are left alone: there, clicking\n  // the highlighted control could as easily mean \"go on\" as \"I'm done\", which isn't ours to guess.\n  //\n  // The listener is on the document rather than the target, resolving the target when the click\n  // happens: the target can re-render while the tour is open, and capture runs even when the\n  // caller's own handler stops propagation. `click` rather than `pointerdown` — a right-click or an\n  // abandoned drag isn't acting on it — and it still runs before a link's navigation, so a caller\n  // that records the dismissal gets its request away.\n  // `dismiss` closes over `tour`, which is a new object on every render, so listing it would put the\n  // effects below on every render as well — attaching and detaching the listener for nothing.\n  const dismissRef = useRef(dismiss);\n  dismissRef.current = dismiss;\n\n  const isSingleStep = options.steps.length === 1;\n  useEffect(() => {\n    if (!tour.open || !isSingleStep) {\n      return undefined;\n    }\n\n    const onDocumentClick = (event: MouseEvent) => {\n      const target = tour.step?.target?.();\n\n      // The event path rather than `target.contains(event.target)`: under an `EnvironmentProvider`\n      // the click comes from another realm, where a node is not an instance of this one's `Node`, so\n      // narrowing it that way is always false — and the path crosses shadow boundaries as well.\n      if (target && event.composedPath().includes(target)) {\n        dismissRef.current();\n      }\n    };\n\n    const doc = getDocument();\n\n    doc.addEventListener('click', onDocumentClick, true);\n\n    return () => doc.removeEventListener('click', onDocumentClick, true);\n    // `tour` is a new object on every render; the machine's own state is what matters here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [getDocument, isSingleStep, tour.open, tour.step?.id]);\n\n  // Edge-triggered, on the prop's own `false → true`: comparing it against `tour.open` instead made\n  // every close the machine performs for its own reasons look like a caller who wants the tour open,\n  // and started it again. Zag reports five statuses and callers reasonably handle `dismissed` only,\n  // so `Skip tour` (`skipped`) and a target that goes missing (`not-found`) both closed the tour and\n  // had it come straight back at step one. `undefined` as the initial value so an `open` that is\n  // already true on mount still starts the tour.\n  const { open } = tourOptions;\n  const previousOpen = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (open === undefined || open === previousOpen.current) {\n      return;\n    }\n\n    previousOpen.current = open;\n\n    if (open) {\n      tour.start();\n    } else {\n      dismissRef.current();\n    }\n    // `tour` is a new object on every render, and reacting to the machine's own `open` is exactly\n    // what this effect must not do.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  return { ...tour, dismiss, step: tour.step as BitkitTourStep | null };\n};\n\n// The Ark parts aren't Chakra components, so they're wrapped with the `chakra()` factory to accept\n// `css`. They're deliberately NOT wrapped with `asChild`: each Ark part falls back to the current\n// step's content (title, description, progress text, action label) only when it renders its own\n// children, and `asChild` would replace those children with the wrapper element.\nconst TourBackdrop = chakra(ArkTour.Backdrop);\nconst TourSpotlight = chakra(ArkTour.Spotlight);\nconst TourPositioner = chakra(ArkTour.Positioner);\nconst TourContent = chakra(ArkTour.Content);\nconst TourArrow = chakra(ArkTour.Arrow);\nconst TourArrowTip = chakra(ArkTour.ArrowTip);\nconst TourTitle = chakra(ArkTour.Title);\nconst TourDescription = chakra(ArkTour.Description);\nconst TourControl = chakra(ArkTour.Control);\nconst TourProgressText = chakra(ArkTour.ProgressText);\n\nconst SecondaryAction = ({ secondaryAction }: { secondaryAction: BitkitTourSecondaryAction }) => {\n  const { action, href, label } = secondaryAction;\n\n  if (href !== undefined) {\n    return (\n      <BitkitButton href={href} isExternal={secondaryAction.isExternal} size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    );\n  }\n\n  if (!action) return null;\n\n  return (\n    <ArkTour.ActionTrigger asChild action={{ action, label }} aria-label={label}>\n      <BitkitButton size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    </ArkTour.ActionTrigger>\n  );\n};\n\n/**\n * A guided product tour: a step card anchored to an element on the page, with a spotlight cut out\n * of the dimmed backdrop around that element.\n *\n * The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render\n * `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one\n * is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what\n * turns the card into the single-feature presentation.\n */\nconst BitkitTour = ({ tour }: BitkitTourProps) => {\n  const recipe = useSlotRecipe({ key: 'tour' });\n  const styles = recipe();\n  const step = tour.step;\n  const actions = step?.actions ?? [];\n\n  // Zag traps focus with fixed options, so it lands on the card's first tabbable — the close button,\n  // which means a screen reader opens the tour on `Close tour` instead of on what the step says. The\n  // card is what should take it: Zag gives the content `role=\"alertdialog\"`, `tabIndex: -1` and the\n  // `aria-labelledby`/`aria-describedby` pair exactly so it can be focused and read out. Measured\n  // alternatives that don't work: making the card tabbable (the trap picks a descendant either way)\n  // and a ref (it doesn't survive the `chakra()`-wrapped Ark part). This corrects the trap's choice\n  // instead of trying to beat it — the trap activates asynchronously too, and racing it with a frame\n  // loses whenever the first paint is slow. The listener takes the first focus that lands anywhere\n  // in the card, moves it to the card itself and then steps out of the way, so everything after it\n  // (Tab, the buttons, a click) behaves normally. It arms on open and not per step, so stepping on\n  // keeps the focus on the button that did it, rather than pulling the next keystroke back to the\n  // card. The lookup goes through the machine's own content id, so two mounted tours can't reach\n  // each other's card.\n  //\n  // The tour machine is the one Zag component that can't be told where to put focus: `dialog` takes\n  // an `initialFocusEl` and hands it to the same trap, and even defaults an `alertdialog` to its\n  // close trigger deliberately. Once the tour has that prop too, this effect goes away.\n  const { open } = tour;\n  // Everything below reaches for the document through the environment rather than the global one:\n  // under an `EnvironmentProvider` — a consumer rendering into an iframe — that is the document the\n  // portal, and so the tour, actually lives in. Zag's own machines take the same route.\n  const { getDocument } = useEnvironmentContext();\n\n  // The tour machine has no scroll handling of its own — no `preventScroll` prop, no listener —\n  // while Zag's dialog machine locks the body through this same helper. The tour needs it just as\n  // much: everything it paints is positioned in document coordinates from a target it resolves once,\n  // when the step opens, and never looks up again. Let the page scroll and any layout that swaps its\n  // elements around — a sticky header that moves its buttons into a portal is the common one —\n  // leaves the machine anchored to a node that is no longer in the document. A detached node\n  // measures zero, so the card, the spotlight and the backdrop's cut-out all collapse into the\n  // top-left corner of the page. Locking is the honest reading of the presentation anyway: the tour\n  // dims the page and takes focus, exactly like a modal dialog.\n  // Not on iOS, where the helper pins `<body>` with `position: fixed` instead of hiding the\n  // overflow: from there the machine's `scrollIntoView` on step entry can't move the viewport, so a\n  // target below the fold is unreachable and the tour locks the user onto a step they can't see —\n  // worse than the misalignment the lock is here to prevent. (`overflow: hidden` leaves programmatic\n  // scrolling alone, which is what makes the lock safe everywhere else.)\n  useEffect(() => (open && !isIos() ? preventBodyScroll(getDocument()) : undefined), [getDocument, open]);\n\n  const contentId = tour.getContentProps().id;\n  useEffect(() => {\n    if (!open || contentId === undefined) {\n      return undefined;\n    }\n\n    const contentEl = getDocument().getElementById(contentId);\n    if (!contentEl) {\n      return undefined;\n    }\n\n    const takeFocus = () => {\n      contentEl.removeEventListener('focusin', takeFocus);\n      // `preventScroll`, because this runs before Popper has placed the card, and until then the\n      // card is parked off-screen at `-100vh` — a plain `focus()` scrolls the page up to it and\n      // leaves the user looking at the top of the page with a tour they can't see. Zag passes the\n      // same option everywhere it moves focus itself.\n      contentEl.focus({ preventScroll: true });\n    };\n\n    contentEl.addEventListener('focusin', takeFocus);\n\n    return () => contentEl.removeEventListener('focusin', takeFocus);\n  }, [contentId, getDocument, open]);\n\n  return (\n    // `unmountOnExit` so a closed tour leaves nothing behind: the card, the backdrop and the\n    // spotlight are all page-level overlays, and there is no state to keep alive between two runs.\n    // The cast is the price of refining `step` and the step-mutating methods on the instance: our\n    // step type isn't a supertype of Ark's, so the methods no longer match its api signature. The\n    // object is Ark's api — only the types are ours.\n    <ArkTour.Root unmountOnExit tour={tour as UseTourReturn}>\n      <Portal>\n        <TourBackdrop css={styles.backdrop} />\n        <TourSpotlight css={styles.spotlight} />\n        <TourPositioner css={styles.positioner}>\n          <TourContent css={styles.content}>\n            {/* `hidden={false}` overrides Zag, which hides the arrow until the card has been\n                positioned — while Popper computes that position from the arrow's `clientHeight`, so\n                a hidden arrow measures 0 and the card lands 6 short of the design's 12, then drops\n                by that 6 as soon as anything recomputes. Nothing shows in the meantime: until it is\n                positioned the card itself sits off-screen at `-100vh`. */}\n            <TourArrow css={styles.arrow} hidden={false}>\n              <TourArrowTip css={styles.arrowTip} />\n            </TourArrow>\n            <Box css={styles.header}>\n              <Box css={styles.titleGroup}>\n                {tour.totalSteps > 1 ? <TourProgressText css={styles.progressText} /> : null}\n                <Box css={styles.titleRow}>\n                  <TourTitle css={styles.title} />\n                  {step?.badge ? <Box css={styles.badge}>{step.badge}</Box> : null}\n                </Box>\n              </Box>\n              <ArkTour.CloseTrigger asChild>\n                <BitkitCloseButton css={styles.closeTrigger} size=\"xs\" />\n              </ArkTour.CloseTrigger>\n            </Box>\n            <TourDescription css={styles.description} />\n            {step?.content ? <Box css={styles.media}>{step.content}</Box> : null}\n            <TourControl css={styles.control}>\n              {step?.secondaryAction ? <SecondaryAction secondaryAction={step.secondaryAction} /> : null}\n              <Box css={styles.actions}>\n                {actions.map((action, index) => (\n                  // Zag labels the trigger from its own translations (`close tour`, `next step`),\n                  // which would override the visible text as the accessible name — and put two\n                  // `Close tour` buttons on a card whose dismiss action reads `Got it`.\n                  <ArkTour.ActionTrigger key={action.label} asChild action={action} aria-label={action.label}>\n                    <BitkitButton size=\"sm\" variant={index === actions.length - 1 ? 'primary' : 'secondary'}>\n                      {action.label}\n                    </BitkitButton>\n                  </ArkTour.ActionTrigger>\n                ))}\n              </Box>\n            </TourControl>\n          </TourContent>\n        </TourPositioner>\n      </Portal>\n    </ArkTour.Root>\n  );\n};\n\nBitkitTour.displayName = 'BitkitTour';\n\nexport default BitkitTour;\n"],"mappings":"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"}

package/dist/components/BitkitTreeView/BitkitTreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTreeView.js","names":[],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  TreeView,\n  type TreeViewBranchControlProps,\n  type TreeViewItemProps,\n  type TreeViewNodeRenderProps,\n  type TreeViewRootProps,\n  useTreeViewContext,\n} from '@chakra-ui/react/tree-view';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n  TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n  TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n  TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' | 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n  name: 'BitkitTreeViewVariantContext',\n  defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n  const recipe = useSlotRecipe({ key: 'treeView' });\n  return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n  children?: ReactNode;\n  render: (props: TreeViewNodeRenderProps) => ReactNode;\n  /**\n   * Content after a branch's children, indented like them: a `BitkitPaginationLoadMore` with\n   * `size=\"xs\"` for a directory that loads its files in pages. Called for branch nodes only;\n   * return `null` for a branch that needs nothing. Designed for the `files` variant.\n   */\n  renderBranchFooter?: (props: TreeViewNodeRenderProps) => ReactNode;\n  variant?: BitkitTreeViewVariant;\n}\n\ninterface NodesProps extends Pick<BitkitTreeViewRootProps, 'render' | 'renderBranchFooter'> {\n  indentGuide?: ReactElement;\n  variant: BitkitTreeViewVariant;\n}\n\n// Chakra's TreeView.Node, which has no slot after a branch's children.\nconst Nodes = ({ indentGuide, render, renderBranchFooter, variant }: NodesProps) => {\n  const tree = useTreeViewContext();\n  const styles = useCustomSlotStyles(variant);\n\n  const renderNode = (node: unknown, indexPath: number[]): ReactNode => (\n    <TreeView.NodeProvider key={indexPath.join('.')} indexPath={indexPath} node={node}>\n      <TreeView.NodeContext>\n        {(nodeState) => {\n          if (!nodeState.isBranch) {\n            return render({ indexPath, node, nodeState });\n          }\n\n          const footer = renderBranchFooter?.({ indexPath, node, nodeState });\n\n          return (\n            <TreeView.Branch>\n              {render({ indexPath, node, nodeState })}\n              <TreeView.BranchContent>\n                {indentGuide}\n                {tree.collection.getNodeChildren(node).map((child, index) => renderNode(child, [...indexPath, index]))}\n                {footer && <Box css={[styles.footer, { '--depth': indexPath.length + 1 }]}>{footer}</Box>}\n              </TreeView.BranchContent>\n            </TreeView.Branch>\n          );\n        }}\n      </TreeView.NodeContext>\n    </TreeView.NodeProvider>\n  );\n\n  return tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index]));\n};\n\n/**\n * A tree of collapsible branches and leaves, in a `files` or a `navigation` look. The tree is data,\n * not JSX: build `collection` with `createTreeCollection` (re-exported from here), and `render`\n * returns `BitkitTreeView.Branch` when `nodeState.isBranch` and `BitkitTreeView.Leaf` otherwise.\n *\n * Root also takes Chakra's `TreeView.Root` props: `defaultExpandedValue` / `expandedValue` /\n * `onExpandedChange`, `selectionMode`, `defaultSelectedValue` / `selectedValue` /\n * `onSelectionChange`, `lazyMount` (keeps unopened branches out of the DOM), and\n * `translations={{ treeLabel }}` for the tree's accessible name. `children` renders after the whole\n * tree, indented like the top-level nodes, and `renderBranchFooter` after one branch's children,\n * indented like them: both take a `BitkitPaginationLoadMore size=\"xs\"` for trees that load in pages.\n *\n * `BitkitTreeView.Branch` (a `TreeView.BranchControl`) and `BitkitTreeView.Leaf` (a `TreeView.Item`,\n * so it takes `onClick` and `onKeyDown`) share these props:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `label` | `string` | Required. |\n * | `subtext` | `ReactNode` | A second line under the label. |\n * | `suffixText` | `string` | Trailing text, e.g. a count or a duration. |\n * | `suffixIcon` | `BitkitIconComponent` | Trailing icon, before `suffixText`. |\n * | `hasWarning` | `boolean` | A warning icon at the start of the suffix. |\n * | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size=\"xs\"`. Their clicks do not reach the row. |\n *\n * Leaf only:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `icon` | `BitkitIconComponent` | Before the label. Branches draw their own folder or chevron. |\n * | `iconColor` | `icon/*` token | For an icon that carries a status. Wins over hover and selection. |\n * | `badge` | `ReactElement` | Before the label, forced to `size=\"xs\"`. |\n * | `badgeTooltip` | `string` | Shown when the badge is hovered, and read out after the label. Pass it here rather than wrapping `badge` in a tooltip, which would take the `size` instead of the badge. |\n *\n * Behaviour worth knowing:\n * - Enter on a node selects it and does not fire a DOM click, so open things from\n *   `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should\n *   reopen needs its own `onClick` and `onKeyDown` for that case.\n * - A node with `children: []` renders as a leaf, not as an empty branch. For an empty folder, give the\n *   collection a `nodeToChildrenCount` that returns `0` for it, and put `disabled: true` on the node itself:\n *   Zag reads `node.disabled` and ignores the collection's `isNodeDisabled`. The folder then renders in the\n *   disabled colours, cannot be opened, and keeps its actions.\n * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn\n *   for `files`.\n */\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n  ({ children, render, renderBranchFooter, variant = 'files', ...props }, ref) => {\n    const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n    const styles = useCustomSlotStyles(variant);\n\n    return (\n      <VariantProvider value={{ variant }}>\n        <TreeView.Root ref={ref} variant={variant} {...props}>\n          <TreeView.Tree>\n            <Nodes\n              indentGuide={indentGuide}\n              render={render}\n              renderBranchFooter={renderBranchFooter}\n              variant={variant}\n            />\n            {children && <Box css={[styles.footer, { '--depth': 1 }]}>{children}</Box>}\n          </TreeView.Tree>\n        </TreeView.Root>\n      </VariantProvider>\n    );\n  },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Actions ---\n\n// The buttons sit inside the row, so a click that bubbled up would also toggle the branch or select the leaf.\nconst Actions = ({ actions, variant }: { actions: ReactElement[]; variant: BitkitTreeViewVariant }) => {\n  const styles = useCustomSlotStyles(variant);\n\n  return (\n    <Box css={styles.actionGroup} onClick={(event) => event.stopPropagation()}>\n      {actions.map((action) => cloneElement(action, { size: 'xs' }))}\n    </Box>\n  );\n};\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n  actions?: ReactElement[];\n  hasWarning?: boolean;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n  const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n\n  const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n  return (\n    <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      <TreeView.BranchIndicator>\n        <BranchIcon size=\"16\" />\n      </TreeView.BranchIndicator>\n      <TreeView.BranchText>\n        {label}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.BranchText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.BranchControl>\n  );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n  actions?: ReactElement[];\n  badge?: ReactElement;\n  /** Explains the badge on hover, e.g. what its letter stands for. */\n  badgeTooltip?: string;\n  hasWarning?: boolean;\n  icon?: BitkitIconComponent;\n  /** An `icon/*` token for the icon when it carries meaning of its own, such as a test result's status. */\n  iconColor?: BitkitColorToken<'icon'>;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n  const {\n    actions,\n    badge,\n    badgeTooltip,\n    hasWarning,\n    icon: Icon,\n    iconColor,\n    label,\n    subtext,\n    suffixIcon: SuffixIcon,\n    suffixText,\n    ...rest\n  } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n  const sizedBadge = badge && cloneElement(badge, { size: 'xs' });\n  const badgeDescription = sizedBadge ? badgeTooltip : undefined;\n\n  return (\n    <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      {Icon && <Icon color={iconColor} size=\"16\" />}\n      {badgeDescription ? <BitkitTooltip text={badgeDescription}>{sizedBadge}</BitkitTooltip> : sizedBadge}\n      <TreeView.ItemText>\n        {label}\n        {/* A tree has a single Tab stop, so the badge takes no focus: its tooltip is read out with the label instead. */}\n        {badgeDescription && <VisuallyHidden>{`, ${badgeDescription}`}</VisuallyHidden>}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.ItemText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.Item>\n  );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = withSubComponents(Root, {\n  Branch,\n  Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitTreeView.js","names":["createContext"],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  TreeView,\n  type TreeViewBranchControlProps,\n  type TreeViewItemProps,\n  type TreeViewNodeRenderProps,\n  type TreeViewRootProps,\n  useTreeViewContext,\n} from '@chakra-ui/react/tree-view';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n  TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n  TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n  TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' | 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n  name: 'BitkitTreeViewVariantContext',\n  defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n  const recipe = useSlotRecipe({ key: 'treeView' });\n  return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n  children?: ReactNode;\n  render: (props: TreeViewNodeRenderProps) => ReactNode;\n  /**\n   * Content after a branch's children, indented like them: a `BitkitPaginationLoadMore` with\n   * `size=\"xs\"` for a directory that loads its files in pages. Called for branch nodes only;\n   * return `null` for a branch that needs nothing. Designed for the `files` variant.\n   */\n  renderBranchFooter?: (props: TreeViewNodeRenderProps) => ReactNode;\n  variant?: BitkitTreeViewVariant;\n}\n\ninterface NodesProps extends Pick<BitkitTreeViewRootProps, 'render' | 'renderBranchFooter'> {\n  indentGuide?: ReactElement;\n  variant: BitkitTreeViewVariant;\n}\n\n// Chakra's TreeView.Node, which has no slot after a branch's children.\nconst Nodes = ({ indentGuide, render, renderBranchFooter, variant }: NodesProps) => {\n  const tree = useTreeViewContext();\n  const styles = useCustomSlotStyles(variant);\n\n  const renderNode = (node: unknown, indexPath: number[]): ReactNode => (\n    <TreeView.NodeProvider key={indexPath.join('.')} indexPath={indexPath} node={node}>\n      <TreeView.NodeContext>\n        {(nodeState) => {\n          if (!nodeState.isBranch) {\n            return render({ indexPath, node, nodeState });\n          }\n\n          const footer = renderBranchFooter?.({ indexPath, node, nodeState });\n\n          return (\n            <TreeView.Branch>\n              {render({ indexPath, node, nodeState })}\n              <TreeView.BranchContent>\n                {indentGuide}\n                {tree.collection.getNodeChildren(node).map((child, index) => renderNode(child, [...indexPath, index]))}\n                {footer && <Box css={[styles.footer, { '--depth': indexPath.length + 1 }]}>{footer}</Box>}\n              </TreeView.BranchContent>\n            </TreeView.Branch>\n          );\n        }}\n      </TreeView.NodeContext>\n    </TreeView.NodeProvider>\n  );\n\n  return tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index]));\n};\n\n/**\n * A tree of collapsible branches and leaves, in a `files` or a `navigation` look. The tree is data,\n * not JSX: build `collection` with `createTreeCollection` (re-exported from here), and `render`\n * returns `BitkitTreeView.Branch` when `nodeState.isBranch` and `BitkitTreeView.Leaf` otherwise.\n *\n * Root also takes Chakra's `TreeView.Root` props: `defaultExpandedValue` / `expandedValue` /\n * `onExpandedChange`, `selectionMode`, `defaultSelectedValue` / `selectedValue` /\n * `onSelectionChange`, `lazyMount` (keeps unopened branches out of the DOM), and\n * `translations={{ treeLabel }}` for the tree's accessible name. `children` renders after the whole\n * tree, indented like the top-level nodes, and `renderBranchFooter` after one branch's children,\n * indented like them: both take a `BitkitPaginationLoadMore size=\"xs\"` for trees that load in pages.\n *\n * `BitkitTreeView.Branch` (a `TreeView.BranchControl`) and `BitkitTreeView.Leaf` (a `TreeView.Item`,\n * so it takes `onClick` and `onKeyDown`) share these props:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `label` | `string` | Required. |\n * | `subtext` | `ReactNode` | A second line under the label. |\n * | `suffixText` | `string` | Trailing text, e.g. a count or a duration. |\n * | `suffixIcon` | `BitkitIconComponent` | Trailing icon, before `suffixText`. |\n * | `hasWarning` | `boolean` | A warning icon at the start of the suffix. |\n * | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size=\"xs\"`. Their clicks do not reach the row. |\n *\n * Leaf only:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `icon` | `BitkitIconComponent` | Before the label. Branches draw their own folder or chevron. |\n * | `iconColor` | `icon/*` token | For an icon that carries a status. Wins over hover and selection. |\n * | `badge` | `ReactElement` | Before the label, forced to `size=\"xs\"`. |\n * | `badgeTooltip` | `string` | Shown when the badge is hovered, and read out after the label. Pass it here rather than wrapping `badge` in a tooltip, which would take the `size` instead of the badge. |\n *\n * Behaviour worth knowing:\n * - Enter on a node selects it and does not fire a DOM click, so open things from\n *   `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should\n *   reopen needs its own `onClick` and `onKeyDown` for that case.\n * - A node with `children: []` renders as a leaf, not as an empty branch. For an empty folder, give the\n *   collection a `nodeToChildrenCount` that returns `0` for it, and put `disabled: true` on the node itself:\n *   Zag reads `node.disabled` and ignores the collection's `isNodeDisabled`. The folder then renders in the\n *   disabled colours, cannot be opened, and keeps its actions.\n * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn\n *   for `files`.\n */\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n  ({ children, render, renderBranchFooter, variant = 'files', ...props }, ref) => {\n    const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n    const styles = useCustomSlotStyles(variant);\n\n    return (\n      <VariantProvider value={{ variant }}>\n        <TreeView.Root ref={ref} variant={variant} {...props}>\n          <TreeView.Tree>\n            <Nodes\n              indentGuide={indentGuide}\n              render={render}\n              renderBranchFooter={renderBranchFooter}\n              variant={variant}\n            />\n            {children && <Box css={[styles.footer, { '--depth': 1 }]}>{children}</Box>}\n          </TreeView.Tree>\n        </TreeView.Root>\n      </VariantProvider>\n    );\n  },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Actions ---\n\n// The buttons sit inside the row, so a click that bubbled up would also toggle the branch or select the leaf.\nconst Actions = ({ actions, variant }: { actions: ReactElement[]; variant: BitkitTreeViewVariant }) => {\n  const styles = useCustomSlotStyles(variant);\n\n  return (\n    <Box css={styles.actionGroup} onClick={(event) => event.stopPropagation()}>\n      {actions.map((action) => cloneElement(action, { size: 'xs' }))}\n    </Box>\n  );\n};\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n  actions?: ReactElement[];\n  hasWarning?: boolean;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n  const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n\n  const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n  return (\n    <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      <TreeView.BranchIndicator>\n        <BranchIcon size=\"16\" />\n      </TreeView.BranchIndicator>\n      <TreeView.BranchText>\n        {label}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.BranchText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.BranchControl>\n  );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n  actions?: ReactElement[];\n  badge?: ReactElement;\n  /** Explains the badge on hover, e.g. what its letter stands for. */\n  badgeTooltip?: string;\n  hasWarning?: boolean;\n  icon?: BitkitIconComponent;\n  /** An `icon/*` token for the icon when it carries meaning of its own, such as a test result's status. */\n  iconColor?: BitkitColorToken<'icon'>;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n  const {\n    actions,\n    badge,\n    badgeTooltip,\n    hasWarning,\n    icon: Icon,\n    iconColor,\n    label,\n    subtext,\n    suffixIcon: SuffixIcon,\n    suffixText,\n    ...rest\n  } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n  const sizedBadge = badge && cloneElement(badge, { size: 'xs' });\n  const badgeDescription = sizedBadge ? badgeTooltip : undefined;\n\n  return (\n    <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      {Icon && <Icon color={iconColor} size=\"16\" />}\n      {badgeDescription ? <BitkitTooltip text={badgeDescription}>{sizedBadge}</BitkitTooltip> : sizedBadge}\n      <TreeView.ItemText>\n        {label}\n        {/* A tree has a single Tab stop, so the badge takes no focus: its tooltip is read out with the label instead. */}\n        {badgeDescription && <VisuallyHidden>{`, ${badgeDescription}`}</VisuallyHidden>}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.ItemText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.Item>\n  );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = withSubComponents(Root, {\n  Branch,\n  Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}

package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts

@@ -0,0 +1,37 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitUIHeaderProps extends Omit<BoxProps, 'children'> {
+    /**
+     * Content below the bar, inside the header itself — account-wide notices and the like. It is
+     * part of the header rather than the page, so a pinned header keeps it pinned too, and a page
+     * reserving room for the header has one element to measure.
+     */
+    banner?: ReactNode;
+    /** The trailing controls, in the order they should appear. */
+    children?: ReactNode;
+    /**
+     * The slot before the logo, shown only below the `tablet` breakpoint. It takes a
+     * `BitkitUIHeader.NavButton`, which opens the navigation drawer, or a `BitkitUIHeader.Control`
+     * for an account with no workspace to navigate yet.
+     *
+     * It is a slot rather than a child because the design fixes where it goes: children all land in
+     * the trailing cluster, on the far side of the logo.
+     */
+    leading?: ReactNode;
+    /** Where the logo links to. */
+    logoHref?: string;
+}
+export { uiHeaderHeight } from '../../theme/slot-recipes/UIHeader.recipe';
+export { type BitkitUIHeaderAccountProps } from './UIHeaderAccount';
+export { type BitkitUIHeaderButtonProps } from './UIHeaderButton';
+export { type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, } from './UIHeaderControl';
+export { type BitkitUIHeaderNavButtonProps } from './UIHeaderNavButton';
+export { type BitkitUIHeaderSearchProps } from './UIHeaderSearch';
+declare const _default: import('react').ForwardRefExoticComponent<BitkitUIHeaderProps & import('react').RefAttributes<HTMLElement>> & {
+    Account: import('react').ForwardRefExoticComponent<import('./UIHeaderAccount').BitkitUIHeaderAccountProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Button: import('react').ForwardRefExoticComponent<import('./UIHeaderButton').BitkitUIHeaderButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Control: import('react').ForwardRefExoticComponent<import('./UIHeaderControl').BitkitUIHeaderControlProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    NavButton: import('react').ForwardRefExoticComponent<import('./UIHeaderNavButton').BitkitUIHeaderNavButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Search: import('react').ForwardRefExoticComponent<import('./UIHeaderSearch').BitkitUIHeaderSearchProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/components/BitkitUIHeader/BitkitUIHeader.js

@@ -0,0 +1,99 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import BitriseLogo from "./BitriseLogo.js";
+import { UIHeaderContextProvider } from "./UIHeaderContext.js";
+import UIHeaderControl from "./UIHeaderControl.js";
+import UIHeaderAccount from "./UIHeaderAccount.js";
+import UIHeaderButton from "./UIHeaderButton.js";
+import UIHeaderNavButton from "./UIHeaderNavButton.js";
+import UIHeaderSearch from "./UIHeaderSearch.js";
+import { uiHeaderHeight } from "../../theme/slot-recipes/UIHeader.recipe.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/BitkitUIHeader.tsx
+/**
+* The platform's top bar: the Bitrise logo, and the controls for everything that is not navigation
+* — search, changelog, help, notifications, the account.
+*
+* ```tsx
+* <BitkitUIHeader leading={<BitkitUIHeader.NavButton name={workspace} onClick={openNav} />}>
+*   <BitkitUIHeader.Button icon={IconSparkle} onClick={askAI} variant="secondary">Ask AI</BitkitUIHeader.Button>
+*   <BitkitUIHeader.Search onOpenChange={setSearchOpen} onValueChange={setQuery} open={searchOpen} value={query} />
+*   <BitkitUIHeader.Control icon={IconBell} label="Notifications" onClick={toggleNotifications} selected={isOpen} />
+*   <BitkitUIHeader.Account name={user.name} onClick={toggleAccount} src={user.avatar} />
+* </BitkitUIHeader>
+* ```
+*
+* It does not position itself. The consumer decides whether it scrolls with the page or is pinned
+* to the top of it, which is what lets a page put its own chrome above the header. Pin it with the
+* style props the root forwards, and reserve `uiHeaderHeight` for it in the page below.
+*
+* The panels the controls open are the consumer's: a control takes a `selected` flag and paints
+* itself as the open one, and nothing more. That keeps a drawer's content, placement and state
+* where the product can see them.
+*
+* It carries its own responsive behaviour and needs no breakpoint hook. Below `tablet` the
+* `leading` slot appears, the logo centres, the account button becomes an icon, and search stops
+* opening a field in the bar.
+*/
+var BitkitUIHeader = forwardRef((props, ref) => {
+	const { banner, children, css, leading, logoHref = "/", ...rest } = props;
+	const styles = useSlotRecipe({ key: "uiHeader" })();
+	const barRef = useRef(null);
+	const context = useMemo(() => ({
+		barRef,
+		styles
+	}), [styles]);
+	return /* @__PURE__ */ jsx(UIHeaderContextProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Box, {
+			ref,
+			asChild: true,
+			...rest,
+			css: [styles.root, css],
+			children: /* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs(Box, {
+				ref: barRef,
+				css: styles.bar,
+				children: [
+					/* @__PURE__ */ jsx(Box, {
+						css: styles.leading,
+						children: leading
+					}),
+					/* @__PURE__ */ jsx(Box, { css: styles.spacer }),
+					/* @__PURE__ */ jsx(Box, {
+						css: styles.logoBlock,
+						children: /* @__PURE__ */ jsx(Box, {
+							asChild: true,
+							css: styles.logoLink,
+							children: /* @__PURE__ */ jsx("a", {
+								"aria-label": "Bitrise",
+								href: logoHref,
+								children: /* @__PURE__ */ jsx(BitriseLogo, {})
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						css: styles.actions,
+						children
+					})
+				]
+			}), !!banner && /* @__PURE__ */ jsx(Box, {
+				css: styles.banner,
+				children: banner
+			})] })
+		})
+	});
+});
+BitkitUIHeader.displayName = "BitkitUIHeader";
+var BitkitUIHeader_default = withSubComponents(BitkitUIHeader, {
+	Account: UIHeaderAccount,
+	Button: UIHeaderButton,
+	Control: UIHeaderControl,
+	NavButton: UIHeaderNavButton,
+	Search: UIHeaderSearch
+});
+//#endregion
+export { BitkitUIHeader_default as default, uiHeaderHeight };
+
+//# sourceMappingURL=BitkitUIHeader.js.map

package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitUIHeader.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/BitkitUIHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useMemo, useRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitriseLogo from './BitriseLogo';\nimport UIHeaderAccount from './UIHeaderAccount';\nimport UIHeaderButton from './UIHeaderButton';\nimport { UIHeaderContextProvider } from './UIHeaderContext';\nimport UIHeaderControl from './UIHeaderControl';\nimport UIHeaderNavButton from './UIHeaderNavButton';\nimport UIHeaderSearch from './UIHeaderSearch';\n\nexport interface BitkitUIHeaderProps extends Omit<BoxProps, 'children'> {\n  /**\n   * Content below the bar, inside the header itself — account-wide notices and the like. It is\n   * part of the header rather than the page, so a pinned header keeps it pinned too, and a page\n   * reserving room for the header has one element to measure.\n   */\n  banner?: ReactNode;\n  /** The trailing controls, in the order they should appear. */\n  children?: ReactNode;\n  /**\n   * The slot before the logo, shown only below the `tablet` breakpoint. It takes a\n   * `BitkitUIHeader.NavButton`, which opens the navigation drawer, or a `BitkitUIHeader.Control`\n   * for an account with no workspace to navigate yet.\n   *\n   * It is a slot rather than a child because the design fixes where it goes: children all land in\n   * the trailing cluster, on the far side of the logo.\n   */\n  leading?: ReactNode;\n  /** Where the logo links to. */\n  logoHref?: string;\n}\n\n/**\n * The platform's top bar: the Bitrise logo, and the controls for everything that is not navigation\n * — search, changelog, help, notifications, the account.\n *\n * ```tsx\n * <BitkitUIHeader leading={<BitkitUIHeader.NavButton name={workspace} onClick={openNav} />}>\n *   <BitkitUIHeader.Button icon={IconSparkle} onClick={askAI} variant=\"secondary\">Ask AI</BitkitUIHeader.Button>\n *   <BitkitUIHeader.Search onOpenChange={setSearchOpen} onValueChange={setQuery} open={searchOpen} value={query} />\n *   <BitkitUIHeader.Control icon={IconBell} label=\"Notifications\" onClick={toggleNotifications} selected={isOpen} />\n *   <BitkitUIHeader.Account name={user.name} onClick={toggleAccount} src={user.avatar} />\n * </BitkitUIHeader>\n * ```\n *\n * It does not position itself. The consumer decides whether it scrolls with the page or is pinned\n * to the top of it, which is what lets a page put its own chrome above the header. Pin it with the\n * style props the root forwards, and reserve `uiHeaderHeight` for it in the page below.\n *\n * The panels the controls open are the consumer's: a control takes a `selected` flag and paints\n * itself as the open one, and nothing more. That keeps a drawer's content, placement and state\n * where the product can see them.\n *\n * It carries its own responsive behaviour and needs no breakpoint hook. Below `tablet` the\n * `leading` slot appears, the logo centres, the account button becomes an icon, and search stops\n * opening a field in the bar.\n */\nconst BitkitUIHeader = forwardRef<HTMLElement, BitkitUIHeaderProps>((props, ref) => {\n  const { banner, children, css, leading, logoHref = '/', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'uiHeader' });\n  const styles = recipe();\n\n  const barRef = useRef<HTMLDivElement>(null);\n\n  const context = useMemo(() => ({ barRef, styles }), [styles]);\n\n  return (\n    <UIHeaderContextProvider value={context}>\n      <Box ref={ref} asChild {...rest} css={[styles.root, css]}>\n        <header>\n          <Box ref={barRef} css={styles.bar}>\n            <Box css={styles.leading}>{leading}</Box>\n            <Box css={styles.spacer} />\n            <Box css={styles.logoBlock}>\n              <Box asChild css={styles.logoLink}>\n                <a aria-label=\"Bitrise\" href={logoHref}>\n                  <BitriseLogo />\n                </a>\n              </Box>\n            </Box>\n            <Box css={styles.actions}>{children}</Box>\n          </Box>\n          {!!banner && <Box css={styles.banner}>{banner}</Box>}\n        </header>\n      </Box>\n    </UIHeaderContextProvider>\n  );\n});\n\nexport { uiHeaderHeight } from '../../theme/slot-recipes/UIHeader.recipe';\nexport { type BitkitUIHeaderAccountProps } from './UIHeaderAccount';\nexport { type BitkitUIHeaderButtonProps } from './UIHeaderButton';\nexport {\n  type BitkitUIHeaderControlAsAnchorProps,\n  type BitkitUIHeaderControlAsButtonProps,\n  type BitkitUIHeaderControlProps,\n} from './UIHeaderControl';\nexport { type BitkitUIHeaderNavButtonProps } from './UIHeaderNavButton';\nexport { type BitkitUIHeaderSearchProps } from './UIHeaderSearch';\n\nBitkitUIHeader.displayName = 'BitkitUIHeader';\n\nexport default withSubComponents(BitkitUIHeader, {\n  Account: UIHeaderAccount,\n  Button: UIHeaderButton,\n  Control: UIHeaderControl,\n  NavButton: UIHeaderNavButton,\n  Search: UIHeaderSearch,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,IAAM,iBAAiB,YAA8C,OAAO,QAAQ;CAClF,MAAM,EAAE,QAAQ,UAAU,KAAK,SAAS,WAAW,KAAK,GAAG,SAAS;CAGpE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO;CAEtB,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,UAAU,eAAe;EAAE;EAAQ;CAAO,IAAI,CAAC,MAAM,CAAC;CAE5D,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,KAAD;GAAU;GAAK,SAAA;GAAQ,GAAI;GAAM,KAAK,CAAC,OAAO,MAAM,GAAG;GACrD,UAAA,qBAAC,UAAD,EAAA,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK;IAAQ,KAAK,OAAO;IAA9B,UAAA;KACE,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAU,UAAA;KAAa,CAAA;KACxC,oBAAC,KAAD,EAAK,KAAK,OAAO,OAAS,CAAA;KAC1B,oBAAC,KAAD;MAAK,KAAK,OAAO;MACf,UAAA,oBAAC,KAAD;OAAK,SAAA;OAAQ,KAAK,OAAO;OACvB,UAAA,oBAAC,KAAD;QAAG,cAAW;QAAU,MAAM;QAC5B,UAAA,oBAAC,aAAD,CAAc,CAAA;OACb,CAAA;MACA,CAAA;KACF,CAAA;KACL,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAU;KAAc,CAAA;IACtC;GACJ,CAAA,GAAA,CAAC,CAAC,UAAU,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAS,UAAA;GAAY,CAAA,CAC7C,EAAA,CAAA;EACL,CAAA;CACkB,CAAA;AAE7B,CAAC;AAaD,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB;CAC/C,SAAS;CACT,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;AACV,CAAC"}

package/dist/components/BitkitUIHeader/BitriseLogo.d.ts

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+/**
+ * The Bitrise wordmark, at the one size the header draws it. It is monochrome and follows the
+ * surrounding `color`.
+ *
+ * It is hand-maintained rather than generated: the icon pipeline only emits 16 and 24 square
+ * icons, and this is neither.
+ */
+declare const BitriseLogo: (props: SVGProps<SVGSVGElement>) => import('react').JSX.Element;
+export default BitriseLogo;

package/dist/components/BitkitUIHeader/BitriseLogo.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/BitriseLogo.tsx
+/**
+* The Bitrise wordmark, at the one size the header draws it. It is monochrome and follows the
+* surrounding `color`.
+*
+* It is hand-maintained rather than generated: the icon pipeline only emits 16 and 24 square
+* icons, and this is neither.
+*/
+var BitriseLogo = (props) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: "24",
+	viewBox: "0 0 84.2553 24",
+	width: "84.2553",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M16.055 1.24337C16.055 1.92998 15.4915 2.4866 14.7962 2.4866C14.101 2.4866 13.5374 1.92998 13.5374 1.24337C13.5374 0.556762 14.101 0 14.7962 0C15.4915 0 16.055 0.556762 16.055 1.24337Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M5.40952 14.0537C5.40952 12.9456 6.31909 12.0471 7.44126 12.0471C8.56343 12.0471 9.47301 12.9456 9.47301 14.0537H5.40952Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11.5057 16.0605C11.5057 17.8552 12.9789 19.3103 14.7963 19.3103C16.6135 19.3103 18.0868 17.8552 18.0868 16.0605H11.5057Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M22.1651 12.0475C21.0429 12.0475 20.1333 12.946 20.1333 14.0541H24.1968C24.1968 12.946 23.2873 12.0475 22.1651 12.0475Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M29.0271 13.7727C28.6855 11.4818 28.1742 9.16488 27.8054 7.62488C27.3658 5.7897 25.7901 4.47799 23.8847 4.36079C22.014 4.24563 18.9187 4.10822 14.7962 4.10822C10.6735 4.10822 7.57817 4.24563 5.70779 4.36079C3.80207 4.47799 2.22644 5.7897 1.78696 7.62488C1.41816 9.16415 0.906981 11.4802 0.565118 13.7727C0.33397 15.3226 0.147138 17.1531 0.00962665 19.2132C-0.0672263 20.3612 0.318069 21.4661 1.09411 22.3243C1.87132 23.1837 2.94138 23.6865 4.10742 23.7404C6.66875 23.8588 10.6022 24 14.7962 24C18.9898 24 22.9234 23.8588 25.4849 23.7404C26.651 23.6865 27.721 23.1837 28.4981 22.3243C29.2741 21.4663 29.6594 20.3613 29.5826 19.2132C29.4452 17.1531 29.2582 15.3226 29.0271 13.7727ZM26.9827 20.9878C26.572 21.4417 26.0064 21.7074 25.3899 21.736C22.85 21.8534 18.9503 21.9932 14.796 21.9932C10.6415 21.9932 6.7419 21.8534 4.20222 21.736C3.58563 21.7074 3.01998 21.4417 2.60921 20.9876C2.19962 20.5347 1.9963 19.9513 2.03679 19.3452C2.17077 17.3385 2.35186 15.5621 2.57505 14.0649C2.90632 11.8433 3.40454 9.58787 3.76407 8.08669C3.99595 7.11785 4.82794 6.42542 5.83395 6.36362C7.67562 6.25021 10.7256 6.11498 14.796 6.11498C18.8661 6.11498 21.9162 6.25021 23.7582 6.36362C24.7642 6.42542 25.5959 7.11785 25.8279 8.08669C26.1878 9.58845 26.6858 11.8447 27.0168 14.0649C27.24 15.5621 27.4212 17.3385 27.5552 19.3452C27.5956 19.9514 27.3922 20.5348 26.9827 20.9878Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M40.174 19.5834C42.3057 19.5834 44.1815 17.7307 44.1815 15.2885C44.1815 12.8464 42.3057 10.9939 40.174 10.9939C38.554 10.9939 37.7013 12.1727 37.7013 12.1727V7.62542H35.3991V19.415H37.7013V18.4044C37.7013 18.4044 38.554 19.5834 40.174 19.5834ZM39.7479 13.0148C40.8562 13.0148 41.7942 13.9412 41.7942 15.2885C41.7942 16.636 40.8562 17.5624 39.7479 17.5624C38.6394 17.5624 37.7014 16.636 37.7014 15.2885C37.7014 13.9412 38.6394 13.0148 39.7479 13.0148Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M45.9719 19.415H48.2741V11.1623H45.9719V19.415Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M47.0803 10.0675C46.313 10.0675 45.8014 9.56222 45.8014 8.80421C45.8014 8.04621 46.313 7.54107 47.0803 7.54107C47.9329 7.54107 48.4447 8.04621 48.4447 8.80421C48.4447 9.56222 47.9329 10.0675 47.0803 10.0675Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M53.646 8.72005H51.5995V10.2359C51.5995 10.9096 51.1731 11.3307 50.6615 11.3307H49.8942V13.3517H51.3438V16.7202C51.3438 18.6571 52.2816 19.5834 53.987 19.5834C54.8397 19.5834 55.5218 19.3308 55.5218 19.3308V17.3939C55.5218 17.3939 55.1807 17.5624 54.6692 17.5624C54.0722 17.5624 53.646 17.1413 53.646 16.6358V13.3517H55.3512V11.3307H53.646V8.72005Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M62.513 13.3516C62.513 13.3516 62.2571 13.2676 61.7457 13.2676C60.5518 13.2676 59.7844 14.0255 59.7844 15.457V19.4149H57.4822V11.1622H59.7844V12.1728C59.7844 12.1728 60.6372 11.0779 62.1719 11.0779H62.513V13.3516Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M66.1792 19.415H63.877V11.1623H66.1792V19.415Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M63.7067 8.80421C63.7067 9.56222 64.2183 10.0675 64.9857 10.0675C65.8384 10.0675 66.35 9.56222 66.35 8.80421C66.35 8.04621 65.8384 7.54107 64.9857 7.54107C64.2183 7.54107 63.7067 8.04621 63.7067 8.80421Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M73.086 13.6044C73.086 13.6044 72.5744 12.9307 71.7218 12.9307C71.0397 12.9307 70.6986 13.2676 70.6986 13.6044C70.6986 14.0693 71.2955 14.2592 72.0184 14.4892C73.1285 14.8423 74.5356 15.29 74.5356 16.9729C74.5356 18.4044 73.3418 19.5834 71.2102 19.5834C68.8226 19.5834 67.7995 18.0675 67.7995 18.0675L69.0785 16.8045C69.0785 16.8045 69.7607 17.7307 70.8691 17.7307C71.6366 17.7307 71.9776 17.394 71.9776 16.9729C71.9776 16.4614 71.3485 16.2592 70.5998 16.0185C69.4994 15.6648 68.1407 15.2281 68.1407 13.6044C68.1407 12.3411 69.5049 10.9939 71.3807 10.9939C73.3418 10.9939 74.2798 12.2569 74.2798 12.2569L73.086 13.6044Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M80.333 17.6466C79.054 17.6466 78.2865 16.8887 78.1161 16.0465H84.1701C84.1701 16.0465 84.2553 15.7097 84.2553 15.1201C84.2553 12.7623 82.4647 10.9939 80.0771 10.9939C77.6897 10.9939 75.7286 12.9307 75.7286 15.2885C75.7286 17.6466 77.6897 19.5834 80.1624 19.5834C82.4647 19.5834 83.7437 18.1517 83.7437 18.1517L82.55 16.636C82.55 16.636 81.7825 17.6466 80.333 17.6466ZM81.9533 14.4464H78.1162C78.3719 13.6044 79.0542 12.9307 80.0773 12.9307C81.1005 12.9307 81.7826 13.6044 81.9533 14.4464Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		})
+	]
+});
+//#endregion
+export { BitriseLogo as default };
+
+//# sourceMappingURL=BitriseLogo.js.map

package/dist/components/BitkitUIHeader/BitriseLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitriseLogo.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/BitriseLogo.tsx"],"sourcesContent":["import { type SVGProps } from 'react';\n\n/**\n * The Bitrise wordmark, at the one size the header draws it. It is monochrome and follows the\n * surrounding `color`.\n *\n * It is hand-maintained rather than generated: the icon pipeline only emits 16 and 24 square\n * icons, and this is neither.\n */\nconst BitriseLogo = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    aria-hidden=\"true\"\n    fill=\"none\"\n    height=\"24\"\n    viewBox=\"0 0 84.2553 24\"\n    width=\"84.2553\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M16.055 1.24337C16.055 1.92998 15.4915 2.4866 14.7962 2.4866C14.101 2.4866 13.5374 1.92998 13.5374 1.24337C13.5374 0.556762 14.101 0 14.7962 0C15.4915 0 16.055 0.556762 16.055 1.24337Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M5.40952 14.0537C5.40952 12.9456 6.31909 12.0471 7.44126 12.0471C8.56343 12.0471 9.47301 12.9456 9.47301 14.0537H5.40952Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M11.5057 16.0605C11.5057 17.8552 12.9789 19.3103 14.7963 19.3103C16.6135 19.3103 18.0868 17.8552 18.0868 16.0605H11.5057Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M22.1651 12.0475C21.0429 12.0475 20.1333 12.946 20.1333 14.0541H24.1968C24.1968 12.946 23.2873 12.0475 22.1651 12.0475Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M29.0271 13.7727C28.6855 11.4818 28.1742 9.16488 27.8054 7.62488C27.3658 5.7897 25.7901 4.47799 23.8847 4.36079C22.014 4.24563 18.9187 4.10822 14.7962 4.10822C10.6735 4.10822 7.57817 4.24563 5.70779 4.36079C3.80207 4.47799 2.22644 5.7897 1.78696 7.62488C1.41816 9.16415 0.906981 11.4802 0.565118 13.7727C0.33397 15.3226 0.147138 17.1531 0.00962665 19.2132C-0.0672263 20.3612 0.318069 21.4661 1.09411 22.3243C1.87132 23.1837 2.94138 23.6865 4.10742 23.7404C6.66875 23.8588 10.6022 24 14.7962 24C18.9898 24 22.9234 23.8588 25.4849 23.7404C26.651 23.6865 27.721 23.1837 28.4981 22.3243C29.2741 21.4663 29.6594 20.3613 29.5826 19.2132C29.4452 17.1531 29.2582 15.3226 29.0271 13.7727ZM26.9827 20.9878C26.572 21.4417 26.0064 21.7074 25.3899 21.736C22.85 21.8534 18.9503 21.9932 14.796 21.9932C10.6415 21.9932 6.7419 21.8534 4.20222 21.736C3.58563 21.7074 3.01998 21.4417 2.60921 20.9876C2.19962 20.5347 1.9963 19.9513 2.03679 19.3452C2.17077 17.3385 2.35186 15.5621 2.57505 14.0649C2.90632 11.8433 3.40454 9.58787 3.76407 8.08669C3.99595 7.11785 4.82794 6.42542 5.83395 6.36362C7.67562 6.25021 10.7256 6.11498 14.796 6.11498C18.8661 6.11498 21.9162 6.25021 23.7582 6.36362C24.7642 6.42542 25.5959 7.11785 25.8279 8.08669C26.1878 9.58845 26.6858 11.8447 27.0168 14.0649C27.24 15.5621 27.4212 17.3385 27.5552 19.3452C27.5956 19.9514 27.3922 20.5348 26.9827 20.9878Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M40.174 19.5834C42.3057 19.5834 44.1815 17.7307 44.1815 15.2885C44.1815 12.8464 42.3057 10.9939 40.174 10.9939C38.554 10.9939 37.7013 12.1727 37.7013 12.1727V7.62542H35.3991V19.415H37.7013V18.4044C37.7013 18.4044 38.554 19.5834 40.174 19.5834ZM39.7479 13.0148C40.8562 13.0148 41.7942 13.9412 41.7942 15.2885C41.7942 16.636 40.8562 17.5624 39.7479 17.5624C38.6394 17.5624 37.7014 16.636 37.7014 15.2885C37.7014 13.9412 38.6394 13.0148 39.7479 13.0148Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n    <path d=\"M45.9719 19.415H48.2741V11.1623H45.9719V19.415Z\" fill=\"currentColor\" />\n    <path\n      d=\"M47.0803 10.0675C46.313 10.0675 45.8014 9.56222 45.8014 8.80421C45.8014 8.04621 46.313 7.54107 47.0803 7.54107C47.9329 7.54107 48.4447 8.04621 48.4447 8.80421C48.4447 9.56222 47.9329 10.0675 47.0803 10.0675Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M53.646 8.72005H51.5995V10.2359C51.5995 10.9096 51.1731 11.3307 50.6615 11.3307H49.8942V13.3517H51.3438V16.7202C51.3438 18.6571 52.2816 19.5834 53.987 19.5834C54.8397 19.5834 55.5218 19.3308 55.5218 19.3308V17.3939C55.5218 17.3939 55.1807 17.5624 54.6692 17.5624C54.0722 17.5624 53.646 17.1413 53.646 16.6358V13.3517H55.3512V11.3307H53.646V8.72005Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M62.513 13.3516C62.513 13.3516 62.2571 13.2676 61.7457 13.2676C60.5518 13.2676 59.7844 14.0255 59.7844 15.457V19.4149H57.4822V11.1622H59.7844V12.1728C59.7844 12.1728 60.6372 11.0779 62.1719 11.0779H62.513V13.3516Z\"\n      fill=\"currentColor\"\n    />\n    <path d=\"M66.1792 19.415H63.877V11.1623H66.1792V19.415Z\" fill=\"currentColor\" />\n    <path\n      d=\"M63.7067 8.80421C63.7067 9.56222 64.2183 10.0675 64.9857 10.0675C65.8384 10.0675 66.35 9.56222 66.35 8.80421C66.35 8.04621 65.8384 7.54107 64.9857 7.54107C64.2183 7.54107 63.7067 8.04621 63.7067 8.80421Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M73.086 13.6044C73.086 13.6044 72.5744 12.9307 71.7218 12.9307C71.0397 12.9307 70.6986 13.2676 70.6986 13.6044C70.6986 14.0693 71.2955 14.2592 72.0184 14.4892C73.1285 14.8423 74.5356 15.29 74.5356 16.9729C74.5356 18.4044 73.3418 19.5834 71.2102 19.5834C68.8226 19.5834 67.7995 18.0675 67.7995 18.0675L69.0785 16.8045C69.0785 16.8045 69.7607 17.7307 70.8691 17.7307C71.6366 17.7307 71.9776 17.394 71.9776 16.9729C71.9776 16.4614 71.3485 16.2592 70.5998 16.0185C69.4994 15.6648 68.1407 15.2281 68.1407 13.6044C68.1407 12.3411 69.5049 10.9939 71.3807 10.9939C73.3418 10.9939 74.2798 12.2569 74.2798 12.2569L73.086 13.6044Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M80.333 17.6466C79.054 17.6466 78.2865 16.8887 78.1161 16.0465H84.1701C84.1701 16.0465 84.2553 15.7097 84.2553 15.1201C84.2553 12.7623 82.4647 10.9939 80.0771 10.9939C77.6897 10.9939 75.7286 12.9307 75.7286 15.2885C75.7286 17.6466 77.6897 19.5834 80.1624 19.5834C82.4647 19.5834 83.7437 18.1517 83.7437 18.1517L82.55 16.636C82.55 16.636 81.7825 17.6466 80.333 17.6466ZM81.9533 14.4464H78.1162C78.3719 13.6044 79.0542 12.9307 80.0773 12.9307C81.1005 12.9307 81.7826 13.6044 81.9533 14.4464Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nexport default BitriseLogo;\n"],"mappings":";;;;;;;;;AASA,IAAM,eAAe,UACnB,qBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,QAAO;CACP,SAAQ;CACR,OAAM;CACN,OAAM;CACN,GAAI;CAPN,UAAA;EASE,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;EACV,CAAA;EACD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;EACV,CAAA;EACD,oBAAC,QAAD;GAAM,GAAE;GAAkD,MAAK;EAAgB,CAAA;EAC/E,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GAAM,GAAE;GAAiD,MAAK;EAAgB,CAAA;EAC9E,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;EACV,CAAA;CACE"}

package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts

@@ -0,0 +1,22 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+export interface BitkitUIHeaderAccountProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    /** Marks the account as carrying something unread, like the other controls. */
+    badge?: boolean;
+    /**
+     * The accessible name. Defaults to `Account: ` and the signed-in person's name — the name alone
+     * would announce as a person rather than as what the button opens.
+     */
+    label?: string;
+    /** Who is signed in. Shown as the avatar's initials when there is no picture. */
+    name: string;
+    /** Marks the account panel as open. */
+    selected?: boolean;
+    /** The signed-in person's picture. Without one the avatar falls back to their initials. */
+    src?: string;
+}
+/**
+ * The account button at the trailing end of the bar. It shows the signed-in person's avatar on
+ * desktop and a plain icon on mobile, where the bar has no room for a picture.
+ */
+declare const UIHeaderAccount: import('react').ForwardRefExoticComponent<BitkitUIHeaderAccountProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UIHeaderAccount;

package/dist/components/BitkitUIHeader/UIHeaderAccount.js

@@ -0,0 +1,38 @@
+import IconPerson from "../../icons/IconPerson.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import { UIHeaderControlBase } from "./UIHeaderControl.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/UIHeaderAccount.tsx
+/**
+* The account button at the trailing end of the bar. It shows the signed-in person's avatar on
+* desktop and a plain icon on mobile, where the bar has no room for a picture.
+*/
+var UIHeaderAccount = forwardRef((props, ref) => {
+	const { badge, label, name, selected, src, ...rest } = props;
+	const { styles } = useUIHeaderContext();
+	const avatarProps = src ? {
+		src,
+		variant: "user"
+	} : { variant: "letters" };
+	return /* @__PURE__ */ jsxs(UIHeaderControlBase, {
+		ref,
+		badge,
+		footprint: "control",
+		label: label ?? `Account: ${name}`,
+		selected,
+		...rest,
+		children: [/* @__PURE__ */ jsx(BitkitAvatar, {
+			css: styles.accountAvatar,
+			name,
+			size: "32",
+			...avatarProps
+		}), /* @__PURE__ */ jsx(IconPerson, { css: styles.accountIcon })]
+	});
+});
+UIHeaderAccount.displayName = "BitkitUIHeader.Account";
+//#endregion
+export { UIHeaderAccount as default };
+
+//# sourceMappingURL=UIHeaderAccount.js.map

package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderAccount.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderAccount.tsx"],"sourcesContent":["import { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconPerson } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderAccountProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /** Marks the account as carrying something unread, like the other controls. */\n  badge?: boolean;\n  /**\n   * The accessible name. Defaults to `Account: ` and the signed-in person's name — the name alone\n   * would announce as a person rather than as what the button opens.\n   */\n  label?: string;\n  /** Who is signed in. Shown as the avatar's initials when there is no picture. */\n  name: string;\n  /** Marks the account panel as open. */\n  selected?: boolean;\n  /** The signed-in person's picture. Without one the avatar falls back to their initials. */\n  src?: string;\n}\n\n/**\n * The account button at the trailing end of the bar. It shows the signed-in person's avatar on\n * desktop and a plain icon on mobile, where the bar has no room for a picture.\n */\nconst UIHeaderAccount = forwardRef<HTMLButtonElement, BitkitUIHeaderAccountProps>((props, ref) => {\n  const { badge, label, name, selected, src, ...rest } = props;\n\n  const { styles } = useUIHeaderContext();\n\n  const avatarProps = src ? ({ src, variant: 'user' } as const) : ({ variant: 'letters' } as const);\n\n  return (\n    <UIHeaderControlBase\n      ref={ref}\n      badge={badge}\n      footprint=\"control\"\n      label={label ?? `Account: ${name}`}\n      selected={selected}\n      {...rest}\n    >\n      <BitkitAvatar css={styles.accountAvatar} name={name} size=\"32\" {...avatarProps} />\n      <IconPerson css={styles.accountIcon} />\n    </UIHeaderControlBase>\n  );\n});\n\nUIHeaderAccount.displayName = 'BitkitUIHeader.Account';\n\nexport default UIHeaderAccount;\n"],"mappings":";;;;;;;;;;;AA4BA,IAAM,kBAAkB,YAA2D,OAAO,QAAQ;CAChG,MAAM,EAAE,OAAO,OAAO,MAAM,UAAU,KAAK,GAAG,SAAS;CAEvD,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,cAAc,MAAO;EAAE;EAAK,SAAS;CAAO,IAAe,EAAE,SAAS,UAAU;CAEtF,OACE,qBAAC,qBAAD;EACO;EACE;EACP,WAAU;EACV,OAAO,SAAS,YAAY;EAClB;EACV,GAAI;EANN,UAAA,CAQE,oBAAC,cAAD;GAAc,KAAK,OAAO;GAAqB;GAAM,MAAK;GAAK,GAAI;EAAc,CAAA,GACjF,oBAAC,YAAD,EAAY,KAAK,OAAO,YAAc,CAAA,CACnB;;AAEzB,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts

@@ -0,0 +1,33 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+export interface BitkitUIHeaderButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    /**
+     * An unread marker on the button's trailing top corner. `pulse` animates it, for something that
+     * has just arrived and is worth looking at now; `idle` is the same marker at rest.
+     *
+     * Its presence is the toggle — there is no separate boolean.
+     */
+    badge?: 'idle' | 'pulse';
+    /** The button's label. */
+    children: ReactNode;
+    /** Leading icon. */
+    icon?: BitkitIconComponent;
+    /**
+     * Marks the button as the one whose panel is open, which keeps it pressed. The consumer owns the
+     * panel, so it owns this too.
+     */
+    selected?: boolean;
+    state?: 'disabled';
+    /** Trailing icon, for a button that opens a menu. */
+    suffixIcon?: BitkitIconComponent;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+/**
+ * A labelled button in the header bar, for an action that needs more than an icon — the Ask AI
+ * entry point is the one in the design.
+ *
+ * It comes in one size: the bar is 48px tall and leaves room for nothing else.
+ */
+declare const UIHeaderButton: import('react').ForwardRefExoticComponent<BitkitUIHeaderButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UIHeaderButton;