npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.478-beta.3036 → 0.3.479 - Mend

@bitrise/bitkit-v2 0.3.478-beta.3036 → 0.3.479

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitDatePicker.js","names":[],"sources":["../../../lib/components/BitkitDatePicker/BitkitDatePicker.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useContext, useMemo, useRef } from 'react';\n\nimport { DatePicker, type DatePickerValueChangeDetails, useDatePickerContext } from '../../atoms/DatePicker/DatePicker';\nimport IconCalendar from '../../icons/IconCalendar';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { calendarDateToDate, dateToCalendarDate } from '../BitkitCalendar/Calendar.utils';\nimport CalendarContent from '../BitkitCalendar/components/CalendarContent';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport type BitkitDatePickerControlProps = BoxProps;\n\nexport interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' \| 'defaultValue' \| 'state' \| 'value'> {\n controlProps?: BitkitDatePickerControlProps;\n /** Text for a day's tooltip, e.g. why it can't be picked. Return `undefined` for no tooltip. /\n dayTooltip?: (date: Date) => string \| undefined;\n defaultValue?: Date \| null;\n disablePortal?: boolean;\n max?: Date;\n min?: Date;\n onValueChange?: (value: Date \| null) => void;\n placeholder?: string;\n showOutsideDays?: boolean;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n value?: Date \| null;\n}\n\n/\n Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own\n * focus event — that covers tabbing in as well as clicking.\n /\nconst DatePickerInput = ({ css }: { css: SystemStyleObject }) => {\n const { disabled, open, readOnly, setOpen } = useDatePickerContext();\n // Ark's DatePicker.Input has no notion of Chakra's Field — without this, `errorText`/`helperText`\n // render visually but are never announced, since nothing points the input's aria-describedby at them.\n const ariaDescribedby = useFieldContext()?.ariaDescribedby;\n const reopenBlockedRef = useRef(false);\n const wasOpenRef = useRef(false);\n\n // Zag's `focusInputElement` puts focus back on the input a frame after the calendar closes on\n // selection, which would bounce it straight back open. Ignore focus that lands right after a\n // close — this has to be a layout effect so the flag is set before Zag's rAF runs. Isomorphic\n // layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n useSafeLayoutEffect(() => {\n const justClosed = wasOpenRef.current && !open;\n wasOpenRef.current = open;\n\n // Only a real close can trigger Zag's refocus, so mount (never-opened) must not arm the block\n // — otherwise an autoFocus or a programmatic focus right after mount gets swallowed.\n if (!justClosed) {\n return undefined;\n }\n\n reopenBlockedRef.current = true;\n const timeout = setTimeout(() => {\n reopenBlockedRef.current = false;\n }, 100);\n\n return () => clearTimeout(timeout);\n }, [open]);\n\n // Ark gates its own trigger handlers on the machine's interactive state, but `setOpen` is not —\n // it would happily open the calendar on a read-only or disabled field. A disabled input still\n // needs the check: Chrome fires focus events for a programmatic `.focus()` on one, even though\n // focus never actually lands there.\n const handleFocus = () => {\n if (!reopenBlockedRef.current && !readOnly && !disabled) {\n setOpen(true);\n }\n };\n\n return <DatePicker.Input aria-describedby={ariaDescribedby} css={css} index={0} onFocus={handleFocus} unstyled />;\n};\n\nconst BitkitDatePicker = forwardRef<HTMLDivElement, BitkitDatePickerProps>((props, ref) => {\n const {\n controlProps,\n dayTooltip,\n defaultValue,\n disablePortal,\n max,\n min,\n onValueChange,\n placeholder,\n showOutsideDays,\n size = 'lg',\n state,\n value,\n ...fieldProps\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n const iconSize = size === 'md' ? '16' : '24';\n const hasWarning = state === 'warning' \|\| !!fieldProps.warningText;\n const isInvalid = state === 'error' \|\| !!fieldProps.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n const calendarButton = (\n <BitkitControlButton\n icon={IconCalendar}\n label=\"Open calendar\"\n // Pulled out by its own padding so the glyph lands where a plain end icon would sit in\n // BitkitTextInput — 16px (lg) / 12px (md) from the field's outer edge.\n marginInlineEnd={size === 'md' ? '-8' : '-4'}\n size={size === 'md' ? 'xs' : 'sm'}\n state={isInteractive ? undefined : 'disabled'}\n />\n );\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <DatePicker.Root\n defaultValue={defaultValue ? [dateToCalendarDate(defaultValue)] : undefined}\n device=\"desktop\"\n disabled={state === 'disabled'}\n invalid={isInvalid}\n layout=\"1-month\"\n max={maxCalendarDate}\n min={minCalendarDate}\n numOfMonths={1}\n onValueChange={\n onValueChange\n ? (details: DatePickerValueChangeDetails) =>\n onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null)\n : undefined\n }\n placeholder={state === 'readOnly' ? '(not set)' : placeholder}\n positioning={{ placement: 'bottom-start' }}\n readOnly={state === 'readOnly'}\n selectionMode=\"single\"\n showOutsideDays={showOutsideDays ?? true}\n startOfWeek={1}\n // Stay controlled whenever `value` is provided — even for `null` (\"nothing selected\").\n // Passing `undefined` would flip Root to uncontrolled. See BitkitCombobox.\n value={value === undefined ? undefined : value ? [dateToCalendarDate(value)] : []}\n >\n <DatePicker.Control asChild>\n <Box {...controlProps} css={[styles.field, controlProps?.css]} {...stateAttrs}>\n <DatePickerInput css={styles.input} />\n {statusIcon != null && (\n <Box css={styles.element} {...stateAttrs}>\n {statusIcon}\n </Box>\n )}\n {/ Ark keeps the trigger interactive in read-only mode and forces `disabled={false}`\n onto whatever it wraps, so the button is left unwrapped there to stay inert. */}\n {state === 'readOnly' ? calendarButton : <DatePicker.Trigger asChild>{calendarButton}</DatePicker.Trigger>}\n </Box>\n </DatePicker.Control>\n <Portal disabled={disablePortal \|\| disablePortalFromContext}>\n <DatePicker.Positioner>\n <CalendarContent\n dayTooltip={dayTooltip}\n layout=\"1-month\"\n max={maxCalendarDate}\n min={minCalendarDate}\n selectionMode=\"day\"\n />\n </DatePicker.Positioner>\n </Portal>\n </DatePicker.Root>\n </BitkitField>\n );\n});\n\nBitkitDatePicker.displayName = 'BitkitDatePicker';\n\nexport default BitkitDatePicker;\n"],"mappings":"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"}
1	+ {"version":3,"file":"BitkitDatePicker.js","names":[],"sources":["../../../lib/components/BitkitDatePicker/BitkitDatePicker.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useContext, useMemo, useRef } from 'react';\n\nimport { DatePicker, type DatePickerValueChangeDetails, useDatePickerContext } from '../../atoms/DatePicker/DatePicker';\nimport IconCalendar from '../../icons/IconCalendar';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { calendarDateToDate, dateToCalendarDate } from '../BitkitCalendar/Calendar.utils';\nimport CalendarContent from '../BitkitCalendar/components/CalendarContent';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport type BitkitDatePickerControlProps = BoxProps;\n\nexport interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' \| 'defaultValue' \| 'state' \| 'value'> {\n controlProps?: BitkitDatePickerControlProps;\n defaultValue?: Date \| null;\n disablePortal?: boolean;\n max?: Date;\n min?: Date;\n onValueChange?: (value: Date \| null) => void;\n placeholder?: string;\n showOutsideDays?: boolean;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n value?: Date \| null;\n}\n\n/*\n Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own\n * focus event — that covers tabbing in as well as clicking.\n /\nconst DatePickerInput = ({ css }: { css: SystemStyleObject }) => {\n const { disabled, open, readOnly, setOpen } = useDatePickerContext();\n // Ark's DatePicker.Input has no notion of Chakra's Field — without this, `errorText`/`helperText`\n // render visually but are never announced, since nothing points the input's aria-describedby at them.\n const ariaDescribedby = useFieldContext()?.ariaDescribedby;\n const reopenBlockedRef = useRef(false);\n const wasOpenRef = useRef(false);\n\n // Zag's `focusInputElement` puts focus back on the input a frame after the calendar closes on\n // selection, which would bounce it straight back open. Ignore focus that lands right after a\n // close — this has to be a layout effect so the flag is set before Zag's rAF runs. Isomorphic\n // layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n useSafeLayoutEffect(() => {\n const justClosed = wasOpenRef.current && !open;\n wasOpenRef.current = open;\n\n // Only a real close can trigger Zag's refocus, so mount (never-opened) must not arm the block\n // — otherwise an autoFocus or a programmatic focus right after mount gets swallowed.\n if (!justClosed) {\n return undefined;\n }\n\n reopenBlockedRef.current = true;\n const timeout = setTimeout(() => {\n reopenBlockedRef.current = false;\n }, 100);\n\n return () => clearTimeout(timeout);\n }, [open]);\n\n // Ark gates its own trigger handlers on the machine's interactive state, but `setOpen` is not —\n // it would happily open the calendar on a read-only or disabled field. A disabled input still\n // needs the check: Chrome fires focus events for a programmatic `.focus()` on one, even though\n // focus never actually lands there.\n const handleFocus = () => {\n if (!reopenBlockedRef.current && !readOnly && !disabled) {\n setOpen(true);\n }\n };\n\n return <DatePicker.Input aria-describedby={ariaDescribedby} css={css} index={0} onFocus={handleFocus} unstyled />;\n};\n\nconst BitkitDatePicker = forwardRef<HTMLDivElement, BitkitDatePickerProps>((props, ref) => {\n const {\n controlProps,\n defaultValue,\n disablePortal,\n max,\n min,\n onValueChange,\n placeholder,\n showOutsideDays,\n size = 'lg',\n state,\n value,\n ...fieldProps\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n const iconSize = size === 'md' ? '16' : '24';\n const hasWarning = state === 'warning' \|\| !!fieldProps.warningText;\n const isInvalid = state === 'error' \|\| !!fieldProps.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n const calendarButton = (\n <BitkitControlButton\n icon={IconCalendar}\n label=\"Open calendar\"\n // Pulled out by its own padding so the glyph lands where a plain end icon would sit in\n // BitkitTextInput — 16px (lg) / 12px (md) from the field's outer edge.\n marginInlineEnd={size === 'md' ? '-8' : '-4'}\n size={size === 'md' ? 'xs' : 'sm'}\n state={isInteractive ? undefined : 'disabled'}\n />\n );\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <DatePicker.Root\n defaultValue={defaultValue ? [dateToCalendarDate(defaultValue)] : undefined}\n device=\"desktop\"\n disabled={state === 'disabled'}\n invalid={isInvalid}\n layout=\"1-month\"\n max={maxCalendarDate}\n min={minCalendarDate}\n numOfMonths={1}\n onValueChange={\n onValueChange\n ? (details: DatePickerValueChangeDetails) =>\n onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null)\n : undefined\n }\n placeholder={state === 'readOnly' ? '(not set)' : placeholder}\n positioning={{ placement: 'bottom-start' }}\n readOnly={state === 'readOnly'}\n selectionMode=\"single\"\n showOutsideDays={showOutsideDays ?? true}\n startOfWeek={1}\n // Stay controlled whenever `value` is provided — even for `null` (\"nothing selected\").\n // Passing `undefined` would flip Root to uncontrolled. See BitkitCombobox.\n value={value === undefined ? undefined : value ? [dateToCalendarDate(value)] : []}\n >\n <DatePicker.Control asChild>\n <Box {...controlProps} css={[styles.field, controlProps?.css]} {...stateAttrs}>\n <DatePickerInput css={styles.input} />\n {statusIcon != null && (\n <Box css={styles.element} {...stateAttrs}>\n {statusIcon}\n </Box>\n )}\n {/ Ark keeps the trigger interactive in read-only mode and forces `disabled={false}`\n onto whatever it wraps, so the button is left unwrapped there to stay inert. */}\n {state === 'readOnly' ? calendarButton : <DatePicker.Trigger asChild>{calendarButton}</DatePicker.Trigger>}\n </Box>\n </DatePicker.Control>\n <Portal disabled={disablePortal \|\| disablePortalFromContext}>\n <DatePicker.Positioner>\n <CalendarContent layout=\"1-month\" max={maxCalendarDate} min={minCalendarDate} selectionMode=\"day\" />\n </DatePicker.Positioner>\n </Portal>\n </DatePicker.Root>\n </BitkitField>\n );\n});\n\nBitkitDatePicker.displayName = 'BitkitDatePicker';\n\nexport default BitkitDatePicker;\n"],"mappings":"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"}

