@bitrise/bitkit-v2 0.3.481-beta.3103 → 0.3.481-beta.3107

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

@@ -0,0 +1,652 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/Filter.recipe.ts
+var chipButton = {
+	alignItems: "center",
+	alignSelf: "stretch",
+	display: "flex",
+	_hover: {
+		background: "background/hover",
+		_active: { background: "background/active" }
+	},
+	_active: { background: "background/active" },
+	_disabled: {
+		cursor: "not-allowed",
+		"& :is(span, svg)": { color: "text/disabled" },
+		_hover: { background: "transparent" }
+	}
+};
+var wrapperFocusRing = {
+	outlineColor: "var(--focus-ring-color)",
+	outlineOffset: "var(--focus-ring-offset)",
+	outlineStyle: "var(--focus-ring-style)",
+	outlineWidth: "var(--focus-ring-width)"
+};
+var switchItemDisabled = {
+	color: "text/disabled",
+	cursor: "not-allowed",
+	"& svg": { color: "icon/disabled" },
+	_hover: {
+		background: "transparent",
+		color: "text/disabled",
+		_active: { background: "transparent" }
+	},
+	_active: { background: "transparent" },
+	_checked: {
+		_hover: {
+			background: "background/primary",
+			_active: { background: "background/primary" }
+		},
+		_active: { background: "background/primary" }
+	}
+};
+var filterSlotRecipe = defineSlotRecipe({
+	className: "filter",
+	slots: [
+		"root",
+		"content",
+		"filters",
+		"icon",
+		"items",
+		"searchBlock",
+		"search",
+		"searchInput",
+		"switch",
+		"switchItem",
+		"switchItemText",
+		"chip",
+		"chipTrigger",
+		"chipLabel",
+		"chipValue",
+		"chipIcon",
+		"chipChevron",
+		"chipRemove",
+		"popoverContent",
+		"addMenu",
+		"addMenuItem",
+		"addMenuLabel",
+		"addMenuIcon",
+		"addSheetBackdrop",
+		"addSheetPositioner",
+		"addSheet",
+		"addSheetItem",
+		"addSheetItemReason",
+		"calendarFooter",
+		"popoverSearch",
+		"popoverBody",
+		"popoverFooter",
+		"popoverFooterStart",
+		"checkboxList",
+		"listHelperText",
+		"loading",
+		"pattern",
+		"patternResults",
+		"patternResultsLabel",
+		"mobileBar",
+		"mobileTrigger",
+		"mobileSearch",
+		"mobileSearchInput",
+		"mobileHeader",
+		"mobileTitle",
+		"mobilePanelHeader",
+		"mobilePanelOverline",
+		"mobilePanelTitle",
+		"mobileBody",
+		"mobileFooter",
+		"mobileListCheck",
+		"mobileListCheckbox",
+		"field",
+		"fieldLabel",
+		"fieldControl",
+		"fieldTrigger",
+		"fieldIcon",
+		"fieldValue",
+		"fieldChevron",
+		"fieldRemove"
+	],
+	base: {
+		root: {
+			background: "background/primary",
+			display: "flex",
+			justifyContent: "center"
+		},
+		content: {
+			alignItems: "flex-start",
+			display: "flex",
+			flex: "1",
+			gap: "16",
+			minWidth: 0
+		},
+		filters: {
+			alignItems: "flex-start",
+			display: "flex",
+			flex: "1",
+			gap: "12",
+			minWidth: 0
+		},
+		icon: {
+			color: "icon/tertiary",
+			display: "flex",
+			flexShrink: 0,
+			padding: "4"
+		},
+		items: {
+			alignItems: "center",
+			display: "flex",
+			flex: "1",
+			flexWrap: "wrap",
+			gap: "12",
+			minWidth: 0
+		},
+		searchBlock: {
+			alignSelf: "stretch",
+			borderColor: "border/minimal",
+			borderInlineStartWidth: "1",
+			display: "flex",
+			flexShrink: 0,
+			paddingInlineStart: "16"
+		},
+		search: {
+			alignItems: "center",
+			background: "background/primary",
+			borderRadius: "4",
+			cursor: "text",
+			color: "icon/tertiary",
+			display: "flex",
+			gap: "8",
+			height: "32",
+			paddingInline: "8",
+			width: rem(148),
+			_hover: { background: "background/secondary" },
+			"&:has(input:focus-visible)": wrapperFocusRing
+		},
+		searchInput: {
+			background: "transparent",
+			color: "input/text/inputValue",
+			flex: "1",
+			minWidth: 0,
+			outline: "none",
+			textStyle: "body/md/regular",
+			_placeholder: { color: "input/text/placeholder" },
+			"&::-webkit-search-cancel-button": { appearance: "none" }
+		},
+		switch: {
+			background: "background/secondary",
+			borderRadius: "4",
+			display: "inline-flex",
+			flexShrink: 0,
+			position: "relative"
+		},
+		switchItem: {
+			alignItems: "center",
+			borderRadius: "4",
+			color: "text/secondary",
+			cursor: "pointer",
+			display: "flex",
+			gap: "4",
+			height: "32",
+			paddingInline: "8",
+			position: "relative",
+			textStyle: "body/md/regular",
+			whiteSpace: "nowrap",
+			"& svg:not([data-own-color])": { color: "icon/tertiary" },
+			_after: {
+				background: "border/regular",
+				content: "\"\"",
+				height: "16",
+				insetInlineEnd: 0,
+				position: "absolute",
+				top: "8",
+				width: "1"
+			},
+			"&:last-of-type, &[data-state=checked], &:hover, &:has(+ [data-state=checked]), &:has(+ :hover)": { _after: { display: "none" } },
+			"&:has(input:focus-visible)": wrapperFocusRing,
+			_hover: {
+				background: "background/hover",
+				color: "text/primary",
+				"& svg:not([data-own-color])": { color: "icon/secondary" },
+				_active: { background: "background/active" }
+			},
+			_active: {
+				background: "background/active",
+				color: "text/primary"
+			},
+			_checked: {
+				background: "background/primary",
+				boxShadow: "inset 0 0 0 1px var(--colors-border\\/strong)",
+				color: "text/primary",
+				"& svg:not([data-own-color])": { color: "icon/secondary" },
+				_hover: { background: "background/primary" }
+			},
+			_disabled: switchItemDisabled,
+			_readOnly: switchItemDisabled
+		},
+		switchItemText: { paddingInline: "4" },
+		chip: {
+			alignItems: "center",
+			background: "background/primary",
+			borderColor: "border/strong",
+			borderRadius: "4",
+			borderWidth: "1",
+			display: "inline-flex",
+			height: "32",
+			maxWidth: rem(320),
+			minWidth: 0,
+			overflow: "hidden",
+			textStyle: "body/md/regular",
+			"&:has(button:is(:disabled, [aria-disabled=true]))": { borderColor: "border/disabled" },
+			"&:has([aria-expanded=true])": {
+				boxShadow: "0 0 0 0.125rem var(--focus-ring-color)",
+				"& button, & button:hover": { background: "background/primary" }
+			},
+			"& [data-scope=date-picker]:is([data-part=root], [data-part=control])": {
+				alignSelf: "stretch",
+				flex: "1",
+				minWidth: 0
+			}
+		},
+		chipTrigger: {
+			...chipButton,
+			flex: "1",
+			gap: "4",
+			minWidth: 0,
+			paddingInlineEnd: "8",
+			paddingInlineStart: "12",
+			whiteSpace: "nowrap",
+			"&:has([data-chip-icon])": { paddingInlineStart: "8" },
+			"&:is(:hover, :active) [data-chip-icon]": { color: "icon/secondary" }
+		},
+		chipLabel: {
+			color: "text/secondary",
+			flexShrink: 0
+		},
+		chipValue: {
+			color: "text/body",
+			minWidth: 0,
+			truncate: true
+		},
+		chipIcon: {
+			color: "icon/tertiary",
+			flexShrink: 0,
+			marginInlineEnd: "4"
+		},
+		chipChevron: {
+			color: "icon/primary",
+			flexShrink: 0,
+			marginInlineStart: "8"
+		},
+		chipRemove: {
+			...chipButton,
+			color: "icon/primary",
+			flexShrink: 0,
+			paddingInlineEnd: "8",
+			paddingInlineStart: "4"
+		},
+		popoverContent: {
+			maxHeight: "min(60vh, var(--available-height, 60vh))",
+			maxWidth: rem(800),
+			minWidth: "max(var(--reference-width, 0px), 20rem)",
+			width: "max-content",
+			"&:has([data-filter-pattern])": { width: rem(480) },
+			"& [data-scope=listbox][data-part=content]": { paddingBlockEnd: 0 }
+		},
+		addMenu: {
+			background: "background/primary",
+			borderRadius: "8",
+			boxShadow: "elevation/lg",
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: "var(--available-height)",
+			outline: "none",
+			overflowY: "auto",
+			paddingBlock: "8",
+			width: rem(240),
+			zIndex: "popover"
+		},
+		addMenuItem: {
+			alignItems: "center",
+			color: "text/body",
+			cursor: "pointer",
+			display: "flex",
+			gap: "4",
+			minHeight: "40",
+			paddingBlock: "8",
+			paddingInline: "16",
+			textStyle: "body/md/regular",
+			userSelect: "none",
+			_highlighted: {
+				background: "background/hover",
+				_active: { background: "background/active" }
+			},
+			_active: { background: "background/active" },
+			_disabled: {
+				color: "text/disabled",
+				cursor: "not-allowed",
+				_highlighted: { background: "transparent" },
+				"&[data-not-applicable]": {
+					color: "text/tertiary",
+					_highlighted: { background: "background/hover" }
+				}
+			},
+			"&:not([data-highlighted]) [data-add-chevron]": { visibility: "hidden" }
+		},
+		addMenuLabel: {
+			color: "text/tertiary",
+			paddingBlock: "8",
+			paddingInline: "16",
+			textStyle: "heading/h6"
+		},
+		addMenuIcon: {
+			color: "icon/tertiary",
+			flexShrink: 0,
+			marginInlineStart: "auto"
+		},
+		addSheetBackdrop: {
+			background: "utilities/overlay-light",
+			inset: 0,
+			position: "fixed",
+			zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))"
+		},
+		addSheetPositioner: {
+			alignItems: "flex-end",
+			display: "flex",
+			inset: 0,
+			justifyContent: "stretch",
+			padding: "16",
+			position: "fixed",
+			zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
+		},
+		addSheet: {
+			background: "background/primary",
+			borderRadius: "8",
+			boxShadow: "elevation/lg",
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			maxHeight: "80dvh",
+			outline: "none",
+			overflowY: "auto",
+			paddingBlock: "8"
+		},
+		addSheetItem: {
+			...chipButton,
+			alignSelf: "auto",
+			color: "text/body",
+			gap: "12",
+			minHeight: "48",
+			paddingBlock: "8",
+			paddingInline: "16",
+			textAlign: "start",
+			textStyle: "body/lg/regular",
+			_disabled: {
+				color: "text/disabled",
+				cursor: "not-allowed",
+				_hover: { background: "transparent" },
+				"&[data-not-applicable]": {
+					color: "text/tertiary",
+					"& :is(span, svg)": { color: "text/tertiary" }
+				}
+			}
+		},
+		addSheetItemReason: {
+			color: "text/tertiary",
+			textStyle: "body/sm/regular"
+		},
+		calendarFooter: {
+			alignItems: "center",
+			display: "flex",
+			gap: "8",
+			marginBlockStart: "24"
+		},
+		popoverSearch: {
+			flexShrink: 0,
+			paddingBlockEnd: "8",
+			paddingBlockStart: "8",
+			paddingInline: "12"
+		},
+		popoverBody: {
+			display: "flex",
+			flexDirection: "column",
+			minHeight: 0,
+			"& > *, & [data-scope=listbox]:is([data-part=root], [data-part=content])": { minHeight: 0 },
+			"& [data-scope=listbox][data-part=root]": {
+				display: "flex",
+				flexDirection: "column"
+			}
+		},
+		popoverFooter: {
+			alignItems: "center",
+			display: "flex",
+			gap: "8",
+			paddingBlockEnd: "16",
+			paddingBlockStart: "24",
+			paddingInline: "16"
+		},
+		popoverFooterStart: { flex: "1" },
+		checkboxList: {
+			maxHeight: rem(200),
+			overflowY: "auto",
+			paddingBlockEnd: "1",
+			paddingBlockStart: "8",
+			paddingInline: "20",
+			"& [data-option-icon]": { color: "icon/secondary" },
+			"& [data-scope=checkbox][data-part=root]:hover [data-option-icon]": { color: "icon/primary" },
+			"& [data-scope=checkbox][data-part=root][data-state=checked] [data-option-icon]": { color: "icon/interactive" }
+		},
+		listHelperText: {
+			color: "text/secondary",
+			textStyle: "body/sm/regular"
+		},
+		loading: {
+			paddingBlock: "8",
+			paddingInline: "16"
+		},
+		pattern: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "24",
+			paddingBlockStart: "8",
+			paddingInline: "16"
+		},
+		patternResults: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "8",
+			maxHeight: rem(176),
+			minHeight: 0,
+			overflowY: "auto"
+		},
+		patternResultsLabel: {
+			color: "text/primary",
+			textStyle: "comp/input/label"
+		},
+		mobileBar: {
+			alignItems: "center",
+			borderBlockEndWidth: "1",
+			borderColor: "border/minimal",
+			display: "flex",
+			gap: "12",
+			justifyContent: "space-between",
+			padding: "16"
+		},
+		mobileTrigger: {
+			...chipButton,
+			alignSelf: "auto",
+			background: "background/primary",
+			borderColor: "border/strong",
+			borderRadius: "4",
+			borderWidth: "1",
+			color: "text/primary",
+			gap: "8",
+			height: "32",
+			paddingInline: "8",
+			textStyle: "comp/button/sm",
+			_icon: { color: "icon/primary" },
+			_disabled: {
+				borderColor: "border/disabled",
+				color: "text/disabled",
+				_icon: { color: "icon/disabled" }
+			}
+		},
+		mobileSearch: {
+			alignItems: "center",
+			borderBlockEndWidth: "1",
+			borderColor: "border/minimal",
+			cursor: "text",
+			color: "icon/tertiary",
+			display: "flex",
+			gap: "12",
+			height: rem(56),
+			paddingInline: "16",
+			"&:has(input:focus-visible)": {
+				...wrapperFocusRing,
+				outlineOffset: "calc(var(--focus-ring-width) * -1)"
+			}
+		},
+		mobileSearchInput: {
+			background: "transparent",
+			color: "input/text/inputValue",
+			flex: "1",
+			minWidth: 0,
+			outline: "none",
+			textStyle: "body/lg/regular",
+			_placeholder: { color: "input/text/placeholder" },
+			"&::-webkit-search-cancel-button": { appearance: "none" }
+		},
+		mobileHeader: {
+			alignItems: "center",
+			borderBlockEndWidth: "1",
+			borderColor: "border/minimal",
+			display: "flex",
+			flexShrink: 0,
+			gap: "12",
+			paddingBlock: "16",
+			paddingInline: {
+				base: "16",
+				tablet: "24"
+			}
+		},
+		mobileTitle: {
+			color: "text/primary",
+			flex: "1",
+			textStyle: "heading/mobile/h2"
+		},
+		mobilePanelHeader: {
+			alignItems: "center",
+			borderBlockEndWidth: "1",
+			borderColor: "border/minimal",
+			display: "flex",
+			flexShrink: 0,
+			gap: "12",
+			paddingBlock: "12",
+			paddingInline: {
+				base: "16",
+				tablet: "24"
+			}
+		},
+		mobilePanelOverline: {
+			color: "text/tertiary",
+			textStyle: "heading/h6"
+		},
+		mobilePanelTitle: {
+			color: "text/primary",
+			textStyle: "heading/mobile/h3"
+		},
+		mobileBody: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "16"
+		},
+		mobileFooter: {
+			display: "flex",
+			gap: "12",
+			"& > *": { flex: "1" }
+		},
+		mobileListCheck: {
+			color: "icon/interactive",
+			display: "flex",
+			flexShrink: 0,
+			"&[data-state=unchecked]": { visibility: "hidden" }
+		},
+		mobileListCheckbox: { flexShrink: 0 },
+		field: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "8"
+		},
+		fieldLabel: {
+			color: "text/primary",
+			textStyle: "comp/input/label"
+		},
+		fieldControl: {
+			background: "background/primary",
+			borderColor: "border/strong",
+			borderRadius: "4",
+			borderWidth: "1",
+			display: "flex",
+			height: "48",
+			overflow: "hidden",
+			"&:has(button:is(:disabled, [aria-disabled=true]))": { borderColor: "border/disabled" }
+		},
+		fieldTrigger: {
+			...chipButton,
+			flex: "1",
+			gap: "8",
+			minWidth: 0,
+			paddingInline: "16",
+			textAlign: "start",
+			textStyle: "body/lg/regular"
+		},
+		fieldIcon: {
+			color: "icon/secondary",
+			flexShrink: 0
+		},
+		fieldValue: {
+			color: "text/body",
+			flex: "1",
+			minWidth: 0,
+			truncate: true
+		},
+		fieldChevron: {
+			color: "icon/primary",
+			flexShrink: 0
+		},
+		fieldRemove: {
+			...chipButton,
+			color: "icon/primary",
+			flexShrink: 0,
+			justifyContent: "center",
+			width: "48"
+		}
+	},
+	variants: {
+		pageLayout: {
+			capped: { root: {
+				borderBlockEndWidth: "1",
+				borderColor: "border/regular",
+				paddingBlock: "12",
+				paddingInline: {
+					base: "16",
+					tablet: "32"
+				}
+			} },
+			full: { root: {
+				borderBlockEndWidth: "1",
+				borderColor: "border/regular",
+				paddingBlock: "12",
+				paddingInline: {
+					base: "16",
+					tablet: "32"
+				}
+			} }
+		},
+		contentAlign: {
+			center: {},
+			start: { root: { justifyContent: "flex-start" } }
+		}
+	}
+});
+//#endregion
+export { filterSlotRecipe as default };
+
+//# sourceMappingURL=Filter.recipe.js.map