@bitrise/bitkit-v2 0.3.348 → 0.3.350

package/AGENTS.md

@@ -165,7 +165,7 @@ Bitkit components use consistent prop names across the library:
   This holds for form fields (`BitkitTextInput`, `BitkitSelect`, `BitkitNativeSelect`, `BitkitCombobox`, etc.), buttons (`BitkitButton`, `BitkitIconButton`, etc.), and most other components — they all forward Chakra style props through to the rendered root element.
 
   **Exceptions** — a few component groups intentionally own their own layout and don't accept arbitrary style props from outside:
-  - Page-level overlays: `BitkitDialog`, `BitkitFormDialog`, `BitkitStepperDialog`, `BitkitDrawer`, `BitkitCalendar` — use the component's own sizing API (`size`, `maxHeight`, etc.).
+  - Page-level overlays: `BitkitDialog`, `BitkitFormDialog`, `BitkitStepperDialog`, `BitkitDrawer`, `BitkitCalendar`, `BitkitTour` — they own their layout; where it's configurable at all, it's through their own props (`size`, `maxHeight`, …), not style props from outside.
   - Floating positioned components: `BitkitTooltip`, `BitkitLabelTooltip`, `BitkitDefinitionTooltip`, `BitkitOverflowTooltip`, `BitkitToast`, `BitkitSelectMenu`, `BitkitMultiselectMenu` — their layout is positioned automatically; pass styling via the component's own props instead of a wrapper.
 
   > **For everything else, if a style prop doesn't take effect on a Bitkit component, that's a bug in the component, not a styling task.** Stop, tell the user something looks off in Bitkit so they can flag it to the Bitkit team — don't quietly add a `<Box>` workaround. Each silent workaround hides a regression and bakes the wrapper pattern into the codebase.

