@bitrise/bitkit-v2 0.3.359-beta.2314 → 0.3.359

package/dist/components/BitkitCheckbox/BitkitCheckbox.d.ts

@@ -1,6 +1,6 @@
 import { Checkbox } from '@chakra-ui/react/checkbox';
 import { DataAttr } from '@chakra-ui/react/styled-system';
-import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 type BitkitCheckboxBaseProps = {
     /** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */
     inputProps?: InputHTMLAttributes<HTMLInputElement> & DataAttr;
@@ -12,20 +12,13 @@ type BitkitCheckboxBaseProps = {
  * select-all header — an `aria-label`, which is applied to the hidden input instead of being
  * rendered.
  */
-export type BitkitCheckboxProps<T extends NonNullable<ReactNode> = NonNullable<ReactNode>> = BitkitCheckboxBaseProps & ({
+export type BitkitCheckboxProps = BitkitCheckboxBaseProps & ({
     helperText?: ReactNode;
-    /**
-     * The visible label, which is where the checkbox gets its accessible name from. It has to be
-     * non-empty — an empty string is a compile error. When the layout has no room for a visible
-     * label, pass `aria-label` instead of an empty `labelText`.
-     */
-    labelText: T extends '' ? never : T;
+    labelText: NonNullable<ReactNode>;
 } | {
     'aria-label': string;
     helperText?: never;
     labelText?: null;
 });
-declare const _default: <T extends NonNullable<ReactNode>>(props: BitkitCheckboxProps<T> & {
-    ref?: Ref<HTMLInputElement>;
-}) => ReactElement;
-export default _default;
+declare const BitkitCheckbox: import('react').ForwardRefExoticComponent<BitkitCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export default BitkitCheckbox;

package/dist/components/BitkitCheckbox/BitkitCheckbox.js

@@ -1,12 +1,12 @@
 import IconCheck from "../../icons/IconCheck.js";
 import IconMinus from "../../icons/IconMinus.js";
-import { isEmptyNode } from "../../utilities/isEmptyNode.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { Skeleton } from "@chakra-ui/react/skeleton";
 import { Checkbox } from "@chakra-ui/react/checkbox";
 //#region lib/components/BitkitCheckbox/BitkitCheckbox.tsx
+var isEmptyNode = (node) => node == null || node === "" || typeof node === "boolean";
 var BitkitCheckbox = forwardRef((props, ref) => {
 	const { "aria-label": ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;
 	const hasHelperText = !isEmptyNode(helperText);

package/dist/components/BitkitCheckbox/BitkitCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\n\ntype BitkitCheckboxBaseProps = {\n  /** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */\n  inputProps?: InputHTMLAttributes<HTMLInputElement> & DataAttr;\n  state?: 'disabled' | 'readOnly' | 'skeleton';\n} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;\n\n/**\n * A checkbox has to end up with an accessible name, and it takes that name from its label. So either\n * pass a visible `labelText`, or — for a checkbox in a layout with no room for one, like a table\n * select-all header — an `aria-label`, which is applied to the hidden input instead of being\n * rendered.\n */\nexport type BitkitCheckboxProps<T extends NonNullable<ReactNode> = NonNullable<ReactNode>> = BitkitCheckboxBaseProps &\n  (\n    | {\n        helperText?: ReactNode;\n        /**\n         * The visible label, which is where the checkbox gets its accessible name from. It has to be\n         * non-empty — an empty string is a compile error. When the layout has no room for a visible\n         * label, pass `aria-label` instead of an empty `labelText`.\n         */\n        labelText: T extends '' ? never : T;\n      }\n    | { 'aria-label': string; helperText?: never; labelText?: null }\n  );\n\nconst BitkitCheckbox = forwardRef<HTMLInputElement, BitkitCheckboxProps>((props, ref) => {\n  const { 'aria-label': ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;\n  const hasHelperText = !isEmptyNode(helperText);\n  const hasLabel = !isEmptyNode(labelText) || hasHelperText;\n\n  // Skeleton has to set disabled to be inert: the Skeleton wrapper's own pointer-events: none never\n  // stopped a click, it only moved the target to the <label>, which activates the control. The cursor\n  // style prop then keeps the arrow plain — style props land outside @layer recipes, where the\n  // recipe's _disabled: { cursor: 'not-allowed' } sits.\n  return (\n    <Checkbox.Root\n      cursor={state === 'skeleton' ? 'default' : undefined}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      readOnly={state === 'readOnly'}\n      {...rest}\n    >\n      <Checkbox.HiddenInput aria-label={ariaLabel} ref={ref} {...inputProps} />\n      <Skeleton loading={state === 'skeleton'}>\n        <Checkbox.Control>{rest.checked === 'indeterminate' ? <IconMinus /> : <IconCheck />}</Checkbox.Control>\n      </Skeleton>\n      {hasLabel && (\n        <Skeleton loading={state === 'skeleton'}>\n          <Checkbox.Label as=\"div\">\n            {labelText}\n            {hasHelperText && (\n              <Text color=\"text/helper\" textStyle=\"comp/input/helperText\">\n                {helperText}\n              </Text>\n            )}\n          </Checkbox.Label>\n        </Skeleton>\n      )}\n    </Checkbox.Root>\n  );\n});\n\nBitkitCheckbox.displayName = 'BitkitCheckbox';\n\n// The generic is what makes `labelText=\"\"` a compile error: `Exclude` cannot narrow `string` to\n// \"non-empty string\", but a conditional type on an inferred literal can. The cast carries the\n// generic through the call site, which `forwardRef`'s own signature would erase.\nexport default BitkitCheckbox as <T extends NonNullable<ReactNode>>(\n  props: BitkitCheckboxProps<T> & { ref?: Ref<HTMLInputElement> },\n) => ReactElement;\n"],"mappings":";;;;;;;;;AAmCA,IAAM,iBAAiB,YAAmD,OAAO,QAAQ;CACvF,MAAM,EAAE,cAAc,WAAW,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACvF,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,WAAW,CAAC,YAAY,SAAS,KAAK;CAM5C,OACE,qBAAC,SAAS,MAAV;EACE,QAAQ,UAAU,aAAa,YAAY,KAAA;EAC3C,UAAU,UAAU,cAAc,UAAU;EAC5C,UAAU,UAAU;EACpB,GAAI;EAJN,UAAA;GAME,oBAAC,SAAS,aAAV;IAAsB,cAAY;IAAgB;IAAK,GAAI;GAAa,CAAA;GACxE,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,SAAS,SAAV,EAAA,UAAmB,KAAK,YAAY,kBAAkB,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA,EAAoB,CAAA;GAC9F,CAAA;GACT,YACC,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,SAAS,OAAV;KAAgB,IAAG;KAAnB,UAAA,CACG,WACA,iBACC,oBAAC,MAAD;MAAM,OAAM;MAAc,WAAU;MACjC,UAAA;KACG,CAAA,CAEM;;GACR,CAAA;EAEC;;AAEnB,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\ntype BitkitCheckboxBaseProps = {\n  /** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */\n  inputProps?: InputHTMLAttributes<HTMLInputElement> & DataAttr;\n  state?: 'disabled' | 'readOnly' | 'skeleton';\n} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;\n\n/**\n * A checkbox has to end up with an accessible name, and it takes that name from its label. So either\n * pass a visible `labelText`, or — for a checkbox in a layout with no room for one, like a table\n * select-all header — an `aria-label`, which is applied to the hidden input instead of being\n * rendered.\n */\nexport type BitkitCheckboxProps = BitkitCheckboxBaseProps &\n  (\n    | {\n        helperText?: ReactNode;\n        labelText: NonNullable<ReactNode>;\n      }\n    | { 'aria-label': string; helperText?: never; labelText?: null }\n  );\n\nconst isEmptyNode = (node: ReactNode) => node == null || node === '' || typeof node === 'boolean';\n\nconst BitkitCheckbox = forwardRef<HTMLInputElement, BitkitCheckboxProps>((props, ref) => {\n  const { 'aria-label': ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;\n  const hasHelperText = !isEmptyNode(helperText);\n  const hasLabel = !isEmptyNode(labelText) || hasHelperText;\n\n  // Skeleton has to set disabled to be inert: the Skeleton wrapper's own pointer-events: none never\n  // stopped a click, it only moved the target to the <label>, which activates the control. The cursor\n  // style prop then keeps the arrow plain — style props land outside @layer recipes, where the\n  // recipe's _disabled: { cursor: 'not-allowed' } sits.\n  return (\n    <Checkbox.Root\n      cursor={state === 'skeleton' ? 'default' : undefined}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      readOnly={state === 'readOnly'}\n      {...rest}\n    >\n      <Checkbox.HiddenInput aria-label={ariaLabel} ref={ref} {...inputProps} />\n      <Skeleton loading={state === 'skeleton'}>\n        <Checkbox.Control>{rest.checked === 'indeterminate' ? <IconMinus /> : <IconCheck />}</Checkbox.Control>\n      </Skeleton>\n      {hasLabel && (\n        <Skeleton loading={state === 'skeleton'}>\n          <Checkbox.Label as=\"div\">\n            {labelText}\n            {hasHelperText && (\n              <Text color=\"text/helper\" textStyle=\"comp/input/helperText\">\n                {helperText}\n              </Text>\n            )}\n          </Checkbox.Label>\n        </Skeleton>\n      )}\n    </Checkbox.Root>\n  );\n});\n\nBitkitCheckbox.displayName = 'BitkitCheckbox';\n\nexport default BitkitCheckbox;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,SAAoB,QAAQ,QAAQ,SAAS,MAAM,OAAO,SAAS;AAExF,IAAM,iBAAiB,YAAmD,OAAO,QAAQ;CACvF,MAAM,EAAE,cAAc,WAAW,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACvF,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,WAAW,CAAC,YAAY,SAAS,KAAK;CAM5C,OACE,qBAAC,SAAS,MAAV;EACE,QAAQ,UAAU,aAAa,YAAY,KAAA;EAC3C,UAAU,UAAU,cAAc,UAAU;EAC5C,UAAU,UAAU;EACpB,GAAI;EAJN,UAAA;GAME,oBAAC,SAAS,aAAV;IAAsB,cAAY;IAAgB;IAAK,GAAI;GAAa,CAAA;GACxE,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,SAAS,SAAV,EAAA,UAAmB,KAAK,YAAY,kBAAkB,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA,EAAoB,CAAA;GAC9F,CAAA;GACT,YACC,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,SAAS,OAAV;KAAgB,IAAG;KAAnB,UAAA,CACG,WACA,iBACC,oBAAC,MAAD;MAAM,OAAM;MAAc,WAAU;MACjC,UAAA;KACG,CAAA,CAEM;;GACR,CAAA;EAEC;;AAEnB,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitControlButton/BitkitControlButton.js

@@ -58,6 +58,7 @@ var BitkitControlButton = forwardRef((props, ref) => {
 			ref,
 			"aria-label": label,
 			disabled: state === "disabled" || state === "skeleton",
+			type: "button",
 			...buttonRest,
 			css: recipe({
 				isDanger,

package/dist/components/BitkitControlButton/BitkitControlButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitControlButton.js","names":[],"sources":["../../../lib/components/BitkitControlButton/BitkitControlButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype ControlButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\ninterface BitkitControlButtonCommonProps {\n  icon: BitkitIconComponent;\n  isDanger?: boolean;\n  label: string;\n  size?: ControlButtonSize;\n  state?: 'disabled' | 'skeleton';\n  tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\n// Exported so dependent declarations can name it: `BitkitTabs.AddButton`'s props derive from\n// `Extract<BitkitControlButtonProps, { href?: undefined }>` (this type), and the .d.ts emit\n// fails with TS4023 (\"cannot be named\") if it isn't exported.\nexport interface BitkitControlButtonAsButtonProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\nexport interface BitkitControlButtonAsAnchorProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'size'> {\n  href: string;\n  isExternal?: boolean;\n}\n\nexport type BitkitControlButtonProps = BitkitControlButtonAsButtonProps | BitkitControlButtonAsAnchorProps;\n\nconst BitkitControlButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitControlButtonProps>(\n  (props, ref) => {\n    const Icon = props.icon;\n    const size = props.size ?? 'sm';\n    const recipe = useRecipe({ key: 'controlButton' });\n    const iconSize = size === 'xxs' || size === 'xs' ? '16' : '24';\n    const isDisabled = props.state === 'disabled';\n    const isSkeleton = props.state === 'skeleton';\n    const inertOnClick = isDisabled || isSkeleton;\n\n    // --- Anchor mode (href) ---\n    if (props.href !== undefined) {\n      const {\n        href,\n        icon: _icon,\n        isDanger,\n        isExternal,\n        label,\n        onClick,\n        onKeyDown,\n        rel,\n        size: _size,\n        state: _state,\n        target,\n        tooltipProps,\n        ...anchorRest\n      } = props;\n      const effectiveTarget = isExternal ? '_blank' : target;\n      const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n      const handleClick = inertOnClick\n        ? (e: MouseEvent<HTMLAnchorElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = inertOnClick\n        ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              e.stopPropagation();\n            }\n          }\n        : onKeyDown;\n      return (\n        <BitkitLabelTooltip text={label} {...tooltipProps}>\n          <chakra.a\n            ref={ref as Ref<HTMLAnchorElement>}\n            aria-disabled={inertOnClick || undefined}\n            aria-label={label}\n            {...anchorRest}\n            css={recipe({ isDanger, size })}\n            href={inertOnClick ? undefined : href}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            rel={effectiveRel}\n            target={effectiveTarget}\n          >\n            <Skeleton loading={isSkeleton}>\n              <Icon size={iconSize} />\n            </Skeleton>\n          </chakra.a>\n        </BitkitLabelTooltip>\n      );\n    }\n\n    // --- Button mode (default) ---\n    const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;\n    return (\n      <BitkitLabelTooltip text={label} {...tooltipProps}>\n        <chakra.button\n          ref={ref as Ref<HTMLButtonElement>}\n          aria-label={label}\n          disabled={state === 'disabled' || state === 'skeleton'}\n          {...buttonRest}\n          css={recipe({ isDanger, size })}\n        >\n          <Skeleton loading={isSkeleton}>\n            <Icon size={iconSize} />\n          </Skeleton>\n        </chakra.button>\n      </BitkitLabelTooltip>\n    );\n  },\n);\n\nBitkitControlButton.displayName = 'BitkitControlButton';\n\nexport default BitkitControlButton;\n"],"mappings":";;;;;;AAmCA,IAAM,sBAAsB,YACzB,OAAO,QAAQ;CACd,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,UAAU,EAAE,KAAK,gBAAgB,CAAC;CACjD,MAAM,WAAW,SAAS,SAAS,SAAS,OAAO,OAAO;CAC1D,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,eAAe,cAAc;CAGnC,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,MACA,MAAM,OACN,UACA,YACA,OACA,SACA,WACA,KACA,MAAM,OACN,OAAO,QACP,QACA,cACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,gBACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,gBACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GACnC,UAAA,oBAAC,OAAO,GAAR;IACO;IACL,iBAAe,gBAAgB,KAAA;IAC/B,cAAY;IACZ,GAAI;IACJ,KAAK,OAAO;KAAE;KAAU;IAAK,CAAC;IAC9B,MAAM,eAAe,KAAA,IAAY;IACjC,SAAS;IACT,WAAW;IACX,KAAK;IACL,QAAQ;IAER,UAAA,oBAAC,UAAD;KAAU,SAAS;KACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACf,CAAA;GACF,CAAA;EACQ,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,OAAO,cAAc,GAAG,eAAe;CAC1F,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;GAC5C,GAAI;GACJ,KAAK,OAAO;IAAE;IAAU;GAAK,CAAC;GAE9B,UAAA,oBAAC,UAAD;IAAU,SAAS;IACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACf,CAAA;EACG,CAAA;CACG,CAAA;AAExB,CACF;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"BitkitControlButton.js","names":[],"sources":["../../../lib/components/BitkitControlButton/BitkitControlButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype ControlButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\ninterface BitkitControlButtonCommonProps {\n  icon: BitkitIconComponent;\n  isDanger?: boolean;\n  label: string;\n  size?: ControlButtonSize;\n  state?: 'disabled' | 'skeleton';\n  tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\n// Exported so dependent declarations can name it: `BitkitTabs.AddButton`'s props derive from\n// `Extract<BitkitControlButtonProps, { href?: undefined }>` (this type), and the .d.ts emit\n// fails with TS4023 (\"cannot be named\") if it isn't exported.\nexport interface BitkitControlButtonAsButtonProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\nexport interface BitkitControlButtonAsAnchorProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'size'> {\n  href: string;\n  isExternal?: boolean;\n}\n\nexport type BitkitControlButtonProps = BitkitControlButtonAsButtonProps | BitkitControlButtonAsAnchorProps;\n\nconst BitkitControlButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitControlButtonProps>(\n  (props, ref) => {\n    const Icon = props.icon;\n    const size = props.size ?? 'sm';\n    const recipe = useRecipe({ key: 'controlButton' });\n    const iconSize = size === 'xxs' || size === 'xs' ? '16' : '24';\n    const isDisabled = props.state === 'disabled';\n    const isSkeleton = props.state === 'skeleton';\n    const inertOnClick = isDisabled || isSkeleton;\n\n    // --- Anchor mode (href) ---\n    if (props.href !== undefined) {\n      const {\n        href,\n        icon: _icon,\n        isDanger,\n        isExternal,\n        label,\n        onClick,\n        onKeyDown,\n        rel,\n        size: _size,\n        state: _state,\n        target,\n        tooltipProps,\n        ...anchorRest\n      } = props;\n      const effectiveTarget = isExternal ? '_blank' : target;\n      const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n      const handleClick = inertOnClick\n        ? (e: MouseEvent<HTMLAnchorElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = inertOnClick\n        ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              e.stopPropagation();\n            }\n          }\n        : onKeyDown;\n      return (\n        <BitkitLabelTooltip text={label} {...tooltipProps}>\n          <chakra.a\n            ref={ref as Ref<HTMLAnchorElement>}\n            aria-disabled={inertOnClick || undefined}\n            aria-label={label}\n            {...anchorRest}\n            css={recipe({ isDanger, size })}\n            href={inertOnClick ? undefined : href}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            rel={effectiveRel}\n            target={effectiveTarget}\n          >\n            <Skeleton loading={isSkeleton}>\n              <Icon size={iconSize} />\n            </Skeleton>\n          </chakra.a>\n        </BitkitLabelTooltip>\n      );\n    }\n\n    // --- Button mode (default) ---\n    const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;\n    return (\n      <BitkitLabelTooltip text={label} {...tooltipProps}>\n        <chakra.button\n          ref={ref as Ref<HTMLButtonElement>}\n          aria-label={label}\n          disabled={state === 'disabled' || state === 'skeleton'}\n          // A control button is an action, not a form submit — without this it would submit any\n          // form it happens to sit inside. Before the spread, so a consumer can still opt into\n          // `type=\"submit\"`.\n          type=\"button\"\n          {...buttonRest}\n          css={recipe({ isDanger, size })}\n        >\n          <Skeleton loading={isSkeleton}>\n            <Icon size={iconSize} />\n          </Skeleton>\n        </chakra.button>\n      </BitkitLabelTooltip>\n    );\n  },\n);\n\nBitkitControlButton.displayName = 'BitkitControlButton';\n\nexport default BitkitControlButton;\n"],"mappings":";;;;;;AAmCA,IAAM,sBAAsB,YACzB,OAAO,QAAQ;CACd,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,UAAU,EAAE,KAAK,gBAAgB,CAAC;CACjD,MAAM,WAAW,SAAS,SAAS,SAAS,OAAO,OAAO;CAC1D,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,eAAe,cAAc;CAGnC,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,MACA,MAAM,OACN,UACA,YACA,OACA,SACA,WACA,KACA,MAAM,OACN,OAAO,QACP,QACA,cACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,gBACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,gBACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GACnC,UAAA,oBAAC,OAAO,GAAR;IACO;IACL,iBAAe,gBAAgB,KAAA;IAC/B,cAAY;IACZ,GAAI;IACJ,KAAK,OAAO;KAAE;KAAU;IAAK,CAAC;IAC9B,MAAM,eAAe,KAAA,IAAY;IACjC,SAAS;IACT,WAAW;IACX,KAAK;IACL,QAAQ;IAER,UAAA,oBAAC,UAAD;KAAU,SAAS;KACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACf,CAAA;GACF,CAAA;EACQ,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,OAAO,cAAc,GAAG,eAAe;CAC1F,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;GAI5C,MAAK;GACL,GAAI;GACJ,KAAK,OAAO;IAAE;IAAU;GAAK,CAAC;GAE9B,UAAA,oBAAC,UAAD;IAAU,SAAS;IACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACf,CAAA;EACG,CAAA;CACG,CAAA;AAExB,CACF;AAEA,oBAAoB,cAAc"}

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts

@@ -1,6 +1,8 @@
 import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
 export interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {
+    badge?: ReactNode;
     icon?: BitkitIconComponent;
     label: string;
 }

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js

@@ -5,22 +5,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Separator } from "@chakra-ui/react/separator";
 //#region lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx
 var BitkitGroupHeading = forwardRef((props, ref) => {
-	const { icon: Icon, label, ...rest } = props;
+	const { badge, icon: Icon, label, ...rest } = props;
 	const styles = useSlotRecipe({ key: "groupHeading" })();
 	return /* @__PURE__ */ jsxs(Box, {
 		css: styles.root,
 		ref,
 		...rest,
-		children: [/* @__PURE__ */ jsxs(chakra.div, {
-			css: styles.titleBlock,
-			children: [Icon && /* @__PURE__ */ jsx(Icon, {
-				css: styles.icon,
-				size: "16"
-			}), /* @__PURE__ */ jsx(chakra.span, {
-				css: styles.label,
-				children: label
-			})]
-		}), /* @__PURE__ */ jsx(Separator, { css: styles.separator })]
+		children: [
+			/* @__PURE__ */ jsxs(chakra.div, {
+				css: styles.titleBlock,
+				children: [Icon && /* @__PURE__ */ jsx(Icon, {
+					css: styles.icon,
+					size: "16"
+				}), /* @__PURE__ */ jsx(chakra.span, {
+					css: styles.label,
+					children: label
+				})]
+			}),
+			/* @__PURE__ */ jsx(Separator, { css: styles.separator }),
+			badge
+		]
 	});
 });
 BitkitGroupHeading.displayName = "BitkitGroupHeading";

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n  const { icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'groupHeading' });\n  const styles = recipe();\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      <chakra.div css={styles.titleBlock}>\n        {Icon && <Icon css={styles.icon} size=\"16\" />}\n        <chakra.span css={styles.label}>{label}</chakra.span>\n      </chakra.div>\n      <Separator css={styles.separator} />\n    </Box>\n  );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAYA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,MAAM,MAAM,OAAO,GAAG,SAAS;CAGvC,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAM,MAAK;GAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAQ,UAAA;GAAmB,CAAA,CAC1C;EACZ,CAAA,GAAA,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA,CAChC;;AAET,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n  badge?: ReactNode;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n  const { badge, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'groupHeading' });\n  const styles = recipe();\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      <chakra.div css={styles.titleBlock}>\n        {Icon && <Icon css={styles.icon} size=\"16\" />}\n        <chakra.span css={styles.label}>{label}</chakra.span>\n      </chakra.div>\n      <Separator css={styles.separator} />\n      {badge}\n    </Box>\n  );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAaA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,OAAO,MAAM,MAAM,OAAO,GAAG,SAAS;CAG9C,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA;GACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAQ,UAAA;IAAmB,CAAA,CAC1C;;GACZ,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA;GAClC;EACE;;AAET,CAAC;AAED,mBAAmB,cAAc"}

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

@@ -0,0 +1,74 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { SeparatorProps } from '@chakra-ui/react/separator';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
+export interface BitkitPageSidebarProps extends BoxProps {
+    children: ReactNode;
+}
+interface BitkitPageSidebarItemCommonProps {
+    badge?: ReactNode;
+    /**
+     * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with
+     * an ellipsis, and the overflow tooltip needs the full text to reveal.
+     */
+    children: string;
+    icon?: BitkitIconComponent;
+    /**
+     * Marks the item as the current page. Mutually exclusive with `state="disabled"` — you cannot be
+     * on a page whose nav item is unavailable — but the two are not type-checked against each other:
+     * the combination only ever arrives from a computed `selected`, which no union can catch, and
+     * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do
+     * turn up, disabled wins, since that is the one of the two the design actually defines.
+     */
+    selected?: boolean;
+    state?: 'disabled';
+    suffixIcon?: BitkitIconComponent;
+}
+interface BitkitPageSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {
+    href: string;
+}
+interface BitkitPageSidebarItemButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {
+    href?: never;
+}
+export type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;
+interface BitkitPageSidebarTitleCommonProps extends BoxProps {
+    backLabel?: string;
+    children: ReactNode;
+}
+interface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {
+    backHref: string;
+    onBackClick?: never;
+}
+interface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {
+    backHref?: never;
+    onBackClick: () => void;
+}
+interface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {
+    backHref?: never;
+    onBackClick?: never;
+}
+export type BitkitPageSidebarTitleProps = BitkitPageSidebarTitleButtonProps | BitkitPageSidebarTitleLinkProps | BitkitPageSidebarTitlePlainProps;
+export interface BitkitPageSidebarBodyProps extends BoxProps {
+    children: ReactNode;
+}
+export interface BitkitPageSidebarFooterProps extends BoxProps {
+    children: ReactNode;
+}
+export interface BitkitPageSidebarProjectProps extends BoxProps {
+    label: string;
+    value: string;
+}
+export type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;
+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>>;
+    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>>;
+    Project: import('react').ForwardRefExoticComponent<BitkitPageSidebarProjectProps & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<BitkitPageSidebarTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js

@@ -0,0 +1,244 @@
+import IconChevronLeft from "../../icons/IconChevronLeft.js";
+import { withSubComponents } from "../../utilities/withSubComponents.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 { Box } from "@chakra-ui/react/box";
+import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Separator } from "@chakra-ui/react/separator";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx
+/**
+* Page-level navigation sidebar. It expects three children, in this order:
+*
+* ```tsx
+* <BitkitPageSidebar>
+*   <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>
+*   <BitkitPageSidebar.Body>
+*     <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>
+*   </BitkitPageSidebar.Body>
+*   <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>
+* </BitkitPageSidebar>
+* ```
+*
+* `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is
+* taller than the viewport the whole thing — footer included — grows and scrolls with the page,
+* which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.
+*
+* The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page
+* with more than one sidebar should name each one — pass your own `aria-label` (or
+* `aria-labelledby`), which overrides the default.
+*
+* It stands at least viewport-tall by default. An embedded panel that should size to its content
+* opts out with `minHeight="auto"`.
+*/
+var BitkitPageSidebar = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		"aria-label": "Page navigation",
+		asChild: true,
+		css: styles.root,
+		...rest,
+		children: /* @__PURE__ */ jsx("nav", { children })
+	});
+});
+BitkitPageSidebar.displayName = "BitkitPageSidebar";
+var BitkitPageSidebarItem = forwardRef((props, ref) => {
+	const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;
+	const isDisabled = state === "disabled";
+	const isSelected = selected === true && !isDisabled;
+	const styles = useSlotRecipe({ key: "pageSidebar" })({
+		isDisabled,
+		selected: isSelected
+	});
+	const { isTruncated, ref: labelRef } = useIsTruncated(children);
+	const itemContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Box, {
+			as: "span",
+			css: styles.contentBlock,
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				css: styles.itemIcon,
+				size: "16"
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.itemLabel,
+				ref: labelRef,
+				children
+			})]
+		}),
+		badge,
+		SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, {
+			css: styles.suffixIcon,
+			size: "16"
+		}),
+		isSelected && /* @__PURE__ */ jsx(Box, {
+			as: "span",
+			css: styles.selectionMarker
+		})
+	] });
+	const withTooltip = (row) => /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+		disabled: !isTruncated,
+		text: children,
+		children: row
+	});
+	if (rest.href !== void 0) {
+		const { className, href, onClick, onKeyDown, ...linkRest } = rest;
+		const handleClick = isDisabled ? (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+		} : onClick;
+		const handleKeyDown = isDisabled ? (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		} : onKeyDown;
+		return withTooltip(/* @__PURE__ */ jsx(chakra.a, {
+			ref,
+			...linkRest,
+			"aria-current": isSelected ? "page" : void 0,
+			"aria-disabled": isDisabled || void 0,
+			className: className ? `group ${className}` : "group",
+			css: styles.item,
+			href: isDisabled ? void 0 : href,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			children: itemContent
+		}));
+	}
+	const { className, href: _href, ...buttonRest } = rest;
+	return withTooltip(/* @__PURE__ */ jsx(chakra.button, {
+		ref,
+		...buttonRest,
+		"aria-current": isSelected ? "page" : void 0,
+		className: className ? `group ${className}` : "group",
+		css: styles.item,
+		disabled: isDisabled,
+		type: "button",
+		children: itemContent
+	}));
+});
+BitkitPageSidebarItem.displayName = "BitkitPageSidebarItem";
+var BitkitPageSidebarTitle = forwardRef((props, ref) => {
+	const { backHref, backLabel = "Back", children, onBackClick, ...rest } = props;
+	const hasBack = backHref !== void 0 || onBackClick !== void 0;
+	const styles = useSlotRecipe({ key: "pageSidebar" })({ hasBack });
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		css: styles.title,
+		...rest,
+		children: /* @__PURE__ */ jsxs(Box, {
+			css: styles.titleBlock,
+			children: [hasBack && (backHref !== void 0 ? /* @__PURE__ */ jsx(BitkitControlButton, {
+				href: backHref,
+				icon: IconChevronLeft,
+				label: backLabel,
+				size: "xs",
+				tooltipProps: { placement: "right" }
+			}) : /* @__PURE__ */ jsx(BitkitControlButton, {
+				icon: IconChevronLeft,
+				label: backLabel,
+				onClick: onBackClick,
+				size: "xs",
+				tooltipProps: { placement: "right" }
+			})), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.titleText,
+				children
+			})]
+		})
+	});
+});
+BitkitPageSidebarTitle.displayName = "BitkitPageSidebarTitle";
+/**
+* Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer
+* sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the
+* footer so the two blocks stay visually separate however long the list gets.
+*/
+var BitkitPageSidebarBody = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		css: styles.body,
+		...rest,
+		children
+	});
+});
+BitkitPageSidebarBody.displayName = "BitkitPageSidebarBody";
+var BitkitPageSidebarFooter = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		css: styles.footer,
+		...rest,
+		children
+	});
+});
+BitkitPageSidebarFooter.displayName = "BitkitPageSidebarFooter";
+var BitkitPageSidebarProject = forwardRef((props, ref) => {
+	const { label, value, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	const { isTruncated, ref: valueRef } = useIsTruncated(value);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		css: styles.project,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			css: styles.projectLabel,
+			children: label
+		}), /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+			disabled: !isTruncated,
+			text: value,
+			children: /* @__PURE__ */ jsx(Box, {
+				css: styles.projectValueWrapper,
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					css: styles.projectValue,
+					ref: valueRef,
+					children: value
+				})
+			})
+		})]
+	});
+});
+BitkitPageSidebarProject.displayName = "BitkitPageSidebarProject";
+var BitkitPageSidebarGroupHeading = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(BitkitGroupHeading, {
+		ref,
+		paddingBlockEnd: "8",
+		paddingBlockStart: "16",
+		paddingInline: "24",
+		...props
+	});
+});
+BitkitPageSidebarGroupHeading.displayName = "BitkitPageSidebarGroupHeading";
+var BitkitPageSidebarDivider = forwardRef((props, ref) => {
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		css: styles.divider,
+		...props
+	});
+});
+BitkitPageSidebarDivider.displayName = "BitkitPageSidebarDivider";
+var BitkitPageSidebar_default = withSubComponents(BitkitPageSidebar, {
+	Body: BitkitPageSidebarBody,
+	Divider: BitkitPageSidebarDivider,
+	Footer: BitkitPageSidebarFooter,
+	GroupHeading: BitkitPageSidebarGroupHeading,
+	Item: BitkitPageSidebarItem,
+	Project: BitkitPageSidebarProject,
+	Title: BitkitPageSidebarTitle
+});
+//#endregion
+export { BitkitPageSidebar_default as default };
+
+//# sourceMappingURL=BitkitPageSidebar.js.map

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitPageSidebar.js","names":[],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n *   <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n *   <BitkitPageSidebar.Body>\n *     <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n *   </BitkitPageSidebar.Body>\n *   <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n  const { children, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} aria-label=\"Page navigation\" asChild css={styles.root} {...rest}>\n      <nav>{children}</nav>\n    </Box>\n  );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n  badge?: ReactNode;\n  /**\n   * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n   * an ellipsis, and the overflow tooltip needs the full text to reveal.\n   */\n  children: string;\n  icon?: BitkitIconComponent;\n  /**\n   * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n   * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n   * the combination only ever arrives from a computed `selected`, which no union can catch, and\n   * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n   * turn up, disabled wins, since that is the one of the two the design actually defines.\n   */\n  selected?: boolean;\n  state?: 'disabled';\n  suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n  extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n  href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n  href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n  (props, ref) => {\n    const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n    const isDisabled = state === 'disabled';\n    // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n    // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n    // both claim the same slot.\n    const isSelected = selected === true && !isDisabled;\n\n    const recipe = useSlotRecipe({ key: 'pageSidebar' });\n    const styles = recipe({ isDisabled, selected: isSelected });\n\n    const { isTruncated, ref: labelRef } = useIsTruncated<HTMLParagraphElement>(children);\n\n    const itemContent = (\n      <>\n        {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n            content model allows phrasing content only. */}\n        <Box as=\"span\" css={styles.contentBlock}>\n          {Icon && <Icon css={styles.itemIcon} size=\"16\" />}\n          <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n            {children}\n          </Text>\n        </Box>\n        {badge}\n        {SuffixIcon && <SuffixIcon css={styles.suffixIcon} size=\"16\" />}\n        {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n      </>\n    );\n\n    // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n    // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n    // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n    // survives, and the ref measuring the truncation sits on the label further in.\n    const withTooltip = (row: ReactNode) => (\n      <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n        {row}\n      </BitkitOverflowTooltip>\n    );\n\n    // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n    // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n    if (rest.href !== undefined) {\n      const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n      const handleClick = isDisabled\n        ? (event: MouseEvent<HTMLAnchorElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = isDisabled\n        ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }\n        : onKeyDown;\n\n      return withTooltip(\n        <chakra.a\n          ref={ref as Ref<HTMLAnchorElement>}\n          {...linkRest}\n          aria-current={isSelected ? 'page' : undefined}\n          aria-disabled={isDisabled || undefined}\n          className={className ? `group ${className}` : 'group'}\n          css={styles.item}\n          href={isDisabled ? undefined : href}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n        >\n          {itemContent}\n        </chakra.a>,\n      );\n    }\n\n    const { className, href: _href, ...buttonRest } = rest;\n\n    return withTooltip(\n      <chakra.button\n        ref={ref as Ref<HTMLButtonElement>}\n        {...buttonRest}\n        aria-current={isSelected ? 'page' : undefined}\n        className={className ? `group ${className}` : 'group'}\n        css={styles.item}\n        disabled={isDisabled}\n        type=\"button\"\n      >\n        {itemContent}\n      </chakra.button>,\n    );\n  },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n  backLabel?: string;\n  children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n  backHref: string;\n  onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n  | BitkitPageSidebarTitleButtonProps\n  | BitkitPageSidebarTitleLinkProps\n  | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n  const { backHref, backLabel = 'Back', children, onBackClick, ...rest } = props;\n\n  const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe({ hasBack });\n\n  return (\n    <Box ref={ref} css={styles.title} {...rest}>\n      <Box css={styles.titleBlock}>\n        {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n            button sits at the very top of the sidebar, so the tooltip jams against the viewport\n            edge and covers the header instead of flipping. */}\n        {hasBack &&\n          (backHref !== undefined ? (\n            <BitkitControlButton\n              href={backHref}\n              icon={IconChevronLeft}\n              label={backLabel}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ) : (\n            <BitkitControlButton\n              icon={IconChevronLeft}\n              label={backLabel}\n              onClick={onBackClick}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ))}\n        <Text as=\"span\" css={styles.titleText}>\n          {children}\n        </Text>\n      </Box>\n    </Box>\n  );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n  const { children, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={styles.body} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n  children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n  const { children, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={styles.footer} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n  label: string;\n  value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n  const { label, value, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  const { isTruncated, ref: valueRef } = useIsTruncated<HTMLParagraphElement>(value);\n\n  return (\n    <Box ref={ref} css={styles.project} {...rest}>\n      <Text as=\"span\" css={styles.projectLabel}>\n        {label}\n      </Text>\n      {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n      <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n        <Box css={styles.projectValueWrapper}>\n          <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n            {value}\n          </Text>\n        </Box>\n      </BitkitOverflowTooltip>\n    </Box>\n  );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n  return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return <Separator ref={ref} css={styles.divider} {...props} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n  Body: BitkitPageSidebarBody,\n  Divider: BitkitPageSidebarDivider,\n  Footer: BitkitPageSidebarFooter,\n  GroupHeading: BitkitPageSidebarGroupHeading,\n  Item: BitkitPageSidebarItem,\n  Project: BitkitPageSidebarProject,\n  Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}

