@bitrise/bitkit-v2 0.3.485-beta.3131 → 0.3.485-beta.3132

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 (10) hide show
  1. package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.d.ts +16 -3
  2. package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js +56 -52
  3. package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js.map +1 -1
  4. package/dist/theme/slot-recipes/Menu.recipe.js +7 -0
  5. package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
  6. package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +1 -1
  7. package/dist/theme/slot-recipes/UIHeader.recipe.js +9 -9
  8. package/dist/theme/slot-recipes/UIHeader.recipe.js.map +1 -1
  9. package/dist/theme/slot-recipes/index.d.ts +1 -1
  10. package/package.json +1 -1
package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.d.ts CHANGED
@@ -1,10 +1,23 @@
1
- import { SelectRootProps } from '@chakra-ui/react/select';
2
- import { BitkitSelectMenuItemProps } from '../BitkitSelectMenu/BitkitSelectMenu';
1
+ import { BoxProps } from '@chakra-ui/react/box';
3
2
  export type BitkitUIHeaderMode = 'dark' | 'light' | 'system';
4
- export interface BitkitUIHeaderModeSwitchProps extends Omit<SelectRootProps<BitkitSelectMenuItemProps>, 'children' | 'collection' | 'defaultValue' | 'deselectable' | 'disabled' | 'multiple' | 'onValueChange' | 'positioning' | 'size' | 'value'> {
3
+ export interface BitkitUIHeaderModeSwitchProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {
4
+ /** The mode to start on when the switch is left uncontrolled. */
5
+ defaultValue?: BitkitUIHeaderMode;
6
+ /** The trigger's accessible name. It shows no text of its own. */
5
7
  label?: string;
8
+ /** Fires with the mode picked from the menu. */
6
9
  onValueChange?: (value: BitkitUIHeaderMode) => void;
10
+ /** The chosen mode. Pass it with `onValueChange` to hold the state in the product. */
7
11
  value?: BitkitUIHeaderMode;
8
12
  }
13
+ /**
14
+ * The appearance menu — System, Light or Dark — behind a separator at the trailing end of the bar.
15
+ * Unlike the header's other controls it owns the menu it opens, because the three options are the
16
+ * same everywhere; applying the mode is still the consumer's.
17
+ *
18
+ * The button shows the mode in force rather than the one chosen, so `system` draws a sun or a moon
19
+ * rather than a screen. It reads that from the `light` / `dark` class every Bitkit colour token
20
+ * already keys on, so the icon can never disagree with what is around it.
21
+ */
9
22
  declare const UIHeaderModeSwitch: import('react').ForwardRefExoticComponent<BitkitUIHeaderModeSwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
10
23
  export default UIHeaderModeSwitch;
package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js CHANGED
@@ -1,17 +1,17 @@
1
+ import IconCheck from "../../icons/IconCheck.js";
1
2
  import IconModeDark from "../../icons/IconModeDark.js";
2
3
  import IconModeLight from "../../icons/IconModeLight.js";
3
4
  import IconModeSystem from "../../icons/IconModeSystem.js";
4
- import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
5
- import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
5
+ import { usePortalContext } from "../../utilities/BitkitPortalContext.js";
6
6
  import { useUIHeaderContext } from "./UIHeaderContext.js";
7
7
  import uiHeaderPart from "./uiHeaderPart.js";
8
8
  import { UIHeaderControlBase } from "./UIHeaderControl.js";
9
9
  import { Box } from "@chakra-ui/react/box";
10
- import { forwardRef, useContext } from "react";
10
+ import { forwardRef } from "react";
11
11
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
12
12
  import { Portal } from "@chakra-ui/react/portal";
13
- import { createListCollection } from "@chakra-ui/react/collection";
14
- import { Select } from "@chakra-ui/react/select";
13
+ import { Menu } from "@chakra-ui/react/menu";
14
+ import { useControllableState } from "@chakra-ui/react/hooks";
15
15
  //#region lib/components/BitkitUIHeader/UIHeaderModeSwitch.tsx
16
16
  var modes = {
17
17
  dark: {
@@ -27,76 +27,80 @@ var modes = {
27
27
  label: "System"
28
28
  }
29
29
  };
30
- var modeCollection = createListCollection({ items: [
30
+ var modeOrder = [
31
31
  "system",
32
32
  "light",
33
33
  "dark"
34
- ].map((value) => ({
35
- ...modes[value],
36
- value
37
- })) });
34
+ ];
38
35
  var MENU_CROSS_OFFSET = 13;
39
- var blockClosedTriggerSelection = (event) => {
40
- if (event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey || [
41
- "ArrowLeft",
42
- "ArrowRight",
43
- "End",
44
- "Home"
45
- ].includes(event.key)) event.preventDefault();
46
- };
36
+ /**
37
+ * The appearance menu — System, Light or Dark — behind a separator at the trailing end of the bar.
38
+ * Unlike the header's other controls it owns the menu it opens, because the three options are the
39
+ * same everywhere; applying the mode is still the consumer's.
40
+ *
41
+ * The button shows the mode in force rather than the one chosen, so `system` draws a sun or a moon
42
+ * rather than a screen. It reads that from the `light` / `dark` class every Bitkit colour token
43
+ * already keys on, so the icon can never disagree with what is around it.
44
+ */
47
45
  var UIHeaderModeSwitch = forwardRef((props, ref) => {
48
- const { css, label, onValueChange, value = "system", ...rest } = props;
46
+ const { css, defaultValue = "light", label, onValueChange, value: valueProp, ...rest } = props;
49
47
  const { styles } = useUIHeaderContext();
50
- const { disablePortal } = useContext(BitkitPortalContext);
48
+ const { disablePortal } = usePortalContext();
49
+ const [value, setValue] = useControllableState({
50
+ defaultValue,
51
+ onChange: onValueChange,
52
+ value: valueProp
53
+ });
51
54
  const { icon: ModeIcon, label: modeLabel } = modes[value];
52
55
  const accessibleName = label ?? `Appearance: ${modeLabel}`;
53
- return /* @__PURE__ */ jsxs(Select.Root, {
54
- collection: modeCollection,
55
- lazyMount: true,
56
- positioning: {
57
- offset: {
58
- crossAxis: MENU_CROSS_OFFSET,
59
- mainAxis: 0
60
- },
61
- placement: "bottom-end",
62
- sameWidth: false
63
- },
64
- unmountOnExit: true,
56
+ return /* @__PURE__ */ jsx(Box, {
65
57
  ...uiHeaderPart("mode-switch"),
66
58
  ...rest,
67
59
  css: [styles.modeSwitch, css],
68
- onValueChange: (details) => onValueChange?.(details.value[0]),
69
- value: [value],
70
- children: [
71
- /* @__PURE__ */ jsx(Select.Label, {
72
- srOnly: true,
73
- children: accessibleName
74
- }),
75
- /* @__PURE__ */ jsx(Select.HiddenSelect, {}),
76
- /* @__PURE__ */ jsx(Box, {
77
- css: styles.separator,
78
- ...uiHeaderPart("separator")
79
- }),
80
- /* @__PURE__ */ jsx(Select.Trigger, {
60
+ children: /* @__PURE__ */ jsxs(Menu.Root, {
61
+ lazyMount: true,
62
+ positioning: {
63
+ offset: {
64
+ crossAxis: MENU_CROSS_OFFSET,
65
+ mainAxis: 0
66
+ },
67
+ placement: "bottom-end"
68
+ },
69
+ unmountOnExit: true,
70
+ children: [/* @__PURE__ */ jsx(Menu.Trigger, {
81
71
  asChild: true,
82
- unstyled: true,
83
72
  children: /* @__PURE__ */ jsx(UIHeaderControlBase, {
84
73
  ref,
85
74
  css: styles.modeControl,
86
75
  footprint: "control",
87
76
  label: accessibleName,
88
- onKeyDownCapture: blockClosedTriggerSelection,
89
77
  children: value === "system" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconModeLight, { _dark: { display: "none" } }), /* @__PURE__ */ jsx(IconModeDark, {
90
78
  _dark: { display: "block" },
91
79
  display: "none"
92
80
  })] }) : /* @__PURE__ */ jsx(ModeIcon, {})
93
81
  })
94
- }),
95
- /* @__PURE__ */ jsx(Portal, {
82
+ }), /* @__PURE__ */ jsx(Portal, {
96
83
  disabled: disablePortal,
97
- children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, { collection: modeCollection }) })
98
- })
99
- ]
84
+ children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(Menu.RadioItemGroup, {
85
+ onValueChange: (details) => setValue(details.value),
86
+ value,
87
+ children: modeOrder.map((mode) => {
88
+ const { icon: Icon, label: itemLabel } = modes[mode];
89
+ return /* @__PURE__ */ jsxs(Menu.RadioItem, {
90
+ value: mode,
91
+ children: [
92
+ /* @__PURE__ */ jsx(Icon, {}),
93
+ /* @__PURE__ */ jsx(Menu.ItemText, { children: itemLabel }),
94
+ /* @__PURE__ */ jsx(Menu.ItemIndicator, {
95
+ asChild: true,
96
+ children: /* @__PURE__ */ jsx(IconCheck, {})
97
+ })
98
+ ]
99
+ }, mode);
100
+ })
101
+ }) }) })
102
+ })]
103
+ })
100
104
  });
