@bitrise/bitkit-v2 0.3.260 → 0.3.261

package/dist/components/BitkitTabs/BitkitTabs.js

@@ -1,11 +1,15 @@
 import IconCross from "../../icons/IconCross.js";
+import IconPlus from "../../icons/IconPlus.js";
+import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
 import { Text } from "@chakra-ui/react/text";
-import { forwardRef } from "react";
+import { Children, Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createContext as createContext$1 } from "@chakra-ui/react";
-import { Tabs } from "@chakra-ui/react/tabs";
+import { Portal } from "@chakra-ui/react/portal";
+import { Menu } from "@chakra-ui/react/menu";
+import { createContext as createContext$1, mergeRefs, useSafeLayoutEffect } from "@chakra-ui/react";
+import { Tabs, useTabsContext, useTabsStyles } from "@chakra-ui/react/tabs";
 //#region lib/components/BitkitTabs/BitkitTabs.tsx
 var [RootPropsProvider, useRootPropsContext] = createContext$1({
 	name: "RootPropsContext",
@@ -21,15 +25,23 @@ var Root = forwardRef((props, ref) => {
 		})
 	});
 });
+var STATUS_COLOR_TOKEN = {
+	neutral: "color/neutral/muted",
+	purple: "interactive/bold",
+	red: "color/red/base",
+	yellow: "color/yellow/bold"
+};
 Root.displayName = "BitkitTabs.Root";
 var Trigger = forwardRef((props, ref) => {
-	const { badge, changed, children, className, icon: Icon, onClose, onKeyDown, secondaryText, ...rest } = props;
-	const { variant } = useRootPropsContext();
+	const { badge, children, className, icon: Icon, onClose, onKeyDown, secondaryText, statusColor, ...rest } = props;
+	const { variant = "line" } = useRootPropsContext();
 	const closeButtonRecipe = useRecipe({ key: "closeButton" });
-	const closable = !!onClose && !rest.disabled;
-	const showTrailing = (closable || changed) && !rest.disabled;
+	const isCanvas = variant === "canvas";
+	const closable = isCanvas && !!onClose && !rest.disabled;
+	const hasStatus = isCanvas && !!statusColor && !rest.disabled;
+	const showTrailing = closable || hasStatus;
 	const mergedClassName = showTrailing ? className ? `group ${className}` : "group" : className;
-	const revealCloseOnInteraction = closable && !!changed;
+	const revealCloseOnInteraction = closable && hasStatus;
 	const revealOnInteraction = {
 		opacity: 1,
 		pointerEvents: "auto"
@@ -43,7 +55,7 @@ var Trigger = forwardRef((props, ref) => {
 		if (closable && (event.key === "Delete" || event.key === "Backspace")) {
 			event.preventDefault();
 			const trigger = event.currentTarget;
-			const triggers = [...trigger.closest("[role=\"tablist\"]")?.querySelectorAll("[role=\"tab\"]") ?? []];
+			const triggers = [...trigger.closest("[role=\"tablist\"]")?.querySelectorAll("[role=\"tab\"]:not([hidden])") ?? []];
 			const index = triggers.indexOf(trigger);
 			(triggers[index + 1] ?? triggers[index - 1])?.focus();
 			onClose?.();
@@ -57,7 +69,7 @@ var Trigger = forwardRef((props, ref) => {
 		justifyContent: "center",
 		boxSize: "24",
 		flexShrink: 0,
-		children: [changed && /* @__PURE__ */ jsx(chakra.span, {
+		children: [hasStatus && statusColor && /* @__PURE__ */ jsx(chakra.span, {
 			position: "absolute",
 			inset: 0,
 			display: "flex",
@@ -70,7 +82,7 @@ var Trigger = forwardRef((props, ref) => {
 			children: /* @__PURE__ */ jsx(chakra.span, {
 				boxSize: "8",
 				borderRadius: "full",
-				backgroundColor: "interactive/bold"
+				backgroundColor: STATUS_COLOR_TOKEN[statusColor]
 			})
 		}), closable && /* @__PURE__ */ jsx(chakra.span, {
 			"aria-hidden": true,
@@ -92,10 +104,16 @@ var Trigger = forwardRef((props, ref) => {
 		ref,
 		...rest,
 		className: mergedClassName,
-		gap: showTrailing ? "12" : void 0,
+		gap: isCanvas ? "4" : showTrailing ? "12" : void 0,
 		onKeyDown: handleTriggerKeyDown,
-		paddingInlineEnd: showTrailing ? "12" : void 0,
-		children: variant === "line" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
+		paddingInlineEnd: isCanvas ? showTrailing ? "8" : void 0 : showTrailing ? "12" : void 0,
+		paddingInlineStart: isCanvas && Icon ? "8" : void 0,
+		children: isCanvas ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
+			display: "flex",
+			alignItems: "center",
+			gap: "8",
+			children: [Icon && /* @__PURE__ */ jsx(Icon, { size: "16" }), children]
+		}), trailing] }) : variant === "line" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
 			display: "flex",
 			alignItems: "center",
 			gap: "8",
@@ -121,13 +139,177 @@ var Trigger = forwardRef((props, ref) => {
 	});
 });
 Trigger.displayName = "BitkitTabs.Trigger";
+var flattenChildren = (nodes) => Children.toArray(nodes).flatMap((child) => {
+	if (!isValidElement(child)) return [];
+	if (child.type === Fragment) return flattenChildren(child.props.children);
+	return [child];
+});
+var getVisibleIndices = (total, count, selectedIndex) => {
+	const visible = /* @__PURE__ */ new Set();
+	for (let i = 0; i < count; i += 1) visible.add(i);
+	if (selectedIndex >= 0 && selectedIndex < total && !visible.has(selectedIndex)) {
+		visible.delete(count - 1);
+		visible.add(selectedIndex);
+	}
+	return visible;
+};
+var AddButton = forwardRef((props, ref) => {
+	const { label = "Add tab", ...rest } = props;
+	return /* @__PURE__ */ jsx(BitkitControlButton, {
+		ref,
+		icon: IconPlus,
+		label,
+		size: "xxs",
+		...rest
+	});
+});
+AddButton.displayName = "BitkitTabs.AddButton";
+var List = forwardRef((props, ref) => {
+	const { children, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest } = props;
+	const { variant = "line" } = useRootPropsContext();
+	const api = useTabsContext();
+	const styles = useTabsStyles();
+	const allChildren = flattenChildren(children);
+	const addButton = allChildren.find((child) => child.type === AddButton) ?? null;
+	const items = allChildren.filter((child) => child.type === Trigger);
+	const measureKey = variant + items.map((item) => {
+		const p = item.props;
+		return [
+			p.value,
+			String(p.children),
+			p.icon ? "i" : "",
+			p.badge ? String(p.badge) : "",
+			p.secondaryText ? String(p.secondaryText) : "",
+			p.statusColor ?? "",
+			p.onClose ? "c" : "",
+			p.disabled ? "d" : ""
+		].join(":");
+	}).join("|");
+	const selectedIndex = items.findIndex((item) => item.props.value === api.value);
+	const moreReserve = variant === "canvas" ? 100 : 140;
+	const addReserve = addButton ? 48 : 0;
+	const listRef = useRef(null);
+	const widthsRef = useRef([]);
+	const paddingRef = useRef(0);
+	const [measuredKey, setMeasuredKey] = useState(null);
+	const [visibleCount, setVisibleCount] = useState(items.length);
+	const setListRef = useMemo(() => mergeRefs(listRef, ref), [ref]);
+	const recompute = useCallback(() => {
+		const el = listRef.current;
+		const widths = widthsRef.current;
+		if (!el || !widths.length) return;
+		const available = el.clientWidth - paddingRef.current - addReserve;
+		if (widths.reduce((sum, w) => sum + w, 0) <= available) {
+			setVisibleCount(widths.length);
+			return;
+		}
+		let used = moreReserve;
+		let count = 0;
+		for (let i = 0; i < widths.length; i += 1) {
+			if (used + widths[i] > available) break;
+			used += widths[i];
+			count += 1;
+		}
+		setVisibleCount(Math.max(count, 1));
+	}, [addReserve, moreReserve]);
+	const measuring = measuredKey !== measureKey;
+	useSafeLayoutEffect(() => {
+		const el = listRef.current;
+		if (!el) return;
+		if (measuredKey !== measureKey) {
+			const tabEls = el.querySelectorAll("[data-tab-trigger]");
+			widthsRef.current = Array.from(tabEls, (node) => node.offsetWidth);
+			const cs = getComputedStyle(el);
+			paddingRef.current = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+			setMeasuredKey(measureKey);
+		}
+		recompute();
+	}, [
+		measureKey,
+		measuredKey,
+		recompute
+	]);
+	useEffect(() => {
+		const el = listRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		let raf = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(recompute);
+		});
+		observer.observe(el);
+		return () => {
+			cancelAnimationFrame(raf);
+			observer.disconnect();
+		};
+	}, [recompute]);
+	const visible = measuring || visibleCount >= items.length ? null : getVisibleIndices(items.length, visibleCount, selectedIndex);
+	const hiddenItems = visible ? items.filter((_, i) => !visible.has(i)) : [];
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setListRef,
+		css: styles.list,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(Tabs.List, {
+				display: "contents",
+				id,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				children: items.map((item, i) => cloneElement(item, {
+					key: item.props.value,
+					"data-tab-trigger": "",
+					hidden: visible ? !visible.has(i) : void 0
+				}))
+			}),
+			hiddenItems.length > 0 && /* @__PURE__ */ jsxs(Menu.Root, {
+				size: "md",
+				positioning: {
+					gutter: 0,
+					shift: -4
+				},
+				children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(chakra.button, {
+						type: "button",
+						css: styles.moreTrigger,
+						children: [hiddenItems.length, " more…"]
+					})
+				}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: hiddenItems.map((item) => /* @__PURE__ */ jsxs(Menu.Item, {
+					value: item.props.value,
+					disabled: item.props.disabled,
+					onSelect: () => api.setValue(item.props.value),
+					alignItems: "center",
+					children: [/* @__PURE__ */ jsx(Text, {
+						flex: "1",
+						color: item.props.disabled ? "text/on-disabled" : "inherit",
+						children: item.props.children
+					}), variant === "canvas" && item.props.statusColor && /* @__PURE__ */ jsx(chakra.span, {
+						boxSize: "8",
+						borderRadius: "full",
+						flexShrink: 0,
+						backgroundColor: STATUS_COLOR_TOKEN[item.props.statusColor]
+					})]
+				}, item.props.value)) }) }) })]
+			}),
+			addButton && /* @__PURE__ */ jsx(Box, {
+				display: "flex",
+				alignItems: "center",
+				flexShrink: 0,
+				paddingInline: "8",
+				children: addButton
+			})
+		]
+	});
+});
+List.displayName = "BitkitTabs.List";
 var BitkitTabs = {
 	...Tabs,
+	AddButton,
+	List,
 	Root,
 	Trigger
 };
 BitkitTabs.Content.displayName = "BitkitTabs.Content";