package/dist/components/BitkitCloseButton/BitkitCloseButton.js

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region lib/components/BitkitCloseButton/BitkitCloseButton.tsx
 var BitkitCloseButton = forwardRef((props, ref) => {
-	const { "aria-label": ariaLabel = "Close", size, colorVariant, ...rest } = props;
+	const { "aria-label": ariaLabel = "Close", size, colorVariant, css, ...rest } = props;
 	const style = useRecipe({ key: "closeButton" });
 	return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
 		disabled: rest.disabled,
@@ -14,10 +14,10 @@ var BitkitCloseButton = forwardRef((props, ref) => {
 			ref,
 			"aria-label": ariaLabel,
 			...rest,
-			css: style({
+			css: [style({
 				size,
 				colorVariant
-			}),
+			}), css],
 			color: colorVariant === "neutral" && !rest.disabled ? "icon/primary" : void 0,
 			children: /* @__PURE__ */ jsx(IconCross, { size: size === "xs" ? "16" : "24" })
 		})

package/dist/components/BitkitCloseButton/BitkitCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n  const { 'aria-label': ariaLabel = 'Close', size, colorVariant, ...rest } = props;\n\n  const style = useRecipe({ key: 'closeButton' });\n\n  return (\n    <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n      <chakra.button\n        ref={ref}\n        aria-label={ariaLabel}\n        {...rest}\n        css={style({ size, colorVariant })}\n        color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n      >\n        <IconCross size={size === 'xs' ? '16' : '24'} />\n      </chakra.button>\n    </BitkitLabelTooltip>\n  );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AASA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,GAAG,SAAS;CAE3E,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM;EACjD,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,MAAM;IAAE;IAAM;GAAa,CAAC;GACjC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n  const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, ...rest } = props;\n\n  const style = useRecipe({ key: 'closeButton' });\n\n  return (\n    <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n      <chakra.button\n        ref={ref}\n        aria-label={ariaLabel}\n        {...rest}\n        css={[style({ size, colorVariant }), css]}\n        color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n      >\n        <IconCross size={size === 'xs' ? '16' : '24'} />\n      </chakra.button>\n    </BitkitLabelTooltip>\n  );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AASA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,KAAK,GAAG,SAAS;CAEhF,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM;EACjD,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts

@@ -1,15 +1,18 @@
+import { BoxProps } from '@chakra-ui/react/box';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
+export type BitkitDatePickerControlProps = BoxProps;
 export interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {
-    defaultValue?: Date | Date[] | null;
+    controlProps?: BitkitDatePickerControlProps;
+    defaultValue?: Date | null;
     disablePortal?: boolean;
     max?: Date;
     min?: Date;
-    onValueChange?: (value: Date[] | null) => void;
+    onValueChange?: (value: Date | null) => void;
     placeholder?: string;
     showOutsideDays?: boolean;
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
-    value?: Date[] | null;
+    value?: Date | null;
 }
 declare const BitkitDatePicker: import('react').ForwardRefExoticComponent<BitkitDatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitDatePicker;

package/dist/components/BitkitDatePicker/BitkitDatePicker.js

@@ -13,17 +13,15 @@ import { forwardRef, useContext, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { useSafeLayoutEffect } from "@chakra-ui/react/hooks";
+import { useFieldContext } from "@chakra-ui/react/field";
 //#region lib/components/BitkitDatePicker/BitkitDatePicker.tsx
-var toDateArray = (value) => {
-	if (value == null) return;
-	return Array.isArray(value) ? value : [value];
-};
 /**
 * Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own
 * focus event — that covers tabbing in as well as clicking.
 */
 var DatePickerInput = ({ css }) => {
 	const { disabled, open, readOnly, setOpen } = useDatePickerContext();
+	const ariaDescribedby = useFieldContext()?.ariaDescribedby;
 	const reopenBlockedRef = useRef(false);
 	const wasOpenRef = useRef(false);
 	useSafeLayoutEffect(() => {
@@ -40,6 +38,7 @@ var DatePickerInput = ({ css }) => {
 		if (!reopenBlockedRef.current && !readOnly && !disabled) setOpen(true);
 	};
 	return /* @__PURE__ */ jsx(DatePicker.Input, {
+		"aria-describedby": ariaDescribedby,
 		css,
 		index: 0,
 		onFocus: handleFocus,
@@ -47,7 +46,7 @@ var DatePickerInput = ({ css }) => {
 	});
 };
 var BitkitDatePicker = forwardRef((props, ref) => {
-	const { defaultValue, disablePortal, max, min, onValueChange, placeholder, showOutsideDays, size = "lg", state, value, ...fieldProps } = props;
+	const { controlProps, defaultValue, disablePortal, max, min, onValueChange, placeholder, showOutsideDays, size = "lg", state, value, ...fieldProps } = props;
 	const styles = useSlotRecipe({ key: "textInput" })({ size });
 	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const minCalendarDate = useMemo(() => min ? dateToCalendarDate(min) : void 0, [min]);
@@ -78,7 +77,7 @@ var BitkitDatePicker = forwardRef((props, ref) => {
 		state,
 		...fieldProps,
 		children: /* @__PURE__ */ jsxs(DatePicker.Root, {
-			defaultValue: toDateArray(defaultValue)?.map(dateToCalendarDate),
+			defaultValue: defaultValue ? [dateToCalendarDate(defaultValue)] : void 0,
 			device: "desktop",
 			disabled: state === "disabled",
 			invalid: isInvalid,
@@ -86,18 +85,19 @@ var BitkitDatePicker = forwardRef((props, ref) => {
 			max: maxCalendarDate,
 			min: minCalendarDate,
 			numOfMonths: 1,
-			onValueChange: onValueChange ? (details) => onValueChange(details.value?.map(calendarDateToDate) ?? null) : void 0,
+			onValueChange: onValueChange ? (details) => onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null) : void 0,
 			placeholder: state === "readOnly" ? "(not set)" : placeholder,
 			positioning: { placement: "bottom-start" },
 			readOnly: state === "readOnly",
 			selectionMode: "single",
 			showOutsideDays: showOutsideDays ?? true,
 			startOfWeek: 1,
-			value: value === void 0 ? void 0 : value?.map(dateToCalendarDate) ?? [],
+			value: value === void 0 ? void 0 : value ? [dateToCalendarDate(value)] : [],
 			children: [/* @__PURE__ */ jsx(DatePicker.Control, {
 				asChild: true,
 				children: /* @__PURE__ */ jsxs(Box, {
-					css: styles.field,
+					...controlProps,
+					css: [styles.field, controlProps?.css],
 					...stateAttrs,
 					children: [
 						/* @__PURE__ */ jsx(DatePickerInput, { css: styles.input }),

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

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

package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js

@@ -9,7 +9,7 @@ import { Alert } from "@chakra-ui/react/alert";
 //#region lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx
 var PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;
 var BitkitPromoBanner = (props) => {
-	const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;
+	const { actionable, css, dismissible, illustration, message, onClose, title, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Alert.Root, {
 		...rest,
 		variant: "info",
@@ -31,7 +31,7 @@ var BitkitPromoBanner = (props) => {
 			base: actionable ? "20" : "16",
 			tablet: rem(11)
 		},
-		css: { "& .alert__title + *": { marginBlockStart: 0 } },
+		css: [{ "& .alert__title + *": { marginBlockStart: 0 } }, css],
 		children: [illustration ? /* @__PURE__ */ jsx(Box, {
 			flexShrink: 0,
 			marginInlineEnd: {

package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n  actionable?: PromoBannerAction;\n  dismissible?: boolean;\n  /** Custom leading illustration. Defaults to the built-in mascot. */\n  illustration?: ReactNode;\n  message: ReactNode;\n  onClose?: () => void;\n  title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n  const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n  return (\n    <Alert.Root\n      {...rest}\n      variant=\"info\"\n      border=\"none\"\n      position=\"relative\"\n      flexDirection={{ base: 'column', tablet: 'row' }}\n      alignItems={{ base: 'stretch', tablet: 'center' }}\n      rowGap={{ base: '16', tablet: '0' }}\n      paddingBlockEnd={{ base: actionable ? '20' : '16', tablet: rem(11) }}\n      css={{ '& .alert__title + *': { marginBlockStart: 0 } }}\n    >\n      {illustration ? (\n        <Box flexShrink={0} marginInlineEnd={{ base: '0', tablet: '12' }} aria-hidden>\n          {illustration}\n        </Box>\n      ) : (\n        <Icon\n          asChild\n          width={rem(72)}\n          height={rem(68)}\n          flexShrink={0}\n          marginInlineEnd={{ base: '0', tablet: '12' }}\n          marginBlock={{ base: '0', tablet: rem(-11) }}\n          marginInlineStart={{ base: '0', tablet: rem(-12) }}\n        >\n          <MascotSvg />\n        </Icon>\n      )}\n      <NotificationContent\n        action={actionable}\n        colorVariant={PROMO_BANNER_COLOR}\n        dismissible={dismissible}\n        messageText={message}\n        onClose={onClose}\n        stackable\n        titleText={title}\n      />\n    </Alert.Root>\n  );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEpF,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACJ,SAAQ;EACR,QAAO;EACP,UAAS;EACT,eAAe;GAAE,MAAM;GAAU,QAAQ;EAAM;EAC/C,YAAY;GAAE,MAAM;GAAW,QAAQ;EAAS;EAChD,QAAQ;GAAE,MAAM;GAAM,QAAQ;EAAI;EAClC,iBAAiB;GAAE,MAAM,aAAa,OAAO;GAAM,QAAQ,IAAI,EAAE;EAAE;EACnE,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE;EATxD,UAAA,CAWG,eACC,oBAAC,KAAD;GAAK,YAAY;GAAG,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAAG,eAAA;GAC/D,UAAA;EACE,CAAA,IAEL,oBAAC,MAAD;GACE,SAAA;GACA,OAAO,IAAI,EAAE;GACb,QAAQ,IAAI,EAAE;GACd,YAAY;GACZ,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC3C,aAAa;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAC3C,mBAAmB;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAEjD,UAAA,oBAAC,YAAD,CAAY,CAAA;EACR,CAAA,GAER,oBAAC,qBAAD;GACE,QAAQ;GACR,cAAc;GACD;GACb,aAAa;GACJ;GACT,WAAA;GACA,WAAW;EACZ,CAAA,CACS;;AAEhB;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n  actionable?: PromoBannerAction;\n  dismissible?: boolean;\n  /** Custom leading illustration. Defaults to the built-in mascot. */\n  illustration?: ReactNode;\n  message: ReactNode;\n  onClose?: () => void;\n  title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n  const { actionable, css, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n  return (\n    <Alert.Root\n      {...rest}\n      variant=\"info\"\n      border=\"none\"\n      position=\"relative\"\n      flexDirection={{ base: 'column', tablet: 'row' }}\n      alignItems={{ base: 'stretch', tablet: 'center' }}\n      rowGap={{ base: '16', tablet: '0' }}\n      paddingBlockEnd={{ base: actionable ? '20' : '16', tablet: rem(11) }}\n      css={[{ '& .alert__title + *': { marginBlockStart: 0 } }, css]}\n    >\n      {illustration ? (\n        <Box flexShrink={0} marginInlineEnd={{ base: '0', tablet: '12' }} aria-hidden>\n          {illustration}\n        </Box>\n      ) : (\n        <Icon\n          asChild\n          width={rem(72)}\n          height={rem(68)}\n          flexShrink={0}\n          marginInlineEnd={{ base: '0', tablet: '12' }}\n          marginBlock={{ base: '0', tablet: rem(-11) }}\n          marginInlineStart={{ base: '0', tablet: rem(-12) }}\n        >\n          <MascotSvg />\n        </Icon>\n      )}\n      <NotificationContent\n        action={actionable}\n        colorVariant={PROMO_BANNER_COLOR}\n        dismissible={dismissible}\n        messageText={message}\n        onClose={onClose}\n        stackable\n        titleText={title}\n      />\n    </Alert.Root>\n  );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,KAAK,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEzF,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACJ,SAAQ;EACR,QAAO;EACP,UAAS;EACT,eAAe;GAAE,MAAM;GAAU,QAAQ;EAAM;EAC/C,YAAY;GAAE,MAAM;GAAW,QAAQ;EAAS;EAChD,QAAQ;GAAE,MAAM;GAAM,QAAQ;EAAI;EAClC,iBAAiB;GAAE,MAAM,aAAa,OAAO;GAAM,QAAQ,IAAI,EAAE;EAAE;EACnE,KAAK,CAAC,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE,GAAG,GAAG;EAT/D,UAAA,CAWG,eACC,oBAAC,KAAD;GAAK,YAAY;GAAG,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAAG,eAAA;GAC/D,UAAA;EACE,CAAA,IAEL,oBAAC,MAAD;GACE,SAAA;GACA,OAAO,IAAI,EAAE;GACb,QAAQ,IAAI,EAAE;GACd,YAAY;GACZ,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC3C,aAAa;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAC3C,mBAAmB;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAEjD,UAAA,oBAAC,YAAD,CAAY,CAAA;EACR,CAAA,GAER,oBAAC,qBAAD;GACE,QAAQ;GACR,cAAc;GACD;GACb,aAAa;GACJ;GACT,WAAA;GACA,WAAW;EACZ,CAAA,CACS;;AAEhB;AAEA,kBAAkB,cAAc"}

package/dist/components/BitkitToast/BitkitToast.d.ts

@@ -27,7 +27,7 @@ export type BitkitToastProps = {
      */
     [dataAttribute: `data-${string}`]: string | undefined;
 };
-export declare const toaster: import('@zag-js/toast').Store<any>;
+export declare const toaster: import('@ark-ui/react').CreateToasterReturn<ReactNode>;
 declare const createBitkitToast: (props: BitkitToastProps) => string;
 /**
  * Closes the toast with the given id — the one `createBitkitToast` returns — or every

package/dist/components/BitkitToggleButton/BitkitToggleButton.js

@@ -6,7 +6,7 @@ import { Skeleton } from "@chakra-ui/react/skeleton";
 import { Toggle } from "@chakra-ui/react/toggle";
 //#region lib/components/BitkitToggleButton/BitkitToggleButton.tsx
 var BitkitToggleButton = forwardRef((props, ref) => {
-	const { icon: Icon, label, size = "md", state, isSelected, tooltipProps, defaultSelected, onSelectedChange, ...rest } = props;
+	const { icon: Icon, label, size = "md", state, isSelected, tooltipProps, defaultSelected, onSelectedChange, css, ...rest } = props;
 	const recipe = useRecipe({ key: "toggleButton" });
 	const iconSize = size === "lg" ? "24" : "16";
 	return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
@@ -26,7 +26,7 @@ var BitkitToggleButton = forwardRef((props, ref) => {
 					ref,
 					"aria-label": label,
 					...rest,
-					css: recipe({ size }),
+					css: [recipe({ size }), css],
 					children: /* @__PURE__ */ jsx(Icon, { size: iconSize })
 				})
 			})

package/dist/components/BitkitToggleButton/BitkitToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitToggleButton.js","names":[],"sources":["../../../lib/components/BitkitToggleButton/BitkitToggleButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Toggle } from '@chakra-ui/react/toggle';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitToggleButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n  icon: BitkitIconComponent;\n  label: string;\n  size?: 'sm' | 'md' | 'lg';\n  state?: 'disabled' | 'skeleton';\n  isSelected?: boolean;\n  tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n  defaultSelected?: boolean;\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nconst BitkitToggleButton = forwardRef<HTMLButtonElement, BitkitToggleButtonProps>((props, ref) => {\n  const {\n    icon: Icon,\n    label,\n    size = 'md',\n    state,\n    isSelected,\n    tooltipProps,\n    defaultSelected,\n    onSelectedChange,\n    ...rest\n  } = props;\n\n  const recipe = useRecipe({ key: 'toggleButton' });\n  const iconSize = size === 'lg' ? '24' : '16';\n\n  return (\n    <BitkitLabelTooltip text={label} {...tooltipProps}>\n      <Skeleton loading={state === 'skeleton'} borderRadius=\"4\" width=\"fit-content\">\n        <Toggle.Root\n          asChild\n          disabled={state === 'disabled'}\n          defaultPressed={defaultSelected}\n          onPressedChange={onSelectedChange}\n          pressed={isSelected}\n        >\n          <chakra.button ref={ref} aria-label={label} {...rest} css={recipe({ size })}>\n            <Icon size={iconSize} />\n          </chakra.button>\n        </Toggle.Root>\n      </Skeleton>\n    </BitkitLabelTooltip>\n  );\n});\n\nBitkitToggleButton.displayName = 'BitkitToggleButton';\n\nexport default BitkitToggleButton;\n"],"mappings":";;;;;;;AAmBA,IAAM,qBAAqB,YAAwD,OAAO,QAAQ;CAChG,MAAM,EACJ,MAAM,MACN,OACA,OAAO,MACP,OACA,YACA,cACA,iBACA,kBACA,GAAG,SACD;CAEJ,MAAM,SAAS,UAAU,EAAE,KAAK,eAAe,CAAC;CAChD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,UAAD;GAAU,SAAS,UAAU;GAAY,cAAa;GAAI,OAAM;GAC9D,UAAA,oBAAC,OAAO,MAAR;IACE,SAAA;IACA,UAAU,UAAU;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,SAAS;IAET,UAAA,oBAAC,OAAO,QAAR;KAAoB;KAAK,cAAY;KAAO,GAAI;KAAM,KAAK,OAAO,EAAE,KAAK,CAAC;KACxE,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACV,CAAA;GACJ,CAAA;EACL,CAAA;CACQ,CAAA;AAExB,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitToggleButton.js","names":[],"sources":["../../../lib/components/BitkitToggleButton/BitkitToggleButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Toggle } from '@chakra-ui/react/toggle';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitToggleButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n  icon: BitkitIconComponent;\n  label: string;\n  size?: 'sm' | 'md' | 'lg';\n  state?: 'disabled' | 'skeleton';\n  isSelected?: boolean;\n  tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n  defaultSelected?: boolean;\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nconst BitkitToggleButton = forwardRef<HTMLButtonElement, BitkitToggleButtonProps>((props, ref) => {\n  const {\n    icon: Icon,\n    label,\n    size = 'md',\n    state,\n    isSelected,\n    tooltipProps,\n    defaultSelected,\n    onSelectedChange,\n    css,\n    ...rest\n  } = props;\n\n  const recipe = useRecipe({ key: 'toggleButton' });\n  const iconSize = size === 'lg' ? '24' : '16';\n\n  return (\n    <BitkitLabelTooltip text={label} {...tooltipProps}>\n      <Skeleton loading={state === 'skeleton'} borderRadius=\"4\" width=\"fit-content\">\n        <Toggle.Root\n          asChild\n          disabled={state === 'disabled'}\n          defaultPressed={defaultSelected}\n          onPressedChange={onSelectedChange}\n          pressed={isSelected}\n        >\n          <chakra.button ref={ref} aria-label={label} {...rest} css={[recipe({ size }), css]}>\n            <Icon size={iconSize} />\n          </chakra.button>\n        </Toggle.Root>\n      </Skeleton>\n    </BitkitLabelTooltip>\n  );\n});\n\nBitkitToggleButton.displayName = 'BitkitToggleButton';\n\nexport default BitkitToggleButton;\n"],"mappings":";;;;;;;AAmBA,IAAM,qBAAqB,YAAwD,OAAO,QAAQ;CAChG,MAAM,EACJ,MAAM,MACN,OACA,OAAO,MACP,OACA,YACA,cACA,iBACA,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,SAAS,UAAU,EAAE,KAAK,eAAe,CAAC;CAChD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,UAAD;GAAU,SAAS,UAAU;GAAY,cAAa;GAAI,OAAM;GAC9D,UAAA,oBAAC,OAAO,MAAR;IACE,SAAA;IACA,UAAU,UAAU;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,SAAS;IAET,UAAA,oBAAC,OAAO,QAAR;KAAoB;KAAK,cAAY;KAAO,GAAI;KAAM,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,GAAG;KAC/E,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACV,CAAA;GACJ,CAAA;EACL,CAAA;CACQ,CAAA;AAExB,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/BitkitTour/BitkitTour.d.ts

@@ -0,0 +1,83 @@
+import { TourStepDetails, UseTourProps, UseTourReturn } from '@ark-ui/react/tour';
+import { ReactNode } from 'react';
+type BitkitTourStepAction = NonNullable<TourStepDetails['actions']>[number];
+/**
+ * The link-style action in the footer, e.g. `Skip tour` or `Learn more`. It either drives the tour
+ * (`action`) or leaves the page (`href`) — the union makes passing both, or neither, a type error.
+ */
+export type BitkitTourSecondaryAction = {
+    /**
+     * A tour action — `'skip'`, `'dismiss'`, `'next'`, `'prev'`, or a function that receives the
+     * action map (`{ next, prev, dismiss, skip, goto }`) to do something else first.
+     */
+    action: NonNullable<BitkitTourStepAction['action']>;
+    href?: never;
+    label: string;
+} | {
+    action?: never;
+    /** Renders the action as a link out. */
+    href: string;
+    label: string;
+};
+/**
+ * A single step of the tour. On top of Ark's step details it carries the three Bitkit slots —
+ * `badge`, `content` and `secondaryAction`. Zag spreads the whole step object when it normalises
+ * it, so these reach `tour.step` untouched. (Zag also offers a `meta` bag for this; flat fields
+ * read better at the call site, at the cost of a name clash if Zag ever adds one of these.)
+ *
+ * Ark's step `type` is not part of this: every step is a card anchored to an element, so the hook
+ * sets it. `target` is required for the same reason — Zag turns a step without one into a centred
+ * dialog, which is a presentation this component doesn't have.
+ */
+export type BitkitTourStep = Omit<TourStepDetails, 'type'> & {
+    /**
+     * Rendered next to the title — a `BitkitBadge` in practice, e.g. `BETA` or `NEW`. Nothing about
+     * the badge is fixed here beyond its placement: the element itself comes from the caller.
+     */
+    badge?: ReactNode;
+    /** Rendered between the description and the footer — an image, a video, a table, anything. */
+    content?: ReactNode;
+    secondaryAction?: BitkitTourSecondaryAction;
+    /** The element the step points at. */
+    target: NonNullable<TourStepDetails['target']>;
+};
+export interface BitkitTourOptions extends Omit<UseTourProps, 'onStepsChange' | 'steps'> {
+    /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */
+    onStepsChange?: (details: {
+        steps: BitkitTourStep[];
+    }) => void;
+    steps: BitkitTourStep[];
+}
+/** The tour api returned by `useBitkitTour` — pass it around to control the tour from anywhere. */
+export type BitkitTourInstance = Omit<UseTourReturn, 'addStep' | 'setSteps' | 'step' | 'updateStep'> & {
+    addStep: (step: BitkitTourStep) => void;
+    setSteps: (steps: BitkitTourStep[]) => void;
+    /** The current step, with the Bitkit slots (`badge`, `content`, `secondaryAction`) still typed on it. */
+    step: BitkitTourStep | null;
+    updateStep: (id: string, stepOverrides: Partial<BitkitTourStep>) => void;
+};
+export type BitkitTourProps = {
+    /** The tour instance returned by `useBitkitTour`. Start it with `tour.start()`. */
+    tour: BitkitTourInstance;
+};
+/**
+ * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options
+ * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …)
+ * and returns the api
+ * used to control it: `start()`, `next()`, `prev()`, `setStep()`, `step`, `stepIndex`, `totalSteps`.
+ */
+export declare const useBitkitTour: (options: BitkitTourOptions) => BitkitTourInstance;
+/**
+ * A guided product tour: a step card anchored to an element on the page, with a spotlight cut out
+ * of the dimmed backdrop around that element.
+ *
+ * The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render
+ * `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one
+ * is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what
+ * turns the card into the single-feature presentation.
+ */
+declare const BitkitTour: {
+    ({ tour }: BitkitTourProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default BitkitTour;

package/dist/components/BitkitTour/BitkitTour.js

@@ -0,0 +1,149 @@
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import BitkitButton from "../BitkitButton/BitkitButton.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { Tour, useTour } from "@ark-ui/react/tour";
+//#region lib/components/BitkitTour/BitkitTour.tsx
+/**
+* Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options
+* (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …)
+* and returns the api
+* used to control it: `start()`, `next()`, `prev()`, `setStep()`, `step`, `stepIndex`, `totalSteps`.
+*/
+var useBitkitTour = (options) => {
+	const tour = useTour({
+		spotlightOffset: {
+			x: 8,
+			y: 8
+		},
+		spotlightRadius: 4,
+		...options,
+		onStepsChange: options.onStepsChange,
+		translations: {
+			close: "Close tour",
+			...options.translations
+		},
+		steps: options.steps.map((step) => ({
+			offset: { mainAxis: 6 },
+			...step,
+			type: "tooltip"
+		}))
+	});
+	return {
+		...tour,
+		step: tour.step
+	};
+};
+var TourBackdrop = chakra(Tour.Backdrop);
+var TourSpotlight = chakra(Tour.Spotlight);
+var TourPositioner = chakra(Tour.Positioner);
+var TourContent = chakra(Tour.Content);
+var TourArrow = chakra(Tour.Arrow);
+var TourArrowTip = chakra(Tour.ArrowTip);
+var TourTitle = chakra(Tour.Title);
+var TourDescription = chakra(Tour.Description);
+var TourControl = chakra(Tour.Control);
+var TourProgressText = chakra(Tour.ProgressText);
+var SecondaryAction = ({ secondaryAction }) => {
+	const { action, href, label } = secondaryAction;
+	if (href !== void 0) return /* @__PURE__ */ jsx(BitkitButton, {
+		href,
+		size: "sm",
+		variant: "tertiary",
+		children: label
+	});
+	if (!action) return null;
+	return /* @__PURE__ */ jsx(Tour.ActionTrigger, {
+		asChild: true,
+		action: {
+			action,
+			label
+		},
+		children: /* @__PURE__ */ jsx(BitkitButton, {
+			size: "sm",
+			variant: "tertiary",
+			children: label
+		})
+	});
+};
+/**
+* A guided product tour: a step card anchored to an element on the page, with a spotlight cut out
+* of the dimmed backdrop around that element.
+*
+* The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render
+* `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one
+* is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what
+* turns the card into the single-feature presentation.
+*/
+var BitkitTour = ({ tour }) => {
+	const styles = useSlotRecipe({ key: "tour" })();
+	const step = tour.step;
+	const actions = step?.actions ?? [];
+	return /* @__PURE__ */ jsx(Tour.Root, {
+		unmountOnExit: true,
+		tour,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [
+			/* @__PURE__ */ jsx(TourBackdrop, { css: styles.backdrop }),
+			/* @__PURE__ */ jsx(TourSpotlight, { css: styles.spotlight }),
+			/* @__PURE__ */ jsx(TourPositioner, {
+				css: styles.positioner,
+				children: /* @__PURE__ */ jsxs(TourContent, {
+					css: styles.content,
+					children: [
+						/* @__PURE__ */ jsx(TourArrow, {
+							css: styles.arrow,
+							hidden: false,
+							children: /* @__PURE__ */ jsx(TourArrowTip, { css: styles.arrowTip })
+						}),
+						/* @__PURE__ */ jsxs(Box, {
+							css: styles.header,
+							children: [/* @__PURE__ */ jsxs(Box, {
+								css: styles.titleGroup,
+								children: [tour.totalSteps > 1 ? /* @__PURE__ */ jsx(TourProgressText, { css: styles.progressText }) : null, /* @__PURE__ */ jsxs(Box, {
+									css: styles.titleRow,
+									children: [/* @__PURE__ */ jsx(TourTitle, { css: styles.title }), step?.badge ? /* @__PURE__ */ jsx(Box, {
+										css: styles.badge,
+										children: step.badge
+									}) : null]
+								})]
+							}), /* @__PURE__ */ jsx(Tour.CloseTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(BitkitCloseButton, {
+									css: styles.closeTrigger,
+									size: "xs"
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsx(TourDescription, { css: styles.description }),
+						step?.content ? /* @__PURE__ */ jsx(Box, {
+							css: styles.media,
+							children: step.content
+						}) : null,
+						/* @__PURE__ */ jsxs(TourControl, {
+							css: styles.control,
+							children: [step?.secondaryAction ? /* @__PURE__ */ jsx(SecondaryAction, { secondaryAction: step.secondaryAction }) : null, /* @__PURE__ */ jsx(Box, {
+								css: styles.actions,
+								children: actions.map((action, index) => /* @__PURE__ */ jsx(Tour.ActionTrigger, {
+									asChild: true,
+									action,
+									children: /* @__PURE__ */ jsx(BitkitButton, {
+										size: "sm",
+										variant: index === actions.length - 1 ? "primary" : "secondary",
+										children: action.label
+									})
+								}, action.label))
+							})]
+						})
+					]
+				})
+			})
+		] })
+	});
+};
+BitkitTour.displayName = "BitkitTour";
+//#endregion
+export { BitkitTour as default, useBitkitTour };
+
+//# sourceMappingURL=BitkitTour.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitTour.js","names":[],"sources":["../../../lib/components/BitkitTour/BitkitTour.tsx"],"sourcesContent":["import {\n  Tour as ArkTour,\n  type TourStepDetails,\n  useTour,\n  type UseTourProps,\n  type UseTourReturn,\n} from '@ark-ui/react/tour';\nimport { Box } from '@chakra-ui/react/box';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\ntype BitkitTourStepAction = NonNullable<TourStepDetails['actions']>[number];\n\n/**\n * The link-style action in the footer, e.g. `Skip tour` or `Learn more`. It either drives the tour\n * (`action`) or leaves the page (`href`) — the union makes passing both, or neither, a type error.\n */\nexport type BitkitTourSecondaryAction =\n  | {\n      /**\n       * A tour action — `'skip'`, `'dismiss'`, `'next'`, `'prev'`, or a function that receives the\n       * action map (`{ next, prev, dismiss, skip, goto }`) to do something else first.\n       */\n      action: NonNullable<BitkitTourStepAction['action']>;\n      href?: never;\n      label: string;\n    }\n  | {\n      action?: never;\n      /** Renders the action as a link out. */\n      href: string;\n      label: string;\n    };\n\n/**\n * A single step of the tour. On top of Ark's step details it carries the three Bitkit slots —\n * `badge`, `content` and `secondaryAction`. Zag spreads the whole step object when it normalises\n * it, so these reach `tour.step` untouched. (Zag also offers a `meta` bag for this; flat fields\n * read better at the call site, at the cost of a name clash if Zag ever adds one of these.)\n *\n * Ark's step `type` is not part of this: every step is a card anchored to an element, so the hook\n * sets it. `target` is required for the same reason — Zag turns a step without one into a centred\n * dialog, which is a presentation this component doesn't have.\n */\nexport type BitkitTourStep = Omit<TourStepDetails, 'type'> & {\n  /**\n   * Rendered next to the title — a `BitkitBadge` in practice, e.g. `BETA` or `NEW`. Nothing about\n   * the badge is fixed here beyond its placement: the element itself comes from the caller.\n   */\n  badge?: ReactNode;\n  /** Rendered between the description and the footer — an image, a video, a table, anything. */\n  content?: ReactNode;\n  secondaryAction?: BitkitTourSecondaryAction;\n  /** The element the step points at. */\n  target: NonNullable<TourStepDetails['target']>;\n};\n\nexport interface BitkitTourOptions extends Omit<UseTourProps, 'onStepsChange' | 'steps'> {\n  /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */\n  onStepsChange?: (details: { steps: BitkitTourStep[] }) => void;\n  steps: BitkitTourStep[];\n}\n/** The tour api returned by `useBitkitTour` — pass it around to control the tour from anywhere. */\nexport type BitkitTourInstance = Omit<UseTourReturn, 'addStep' | 'setSteps' | 'step' | 'updateStep'> & {\n  addStep: (step: BitkitTourStep) => void;\n  setSteps: (steps: BitkitTourStep[]) => void;\n  /** The current step, with the Bitkit slots (`badge`, `content`, `secondaryAction`) still typed on it. */\n  step: BitkitTourStep | null;\n  updateStep: (id: string, stepOverrides: Partial<BitkitTourStep>) => void;\n};\nexport type BitkitTourProps = {\n  /** The tour instance returned by `useBitkitTour`. Start it with `tour.start()`. */\n  tour: BitkitTourInstance;\n};\n\n/**\n * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options\n * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …)\n * and returns the api\n * used to control it: `start()`, `next()`, `prev()`, `setStep()`, `step`, `stepIndex`, `totalSteps`.\n */\nexport const useBitkitTour = (options: BitkitTourOptions): BitkitTourInstance => {\n  const tour = useTour({\n    // The highlight sits 8 around the target, and the card 12 from the highlight — the 8 the arrow\n    // takes plus the 4 gap the design asks for. Both are measured from the highlight, since Zag\n    // grows the anchor rect by `spotlightOffset` before positioning. `offset.mainAxis` replaces\n    // Zag's own gutter, and Popper adds half the arrow's box on top of it: 6 + 5.65 ≈ the 12.\n    spotlightOffset: { x: 8, y: 8 },\n    // 4 is also Zag's current default, but the design asks for it and a third-party default is not\n    // ours to rely on — the z-index contract already moved under us once between two minors.\n    spotlightRadius: 4,\n    ...options,\n    // Same reason as the cast on `Tour.Root` below: our step type isn't a supertype of Ark's, so a\n    // callback taking ours doesn't match the signature Ark declares. The payload is Ark's.\n    onStepsChange: options.onStepsChange as UseTourProps['onStepsChange'],\n    // Zag's default is `close tour`, and this one is visible rather than screen-reader only: the\n    // close button shows its own aria-label in a tooltip. The rest of Zag's translations\n    // (`nextStep`, `prevStep`, `skip`) stay as they are — those only ever reach assistive tech.\n    translations: { close: 'Close tour', ...options.translations },\n    // `type` last: there is one presentation, so it isn't the caller's to pick.\n    steps: options.steps.map((step) => ({ offset: { mainAxis: 6 }, ...step, type: 'tooltip' as const })),\n  });\n\n  return { ...tour, step: tour.step as BitkitTourStep | null };\n};\n\n// The Ark parts aren't Chakra components, so they're wrapped with the `chakra()` factory to accept\n// `css`. They're deliberately NOT wrapped with `asChild`: each Ark part falls back to the current\n// step's content (title, description, progress text, action label) only when it renders its own\n// children, and `asChild` would replace those children with the wrapper element.\nconst TourBackdrop = chakra(ArkTour.Backdrop);\nconst TourSpotlight = chakra(ArkTour.Spotlight);\nconst TourPositioner = chakra(ArkTour.Positioner);\nconst TourContent = chakra(ArkTour.Content);\nconst TourArrow = chakra(ArkTour.Arrow);\nconst TourArrowTip = chakra(ArkTour.ArrowTip);\nconst TourTitle = chakra(ArkTour.Title);\nconst TourDescription = chakra(ArkTour.Description);\nconst TourControl = chakra(ArkTour.Control);\nconst TourProgressText = chakra(ArkTour.ProgressText);\n\nconst SecondaryAction = ({ secondaryAction }: { secondaryAction: BitkitTourSecondaryAction }) => {\n  const { action, href, label } = secondaryAction;\n\n  if (href !== undefined) {\n    return (\n      <BitkitButton href={href} size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    );\n  }\n\n  if (!action) return null;\n\n  return (\n    <ArkTour.ActionTrigger asChild action={{ action, label }}>\n      <BitkitButton size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    </ArkTour.ActionTrigger>\n  );\n};\n\n/**\n * A guided product tour: a step card anchored to an element on the page, with a spotlight cut out\n * of the dimmed backdrop around that element.\n *\n * The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render\n * `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one\n * is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what\n * turns the card into the single-feature presentation.\n */\nconst BitkitTour = ({ tour }: BitkitTourProps) => {\n  const recipe = useSlotRecipe({ key: 'tour' });\n  const styles = recipe();\n  const step = tour.step;\n  const actions = step?.actions ?? [];\n\n  return (\n    // `unmountOnExit` isn't only tidiness: Ark's backdrop applies `hidden: !tour.step?.backdrop`\n    // after merging the presence props, which overrides the presence's own `hidden` — and since the\n    // step is kept after the tour closes, the dimming would stay on screen for good. Unmounting on\n    // exit takes the node out before that can happen.\n    // The cast is the price of refining `step` and the step-mutating methods on the instance: our\n    // step type isn't a supertype of Ark's, so the methods no longer match its api signature. The\n    // object is Ark's api — only the types are ours.\n    <ArkTour.Root unmountOnExit tour={tour as UseTourReturn}>\n      <Portal>\n        <TourBackdrop css={styles.backdrop} />\n        <TourSpotlight css={styles.spotlight} />\n        <TourPositioner css={styles.positioner}>\n          <TourContent css={styles.content}>\n            {/* `hidden={false}` overrides Zag, which hides the arrow until the card has been\n                positioned — while Popper computes that position from the arrow's `clientHeight`, so\n                a hidden arrow measures 0 and the card lands 6 short of the design's 12, then drops\n                by that 6 as soon as anything recomputes. Nothing shows in the meantime: until it is\n                positioned the card itself sits off-screen at `-100vh`. */}\n            <TourArrow css={styles.arrow} hidden={false}>\n              <TourArrowTip css={styles.arrowTip} />\n            </TourArrow>\n            <Box css={styles.header}>\n              <Box css={styles.titleGroup}>\n                {tour.totalSteps > 1 ? <TourProgressText css={styles.progressText} /> : null}\n                <Box css={styles.titleRow}>\n                  <TourTitle css={styles.title} />\n                  {step?.badge ? <Box css={styles.badge}>{step.badge}</Box> : null}\n                </Box>\n              </Box>\n              <ArkTour.CloseTrigger asChild>\n                <BitkitCloseButton css={styles.closeTrigger} size=\"xs\" />\n              </ArkTour.CloseTrigger>\n            </Box>\n            <TourDescription css={styles.description} />\n            {step?.content ? <Box css={styles.media}>{step.content}</Box> : null}\n            <TourControl css={styles.control}>\n              {step?.secondaryAction ? <SecondaryAction secondaryAction={step.secondaryAction} /> : null}\n              <Box css={styles.actions}>\n                {actions.map((action, index) => (\n                  <ArkTour.ActionTrigger key={action.label} asChild action={action}>\n                    <BitkitButton size=\"sm\" variant={index === actions.length - 1 ? 'primary' : 'secondary'}>\n                      {action.label}\n                    </BitkitButton>\n                  </ArkTour.ActionTrigger>\n                ))}\n              </Box>\n            </TourControl>\n          </TourContent>\n        </TourPositioner>\n      </Portal>\n    </ArkTour.Root>\n  );\n};\n\nBitkitTour.displayName = 'BitkitTour';\n\nexport default BitkitTour;\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -84,4 +84,5 @@ export { default as BitkitTextInput, type BitkitTextInputProps } from './BitkitT
 export { type BitkitToastProps, default as createBitkitToast, dismissBitkitToast } from './BitkitToast/BitkitToast';
 export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './BitkitToggleButton/BitkitToggleButton';
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
+export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';

package/dist/main.js

@@ -369,8 +369,9 @@ import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
 import BitkitTextArea from "./components/BitkitTextArea/BitkitTextArea.js";
 import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/BitkitToast.js";
 import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
+import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRadioItem, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useResponsive, useStepperDialog };
+export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRadioItem, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };

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

@@ -22,7 +22,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
 		},
 		positioner: {
 			position: "absolute",
-			zIndex: "dropdown"
+			zIndex: "select"
 		},
 		content: {
 			backgroundColor: "background/primary",

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys(), 'months'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    months: {\n      display: 'flex',\n      gap: '24',\n    },\n    positioner: {\n      position: 'absolute',\n      zIndex: 'dropdown',\n    },\n    content: {\n      backgroundColor: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      minWidth: rem(312),\n      paddingBlock: '24',\n      paddingInline: '16',\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    viewControl: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'collapse',\n      borderSpacing: 0,\n      tableLayout: 'fixed',\n    },\n    tableBody: {\n      '& > tr:first-child > td': {\n        paddingTop: '8',\n      },\n    },\n    tableRow: {\n      display: 'table-row',\n    },\n    tableHeader: {\n      color: 'text/tertiary',\n      textAlign: 'center',\n      textStyle: 'body/md/regular',\n      width: '40',\n      minWidth: '40',\n      maxWidth: '40',\n    },\n    tableCell: {\n      textAlign: 'center',\n      paddingBlock: '2',\n    },\n    tableCellTrigger: {\n      display: 'flex',\n      alignItems: 'stretch',\n      justifyContent: 'center',\n      width: '100%',\n      height: '32',\n      color: 'text/primary',\n      cursor: 'pointer',\n      textStyle: 'body/md/regular',\n\n      '&:hover:not([data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-unavailable]': {\n        borderRadius: 0,\n        backgroundColor: 'interactive/disabled',\n        color: 'text/disabled',\n        cursor: 'default',\n        '&:hover, &[data-outside-range]:hover': {\n          borderRadius: 0,\n          backgroundColor: 'interactive/disabled',\n          color: 'text/disabled',\n        },\n      },\n\n      '&[data-outside-range]': {\n        color: 'text/tertiary',\n      },\n\n      '&[data-outside-range][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n        backgroundColor: 'interactive/moderate',\n        color: 'interactive/bold',\n      },\n\n      '&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-start]:hover': {\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-hover-range-end]:hover': {\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-start]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-end]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range]:hover': {\n        backgroundColor: 'transparent',\n        color: 'text/tertiary',\n      },\n\n      '&[data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'text/primary',\n      },\n\n      '&[data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        borderRadius: 0,\n      },\n\n      '&[data-selected]': {\n        backgroundColor: 'interactive/base',\n        color: 'text/on-color',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-selected]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start][data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-hover-range-start][data-hover-range-end]': {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-today] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/base',\n      },\n\n      '&[data-today][data-selected] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/moderate',\n      },\n\n      '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n        borderColor: 'interactive/moderate',\n      },\n\n      '& > span': {\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '8',\n        display: 'flex',\n        flex: 1,\n      },\n    },\n  },\n  variants: {\n    layout: {\n      '1-month': {\n        content: {\n          width: '17.5rem',\n        },\n      },\n      '2-month': {\n        content: {\n          width: '38.5rem',\n        },\n      },\n    },\n    showOutsideDays: {\n      false: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'hidden',\n          },\n        },\n      },\n      true: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'visible',\n          },\n        },\n      },\n    },\n    device: {\n      mobile: {\n        content: {\n          boxShadow: 'none',\n          paddingBlock: '16',\n          paddingInline: '16',\n        },\n      },\n    },\n  },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys(), 'months'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    months: {\n      display: 'flex',\n      gap: '24',\n    },\n    positioner: {\n      position: 'absolute',\n      zIndex: 'select',\n    },\n    content: {\n      backgroundColor: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      minWidth: rem(312),\n      paddingBlock: '24',\n      paddingInline: '16',\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    viewControl: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'collapse',\n      borderSpacing: 0,\n      tableLayout: 'fixed',\n    },\n    tableBody: {\n      '& > tr:first-child > td': {\n        paddingTop: '8',\n      },\n    },\n    tableRow: {\n      display: 'table-row',\n    },\n    tableHeader: {\n      color: 'text/tertiary',\n      textAlign: 'center',\n      textStyle: 'body/md/regular',\n      width: '40',\n      minWidth: '40',\n      maxWidth: '40',\n    },\n    tableCell: {\n      textAlign: 'center',\n      paddingBlock: '2',\n    },\n    tableCellTrigger: {\n      display: 'flex',\n      alignItems: 'stretch',\n      justifyContent: 'center',\n      width: '100%',\n      height: '32',\n      color: 'text/primary',\n      cursor: 'pointer',\n      textStyle: 'body/md/regular',\n\n      '&:hover:not([data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-unavailable]': {\n        borderRadius: 0,\n        backgroundColor: 'interactive/disabled',\n        color: 'text/disabled',\n        cursor: 'default',\n        '&:hover, &[data-outside-range]:hover': {\n          borderRadius: 0,\n          backgroundColor: 'interactive/disabled',\n          color: 'text/disabled',\n        },\n      },\n\n      '&[data-outside-range]': {\n        color: 'text/tertiary',\n      },\n\n      '&[data-outside-range][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n        backgroundColor: 'interactive/moderate',\n        color: 'interactive/bold',\n      },\n\n      '&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-start]:hover': {\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-hover-range-end]:hover': {\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-start]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-end]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range]:hover': {\n        backgroundColor: 'transparent',\n        color: 'text/tertiary',\n      },\n\n      '&[data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'text/primary',\n      },\n\n      '&[data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        borderRadius: 0,\n      },\n\n      '&[data-selected]': {\n        backgroundColor: 'interactive/base',\n        color: 'text/on-color',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-selected]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start][data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-hover-range-start][data-hover-range-end]': {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-today] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/base',\n      },\n\n      '&[data-today][data-selected] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/moderate',\n      },\n\n      '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n        borderColor: 'interactive/moderate',\n      },\n\n      '& > span': {\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '8',\n        display: 'flex',\n        flex: 1,\n      },\n    },\n  },\n  variants: {\n    layout: {\n      '1-month': {\n        content: {\n          width: '17.5rem',\n        },\n      },\n      '2-month': {\n        content: {\n          width: '38.5rem',\n        },\n      },\n    },\n    showOutsideDays: {\n      false: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'hidden',\n          },\n        },\n      },\n      true: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'visible',\n          },\n        },\n      },\n    },\n    device: {\n      mobile: {\n        content: {\n          boxShadow: 'none',\n          paddingBlock: '16',\n          paddingInline: '16',\n        },\n      },\n    },\n  },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+declare const tourSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
+export default tourSlotRecipe;

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

@@ -0,0 +1,116 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+import { tourAnatomy } from "@ark-ui/react/anatomy";
+//#region lib/theme/slot-recipes/Tour.recipe.ts
+var tourSlotRecipe = defineSlotRecipe({
+	className: "tour",
+	slots: [
+		...tourAnatomy.keys(),
+		"actions",
+		"badge",
+		"header",
+		"media",
+		"titleGroup",
+		"titleRow"
+	],
+	base: {
+		backdrop: {
+			background: "utilities/overlay",
+			zIndex: "dialogOverlay",
+			_open: {
+				animationStyle: "fade-in",
+				animationDuration: "moderate"
+			}
+		},
+		spotlight: {
+			borderRadius: "4",
+			outline: "2px solid",
+			outlineColor: "interactive/highlight",
+			zIndex: "dialogOverlay"
+		},
+		positioner: {
+			"--tour-z-index": "zIndex.dialog",
+			zIndex: "dialog"
+		},
+		content: {
+			background: "background/primary",
+			borderRadius: "8",
+			boxShadow: "elevation/lg",
+			display: "flex",
+			flexDirection: "column",
+			gap: "8",
+			maxHeight: "var(--available-height, 100dvh)",
+			maxWidth: "100%",
+			outline: "none",
+			padding: "16",
+			position: "relative",
+			width: rem(360),
+			zIndex: "dialog",
+			_open: {
+				animationStyle: "fade-in",
+				animationDuration: "moderate"
+			}
+		},
+		header: {
+			alignItems: "flex-start",
+			display: "flex",
+			gap: "16",
+			justifyContent: "space-between"
+		},
+		titleGroup: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "8"
+		},
+		titleRow: {
+			alignItems: "flex-start",
+			display: "flex",
+			gap: "8"
+		},
+		badge: { flexShrink: 0 },
+		title: {
+			color: "text/primary",
+			textStyle: "heading/h4"
+		},
+		progressText: {
+			color: "text/secondary",
+			textStyle: "body/sm/regular"
+		},
+		description: {
+			color: "text/body",
+			minHeight: 0,
+			overflowY: "auto",
+			textStyle: "body/md/regular"
+		},
+		media: { marginBlockStart: "8" },
+		control: {
+			alignItems: "center",
+			display: "flex",
+			gap: "16",
+			justifyContent: "space-between",
+			marginBlockStart: "16"
+		},
+		actions: {
+			display: "flex",
+			gap: "8",
+			marginInlineStart: "auto"
+		},
+		closeTrigger: { flexShrink: 0 },
+		arrow: {
+			"--arrow-size": rem(11.3),
+			"--arrow-background": "colors.background/primary",
+			height: "var(--arrow-size)",
+			position: "absolute",
+			width: "var(--arrow-size)"
+		},
+		arrowTip: {
+			borderColor: "border/minimal",
+			borderInlineStartWidth: "1",
+			borderTopWidth: "1"
+		}
+	}
+});
+//#endregion
+export { tourSlotRecipe as default };
+
+//# sourceMappingURL=Tour.recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tour.recipe.ts"],"sourcesContent":["// The Tour parts come from Ark UI, so the anatomy comes from there too — Chakra has no `tour`\n// counterpart yet (chakra-ui/chakra-ui#10410 is still open).\nimport { tourAnatomy } from '@ark-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tourSlotRecipe = defineSlotRecipe({\n  className: 'tour',\n  slots: [...tourAnatomy.keys(), 'actions', 'badge', 'header', 'media', 'titleGroup', 'titleRow'] as const,\n  base: {\n    backdrop: {\n      background: 'utilities/overlay',\n      zIndex: 'dialogOverlay',\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n      // No exit animation: Ark sets `hidden` on the backdrop and the content the moment the tour\n      // closes, so the node is `display: none` in the same frame and an exit animation can never\n      // paint — it only leaves the animation assigned, which flashes the card back in for a frame\n      // on the next render. Most visible on steps without a backdrop, where nothing masks it.\n    },\n    // Sits on the same layer as the backdrop and after it in DOM order, so the ring around the\n    // highlighted element paints over the dimmed page.\n    spotlight: {\n      borderRadius: '4',\n      outline: '2px solid',\n      outlineColor: 'interactive/highlight',\n      zIndex: 'dialogOverlay',\n    },\n    // Zag positions and layers this one inline, writing\n    // `z-index: calc(var(--tour-layer) + var(--tour-z-index))` and expecting us to supply the base.\n    // Without it the calc is invalid, the positioner falls back to `auto` — and since it opens its\n    // own stacking context (`isolation: isolate`), the card's own z-index can't reach past it, so\n    // the whole card ends up under the backdrop and swallows every click. The plain `zIndex` is the\n    // fallback for the day Zag stops writing that inline.\n    positioner: {\n      '--tour-z-index': 'zIndex.dialog',\n      zIndex: 'dialog',\n    },\n    content: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n      maxHeight: 'var(--available-height, 100dvh)',\n      maxWidth: '100%',\n      outline: 'none',\n      padding: '16',\n      position: 'relative',\n      width: rem(360),\n      zIndex: 'dialog',\n      // Fade only, no scale: Zag puts `--transform-origin` at the arrow tip, so a `scale-in` grows\n      // the card away from the highlight — a 360x300 card gains ~15 of height on the way in, which\n      // reads as the card repositioning itself rather than appearing.\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n    },\n    header: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'space-between',\n    },\n    titleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    // flex-start, not center: the badge is as tall as one line of the title, so it lines up with\n    // the first line instead of floating beside the middle of a title that wrapped.\n    titleRow: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      gap: '8',\n    },\n    badge: {\n      flexShrink: 0,\n    },\n    title: {\n      color: 'text/primary',\n      textStyle: 'heading/h4',\n    },\n    progressText: {\n      color: 'text/secondary',\n      textStyle: 'body/sm/regular',\n    },\n    description: {\n      color: 'text/body',\n      minHeight: 0,\n      overflowY: 'auto',\n      textStyle: 'body/md/regular',\n    },\n    // These two margins stack on the content's own 8 gap, which is how the layout spec builds the\n    // spacing: 16 between the description and the visual, and 24 above the footer. The footer gets\n    // nothing below it, so the card's own 16 padding is the whole gap under the buttons.\n    media: {\n      marginBlockStart: '8',\n    },\n    control: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'space-between',\n      marginBlockStart: '16',\n    },\n    actions: {\n      display: 'flex',\n      gap: '8',\n      marginInlineStart: 'auto',\n    },\n    closeTrigger: {\n      flexShrink: 0,\n    },\n    arrow: {\n      // Popper draws the arrow as a square rotated 45°, so the visible triangle is `size * √2`\n      // wide and `size / √2` tall — 11.3 gives the design's 16×8.\n      '--arrow-size': rem(11.3),\n      '--arrow-background': 'colors.background/primary',\n      // Size and out-of-flow positioning are set here, not only by Popper's inline styles, because\n      // the component keeps this element out of Zag's `hidden` (see BitkitTour): Popper derives the\n      // card's distance from the anchor as `offset.mainAxis + arrowEl.clientHeight / 2`, read off\n      // the DOM. A `display: none` arrow measures 0, which puts the card 6 short of the design's 12\n      // on the first pass. `absolute` keeps it from adding its height to the card while it waits\n      // for Popper's own inline placement.\n      height: 'var(--arrow-size)',\n      position: 'absolute',\n      width: 'var(--arrow-size)',\n    },\n    arrowTip: {\n      borderColor: 'border/minimal',\n      borderInlineStartWidth: '1',\n      borderTopWidth: '1',\n    },\n  },\n});\n\nexport default tourSlotRecipe;\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAW;EAAS;EAAU;EAAS;EAAc;CAAU;CAC9F,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,QAAQ;GACR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;EAKF;EAGA,WAAW;GACT,cAAc;GACd,SAAS;GACT,cAAc;GACd,QAAQ;EACV;EAOA,YAAY;GACV,kBAAkB;GAClB,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,eAAe;GACf,KAAK;GACL,WAAW;GACX,UAAU;GACV,SAAS;GACT,SAAS;GACT,UAAU;GACV,OAAO,IAAI,GAAG;GACd,QAAQ;GAIR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EAGA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,KAAK;EACP;EACA,OAAO,EACL,YAAY,EACd;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;GACX,WAAW;GACX,WAAW;EACb;EAIA,OAAO,EACL,kBAAkB,IACpB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,kBAAkB;EACpB;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,mBAAmB;EACrB;EACA,cAAc,EACZ,YAAY,EACd;EACA,OAAO;GAGL,gBAAgB,IAAI,IAAI;GACxB,sBAAsB;GAOtB,QAAQ;GACR,UAAU;GACV,OAAO;EACT;EACA,UAAU;GACR,aAAa;GACb,wBAAwB;GACxB,gBAAgB;EAClB;CACF;AACF,CAAC"}

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

@@ -2678,6 +2678,7 @@ declare const slotRecipes: {
             };
         };
     }>;
+    tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
     treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "secondaryText" | "root" | "item" | "itemIndicator" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
         variant: {
             files: {

package/dist/theme/slot-recipes/index.js

@@ -57,6 +57,7 @@ import tagsInputSlotRecipe from "./TagsInput.recipe.js";
 import textInputSlotRecipe from "./TextInput.recipe.js";
 import toastSlotRecipe from "./Toast.recipe.js";
 import tooltipSlotRecipe from "./Tooltip.recipe.js";
+import tourSlotRecipe from "./Tour.recipe.js";
 import treeViewSlotRecipe from "./TreeView.recipe.js";
 //#region lib/theme/slot-recipes/index.ts
 var slotRecipes = {
@@ -119,6 +120,7 @@ var slotRecipes = {
 	textInput: textInputSlotRecipe,
 	toast: toastSlotRecipe,
 	tooltip: tooltipSlotRecipe,
+	tour: tourSlotRecipe,
 	treeView: treeViewSlotRecipe
 };
 //#endregion

package/dist/theme/slot-recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  dataWidget: dataWidgetSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  multiselect: multiselectSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  popover: popoverSlotRecipe,\n  progress: progressSlotRecipe,\n  qrCode: qrCodeSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  sidebar: sidebarSlotRecipe,\n  select: selectSlotRecipe,\n  settingsCard: settingsCardSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  textInput: textInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;AACZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  dataWidget: dataWidgetSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  multiselect: multiselectSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  popover: popoverSlotRecipe,\n  progress: progressSlotRecipe,\n  qrCode: qrCodeSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  sidebar: sidebarSlotRecipe,\n  select: selectSlotRecipe,\n  settingsCard: settingsCardSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  textInput: textInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.348",
+  "version": "0.3.350",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -59,8 +59,8 @@
     "postinstall": "node ./scripts/postinstall.cjs"
   },
   "peerDependencies": {
-    "@chakra-ui/cli": "3.36.1",
-    "@chakra-ui/react": "3.36.1",
+    "@chakra-ui/cli": "3.37.0",
+    "@chakra-ui/react": "3.37.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "react": ">=18",
@@ -68,37 +68,38 @@
   },
   "devDependencies": {
     "@bitrise/eslint-plugin": "^4.1.0",
-    "@chakra-ui/cli": "3.36.1",
-    "@chakra-ui/react": "3.36.1",
+    "@chakra-ui/cli": "3.37.0",
+    "@chakra-ui/react": "3.37.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@figma-export/cli": "^6.4.1",
     "@figma-export/output-components-as-svg": "^6.4.1",
     "@figma-export/transform-svg-with-svgo": "^6.4.1",
-    "@google-cloud/storage": "^8.0.0",
-    "@storybook/addon-docs": "10.5.8",
+    "@google-cloud/storage": "^8.0.1",
+    "@storybook/addon-docs": "10.5.10",
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/mcp": "^0.8.0",
-    "@storybook/react-vite": "10.5.8",
+    "@storybook/react-vite": "10.5.10",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.4.0",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react": "^6.0.5",
+    "@vitejs/plugin-react": "^6.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "release-it": "^21.0.2",
-    "storybook": "10.5.8",
-    "tsx": "^4.23.12",
+    "storybook": "10.5.10",
+    "tsx": "^4.23.13",
     "typescript": "^6.0.3",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-svgr": "^5.2.0"
   },
   "dependencies": {
+    "@ark-ui/react": "5.39.0",
     "@fontsource-variable/figtree": "^5.3.0",
     "@fontsource-variable/source-code-pro": "^5.3.0",
-    "es-toolkit": "^1.51.0",
+    "es-toolkit": "^1.52.0",
     "react-markdown": "^10.1.0"
   },
   "overrides": {