npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.459 → 0.3.460-beta.2905 - Mend

@bitrise/bitkit-v2 0.3.459 → 0.3.460-beta.2905

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

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

@@ -0,0 +1,413 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/UISideNav.recipe.ts
+var RAIL_WIDTH_COLLAPSED = rem(72);
+/**
+* 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.
+*/
+var uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;
+var RAIL_WIDTH_EXPANDED = rem(256);
+var DRAWER_WIDTH = rem(320);
+var WORKSPACE_MENU_WIDTH = rem(360);
+var railRow = { minWidth: RAIL_WIDTH_EXPANDED };
+var hairline = {
+	background: "border/inverse",
+	content: "\"\"",
+	height: "1",
+	opacity: .2
+};
+var uiSideNavSlotRecipe = defineSlotRecipe({
+	className: "ui-side-nav",
+	slots: [
+		"backdrop",
+		"body",
+		"closeButton",
+		"content",
+		"footer",
+		"footerHeading",
+		"footerSeparator",
+		"item",
+		"itemIcon",
+		"itemIndicator",
+		"itemLabel",
+		"link",
+		"linkIcon",
+		"linkIconBlock",
+		"linkLabel",
+		"linkSecondaryText",
+		"linkStatusDot",
+		"linkTextBlock",
+		"positioner",
+		"root",
+		"workspace",
+		"workspaceChevron",
+		"workspaceControl",
+		"workspaceLabel",
+		"workspaceMenu",
+		"workspaceRoot",
+		"workspaceTextBlock",
+		"workspaceValue"
+	],
+	base: {
+		root: {
+			background: "sys/ui/sidenav/bg",
+			display: "flex",
+			flexDirection: "column",
+			height: "full",
+			overflow: "hidden",
+			whiteSpace: "nowrap"
+		},
+		workspace: {
+			alignItems: "center",
+			background: "sys/ui/sidenav/item/bg",
+			borderRadius: 0,
+			color: "text/on-color",
+			cursor: "pointer",
+			display: "flex",
+			flexShrink: 0,
+			gap: "16",
+			height: rem(72),
+			minHeight: rem(72),
+			position: "relative",
+			textAlign: "start",
+			width: "full",
+			_after: {
+				...hairline,
+				insetBlockEnd: 0,
+				insetInline: 0,
+				position: "absolute"
+			},
+			_hover: {
+				background: "sys/ui/sidenav/item/bg-hover",
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_active: { background: "sys/ui/sidenav/item/bg-active" }
+		},
+		workspaceRoot: {
+			flexShrink: 0,
+			width: "full"
+		},
+		workspaceTextBlock: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			minWidth: 0
+		},
+		workspaceLabel: {
+			opacity: .6,
+			textStyle: "heading/h6",
+			textTransform: "uppercase"
+		},
+		workspaceValue: {
+			opacity: .8,
+			textStyle: "body/lg/regular",
+			truncate: true
+		},
+		workspaceChevron: {
+			color: "text/on-color",
+			flexShrink: 0,
+			transition: "rotate 150ms ease-out",
+			_open: { rotate: "180deg" },
+			_motionReduce: { transition: "none" }
+		},
+		body: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			minHeight: 0
+		},
+		item: {
+			alignItems: "center",
+			background: "sys/ui/sidenav/item/bg",
+			color: "sys/ui/sidenav/item/fg",
+			cursor: "pointer",
+			display: "flex",
+			flexShrink: 0,
+			overflow: "hidden",
+			paddingInlineEnd: "8",
+			paddingInlineStart: "24",
+			position: "relative",
+			textDecoration: "none",
+			width: "full",
+			_hover: {
+				background: "sys/ui/sidenav/item/bg-hover",
+				color: "sys/ui/sidenav/item/fg-hover",
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_active: {
+				background: "sys/ui/sidenav/item/bg-active",
+				color: "sys/ui/sidenav/item/fg-active"
+			},
+			_selected: {
+				background: "sys/ui/sidenav/item/bg-selected",
+				color: "sys/ui/sidenav/item/fg-active",
+				_hover: {
+					background: "sys/ui/sidenav/item/bg-hover",
+					_active: { background: "sys/ui/sidenav/item/bg-active" }
+				},
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
+		},
+		itemIcon: { flexShrink: 0 },
+		itemLabel: {
+			flex: 1,
+			minWidth: 0,
+			textStyle: "body/lg/semibold",
+			truncate: true
+		},
+		itemIndicator: {
+			background: "sys/ui/sidenav/item/indicator",
+			insetBlock: 0,
+			insetInlineStart: 0,
+			position: "absolute",
+			width: "4"
+		},
+		footer: {
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: 0,
+			marginBlockStart: "auto"
+		},
+		footerSeparator: {
+			flexShrink: 0,
+			paddingBlock: "8",
+			paddingInline: "12",
+			_before: {
+				...hairline,
+				display: "block",
+				width: "full"
+			}
+		},
+		footerHeading: {
+			color: "text/on-color",
+			opacity: .6,
+			paddingBlockEnd: "12",
+			paddingInline: "24",
+			textStyle: "heading/h6",
+			textTransform: "uppercase"
+		},
+		link: {
+			alignItems: "center",
+			background: "sys/ui/sidenav/item/bg",
+			borderWidth: 0,
+			color: "sys/ui/sidenav/item/fg",
+			cursor: "pointer",
+			display: "flex",
+			flexShrink: 0,
+			overflow: "hidden",
+			paddingBlock: "12",
+			paddingInline: "24",
+			textAlign: "start",
+			textDecoration: "none",
+			width: "full",
+			_hover: {
+				background: "sys/ui/sidenav/item/bg-hover",
+				color: "sys/ui/sidenav/item/fg-hover",
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_active: {
+				background: "sys/ui/sidenav/item/bg-active",
+				color: "sys/ui/sidenav/item/fg-active"
+			},
+			_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" },
+			"&[data-with-secondary]": {
+				height: rem(56),
+				paddingBlock: 0
+			}
+		},
+		linkTextBlock: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			justifyContent: "center",
+			minWidth: 0
+		},
+		linkLabel: {
+			flex: 1,
+			minWidth: 0,
+			textStyle: "body/lg/regular",
+			truncate: true,
+			"[data-with-secondary] &": {
+				flex: "none",
+				textStyle: "body/md/semibold"
+			}
+		},
+		linkSecondaryText: {
+			textStyle: "body/sm/regular",
+			truncate: true
+		},
+		linkIcon: { flexShrink: 0 },
+		linkIconBlock: {
+			display: "flex",
+			flexShrink: 0,
+			position: "relative"
+		},
+		linkStatusDot: {
+			borderRadius: "full",
+			height: "8",
+			insetBlockEnd: "-2",
+			insetInlineEnd: "-4",
+			position: "absolute",
+			width: "8",
+			"&[data-status=\"neutral\"]": { background: "sys/ui/sidenav/badge/neutral" },
+			"&[data-status=\"success\"]": { background: "sys/ui/sidenav/badge/green" },
+			"&[data-status=\"critical\"]": { background: "sys/ui/sidenav/badge/red" }
+		},
+		backdrop: {
+			background: "utilities/overlay",
+			inset: 0,
+			position: "fixed",
+			zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))",
+			_open: {
+				animationDuration: "slow",
+				animationName: "fade-in"
+			},
+			_closed: {
+				animationDuration: "moderate",
+				animationName: "fade-out"
+			}
+		},
+		positioner: {
+			alignItems: "stretch",
+			display: "flex",
+			inset: 0,
+			justifyContent: "flex-start",
+			overscrollBehaviorY: "none",
+			position: "fixed",
+			zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
+		},
+		content: {
+			background: "sys/ui/sidenav/bg",
+			boxShadow: "elevation/lg",
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: "100dvh",
+			outline: "none",
+			overflow: "visible",
+			position: "relative",
+			width: DRAWER_WIDTH,
+			maxWidth: "calc(100vw - 55px)",
+			_open: {
+				animationDuration: "slowest",
+				animationName: {
+					base: "slide-from-left-full, fade-in",
+					_rtl: "slide-from-right-full, fade-in"
+				},
+				animationTimingFunction: "ease-in-smooth"
+			},
+			_closed: {
+				animationDuration: "slower",
+				animationName: {
+					base: "slide-to-left-full, fade-out",
+					_rtl: "slide-to-right-full, fade-out"
+				},
+				animationTimingFunction: "ease-in-smooth"
+			}
+		},
+		closeButton: {
+			alignItems: "center",
+			display: "flex",
+			height: rem(72),
+			insetBlockStart: 0,
+			insetInlineStart: "100%",
+			paddingInlineStart: "8",
+			position: "absolute"
+		}
+	},
+	variants: { layout: {
+		rail: {
+			root: {
+				paddingBlockEnd: "12",
+				transition: "width 100ms ease-out",
+				transitionDelay: "50ms",
+				width: RAIL_WIDTH_COLLAPSED,
+				_motionReduce: { transition: "none" },
+				"&[data-expanded]": {
+					transitionDelay: "100ms",
+					width: RAIL_WIDTH_EXPANDED
+				}
+			},
+			workspace: {
+				...railRow,
+				paddingInline: "16"
+			},
+			workspaceControl: railRow,
+			workspaceMenu: { width: WORKSPACE_MENU_WIDTH },
+			item: {
+				...railRow,
+				gap: "24",
+				paddingBlock: "12"
+			},
+			link: {
+				...railRow,
+				gap: "24"
+			},
+			footerSeparator: { "[data-expanded] &": { paddingInline: "16" } },
+			footerHeading: railRow
+		},
+		drawer: {
+			root: {
+				overflowX: "hidden",
+				overflowY: "auto",
+				width: "full"
+			},
+			workspaceRoot: {
+				background: "sys/ui/sidenav/bg",
+				insetBlockStart: 0,
+				position: "sticky",
+				zIndex: 1
+			},
+			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: {
+						...hairline,
+						insetBlockStart: 0,
+						insetInline: 0,
+						position: "absolute"
+					}
+				}
+			},
+			footerSeparator: {
+				insetBlockStart: 0,
+				insetInline: 0,
+				paddingBlock: 0,
+				paddingInline: 0,
+				position: "absolute"
+			},
+			workspaceMenu: {
+				maxHeight: "var(--available-height)",
+				"--select-menu-list-max-height": "none"
+			},
+			body: {
+				flex: "1 0 auto",
+				paddingBlock: "8"
+			}
+		}
+	} },
+	defaultVariants: { layout: "rail" }
+});
+//#endregion
+export { uiSideNavSlotRecipe as default, uiSideNavRailWidth };
+//# sourceMappingURL=UISideNav.recipe.js.map

