@bitrise/bitkit-v2 0.3.474 → 0.3.475-beta.3012

package/dist/components/BitkitFilter/components/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterPanel.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Popover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ReactNode } from 'react';\n\nimport { IconArrowLeft } from '../../../icons';\nimport { usePortalContext } from '../../../utilities/BitkitPortalContext';\nimport BitkitBadge from '../../BitkitBadge/BitkitBadge';\nimport BitkitButton from '../../BitkitButton/BitkitButton';\nimport BitkitControlButton from '../../BitkitControlButton/BitkitControlButton';\nimport { useFilterContext } from '../BitkitFilter.context';\n\nexport interface FilterPanelProps {\n  children: ReactNode;\n  /** Where focus goes on close, for a panel without a trigger to return it to. */\n  finalFocusEl?: () => HTMLElement | null;\n  /** Anchors the desktop popover to an element it has no trigger for — the \"Add filter\" button. */\n  getAnchorElement?: () => HTMLElement | null;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n  /**\n   * What opens the panel: on desktop a `FilterChip`, which renders the popover's trigger; on mobile a\n   * `FilterField`, which opens it through its own `onClick`.\n   */\n  trigger?: ReactNode;\n}\n\n/**\n * Where a filter edits its value: an anchored popover on desktop, a full-screen view stacked over the\n * filters dialog on mobile. The content unmounts on close, so the draft state of the form inside\n * starts over from the applied value each time it opens.\n */\nconst FilterPanel = (props: FilterPanelProps) => {\n  const { children, finalFocusEl, getAnchorElement, onOpenChange: onOpenChangeProp, open, trigger } = props;\n  const { isDisabled, isMobile, styles } = useFilterContext();\n  // While the page loads the triggers are only `aria-disabled`, so opening is refused here.\n  const onOpenChange = (isOpen: boolean) => {\n    if (!isOpen || !isDisabled) onOpenChangeProp(isOpen);\n  };\n  const { disablePortal } = usePortalContext();\n\n  if (isMobile) {\n    return (\n      <>\n        {trigger}\n        <Drawer.Root\n          finalFocusEl={finalFocusEl}\n          lazyMount\n          onOpenChange={({ open: isOpen }) => onOpenChange(isOpen)}\n          open={open}\n          unmountOnExit\n        >\n          <Portal disabled={disablePortal}>\n            <Drawer.Positioner>\n              <Drawer.Content>{children}</Drawer.Content>\n            </Drawer.Positioner>\n          </Portal>\n        </Drawer.Root>\n      </>\n    );\n  }\n\n  return (\n    <Popover.Root\n      finalFocusEl={finalFocusEl}\n      lazyMount\n      onOpenChange={({ open: isOpen }) => onOpenChange(isOpen)}\n      open={open}\n      positioning={{\n        getAnchorElement,\n        gutter: 8,\n        placement: 'bottom-start',\n      }}\n      unmountOnExit\n    >\n      {trigger}\n      <Portal disabled={disablePortal}>\n        <Popover.Positioner>\n          <Popover.Content css={styles.popoverContent}>{children}</Popover.Content>\n        </Popover.Positioner>\n      </Portal>\n    </Popover.Root>\n  );\n};\n\nexport interface FilterPanelHeaderProps {\n  /** Desktop only: a multi-select's selection count, shown as a badge next to the title. */\n  count?: number;\n  title: string;\n}\n\nexport const FilterPanelHeader = ({ count, title }: FilterPanelHeaderProps) => {\n  const { isMobile, styles } = useFilterContext();\n\n  if (isMobile) {\n    return (\n      <Box css={styles.mobilePanelHeader}>\n        <Drawer.CloseTrigger asChild unstyled>\n          <BitkitControlButton icon={IconArrowLeft} label=\"Back\" />\n        </Drawer.CloseTrigger>\n        <Box>\n          <Text css={styles.mobilePanelOverline}>Filter</Text>\n          <Drawer.Title css={styles.mobilePanelTitle} unstyled>\n            {title}\n          </Drawer.Title>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Popover.Header>\n      <Popover.Title>{title}</Popover.Title>\n      {count !== undefined && <BitkitBadge>{count}</BitkitBadge>}\n    </Popover.Header>\n  );\n};\n\nexport interface FilterPanelFooterProps {\n  /** Mobile only: the Apply button's label, e.g. \"Apply (2)\". */\n  applyLabel?: string;\n  isApplyDisabled: boolean;\n  onApply: () => void;\n  /** Desktop only: adds a \"Cancel\" button. On mobile the header's back button cancels. */\n  onCancel?: () => void;\n  /** The action before Apply: \"Clear\", or the wildcard-mode switch. */\n  start?: { label: string; onClick: () => void };\n}\n\nexport const FilterPanelFooter = ({\n  applyLabel,\n  isApplyDisabled,\n  onApply,\n  onCancel,\n  start,\n}: FilterPanelFooterProps) => {\n  const { isMobile, styles } = useFilterContext();\n  const applyState = isApplyDisabled ? 'disabled' : undefined;\n\n  if (isMobile) {\n    return (\n      <Drawer.Footer>\n        <Box css={styles.mobileFooter}>\n          {!!start && (\n            <BitkitButton onClick={start.onClick} size=\"md\" variant=\"secondary\">\n              {start.label}\n            </BitkitButton>\n          )}\n          <BitkitButton onClick={onApply} size=\"md\" state={applyState}>\n            {applyLabel ?? 'Apply'}\n          </BitkitButton>\n        </Box>\n      </Drawer.Footer>\n    );\n  }\n\n  return (\n    <Box css={styles.popoverFooter}>\n      <Box css={styles.popoverFooterStart}>\n        {!!start && (\n          <BitkitButton onClick={start.onClick} size=\"sm\" variant=\"tertiary\">\n            {start.label}\n          </BitkitButton>\n        )}\n      </Box>\n      {!!onCancel && (\n        <BitkitButton onClick={onCancel} size=\"sm\" variant=\"secondary\">\n          Cancel\n        </BitkitButton>\n      )}\n      <BitkitButton onClick={onApply} size=\"sm\" state={applyState}>\n        Apply\n      </BitkitButton>\n    </Box>\n  );\n};\n\nexport default FilterPanel;\n"],"mappings":"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"}

package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactElement } from 'react';
+export interface FilterSearchInputProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {
+    /** Extra hint read out with the field, e.g. what the search matches. */
+    description?: string;
+    label: string;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    /** Wraps the input, e.g. in a tooltip. */
+    renderInput?: (input: ReactElement) => ReactElement;
+    value: string;
+}
+/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
+declare const FilterSearchInput: import('react').ForwardRefExoticComponent<FilterSearchInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default FilterSearchInput;

