@bitrise/bitkit-v2 0.3.481-beta.3101 → 0.3.481-beta.3105

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

@@ -1,652 +0,0 @@
-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