package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.d.ts CHANGED Viewed

@@ -12,13 +12,12 @@ export type BitkitLabelTooltipProps = {
     disablePortal?: boolean;
     /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
     placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
-    /** The label. Keep it to a few words — a name or a short hint, not an explanation. */
+    /** The label. Keep it to a couple of words — this is a name, not an explanation. */
     text: string;
 };
 /**
- * Names a control that shows no text of its own, typically an icon button, or says in a few words
- * what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to
- * `BitkitTooltip`, which explains rather than labels.
+ * Names a control that shows no text of its own, typically an icon button. Small, tight and
+ * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.
  *
  * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
  * An icon-only control still needs its own `aria-label`.

package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js CHANGED Viewed

@@ -5,9 +5,8 @@ import { Portal } from "@chakra-ui/react/portal";
 import { Tooltip } from "@chakra-ui/react/tooltip";
 //#region lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx
 /**
-* Names a control that shows no text of its own, typically an icon button, or says in a few words
-* what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to
-* `BitkitTooltip`, which explains rather than labels.
+* Names a control that shows no text of its own, typically an icon button. Small, tight and
+* semibold, in contrast to `BitkitTooltip`, which explains rather than labels.
 *
 * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
 * An icon-only control still needs its own `aria-label`.

package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitLabelTooltip.js","names":[],"sources":["../../../lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitLabelTooltipProps = {\n /** The control the tooltip labels. Rendered via `asChild`, so it must accept a ref. /\n children: ReactNode;\n /* Render the trigger without a tooltip — for labels that only apply in some states. /\n disabled?: TooltipRootProps['disabled'];\n /\n Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n /\n disablePortal?: boolean;\n /* Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. /\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n /* The label. Keep it to a ~~few~~ words — a ~~name~~ or a ~~short hint~~, not an explanation. /\n text: string;\n};\n\n/\n Names a control that shows no text of its own, typically an icon button~~, or says in a few words\n * what a control takes, e~~.g. ~~what a search field matches.~~ Small, tight and semibold, in contrast to\n * `BitkitTooltip`, which explains rather than labels.\n \n Note this only describes the trigger to sighted users — it does not give it an accessible name.\n * An icon-only control still needs its own `aria-label`.\n \n The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitLabelTooltip = ({\n children,\n disablePortal,\n disabled,\n placement = 'top',\n text,\n}: BitkitLabelTooltipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n // Anchor positioning to the trigger node by ref rather than relying on Zag's\n // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n // trigger (e.g. Menu.Trigger, Dialog.CloseTrigger), the outer trigger's id and\n // data-scope/data-part overwrite ours on the shared node, so `getTriggerEl()`\n // can't find it and the tooltip loses its anchor. `getAnchorElement` takes\n // precedence over the id lookup, so this is safe in the standalone case too.\n const triggerRef = useRef<HTMLElement>(null);\n\n return (\n <Tooltip.Root\n disabled={disabled}\n paddingSize=\"sm\"\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n textStyle=\"sm/semibold\"\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Portal disabled={disablePortal \|\| disablePortalFromContext}>\n <Tooltip.Positioner>\n <Tooltip.Content>{text}</Tooltip.Content>\n </Tooltip.Positioner>\n </Portal>\n </Tooltip.Root>\n );\n};\n\nBitkitLabelTooltip.displayName = 'BitkitLabelTooltip';\n\nexport default BitkitLabelTooltip;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;AAiCA~~,IAAM,sBAAsB,EAC1B,UACA,eACA,UACA,YAAY,OACZ,WAC6B;CAC7B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;EAJZ,UAAA,CAME,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT,EAAA,UAAkB,KAAsB,CAAA,EACtB,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,mBAAmB,cAAc"}
1	+ {"version":3,"file":"BitkitLabelTooltip.js","names":[],"sources":["../../../lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitLabelTooltipProps = {\n /** The control the tooltip labels. Rendered via `asChild`, so it must accept a ref. /\n children: ReactNode;\n /* Render the trigger without a tooltip — for labels that only apply in some states. /\n disabled?: TooltipRootProps['disabled'];\n /\n Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n /\n disablePortal?: boolean;\n /* Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. /\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n /* The label. Keep it to a couple of words — this is a name, not an explanation. /\n text: string;\n};\n\n/\n Names a control that shows no text of its own, typically an icon button. Small, tight and\n * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.\n \n Note this only describes the trigger to sighted users — it does not give it an accessible name.\n * An icon-only control still needs its own `aria-label`.\n \n The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitLabelTooltip = ({\n children,\n disablePortal,\n disabled,\n placement = 'top',\n text,\n}: BitkitLabelTooltipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n // Anchor positioning to the trigger node by ref rather than relying on Zag's\n // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n // trigger (e.g. Menu.Trigger, Dialog.CloseTrigger), the outer trigger's id and\n // data-scope/data-part overwrite ours on the shared node, so `getTriggerEl()`\n // can't find it and the tooltip loses its anchor. `getAnchorElement` takes\n // precedence over the id lookup, so this is safe in the standalone case too.\n const triggerRef = useRef<HTMLElement>(null);\n\n return (\n <Tooltip.Root\n disabled={disabled}\n paddingSize=\"sm\"\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n textStyle=\"sm/semibold\"\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Portal disabled={disablePortal \|\| disablePortalFromContext}>\n <Tooltip.Positioner>\n <Tooltip.Content>{text}</Tooltip.Content>\n </Tooltip.Positioner>\n </Portal>\n </Tooltip.Root>\n );\n};\n\nBitkitLabelTooltip.displayName = 'BitkitLabelTooltip';\n\nexport default BitkitLabelTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAM,sBAAsB,EAC1B,UACA,eACA,UACA,YAAY,OACZ,WAC6B;CAC7B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;EAJZ,UAAA,CAME,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT,EAAA,UAAkB,KAAsB,CAAA,EACtB,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,mBAAmB,cAAc"}

package/dist/components/BitkitMarkdown/BitkitMarkdown.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import BitkitCodeSnippet from "../BitkitCodeSnippet/BitkitCodeSnippet.js";
-import BitkitList_default from "../BitkitList/BitkitList.js";
 import BitkitHeading from "../BitkitHeading/BitkitHeading.js";
 import BitkitLink from "../BitkitLink/BitkitLink.js";
+import BitkitList_default from "../BitkitList/BitkitList.js";
 import { getTextContent } from "../../utilities/getTextContent.js";
 import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";

package/dist/components/BitkitNoteCard/BitkitNoteCard.js CHANGED Viewed

@@ -3,8 +3,8 @@ import IconChevronDown from "../../icons/IconChevronDown.js";
 import IconChevronUp from "../../icons/IconChevronUp.js";
 import { ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
 import BitkitButton from "../BitkitButton/BitkitButton.js";
-import BitkitList_default from "../BitkitList/BitkitList.js";
 import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
+import BitkitList_default from "../BitkitList/BitkitList.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef, useState } from "react";

package/dist/components/BitkitPageHeader/BitkitPageHeader.d.ts CHANGED Viewed

@@ -95,6 +95,14 @@ export interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {
      * Pair it with `size="sm"` actions — see `children`.
      */
     isSticky?: boolean;