package/dist/components/BitkitFilter/components/FilterSearchInput.js

@@ -0,0 +1,41 @@
+import IconMagnifier from "../../../icons/IconMagnifier.js";
+import BitkitCloseButton from "../../BitkitCloseButton/BitkitCloseButton.js";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitFilter/components/FilterSearchInput.tsx
+/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
+var FilterSearchInput = forwardRef((props, ref) => {
+	const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;
+	const { isMobile, styles } = useFilterContext();
+	return /* @__PURE__ */ jsxs(Box, {
+		css: [isMobile ? styles.mobileSearch : styles.search, css],
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(IconMagnifier, { size: isMobile ? "24" : "16" }),
+			renderInput(/* @__PURE__ */ jsx(chakra.input, {
+				"aria-description": description,
+				"aria-label": label,
+				css: isMobile ? styles.mobileSearchInput : styles.searchInput,
+				onChange: (event) => onValueChange(event.target.value),
+				placeholder,
+				ref,
+				type: "search",
+				value
+			})),
+			!!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
+				"aria-label": "Clear search",
+				colorVariant: "neutral",
+				onClick: () => onValueChange(""),
+				size: "sm"
+			})
+		]
+	});
+});
+FilterSearchInput.displayName = "FilterSearchInput";
+//#endregion
+export { FilterSearchInput as default };
+
+//# sourceMappingURL=FilterSearchInput.js.map

package/dist/components/BitkitFilter/components/FilterSearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSearchInput.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSearchInput.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\n// `chakra.input`: the filter's search fields are borderless rows from the filter recipe, unlike the\n// bordered BitkitSearchInput.\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { IconMagnifier } from '../../../icons';\nimport BitkitCloseButton from '../../BitkitCloseButton/BitkitCloseButton';\nimport { useFilterContext } from '../BitkitFilter.context';\n\nexport interface FilterSearchInputProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {\n  /** Extra hint read out with the field, e.g. what the search matches. */\n  description?: string;\n  label: string;\n  onValueChange: (value: string) => void;\n  placeholder: string;\n  /** Wraps the input, e.g. in a tooltip. */\n  renderInput?: (input: ReactElement) => ReactElement;\n  value: string;\n}\n\n/** The borderless search field of the bar — and, on mobile, of each filter's view too. */\nconst FilterSearchInput = forwardRef<HTMLInputElement, FilterSearchInputProps>((props, ref) => {\n  const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;\n  const { isMobile, styles } = useFilterContext();\n\n  return (\n    <Box css={[isMobile ? styles.mobileSearch : styles.search, css]} {...rest}>\n      <IconMagnifier size={isMobile ? '24' : '16'} />\n      {renderInput(\n        <chakra.input\n          aria-description={description}\n          aria-label={label}\n          css={isMobile ? styles.mobileSearchInput : styles.searchInput}\n          onChange={(event) => onValueChange(event.target.value)}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"search\"\n          value={value}\n        />,\n      )}\n      {!!value && (\n        <BitkitCloseButton\n          aria-label=\"Clear search\"\n          colorVariant=\"neutral\"\n          onClick={() => onValueChange('')}\n          size=\"sm\"\n        />\n      )}\n    </Box>\n  );\n});\n\nFilterSearchInput.displayName = 'FilterSearchInput';\n\nexport default FilterSearchInput;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,oBAAoB,YAAsD,OAAO,QAAQ;CAC7F,MAAM,EAAE,KAAK,aAAa,OAAO,eAAe,aAAa,eAAe,UAAU,OAAO,OAAO,GAAG,SAAS;CAChH,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAE9C,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,WAAW,OAAO,eAAe,OAAO,QAAQ,GAAG;EAAG,GAAI;EAArE,UAAA;GACE,oBAAC,eAAD,EAAe,MAAM,WAAW,OAAO,KAAO,CAAA;GAC7C,YACC,oBAAC,OAAO,OAAR;IACE,oBAAkB;IAClB,cAAY;IACZ,KAAK,WAAW,OAAO,oBAAoB,OAAO;IAClD,WAAW,UAAU,cAAc,MAAM,OAAO,KAAK;IACxC;IACR;IACL,MAAK;IACE;GACR,CAAA,CACH;GACC,CAAC,CAAC,SACD,oBAAC,mBAAD;IACE,cAAW;IACX,cAAa;IACb,eAAe,cAAc,EAAE;IAC/B,MAAK;GACN,CAAA;EAEA;;AAET,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts

@@ -0,0 +1,39 @@
+import { BitkitIconComponent } from '../../../icons';
+import { BitkitColorToken } from '../../../theme/themeUtils';
+export interface BitkitFilterSelectItem {
+    icon?: BitkitIconComponent;
+    /** Colors the icon, e.g. a status: `icon/positive` for "Passed". */
+    iconColor?: BitkitColorToken<'icon'>;
+    label: string;
+    value: string;
+}
+/** The list renders at most this many options; search narrows down the rest. */
+export declare const MAX_VISIBLE_ITEMS = 100;
+export interface FilterSelectFormProps {
+    /** The filter holds a value: the footer offers "Clear" instead of the wildcard-mode switch. */
+    isEditing: boolean;
+    /** Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. */
+    isOrderFixed?: boolean;
+    /** A value is always applied: no "Clear" in the footer. */
+    isRequired?: boolean;
+    items: BitkitFilterSelectItem[];
+    label: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    multiple?: boolean;
+    onApply: (value: string[]) => void;
+    onCancel: () => void;
+    onSearchChange?: (searchText: string) => void;
+    pattern?: boolean;
+    pluralLabel: string;
+    searchPlaceholder?: string;
+    /**
+     * The applied selection with its labels. Without a search, any of it missing from `items` — e.g.
+     * left behind by a server search — is listed first, so it can still be unchecked.
+     */
+    selectedItems?: BitkitFilterSelectItem[];
+    value: string[];
+}
+/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */
+declare const FilterSelectForm: (props: FilterSelectFormProps) => import('react').JSX.Element;
+export default FilterSelectForm;

package/dist/components/BitkitFilter/components/FilterSelectForm.js