-BitkitTabs.List.displayName = "BitkitTabs.List";
 BitkitTabs.ContentGroup.displayName = "BitkitTabs.ContentGroup";
 BitkitTabs.Root.displayName = "BitkitTabs.Root";
 //#endregion

package/dist/components/BitkitTabs/BitkitTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTabs.js","names":[],"sources":["../../../lib/components/BitkitTabs/BitkitTabs.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { chakra, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Tabs } from '@chakra-ui/react/tabs';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconCross } from '../../icons';\n\nexport const [RootPropsProvider, useRootPropsContext] = createContext<Tabs.RootProps>({\n  name: 'RootPropsContext',\n  hookName: 'useRootPropsContext',\n  providerName: '<RootProps />',\n});\n\nconst Root = forwardRef<HTMLDivElement, Tabs.RootProps>((props, ref) => {\n  return (\n    <RootPropsProvider value={props}>\n      <Tabs.Root ref={ref} {...props} />\n    </RootPropsProvider>\n  );\n});\n\ntype TriggerProps = Tabs.TriggerProps & {\n  badge?: ReactNode;\n  /** Shows a \"changed\" indicator dot. When hovered (and `onClose` is set), the close button replaces it. */\n  changed?: boolean;\n  children?: string;\n  icon?: BitkitIconComponent;\n  /** When provided, a close button reveals on hover and calls this handler when clicked. */\n  onClose?: () => void;\n  secondaryText?: ReactNode;\n};\n\nRoot.displayName = 'BitkitTabs.Root';\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>((props, ref) => {\n  const { badge, changed, children, className, icon: Icon, onClose, onKeyDown, secondaryText, ...rest } = props;\n  const { variant } = useRootPropsContext();\n  const closeButtonRecipe = useRecipe({ key: 'closeButton' });\n\n  const closable = !!onClose && !rest.disabled;\n  const showTrailing = (closable || changed) && !rest.disabled;\n  const mergedClassName = showTrailing ? (className ? `group ${className}` : 'group') : className;\n  // The close button is always visible when there is no \"changed\" dot; when the dot is shown it is\n  // revealed on hover/focus instead (replacing the dot).\n  const revealCloseOnInteraction = closable && !!changed;\n  const revealOnInteraction = { opacity: 1, pointerEvents: 'auto' } as const;\n\n  const handleCloseClick = (event: MouseEvent<HTMLSpanElement>) => {\n    event.stopPropagation();\n    event.preventDefault();\n    onClose?.();\n  };\n\n  // The close control is not in the tab order; keyboard users close the focused tab with Delete/Backspace.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (closable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      event.preventDefault();\n      // Move focus to a sibling tab before removal so keyboard navigation can continue.\n      const trigger = event.currentTarget;\n      const triggers = [...(trigger.closest('[role=\"tablist\"]')?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? [])];\n      const index = triggers.indexOf(trigger);\n      (triggers[index + 1] ?? triggers[index - 1])?.focus();\n      onClose?.();\n    }\n    onKeyDown?.(event);\n  };\n\n  const trailing = showTrailing ? (\n    <chakra.span\n      position=\"relative\"\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      boxSize=\"24\"\n      flexShrink={0}\n    >\n      {changed && (\n        <chakra.span\n          position=\"absolute\"\n          inset={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          pointerEvents=\"none\"\n          transition=\"opacity 0.1s\"\n          _groupHover={closable ? { opacity: 0 } : undefined}\n          _groupFocusWithin={closable ? { opacity: 0 } : undefined}\n        >\n          <chakra.span boxSize=\"8\" borderRadius=\"full\" backgroundColor=\"interactive/bold\" />\n        </chakra.span>\n      )}\n      {closable && (\n        <chakra.span\n          aria-hidden\n          tabIndex={-1}\n          onClick={handleCloseClick}\n          css={closeButtonRecipe({ size: 'xs' })}\n          position=\"absolute\"\n          inset={0}\n          color=\"icon/primary\"\n          opacity={revealCloseOnInteraction ? 0 : 1}\n          pointerEvents={revealCloseOnInteraction ? 'none' : 'auto'}\n          transition=\"opacity 0.1s\"\n          _groupHover={revealCloseOnInteraction ? revealOnInteraction : undefined}\n          _groupFocusWithin={revealCloseOnInteraction ? revealOnInteraction : undefined}\n        >\n          <IconCross size=\"16\" />\n        </chakra.span>\n      )}\n    </chakra.span>\n  ) : null;\n\n  return (\n    <Tabs.Trigger\n      ref={ref}\n      {...rest}\n      className={mergedClassName}\n      gap={showTrailing ? '12' : undefined}\n      onKeyDown={handleTriggerKeyDown}\n      paddingInlineEnd={showTrailing ? '12' : undefined}\n    >\n      {variant === 'line' ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {Icon && <Icon size=\"24\" />}\n            {children}\n            {badge}\n          </Box>\n          {trailing}\n        </>\n      ) : (\n        <>\n          <Box display=\"flex\" gap=\"16\">\n            {children}\n            {Icon && <Icon size=\"24\" />}\n          </Box>\n          {!!secondaryText && (\n            <Text as=\"span\" textStyle=\"body/md/regular\" color={rest.disabled ? 'text/on-disabled' : 'text/secondary'}>\n              {secondaryText}\n            </Text>\n          )}\n          {trailing}\n        </>\n      )}\n    </Tabs.Trigger>\n  );\n});\n\nTrigger.displayName = 'BitkitTabs.Trigger';\n\nconst BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger'> & { Root: typeof Root; Trigger: typeof Trigger } = {\n  ...Tabs,\n  Root,\n  Trigger,\n};\n\nBitkitTabs.Content.displayName = 'BitkitTabs.Content';\nBitkitTabs.List.displayName = 'BitkitTabs.List';\nBitkitTabs.ContentGroup.displayName = 'BitkitTabs.ContentGroup';\nBitkitTabs.Root.displayName = 'BitkitTabs.Root';\n\nexport default BitkitTabs;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitTabs.js","names":[],"sources":["../../../lib/components/BitkitTabs/BitkitTabs.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext, mergeRefs, useSafeLayoutEffect } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Menu } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Tabs, useTabsContext, useTabsStyles } from '@chakra-ui/react/tabs';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type BitkitIconComponent, IconCross, IconPlus } from '../../icons';\nimport BitkitControlButton, { type BitkitControlButtonProps } from '../BitkitControlButton/BitkitControlButton';\n\nexport const [RootPropsProvider, useRootPropsContext] = createContext<Tabs.RootProps>({\n  name: 'RootPropsContext',\n  hookName: 'useRootPropsContext',\n  providerName: '<RootProps />',\n});\n\nconst Root = forwardRef<HTMLDivElement, Tabs.RootProps>((props, ref) => {\n  return (\n    <RootPropsProvider value={props}>\n      <Tabs.Root ref={ref} {...props} />\n    </RootPropsProvider>\n  );\n});\n\n/** Status-dot colors for the `canvas` variant. */\nexport type BitkitTabsStatusColor = 'neutral' | 'purple' | 'red' | 'yellow';\n\nconst STATUS_COLOR_TOKEN: Record<BitkitTabsStatusColor, string> = {\n  neutral: 'color/neutral/muted',\n  purple: 'interactive/bold',\n  red: 'color/red/base',\n  yellow: 'color/yellow/bold',\n};\n\ntype TriggerProps = Tabs.TriggerProps & {\n  badge?: ReactNode;\n  children?: string;\n  icon?: BitkitIconComponent;\n  /** `canvas` variant only — when provided, a close button reveals on hover and calls this handler when clicked. */\n  onClose?: () => void;\n  secondaryText?: ReactNode;\n  /** `canvas` variant only — shows a status indicator dot. When hovered (and `onClose` is set), the close button replaces it. */\n  statusColor?: BitkitTabsStatusColor;\n};\n\nRoot.displayName = 'BitkitTabs.Root';\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>((props, ref) => {\n  const { badge, children, className, icon: Icon, onClose, onKeyDown, secondaryText, statusColor, ...rest } = props;\n  // Mirror the recipe's defaultVariant so an unset `variant` renders the line layout (not the\n  // contained one) — otherwise an undefined variant would fall through to the contained branch.\n  const { variant = 'line' } = useRootPropsContext();\n  const closeButtonRecipe = useRecipe({ key: 'closeButton' });\n\n  // Close button and status dot are exclusive to the canvas variant.\n  const isCanvas = variant === 'canvas';\n  const closable = isCanvas && !!onClose && !rest.disabled;\n  const hasStatus = isCanvas && !!statusColor && !rest.disabled;\n  const showTrailing = closable || hasStatus;\n  const mergedClassName = showTrailing ? (className ? `group ${className}` : 'group') : className;\n  // The close button is always visible when there is no status dot; when the dot is shown it is\n  // revealed on hover/focus instead (replacing the dot).\n  const revealCloseOnInteraction = closable && hasStatus;\n  const revealOnInteraction = { opacity: 1, pointerEvents: 'auto' } as const;\n\n  const handleCloseClick = (event: MouseEvent<HTMLSpanElement>) => {\n    event.stopPropagation();\n    event.preventDefault();\n    onClose?.();\n  };\n\n  // The close control is not in the tab order; keyboard users close the focused tab with Delete/Backspace.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (closable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      event.preventDefault();\n      // Move focus to a sibling tab before removal so keyboard navigation can continue.\n      const trigger = event.currentTarget;\n      // Skip overflowed (`hidden`) tabs — they aren't focusable.\n      const triggers = [\n        ...(trigger.closest('[role=\"tablist\"]')?.querySelectorAll<HTMLElement>('[role=\"tab\"]:not([hidden])') ?? []),\n      ];\n      const index = triggers.indexOf(trigger);\n      (triggers[index + 1] ?? triggers[index - 1])?.focus();\n      onClose?.();\n    }\n    onKeyDown?.(event);\n  };\n\n  const trailing = showTrailing ? (\n    <chakra.span\n      position=\"relative\"\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      boxSize=\"24\"\n      flexShrink={0}\n    >\n      {hasStatus && statusColor && (\n        <chakra.span\n          position=\"absolute\"\n          inset={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          pointerEvents=\"none\"\n          transition=\"opacity 0.1s\"\n          _groupHover={closable ? { opacity: 0 } : undefined}\n          _groupFocusWithin={closable ? { opacity: 0 } : undefined}\n        >\n          <chakra.span boxSize=\"8\" borderRadius=\"full\" backgroundColor={STATUS_COLOR_TOKEN[statusColor]} />\n        </chakra.span>\n      )}\n      {closable && (\n        <chakra.span\n          aria-hidden\n          tabIndex={-1}\n          onClick={handleCloseClick}\n          css={closeButtonRecipe({ size: 'xs' })}\n          position=\"absolute\"\n          inset={0}\n          color=\"icon/primary\"\n          opacity={revealCloseOnInteraction ? 0 : 1}\n          pointerEvents={revealCloseOnInteraction ? 'none' : 'auto'}\n          transition=\"opacity 0.1s\"\n          _groupHover={revealCloseOnInteraction ? revealOnInteraction : undefined}\n          _groupFocusWithin={revealCloseOnInteraction ? revealOnInteraction : undefined}\n        >\n          <IconCross size=\"16\" />\n        </chakra.span>\n      )}\n    </chakra.span>\n  ) : null;\n\n  return (\n    <Tabs.Trigger\n      ref={ref}\n      {...rest}\n      className={mergedClassName}\n      gap={isCanvas ? '4' : showTrailing ? '12' : undefined}\n      onKeyDown={handleTriggerKeyDown}\n      paddingInlineEnd={isCanvas ? (showTrailing ? '8' : undefined) : showTrailing ? '12' : undefined}\n      paddingInlineStart={isCanvas && Icon ? '8' : undefined}\n    >\n      {isCanvas ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {Icon && <Icon size=\"16\" />}\n            {children}\n          </Box>\n          {trailing}\n        </>\n      ) : variant === 'line' ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {Icon && <Icon size=\"24\" />}\n            {children}\n            {badge}\n          </Box>\n          {trailing}\n        </>\n      ) : (\n        <>\n          <Box display=\"flex\" gap=\"16\">\n            {children}\n            {Icon && <Icon size=\"24\" />}\n          </Box>\n          {!!secondaryText && (\n            <Text as=\"span\" textStyle=\"body/md/regular\" color={rest.disabled ? 'text/on-disabled' : 'text/secondary'}>\n              {secondaryText}\n            </Text>\n          )}\n          {trailing}\n        </>\n      )}\n    </Tabs.Trigger>\n  );\n});\n\nTrigger.displayName = 'BitkitTabs.Trigger';\n\ntype TabItem = ReactElement<TriggerProps>;\n\n// Flattens children to a list of elements, unwrapping fragments so a Trigger grouped inside a\n// fragment (e.g. conditional rendering) isn't silently dropped.\nconst flattenChildren = (nodes: ReactNode): ReactElement[] =>\n  Children.toArray(nodes).flatMap((child) => {\n    if (!isValidElement(child)) return [];\n    if (child.type === Fragment) return flattenChildren((child.props as { children?: ReactNode }).children);\n    return [child];\n  });\n\n// Returns the set of visible tab indices for the overflow, always keeping the selected tab\n// visible: if it would overflow, it takes the last visible slot.\nconst getVisibleIndices = (total: number, count: number, selectedIndex: number) => {\n  const visible = new Set<number>();\n  for (let i = 0; i < count; i += 1) visible.add(i);\n  if (selectedIndex >= 0 && selectedIndex < total && !visible.has(selectedIndex)) {\n    visible.delete(count - 1);\n    visible.add(selectedIndex);\n  }\n  return visible;\n};\n\nexport type BitkitTabsAddButtonProps = Omit<\n  Extract<BitkitControlButtonProps, { href?: undefined }>,\n  'icon' | 'label' | 'size'\n> & {\n  /** Accessible label / tooltip for the add button. */\n  label?: string;\n};\n\n// \"+\" button to add a tab. Place it as a child of `List`; it always renders at the end of the row\n// (after the overflow menu). A compact `xxs` control button (16px icon, 4px padding) per the design.\nconst AddButton = forwardRef<HTMLButtonElement, BitkitTabsAddButtonProps>((props, ref) => {\n  const { label = 'Add tab', ...rest } = props;\n  return <BitkitControlButton ref={ref} icon={IconPlus} label={label} size=\"xxs\" {...rest} />;\n});\n\nAddButton.displayName = 'BitkitTabs.AddButton';\n\n// Overflow-aware List (all variants): measures the tabs and collapses the overflowing ones into a\n// \"N more…\" menu. The more-button look comes from the variant's `moreTrigger` recipe slot.\nconst List = forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) => {\n  // Semantic/labelling attributes belong on the actual tablist, not the visual wrapper.\n  const { children, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest } = props;\n  const { variant = 'line' } = useRootPropsContext();\n  const api = useTabsContext();\n  const styles = useTabsStyles();\n\n  // Split children: tab triggers participate in overflow; the optional add button always renders last.\n  const allChildren = flattenChildren(children);\n  const addButton = allChildren.find((child) => child.type === AddButton) ?? null;\n  // Only Trigger elements are measured/overflowed; anything else (fragments, stray nodes) is ignored.\n  const items = allChildren.filter((child) => child.type === Trigger) as TabItem[];\n  // Re-measure whenever the tab set OR any width-affecting input changes — the variant, each tab's\n  // value/label, icon/status/close/disabled state, and badge/secondaryText content (best-effort\n  // string form, so width-changing text like \"3 errors\" → \"12 errors\" invalidates the cache).\n  const measureKey =\n    variant +\n    items\n      .map((item) => {\n        const p = item.props;\n        return [\n          p.value,\n          String(p.children),\n          p.icon ? 'i' : '',\n          p.badge ? String(p.badge) : '',\n          p.secondaryText ? String(p.secondaryText) : '',\n          p.statusColor ?? '',\n          p.onClose ? 'c' : '',\n          p.disabled ? 'd' : '',\n        ].join(':');\n      })\n      .join('|');\n  const selectedIndex = items.findIndex((item) => item.props.value === api.value);\n  // Conservative width reservations: the more button (wider for the lg/semibold variants) and the\n  // always-visible add button.\n  const moreReserve = variant === 'canvas' ? 100 : 140;\n  const addReserve = addButton ? 48 : 0;\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const widthsRef = useRef<number[]>([]);\n  // Horizontal padding of the list, cached during the measure pass so the resize hot path doesn't\n  // call getComputedStyle on every tick.\n  const paddingRef = useRef(0);\n  // `measuredKey` is state (not a ref) so finishing the measure pass always re-renders and flips\n  // `measuring` off — even when recompute keeps the same visibleCount (which would skip a re-render).\n  const [measuredKey, setMeasuredKey] = useState<string | null>(null);\n  const [visibleCount, setVisibleCount] = useState(items.length);\n\n  const setListRef = useMemo(() => mergeRefs(listRef, ref), [ref]);\n\n  const recompute = useCallback(() => {\n    const el = listRef.current;\n    const widths = widthsRef.current;\n    if (!el || !widths.length) return;\n    const available = el.clientWidth - paddingRef.current - addReserve;\n    const totalWidth = widths.reduce((sum, w) => sum + w, 0);\n    if (totalWidth <= available) {\n      setVisibleCount(widths.length);\n      return;\n    }\n    let used = moreReserve;\n    let count = 0;\n    for (let i = 0; i < widths.length; i += 1) {\n      if (used + widths[i] > available) break;\n      used += widths[i];\n      count += 1;\n    }\n    setVisibleCount(Math.max(count, 1));\n  }, [addReserve, moreReserve]);\n\n  // Measure once per width-affecting change (all tabs are rendered visible during this pass).\n  // Isomorphic layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n  const measuring = measuredKey !== measureKey;\n  useSafeLayoutEffect(() => {\n    const el = listRef.current;\n    if (!el) return;\n    if (measuredKey !== measureKey) {\n      const tabEls = el.querySelectorAll<HTMLElement>('[data-tab-trigger]');\n      widthsRef.current = Array.from(tabEls, (node) => node.offsetWidth);\n      const cs = getComputedStyle(el);\n      paddingRef.current = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\n      setMeasuredKey(measureKey);\n    }\n    recompute();\n  }, [measureKey, measuredKey, recompute]);\n\n  useEffect(() => {\n    const el = listRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Coalesce resize bursts into one recompute per frame to avoid a read/write layout storm.\n    let raf = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(raf);\n      raf = requestAnimationFrame(recompute);\n    });\n    observer.observe(el);\n    return () => {\n      cancelAnimationFrame(raf);\n      observer.disconnect();\n    };\n  }, [recompute]);\n\n  const showAll = measuring || visibleCount >= items.length;\n  const visible = showAll ? null : getVisibleIndices(items.length, visibleCount, selectedIndex);\n  const hiddenItems = visible ? items.filter((_, i) => !visible.has(i)) : [];\n\n  return (\n    // The visual row carries the list styling (background, baseline border, leading padding) and is\n    // measured for overflow. The tablist itself only wraps the tabs (`display: contents` keeps the\n    // flex layout intact), so the more/add controls stay outside `role=\"tablist\"` per the ARIA spec.\n    <Box ref={setListRef} css={styles.list} {...rest}>\n      <Tabs.List display=\"contents\" id={id} aria-label={ariaLabel} aria-labelledby={ariaLabelledby}>\n        {items.map((item, i) =>\n          cloneElement(item, {\n            key: item.props.value,\n            'data-tab-trigger': '',\n            hidden: visible ? !visible.has(i) : undefined,\n          } as Partial<TriggerProps>),\n        )}\n      </Tabs.List>\n      {hiddenItems.length > 0 && (\n        <Menu.Root size=\"md\" positioning={{ gutter: 0, shift: -4 }}>\n          <Menu.Trigger asChild>\n            <chakra.button type=\"button\" css={styles.moreTrigger}>\n              {hiddenItems.length} more…\n            </chakra.button>\n          </Menu.Trigger>\n          <Portal>\n            <Menu.Positioner>\n              <Menu.Content>\n                {hiddenItems.map((item) => (\n                  <Menu.Item\n                    key={item.props.value}\n                    value={item.props.value}\n                    disabled={item.props.disabled}\n                    onSelect={() => api.setValue(item.props.value)}\n                    alignItems=\"center\"\n                  >\n                    <Text flex=\"1\" color={item.props.disabled ? 'text/on-disabled' : 'inherit'}>\n                      {item.props.children}\n                    </Text>\n                    {variant === 'canvas' && item.props.statusColor && (\n                      <chakra.span\n                        boxSize=\"8\"\n                        borderRadius=\"full\"\n                        flexShrink={0}\n                        backgroundColor={STATUS_COLOR_TOKEN[item.props.statusColor]}\n                      />\n                    )}\n                  </Menu.Item>\n                ))}\n              </Menu.Content>\n            </Menu.Positioner>\n          </Portal>\n        </Menu.Root>\n      )}\n      {addButton && (\n        <Box display=\"flex\" alignItems=\"center\" flexShrink={0} paddingInline=\"8\">\n          {addButton}\n        </Box>\n      )}\n    </Box>\n  );\n});\n\nList.displayName = 'BitkitTabs.List';\n\nconst BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger' | 'List'> & {\n  AddButton: typeof AddButton;\n  List: typeof List;\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n} = {\n  ...Tabs,\n  AddButton,\n  List,\n  Root,\n  Trigger,\n};\n\nBitkitTabs.Content.displayName = 'BitkitTabs.Content';\nBitkitTabs.ContentGroup.displayName = 'BitkitTabs.ContentGroup';\nBitkitTabs.Root.displayName = 'BitkitTabs.Root';\n\nexport default BitkitTabs;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/Tabs.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
+declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup" | "moreTrigger", {
     variant: {
         line: {
             list: {
@@ -10,7 +10,6 @@ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"c
                 display: "flex";
                 alignItems: "center";
                 gap: "8";
-                color: "text/secondary";
                 paddingBlockStart: "12";
                 paddingBlockEnd: string;
                 borderBlockEnd: "2px solid transparent";
@@ -25,13 +24,28 @@ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"c
                     color: "text/disabled";
                 };
             };
+            moreTrigger: {
+                bottom: "-1px";
+                textStyle: "body/lg/semibold";
+                paddingInline: "16";
+                paddingBlockStart: "12";
+                paddingBlockEnd: string;
+                borderBlockEnd: "2px solid transparent";
+                _hover: {
+                    backgroundColor: "background/hover";
+                    color: "text/primary";
+                };
+                _open: {
+                    backgroundColor: "background/active";
+                    color: "text/primary";
+                };
+            };
         };
         contained: {
             trigger: {
                 paddingBlockStart: string;
                 paddingBlockEnd: "12";
                 backgroundColor: "background/tertiary";
-                color: "text/secondary";
                 borderBlockStart: "2px solid transparent";
                 _hover: {
                     backgroundColor: "background/active";
@@ -48,6 +62,96 @@ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"c
                     };
                 };
             };
+            moreTrigger: {
+                textStyle: "body/lg/semibold";
+                paddingInline: "16";
+                paddingBlockStart: string;
+                paddingBlockEnd: "12";
+                backgroundColor: "background/tertiary";
+                borderBlockStart: "2px solid transparent";
+                _hover: {
+                    backgroundColor: "background/active";
+                    color: "text/primary";
+                };
+                _open: {
+                    backgroundColor: "background/active";
+                    color: "text/primary";
+                };
+            };
+        };
+        canvas: {
+            list: {
+                paddingInlineStart: "12";
+                borderBlockEnd: "1px solid";
+                borderColor: "border/regular";
+            };
+            trigger: {
+                height: "40";
+                display: "flex";
+                alignItems: "center";
+                gap: "8";
+                textStyle: "body/md/regular";
+                backgroundColor: "background/secondary";
+                paddingInline: "12";
+                paddingBlock: "8";
+                borderBlockEnd: "1px solid";
+                bottom: "-1px";
+                borderInlineEnd: "1px solid";
+                borderColor: "border/regular";
+                _hover: {
+                    backgroundColor: "background/primary";
+                    color: "text/primary";
+                };
+                _selected: {
+                    zIndex: number;
+                    backgroundColor: "background/primary";
+                    color: "text/primary";
+                    borderColor: "border/regular";
+                    borderBlockEndColor: "border/minimal";
+                    _after: {
+                        content: "\"\"";
+                        position: "absolute";
+                        insetBlockStart: number;
+                        insetInline: number;
+                        height: "2";
+                        backgroundColor: "border/selected";
+                    };
+                    _hover: {
+                        backgroundColor: "background/primary";
+                        borderColor: "border/regular";
+                        borderBlockEndColor: "border/minimal";
+                    };
+                };
+                _disabled: {
+                    backgroundColor: "color/neutral/moderate";
+                    color: "text/on-disabled";
+                    _hover: {
+                        backgroundColor: "color/neutral/moderate";
+                        color: "text/on-disabled";
+                    };
+                };
+            };
+            moreTrigger: {
+                height: "40";
+                textStyle: "body/md/regular";
+                paddingInline: "12";
+                bottom: "-1px";
+                borderBlockEnd: "1px solid";
+                borderInlineEnd: "1px solid";
+                borderColor: "border/regular";
+                _hover: {
+                    backgroundColor: "background/primary";
+                    color: "text/primary";
+                };
+                _open: {
+                    backgroundColor: "background/active";
+                    color: "text/primary";
+                };
+                _focusVisible: {
+                    outline: "none";
+                    boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)";
+                };
+            };
         };
     };
 }>;