package/dist/components/BitkitRadio/BitkitRadio.d.ts

@@ -1,6 +1,6 @@
 import { RadioGroup } from '@chakra-ui/react/radio-group';
 import { DataAttr } from '@chakra-ui/react/styled-system';
-import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 /**
  * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state
  * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —
@@ -8,30 +8,18 @@ import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
  * things like `data-testid`.
  */
 type RadioInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'> & DataAttr;
-type BitkitRadioBaseProps = {
+export type BitkitRadioProps = {
     badge?: 'off' | 'on';
+    helperText?: ReactNode;
     inputProps?: RadioInputProps;
+    labelText: ReactNode;
     state?: 'disabled' | 'skeleton';
 } & Omit<RadioGroup.ItemProps, 'disabled'>;
-/**
- * A radio has to end up with an accessible name, and it takes that name from its label. So either
- * pass a visible `labelText`, or — for a radio in a layout with no room for one, like a table row
- * selector — an `aria-label`, which is applied to the hidden input instead of being rendered.
- */
-export type BitkitRadioProps<T extends NonNullable<ReactNode> = NonNullable<ReactNode>> = BitkitRadioBaseProps & ({
+declare const BitkitRadio: import('react').ForwardRefExoticComponent<{
+    badge?: "off" | "on";
     helperText?: ReactNode;
-    /**
-     * The visible label, which is where the radio gets its accessible name from. It has to be
-     * non-empty — an empty string is a compile error. When the layout has no room for a visible
-     * label, pass `aria-label` instead of an empty `labelText`.
-     */
-    labelText: T extends '' ? never : T;
-} | {
-    'aria-label': string;
-    helperText?: never;
-    labelText?: null;
-});
-declare const _default: <T extends NonNullable<ReactNode>>(props: BitkitRadioProps<T> & {
-    ref?: Ref<HTMLInputElement>;
-}) => ReactElement;
-export default _default;
+    inputProps?: RadioInputProps;
+    labelText: ReactNode;
+    state?: "disabled" | "skeleton";
+} & Omit<RadioGroup.ItemProps, "disabled"> & import('react').RefAttributes<HTMLInputElement>>;
+export default BitkitRadio;

package/dist/components/BitkitRadio/BitkitRadio.js

@@ -1,5 +1,4 @@
 import BitkitBadge from "../BitkitBadge/BitkitBadge.js";
-import { isEmptyNode } from "../../utilities/isEmptyNode.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
@@ -7,17 +6,14 @@ import { Skeleton } from "@chakra-ui/react/skeleton";
 import { RadioGroup, useRadioGroupStyles } from "@chakra-ui/react/radio-group";
 //#region lib/components/BitkitRadio/BitkitRadio.tsx
 var BitkitRadio = forwardRef((props, ref) => {
-	const { "aria-label": ariaLabel, badge, helperText, inputProps, labelText, state, ...rest } = props;
+	const { badge, helperText, inputProps, labelText, state, ...rest } = props;
 	const styles = useRadioGroupStyles();
-	const hasHelperText = !isEmptyNode(helperText);
-	const hasLabel = !isEmptyNode(labelText) || hasHelperText;
 	return /* @__PURE__ */ jsxs(RadioGroup.Item, {
 		cursor: state === "skeleton" ? "default" : void 0,
 		disabled: state === "disabled" || state === "skeleton",
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, {
-				"aria-label": ariaLabel,
 				ref,
 				...inputProps
 			}),
@@ -34,11 +30,11 @@ var BitkitRadio = forwardRef((props, ref) => {
 					children: badge
 				})
 			}),
-			hasLabel && /* @__PURE__ */ jsx(Skeleton, {
+			/* @__PURE__ */ jsx(Skeleton, {
 				loading: state === "skeleton",
 				children: /* @__PURE__ */ jsxs(RadioGroup.ItemText, {
 					as: "div",
-					children: [labelText, hasHelperText && /* @__PURE__ */ jsx(Text, {
+					children: [labelText, !!helperText && /* @__PURE__ */ jsx(Text, {
 						color: state === "disabled" ? "text/disabled" : "text/helper",
 						textStyle: "comp/input/helperText",
 						children: helperText