@@ -0,0 +1,278 @@
+import IconCheck from "../../../icons/IconCheck.js";
+import BitkitCheckbox from "../../BitkitCheckbox/BitkitCheckbox.js";
+import BitkitCheckboxGroup from "../../BitkitCheckboxGroup/BitkitCheckboxGroup.js";
+import { compilePattern, isEqualFilterValue, isPattern, toRunningText } from "../BitkitFilter.utils.js";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { FilterPanelFooter, FilterPanelHeader } from "./FilterPanel.js";
+import FilterSearchInput from "./FilterSearchInput.js";
+import BitkitInlineLoading from "../../BitkitInlineLoading/BitkitInlineLoading.js";
+import BitkitList_default from "../../BitkitList/BitkitList.js";
+import BitkitTextInput from "../../BitkitTextInput/BitkitTextInput.js";
+import BitkitSearchInput from "../../BitkitSearchInput/BitkitSearchInput.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+import { createListCollection } from "@chakra-ui/react/collection";
+import { HStack } from "@chakra-ui/react/stack";
+import { Listbox } from "@chakra-ui/react/listbox";
+/** Below this many options the list is short enough to scan, so there is no search input. */
+var SEARCH_THRESHOLD = 5;
+/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */
+var FilterSelectForm = (props) => {
+	const { isEditing, isOrderFixed, isRequired, items, label, loading, loadingLabel = "Loading...", multiple, onApply, onCancel, onSearchChange, pattern, pluralLabel, searchPlaceholder = "Search for options", selectedItems = [], value } = props;
+	const { isMobile, styles } = useFilterContext();
+	const [draft, setDraft] = useState(value);
+	const [mode, setMode] = useState(pattern && value[0] && isPattern(value[0]) ? "pattern" : "list");
+	const [searchText, setSearchText] = useState("");
+	const [hasLoaded, setHasLoaded] = useState(!loading);
+	if (!loading && !hasLoaded) setHasLoaded(true);
+	const onSearchTextChange = (text) => {
+		setSearchText(text);
+		onSearchChange?.(text);
+	};
+	const matchingItems = useMemo(() => {
+		if (!searchText) {
+			if (isOrderFixed) return items;
+			return [...value.flatMap((selected) => {
+				return items.find((option) => option.value === selected) ?? selectedItems.find((option) => option.value === selected) ?? [];
+			}), ...items.filter((item) => !value.includes(item.value))];
+		}
+		if (onSearchChange) return items;
+		const query = searchText.toLowerCase();
+		return items.filter((item) => item.label.toLowerCase().includes(query));
+	}, [
+		isOrderFixed,
+		items,
+		onSearchChange,
+		searchText,
+		selectedItems,
+		value
+	]);
+	const visibleItems = matchingItems.slice(0, 100);
+	const isInitialLoading = !!loading && !hasLoaded;
+	const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);
+	const searchLabel = `Search ${toRunningText(pluralLabel)}`;
+	const showLimitHelper = matchingItems.length > 100;
+	const patternValue = draft[0] ?? "";
+	const isApplyDisabled = isEqualFilterValue(draft, value) || mode === "pattern" && !(patternValue && isPattern(patternValue)) || !!isRequired && !draft.length;
+	const bodyRef = useRef(null);
+	const hasSwitchedMode = useRef(false);
+	useEffect(() => {
+		if (!hasSwitchedMode.current) return;
+		bodyRef.current?.querySelector("input:not([type=hidden]), [role=listbox], input[type=checkbox]")?.focus();
+	}, [mode]);
+	let start;
+	if (isEditing && !isRequired) start = {
+		label: multiple && isMobile ? "Clear all" : "Clear",
+		onClick: () => onApply([])
+	};
+	else if (pattern && !isEditing) start = {
+		label: mode === "list" ? "Use wildcard pattern" : "Select from list",
+		onClick: () => {
+			hasSwitchedMode.current = true;
+			setMode(mode === "list" ? "pattern" : "list");
+			setDraft([]);
+		}
+	};
+	let list;
+	if (loading) list = /* @__PURE__ */ jsx(BitkitInlineLoading, {
+		css: styles.loading,
+		label: loadingLabel,
+		size: isMobile ? "lg" : "md"
+	});
+	else if (!visibleItems.length) list = /* @__PURE__ */ jsx(Text, {
+		css: styles.loading,
+		color: "text/secondary",
+		textStyle: isMobile ? "body/lg/regular" : "body/md/regular",
+		children: searchText ? "No result. Refine your search term." : "No options available."
+	});
+	else if (multiple && !isMobile) list = /* @__PURE__ */ jsxs(Box, {
+		css: styles.checkboxList,
+		children: [/* @__PURE__ */ jsx(BitkitCheckboxGroup, {
+			"aria-label": label,
+			onValueChange: setDraft,
+			size: "md",
+			value: draft,
+			children: visibleItems.map((item) => /* @__PURE__ */ jsx(BitkitCheckbox, {
+				labelText: item.icon ? /* @__PURE__ */ jsxs(HStack, {
+					gap: "4",
+					children: [/* @__PURE__ */ jsx(item.icon, {
+						color: item.iconColor,
+						size: "16"
+					}), item.label]
+				}) : item.label,
+				value: item.value
+			}, item.value))
+		}), showLimitHelper && /* @__PURE__ */ jsx(LimitHelper, { marginBlockStart: "16" })]
+	});
+	else list = /* @__PURE__ */ jsx(FilterListbox, {
+		items: visibleItems,
+		label,
+		multiple,
+		onValueChange: setDraft,
+		showLimitHelper,
+		value: draft
+	});
+	let search = null;
+	if (showSearch && isMobile) search = /* @__PURE__ */ jsx(FilterSearchInput, {
+		label: searchLabel,
+		onValueChange: onSearchTextChange,
+		placeholder: searchPlaceholder,
+		value: searchText
+	});
+	else if (showSearch) search = /* @__PURE__ */ jsx(Box, {
+		css: styles.popoverSearch,
+		children: /* @__PURE__ */ jsx(BitkitSearchInput, {
+			label: searchLabel,
+			onChange: onSearchTextChange,
+			placeholder: searchPlaceholder,
+			size: "md",
+			value: searchText
+		})
+	});
+	const body = /* @__PURE__ */ jsx(Box, {
+		css: styles.popoverBody,
+		ref: bodyRef,
+		children: mode === "pattern" ? /* @__PURE__ */ jsx(FilterPatternBody, {
+			items,
+			onValueChange: setDraft,
+			pluralLabel,
+			value: patternValue
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [search, list] })
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(FilterPanelHeader, {
+			count: multiple && mode === "list" ? draft.length : void 0,
+			title: multiple ? pluralLabel : label
+		}),
+		isMobile ? /* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			overflowY: "auto",
+			children: body
+		}) : body,
+		!isInitialLoading && /* @__PURE__ */ jsx(FilterPanelFooter, {
+			applyLabel: multiple && mode === "list" && draft.length ? `Apply (${draft.length})` : void 0,
+			isApplyDisabled,
+			onApply: () => onApply(mode === "pattern" ? [patternValue] : draft),
+			onCancel,
+			start
+		})
+	] });
+};
+var LimitHelper = ({ marginBlockStart }) => {
+	const { styles } = useFilterContext();
+	return /* @__PURE__ */ jsxs(Text, {
+		css: styles.listHelperText,
+		marginBlockStart,
+		children: [
+			"Showing the first ",
+			100,
+			" options. Search to find more."
+		]
+	});
+};
+/**
+* The option list for a single select, and on mobile for a multiple one too — there the rows are
+* full-width and highlighted when selected, with a checkbox drawn in front.
+*/
+var FilterListbox = ({ items, label, multiple, onValueChange, showLimitHelper, value }) => {
+	const { isMobile, styles } = useFilterContext();
+	const collection = useMemo(() => createListCollection({ items }), [items]);
+	const checkboxStyles = useSlotRecipe({ key: "checkbox" })({ size: "lg" });
+	const checkIndicator = /* @__PURE__ */ jsx(Listbox.ItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, { size: "16" }) });
+	return /* @__PURE__ */ jsxs(Listbox.Root, {
+		collection,
+		onValueChange: (details) => onValueChange(details.value),
+		selectionMode: multiple ? "multiple" : "single",
+		size: isMobile ? "lg" : "md",
+		value,
+		children: [/* @__PURE__ */ jsx(Listbox.Label, {
+			srOnly: true,
+			children: label
+		}), /* @__PURE__ */ jsxs(Listbox.Content, { children: [items.map((item) => {
+			const state = value.includes(item.value) ? "checked" : "unchecked";
+			const check = multiple ? /* @__PURE__ */ jsx(Box, {
+				"aria-hidden": true,
+				css: [checkboxStyles.control, styles.mobileListCheckbox],
+				"data-state": state,
+				children: /* @__PURE__ */ jsx(IconCheck, {})
+			}) : /* @__PURE__ */ jsx(Box, {
+				"aria-hidden": true,
+				css: styles.mobileListCheck,
+				"data-state": state,
+				children: /* @__PURE__ */ jsx(IconCheck, { size: "16" })
+			});
+			return /* @__PURE__ */ jsxs(Listbox.Item, {
+				item,
+				children: [
+					isMobile && check,
+					!!item.icon && /* @__PURE__ */ jsx(item.icon, {
+						color: item.iconColor,
+						size: isMobile ? "24" : "16"
+					}),
+					/* @__PURE__ */ jsx(Listbox.ItemText, { children: item.label }),
+					!isMobile && checkIndicator
+				]
+			}, item.value);
+		}), showLimitHelper && /* @__PURE__ */ jsx(Box, {
+			paddingBlockStart: "8",
+			paddingInline: "24",
+			children: /* @__PURE__ */ jsx(LimitHelper, {})
+		})] })]
+	});
+};
+var FilterPatternBody = ({ items, onValueChange, pluralLabel, value }) => {
+	const { isMobile, styles } = useFilterContext();
+	const noun = toRunningText(pluralLabel);
+	const matches = useMemo(() => {
+		if (!isPattern(value)) return null;
+		const regExp = compilePattern(value);
+		return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));
+	}, [items, value]);
+	let results;
+	if (!matches) results = /* @__PURE__ */ jsxs(Text, {
+		color: "text/secondary",
+		textStyle: "body/md/regular",
+		children: [
+			"Enter a pattern with the wildcard ‘*’ to view ",
+			noun,
+			" with matching names."
+		]
+	});
+	else if (!matches.length) results = /* @__PURE__ */ jsxs(Text, {
+		color: "text/tertiary",
+		textStyle: "body/md/regular",
+		children: [
+			"(no matching ",
+			noun,
+			")"
+		]
+	});
+	else results = /* @__PURE__ */ jsx(BitkitList_default, {
+		size: "md",
+		children: matches.map((item) => /* @__PURE__ */ jsx(BitkitList_default.Item, { children: item.label }, item.value))
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		css: styles.pattern,
+		children: [/* @__PURE__ */ jsx(BitkitTextInput, {
+			helperText: "Allowed wildcard character: *",
+			label: "Wildcard pattern",
+			onValueChange: (text) => onValueChange(text ? [text] : []),
+			placeholder: "(e.g. *main*, release-*)",
+			size: isMobile ? "lg" : "md",
+			value
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.patternResults,
+			children: [/* @__PURE__ */ jsxs(Text, {
+				css: styles.patternResultsLabel,
+				children: ["Matching results", matches?.length ? ` (${matches.length})` : ""]
+			}), results]
+		})]
+	});
+};
+//#endregion
+export { FilterSelectForm as default };
+
+//# sourceMappingURL=FilterSelectForm.js.map

