npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.466 → 0.3.468-beta.2968 - Mend

@bitrise/bitkit-v2 0.3.466 → 0.3.468-beta.2968

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 (56) hide show

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

@@ -56,7 +56,8 @@ var drawerSlotRecipe = defineSlotRecipe({
 		header: {
 			paddingBlockEnd: "8",
 			paddingBlockStart: "24",
-			paddingInline: "24"
+			paddingInline: "24",
+			"&:has([role=tablist])": { paddingBlockEnd: 0 }
 		},
 		body: {
 			flex: "1",
@@ -70,6 +71,7 @@ var drawerSlotRecipe = defineSlotRecipe({
 		title: {
 			color: "text/tertiary",
 			flex: "1",
+			paddingInlineEnd: "48",
 			textStyle: "heading/h6"
 		},
 		description: {},
@@ -87,47 +89,109 @@ var drawerSlotRecipe = defineSlotRecipe({
 			_active: { backgroundColor: "color/neutral/moderate" }
 		}
 	},
-	variants: { variant: {
-		docked: {
-			closeTrigger: {
-				insetEnd: rem(18),
-				top: "12"
-			},
-			content: { width: {
-				base: "100vw",
-				tablet: rem(320)
-			} }
-		},
-		floating: {
-			body: { paddingInline: "24" },
-			closeTrigger: {
-				insetEnd: "24",
-				top: "24"
-			},
-			positioner: { padding: "32" },
-			content: {
-				borderRadius: "12",
-				boxShadow: "elevation/lg",
-				maxWidth: rem(700)
-			},
-			header: {
-				paddingBlockEnd: "16",
-				paddingBlockStart: "24",
-				paddingInline: "24"
-			},
-			footer: {
-				borderBlockStartColor: "transparent",
-				borderBlockStartWidth: 0,
-				paddingBlockEnd: "24",
-				paddingBlockStart: "32",
-				paddingInline: "24"
+	variants: {
+		variant: {
+			docked: {
+				body: { padding: {
+					base: "16",
+					tablet: "24"
+				} },
+				closeTrigger: {
+					insetEnd: rem(18),
+					top: "12"
+				},
+				content: { width: {
+					base: "100vw",
+					tablet: rem(320)
+				} },
+				footer: { paddingInline: {
+					base: "16",
+					tablet: "24"
+				} },
+				header: {
+					paddingInline: {
+						base: "16",
+						tablet: "24"
+					},
+					"& :has(> [role=tablist])": { marginInline: {
+						base: "-8",
+						tablet: "-16"
+					} }
+				}
 			},
-			title: {
-				color: "text/primary",
-				textStyle: "heading/h2"
+			floating: {
+				body: {
+					paddingBlockStart: "8",
+					paddingInline: "24",
+					".chakra-drawer__header:has([role=tablist]) ~ &": { paddingBlockStart: "24" }
+				},
+				closeTrigger: {
+					height: "32",
+					insetEnd: "20",
+					top: "20",
+					width: "32"
+				},
+				positioner: { padding: "32" },
+				content: {
+					borderRadius: "12",
+					boxShadow: "elevation/lg",
+					maxWidth: rem(700),
+					minWidth: `min(100%, ${rem(480)})`
+				},
+				header: {
+					paddingBlockEnd: "16",
+					paddingBlockStart: "24",
+					paddingInline: "24",
+					"& :has(> [role=tablist])": { marginInline: "-16" }
+				},
+				footer: {
+					borderBlockStartColor: "transparent",
+					borderBlockStartWidth: 0,
+					paddingBlockEnd: "24",
+					paddingBlockStart: "32",
+					paddingInline: "24"
+				},
+				title: {
+					color: "text/primary",
+					textStyle: "heading/h3"
+				}
 			}
+		},
+		size: {
+			xxs: {},
+			xs: {},
+			sm: {},
+			md: {},
+			lg: {}
 		}
-	} },
+	},
+	compoundVariants: [...[
+		["xxs", 320],
+		["xs", 360],
+		["sm", 480],
+		["md", 640],
+		["lg", 800]
+	].map(([size, width]) => ({
+		css: { content: { width: {
+			base: "100vw",
+			tablet: rem(width)
+		} } },
+		size,
+		variant: "docked"
+	})), ...[
+		["xxs", 480],
+		["xs", 480],
+		["sm", 480],
+		["md", 640],
+		["lg", 800]
+	].map(([size, width]) => ({
+		css: { content: {
+			maxWidth: "100%",
+			width: rem(width)
+		} },
+		size,
+		variant: "floating"
+	}))],
 	defaultVariants: { variant: "docked" }
 });
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n className: 'drawer',\n slots: drawerAnatomy.keys(),\n base: {\n backdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationName: 'fade-in',\n animationDuration: 'slow',\n },\n _closed: {\n animationName: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n justifyContent: 'flex-end',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'background/primary',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n position: 'relative',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-right-full, fade-in',\n _rtl: 'slide-from-left-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-right-full, fade-out',\n _rtl: 'slide-to-left-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n header: {\n paddingBlockEnd: '8',\n paddingBlockStart: '24',\n paddingInline: '24',\n },\n body: {\n flex: '1',\n overflow: 'auto',\n },\n footer: {\n borderBlockStartColor: 'border/regular',\n borderBlockStartWidth: '1',\n paddingBlock: '12',\n },\n title: {\n color: 'text/tertiary',\n flex: '1',\n textStyle: 'heading/h6',\n },\n description: {},\n closeTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n display: 'inline-flex',\n height: '40',\n justifyContent: 'center',\n position: 'absolute',\n width: '40',\n _hover: {\n backgroundColor: 'color/neutral/subtle',\n },\n _active: {\n backgroundColor: 'color/neutral/moderate',\n },\n },\n },\n variants: {\n variant: {\n docked: {\n closeTrigger: {\n insetEnd: rem(18),\n top: '12',\n },\n content: {\n width: { base: '100vw', tablet: rem(320) },\n },\n },\n floating: {\n body: {\n paddingInline: '24',\n },\n closeTrigger: {\n insetEnd: '24',\n top: '24',\n },\n positioner: {\n padding: '32',\n },\n content: {\n borderRadius: '12',\n boxShadow: 'elevation/lg',\n maxWidth: rem(700),\n },\n header: {\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInline: '24',\n },\n footer: {\n borderBlockStartColor: 'transparent',\n borderBlockStartWidth: 0,\n paddingBlockEnd: '24',\n paddingBlockStart: '32',\n paddingInline: '24',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h2',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'docked',\n },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;~~EACjB~~;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;~~GACN~~,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU,EACR,SAAS;~~EACP~~,QAAQ;~~GACN~~,cAAc;~~IACZ~~,UAAU,IAAI,EAAE;~~IAChB~~,KAAK;~~GACP~~;~~GACA~~,SAAS,EACP,OAAO;~~IAAE~~,MAAM;~~IAAS~~,QAAQ,IAAI,GAAG;~~GAAE~~,EAC3C;~~EACF~~;~~EACA~~,UAAU;~~GACR~~,MAAM,~~EACJ~~,eAAe,~~KACjB~~;~~GACA~~,cAAc;~~IACZ~~,UAAU;~~IACV~~,KAAK;~~GACP~~;~~GACA~~,YAAY,EACV,SAAS,KACX;~~GACA~~,SAAS;~~IACP~~,cAAc;~~IACd~~,WAAW;~~IACX~~,UAAU,IAAI,GAAG;~~GACnB~~;~~GACA~~,QAAQ;~~IACN~~,iBAAiB;~~IACjB~~,mBAAmB;~~IACnB~~,eAAe;~~GACjB~~;~~GACA~~,QAAQ;~~IACN~~,uBAAuB;~~IACvB~~,uBAAuB;~~IACvB~~,iBAAiB;~~IACjB~~,mBAAmB;~~IACnB~~,eAAe;~~GACjB~~;~~GACA~~,OAAO;~~IACL~~,OAAO;~~IACP~~,WAAW;~~GACb~~;EACF;CACF,~~EACF~~;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}
1	+ {"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n className: 'drawer',\n slots: drawerAnatomy.keys(),\n base: {\n backdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationName: 'fade-in',\n animationDuration: 'slow',\n },\n _closed: {\n animationName: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n justifyContent: 'flex-end',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'background/primary',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n position: 'relative',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-right-full, fade-in',\n _rtl: 'slide-from-left-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-right-full, fade-out',\n _rtl: 'slide-to-left-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n header: {\n paddingBlockEnd: '8',\n paddingBlockStart: '24',\n paddingInline: '24',\n // A tab list in the header closes it off with its own baseline.\n '&:has([role=tablist])': {\n paddingBlockEnd: 0,\n },\n },\n body: {\n flex: '1',\n overflow: 'auto',\n },\n footer: {\n borderBlockStartColor: 'border/regular',\n borderBlockStartWidth: '1',\n paddingBlock: '12',\n },\n title: {\n color: 'text/tertiary',\n flex: '1',\n // The close button is absolutely positioned, so the title keeps clear of it.\n paddingInlineEnd: '48',\n textStyle: 'heading/h6',\n },\n description: {},\n closeTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n display: 'inline-flex',\n height: '40',\n justifyContent: 'center',\n position: 'absolute',\n width: '40',\n _hover: {\n backgroundColor: 'color/neutral/subtle',\n },\n _active: {\n backgroundColor: 'color/neutral/moderate',\n },\n },\n },\n variants: {\n variant: {\n // One inline padding for header, body and footer, so their content lines up: 16 on mobile, 24 from tablet.\n docked: {\n body: {\n padding: { base: '16', tablet: '24' },\n },\n closeTrigger: {\n insetEnd: rem(18),\n top: '12',\n },\n content: {\n width: { base: '100vw', tablet: rem(320) },\n },\n footer: {\n paddingInline: { base: '16', tablet: '24' },\n },\n header: {\n paddingInline: { base: '16', tablet: '24' },\n // Tabs sit 8px from the edge, so their baseline runs nearly full width.\n '& :has(> [role=tablist])': {\n marginInline: { base: '-8', tablet: '-16' },\n },\n },\n },\n floating: {\n body: {\n paddingBlockStart: '8',\n paddingInline: '24',\n '.chakra-drawer__header:has([role=tablist]) ~ &': {\n paddingBlockStart: '24',\n },\n },\n closeTrigger: {\n height: '32',\n insetEnd: '20',\n top: '20',\n width: '32',\n },\n positioner: {\n padding: '32',\n },\n content: {\n borderRadius: '12',\n boxShadow: 'elevation/lg',\n maxWidth: rem(700),\n // 480 is the floating drawer's smallest step; on narrow screens it gives way to the viewport.\n minWidth: `min(100%, ${rem(480)})`,\n },\n header: {\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInline: '24',\n '& :has(> [role=tablist])': {\n marginInline: '-16',\n },\n },\n footer: {\n borderBlockStartColor: 'transparent',\n borderBlockStartWidth: 0,\n paddingBlockEnd: '24',\n paddingBlockStart: '32',\n paddingInline: '24',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n },\n },\n // Fixed widths from tablet up; below that the docked drawer is full width. The floating drawer starts at sm\n // (480) and, without a size, sizes to its content between 480 and 700.\n size: {\n xxs: {},\n xs: {},\n sm: {},\n md: {},\n lg: {},\n },\n },\n compoundVariants: [\n ...(\n [\n ['xxs', 320],\n ['xs', 360],\n ['sm', 480],\n ['md', 640],\n ['lg', 800],\n ] as const\n ).map(([size, width]) => ({\n css: { content: { width: { base: '100vw', tablet: rem(width) } } },\n size,\n variant: 'docked' as const,\n })),\n // The floating drawer's scale starts at 480, so the docked-only xxs and xs steps map to it there.\n ...(\n [\n ['xxs', 480],\n ['xs', 480],\n ['sm', 480],\n ['md', 640],\n ['lg', 800],\n ] as const\n ).map(([size, width]) => ({\n css: { content: { maxWidth: '100%', width: rem(width) } },\n size,\n variant: 'floating' as const,\n })),\n ],\n defaultVariants: {\n variant: 'docked',\n },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;GAEf,yBAAyB,EACvB,iBAAiB,EACnB;EACF;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;GAEN,kBAAkB;GAClB,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU;EACR,SAAS;GAEP,QAAQ;IACN,MAAM,EACJ,SAAS;KAAE,MAAM;KAAM,QAAQ;IAAK,EACtC;IACA,cAAc;KACZ,UAAU,IAAI,EAAE;KAChB,KAAK;IACP;IACA,SAAS,EACP,OAAO;KAAE,MAAM;KAAS,QAAQ,IAAI,GAAG;IAAE,EAC3C;IACA,QAAQ,EACN,eAAe;KAAE,MAAM;KAAM,QAAQ;IAAK,EAC5C;IACA,QAAQ;KACN,eAAe;MAAE,MAAM;MAAM,QAAQ;KAAK;KAE1C,4BAA4B,EAC1B,cAAc;MAAE,MAAM;MAAM,QAAQ;KAAM,EAC5C;IACF;GACF;GACA,UAAU;IACR,MAAM;KACJ,mBAAmB;KACnB,eAAe;KACf,kDAAkD,EAChD,mBAAmB,KACrB;IACF;IACA,cAAc;KACZ,QAAQ;KACR,UAAU;KACV,KAAK;KACL,OAAO;IACT;IACA,YAAY,EACV,SAAS,KACX;IACA,SAAS;KACP,cAAc;KACd,WAAW;KACX,UAAU,IAAI,GAAG;KAEjB,UAAU,aAAa,IAAI,GAAG,EAAE;IAClC;IACA,QAAQ;KACN,iBAAiB;KACjB,mBAAmB;KACnB,eAAe;KACf,4BAA4B,EAC1B,cAAc,MAChB;IACF;IACA,QAAQ;KACN,uBAAuB;KACvB,uBAAuB;KACvB,iBAAiB;KACjB,mBAAmB;KACnB,eAAe;IACjB;IACA,OAAO;KACL,OAAO;KACP,WAAW;IACb;GACF;EACF;EAGA,MAAM;GACJ,KAAK,CAAC;GACN,IAAI,CAAC;GACL,IAAI,CAAC;GACL,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;CACA,kBAAkB,CAChB,GACE;EACE,CAAC,OAAO,GAAG;EACX,CAAC,MAAM,GAAG;EACV,CAAC,MAAM,GAAG;EACV,CAAC,MAAM,GAAG;EACV,CAAC,MAAM,GAAG;CACZ,CAAC,CACD,KAAK,CAAC,MAAM,YAAY;EACxB,KAAK,EAAE,SAAS,EAAE,OAAO;GAAE,MAAM;GAAS,QAAQ,IAAI,KAAK;EAAE,EAAE,EAAE;EACjE;EACA,SAAS;CACX,EAAE,GAEF,GACE;EACE,CAAC,OAAO,GAAG;EACX,CAAC,MAAM,GAAG;EACV,CAAC,MAAM,GAAG;EACV,CAAC,MAAM,GAAG;EACV,CAAC,MAAM,GAAG;CACZ,CAAC,CACD,KAAK,CAAC,MAAM,YAAY;EACxB,KAAK,EAAE,SAAS;GAAE,UAAU;GAAQ,OAAO,IAAI,KAAK;EAAE,EAAE;EACxD;EACA,SAAS;CACX,EAAE,CACJ;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}

package/dist/theme/slot-recipes/Select.recipe.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "errorLabel" | "searchInputGroup" | "searchInput" | "searchClear" | "errorState" | "itemList" | "errorIcon" | "errorTextBlock" | "itemHelperText" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
     hasStatusIcon: {
         true: {
             trigger: {
@@ -39,8 +39,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/lg/semibold";
                 };
             };
-            itemList: {
-                maxHeight: `${number}rem`;
+            content: {
+                '--select-menu-list-max-height': `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/lg/regular";
@@ -52,6 +52,12 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "12";
             };
+            errorState: {
+                paddingBlock: "8";
+            };
+            errorLabel: {
+                textStyle: "body/lg/regular";
+            };
             action: {
                 minHeight: "48";
                 paddingBlock: "12";
@@ -98,8 +104,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/md/semibold";
                 };
             };
-            itemList: {
-                maxHeight: `${number}rem`;
+            content: {
+                '--select-menu-list-max-height': `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/md/regular";
@@ -111,6 +117,18 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "8";
             };
+            errorState: {
+                paddingBlock: "4";
+            };
+            errorLabel: {
+                textStyle: "body/md/regular";
+            };
+            errorIcon: {
+                marginBlockStart: "4";
+            };
+            errorTextBlock: {
+                paddingBlock: "2";
+            };
             action: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -24,7 +24,11 @@ var selectSlotRecipe = defineSlotRecipe({
 		"itemHelperText",
 		"itemLoading",
 		"itemLoadingLabel",
-		"emptyState"
+		"emptyState",
+		"errorState",
+		"errorIcon",
+		"errorTextBlock",
+		"errorLabel"
 	],
 	base: {
 		trigger: {
@@ -115,6 +119,7 @@ var selectSlotRecipe = defineSlotRecipe({
 		},
 		itemList: {
 			flex: "1 1 auto",
+			maxHeight: "var(--select-menu-list-max-height)",
 			minHeight: 0,
 			overflowY: "auto",
 			paddingBlock: "8"
@@ -144,6 +149,29 @@ var selectSlotRecipe = defineSlotRecipe({
 			alignItems: "flex-start",
 			paddingInline: "16"
 		},
+		errorState: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "12",
+			paddingInlineStart: "16",
+			paddingInlineEnd: "24"
+		},
+		errorIcon: {
+			color: "icon/negative",
+			flexShrink: 0
+		},
+		errorTextBlock: {
+			display: "flex",
+			flexDirection: "column",
+			flex: 1,
+			minWidth: 0
+		},
+		errorLabel: {
+			color: "text/body",
+			maxWidth: "100%",
+			minWidth: 0,
+			truncate: true
+		},
 		itemIcon: {
 			color: "icon/secondary",
 			"[data-state=\"checked\"] &": { color: "icon/interactive" }
@@ -299,13 +327,15 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				itemList: { maxHeight: rem(280) },
+				content: { "--select-menu-list-max-height": rem(280) },
 				itemLabel: {
 					textStyle: "body/lg/regular",
 					lineHeight: "normal"
 				},
 				itemLoadingLabel: { textStyle: "body/lg/regular" },
 				emptyState: { paddingBlock: "12" },
+				errorState: { paddingBlock: "8" },
+				errorLabel: { textStyle: "body/lg/regular" },
 				action: {
 					minHeight: "48",
 					paddingBlock: "12",
@@ -340,13 +370,17 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				itemList: { maxHeight: rem(236) },
+				content: { "--select-menu-list-max-height": rem(236) },
 				itemLabel: {
 					textStyle: "body/md/regular",
 					lineHeight: "normal"
 				},
 				itemLoadingLabel: { textStyle: "body/md/regular" },
 				emptyState: { paddingBlock: "8" },
+				errorState: { paddingBlock: "4" },
+				errorLabel: { textStyle: "body/md/regular" },
+				errorIcon: { marginBlockStart: "4" },
+				errorTextBlock: { paddingBlock: "2" },
 				action: {
 					minHeight: "40",
 					paddingBlock: "8",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n className: 'select',\n slots: [\n ...selectAnatomy.keys(),\n 'searchInputGroup',\n 'searchInput',\n 'searchClear',\n 'actionContainer',\n 'action',\n 'checkbox',\n 'checkmark',\n 'itemList',\n 'itemContent',\n 'itemBadge',\n 'itemIcon',\n 'valueIcon',\n 'avatar',\n 'itemLabel',\n 'itemHelperText',\n 'itemLoading',\n 'itemLoadingLabel',\n 'emptyState',\n ],\n base: {\n trigger: {\n display: 'flex',\n alignItems: 'center',\n borderWidth: '1',\n borderColor: 'border/strong',\n background: 'background/primary',\n color: 'input/text/inputValue',\n gap: '8',\n justifyContent: 'space-between',\n // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n // The indicator group below is offset the same way on the end side.\n paddingInlineStart: rem(15),\n paddingInlineEnd: '48',\n paddingBlock: rem(11),\n borderRadius: '4',\n cursor: 'pointer',\n userSelect: 'none',\n textAlign: 'start',\n focusVisibleRing: 'inside',\n width: '100%',\n _open: {\n borderColor: 'border/focus',\n },\n _placeholderShown: {\n color: 'text/secondary',\n },\n _disabled: {\n color: 'text/disabled',\n background: 'background/disabled',\n cursor: 'not-allowed',\n },\n _invalid: {\n borderColor: 'border/error',\n },\n _readOnly: {\n background: 'background/disabled',\n cursor: 'default',\n },\n },\n indicatorGroup: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n position: 'absolute',\n insetEnd: 0,\n top: 0,\n bottom: 0,\n paddingInlineStart: '16',\n paddingInlineEnd: rem(15),\n pointerEvents: 'none',\n },\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n _readOnly: {\n color: 'icon/on-disabled',\n },\n },\n ...base,\n content: {\n ...base.content,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n // menu is never narrower than the Select input — but can grow wider for long items.\n minWidth: 'var(--reference-width)',\n maxWidth: rem(800),\n focusVisibleRing: 'none',\n },\n item: {\n ...base.item,\n _active: {\n background: 'background/active',\n },\n _selected: {\n background: 'background/selected',\n _highlighted: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n cursor: 'not-allowed',\n color: 'text/disabled',\n _highlighted: {\n background: 'transparent',\n },\n },\n },\n control: {\n position: 'relative',\n width: '100%',\n },\n valueText: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n flex: '1 1 0',\n minWidth: 0,\n overflow: 'hidden',\n },\n itemList: {\n flex: '1 1 auto',\n minHeight: 0,\n overflowY: 'auto',\n paddingBlock: '8',\n },\n itemContent: {\n display: 'flex',\n flexDirection: 'column',\n flex: '1 0 0',\n minWidth: 0,\n },\n itemBadge: {\n display: 'inline-flex',\n flexShrink: 0,\n },\n itemLoading: {\n flexShrink: 0,\n },\n itemLoadingLabel: {\n color: 'text/secondary',\n flex: '1 0 0',\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n emptyState: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n paddingInline: '16',\n },\n itemIcon: {\n color: 'icon/secondary',\n '[data-state=\"checked\"] &': {\n color: 'icon/interactive',\n },\n },\n // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n valueIcon: {\n color: 'icon/secondary',\n '[data-disabled] &': { color: 'icon/disabled' },\n '[data-readonly] &': { color: 'icon/on-disabled' },\n },\n avatar: {\n flexShrink: 0,\n '[data-disabled] &': { opacity: 0.5 },\n },\n itemLabel: {\n color: 'text/body',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n itemHelperText: {\n color: 'text/helper',\n textStyle: 'body/sm/regular',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n checkbox: {\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n borderWidth: '1',\n borderColor: 'border/regular',\n borderRadius: '4',\n background: 'background/primary',\n boxShadow: 'inset/field',\n color: 'icon/on-color',\n '[data-state=checked] &': {\n background: 'input/checkbox/selection',\n borderColor: 'input/checkbox/selection',\n boxShadow: 'none',\n },\n '[data-disabled] &': {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n },\n },\n checkmark: {\n opacity: 0,\n color: 'icon/on-color',\n '[data-state=checked] &': {\n opacity: 1,\n },\n },\n searchInputGroup: {\n borderBottom: '1px solid',\n borderColor: 'border/minimal',\n background: 'background/primary',\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineStart: '16',\n paddingInlineEnd: '12',\n overflow: 'hidden',\n flexShrink: 0,\n _hover: {\n background: 'background/secondary',\n },\n _focusWithin: {\n background: 'background/primary',\n },\n },\n searchInput: {\n flex: '1 0 0',\n minWidth: 0,\n border: 'none',\n outline: 'none',\n background: 'transparent',\n color: 'input/text/inputValue',\n paddingInline: 0,\n paddingBlock: 0,\n _placeholder: {\n color: 'input/text/placeholder',\n },\n },\n searchClear: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n flexShrink: 0,\n _hover: {\n background: 'background/hover',\n },\n },\n actionContainer: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n paddingBlock: '8',\n flexShrink: 0,\n },\n action: {\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n color: 'text/primary',\n width: '100%',\n cursor: 'pointer',\n textAlign: 'start',\n _icon: {\n color: 'icon/secondary',\n },\n _hover: {\n background: 'button/secondary/bg-hover',\n _active: {\n background: 'button/secondary/bg-active',\n },\n },\n _active: {\n background: 'button/secondary/bg-active',\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n\n variants: {\n hasStatusIcon: {\n true: {\n trigger: {\n paddingInlineEnd: '96',\n },\n },\n false: {},\n },\n size: {\n lg: {\n ...variants.size.lg,\n trigger: {\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n checkbox: {\n width: '24',\n height: '24',\n },\n item: {\n ...variants.size.lg.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '48',\n paddingInlineEnd: '24',\n paddingBlock: '12',\n gap: '12',\n },\n },\n itemList: {\n // 5.5 × 48px item + 16px paddingBlock\n maxHeight: rem(280),\n },\n itemLabel: {\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/lg/regular',\n },\n emptyState: {\n paddingBlock: '12',\n },\n action: {\n minHeight: '48',\n paddingBlock: '12',\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n searchInputGroup: {\n height: rem(56),\n paddingBlock: '16',\n },\n searchInput: {\n textStyle: 'body/lg/regular',\n },\n searchClear: {\n padding: '8',\n },\n },\n md: {\n ...variants.size.md,\n checkbox: {\n width: '20',\n height: '20',\n },\n item: {\n ...variants.size.md.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '4',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '40',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '12',\n },\n },\n itemList: {\n // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n maxHeight: rem(236),\n },\n itemLabel: {\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/md/regular',\n },\n emptyState: {\n paddingBlock: '8',\n },\n action: {\n minHeight: '40',\n paddingBlock: '8',\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n trigger: {\n textStyle: 'body/md/regular',\n paddingBlock: rem(9),\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n searchInputGroup: {\n height: '48',\n paddingBlock: '12',\n },\n searchInput: {\n textStyle: 'body/md/regular',\n },\n searchClear: {\n padding: '4',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,iBAAiB;CAC/C,WAAW;CACX,OAAO;EACL,GAAG,cAAc,KAAK;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,YAAY;GACZ,OAAO;GACP,KAAK;GACL,gBAAgB;GAGhB,oBAAoB,IAAI,EAAE;GAC1B,kBAAkB;GAClB,cAAc,IAAI,EAAE;GACpB,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,WAAW;GACX,kBAAkB;GAClB,OAAO;GACP,OAAO,EACL,aAAa,eACf;GACA,mBAAmB,EACjB,OAAO,iBACT;GACA,WAAW;IACT,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW;IACT,YAAY;IACZ,QAAQ;GACV;EACF;EACA,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,UAAU;GACV,KAAK;GACL,QAAQ;GACR,oBAAoB;GACpB,kBAAkB,IAAI,EAAE;GACxB,eAAe;EACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,WAAW,EACT,OAAO,gBACT;GACA,WAAW,EACT,OAAO,mBACT;EACF;EACA,GAAG;EACH,SAAS;GACP,GAAG,KAAK;GACR,UAAU;GACV,SAAS;GACT,eAAe;GAGf,UAAU;GACV,UAAU,IAAI,GAAG;GACjB,kBAAkB;EACpB;EACA,MAAM;GACJ,GAAG,KAAK;GACR,SAAS,EACP,YAAY,oBACd;GACA,WAAW;IACT,YAAY;IACZ,cAAc,EACZ,YAAY,4BACd;GACF;GACA,WAAW;IACT,QAAQ;IACR,OAAO;IACP,cAAc,EACZ,YAAY,cACd;GACF;EACF;EACA,SAAS;GACP,UAAU;GACV,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,KAAK;GACL,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,UAAU;GACR,MAAM;GACN,WAAW;GACX,WAAW;GACX,cAAc;EAChB;EACA,aAAa;GACX,SAAS;GACT,eAAe;GACf,MAAM;GACN,UAAU;EACZ;EACA,WAAW;GACT,SAAS;GACT,YAAY;EACd;EACA,aAAa,EACX,YAAY,EACd;EACA,kBAAkB;GAChB,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,cAAc;GACd,YAAY;EACd;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,YAAY;GACZ,eAAe;EACjB;EACA,UAAU;GACR,OAAO;GACP,8BAA4B,EAC1B,OAAO,mBACT;EACF;EAGA,WAAW;GACT,OAAO;GACP,qBAAqB,EAAE,OAAO,gBAAgB;GAC9C,qBAAqB,EAAE,OAAO,mBAAmB;EACnD;EACA,QAAQ;GACN,YAAY;GACZ,qBAAqB,EAAE,SAAS,GAAI;EACtC;EACA,WAAW;GACT,OAAO;GACP,YAAY;GACZ,UAAU;GACV,cAAc;GACd,UAAU;GACV,UAAU;GACV,qBAAqB,EACnB,OAAO,gBACT;EACF;EACA,gBAAgB;GACd,OAAO;GACP,WAAW;GACX,YAAY;GACZ,UAAU;GACV,cAAc;GACd,UAAU;GACV,UAAU;GACV,qBAAqB,EACnB,OAAO,gBACT;EACF;EACA,UAAU;GACR,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,aAAa;GACb,aAAa;GACb,cAAc;GACd,YAAY;GACZ,WAAW;GACX,OAAO;GACP,0BAA0B;IACxB,YAAY;IACZ,aAAa;IACb,WAAW;GACb;GACA,qBAAqB;IACnB,YAAY;IACZ,aAAa;GACf;EACF;EACA,WAAW;GACT,SAAS;GACT,OAAO;GACP,0BAA0B,EACxB,SAAS,EACX;EACF;EACA,kBAAkB;GAChB,cAAc;GACd,aAAa;GACb,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,oBAAoB;GACpB,kBAAkB;GAClB,UAAU;GACV,YAAY;GACZ,QAAQ,EACN,YAAY,uBACd;GACA,cAAc,EACZ,YAAY,qBACd;EACF;EACA,aAAa;GACX,MAAM;GACN,UAAU;GACV,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,OAAO;GACP,eAAe;GACf,cAAc;GACd,cAAc,EACZ,OAAO,yBACT;EACF;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,cAAc;GACd,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,QAAQ,EACN,YAAY,mBACd;EACF;EACA,iBAAiB;GACf,WAAW;GACX,aAAa;GACb,cAAc;GACd,YAAY;EACd;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,KAAK;GACL,kBAAkB;GAClB,oBAAoB;GACpB,OAAO;GACP,OAAO;GACP,QAAQ;GACR,WAAW;GACX,OAAO,EACL,OAAO,iBACT;GACA,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,6BACd;GACF;GACA,SAAS,EACP,YAAY,6BACd;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,OAAO,EACL,OAAO,gBACT;GACF;GACA,eAAe,EACb,eAAe,OACjB;EACF;CACF;CAEA,UAAU;EACR,eAAe;GACb,MAAM,EACJ,SAAS,EACP,kBAAkB,KACpB,EACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,GAAG,SAAS,KAAK;IACjB,SAAS,EACP,iCAA+B;KAAE,cAAc,IAAI,CAAC;KAAG,oBAAoB,IAAI,EAAE;IAAE,EACrF;IACA,UAAU;KACR,OAAO;KACP,QAAQ;IACV;IACA,MAAM;KACJ,GAAG,SAAS,KAAK,GAAG;KACpB,iCAA+B;MAC7B,oBAAoB;MACpB,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;KACA,mCAAiC;MAC/B,WAAW;MACX,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;IACF;IACA,UAAU,EAER,WAAW,IAAI,GAAG,EACpB;IACA,WAAW;KACT,WAAW;KACX,YAAY;IACd;IACA,kBAAkB,EAChB,WAAW,kBACb;IACA,YAAY,EACV,cAAc,KAChB;IACA,QAAQ;KACN,WAAW;KACX,cAAc;KACd,WAAW;KACX,YAAY;IACd;IACA,kBAAkB;KAChB,QAAQ,IAAI,EAAE;KACd,cAAc;IAChB;IACA,aAAa,EACX,WAAW,kBACb;IACA,aAAa,EACX,SAAS,IACX;GACF;GACA,IAAI;IACF,GAAG,SAAS,KAAK;IACjB,UAAU;KACR,OAAO;KACP,QAAQ;IACV;IACA,MAAM;KACJ,GAAG,SAAS,KAAK,GAAG;KACpB,iCAA+B;MAC7B,oBAAoB;MACpB,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;KACA,mCAAiC;MAC/B,WAAW;MACX,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;IACF;IACA,UAAU,EAER,WAAW,IAAI,GAAG,EACpB;IACA,WAAW;KACT,WAAW;KACX,YAAY;IACd;IACA,kBAAkB,EAChB,WAAW,kBACb;IACA,YAAY,EACV,cAAc,IAChB;IACA,QAAQ;KACN,WAAW;KACX,cAAc;KACd,WAAW;KACX,YAAY;IACd;IACA,SAAS;KACP,WAAW;KACX,cAAc,IAAI,CAAC;KACnB,iCAA+B;MAAE,cAAc,IAAI,CAAC;MAAG,oBAAoB,IAAI,EAAE;KAAE;IACrF;IACA,kBAAkB;KAChB,QAAQ;KACR,cAAc;IAChB;IACA,aAAa,EACX,WAAW,kBACb;IACA,aAAa,EACX,SAAS,IACX;GACF;EACF;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
1	+ {"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n className: 'select',\n slots: [\n ...selectAnatomy.keys(),\n 'searchInputGroup',\n 'searchInput',\n 'searchClear',\n 'actionContainer',\n 'action',\n 'checkbox',\n 'checkmark',\n 'itemList',\n 'itemContent',\n 'itemBadge',\n 'itemIcon',\n 'valueIcon',\n 'avatar',\n 'itemLabel',\n 'itemHelperText',\n 'itemLoading',\n 'itemLoadingLabel',\n 'emptyState',\n 'errorState',\n 'errorIcon',\n 'errorTextBlock',\n 'errorLabel',\n ],\n base: {\n trigger: {\n display: 'flex',\n alignItems: 'center',\n borderWidth: '1',\n borderColor: 'border/strong',\n background: 'background/primary',\n color: 'input/text/inputValue',\n gap: '8',\n justifyContent: 'space-between',\n // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n // The indicator group below is offset the same way on the end side.\n paddingInlineStart: rem(15),\n paddingInlineEnd: '48',\n paddingBlock: rem(11),\n borderRadius: '4',\n cursor: 'pointer',\n userSelect: 'none',\n textAlign: 'start',\n focusVisibleRing: 'inside',\n width: '100%',\n _open: {\n borderColor: 'border/focus',\n },\n _placeholderShown: {\n color: 'text/secondary',\n },\n _disabled: {\n color: 'text/disabled',\n background: 'background/disabled',\n cursor: 'not-allowed',\n },\n _invalid: {\n borderColor: 'border/error',\n },\n _readOnly: {\n background: 'background/disabled',\n cursor: 'default',\n },\n },\n indicatorGroup: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n position: 'absolute',\n insetEnd: 0,\n top: 0,\n bottom: 0,\n paddingInlineStart: '16',\n paddingInlineEnd: rem(15),\n pointerEvents: 'none',\n },\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n _readOnly: {\n color: 'icon/on-disabled',\n },\n },\n ...base,\n content: {\n ...base.content,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n // menu is never narrower than the Select input — but can grow wider for long items.\n minWidth: 'var(--reference-width)',\n maxWidth: rem(800),\n focusVisibleRing: 'none',\n },\n item: {\n ...base.item,\n _active: {\n background: 'background/active',\n },\n _selected: {\n background: 'background/selected',\n _highlighted: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n cursor: 'not-allowed',\n color: 'text/disabled',\n _highlighted: {\n background: 'transparent',\n },\n },\n },\n control: {\n position: 'relative',\n width: '100%',\n },\n valueText: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n flex: '1 1 0',\n minWidth: 0,\n overflow: 'hidden',\n },\n itemList: {\n flex: '1 1 auto',\n maxHeight: 'var(--select-menu-list-max-height)',\n minHeight: 0,\n overflowY: 'auto',\n paddingBlock: '8',\n },\n itemContent: {\n display: 'flex',\n flexDirection: 'column',\n flex: '1 0 0',\n minWidth: 0,\n },\n itemBadge: {\n display: 'inline-flex',\n flexShrink: 0,\n },\n itemLoading: {\n flexShrink: 0,\n },\n itemLoadingLabel: {\n color: 'text/secondary',\n flex: '1 0 0',\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n emptyState: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n paddingInline: '16',\n },\n errorState: {\n display: 'flex',\n alignItems: 'flex-start',\n gap: '12',\n paddingInlineStart: '16',\n paddingInlineEnd: '24',\n },\n errorIcon: {\n color: 'icon/negative',\n flexShrink: 0,\n },\n errorTextBlock: {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n minWidth: 0,\n },\n errorLabel: {\n color: 'text/body',\n maxWidth: '100%',\n minWidth: 0,\n truncate: true,\n },\n itemIcon: {\n color: 'icon/secondary',\n '[data-state=\"checked\"] &': {\n color: 'icon/interactive',\n },\n },\n // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n valueIcon: {\n color: 'icon/secondary',\n '[data-disabled] &': { color: 'icon/disabled' },\n '[data-readonly] &': { color: 'icon/on-disabled' },\n },\n avatar: {\n flexShrink: 0,\n '[data-disabled] &': { opacity: 0.5 },\n },\n itemLabel: {\n color: 'text/body',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n itemHelperText: {\n color: 'text/helper',\n textStyle: 'body/sm/regular',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n checkbox: {\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n borderWidth: '1',\n borderColor: 'border/regular',\n borderRadius: '4',\n background: 'background/primary',\n boxShadow: 'inset/field',\n color: 'icon/on-color',\n '[data-state=checked] &': {\n background: 'input/checkbox/selection',\n borderColor: 'input/checkbox/selection',\n boxShadow: 'none',\n },\n '[data-disabled] &': {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n },\n },\n checkmark: {\n opacity: 0,\n color: 'icon/on-color',\n '[data-state=checked] &': {\n opacity: 1,\n },\n },\n searchInputGroup: {\n borderBottom: '1px solid',\n borderColor: 'border/minimal',\n background: 'background/primary',\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineStart: '16',\n paddingInlineEnd: '12',\n overflow: 'hidden',\n flexShrink: 0,\n _hover: {\n background: 'background/secondary',\n },\n _focusWithin: {\n background: 'background/primary',\n },\n },\n searchInput: {\n flex: '1 0 0',\n minWidth: 0,\n border: 'none',\n outline: 'none',\n background: 'transparent',\n color: 'input/text/inputValue',\n paddingInline: 0,\n paddingBlock: 0,\n _placeholder: {\n color: 'input/text/placeholder',\n },\n },\n searchClear: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n flexShrink: 0,\n _hover: {\n background: 'background/hover',\n },\n },\n actionContainer: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n paddingBlock: '8',\n flexShrink: 0,\n },\n action: {\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n color: 'text/primary',\n width: '100%',\n cursor: 'pointer',\n textAlign: 'start',\n _icon: {\n color: 'icon/secondary',\n },\n _hover: {\n background: 'button/secondary/bg-hover',\n _active: {\n background: 'button/secondary/bg-active',\n },\n },\n _active: {\n background: 'button/secondary/bg-active',\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n\n variants: {\n hasStatusIcon: {\n true: {\n trigger: {\n paddingInlineEnd: '96',\n },\n },\n false: {},\n },\n size: {\n lg: {\n ...variants.size.lg,\n trigger: {\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n checkbox: {\n width: '24',\n height: '24',\n },\n item: {\n ...variants.size.lg.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '48',\n paddingInlineEnd: '24',\n paddingBlock: '12',\n gap: '12',\n },\n },\n content: {\n // 5.5 × 48px item + 16px paddingBlock\n '--select-menu-list-max-height': rem(280),\n },\n itemLabel: {\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/lg/regular',\n },\n emptyState: {\n paddingBlock: '12',\n },\n errorState: {\n paddingBlock: '8',\n },\n errorLabel: {\n textStyle: 'body/lg/regular',\n },\n action: {\n minHeight: '48',\n paddingBlock: '12',\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n searchInputGroup: {\n height: rem(56),\n paddingBlock: '16',\n },\n searchInput: {\n textStyle: 'body/lg/regular',\n },\n searchClear: {\n padding: '8',\n },\n },\n md: {\n ...variants.size.md,\n checkbox: {\n width: '20',\n height: '20',\n },\n item: {\n ...variants.size.md.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '4',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '40',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '12',\n },\n },\n content: {\n // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n '--select-menu-list-max-height': rem(236),\n },\n itemLabel: {\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/md/regular',\n },\n emptyState: {\n paddingBlock: '8',\n },\n errorState: {\n paddingBlock: '4',\n },\n errorLabel: {\n textStyle: 'body/md/regular',\n },\n errorIcon: {\n marginBlockStart: '4',\n },\n errorTextBlock: {\n paddingBlock: '2',\n },\n action: {\n minHeight: '40',\n paddingBlock: '8',\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n trigger: {\n textStyle: 'body/md/regular',\n paddingBlock: rem(9),\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n searchInputGroup: {\n height: '48',\n paddingBlock: '12',\n },\n searchInput: {\n textStyle: 'body/md/regular',\n },\n searchClear: {\n padding: '4',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n"],"mappings":"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"}

package/dist/theme/slot-recipes/UISideNav.recipe.d.ts ADDED Viewed

@@ -0,0 +1,119 @@
+/**
+ * The footprint the rail keeps in the page. The expanded rail overlays the content rather than
+ * pushing it, so this is the gutter a layout reserves beside the navigation.
+ */
+export declare const uiSideNavRailWidth: `${number}rem`;
+declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
+    layout: {
+        rail: {
+            root: {
+                paddingBlockEnd: "12";
+                transition: "width 100ms ease-out";
+                transitionDelay: "50ms";
+                width: `${number}rem`;
+                _motionReduce: {
+                    transition: "none";
+                };
+                '&[data-expanded]': {
+                    transitionDelay: "100ms";
+                    width: `${number}rem`;
+                };
+            };
+            workspace: {
+                paddingInline: "16";
+                minWidth: `${number}rem`;
+            };
+            workspaceControl: {
+                minWidth: `${number}rem`;
+            };
+            workspaceMenu: {
+                width: `${number}rem`;
+            };
+            body: {
+                overflowX: "hidden";
+                overflowY: "auto";
+                scrollbar: "hidden";
+            };
+            item: {
+                gap: "24";
+                paddingBlock: "16";
+                minWidth: `${number}rem`;
+            };
+            link: {
+                gap: "24";
+                minWidth: `${number}rem`;
+            };
+            footerSeparator: {
+                '[data-expanded] &': {
+                    paddingInline: "16";
+                };
+            };
+            footerHeading: {
+                minWidth: `${number}rem`;
+            };
+        };
+        drawer: {
+            root: {
+                overflowX: "hidden";
+                overflowY: "auto";
+                width: "full";
+            };
+            workspaceRoot: {
+                background: "sys/ui/sidenav/bg";
+                insetBlockStart: number;
+                position: "sticky";
+                zIndex: number;
+            };
+            workspace: {
+                paddingBlock: "16";
+                paddingInlineEnd: "24";
+                paddingInlineStart: "16";
+            };
+            item: {
+                gap: "12";
+                paddingBlock: "16";
+            };
+            link: {
+                gap: "12";
+            };
+            footer: {
+                paddingBlockEnd: "16";
+                paddingBlockStart: "12";
+                position: "relative";
+            };
+            footerHeading: {
+                paddingBlockStart: "12";
+                '&[data-section]': {
+                    marginBlockStart: "12";
+                    paddingBlockStart: "24";
+                    position: "relative";
+                    _before: {
+                        insetBlockStart: number;
+                        insetInline: number;
+                        position: "absolute";
+                        background: "border/inverse";
+                        content: "\"\"";
+                        height: "1";
+                        opacity: 0.2;
+                    };
+                };
+            };
+            footerSeparator: {
+                insetBlockStart: number;
+                insetInline: number;
+                paddingBlock: number;
+                paddingInline: number;
+                position: "absolute";
+            };
+            workspaceMenu: {
+                maxHeight: "var(--available-height)";
+                '--select-menu-list-max-height': "none";
+            };
+            body: {
+                flex: "1 0 auto";
+                paddingBlock: "8";
+            };
+        };
+    };
+}>;
+export default uiSideNavSlotRecipe;