101
105
  });
102
106
  UIHeaderModeSwitch.displayName = "BitkitUIHeader.ModeSwitch";
package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UIHeaderModeSwitch.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderModeSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps } from '@chakra-ui/react/select';\nimport { forwardRef, type KeyboardEvent, useContext } from 'react';\n\nimport { type BitkitIconComponent, IconModeDark, IconModeLight, IconModeSystem } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitSelectMenu, { type BitkitSelectMenuItemProps } from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderMode = 'dark' | 'light' | 'system';\n\nconst modes: Record<BitkitUIHeaderMode, { icon: BitkitIconComponent; label: string }> = {\n dark: { icon: IconModeDark, label: 'Dark' },\n light: { icon: IconModeLight, label: 'Light' },\n system: { icon: IconModeSystem, label: 'System' },\n};\n\nconst modeCollection = createListCollection<BitkitSelectMenuItemProps>({\n items: (['system', 'light', 'dark'] as const).map((value) => ({ ...modes[value], value })),\n});\n\nconst MENU_CROSS_OFFSET = 13;\n\nconst blockClosedTriggerSelection = (event: KeyboardEvent<HTMLElement>) => {\n const isTypeahead = event.key.length === 1 && event.key !== ' ' && !event.altKey && !event.ctrlKey && !event.metaKey;\n\n if (isTypeahead || ['ArrowLeft', 'ArrowRight', 'End', 'Home'].includes(event.key)) event.preventDefault();\n};\n\nexport interface BitkitUIHeaderModeSwitchProps extends Omit<\n SelectRootProps<BitkitSelectMenuItemProps>,\n | 'children'\n | 'collection'\n | 'defaultValue'\n | 'deselectable'\n | 'disabled'\n | 'multiple'\n | 'onValueChange'\n | 'positioning'\n | 'size'\n | 'value'\n> {\n label?: string;\n onValueChange?: (value: BitkitUIHeaderMode) => void;\n value?: BitkitUIHeaderMode;\n}\n\nconst UIHeaderModeSwitch = forwardRef<HTMLButtonElement, BitkitUIHeaderModeSwitchProps>((props, ref) => {\n const { css, label, onValueChange, value = 'system', ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n const { disablePortal } = useContext(BitkitPortalContext);\n\n const { icon: ModeIcon, label: modeLabel } = modes[value];\n const accessibleName = label ?? `Appearance: ${modeLabel}`;\n\n return (\n <Select.Root\n collection={modeCollection}\n lazyMount\n positioning={{\n offset: { crossAxis: MENU_CROSS_OFFSET, mainAxis: 0 },\n placement: 'bottom-end',\n sameWidth: false,\n }}\n unmountOnExit\n {...uiHeaderPart('mode-switch')}\n {...rest}\n css={[styles.modeSwitch, css]}\n onValueChange={(details) => onValueChange?.(details.value[0] as BitkitUIHeaderMode)}\n value={[value]}\n >\n <Select.Label srOnly>{accessibleName}</Select.Label>\n <Select.HiddenSelect />\n <Box css={styles.separator} {...uiHeaderPart('separator')} />\n <Select.Trigger asChild unstyled>\n <UIHeaderControlBase\n ref={ref}\n css={styles.modeControl}\n footprint=\"control\"\n label={accessibleName}\n onKeyDownCapture={blockClosedTriggerSelection}\n >\n {value === 'system' ? (\n <>\n <IconModeLight _dark={{ display: 'none' }} />\n <IconModeDark _dark={{ display: 'block' }} display=\"none\" />\n </>\n ) : (\n <ModeIcon />\n )}\n </UIHeaderControlBase>\n </Select.Trigger>\n <Portal disabled={disablePortal}>\n <Select.Positioner>\n <BitkitSelectMenu collection={modeCollection} />\n </Select.Positioner>\n </Portal>\n </Select.Root>\n );\n});\n\nUIHeaderModeSwitch.displayName = 'BitkitUIHeader.ModeSwitch';\n\nexport default UIHeaderModeSwitch;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAM,QAAkF;CACtF,MAAM;EAAE,MAAM;EAAc,OAAO;CAAO;CAC1C,OAAO;EAAE,MAAM;EAAe,OAAO;CAAQ;CAC7C,QAAQ;EAAE,MAAM;EAAgB,OAAO;CAAS;AAClD;AAEA,IAAM,iBAAiB,qBAAgD,EACrE,OAAQ;CAAC;CAAU;CAAS;AAAM,CAAC,CAAW,KAAK,WAAW;CAAE,GAAG,MAAM;CAAQ;AAAM,EAAE,EAC3F,CAAC;AAED,IAAM,oBAAoB;AAE1B,IAAM,+BAA+B,UAAsC;CAGzE,IAFoB,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,OAAO,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,CAAC,MAAM,WAE1F;EAAC;EAAa;EAAc;EAAO;CAAM,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,MAAM,eAAe;AAC1G;AAoBA,IAAM,qBAAqB,YAA8D,OAAO,QAAQ;CACtG,MAAM,EAAE,KAAK,OAAO,eAAe,QAAQ,UAAU,GAAG,SAAS;CAEjE,MAAM,EAAE,WAAW,mBAAmB;CACtC,MAAM,EAAE,kBAAkB,WAAW,mBAAmB;CAExD,MAAM,EAAE,MAAM,UAAU,OAAO,cAAc,MAAM;CACnD,MAAM,iBAAiB,SAAS,eAAe;CAE/C,OACE,qBAAC,OAAO,MAAR;EACE,YAAY;EACZ,WAAA;EACA,aAAa;GACX,QAAQ;IAAE,WAAW;IAAmB,UAAU;GAAE;GACpD,WAAW;GACX,WAAW;EACb;EACA,eAAA;EACA,GAAI,aAAa,aAAa;EAC9B,GAAI;EACJ,KAAK,CAAC,OAAO,YAAY,GAAG;EAC5B,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAwB;EAClF,OAAO,CAAC,KAAK;EAbf,UAAA;GAeE,oBAAC,OAAO,OAAR;IAAc,QAAA;IAAQ,UAAA;GAA6B,CAAA;GACnD,oBAAC,OAAO,cAAR,CAAsB,CAAA;GACtB,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAW,GAAI,aAAa,WAAW;GAAI,CAAA;GAC5D,oBAAC,OAAO,SAAR;IAAgB,SAAA;IAAQ,UAAA;IACtB,UAAA,oBAAC,qBAAD;KACO;KACL,KAAK,OAAO;KACZ,WAAU;KACV,OAAO;KACP,kBAAkB;KAEjB,UAAA,UAAU,WACT,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAe,OAAO,EAAE,SAAS,OAAO,EAAI,CAAA,GAC5C,oBAAC,cAAD;MAAc,OAAO,EAAE,SAAS,QAAQ;MAAG,SAAQ;KAAQ,CAAA,CAC3D,EAAA,CAAA,IAEF,oBAAC,UAAD,CAAW,CAAA;IAEM,CAAA;GACP,CAAA;GAChB,oBAAC,QAAD;IAAQ,UAAU;IAChB,UAAA,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD,EAAkB,YAAY,eAAiB,CAAA,EAC9B,CAAA;GACb,CAAA;EACG;;AAEjB,CAAC;AAED,mBAAmB,cAAc"}
1
+ {"version":3,"file":"UIHeaderModeSwitch.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderModeSwitch.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Menu } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck, IconModeDark, IconModeLight, IconModeSystem } from '../../icons';\nimport { usePortalContext } from '../../utilities/BitkitPortalContext';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderMode = 'dark' | 'light' | 'system';\n\nconst modes: Record<BitkitUIHeaderMode, { icon: BitkitIconComponent; label: string }> = {\n dark: { icon: IconModeDark, label: 'Dark' },\n light: { icon: IconModeLight, label: 'Light' },\n system: { icon: IconModeSystem, label: 'System' },\n};\n\nconst modeOrder = ['system', 'light', 'dark'] as const;\n\n// Lines the menu's check up with the trigger's icon: 1px content border + 24 row end padding +\n// half the 24 check − half the 48 button. Coupled to the menu row's end padding.\nconst MENU_CROSS_OFFSET = 13;\n\nexport interface BitkitUIHeaderModeSwitchProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {\n /** The mode to start on when the switch is left uncontrolled. */\n defaultValue?: BitkitUIHeaderMode;\n /** The trigger's accessible name. It shows no text of its own. */\n label?: string;\n /** Fires with the mode picked from the menu. */\n onValueChange?: (value: BitkitUIHeaderMode) => void;\n /** The chosen mode. Pass it with `onValueChange` to hold the state in the product. */\n value?: BitkitUIHeaderMode;\n}\n\n/**\n * The appearance menu — System, Light or Dark — behind a separator at the trailing end of the bar.\n * Unlike the header's other controls it owns the menu it opens, because the three options are the\n * same everywhere; applying the mode is still the consumer's.\n *\n * The button shows the mode in force rather than the one chosen, so `system` draws a sun or a moon\n * rather than a screen. It reads that from the `light` / `dark` class every Bitkit colour token\n * already keys on, so the icon can never disagree with what is around it.\n */\nconst UIHeaderModeSwitch = forwardRef<HTMLButtonElement, BitkitUIHeaderModeSwitchProps>((props, ref) => {\n const { css, defaultValue = 'light', label, onValueChange, value: valueProp, ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n const { disablePortal } = usePortalContext();\n const [value, setValue] = useControllableState<BitkitUIHeaderMode>({\n defaultValue,\n onChange: onValueChange,\n value: valueProp,\n });\n\n const { icon: ModeIcon, label: modeLabel } = modes[value];\n const accessibleName = label ?? `Appearance: ${modeLabel}`;\n\n return (\n // `Menu.Root` renders no element, so this box is the root: it carries the separator and the part.\n <Box {...uiHeaderPart('mode-switch')} {...rest} css={[styles.modeSwitch, css]}>\n <Menu.Root\n lazyMount\n positioning={{ offset: { crossAxis: MENU_CROSS_OFFSET, mainAxis: 0 }, placement: 'bottom-end' }}\n unmountOnExit\n >\n <Menu.Trigger asChild>\n <UIHeaderControlBase ref={ref} css={styles.modeControl} footprint=\"control\" label={accessibleName}>\n {value === 'system' ? (\n <>\n <IconModeLight _dark={{ display: 'none' }} />\n <IconModeDark _dark={{ display: 'block' }} display=\"none\" />\n </>\n ) : (\n <ModeIcon />\n )}\n </UIHeaderControlBase>\n </Menu.Trigger>\n <Portal disabled={disablePortal}>\n <Menu.Positioner>\n <Menu.Content>\n <Menu.RadioItemGroup\n onValueChange={(details) => setValue(details.value as BitkitUIHeaderMode)}\n value={value}\n >\n {modeOrder.map((mode) => {\n const { icon: Icon, label: itemLabel } = modes[mode];\n\n return (\n <Menu.RadioItem key={mode} value={mode}>\n <Icon />\n <Menu.ItemText>{itemLabel}</Menu.ItemText>\n <Menu.ItemIndicator asChild>\n <IconCheck />\n </Menu.ItemIndicator>\n </Menu.RadioItem>\n );\n })}\n </Menu.RadioItemGroup>\n </Menu.Content>\n </Menu.Positioner>\n </Portal>\n </Menu.Root>\n </Box>\n );\n});\n\nUIHeaderModeSwitch.displayName = 'BitkitUIHeader.ModeSwitch';\n\nexport default UIHeaderModeSwitch;\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAM,QAAkF;CACtF,MAAM;EAAE,MAAM;EAAc,OAAO;CAAO;CAC1C,OAAO;EAAE,MAAM;EAAe,OAAO;CAAQ;CAC7C,QAAQ;EAAE,MAAM;EAAgB,OAAO;CAAS;AAClD;AAEA,IAAM,YAAY;CAAC;CAAU;CAAS;AAAM;AAI5C,IAAM,oBAAoB;;;;;;;;;;AAsB1B,IAAM,qBAAqB,YAA8D,OAAO,QAAQ;CACtG,MAAM,EAAE,KAAK,eAAe,SAAS,OAAO,eAAe,OAAO,WAAW,GAAG,SAAS;CAEzF,MAAM,EAAE,WAAW,mBAAmB;CACtC,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,CAAC,OAAO,YAAY,qBAAyC;EACjE;EACA,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,EAAE,MAAM,UAAU,OAAO,cAAc,MAAM;CACnD,MAAM,iBAAiB,SAAS,eAAe;CAE/C,OAEE,oBAAC,KAAD;EAAK,GAAI,aAAa,aAAa;EAAG,GAAI;EAAM,KAAK,CAAC,OAAO,YAAY,GAAG;EAC1E,UAAA,qBAAC,KAAK,MAAN;GACE,WAAA;GACA,aAAa;IAAE,QAAQ;KAAE,WAAW;KAAmB,UAAU;IAAE;IAAG,WAAW;GAAa;GAC9F,eAAA;GAHF,UAAA,CAKE,oBAAC,KAAK,SAAN;IAAc,SAAA;IACZ,UAAA,oBAAC,qBAAD;KAA0B;KAAK,KAAK,OAAO;KAAa,WAAU;KAAU,OAAO;KAChF,UAAA,UAAU,WACT,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAe,OAAO,EAAE,SAAS,OAAO,EAAI,CAAA,GAC5C,oBAAC,cAAD;MAAc,OAAO,EAAE,SAAS,QAAQ;MAAG,SAAQ;KAAQ,CAAA,CAC3D,EAAA,CAAA,IAEF,oBAAC,UAAD,CAAW,CAAA;IAEM,CAAA;GACT,CAAA,GACd,oBAAC,QAAD;IAAQ,UAAU;IAChB,UAAA,oBAAC,KAAK,YAAN,EAAA,UACE,oBAAC,KAAK,SAAN,EAAA,UACE,oBAAC,KAAK,gBAAN;KACE,gBAAgB,YAAY,SAAS,QAAQ,KAA2B;KACjE;KAEN,UAAA,UAAU,KAAK,SAAS;MACvB,MAAM,EAAE,MAAM,MAAM,OAAO,cAAc,MAAM;MAE/C,OACE,qBAAC,KAAK,WAAN;OAA2B,OAAO;OAAlC,UAAA;QACE,oBAAC,MAAD,CAAO,CAAA;QACP,oBAAC,KAAK,UAAN,EAAA,UAAgB,UAAyB,CAAA;QACzC,oBAAC,KAAK,eAAN;SAAoB,SAAA;SAClB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACM,CAAA;OACN;MANK,GAAA,IAML;KAEpB,CAAC;IACkB,CAAA,EACT,CAAA,EACC,CAAA;GACX,CAAA,CACC;;CACR,CAAA;AAET,CAAC;AAED,mBAAmB,cAAc"}
package/dist/theme/slot-recipes/Menu.recipe.js CHANGED
@@ -97,6 +97,13 @@ var menuSlotRecipe = defineSlotRecipe({
97
97
  },
98
98
  "& [data-suffix-icon]": { color: "icon/tertiary" }
99
99
  },
100
+ itemIndicator: {
101
+ alignItems: "center",
102
+ color: "icon/interactive",
103
+ display: "flex",
104
+ justifyContent: "center",
105
+ marginInlineStart: "auto"
106
+ },
100
107
  itemGroupLabel: {
101
108
  "& .separator": { borderColor: "border/minimal" },
102
109
  textStyle: "heading/h6",
package/dist/theme/slot-recipes/Menu.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n _icon: {\n color: 'icon/primary',\n },\n};\nconst itemActiveDanger: SystemStyleObject = {\n background: 'button/danger-secondary/bg-active',\n color: 'button/danger-secondary/fg-active',\n _icon: {\n color: 'button/danger-secondary/fg-active',\n },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n className: 'menu',\n slots: [...menuAnatomy.keys(), 'itemHelper'],\n variants: {\n size: {\n lg: {\n item: {\n alignItems: 'center',\n paddingY: '12',\n textStyle: 'body/lg/regular',\n // With a helper line the item aligns to the top of the label and gets tighter padding.\n '&[data-helper]': {\n alignItems: 'flex-start',\n paddingY: '8',\n },\n },\n },\n md: {\n item: {\n alignItems: 'center',\n // The label line (20px) alone is shorter than the designed 40px row.\n minHeight: '40',\n paddingY: '8',\n textStyle: 'body/md/regular',\n '&[data-helper]': {\n _icon: {\n // Optically center the 16px icon against the 20px label line.\n marginTop: '2',\n },\n alignItems: 'flex-start',\n paddingY: '6',\n },\n },\n },\n },\n },\n base: {\n content: {\n // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n zIndex: 'popover',\n borderRadius: '4',\n paddingY: '8',\n border: '1px solid',\n borderColor: 'border/minimal',\n _focusVisible: { outline: 'none' },\n boxShadow: 'elevation/lg',\n background: 'background/primary',\n maxHeight: 'var(--available-height)',\n // The cap is useless without these: the positioner sets --available-height from the viewport,\n // and a longer list then spills out of the content box instead of scrolling inside it.\n overflow: 'hidden',\n overflowY: 'auto',\n _open: {\n animationStyle: 'slide-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'slide-fade-out',\n animationDuration: 'faster',\n },\n },\n itemHelper: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n item: {\n _icon: {\n color: 'icon/secondary',\n _active: {\n color: 'icon/primary',\n },\n },\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n userSelect: 'none',\n flexDirection: 'row',\n paddingLeft: '16',\n paddingRight: '24',\n '&[data-danger]': {\n color: 'button/danger-secondary/fg',\n _icon: {\n color: 'button/danger-secondary/fg',\n },\n _active: itemActiveDanger,\n _highlighted: {\n background: 'button/danger-secondary/bg-hover',\n color: 'button/danger-secondary/fg-hover',\n _active: itemActiveDanger,\n _icon: {\n color: 'button/danger-secondary/fg-hover',\n },\n },\n },\n _active: itemActive,\n _highlighted: {\n background: 'button/secondary/bg-hover',\n _active: itemActive,\n },\n // After the danger and highlight blocks: equally specific, so the later one wins for a disabled danger item.\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n _highlighted: {\n background: 'transparent',\n },\n },\n // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n // state — including the destructive one, which overrides `_icon` above.\n '& [data-suffix-icon]': {\n color: 'icon/tertiary',\n },\n },\n itemGroupLabel: {\n // The rule after the label is a Chakra Separator, whose recipe base is `border/regular` — a\n // shade darker than the menu's own separator. Match `BitkitActionMenu.Separator`.\n '& .separator': {\n borderColor: 'border/minimal',\n },\n textStyle: 'heading/h6',\n color: 'text/tertiary',\n paddingTop: '12',\n paddingLeft: '16',\n paddingRight: '16',\n paddingBottom: '6',\n display: 'flex',\n gap: '8',\n flexDirection: 'row',\n alignItems: 'center',\n },\n separator: {\n color: 'border/minimal',\n marginY: '8',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default menuSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,aAAgC;CACpC,YAAY;CACZ,OAAO,EACL,OAAO,eACT;AACF;AACA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,OAAO;CACP,OAAO,EACL,OAAO,oCACT;AACF;AACA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,CAAC,GAAG,YAAY,KAAK,GAAG,YAAY;CAC3C,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,WAAW;GAEX,kBAAkB;IAChB,YAAY;IACZ,UAAU;GACZ;EACF,EACF;EACA,IAAI,EACF,MAAM;GACJ,YAAY;GAEZ,WAAW;GACX,UAAU;GACV,WAAW;GACX,kBAAkB;IAChB,OAAO,EAEL,WAAW,IACb;IACA,YAAY;IACZ,UAAU;GACZ;EACF,EACF;CACF,EACF;CACA,MAAM;EACJ,SAAS;GAIP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,QAAQ;GACR,aAAa;GACb,eAAe,EAAE,SAAS,OAAO;GACjC,WAAW;GACX,YAAY;GACZ,WAAW;GAGX,UAAU;GACV,WAAW;GACX,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,OAAO;IACL,OAAO;IACP,SAAS,EACP,OAAO,eACT;GACF;GACA,QAAQ;GACR,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GACf,aAAa;GACb,cAAc;GACd,kBAAkB;IAChB,OAAO;IACP,OAAO,EACL,OAAO,6BACT;IACA,SAAS;IACT,cAAc;KACZ,YAAY;KACZ,OAAO;KACP,SAAS;KACT,OAAO,EACL,OAAO,mCACT;IACF;GACF;GACA,SAAS;GACT,cAAc;IACZ,YAAY;IACZ,SAAS;GACX;GAEA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,OAAO,EACL,OAAO,gBACT;IACA,cAAc,EACZ,YAAY,cACd;GACF;GAGA,wBAAwB,EACtB,OAAO,gBACT;EACF;EACA,gBAAgB;GAGd,gBAAgB,EACd,aAAa,iBACf;GACA,WAAW;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,cAAc;GACd,eAAe;GACf,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
1
+ {"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n _icon: {\n color: 'icon/primary',\n },\n};\nconst itemActiveDanger: SystemStyleObject = {\n background: 'button/danger-secondary/bg-active',\n color: 'button/danger-secondary/fg-active',\n _icon: {\n color: 'button/danger-secondary/fg-active',\n },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n className: 'menu',\n slots: [...menuAnatomy.keys(), 'itemHelper'],\n variants: {\n size: {\n lg: {\n item: {\n alignItems: 'center',\n paddingY: '12',\n textStyle: 'body/lg/regular',\n // With a helper line the item aligns to the top of the label and gets tighter padding.\n '&[data-helper]': {\n alignItems: 'flex-start',\n paddingY: '8',\n },\n },\n },\n md: {\n item: {\n alignItems: 'center',\n // The label line (20px) alone is shorter than the designed 40px row.\n minHeight: '40',\n paddingY: '8',\n textStyle: 'body/md/regular',\n '&[data-helper]': {\n _icon: {\n // Optically center the 16px icon against the 20px label line.\n marginTop: '2',\n },\n alignItems: 'flex-start',\n paddingY: '6',\n },\n },\n },\n },\n },\n base: {\n content: {\n // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n zIndex: 'popover',\n borderRadius: '4',\n paddingY: '8',\n border: '1px solid',\n borderColor: 'border/minimal',\n _focusVisible: { outline: 'none' },\n boxShadow: 'elevation/lg',\n background: 'background/primary',\n maxHeight: 'var(--available-height)',\n // The cap is useless without these: the positioner sets --available-height from the viewport,\n // and a longer list then spills out of the content box instead of scrolling inside it.\n overflow: 'hidden',\n overflowY: 'auto',\n _open: {\n animationStyle: 'slide-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'slide-fade-out',\n animationDuration: 'faster',\n },\n },\n itemHelper: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n item: {\n _icon: {\n color: 'icon/secondary',\n _active: {\n color: 'icon/primary',\n },\n },\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n userSelect: 'none',\n flexDirection: 'row',\n paddingLeft: '16',\n paddingRight: '24',\n '&[data-danger]': {\n color: 'button/danger-secondary/fg',\n _icon: {\n color: 'button/danger-secondary/fg',\n },\n _active: itemActiveDanger,\n _highlighted: {\n background: 'button/danger-secondary/bg-hover',\n color: 'button/danger-secondary/fg-hover',\n _active: itemActiveDanger,\n _icon: {\n color: 'button/danger-secondary/fg-hover',\n },\n },\n },\n _active: itemActive,\n _highlighted: {\n background: 'button/secondary/bg-hover',\n _active: itemActive,\n },\n // After the danger and highlight blocks: equally specific, so the later one wins for a disabled danger item.\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n _highlighted: {\n background: 'transparent',\n },\n },\n // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n // state — including the destructive one, which overrides `_icon` above.\n '& [data-suffix-icon]': {\n color: 'icon/tertiary',\n },\n },\n itemIndicator: {\n alignItems: 'center',\n color: 'icon/interactive',\n display: 'flex',\n justifyContent: 'center',\n marginInlineStart: 'auto',\n },\n itemGroupLabel: {\n // The rule after the label is a Chakra Separator, whose recipe base is `border/regular` — a\n // shade darker than the menu's own separator. Match `BitkitActionMenu.Separator`.\n '& .separator': {\n borderColor: 'border/minimal',\n },\n textStyle: 'heading/h6',\n color: 'text/tertiary',\n paddingTop: '12',\n paddingLeft: '16',\n paddingRight: '16',\n paddingBottom: '6',\n display: 'flex',\n gap: '8',\n flexDirection: 'row',\n alignItems: 'center',\n },\n separator: {\n color: 'border/minimal',\n marginY: '8',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default menuSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,aAAgC;CACpC,YAAY;CACZ,OAAO,EACL,OAAO,eACT;AACF;AACA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,OAAO;CACP,OAAO,EACL,OAAO,oCACT;AACF;AACA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,CAAC,GAAG,YAAY,KAAK,GAAG,YAAY;CAC3C,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,WAAW;GAEX,kBAAkB;IAChB,YAAY;IACZ,UAAU;GACZ;EACF,EACF;EACA,IAAI,EACF,MAAM;GACJ,YAAY;GAEZ,WAAW;GACX,UAAU;GACV,WAAW;GACX,kBAAkB;IAChB,OAAO,EAEL,WAAW,IACb;IACA,YAAY;IACZ,UAAU;GACZ;EACF,EACF;CACF,EACF;CACA,MAAM;EACJ,SAAS;GAIP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,QAAQ;GACR,aAAa;GACb,eAAe,EAAE,SAAS,OAAO;GACjC,WAAW;GACX,YAAY;GACZ,WAAW;GAGX,UAAU;GACV,WAAW;GACX,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,OAAO;IACL,OAAO;IACP,SAAS,EACP,OAAO,eACT;GACF;GACA,QAAQ;GACR,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GACf,aAAa;GACb,cAAc;GACd,kBAAkB;IAChB,OAAO;IACP,OAAO,EACL,OAAO,6BACT;IACA,SAAS;IACT,cAAc;KACZ,YAAY;KACZ,OAAO;KACP,SAAS;KACT,OAAO,EACL,OAAO,mCACT;IACF;GACF;GACA,SAAS;GACT,cAAc;IACZ,YAAY;IACZ,SAAS;GACX;GAEA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,OAAO,EACL,OAAO,gBACT;IACA,cAAc,EACZ,YAAY,cACd;GACF;GAGA,wBAAwB,EACtB,OAAO,gBACT;EACF;EACA,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,gBAAgB;GAChB,mBAAmB;EACrB;EACA,gBAAgB;GAGd,gBAAgB,EACd,aAAa,iBACf;GACA,WAAW;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,cAAc;GACd,eAAe;GACf,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
package/dist/theme/slot-recipes/UIHeader.recipe.d.ts CHANGED
@@ -10,5 +10,5 @@ export declare const uiHeaderHeightPx = 48;
10
10
  * assume it.
11
11
  */
12
12
  export declare const uiHeaderHeight: `${number}rem`;
13
- declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
13
+ declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
14
14
  export default uiHeaderSlotRecipe;
package/dist/theme/slot-recipes/UIHeader.recipe.js CHANGED
@@ -68,7 +68,6 @@ var uiHeaderSlotRecipe = defineSlotRecipe({
68
68
  "searchField",
69
69
  "searchIcon",
70
70
  "searchInput",
71
- "separator",
72
71
  "spacer"
73
72
  ],
74
73
  base: {
@@ -136,16 +135,17 @@ var uiHeaderSlotRecipe = defineSlotRecipe({
136
135
  modeSwitch: {
137
136
  alignItems: "center",
138
137
  display: "flex",
139
- flexShrink: 0
138
+ flexShrink: 0,
139
+ _before: {
140
+ background: "sys/ui/header/separator",
141
+ content: "\"\"",
142
+ height: "20",
143
+ marginInlineEnd: "8",
144
+ marginInlineStart: "12",
145
+ width: "1"
146
+ }
140
147
  },
141
148
  modeControl: { _open: { background: "sys/ui/header/control/bg-active" } },
142
- separator: {
143
- background: "sys/ui/header/separator",
144
- height: "20",
145
- marginInlineEnd: "8",
146
- marginInlineStart: "12",
147
- width: "1"
148
- },
149
149
  navButton: {
150
150
  ...controlBase,
151
151
  paddingBlock: "8",
package/dist/theme/slot-recipes/UIHeader.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'modeControl',\n 'modeSwitch',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'separator',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n modeSwitch: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n },\n modeControl: {\n _open: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n separator: {\n background: 'sys/ui/header/separator',\n height: '20',\n marginInlineEnd: '8',\n marginInlineStart: '12',\n width: '1',\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _focusVisible: {\n outline: 'none',\n outlineWidth: 0,\n },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}
1
+ {"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'modeControl',\n 'modeSwitch',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n modeSwitch: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n _before: {\n background: 'sys/ui/header/separator',\n content: '\"\"',\n height: '20',\n marginInlineEnd: '8',\n marginInlineStart: '12',\n width: '1',\n },\n },\n modeControl: {\n _open: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _focusVisible: {\n outline: 'none',\n outlineWidth: 0,\n },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -3769,7 +3769,7 @@ declare const slotRecipes: {
3769
3769
  };
3770
3770
  };
3771
3771
  }>;
3772
- uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
3772
+ uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
3773
3773
  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", {
3774
3774
  layout: {
3775
3775
  rail: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.485-beta.3131",
4
+ "version": "0.3.485-beta.3132",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",