package/dist/components/BitkitFilter/components/FilterSelectForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSelectForm.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSelectForm.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Listbox } from '@chakra-ui/react/listbox';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../../icons';\nimport { type BitkitColorToken } from '../../../theme/themeUtils';\nimport BitkitCheckbox from '../../BitkitCheckbox/BitkitCheckbox';\nimport BitkitCheckboxGroup from '../../BitkitCheckboxGroup/BitkitCheckboxGroup';\nimport BitkitInlineLoading from '../../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitList from '../../BitkitList/BitkitList';\nimport BitkitSearchInput from '../../BitkitSearchInput/BitkitSearchInput';\nimport BitkitTextInput from '../../BitkitTextInput/BitkitTextInput';\nimport { useFilterContext } from '../BitkitFilter.context';\nimport { compilePattern, isEqualFilterValue, isPattern, toRunningText } from '../BitkitFilter.utils';\nimport { FilterPanelFooter, FilterPanelHeader } from './FilterPanel';\nimport FilterSearchInput from './FilterSearchInput';\n\nexport interface BitkitFilterSelectItem {\n  icon?: BitkitIconComponent;\n  /** Colors the icon, e.g. a status: `icon/positive` for \"Passed\". */\n  iconColor?: BitkitColorToken<'icon'>;\n  label: string;\n  value: string;\n}\n\n/** The list renders at most this many options; search narrows down the rest. */\nexport const MAX_VISIBLE_ITEMS = 100;\n\n/** Below this many options the list is short enough to scan, so there is no search input. */\nconst SEARCH_THRESHOLD = 5;\n\nexport interface FilterSelectFormProps {\n  /** The filter holds a value: the footer offers \"Clear\" instead of the wildcard-mode switch. */\n  isEditing: boolean;\n  /** Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. */\n  isOrderFixed?: boolean;\n  /** A value is always applied: no \"Clear\" in the footer. */\n  isRequired?: boolean;\n  items: BitkitFilterSelectItem[];\n  label: string;\n  loading?: boolean;\n  loadingLabel?: string;\n  multiple?: boolean;\n  onApply: (value: string[]) => void;\n  onCancel: () => void;\n  onSearchChange?: (searchText: string) => void;\n  pattern?: boolean;\n  pluralLabel: string;\n  searchPlaceholder?: string;\n  /**\n   * The applied selection with its labels. Without a search, any of it missing from `items` — e.g.\n   * left behind by a server search — is listed first, so it can still be unchecked.\n   */\n  selectedItems?: BitkitFilterSelectItem[];\n  value: string[];\n}\n\n/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */\nconst FilterSelectForm = (props: FilterSelectFormProps) => {\n  const {\n    isEditing,\n    isOrderFixed,\n    isRequired,\n    items,\n    label,\n    loading,\n    loadingLabel = 'Loading...',\n    multiple,\n    onApply,\n    onCancel,\n    onSearchChange,\n    pattern,\n    pluralLabel,\n    searchPlaceholder = 'Search for options',\n    selectedItems = [],\n    value,\n  } = props;\n  const { isMobile, styles } = useFilterContext();\n\n  const [draft, setDraft] = useState(value);\n  const [mode, setMode] = useState<'list' | 'pattern'>(pattern && value[0] && isPattern(value[0]) ? 'pattern' : 'list');\n  const [searchText, setSearchText] = useState('');\n  // Set once the options have loaded, so a later reload (a search, or clearing it) keeps the search and footer.\n  const [hasLoaded, setHasLoaded] = useState(!loading);\n  if (!loading && !hasLoaded) setHasLoaded(true);\n\n  const onSearchTextChange = (text: string) => {\n    setSearchText(text);\n    onSearchChange?.(text);\n  };\n\n  // With `onSearchChange` the consumer filters `items` itself, e.g. on the server. Without a search,\n  // the applied options come first. `value` doesn't change while the panel is open, so the order is\n  // set when it opens and rows don't jump as options are (un)checked.\n  const matchingItems = useMemo(() => {\n    if (!searchText) {\n      if (isOrderFixed) return items;\n      const applied = value.flatMap((selected) => {\n        const item = items.find((option) => option.value === selected);\n        return item ?? selectedItems.find((option) => option.value === selected) ?? [];\n      });\n      return [...applied, ...items.filter((item) => !value.includes(item.value))];\n    }\n    if (onSearchChange) return items;\n    const query = searchText.toLowerCase();\n    return items.filter((item) => item.label.toLowerCase().includes(query));\n  }, [isOrderFixed, items, onSearchChange, searchText, selectedItems, value]);\n\n  const visibleItems = matchingItems.slice(0, MAX_VISIBLE_ITEMS);\n  // The first load shows only the title and a loading row; later loads keep the input and footer in place.\n  const isInitialLoading = !!loading && !hasLoaded;\n  const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);\n  const searchLabel = `Search ${toRunningText(pluralLabel)}`;\n  const showLimitHelper = matchingItems.length > MAX_VISIBLE_ITEMS;\n\n  const patternValue = draft[0] ?? '';\n  const isApplyDisabled =\n    isEqualFilterValue(draft, value) ||\n    (mode === 'pattern' && !(patternValue && isPattern(patternValue))) ||\n    (!!isRequired && !draft.length);\n\n  // Switching between the list and the pattern moves focus into the new view, so typing goes there.\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const hasSwitchedMode = useRef(false);\n  useEffect(() => {\n    if (!hasSwitchedMode.current) return;\n    bodyRef.current\n      ?.querySelector<HTMLElement>('input:not([type=hidden]), [role=listbox], input[type=checkbox]')\n      ?.focus();\n  }, [mode]);\n\n  let start;\n  if (isEditing && !isRequired) {\n    start = { label: multiple && isMobile ? 'Clear all' : 'Clear', onClick: () => onApply([]) };\n  } else if (pattern && !isEditing) {\n    start = {\n      label: mode === 'list' ? 'Use wildcard pattern' : 'Select from list',\n      onClick: () => {\n        hasSwitchedMode.current = true;\n        setMode(mode === 'list' ? 'pattern' : 'list');\n        setDraft([]);\n      },\n    };\n  }\n\n  let list;\n  if (loading) {\n    list = <BitkitInlineLoading css={styles.loading} label={loadingLabel} size={isMobile ? 'lg' : 'md'} />;\n  } else if (!visibleItems.length) {\n    list = (\n      <Text css={styles.loading} color=\"text/secondary\" textStyle={isMobile ? 'body/lg/regular' : 'body/md/regular'}>\n        {searchText ? 'No result. Refine your search term.' : 'No options available.'}\n      </Text>\n    );\n  } else if (multiple && !isMobile) {\n    list = (\n      <Box css={styles.checkboxList}>\n        <BitkitCheckboxGroup aria-label={label} onValueChange={setDraft} size=\"md\" value={draft}>\n          {visibleItems.map((item) => (\n            <BitkitCheckbox\n              key={item.value}\n              labelText={\n                item.icon ? (\n                  <HStack gap=\"4\">\n                    <item.icon color={item.iconColor} size=\"16\" />\n                    {item.label}\n                  </HStack>\n                ) : (\n                  item.label\n                )\n              }\n              value={item.value}\n            />\n          ))}\n        </BitkitCheckboxGroup>\n        {showLimitHelper && <LimitHelper marginBlockStart=\"16\" />}\n      </Box>\n    );\n  } else {\n    list = (\n      <FilterListbox\n        items={visibleItems}\n        label={label}\n        multiple={multiple}\n        onValueChange={setDraft}\n        showLimitHelper={showLimitHelper}\n        value={draft}\n      />\n    );\n  }\n\n  let search = null;\n  if (showSearch && isMobile) {\n    search = (\n      <FilterSearchInput\n        label={searchLabel}\n        onValueChange={onSearchTextChange}\n        placeholder={searchPlaceholder}\n        value={searchText}\n      />\n    );\n  } else if (showSearch) {\n    search = (\n      <Box css={styles.popoverSearch}>\n        <BitkitSearchInput\n          label={searchLabel}\n          onChange={onSearchTextChange}\n          placeholder={searchPlaceholder}\n          size=\"md\"\n          value={searchText}\n        />\n      </Box>\n    );\n  }\n\n  const body = (\n    <Box css={styles.popoverBody} ref={bodyRef}>\n      {mode === 'pattern' ? (\n        <FilterPatternBody items={items} onValueChange={setDraft} pluralLabel={pluralLabel} value={patternValue} />\n      ) : (\n        <>\n          {search}\n          {list}\n        </>\n      )}\n    </Box>\n  );\n\n  return (\n    <>\n      <FilterPanelHeader\n        count={multiple && mode === 'list' ? draft.length : undefined}\n        title={multiple ? pluralLabel : label}\n      />\n      {isMobile ? (\n        <Box flex=\"1\" overflowY=\"auto\">\n          {body}\n        </Box>\n      ) : (\n        body\n      )}\n      {!isInitialLoading && (\n        <FilterPanelFooter\n          applyLabel={multiple && mode === 'list' && draft.length ? `Apply (${draft.length})` : undefined}\n          isApplyDisabled={isApplyDisabled}\n          onApply={() => onApply(mode === 'pattern' ? [patternValue] : draft)}\n          onCancel={onCancel}\n          start={start}\n        />\n      )}\n    </>\n  );\n};\n\nconst LimitHelper = ({ marginBlockStart }: { marginBlockStart?: '16' }) => {\n  const { styles } = useFilterContext();\n\n  return (\n    <Text css={styles.listHelperText} marginBlockStart={marginBlockStart}>\n      Showing the first {MAX_VISIBLE_ITEMS} options. Search to find more.\n    </Text>\n  );\n};\n\ninterface FilterListboxProps {\n  items: BitkitFilterSelectItem[];\n  label: string;\n  multiple?: boolean;\n  onValueChange: (value: string[]) => void;\n  showLimitHelper: boolean;\n  value: string[];\n}\n\n/**\n * The option list for a single select, and on mobile for a multiple one too — there the rows are\n * full-width and highlighted when selected, with a checkbox drawn in front.\n */\nconst FilterListbox = ({ items, label, multiple, onValueChange, showLimitHelper, value }: FilterListboxProps) => {\n  const { isMobile, styles } = useFilterContext();\n  const collection = useMemo(() => createListCollection({ items }), [items]);\n  const checkboxStyles = useSlotRecipe({ key: 'checkbox' })({ size: 'lg' });\n\n  const checkIndicator = (\n    <Listbox.ItemIndicator>\n      <IconCheck size=\"16\" />\n    </Listbox.ItemIndicator>\n  );\n\n  return (\n    <Listbox.Root\n      collection={collection}\n      onValueChange={(details) => onValueChange(details.value)}\n      selectionMode={multiple ? 'multiple' : 'single'}\n      size={isMobile ? 'lg' : 'md'}\n      value={value}\n    >\n      {/* Zag points the content's aria-labelledby at the label, so it has to exist. */}\n      <Listbox.Label srOnly>{label}</Listbox.Label>\n      <Listbox.Content>\n        {items.map((item) => {\n          const state = value.includes(item.value) ? 'checked' : 'unchecked';\n          const check = multiple ? (\n            // Drawn, not a real checkbox: the option row is the control, and a nested input would be a second one.\n            <Box aria-hidden css={[checkboxStyles.control, styles.mobileListCheckbox]} data-state={state}>\n              <IconCheck />\n            </Box>\n          ) : (\n            <Box aria-hidden css={styles.mobileListCheck} data-state={state}>\n              <IconCheck size=\"16\" />\n            </Box>\n          );\n          return (\n            <Listbox.Item item={item} key={item.value}>\n              {isMobile && check}\n              {!!item.icon && <item.icon color={item.iconColor} size={isMobile ? '24' : '16'} />}\n              <Listbox.ItemText>{item.label}</Listbox.ItemText>\n              {!isMobile && checkIndicator}\n            </Listbox.Item>\n          );\n        })}\n        {showLimitHelper && (\n          <Box paddingBlockStart=\"8\" paddingInline=\"24\">\n            <LimitHelper />\n          </Box>\n        )}\n      </Listbox.Content>\n    </Listbox.Root>\n  );\n};\n\ninterface FilterPatternBodyProps {\n  items: BitkitFilterSelectItem[];\n  onValueChange: (value: string[]) => void;\n  pluralLabel: string;\n  value: string;\n}\n\nconst FilterPatternBody = ({ items, onValueChange, pluralLabel, value }: FilterPatternBodyProps) => {\n  const { isMobile, styles } = useFilterContext();\n  const noun = toRunningText(pluralLabel);\n  const matches = useMemo(() => {\n    if (!isPattern(value)) return null;\n    const regExp = compilePattern(value);\n    return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));\n  }, [items, value]);\n\n  let results;\n  if (!matches) {\n    results = (\n      <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n        Enter a pattern with the wildcard &lsquo;*&rsquo; to view {noun} with matching names.\n      </Text>\n    );\n  } else if (!matches.length) {\n    results = (\n      <Text color=\"text/tertiary\" textStyle=\"body/md/regular\">\n        (no matching {noun})\n      </Text>\n    );\n  } else {\n    results = (\n      <BitkitList size=\"md\">\n        {matches.map((item) => (\n          <BitkitList.Item key={item.value}>{item.label}</BitkitList.Item>\n        ))}\n      </BitkitList>\n    );\n  }\n\n  return (\n    <Box css={styles.pattern}>\n      <BitkitTextInput\n        helperText=\"Allowed wildcard character: *\"\n        label=\"Wildcard pattern\"\n        onValueChange={(text) => onValueChange(text ? [text] : [])}\n        placeholder=\"(e.g. *main*, release-*)\"\n        size={isMobile ? 'lg' : 'md'}\n        value={value}\n      />\n      <Box css={styles.patternResults}>\n        <Text css={styles.patternResultsLabel}>Matching results{matches?.length ? ` (${matches.length})` : ''}</Text>\n        {results}\n      </Box>\n    </Box>\n  );\n};\n\nexport default FilterSelectForm;\n"],"mappings":"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"}

package/dist/components/BitkitMarkdown/BitkitMarkdown.js

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

package/dist/components/BitkitNoteCard/BitkitNoteCard.js

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

package/dist/components/index.d.ts

@@ -28,6 +28,12 @@ export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './Bitki
 export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from './BitkitExpandableCard/BitkitExpandableCard';
 export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
 export { default as BitkitFileInput, type BitkitFileInputProps } from './BitkitFileInput/BitkitFileInput';
+export { default as BitkitFilter, type BitkitFilterProps } from './BitkitFilter/BitkitFilter';
+export { type BitkitFilterAddProps } from './BitkitFilter/BitkitFilterAdd';
+export { type BitkitFilterDateRangeProps, type BitkitFilterDateRangeValue } from './BitkitFilter/BitkitFilterDateRange';
+export { type BitkitFilterSearchProps } from './BitkitFilter/BitkitFilterSearch';
+export { type BitkitFilterSelectItem, type BitkitFilterSelectProps } from './BitkitFilter/BitkitFilterSelect';
+export { type BitkitFilterSwitchItem, type BitkitFilterSwitchProps } from './BitkitFilter/BitkitFilterSwitch';
 export { default as BitkitGroupHeading, type BitkitGroupHeadingProps } from './BitkitGroupHeading/BitkitGroupHeading';
 export { default as BitkitHeading, type BitkitHeadingProps } from './BitkitHeading/BitkitHeading';
 export { default as BitkitIconButton, type BitkitIconButtonProps } from './BitkitIconButton/BitkitIconButton';

package/dist/main.js

@@ -306,8 +306,8 @@ import BitkitBadge from "./components/BitkitBadge/BitkitBadge.js";
 import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
 import BitkitBreadcrumb from "./components/BitkitBreadcrumb/BitkitBreadcrumb.js";
 import BitkitButton from "./components/BitkitButton/BitkitButton.js";
-import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitTooltip from "./components/BitkitTooltip/BitkitTooltip.js";
+import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitSelectMenuAction from "./components/BitkitSelectMenu/BitkitSelectMenuAction.js";
 import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitCalendar from "./components/BitkitCalendar/BitkitCalendar.js";
@@ -332,14 +332,18 @@ import BitkitDrawer from "./components/BitkitDrawer/BitkitDrawer.js";
 import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js";
 import BitkitExpandableCard from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
 import BitkitFileInput from "./components/BitkitFileInput/BitkitFileInput.js";
+import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
+import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
+import BitkitList_default from "./components/BitkitList/BitkitList.js";
+import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
+import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
+import BitkitFilter_default from "./components/BitkitFilter/BitkitFilter.js";
 import BitkitHeading from "./components/BitkitHeading/BitkitHeading.js";
 import BitkitIconButton from "./components/BitkitIconButton/BitkitIconButton.js";
-import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
 import BitkitLabeledData from "./components/BitkitLabeledData/BitkitLabeledData.js";
 import BitkitLightbox from "./components/BitkitLightbox/BitkitLightbox.js";
 import BitkitLink from "./components/BitkitLink/BitkitLink.js";
 import BitkitLinkButton from "./components/BitkitLinkButton/BitkitLinkButton.js";
-import BitkitList_default from "./components/BitkitList/BitkitList.js";
 import BitkitMarkdown from "./components/BitkitMarkdown/BitkitMarkdown.js";
 import BitkitMarkdownCard from "./components/BitkitMarkdownCard/BitkitMarkdownCard.js";
 import BitkitMultiselectMenu from "./components/BitkitMultiselectMenu/BitkitMultiselectMenu.js";
@@ -361,8 +365,6 @@ import BitkitPromoBanner from "./components/BitkitPromoBanner/BitkitPromoBanner.
 import BitkitRadio from "./components/BitkitRadio/BitkitRadio.js";
 import BitkitRadioGroup from "./components/BitkitRadioGroup/BitkitRadioGroup.js";
 import BitkitRibbon from "./components/BitkitRibbon/BitkitRibbon.js";
-import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
-import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
 import BitkitSectionHeading from "./components/BitkitSectionHeading/BitkitSectionHeading.js";
 import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/BitkitSegmentedControl.js";
 import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
@@ -383,10 +385,9 @@ import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/
 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 { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
 import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
 import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as 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, 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, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, 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, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, 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, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, 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, IconPin, 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, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as 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, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, 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, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, 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, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, 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, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, 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, IconPin, 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, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };

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

@@ -30,10 +30,25 @@ declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
     device: {
         mobile: {
             content: {
+                minWidth: number;
                 boxShadow: "none";
                 paddingBlock: "16";
                 paddingInline: "16";
             };
+            view: {
+                gap: "16";
+            };
+            tableHeader: {
+                height: "40";
+                maxWidth: "none";
+                minWidth: number;
+                textStyle: "body/lg/regular";
+                width: "auto";
+            };
+            tableCellTrigger: {
+                height: "40";
+                textStyle: "body/lg/regular";
+            };
         };
     };
 }>;