package/dist/theme/slot-recipes/UISideNav.recipe.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n height: rem(56),\n paddingBlock: 0,\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n item: { ...railRow, gap: '24', paddingBlock: '12' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}

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

@@ -657,8 +657,8 @@ declare const slotRecipes: {
                         textStyle: "body/md/semibold";
                     };
                 } | undefined;
-                itemList?: {
-                    maxHeight: `${number}rem`;
+                content?: {
+                    '--select-menu-list-max-height': `${number}rem`;
                 } | undefined;
                 itemLabel?: {
                     textStyle: "body/md/regular";
@@ -670,6 +670,18 @@ declare const slotRecipes: {
                 emptyState?: {
                     paddingBlock: "8";
                 } | undefined;
+                errorState?: {
+                    paddingBlock: "4";
+                } | undefined;
+                errorLabel?: {
+                    textStyle: "body/md/regular";
+                } | undefined;
+                errorIcon?: {
+                    marginBlockStart: "4";
+                } | undefined;
+                errorTextBlock?: {
+                    paddingBlock: "2";
+                } | undefined;
                 action?: {
                     minHeight: "40";
                     paddingBlock: "8";
@@ -2142,7 +2154,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: 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", {
+    select: 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: {
@@ -2183,8 +2195,8 @@ declare const slotRecipes: {
                         textStyle: "body/lg/semibold";
                     };
                 };
-                itemList: {
-                    maxHeight: `${number}rem`;
+                content: {
+                    '--select-menu-list-max-height': `${number}rem`;
                 };
                 itemLabel: {
                     textStyle: "body/lg/regular";
@@ -2196,6 +2208,12 @@ declare const slotRecipes: {
                 emptyState: {
                     paddingBlock: "12";
                 };
+                errorState: {
+                    paddingBlock: "8";
+                };
+                errorLabel: {
+                    textStyle: "body/lg/regular";
+                };
                 action: {
                     minHeight: "48";
                     paddingBlock: "12";
@@ -2242,8 +2260,8 @@ declare const slotRecipes: {
                         textStyle: "body/md/semibold";
                     };
                 };
-                itemList: {
-                    maxHeight: `${number}rem`;
+                content: {
+                    '--select-menu-list-max-height': `${number}rem`;
                 };
                 itemLabel: {
                     textStyle: "body/md/regular";
@@ -2255,6 +2273,18 @@ declare const slotRecipes: {
                 emptyState: {
                     paddingBlock: "8";
                 };
+                errorState: {
+                    paddingBlock: "4";
+                };
+                errorLabel: {
+                    textStyle: "body/md/regular";
+                };
+                errorIcon: {
+                    marginBlockStart: "4";
+                };
+                errorTextBlock: {
+                    paddingBlock: "2";
+                };
                 action: {
                     minHeight: "40";
                     paddingBlock: "8";
@@ -3396,5 +3426,113 @@ declare const slotRecipes: {
             };
         };
     }>;
+    uiSideNav: 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`;
+                };
+                item: {
+                    gap: "24";
+                    paddingBlock: "12";
+                    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 slotRecipes;

package/dist/theme/slot-recipes/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import avatarSlotRecipe from "./Avatar.recipe.js";
 import numberInputSlotRecipe from "./NumberInput.recipe.js";
+import uiSideNavSlotRecipe from "./UISideNav.recipe.js";
 import accordionSlotRecipe from "./Accordion.recipe.js";
 import actionBarSlotRecipe from "./ActionBar.recipe.js";
 import alertSlotRecipe from "./Alert.recipe.js";
@@ -125,7 +126,8 @@ var slotRecipes = {
 	toast: toastSlotRecipe,
 	tooltip: tooltipSlotRecipe,
 	tour: tourSlotRecipe,
-	treeView: treeViewSlotRecipe
+	treeView: treeViewSlotRecipe,
+	uiSideNav: uiSideNavSlotRecipe
 };
 //#endregion
 export { slotRecipes as default };