npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.349 → 0.3.351 - Mend

@bitrise/bitkit-v2 0.3.349 → 0.3.351

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

Files changed (9) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -41,7 +41,7 @@ export type BitkitTourStep = Omit<TourStepDetails, 'type'> & {
     /** The element the step points at. */
     target: NonNullable<TourStepDetails['target']>;
 };
-export interface BitkitTourOptions extends Omit<UseTourProps, 'onStepsChange' | 'steps'> {
+export interface BitkitTourOptions extends Omit<UseTourProps, 'closeOnInteractOutside' | 'onStepsChange' | 'steps'> {
     /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */
     onStepsChange?: (details: {
         steps: BitkitTourStep[];
@@ -62,9 +62,9 @@ export type BitkitTourProps = {
 };
 /**
  * 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`.
+ * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …) and
+ * returns the api used to control it: `start()`, `next()`, `prev()`, `setStep()`, `step`,
+ * `stepIndex`, `totalSteps`. Closing on a click outside isn't among them — see below.
  */
 export declare const useBitkitTour: (options: BitkitTourOptions) => BitkitTourInstance;
 /**

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

@@ -8,9 +8,9 @@ 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`.
+* (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …) and
+* returns the api used to control it: `start()`, `next()`, `prev()`, `setStep()`, `step`,
+* `stepIndex`, `totalSteps`. Closing on a click outside isn't among them — see below.
 */
 var useBitkitTour = (options) => {
 	const tour = useTour({
@@ -20,6 +20,7 @@ var useBitkitTour = (options) => {
 		},
 		spotlightRadius: 4,
 		...options,
+		closeOnInteractOutside: false,
 		onStepsChange: options.onStepsChange,
 		translations: {
 			close: "Close tour",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitTour.js","names":[],"sources":["../../../lib/components/BitkitTour/BitkitTour.tsx"],"sourcesContent":["import {\n Tour as ArkTour,\n type TourStepDetails,\n useTour,\n type UseTourProps,\n type UseTourReturn,\n} from '@ark-ui/react/tour';\nimport { Box } from '@chakra-ui/react/box';\nimport { 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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"}
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, 'closeOnInteractOutside' \| '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`, …) and\n * returns the api used to control it: `start()`, `next()`, `prev()`, `setStep()`, `step`,\n * `stepIndex`, `totalSteps`. Closing on a click outside isn't among them — see below.\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 // Not part of the options, and set after the spread so it can't be turned back on: a tour is a\n // guided flow with its own ways out — the close button, `Skip tour`, `Done` — and Zag would\n // otherwise end it on any click outside the card, losing the whole thing to a stray click on\n // the dimmed page. Escape is a deliberate keystroke rather than a stray click, so it keeps\n // closing the tour by default — and unlike this one, `closeOnEscape` stays in the options for\n // callers who want it off.\n closeOnInteractOutside: false,\n // 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":";;;;;;;;;;;;;;AAqFA,IAAa,iBAAiB,YAAmD;CAC/E,MAAM,OAAO,QAAQ;EAKnB,iBAAiB;GAAE,GAAG;GAAG,GAAG;EAAE;EAG9B,iBAAiB;EACjB,GAAG;EAOH,wBAAwB;EAGxB,eAAe,QAAQ;EAIvB,cAAc;GAAE,OAAO;GAAc,GAAG,QAAQ;EAAa;EAE7D,OAAO,QAAQ,MAAM,KAAK,UAAU;GAAE,QAAQ,EAAE,UAAU,EAAE;GAAG,GAAG;GAAM,MAAM;EAAmB,EAAE;CACrG,CAAC;CAED,OAAO;EAAE,GAAG;EAAM,MAAM,KAAK;CAA8B;AAC7D;AAMA,IAAM,eAAe,OAAO,KAAQ,QAAQ;AAC5C,IAAM,gBAAgB,OAAO,KAAQ,SAAS;AAC9C,IAAM,iBAAiB,OAAO,KAAQ,UAAU;AAChD,IAAM,cAAc,OAAO,KAAQ,OAAO;AAC1C,IAAM,YAAY,OAAO,KAAQ,KAAK;AACtC,IAAM,eAAe,OAAO,KAAQ,QAAQ;AAC5C,IAAM,YAAY,OAAO,KAAQ,KAAK;AACtC,IAAM,kBAAkB,OAAO,KAAQ,WAAW;AAClD,IAAM,cAAc,OAAO,KAAQ,OAAO;AAC1C,IAAM,mBAAmB,OAAO,KAAQ,YAAY;AAEpD,IAAM,mBAAmB,EAAE,sBAAsE;CAC/F,MAAM,EAAE,QAAQ,MAAM,UAAU;CAEhC,IAAI,SAAS,KAAA,GACX,OACE,oBAAC,cAAD;EAAoB;EAAM,MAAK;EAAK,SAAQ;EACzC,UAAA;CACW,CAAA;CAIlB,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,KAAQ,eAAT;EAAuB,SAAA;EAAQ,QAAQ;GAAE;GAAQ;EAAM;EACrD,UAAA,oBAAC,cAAD;GAAc,MAAK;GAAK,SAAQ;GAC7B,UAAA;EACW,CAAA;CACO,CAAA;AAE3B;;;;;;;;;;AAWA,IAAM,cAAc,EAAE,WAA4B;CAEhD,MAAM,SADS,cAAc,EAAE,KAAK,OAAO,CAC5B,CAAA,CAAO;CACtB,MAAM,OAAO,KAAK;CAClB,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,OAQE,oBAAC,KAAQ,MAAT;EAAc,eAAA;EAAoB;EAChC,UAAA,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,cAAD,EAAc,KAAK,OAAO,SAAW,CAAA;GACrC,oBAAC,eAAD,EAAe,KAAK,OAAO,UAAY,CAAA;GACvC,oBAAC,gBAAD;IAAgB,KAAK,OAAO;IAC1B,UAAA,qBAAC,aAAD;KAAa,KAAK,OAAO;KAAzB,UAAA;MAME,oBAAC,WAAD;OAAW,KAAK,OAAO;OAAO,QAAQ;OACpC,UAAA,oBAAC,cAAD,EAAc,KAAK,OAAO,SAAW,CAAA;MAC5B,CAAA;MACX,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACG,KAAK,aAAa,IAAI,oBAAC,kBAAD,EAAkB,KAAK,OAAO,aAAe,CAAA,IAAI,MACxE,qBAAC,KAAD;SAAK,KAAK,OAAO;SAAjB,UAAA,CACE,oBAAC,WAAD,EAAW,KAAK,OAAO,MAAQ,CAAA,GAC9B,MAAM,QAAQ,oBAAC,KAAD;UAAK,KAAK,OAAO;UAAQ,UAAA,KAAK;SAAW,CAAA,IAAI,IACzD;QACF,CAAA,CAAA;OACL,CAAA,GAAA,oBAAC,KAAQ,cAAT;QAAsB,SAAA;QACpB,UAAA,oBAAC,mBAAD;SAAmB,KAAK,OAAO;SAAc,MAAK;QAAM,CAAA;OACpC,CAAA,CACnB;;MACL,oBAAC,iBAAD,EAAiB,KAAK,OAAO,YAAc,CAAA;MAC1C,MAAM,UAAU,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAQ,UAAA,KAAK;MAAa,CAAA,IAAI;MAChE,qBAAC,aAAD;OAAa,KAAK,OAAO;OAAzB,UAAA,CACG,MAAM,kBAAkB,oBAAC,iBAAD,EAAiB,iBAAiB,KAAK,gBAAkB,CAAA,IAAI,MACtF,oBAAC,KAAD;QAAK,KAAK,OAAO;QACd,UAAA,QAAQ,KAAK,QAAQ,UACpB,oBAAC,KAAQ,eAAT;SAA0C,SAAA;SAAgB;SACxD,UAAA,oBAAC,cAAD;UAAc,MAAK;UAAK,SAAS,UAAU,QAAQ,SAAS,IAAI,YAAY;UACzE,UAAA,OAAO;SACI,CAAA;QACO,GAJK,OAAO,KAIZ,CACxB;OACE,CAAA,CACM;;KACF;;GACC,CAAA;EACV,EAAA,CAAA;CACI,CAAA;AAElB;AAEA,WAAW,cAAc"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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: '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/package.json CHANGED Viewed

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