package/dist/theme/slot-recipes/Tabs.recipe.js

@@ -3,17 +3,19 @@ import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 import { tabsAnatomy } from "@chakra-ui/react/anatomy";
 //#region lib/theme/slot-recipes/Tabs.recipe.ts
 var tabsSlotRecipe = defineSlotRecipe({
-	slots: tabsAnatomy.keys(),
+	slots: [...tabsAnatomy.keys(), "moreTrigger"],
 	className: "chakra-tabs",
 	base: {
 		list: { display: "flex" },
 		trigger: {
 			"--focus-ring-width": rem(2),
+			color: "text/secondary",
 			cursor: "pointer",
 			textStyle: "body/lg/semibold",
 			paddingInline: "16",
 			position: "relative",
 			textAlign: "left",
+			whiteSpace: "nowrap",
 			zIndex: 0,
 			_disabled: { cursor: "not-allowed" },
 			_selected: {
@@ -24,7 +26,17 @@ var tabsSlotRecipe = defineSlotRecipe({
 			}
 		},
 		content: { outline: "none" },
-		contentGroup: { backgroundColor: "background/primary" }
+		contentGroup: { backgroundColor: "background/primary" },
+		moreTrigger: {
+			"--focus-ring-width": rem(2),
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			flexShrink: 0,
+			whiteSpace: "nowrap",
+			cursor: "pointer",
+			color: "text/secondary"
+		}
 	},
 	variants: { variant: {
 		line: {
@@ -37,7 +49,6 @@ var tabsSlotRecipe = defineSlotRecipe({
 				display: "flex",
 				alignItems: "center",
 				gap: "8",
-				color: "text/secondary",
 				paddingBlockStart: "12",
 				paddingBlockEnd: rem(9),
 				borderBlockEnd: "2px solid transparent",
@@ -47,25 +58,132 @@ var tabsSlotRecipe = defineSlotRecipe({
 					color: "text/primary"
 				},
 				_disabled: { color: "text/disabled" }
+			},
+			moreTrigger: {
+				bottom: "-1px",
+				textStyle: "body/lg/semibold",
+				paddingInline: "16",
+				paddingBlockStart: "12",
+				paddingBlockEnd: rem(9),
+				borderBlockEnd: "2px solid transparent",
+				_hover: {
+					backgroundColor: "background/hover",
+					color: "text/primary"
+				},
+				_open: {
+					backgroundColor: "background/active",
+					color: "text/primary"
+				}
 			}
 		},
-		contained: { trigger: {
-			paddingBlockStart: rem(10),
-			paddingBlockEnd: "12",
-			backgroundColor: "background/tertiary",
-			color: "text/secondary",
-			borderBlockStart: "2px solid transparent",
-			_hover: { backgroundColor: "background/active" },
-			_disabled: {
-				backgroundColor: "color/neutral/moderate",
-				color: "text/on-disabled"
+		contained: {
+			trigger: {
+				paddingBlockStart: rem(10),
+				paddingBlockEnd: "12",
+				backgroundColor: "background/tertiary",
+				borderBlockStart: "2px solid transparent",
+				_hover: { backgroundColor: "background/active" },
+				_disabled: {
+					backgroundColor: "color/neutral/moderate",
+					color: "text/on-disabled"
+				},
+				_selected: {
+					backgroundColor: "background/primary",
+					color: "text/selected",
+					_hover: { backgroundColor: "background/primary" }
+				}
 			},
-			_selected: {
-				backgroundColor: "background/primary",
-				color: "text/selected",
-				_hover: { backgroundColor: "background/primary" }
+			moreTrigger: {
+				textStyle: "body/lg/semibold",
+				paddingInline: "16",
+				paddingBlockStart: rem(10),
+				paddingBlockEnd: "12",
+				backgroundColor: "background/tertiary",
+				borderBlockStart: "2px solid transparent",
+				_hover: {
+					backgroundColor: "background/active",
+					color: "text/primary"
+				},
+				_open: {
+					backgroundColor: "background/active",
+					color: "text/primary"
+				}
+			}
+		},
+		canvas: {
+			list: {
+				paddingInlineStart: "12",
+				borderBlockEnd: "1px solid",
+				borderColor: "border/regular"
+			},
+			trigger: {
+				height: "40",
+				display: "flex",
+				alignItems: "center",
+				gap: "8",
+				textStyle: "body/md/regular",
+				backgroundColor: "background/secondary",
+				paddingInline: "12",
+				paddingBlock: "8",
+				borderBlockEnd: "1px solid",
+				bottom: "-1px",
+				borderInlineEnd: "1px solid",
+				borderColor: "border/regular",
+				_hover: {
+					backgroundColor: "background/primary",
+					color: "text/primary"
+				},
+				_selected: {
+					zIndex: 1,
+					backgroundColor: "background/primary",
+					color: "text/primary",
+					borderColor: "border/regular",
+					borderBlockEndColor: "border/minimal",
+					_after: {
+						content: "\"\"",
+						position: "absolute",
+						insetBlockStart: 0,
+						insetInline: 0,
+						height: "2",
+						backgroundColor: "border/selected"
+					},
+					_hover: {
+						backgroundColor: "background/primary",
+						borderColor: "border/regular",
+						borderBlockEndColor: "border/minimal"
+					}
+				},
+				_disabled: {
+					backgroundColor: "color/neutral/moderate",
+					color: "text/on-disabled",
+					_hover: {
+						backgroundColor: "color/neutral/moderate",
+						color: "text/on-disabled"
+					}
+				}
+			},
+			moreTrigger: {
+				height: "40",
+				textStyle: "body/md/regular",
+				paddingInline: "12",
+				bottom: "-1px",
+				borderBlockEnd: "1px solid",
+				borderInlineEnd: "1px solid",
+				borderColor: "border/regular",
+				_hover: {
+					backgroundColor: "background/primary",
+					color: "text/primary"
+				},
+				_open: {
+					backgroundColor: "background/active",
+					color: "text/primary"
+				},
+				_focusVisible: {
+					outline: "none",
+					boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)"
+				}
 			}
-		} }
+		}
 	} },
 	defaultVariants: { variant: "line" }
 });

package/dist/theme/slot-recipes/Tabs.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tabs.recipe.ts"],"sourcesContent":["import { tabsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tabsSlotRecipe = defineSlotRecipe({\n  slots: tabsAnatomy.keys(),\n  className: 'chakra-tabs',\n  base: {\n    list: {\n      display: 'flex',\n    },\n    trigger: {\n      '--focus-ring-width': rem(2),\n      cursor: 'pointer',\n      textStyle: 'body/lg/semibold',\n      paddingInline: '16',\n      position: 'relative',\n      textAlign: 'left',\n      zIndex: 0,\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n      _selected: {\n        zIndex: 1,\n        borderColor: 'border/selected',\n        _hover: {\n          borderColor: 'border/selected',\n        },\n        '& > svg': {\n          color: 'icon/interactive',\n        },\n      },\n    },\n    content: {\n      outline: 'none',\n    },\n    contentGroup: {\n      backgroundColor: 'background/primary',\n    },\n  },\n\n  variants: {\n    variant: {\n      line: {\n        list: {\n          borderBlockEnd: '1px solid',\n          borderColor: 'border/regular',\n        },\n        trigger: {\n          bottom: '-1px',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '8',\n          color: 'text/secondary',\n          paddingBlockStart: '12',\n          paddingBlockEnd: rem(9),\n          borderBlockEnd: '2px solid transparent',\n          _selected: {\n            color: 'text/primary',\n          },\n          _hover: {\n            borderColor: 'border/hover',\n            color: 'text/primary',\n          },\n          _disabled: {\n            color: 'text/disabled',\n          },\n        },\n      },\n      contained: {\n        trigger: {\n          paddingBlockStart: rem(10),\n          paddingBlockEnd: '12',\n          backgroundColor: 'background/tertiary',\n          color: 'text/secondary',\n          borderBlockStart: '2px solid transparent',\n          _hover: {\n            backgroundColor: 'background/active',\n          },\n          _disabled: {\n            backgroundColor: 'color/neutral/moderate',\n            color: 'text/on-disabled',\n          },\n          _selected: {\n            backgroundColor: 'background/primary',\n            color: 'text/selected',\n            _hover: {\n              backgroundColor: 'background/primary',\n            },\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nexport default tabsSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,iBAAiB,iBAAiB;CACtC,OAAO,YAAY,KAAK;CACxB,WAAW;CACX,MAAM;EACJ,MAAM,EACJ,SAAS,OACX;EACA,SAAS;GACP,sBAAsB,IAAI,CAAC;GAC3B,QAAQ;GACR,WAAW;GACX,eAAe;GACf,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW,EACT,QAAQ,cACV;GACA,WAAW;IACT,QAAQ;IACR,aAAa;IACb,QAAQ,EACN,aAAa,kBACf;IACA,WAAW,EACT,OAAO,mBACT;GACF;EACF;EACA,SAAS,EACP,SAAS,OACX;EACA,cAAc,EACZ,iBAAiB,qBACnB;CACF;CAEA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;IACJ,gBAAgB;IAChB,aAAa;GACf;GACA,SAAS;IACP,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,KAAK;IACL,OAAO;IACP,mBAAmB;IACnB,iBAAiB,IAAI,CAAC;IACtB,gBAAgB;IAChB,WAAW,EACT,OAAO,eACT;IACA,QAAQ;KACN,aAAa;KACb,OAAO;IACT;IACA,WAAW,EACT,OAAO,gBACT;GACF;EACF;EACA,WAAW,EACT,SAAS;GACP,mBAAmB,IAAI,EAAE;GACzB,iBAAiB;GACjB,iBAAiB;GACjB,OAAO;GACP,kBAAkB;GAClB,QAAQ,EACN,iBAAiB,oBACnB;GACA,WAAW;IACT,iBAAiB;IACjB,OAAO;GACT;GACA,WAAW;IACT,iBAAiB;IACjB,OAAO;IACP,QAAQ,EACN,iBAAiB,qBACnB;GACF;EACF,EACF;CACF,EACF;CAEA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
+{"version":3,"file":"Tabs.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tabs.recipe.ts"],"sourcesContent":["import { tabsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tabsSlotRecipe = defineSlotRecipe({\n  // `moreTrigger` is a custom slot (not in the Chakra anatomy) for the overflow \"N more…\" button.\n  slots: [...tabsAnatomy.keys(), 'moreTrigger'],\n  className: 'chakra-tabs',\n  base: {\n    list: {\n      display: 'flex',\n    },\n    trigger: {\n      '--focus-ring-width': rem(2),\n      color: 'text/secondary',\n      cursor: 'pointer',\n      textStyle: 'body/lg/semibold',\n      paddingInline: '16',\n      position: 'relative',\n      textAlign: 'left',\n      whiteSpace: 'nowrap',\n      zIndex: 0,\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n      _selected: {\n        zIndex: 1,\n        borderColor: 'border/selected',\n        _hover: {\n          borderColor: 'border/selected',\n        },\n        '& > svg': {\n          color: 'icon/interactive',\n        },\n      },\n    },\n    content: {\n      outline: 'none',\n    },\n    contentGroup: {\n      backgroundColor: 'background/primary',\n    },\n    // Overflow \"N more…\" button — variant-specific look is layered on per variant below.\n    moreTrigger: {\n      '--focus-ring-width': rem(2),\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      whiteSpace: 'nowrap',\n      cursor: 'pointer',\n      color: 'text/secondary',\n    },\n  },\n\n  variants: {\n    variant: {\n      line: {\n        list: {\n          borderBlockEnd: '1px solid',\n          borderColor: 'border/regular',\n        },\n        trigger: {\n          bottom: '-1px',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '8',\n          paddingBlockStart: '12',\n          paddingBlockEnd: rem(9),\n          borderBlockEnd: '2px solid transparent',\n          _selected: {\n            color: 'text/primary',\n          },\n          _hover: {\n            borderColor: 'border/hover',\n            color: 'text/primary',\n          },\n          _disabled: {\n            color: 'text/disabled',\n          },\n        },\n        moreTrigger: {\n          bottom: '-1px',\n          textStyle: 'body/lg/semibold',\n          paddingInline: '16',\n          paddingBlockStart: '12',\n          paddingBlockEnd: rem(9),\n          borderBlockEnd: '2px solid transparent',\n          _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n          _open: { backgroundColor: 'background/active', color: 'text/primary' },\n        },\n      },\n      contained: {\n        trigger: {\n          paddingBlockStart: rem(10),\n          paddingBlockEnd: '12',\n          backgroundColor: 'background/tertiary',\n          borderBlockStart: '2px solid transparent',\n          _hover: {\n            backgroundColor: 'background/active',\n          },\n          _disabled: {\n            backgroundColor: 'color/neutral/moderate',\n            color: 'text/on-disabled',\n          },\n          _selected: {\n            backgroundColor: 'background/primary',\n            color: 'text/selected',\n            _hover: {\n              backgroundColor: 'background/primary',\n            },\n          },\n        },\n        moreTrigger: {\n          textStyle: 'body/lg/semibold',\n          paddingInline: '16',\n          paddingBlockStart: rem(10),\n          paddingBlockEnd: '12',\n          backgroundColor: 'background/tertiary',\n          borderBlockStart: '2px solid transparent',\n          _hover: { backgroundColor: 'background/active', color: 'text/primary' },\n          _open: { backgroundColor: 'background/active', color: 'text/primary' },\n        },\n      },\n      // IDE-style canvas tabs: fixed-height, edge-to-edge segments separated by vertical\n      // dividers, with the selection marker on top. Closable + status-dot live only here.\n      canvas: {\n        list: {\n          // Small leading gap before the first tab.\n          paddingInlineStart: '12',\n          borderBlockEnd: '1px solid',\n          borderColor: 'border/regular',\n        },\n        trigger: {\n          height: '40',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '8',\n          textStyle: 'body/md/regular',\n          backgroundColor: 'background/secondary',\n          paddingInline: '12',\n          paddingBlock: '8',\n          // Bottom divider; shifted down 1px so it sits exactly on the list's bottom border (no\n          // double line). The selected tab paints this white to merge with the content panel below.\n          borderBlockEnd: '1px solid',\n          bottom: '-1px',\n          // Vertical divider between segments.\n          borderInlineEnd: '1px solid',\n          borderColor: 'border/regular',\n          // The leading icon inherits the trigger's text color (secondary → primary by state); no\n          // explicit svg rule, so the close-button icon keeps its own color.\n          _hover: {\n            backgroundColor: 'background/primary',\n            color: 'text/primary',\n          },\n          _selected: {\n            zIndex: 1,\n            backgroundColor: 'background/primary',\n            color: 'text/primary',\n            // Keep neutral side dividers; the selected tab keeps a subtle bottom border because the\n            // panel below it is secondary grey (not white), so it shouldn't fully merge.\n            borderColor: 'border/regular',\n            borderBlockEndColor: 'border/minimal',\n            // Selection marker: an overlay bar on top of the selected tab only — non-selected\n            // tabs have no top border, and it adds no layout height so nothing shifts.\n            _after: {\n              content: '\"\"',\n              position: 'absolute',\n              insetBlockStart: 0,\n              insetInline: 0,\n              height: '2',\n              backgroundColor: 'border/selected',\n            },\n            _hover: {\n              backgroundColor: 'background/primary',\n              borderColor: 'border/regular',\n              borderBlockEndColor: 'border/minimal',\n            },\n          },\n          _disabled: {\n            backgroundColor: 'color/neutral/moderate',\n            color: 'text/on-disabled',\n            _hover: {\n              backgroundColor: 'color/neutral/moderate',\n              color: 'text/on-disabled',\n            },\n          },\n        },\n        moreTrigger: {\n          height: '40',\n          textStyle: 'body/md/regular',\n          paddingInline: '12',\n          bottom: '-1px',\n          borderBlockEnd: '1px solid',\n          borderInlineEnd: '1px solid',\n          borderColor: 'border/regular',\n          _hover: { backgroundColor: 'background/primary', color: 'text/primary' },\n          _open: { backgroundColor: 'background/active', color: 'text/primary' },\n          _focusVisible: { outline: 'none', boxShadow: 'inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)' },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nexport default tabsSlotRecipe;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/index.d.ts

@@ -2090,7 +2090,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
+    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup" | "moreTrigger", {
         variant: {
             line: {
                 list: {
@@ -2102,7 +2102,6 @@ declare const slotRecipes: {
                     display: "flex";
                     alignItems: "center";
                     gap: "8";
-                    color: "text/secondary";
                     paddingBlockStart: "12";
                     paddingBlockEnd: string;
                     borderBlockEnd: "2px solid transparent";
@@ -2117,13 +2116,28 @@ declare const slotRecipes: {
                         color: "text/disabled";
                     };
                 };
+                moreTrigger: {
+                    bottom: "-1px";
+                    textStyle: "body/lg/semibold";
+                    paddingInline: "16";
+                    paddingBlockStart: "12";
+                    paddingBlockEnd: string;
+                    borderBlockEnd: "2px solid transparent";
+                    _hover: {
+                        backgroundColor: "background/hover";
+                        color: "text/primary";
+                    };
+                    _open: {
+                        backgroundColor: "background/active";
+                        color: "text/primary";
+                    };
+                };
             };
             contained: {
                 trigger: {
                     paddingBlockStart: string;
                     paddingBlockEnd: "12";
                     backgroundColor: "background/tertiary";
-                    color: "text/secondary";
                     borderBlockStart: "2px solid transparent";
                     _hover: {
                         backgroundColor: "background/active";
@@ -2140,6 +2154,96 @@ declare const slotRecipes: {
                         };
                     };
                 };
+                moreTrigger: {
+                    textStyle: "body/lg/semibold";
+                    paddingInline: "16";
+                    paddingBlockStart: string;
+                    paddingBlockEnd: "12";
+                    backgroundColor: "background/tertiary";
+                    borderBlockStart: "2px solid transparent";
+                    _hover: {
+                        backgroundColor: "background/active";
+                        color: "text/primary";
+                    };
+                    _open: {
+                        backgroundColor: "background/active";
+                        color: "text/primary";
+                    };
+                };
+            };
+            canvas: {
+                list: {
+                    paddingInlineStart: "12";
+                    borderBlockEnd: "1px solid";
+                    borderColor: "border/regular";
+                };
+                trigger: {
+                    height: "40";
+                    display: "flex";
+                    alignItems: "center";
+                    gap: "8";
+                    textStyle: "body/md/regular";
+                    backgroundColor: "background/secondary";
+                    paddingInline: "12";
+                    paddingBlock: "8";
+                    borderBlockEnd: "1px solid";
+                    bottom: "-1px";
+                    borderInlineEnd: "1px solid";
+                    borderColor: "border/regular";
+                    _hover: {
+                        backgroundColor: "background/primary";
+                        color: "text/primary";
+                    };
+                    _selected: {
+                        zIndex: number;
+                        backgroundColor: "background/primary";
+                        color: "text/primary";
+                        borderColor: "border/regular";
+                        borderBlockEndColor: "border/minimal";
+                        _after: {
+                            content: "\"\"";
+                            position: "absolute";
+                            insetBlockStart: number;
+                            insetInline: number;
+                            height: "2";
+                            backgroundColor: "border/selected";
+                        };
+                        _hover: {
+                            backgroundColor: "background/primary";
+                            borderColor: "border/regular";
+                            borderBlockEndColor: "border/minimal";
+                        };
+                    };
+                    _disabled: {
+                        backgroundColor: "color/neutral/moderate";
+                        color: "text/on-disabled";
+                        _hover: {
+                            backgroundColor: "color/neutral/moderate";
+                            color: "text/on-disabled";
+                        };
+                    };
+                };
+                moreTrigger: {
+                    height: "40";
+                    textStyle: "body/md/regular";
+                    paddingInline: "12";
+                    bottom: "-1px";
+                    borderBlockEnd: "1px solid";
+                    borderInlineEnd: "1px solid";
+                    borderColor: "border/regular";
+                    _hover: {
+                        backgroundColor: "background/primary";
+                        color: "text/primary";
+                    };
+                    _open: {
+                        backgroundColor: "background/active";
+                        color: "text/primary";
+                    };
+                    _focusVisible: {
+                        outline: "none";
+                        boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)";
+                    };
+                };
             };
         };
     }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.260",
+  "version": "0.3.261",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",

package/dist/components/BitkitTabs/BitkitTabs.d.ts

@@ -1,20 +0,0 @@
-import { Tabs } from '@chakra-ui/react/tabs';
-import { ReactNode } from 'react';
-import { BitkitIconComponent } from '../../icons';
-export declare const RootPropsProvider: import('react').Provider<Tabs.RootProps>, useRootPropsContext: () => Tabs.RootProps;
-declare const Root: import('react').ForwardRefExoticComponent<Tabs.RootProps & import('react').RefAttributes<HTMLDivElement>>;
-declare const Trigger: import('react').ForwardRefExoticComponent<Tabs.TriggerProps & {
-    badge?: ReactNode;
-    /** Shows a "changed" indicator dot. When hovered (and `onClose` is set), the close button replaces it. */
-    changed?: boolean;
-    children?: string;
-    icon?: BitkitIconComponent;
-    /** When provided, a close button reveals on hover and calls this handler when clicked. */
-    onClose?: () => void;
-    secondaryText?: ReactNode;
-} & import('react').RefAttributes<HTMLButtonElement>>;
-declare const BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger'> & {
-    Root: typeof Root;
-    Trigger: typeof Trigger;
-};
-export default BitkitTabs;