+    /**
+     * Opens the page's sidebar on mobile. Its presence switches the header to the design's
+     * `hasSidebar` layout below `tablet`: the title shrinks beside a menu button, and the
+     * `sectionTitle` takes over as the large heading under a rule, with the actions below it. Wire it
+     * to a `BitkitPageSidebar`'s `open` / `onOpenChange`. From `tablet` the button is hidden and the
+     * header is the ordinary one — the sidebar is beside the page there.
+     */
+    onMenuClick?: () => void;
     /**
      * Descriptive text below the title. Hidden in the collapsed layout.
      *
@@ -116,6 +124,12 @@ export interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {
      * the tab list from `tablet`: the line stays although no tabs show above it.
      */
     showDivider?: boolean;
+    /**
+     * The sidebar section the page is showing, for the `hasSidebar` layout — see `onMenuClick`. It
+     * is the page's visible `h2` on mobile, where the sidebar that would name it is behind the menu
+     * button. Not rendered from `tablet`, and never without `onMenuClick`.
+     */
+    sectionTitle?: string;
     /**
      * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.
      *

package/dist/components/BitkitPageHeader/BitkitPageHeader.js CHANGED Viewed

@@ -1,4 +1,6 @@
+import IconMenuHamburger from "../../icons/IconMenuHamburger.js";
 import { isEmptyNode } from "../../utilities/isEmptyNode.js";
+import BitkitIconButton from "../BitkitIconButton/BitkitIconButton.js";
 import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
 import useIsTruncated from "../../utilities/useIsTruncated.js";
 import { Box } from "@chakra-ui/react/box";
@@ -8,12 +10,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitPageHeader/BitkitPageHeader.tsx
 var BitkitPageHeader = forwardRef((props, ref) => {
-	const { avatar, badge, breadcrumb, children, contentAlign, contentVariant, contentWidth, controls, css, isSticky, secondaryText, showDivider = true, tabs, title, variant, ...rest } = props;
+	const { avatar, badge, breadcrumb, children, contentAlign, contentVariant, contentWidth, controls, css, isSticky, onMenuClick, secondaryText, sectionTitle, showDivider = true, tabs, title, variant, ...rest } = props;
 	const hasAvatar = !isEmptyNode(avatar);
 	const hasBadge = !isEmptyNode(badge);
 	const hasBreadcrumb = !isEmptyNode(breadcrumb);
 	const hasActions = !isEmptyNode(children);
 	const hasSecondaryText = !isEmptyNode(secondaryText);
+	const hasSidebar = onMenuClick !== void 0;
+	const hasSectionTitle = hasSidebar && !isEmptyNode(sectionTitle);
 	const hasTabs = !isEmptyNode(tabs);
 	const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated(title);
 	const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated(secondaryText);
@@ -25,6 +29,7 @@ var BitkitPageHeader = forwardRef((props, ref) => {
 		hasBreadcrumb,
 		hasControls: showControls,
 		hasDivider: showDivider || hasTabs,
+		hasSidebar,
 		alignsToContent: Boolean(contentWidth),
 		contentAlign,
 		isSticky,
@@ -34,6 +39,43 @@ var BitkitPageHeader = forwardRef((props, ref) => {
 		css: styles.controls,
 		children: controls
 	}) : null;
+	const titleBlock = /* @__PURE__ */ jsxs(Box, {
+		css: styles.titleBlock,
+		children: [hasAvatar && /* @__PURE__ */ jsx(Box, {
+			css: styles.avatar,
+			children: avatar
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.textBlock,
+			children: [/* @__PURE__ */ jsxs(Box, {
+				css: styles.titleRow,
+				children: [/* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+					disabled: !canShowTitleTooltip,
+					placement: "bottom-start",
+					text: title,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "h1",
+						css: styles.title,
+						ref: titleRef,
+						tabIndex: canShowTitleTooltip ? 0 : void 0,
+						children: title
+					})
+				}), hasBadge && /* @__PURE__ */ jsx(Box, {
+					css: styles.badge,
+					children: badge
+				})]
+			}), hasSecondaryText && secondaryText !== void 0 && /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+				disabled: !isSecondaryTruncated,
+				placement: "bottom-start",
+				text: secondaryText,
+				children: /* @__PURE__ */ jsx(Text, {
+					css: styles.secondaryText,
+					ref: secondaryRef,
+					tabIndex: isSecondaryTruncated ? 0 : void 0,
+					children: secondaryText
+				})
+			})]
+		})]
+	});
 	return /* @__PURE__ */ jsxs(Box, {
 		as: "header",
 		css: [styles.root, css],
@@ -51,42 +93,26 @@ var BitkitPageHeader = forwardRef((props, ref) => {
 				/* @__PURE__ */ jsxs(Box, {
 					css: styles.contentBlock,
 					children: [
-						/* @__PURE__ */ jsxs(Box, {
-							css: styles.titleBlock,
-							children: [hasAvatar && /* @__PURE__ */ jsx(Box, {
-								css: styles.avatar,
-								children: avatar
-							}), /* @__PURE__ */ jsxs(Box, {
-								css: styles.textBlock,
-								children: [/* @__PURE__ */ jsxs(Box, {
-									css: styles.titleRow,
-									children: [/* @__PURE__ */ jsx(BitkitOverflowTooltip, {
-										disabled: !canShowTitleTooltip,
-										placement: "bottom-start",
-										text: title,
-										children: /* @__PURE__ */ jsx(Text, {
-											as: "h1",
-											css: styles.title,
-											ref: titleRef,
-											tabIndex: canShowTitleTooltip ? 0 : void 0,
-											children: title
-										})
-									}), hasBadge && /* @__PURE__ */ jsx(Box, {
-										css: styles.badge,
-										children: badge
-									})]
-								}), hasSecondaryText && secondaryText !== void 0 && /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
-									disabled: !isSecondaryTruncated,
-									placement: "bottom-start",
-									text: secondaryText,
-									children: /* @__PURE__ */ jsx(Text, {
-										css: styles.secondaryText,
-										ref: secondaryRef,
-										tabIndex: isSecondaryTruncated ? 0 : void 0,
-										children: secondaryText
-									})
-								})]
+						hasSidebar ? /* @__PURE__ */ jsxs(Box, {
+							css: styles.titleBar,
+							children: [titleBlock, /* @__PURE__ */ jsx(Box, {
+								css: styles.menuButton,
+								children: /* @__PURE__ */ jsx(BitkitIconButton, {
+									icon: IconMenuHamburger,
+									label: "Open navigation",
+									onClick: onMenuClick,
+									size: "sm",
+									variant: "secondary"
+								})
 							})]
+						}) : titleBlock,
+						hasSectionTitle && /* @__PURE__ */ jsx(Box, {
+							css: styles.sectionBlock,
+							children: /* @__PURE__ */ jsx(Text, {
+								as: "h2",
+								css: styles.sectionTitle,
+								children: sectionTitle
+							})
 						}),
 						!hasBreadcrumb && controlsNode,
 						hasActions && /* @__PURE__ */ jsx(Box, {

package/dist/components/BitkitPageHeader/BitkitPageHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n /*\n Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n \n Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n * no avatar, so pass this alongside a `breadcrumb`.\n \n Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n * present — the same avatar the `app` and `user` content shapes use.\n /\n avatar?: ReactNode;\n /* Badge rendered next to the title. Hidden in the collapsed layout. /\n badge?: ReactNode;\n /\n Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n \n The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n * belong to sub-pages, so pass them together with a trail.\n /\n breadcrumb?: ReactNode;\n /\n Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n \n The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n * whenever `minimal` or `isSticky` is in play.\n \n Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n * little small in the expanded mobile layout — but the design draws no mobile frame for the\n * collapsed variants, so `sm` is the closer of the two.\n /\n children?: ReactNode;\n /\n Where the content block sits when `contentWidth` caps it: `center` over a centred content\n * column, `start` over one that starts against a sidebar beside the header. Pass the same\n * alignment as that column, so the title and the content share their left edge at every width.\n \n No effect with `contentWidth=\"full\"` or without `contentWidth`, where nothing is capped.\n /\n contentAlign?: 'center' \| 'start';\n /\n Shape of the title block, mirroring the design's `content` property. `title` is a page title\n * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n * centred against a smaller title and 14px secondary text. They differ only in the gap between\n * the avatar and the text, 16 and 12 respectively.\n /\n contentVariant?: 'title' \| 'app' \| 'user';\n /\n Lines the header's content up with the page content below it. The root stays full-width, so\n * the background and the bottom border still run edge to edge — which a wrapper around the whole\n * header could not do.\n \n Pass the same value as that column's `max-width`, as rems — `rem()` builds one from a pixel\n * figure — and the content is capped with it, centred unless `contentAlign` says otherwise. Box-sizing is border-box throughout\n * Bitkit, so the value includes the header's own inline padding, which this layout puts at 32 on\n * both sides rather than the default 24 and 32.\n \n `'full'` is the same layout without the cap, for a content column that runs the full width: the\n * 32 on both sides, nothing to centre. The default 24 is for a header that runs over a sidebar and\n * lines up with its items instead.\n \n Its presence is the toggle: without it the header keeps the default inset.\n \n The cap applies at every breakpoint, deliberately — a content column's own `max-width` is not\n * breakpoint-scoped either, so scoping this one would misalign the two wherever the column is\n * narrow enough to bite on mobile. What does change with the breakpoint is the inline padding,\n * 16 below `tablet` and 32 above, which is the same pair such a column uses.\n /\n contentWidth?: `${number}rem` \| 'full';\n /\n Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n * which is the shape the design file calls `PageHeader-WFE`.\n \n Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` and by `isSticky` —\n * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n * controls in.\n /\n controls?: ReactNode;\n /\n Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n * and header container are application concerns.\n \n Ignored below the `tablet` breakpoint, where the header always stays expanded.\n \n Pair it with `size=\"sm\"` actions — see `children`.\n /\n isSticky?: boolean;\n /\n Descriptive text below the title. Hidden in the collapsed layout.\n \n A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n * that appears when it does not fit.\n /\n secondaryText?: string;\n /\n Draws the line along the header's bottom edge. Set it to `false` for a header that flows\n * straight into the page, and the bottom padding goes with the line: the header's background is\n * the page's, so without the line that padding would only be a margin the page cannot shrink. The\n * page spaces its content from the header itself.\n \n The collapsed row keeps its padding, which centres the row rather than spacing the page, and from\n * `tablet` a header with `isSticky` keeps its line as well, since content scrolls under it. Below\n * `tablet` `isSticky` is ignored, so there the line goes too.\n \n Ignored with `tabs`, whose list sits on that edge. That includes `variant=\"minimal\"`, which hides\n * the tab list from `tablet`: the line stays although no tabs show above it.\n /\n showDivider?: boolean;\n /\n Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n \n The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n * page content from it, put `BitkitTabs.Root` around the header and the content, and pass only\n * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n \n ```tsx\n * <BitkitTabs.Root defaultValue=\"overview\">\n * <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n * <BitkitTabs.ContentGroup>\n * <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n * </BitkitTabs.ContentGroup>\n * </BitkitTabs.Root>\n * ```\n \n Only the row is hidden when the header collapses — the panels live outside it and keep\n * rendering, so the page never blanks.\n /\n tabs?: ReactNode;\n /\n The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n * text each have their own slot. Required: it is what gives the header a page heading at every\n * breakpoint.\n \n Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n * shows the full string in a tooltip — so a long title never grows the header.\n \n In the collapsed layout (`minimal` or `isSticky`) with a `breadcrumb`, the design shows the\n * title in the trail rather than as a heading, so end the breadcrumb with a\n * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n * `CurrentItem` on mobile).\n /\n title: string;\n /\n `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n * `size=\"sm\"` actions — see `children`.\n /\n variant?: 'default' \| 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n const {\n avatar,\n badge,\n breadcrumb,\n children,\n contentAlign,\n contentVariant,\n contentWidth,\n controls,\n css,\n isSticky,\n secondaryText,\n showDivider = true,\n tabs,\n title,\n variant,\n ...rest\n } = props;\n\n // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n // fallback until after mount.\n\n // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n // `controls` it would also spread the row into three groups around an empty middle one.\n const hasAvatar = !isEmptyNode(avatar);\n const hasBadge = !isEmptyNode(badge);\n const hasBreadcrumb = !isEmptyNode(breadcrumb);\n const hasActions = !isEmptyNode(children);\n const hasSecondaryText = !isEmptyNode(secondaryText);\n const hasTabs = !isEmptyNode(tabs);\n\n // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n // The design only draws inline controls in the collapsed row, so they are ignored in the\n // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n const isCollapsed = variant === 'minimal' \|\| Boolean(isSticky);\n const showControls = !isEmptyNode(controls) && isCollapsed;\n\n // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n // on an invisible element and opens a tooltip against it. The trail already carries the title as\n // its current item in exactly that layout, so there is nothing to surface anyway.\n const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n const recipe = useSlotRecipe({ key: 'pageHeader' });\n const styles = recipe({\n contentVariant,\n hasBreadcrumb,\n hasControls: showControls,\n hasDivider: showDivider \|\| hasTabs,\n // The cap is a length the consumer chooses, so it cannot be a recipe variant -- the variant\n // carries the layout switch and the `maxWidth` below carries the value.\n alignsToContent: Boolean(contentWidth),\n contentAlign,\n isSticky,\n variant,\n });\n\n // The controls are the middle of three groups, so they follow whichever element holds the left\n // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n // they have to go in there with it rather than beside it.\n const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n return (\n <Box as=\"header\" css={[styles.root, css]} ref={ref} {...rest}>\n <Box css={styles.headerBlock} maxWidth={contentWidth === 'full' ? undefined : contentWidth}>\n {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n {hasBreadcrumb && controlsNode}\n\n <Box css={styles.contentBlock}>\n <Box css={styles.titleBlock}>\n {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n <Box css={styles.textBlock}>\n <Box css={styles.titleRow}>\n {/\n `bottom-start` rather than the tooltip's default `right`: these texts are\n full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n aligned to the text's start keeps it clear of them and lines it up with the text\n it repeats.\n /}\n <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n {/\n `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n stop unconditionally would put one in every header for no benefit.\n */}\n <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n {title}\n </Text>\n </BitkitOverflowTooltip>\n {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n </Box>\n\n {hasSecondaryText && secondaryText !== undefined && (\n <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n {secondaryText}\n </Text>\n </BitkitOverflowTooltip>\n )}\n </Box>\n </Box>\n\n {!hasBreadcrumb && controlsNode}\n\n {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n </Box>\n </Box>\n\n {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n </Box>\n );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":";;;;;;;;;AA0KA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,EACJ,QACA,OACA,YACA,UACA,cACA,gBACA,cACA,UACA,KACA,UACA,eACA,cAAc,MACd,MACA,OACA,SACA,GAAG,SACD;CAWJ,MAAM,YAAY,CAAC,YAAY,MAAM;CACrC,MAAM,WAAW,CAAC,YAAY,KAAK;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,UAAU,CAAC,YAAY,IAAI;CAKjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CACjG,MAAM,EAAE,aAAa,sBAAsB,KAAK,iBAAiB,eAAqC,aAAa;CAMnH,MAAM,cAAc,YAAY,aAAa,QAAQ,QAAQ;CAC7D,MAAM,eAAe,CAAC,YAAY,QAAQ,KAAK;CAM/C,MAAM,sBAAsB,oBAAoB,EAAE,eAAe;CAGjE,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EACpB;EACA;EACA,aAAa;EACb,YAAY,eAAe;EAG3B,iBAAiB,QAAQ,YAAY;EACrC;EACA;EACA;CACF,CAAC;CAKD,MAAM,eAAe,eAAe,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAW,UAAA;CAAc,CAAA,IAAI;CAElF,OACE,qBAAC,KAAD;EAAK,IAAG;EAAS,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAAxD,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,UAAU,iBAAiB,SAAS,KAAA,IAAY;GAA9E,UAAA;IACG,iBAAiB,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAa,UAAA;IAAgB,CAAA;IAE/D,iBAAiB;IAElB,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACE,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACG,aAAa,oBAAC,KAAD;QAAK,KAAK,OAAO;QAAS,UAAA;OAAY,CAAA,GAEpD,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACE,qBAAC,KAAD;SAAK,KAAK,OAAO;SAAjB,UAAA,CAOE,oBAAC,uBAAD;UAAuB,UAAU,CAAC;UAAqB,WAAU;UAAe,MAAM;UAMpF,UAAA,oBAAC,MAAD;WAAM,IAAG;WAAK,KAAK,OAAO;WAAO,KAAK;WAAU,UAAU,sBAAsB,IAAI,KAAA;WACjF,UAAA;UACG,CAAA;SACe,CAAA,GACtB,YAAY,oBAAC,KAAD;UAAK,KAAK,OAAO;UAAQ,UAAA;SAAW,CAAA,CAC9C;QAEJ,CAAA,GAAA,oBAAoB,kBAAkB,KAAA,KACrC,oBAAC,uBAAD;SAAuB,UAAU,CAAC;SAAsB,WAAU;SAAe,MAAM;SACrF,UAAA,oBAAC,MAAD;UAAM,KAAK,OAAO;UAAe,KAAK;UAAc,UAAU,uBAAuB,IAAI,KAAA;UACtF,UAAA;SACG,CAAA;QACe,CAAA,CAEtB;OACF,CAAA,CAAA;;MAEJ,CAAC,iBAAiB;MAElB,cAAc,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAc;MAAc,CAAA;KACzD;;GACF;EAEJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,UAAA;EAAU,CAAA,CAC3C;;AAET,CAAC;AAED,iBAAiB,cAAc"}
1	+ {"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport IconMenuHamburger from '../../icons/IconMenuHamburger';\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n /*\n Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n \n Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n * no avatar, so pass this alongside a `breadcrumb`.\n \n Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n * present — the same avatar the `app` and `user` content shapes use.\n /\n avatar?: ReactNode;\n /* Badge rendered next to the title. Hidden in the collapsed layout. /\n badge?: ReactNode;\n /\n Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n \n The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n * belong to sub-pages, so pass them together with a trail.\n /\n breadcrumb?: ReactNode;\n /\n Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n \n The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n * whenever `minimal` or `isSticky` is in play.\n \n Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n * little small in the expanded mobile layout — but the design draws no mobile frame for the\n * collapsed variants, so `sm` is the closer of the two.\n /\n children?: ReactNode;\n /\n Where the content block sits when `contentWidth` caps it: `center` over a centred content\n * column, `start` over one that starts against a sidebar beside the header. Pass the same\n * alignment as that column, so the title and the content share their left edge at every width.\n \n No effect with `contentWidth=\"full\"` or without `contentWidth`, where nothing is capped.\n /\n contentAlign?: 'center' \| 'start';\n /\n Shape of the title block, mirroring the design's `content` property. `title` is a page title\n * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n * centred against a smaller title and 14px secondary text. They differ only in the gap between\n * the avatar and the text, 16 and 12 respectively.\n /\n contentVariant?: 'title' \| 'app' \| 'user';\n /\n Lines the header's content up with the page content below it. The root stays full-width, so\n * the background and the bottom border still run edge to edge — which a wrapper around the whole\n * header could not do.\n \n Pass the same value as that column's `max-width`, as rems — `rem()` builds one from a pixel\n * figure — and the content is capped with it, centred unless `contentAlign` says otherwise. Box-sizing is border-box throughout\n * Bitkit, so the value includes the header's own inline padding, which this layout puts at 32 on\n * both sides rather than the default 24 and 32.\n \n `'full'` is the same layout without the cap, for a content column that runs the full width: the\n * 32 on both sides, nothing to centre. The default 24 is for a header that runs over a sidebar and\n * lines up with its items instead.\n \n Its presence is the toggle: without it the header keeps the default inset.\n \n The cap applies at every breakpoint, deliberately — a content column's own `max-width` is not\n * breakpoint-scoped either, so scoping this one would misalign the two wherever the column is\n * narrow enough to bite on mobile. What does change with the breakpoint is the inline padding,\n * 16 below `tablet` and 32 above, which is the same pair such a column uses.\n /\n contentWidth?: `${number}rem` \| 'full';\n /\n Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n * which is the shape the design file calls `PageHeader-WFE`.\n \n Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` and by `isSticky` —\n * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n * controls in.\n /\n controls?: ReactNode;\n /\n Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n * and header container are application concerns.\n \n Ignored below the `tablet` breakpoint, where the header always stays expanded.\n \n Pair it with `size=\"sm\"` actions — see `children`.\n /\n isSticky?: boolean;\n /\n Opens the page's sidebar on mobile. Its presence switches the header to the design's\n * `hasSidebar` layout below `tablet`: the title shrinks beside a menu button, and the\n * `sectionTitle` takes over as the large heading under a rule, with the actions below it. Wire it\n * to a `BitkitPageSidebar`'s `open` / `onOpenChange`. From `tablet` the button is hidden and the\n * header is the ordinary one — the sidebar is beside the page there.\n /\n onMenuClick?: () => void;\n /\n Descriptive text below the title. Hidden in the collapsed layout.\n \n A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n * that appears when it does not fit.\n /\n secondaryText?: string;\n /\n Draws the line along the header's bottom edge. Set it to `false` for a header that flows\n * straight into the page, and the bottom padding goes with the line: the header's background is\n * the page's, so without the line that padding would only be a margin the page cannot shrink. The\n * page spaces its content from the header itself.\n \n The collapsed row keeps its padding, which centres the row rather than spacing the page, and from\n * `tablet` a header with `isSticky` keeps its line as well, since content scrolls under it. Below\n * `tablet` `isSticky` is ignored, so there the line goes too.\n \n Ignored with `tabs`, whose list sits on that edge. That includes `variant=\"minimal\"`, which hides\n * the tab list from `tablet`: the line stays although no tabs show above it.\n /\n showDivider?: boolean;\n /\n The sidebar section the page is showing, for the `hasSidebar` layout — see `onMenuClick`. It\n * is the page's visible `h2` on mobile, where the sidebar that would name it is behind the menu\n * button. Not rendered from `tablet`, and never without `onMenuClick`.\n /\n sectionTitle?: string;\n /\n Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n \n The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n * page content from it, put `BitkitTabs.Root` around the header and the content, and pass only\n * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n \n ```tsx\n * <BitkitTabs.Root defaultValue=\"overview\">\n * <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n * <BitkitTabs.ContentGroup>\n * <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n * </BitkitTabs.ContentGroup>\n * </BitkitTabs.Root>\n * ```\n \n Only the row is hidden when the header collapses — the panels live outside it and keep\n * rendering, so the page never blanks.\n /\n tabs?: ReactNode;\n /\n The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n * text each have their own slot. Required: it is what gives the header a page heading at every\n * breakpoint.\n \n Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n * shows the full string in a tooltip — so a long title never grows the header.\n \n In the collapsed layout (`minimal` or `isSticky`) with a `breadcrumb`, the design shows the\n * title in the trail rather than as a heading, so end the breadcrumb with a\n * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n * `CurrentItem` on mobile).\n /\n title: string;\n /\n `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n * `size=\"sm\"` actions — see `children`.\n /\n variant?: 'default' \| 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n const {\n avatar,\n badge,\n breadcrumb,\n children,\n contentAlign,\n contentVariant,\n contentWidth,\n controls,\n css,\n isSticky,\n onMenuClick,\n secondaryText,\n sectionTitle,\n showDivider = true,\n tabs,\n title,\n variant,\n ...rest\n } = props;\n\n // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n // fallback until after mount.\n\n // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n // `controls` it would also spread the row into three groups around an empty middle one.\n const hasAvatar = !isEmptyNode(avatar);\n const hasBadge = !isEmptyNode(badge);\n const hasBreadcrumb = !isEmptyNode(breadcrumb);\n const hasActions = !isEmptyNode(children);\n const hasSecondaryText = !isEmptyNode(secondaryText);\n const hasSidebar = onMenuClick !== undefined;\n const hasSectionTitle = hasSidebar && !isEmptyNode(sectionTitle);\n const hasTabs = !isEmptyNode(tabs);\n\n // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n // The design only draws inline controls in the collapsed row, so they are ignored in the\n // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n const isCollapsed = variant === 'minimal' \|\| Boolean(isSticky);\n const showControls = !isEmptyNode(controls) && isCollapsed;\n\n // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n // on an invisible element and opens a tooltip against it. The trail already carries the title as\n // its current item in exactly that layout, so there is nothing to surface anyway.\n const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n const recipe = useSlotRecipe({ key: 'pageHeader' });\n const styles = recipe({\n contentVariant,\n hasBreadcrumb,\n hasControls: showControls,\n hasDivider: showDivider \|\| hasTabs,\n hasSidebar,\n // The cap is a length the consumer chooses, so it cannot be a recipe variant -- the variant\n // carries the layout switch and the `maxWidth` below carries the value.\n alignsToContent: Boolean(contentWidth),\n contentAlign,\n isSticky,\n variant,\n });\n\n // The controls are the middle of three groups, so they follow whichever element holds the left\n // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n // they have to go in there with it rather than beside it.\n const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n // With a sidebar the menu button shares the title's row, so the block gets a wrapper the content\n // row treats as the title block. Other headers keep their DOM.\n const titleBlock = (\n <Box css={styles.titleBlock}>\n {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n <Box css={styles.textBlock}>\n <Box css={styles.titleRow}>\n {/\n `bottom-start` rather than the tooltip's default `right`: these texts are\n full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n aligned to the text's start keeps it clear of them and lines it up with the text\n it repeats.\n /}\n <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n {/\n `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n stop unconditionally would put one in every header for no benefit.\n */}\n <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n {title}\n </Text>\n </BitkitOverflowTooltip>\n {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n </Box>\n\n {hasSecondaryText && secondaryText !== undefined && (\n <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n {secondaryText}\n </Text>\n </BitkitOverflowTooltip>\n )}\n </Box>\n </Box>\n );\n\n return (\n <Box as=\"header\" css={[styles.root, css]} ref={ref} {...rest}>\n <Box css={styles.headerBlock} maxWidth={contentWidth === 'full' ? undefined : contentWidth}>\n {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n {hasBreadcrumb && controlsNode}\n\n <Box css={styles.contentBlock}>\n {hasSidebar ? (\n <Box css={styles.titleBar}>\n {titleBlock}\n <Box css={styles.menuButton}>\n <BitkitIconButton\n icon={IconMenuHamburger}\n label=\"Open navigation\"\n onClick={onMenuClick}\n size=\"sm\"\n variant=\"secondary\"\n />\n </Box>\n </Box>\n ) : (\n titleBlock\n )}\n\n {hasSectionTitle && (\n <Box css={styles.sectionBlock}>\n <Text as=\"h2\" css={styles.sectionTitle}>\n {sectionTitle}\n </Text>\n </Box>\n )}\n\n {!hasBreadcrumb && controlsNode}\n\n {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n </Box>\n </Box>\n\n {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n </Box>\n );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":"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"}

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts CHANGED Viewed

@@ -7,6 +7,21 @@ import { BitkitColorToken } from '../../theme/themeUtils';
 import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
 export interface BitkitPageSidebarProps extends BoxProps {
     children: ReactNode;
+    /**
+     * Header of the mobile drawer panel, naming what the navigation belongs to — pass a
+     * `BitkitPageSidebar.DrawerHeader`. Only rendered in drawer mode.
+     */
+    drawerHeader?: ReactNode;
+    /**
+     * Mobile drawer visibility. Controlled, because the page header's menu button is what opens it.
+     * Passing `onOpenChange` is what opts the sidebar into the drawer below `tablet`; without it the
+     * sidebar stays in the flow at full width there. Both are ignored from `tablet` up.
+     *
+     * Style props and `css` apply to the sidebar beside the page only — the drawer panel sizes
+     * itself, so a desktop `width` or padding never reaches the navigation inside it.
+     */
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
 }
 interface BitkitPageSidebarItemCommonProps {
     badge?: ReactNode;
@@ -105,10 +120,19 @@ export interface BitkitPageSidebarProjectProps extends BoxProps {
     value: string;
 }
 export type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;
+export interface BitkitPageSidebarDrawerHeaderProps extends Omit<BoxProps, 'title'> {
+    /** App icon or user avatar before the title — a 32px `BitkitAvatar`. */
+    avatar?: ReactNode;
+    /** The entity's secondary line, an app's bundle id or a user's email. Its presence selects the entity layout. */
+    secondaryText?: string;
+    /** What the navigation belongs to: the page, app or user. */
+    title: string;
+}
 export type BitkitPageSidebarDividerProps = SeparatorProps;
 declare const _default: import('react').ForwardRefExoticComponent<BitkitPageSidebarProps & import('react').RefAttributes<HTMLElement>> & {
     Body: import('react').ForwardRefExoticComponent<BitkitPageSidebarBodyProps & import('react').RefAttributes<HTMLDivElement>>;
     Divider: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<HTMLDivElement>>;
+    DrawerHeader: import('react').ForwardRefExoticComponent<BitkitPageSidebarDrawerHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
     Footer: import('react').ForwardRefExoticComponent<BitkitPageSidebarFooterProps & import('react').RefAttributes<HTMLDivElement>>;
     GroupHeading: import('react').ForwardRefExoticComponent<BitkitGroupHeadingProps & import('react').RefAttributes<HTMLDivElement>>;
     Item: import('react').ForwardRefExoticComponent<BitkitPageSidebarItemProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js CHANGED Viewed

@@ -1,15 +1,19 @@
 import { withSubComponents } from "../../utilities/withSubComponents.js";
 import IconChevronLeft from "../../icons/IconChevronLeft.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
 import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
 import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
 import useIsTruncated from "../../utilities/useIsTruncated.js";
+import useResponsive from "../../hooks/useResponsive.js";
 import { Box } from "@chakra-ui/react/box";
-import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { chakra, useChakraContext, useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
 import { Separator } from "@chakra-ui/react/separator";
 import { Text } from "@chakra-ui/react/text";
+import { Drawer } from "@chakra-ui/react/drawer";
 //#region lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx
 var showAtDesktop = { display: {
 	base: "none",
@@ -44,13 +48,20 @@ var showAtMobile = { display: {
 * opts out with `minHeight="auto"`.
 *
 * Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px
-* rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar
-* that narrow is a sidebar filling a phone.
+* rows, larger icons and labels, a squared-off selection edge. A sidebar that sits beside page
+* content has nowhere to go at that width, so it can become a drawer instead: pass `open` and
+* `onOpenChange` (opened by `BitkitPageHeader`'s menu button) and below `tablet` it slides in
+* from the trailing edge over a backdrop, with its close button on the backdrop beside the panel
+* and a `drawerHeader` naming the page. Both props are ignored from `tablet` up.
 */
 var BitkitPageSidebar = forwardRef((props, ref) => {
-	const { children, css, ...rest } = props;
-	const styles = useSlotRecipe({ key: "pageSidebar" })();
-	return /* @__PURE__ */ jsx(Box, {
+	const { children, css, drawerHeader, onOpenChange, open = false, ...rest } = props;
+	const { isMobile } = useResponsive();
+	const { splitCssProps } = useChakraContext();
+	const hasDrawer = onOpenChange !== void 0;
+	const isDrawer = isMobile && hasDrawer;
+	const styles = useSlotRecipe({ key: "pageSidebar" })({ layout: isDrawer ? "drawer" : hasDrawer ? "hidden" : "static" });
+	if (!isDrawer) return /* @__PURE__ */ jsx(Box, {
 		ref,
 		"aria-label": "Page navigation",
 		asChild: true,
@@ -58,6 +69,35 @@ var BitkitPageSidebar = forwardRef((props, ref) => {
 		...rest,
 		children: /* @__PURE__ */ jsx("nav", { children })
 	});
+	const [, navProps] = splitCssProps(rest);
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		onOpenChange: (details) => onOpenChange(details.open),
+		open,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { css: styles.drawerBackdrop }), /* @__PURE__ */ jsx(Drawer.Positioner, { children: /* @__PURE__ */ jsxs(Drawer.Content, {
+			"aria-label": "Navigation",
+			css: styles.drawerContent,
+			children: [
+				drawerHeader,
+				/* @__PURE__ */ jsx(Box, {
+					ref,
+					"aria-label": "Page navigation",
+					asChild: true,
+					css: styles.root,
+					...navProps,
+					children: /* @__PURE__ */ jsx("nav", { children })
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					css: styles.drawerCloseButton,
+					children: /* @__PURE__ */ jsx(BitkitCloseButton, {
+						"aria-label": "Close navigation",
+						colorVariant: "white",
+						onClick: () => onOpenChange(false),
+						size: "md"
+					})
+				})
+			]
+		}) })] })
+	});
 });
 BitkitPageSidebar.displayName = "BitkitPageSidebar";
 var BitkitPageSidebarItem = forwardRef((props, ref) => {
@@ -318,6 +358,33 @@ var BitkitPageSidebarGroupHeading = forwardRef((props, ref) => {
 	});
 });
 BitkitPageSidebarGroupHeading.displayName = "BitkitPageSidebarGroupHeading";
+/**
+* Header of the sidebar's mobile drawer (Figma `mobilePageSidebarHeader`). Pass it as the
+* sidebar's `drawerHeader`; it is what the panel opens with, above the navigation.
+*/
+var BitkitPageSidebarDrawerHeader = forwardRef((props, ref) => {
+	const { avatar, css, secondaryText, title, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })({ hasSecondaryText: secondaryText !== void 0 });
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		css: [styles.drawerHeader, css],
+		...rest,
+		children: [avatar !== void 0 && /* @__PURE__ */ jsx(Box, {
+			css: styles.drawerHeaderAvatar,
+			children: avatar
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.drawerHeaderTextBlock,
+			children: [/* @__PURE__ */ jsx(Text, {
+				css: styles.drawerHeaderTitle,
+				children: title
+			}), secondaryText !== void 0 && /* @__PURE__ */ jsx(Text, {
+				css: styles.drawerHeaderSecondaryText,
+				children: secondaryText
+			})]
+		})]
+	});
+});
+BitkitPageSidebarDrawerHeader.displayName = "BitkitPageSidebarDrawerHeader";
 var BitkitPageSidebarDivider = forwardRef((props, ref) => {
 	const { css, ...rest } = props;
 	const styles = useSlotRecipe({ key: "pageSidebar" })();
@@ -331,6 +398,7 @@ BitkitPageSidebarDivider.displayName = "BitkitPageSidebarDivider";
 var BitkitPageSidebar_default = withSubComponents(BitkitPageSidebar, {
 	Body: BitkitPageSidebarBody,
 	Divider: BitkitPageSidebarDivider,
+	DrawerHeader: BitkitPageSidebarDrawerHeader,
 	Footer: BitkitPageSidebarFooter,
 	GroupHeading: BitkitPageSidebarGroupHeading,
 	Item: BitkitPageSidebarItem,