@bitrise/bitkit-v2 0.3.481-beta.3069 → 0.3.481-beta.3071

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 (143) hide show
  1. package/dist/components/BitkitCalendar/BitkitCalendar.d.ts +12 -0
  2. package/dist/components/BitkitCalendar/BitkitCalendar.js +7 -1
  3. package/dist/components/BitkitCalendar/BitkitCalendar.js.map +1 -1
  4. package/dist/components/BitkitCalendar/components/CalendarContent.d.ts +5 -1
  5. package/dist/components/BitkitCalendar/components/CalendarContent.js +60 -43
  6. package/dist/components/BitkitCalendar/components/CalendarContent.js.map +1 -1
  7. package/dist/components/BitkitCalendar/components/CalendarMonth.d.ts +4 -2
  8. package/dist/components/BitkitCalendar/components/CalendarMonth.js +15 -5
  9. package/dist/components/BitkitCalendar/components/CalendarMonth.js.map +1 -1
  10. package/dist/components/BitkitCalendar/components/CalendarMonthSelect.d.ts +2 -1
  11. package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js +3 -2
  12. package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map +1 -1
  13. package/dist/components/BitkitCalendar/components/CalendarNextTrigger.d.ts +3 -1
  14. package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js +3 -3
  15. package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
  16. package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.d.ts +3 -1
  17. package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +3 -3
  18. package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
  19. package/dist/components/BitkitCalendar/components/CalendarSelect.d.ts +1 -0
  20. package/dist/components/BitkitCalendar/components/CalendarSelect.js +5 -3
  21. package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
  22. package/dist/components/BitkitCalendar/components/CalendarTrigger.js +1 -0
  23. package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map +1 -1
  24. package/dist/components/BitkitCalendar/components/CalendarYearSelect.d.ts +2 -1
  25. package/dist/components/BitkitCalendar/components/CalendarYearSelect.js +3 -2
  26. package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map +1 -1
  27. package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts +2 -0
  28. package/dist/components/BitkitDatePicker/BitkitDatePicker.js +2 -1
  29. package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map +1 -1
  30. package/dist/components/BitkitFilter/BitkitFilter.context.d.ts +65 -0
  31. package/dist/components/BitkitFilter/BitkitFilter.context.js +82 -0
  32. package/dist/components/BitkitFilter/BitkitFilter.context.js.map +1 -0
  33. package/dist/components/BitkitFilter/BitkitFilter.d.ts +55 -0
  34. package/dist/components/BitkitFilter/BitkitFilter.js +247 -0
  35. package/dist/components/BitkitFilter/BitkitFilter.js.map +1 -0
  36. package/dist/components/BitkitFilter/BitkitFilter.utils.d.ts +18 -0
  37. package/dist/components/BitkitFilter/BitkitFilter.utils.js +42 -0
  38. package/dist/components/BitkitFilter/BitkitFilter.utils.js.map +1 -0
  39. package/dist/components/BitkitFilter/BitkitFilterAdd.d.ts +18 -0
  40. package/dist/components/BitkitFilter/BitkitFilterAdd.js +200 -0
  41. package/dist/components/BitkitFilter/BitkitFilterAdd.js.map +1 -0
  42. package/dist/components/BitkitFilter/BitkitFilterDateRange.d.ts +26 -0
  43. package/dist/components/BitkitFilter/BitkitFilterDateRange.js +118 -0
  44. package/dist/components/BitkitFilter/BitkitFilterDateRange.js.map +1 -0
  45. package/dist/components/BitkitFilter/BitkitFilterSearch.d.ts +23 -0
  46. package/dist/components/BitkitFilter/BitkitFilterSearch.js +72 -0
  47. package/dist/components/BitkitFilter/BitkitFilterSearch.js.map +1 -0
  48. package/dist/components/BitkitFilter/BitkitFilterSelect.d.ts +61 -0
  49. package/dist/components/BitkitFilter/BitkitFilterSelect.js +149 -0
  50. package/dist/components/BitkitFilter/BitkitFilterSelect.js.map +1 -0
  51. package/dist/components/BitkitFilter/BitkitFilterSwitch.d.ts +28 -0
  52. package/dist/components/BitkitFilter/BitkitFilterSwitch.js +87 -0
  53. package/dist/components/BitkitFilter/BitkitFilterSwitch.js.map +1 -0
  54. package/dist/components/BitkitFilter/components/FilterChip.d.ts +23 -0
  55. package/dist/components/BitkitFilter/components/FilterChip.js +66 -0
  56. package/dist/components/BitkitFilter/components/FilterChip.js.map +1 -0
  57. package/dist/components/BitkitFilter/components/FilterField.d.ts +15 -0
  58. package/dist/components/BitkitFilter/components/FilterField.js +60 -0
  59. package/dist/components/BitkitFilter/components/FilterField.js.map +1 -0
  60. package/dist/components/BitkitFilter/components/FilterPanel.d.ts +42 -0
  61. package/dist/components/BitkitFilter/components/FilterPanel.js +126 -0
  62. package/dist/components/BitkitFilter/components/FilterPanel.js.map +1 -0
  63. package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts +15 -0
  64. package/dist/components/BitkitFilter/components/FilterSearchInput.js +42 -0
  65. package/dist/components/BitkitFilter/components/FilterSearchInput.js.map +1 -0
  66. package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts +45 -0
  67. package/dist/components/BitkitFilter/components/FilterSelectForm.js +341 -0
  68. package/dist/components/BitkitFilter/components/FilterSelectForm.js.map +1 -0
  69. package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.d.ts +4 -3
  70. package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js +3 -2
  71. package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js.map +1 -1
  72. package/dist/components/BitkitMarkdown/BitkitMarkdown.js +1 -1
  73. package/dist/components/BitkitNoteCard/BitkitNoteCard.js +1 -1
  74. package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +1 -1
  75. package/dist/components/index.d.ts +6 -1
  76. package/dist/main.js +8 -9
  77. package/dist/theme/recipes/index.d.ts +525 -0
  78. package/dist/theme/recipes/index.js +1 -3
  79. package/dist/theme/recipes/index.js.map +1 -1
  80. package/dist/theme/semantic-tokens/index.d.ts +0 -5
  81. package/dist/theme/semantic-tokens/semanticColors.d.ts +0 -5
  82. package/dist/theme/semantic-tokens/semanticColors.js +0 -1
  83. package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
  84. package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +15 -0
  85. package/dist/theme/slot-recipes/DatePicker.recipe.js +72 -22
  86. package/dist/theme/slot-recipes/DatePicker.recipe.js.map +1 -1
  87. package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +85 -0
  88. package/dist/theme/slot-recipes/DatePickerSelect.recipe.js +35 -10
  89. package/dist/theme/slot-recipes/DatePickerSelect.recipe.js.map +1 -1
  90. package/dist/theme/slot-recipes/Filter.recipe.d.ts +37 -0
  91. package/dist/theme/slot-recipes/Filter.recipe.js +655 -0
  92. package/dist/theme/slot-recipes/Filter.recipe.js.map +1 -0
  93. package/dist/theme/slot-recipes/Listbox.recipe.d.ts +22 -0
  94. package/dist/theme/slot-recipes/Listbox.recipe.js +96 -0
  95. package/dist/theme/slot-recipes/Listbox.recipe.js.map +1 -0
  96. package/dist/theme/slot-recipes/Menu.recipe.js +6 -1
  97. package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
  98. package/dist/theme/slot-recipes/Tag.recipe.d.ts +1 -1
  99. package/dist/theme/slot-recipes/UISideNav.recipe.d.ts +2 -1
  100. package/dist/theme/slot-recipes/UISideNav.recipe.js +3 -2
  101. package/dist/theme/slot-recipes/UISideNav.recipe.js.map +1 -1
  102. package/dist/theme/slot-recipes/index.d.ts +160 -3
  103. package/dist/theme/slot-recipes/index.js +4 -2
  104. package/dist/theme/slot-recipes/index.js.map +1 -1
  105. package/dist/theme/themeUtils.d.ts +0 -6
  106. package/dist/theme/themeUtils.js +1 -7
  107. package/dist/theme/themeUtils.js.map +1 -1
  108. package/dist/utilities/BitkitPortalContext.js +3 -2
  109. package/dist/utilities/BitkitPortalContext.js.map +1 -1
  110. package/docs/v1-to-v2-migration-guide.md +48 -1
  111. package/package.json +1 -1
  112. package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +0 -37
  113. package/dist/components/BitkitUIHeader/BitkitUIHeader.js +0 -113
  114. package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +0 -1
  115. package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +0 -10
  116. package/dist/components/BitkitUIHeader/BitriseLogo.js +0 -86
  117. package/dist/components/BitkitUIHeader/BitriseLogo.js.map +0 -1
  118. package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +0 -23
  119. package/dist/components/BitkitUIHeader/UIHeaderAccount.js +0 -40
  120. package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +0 -1
  121. package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +0 -32
  122. package/dist/components/BitkitUIHeader/UIHeaderButton.js +0 -41
  123. package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +0 -1
  124. package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +0 -13
  125. package/dist/components/BitkitUIHeader/UIHeaderContext.js +0 -11
  126. package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +0 -1
  127. package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +0 -65
  128. package/dist/components/BitkitUIHeader/UIHeaderControl.js +0 -71
  129. package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +0 -1
  130. package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +0 -20
  131. package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +0 -46
  132. package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +0 -1
  133. package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +0 -32
  134. package/dist/components/BitkitUIHeader/UIHeaderSearch.js +0 -116
  135. package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +0 -1
  136. package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts +0 -9
  137. package/dist/components/BitkitUIHeader/uiHeaderPart.js +0 -13
  138. package/dist/components/BitkitUIHeader/uiHeaderPart.js.map +0 -1
  139. package/dist/theme/recipes/UIHeaderButton.recipe.js +0 -103
  140. package/dist/theme/recipes/UIHeaderButton.recipe.js.map +0 -1
  141. package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +0 -4
  142. package/dist/theme/slot-recipes/UIHeader.recipe.js +0 -243
  143. package/dist/theme/slot-recipes/UIHeader.recipe.js.map +0 -1
@@ -1,41 +0,0 @@
1
- import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
2
- import { forwardRef } from "react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- import { Text } from "@chakra-ui/react/text";
5
- //#region lib/components/BitkitUIHeader/UIHeaderButton.tsx
6
- /**
7
- * A labelled button in the header bar, for an action that needs more than an icon — the Ask AI
8
- * entry point is the one in the design.
9
- *
10
- * It comes in one size: the bar is 48px tall and leaves room for nothing else.
11
- */
12
- var UIHeaderButton = forwardRef((props, ref) => {
13
- const { badge, children, css, icon: Icon, selected, state, suffixIcon: SuffixIcon, variant = "primary", ...rest } = props;
14
- const recipe = useRecipe({ key: "uiHeaderButton" });
15
- return /* @__PURE__ */ jsxs(chakra.button, {
16
- ref,
17
- "aria-expanded": selected,
18
- "data-selected": selected ? "" : void 0,
19
- disabled: state === "disabled",
20
- type: "button",
21
- ...rest,
22
- css: [recipe({
23
- badge: badge === true ? "idle" : badge || void 0,
24
- variant
25
- }), css],
26
- children: [
27
- !!Icon && /* @__PURE__ */ jsx(Icon, { size: "16" }),
28
- /* @__PURE__ */ jsx(Text, {
29
- as: "span",
30
- paddingInline: "4",
31
- children
32
- }),
33
- !!SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, { size: "16" })
34
- ]
35
- });
36
- });
37
- UIHeaderButton.displayName = "BitkitUIHeader.Button";
38
- //#endregion
39
- export { UIHeaderButton as default };
40
-
41
- //# sourceMappingURL=UIHeaderButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UIHeaderButton.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { type BitkitUIHeaderBadge } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n /**\n * An unread marker on the button's trailing top corner. `pulse` animates it, for something that\n * has just arrived and is worth looking at now; `idle` and `true` are the same marker at rest.\n */\n badge?: BitkitUIHeaderBadge;\n /** The button's label. */\n children: ReactNode;\n /** Leading icon. */\n icon?: BitkitIconComponent;\n /**\n * Marks the button as the one whose panel is open, which keeps it pressed. The consumer owns the\n * panel, so it owns this too.\n */\n selected?: boolean;\n state?: 'disabled';\n /** Trailing icon, for a button that opens a menu. */\n suffixIcon?: BitkitIconComponent;\n variant?: 'primary' | 'secondary' | 'tertiary';\n}\n\n/**\n * A labelled button in the header bar, for an action that needs more than an icon — the Ask AI\n * entry point is the one in the design.\n *\n * It comes in one size: the bar is 48px tall and leaves room for nothing else.\n */\nconst UIHeaderButton = forwardRef<HTMLButtonElement, BitkitUIHeaderButtonProps>((props, ref) => {\n const {\n badge,\n children,\n css,\n icon: Icon,\n selected,\n state,\n suffixIcon: SuffixIcon,\n variant = 'primary',\n ...rest\n } = props;\n\n const recipe = useRecipe({ key: 'uiHeaderButton' });\n\n return (\n <chakra.button\n ref={ref}\n aria-expanded={selected}\n data-selected={selected ? '' : undefined}\n disabled={state === 'disabled'}\n // An action in the header, not a form submit. Before the spread, so a consumer can still opt\n // into `type=\"submit\"`.\n type=\"button\"\n {...rest}\n css={[recipe({ badge: badge === true ? 'idle' : badge || undefined, variant }), css]}\n >\n {!!Icon && <Icon size=\"16\" />}\n <Text as=\"span\" paddingInline=\"4\">\n {children}\n </Text>\n {!!SuffixIcon && <SuffixIcon size=\"16\" />}\n </chakra.button>\n );\n});\n\nUIHeaderButton.displayName = 'BitkitUIHeader.Button';\n\nexport default UIHeaderButton;\n"],"mappings":";;;;;;;;;;;AAkCA,IAAM,iBAAiB,YAA0D,OAAO,QAAQ;CAC9F,MAAM,EACJ,OACA,UACA,KACA,MAAM,MACN,UACA,OACA,YAAY,YACZ,UAAU,WACV,GAAG,SACD;CAEJ,MAAM,SAAS,UAAU,EAAE,KAAK,iBAAiB,CAAC;CAElD,OACE,qBAAC,OAAO,QAAR;EACO;EACL,iBAAe;EACf,iBAAe,WAAW,KAAK,KAAA;EAC/B,UAAU,UAAU;EAGpB,MAAK;EACL,GAAI;EACJ,KAAK,CAAC,OAAO;GAAE,OAAO,UAAU,OAAO,SAAS,SAAS,KAAA;GAAW;EAAQ,CAAC,GAAG,GAAG;EATrF,UAAA;GAWG,CAAC,CAAC,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GAC5B,oBAAC,MAAD;IAAM,IAAG;IAAO,eAAc;IAC3B;GACG,CAAA;GACL,CAAC,CAAC,cAAc,oBAAC,YAAD,EAAY,MAAK,KAAM,CAAA;EAC3B;;AAEnB,CAAC;AAED,eAAe,cAAc"}
@@ -1,13 +0,0 @@
1
- import { SystemStyleObject } from '@chakra-ui/react/styled-system';
2
- import { RefObject } from 'react';
3
- export interface UIHeaderContextValue {
4
- /**
5
- * The bar itself, without the banner below it. The search reads it to tell a press on another
6
- * control — which dismisses the open field — from one on anything the consumer rendered, whether
7
- * that is elsewhere on the page or in the header's own banner.
8
- */
9
- barRef: RefObject<HTMLDivElement | null>;
10
- styles: Record<string, SystemStyleObject>;
11
- }
12
- declare const UIHeaderContextProvider: import('react').Provider<UIHeaderContextValue>, useUIHeaderContext: () => UIHeaderContextValue;
13
- export { UIHeaderContextProvider, useUIHeaderContext };
@@ -1,11 +0,0 @@
1
- import { createContext } from "@chakra-ui/react";
2
- //#region lib/components/BitkitUIHeader/UIHeaderContext.tsx
3
- var [UIHeaderContextProvider, useUIHeaderContext] = createContext({
4
- hookName: "useUIHeaderContext",
5
- name: "UIHeaderContext",
6
- providerName: "<BitkitUIHeader />"
7
- });
8
- //#endregion
9
- export { UIHeaderContextProvider, useUIHeaderContext };
10
-
11
- //# sourceMappingURL=UIHeaderContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UIHeaderContext.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderContext.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type RefObject } from 'react';\n\nexport interface UIHeaderContextValue {\n /**\n * The bar itself, without the banner below it. The search reads it to tell a press on another\n * control — which dismisses the open field — from one on anything the consumer rendered, whether\n * that is elsewhere on the page or in the header's own banner.\n */\n barRef: RefObject<HTMLDivElement | null>;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [UIHeaderContextProvider, useUIHeaderContext] = createContext<UIHeaderContextValue>({\n hookName: 'useUIHeaderContext',\n name: 'UIHeaderContext',\n providerName: '<BitkitUIHeader />',\n});\n\nexport { UIHeaderContextProvider, useUIHeaderContext };\n"],"mappings":";;AAeA,IAAM,CAAC,yBAAyB,sBAAsB,cAAoC;CACxF,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC"}
@@ -1,65 +0,0 @@
1
- import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
2
- import { ReactNode } from 'react';
3
- import { BitkitIconComponent } from '../../icons';
4
- export type BitkitUIHeaderBadge = boolean | 'idle' | 'pulse';
5
- interface ControlCommonProps {
6
- /** Marks the control as carrying something unread. */
7
- badge?: BitkitUIHeaderBadge;
8
- /**
9
- * The control's accessible name. It shows no text of its own, so this is what a screen reader
10
- * announces.
11
- */
12
- label: string;
13
- /**
14
- * Marks the control as the one whose panel is open: a lighter background and an indicator along
15
- * the bottom edge of the bar. The consumer owns the panel, so it owns this too.
16
- *
17
- * It says nothing about where the user is. A control that is a link stays a link to somewhere
18
- * else, so this paints it without claiming it is the current page.
19
- */
20
- selected?: boolean;
21
- }
22
- interface ControlBaseCommonProps extends ControlCommonProps {
23
- children: ReactNode;
24
- /**
25
- * Which of the bar's control footprints to wear: the 48px square the icon controls and the
26
- * account button share, or the wider mobile navigation button. Named around the slot it picks
27
- * rather than `slot`, which is a native attribute every DOM element already takes.
28
- */
29
- footprint: 'control' | 'navButton';
30
- }
31
- interface ControlBaseAsButtonProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
32
- href?: undefined;
33
- isExternal?: undefined;
34
- }
35
- interface ControlBaseAsAnchorProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {
36
- href: string;
37
- isExternal?: boolean;
38
- }
39
- type ControlBaseProps = ControlBaseAsButtonProps | ControlBaseAsAnchorProps;
40
- /**
41
- * The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,
42
- * the indicator, and the choice between a button and a link. What sits inside it — an icon, an
43
- * avatar — is the caller's.
44
- */
45
- export declare const UIHeaderControlBase: import('react').ForwardRefExoticComponent<ControlBaseProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
46
- export interface BitkitUIHeaderControlAsButtonProps extends ControlCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
47
- href?: undefined;
48
- icon: BitkitIconComponent;
49
- isExternal?: undefined;
50
- }
51
- export interface BitkitUIHeaderControlAsAnchorProps extends ControlCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {
52
- href: string;
53
- icon: BitkitIconComponent;
54
- isExternal?: boolean;
55
- }
56
- export type BitkitUIHeaderControlProps = BitkitUIHeaderControlAsButtonProps | BitkitUIHeaderControlAsAnchorProps;
57
- /**
58
- * One icon button in the header bar — changelog, help, notifications, the mobile navigation
59
- * opener. It is a link when given an `href` and a button otherwise.
60
- *
61
- * The icon carries no label of its own, so `label` is required. There is no tooltip: the design
62
- * does not draw one.
63
- */
64
- declare const UIHeaderControl: import('react').ForwardRefExoticComponent<BitkitUIHeaderControlProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
65
- export default UIHeaderControl;
@@ -1,71 +0,0 @@
1
- import { useUIHeaderContext } from "./UIHeaderContext.js";
2
- import uiHeaderPart from "./uiHeaderPart.js";
3
- import { Box } from "@chakra-ui/react/box";
4
- import { chakra } from "@chakra-ui/react/styled-system";
5
- import { forwardRef } from "react";
6
- import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
7
- //#region lib/components/BitkitUIHeader/UIHeaderControl.tsx
8
- /**
9
- * The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,
10
- * the indicator, and the choice between a button and a link. What sits inside it — an icon, an
11
- * avatar — is the caller's.
12
- */
13
- var UIHeaderControlBase = forwardRef((props, ref) => {
14
- const { styles } = useUIHeaderContext();
15
- const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
16
- props.children,
17
- !!props.badge && /* @__PURE__ */ jsx(Box, {
18
- css: styles.badge,
19
- "data-pulse": props.badge === "pulse" ? "" : void 0
20
- }),
21
- props.selected && /* @__PURE__ */ jsx(Box, { css: styles.indicator })
22
- ] });
23
- if (props.href !== void 0) {
24
- const { badge: _badge, children: _children, css, footprint, isExternal, label, rel, selected, target, ...anchorRest } = props;
25
- return /* @__PURE__ */ jsx(chakra.a, {
26
- ref,
27
- "aria-label": label,
28
- "data-selected": selected ? "" : void 0,
29
- rel: isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel,
30
- target: isExternal ? "_blank" : target,
31
- ...uiHeaderPart(footprint === "navButton" ? "nav-button" : "control"),
32
- ...anchorRest,
33
- css: [styles[footprint], css],
34
- children: content
35
- });
36
- }
37
- const { badge: _badge, children: _children, css, footprint, href: _href, isExternal: _isExternal, label, selected, ...buttonRest } = props;
38
- return /* @__PURE__ */ jsx(chakra.button, {
39
- ref,
40
- "aria-expanded": selected,
41
- "aria-label": label,
42
- "data-selected": selected ? "" : void 0,
43
- type: "button",
44
- ...uiHeaderPart(footprint === "navButton" ? "nav-button" : "control"),
45
- ...buttonRest,
46
- css: [styles[footprint], css],
47
- children: content
48
- });
49
- });
50
- UIHeaderControlBase.displayName = "UIHeaderControlBase";
51
- /**
52
- * One icon button in the header bar — changelog, help, notifications, the mobile navigation
53
- * opener. It is a link when given an `href` and a button otherwise.
54
- *
55
- * The icon carries no label of its own, so `label` is required. There is no tooltip: the design
56
- * does not draw one.
57
- */
58
- var UIHeaderControl = forwardRef((props, ref) => {
59
- const { icon: Icon, ...rest } = props;
60
- return /* @__PURE__ */ jsx(UIHeaderControlBase, {
61
- ref,
62
- footprint: "control",
63
- ...rest,
64
- children: /* @__PURE__ */ jsx(Icon, {})
65
- });
66
- });
67
- UIHeaderControl.displayName = "BitkitUIHeader.Control";
68
- //#endregion
69
- export { UIHeaderControlBase, UIHeaderControl as default };
70
-
71
- //# sourceMappingURL=UIHeaderControl.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UIHeaderControl.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderControl.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderBadge = boolean | 'idle' | 'pulse';\n\ninterface ControlCommonProps {\n /** Marks the control as carrying something unread. */\n badge?: BitkitUIHeaderBadge;\n /**\n * The control's accessible name. It shows no text of its own, so this is what a screen reader\n * announces.\n */\n label: string;\n /**\n * Marks the control as the one whose panel is open: a lighter background and an indicator along\n * the bottom edge of the bar. The consumer owns the panel, so it owns this too.\n *\n * It says nothing about where the user is. A control that is a link stays a link to somewhere\n * else, so this paints it without claiming it is the current page.\n */\n selected?: boolean;\n}\n\ninterface ControlBaseCommonProps extends ControlCommonProps {\n children: ReactNode;\n /**\n * Which of the bar's control footprints to wear: the 48px square the icon controls and the\n * account button share, or the wider mobile navigation button. Named around the slot it picks\n * rather than `slot`, which is a native attribute every DOM element already takes.\n */\n footprint: 'control' | 'navButton';\n}\n\n// The bar draws no disabled control, so there is no `state` prop and no `disabled` either — a\n// control with nothing to do is one the consumer leaves out.\ninterface ControlBaseAsButtonProps\n extends ControlBaseCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n href?: undefined;\n isExternal?: undefined;\n}\n\ninterface ControlBaseAsAnchorProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n href: string;\n isExternal?: boolean;\n}\n\ntype ControlBaseProps = ControlBaseAsButtonProps | ControlBaseAsAnchorProps;\n\n/**\n * The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,\n * the indicator, and the choice between a button and a link. What sits inside it — an icon, an\n * avatar — is the caller's.\n */\nexport const UIHeaderControlBase = forwardRef<HTMLButtonElement | HTMLAnchorElement, ControlBaseProps>((props, ref) => {\n const { styles } = useUIHeaderContext();\n\n const content = (\n <>\n {props.children}\n {!!props.badge && <Box css={styles.badge} data-pulse={props.badge === 'pulse' ? '' : undefined} />}\n {props.selected && <Box css={styles.indicator} />}\n </>\n );\n\n if (props.href !== undefined) {\n const {\n badge: _badge,\n children: _children,\n css,\n footprint,\n isExternal,\n label,\n rel,\n selected,\n target,\n ...anchorRest\n } = props;\n\n return (\n // `chakra.a` rather than `Link`, which carries a recipe of its own: a control is styled\n // entirely by the header's own slot.\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n aria-label={label}\n data-selected={selected ? '' : undefined}\n rel={isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel}\n target={isExternal ? '_blank' : target}\n {...uiHeaderPart(footprint === 'navButton' ? 'nav-button' : 'control')}\n {...anchorRest}\n css={[styles[footprint], css]}\n >\n {content}\n </chakra.a>\n );\n }\n\n const {\n badge: _badge,\n children: _children,\n css,\n footprint,\n href: _href,\n isExternal: _isExternal,\n label,\n selected,\n ...buttonRest\n } = props;\n\n return (\n // `chakra.button` rather than `Button`, which carries a recipe of its own: a control is styled\n // entirely by the header's own slot.\n <chakra.button\n ref={ref as Ref<HTMLButtonElement>}\n aria-expanded={selected}\n aria-label={label}\n data-selected={selected ? '' : undefined}\n // A header control is an action, not a form submit. Before the spread, so a consumer can\n // still opt into `type=\"submit\"`.\n type=\"button\"\n {...uiHeaderPart(footprint === 'navButton' ? 'nav-button' : 'control')}\n {...buttonRest}\n css={[styles[footprint], css]}\n >\n {content}\n </chakra.button>\n );\n});\n\nUIHeaderControlBase.displayName = 'UIHeaderControlBase';\n\nexport interface BitkitUIHeaderControlAsButtonProps\n extends ControlCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n href?: undefined;\n icon: BitkitIconComponent;\n isExternal?: undefined;\n}\n\nexport interface BitkitUIHeaderControlAsAnchorProps extends ControlCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n href: string;\n icon: BitkitIconComponent;\n isExternal?: boolean;\n}\n\nexport type BitkitUIHeaderControlProps = BitkitUIHeaderControlAsButtonProps | BitkitUIHeaderControlAsAnchorProps;\n\n/**\n * One icon button in the header bar — changelog, help, notifications, the mobile navigation\n * opener. It is a link when given an `href` and a button otherwise.\n *\n * The icon carries no label of its own, so `label` is required. There is no tooltip: the design\n * does not draw one.\n */\nconst UIHeaderControl = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitUIHeaderControlProps>((props, ref) => {\n const { icon: Icon, ...rest } = props;\n\n return (\n <UIHeaderControlBase ref={ref} footprint=\"control\" {...rest}>\n <Icon />\n </UIHeaderControlBase>\n );\n});\n\nUIHeaderControl.displayName = 'BitkitUIHeader.Control';\n\nexport default UIHeaderControl;\n"],"mappings":";;;;;;;;;;;;AA0DA,IAAa,sBAAsB,YAAqE,OAAO,QAAQ;CACrH,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,UACJ,qBAAAA,YAAA,EAAA,UAAA;EACG,MAAM;EACN,CAAC,CAAC,MAAM,SAAS,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,cAAY,MAAM,UAAU,UAAU,KAAK,KAAA;EAAY,CAAA;EAChG,MAAM,YAAY,oBAAC,KAAD,EAAK,KAAK,OAAO,UAAY,CAAA;CAChD,EAAA,CAAA;CAGJ,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,OAAO,QACP,UAAU,WACV,KACA,WACA,YACA,OACA,KACA,UACA,QACA,GAAG,eACD;EAEJ,OAGE,oBAAC,OAAO,GAAR;GACO;GACL,cAAY;GACZ,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;GACjF,QAAQ,aAAa,WAAW;GAChC,GAAI,aAAa,cAAc,cAAc,eAAe,SAAS;GACrE,GAAI;GACJ,KAAK,CAAC,OAAO,YAAY,GAAG;GAE3B,UAAA;EACO,CAAA;CAEd;CAEA,MAAM,EACJ,OAAO,QACP,UAAU,WACV,KACA,WACA,MAAM,OACN,YAAY,aACZ,OACA,UACA,GAAG,eACD;CAEJ,OAGE,oBAAC,OAAO,QAAR;EACO;EACL,iBAAe;EACf,cAAY;EACZ,iBAAe,WAAW,KAAK,KAAA;EAG/B,MAAK;EACL,GAAI,aAAa,cAAc,cAAc,eAAe,SAAS;EACrE,GAAI;EACJ,KAAK,CAAC,OAAO,YAAY,GAAG;EAE3B,UAAA;CACY,CAAA;AAEnB,CAAC;AAED,oBAAoB,cAAc;;;;;;;;AAwBlC,IAAM,kBAAkB,YAA+E,OAAO,QAAQ;CACpH,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;CAEhC,OACE,oBAAC,qBAAD;EAA0B;EAAK,WAAU;EAAU,GAAI;EACrD,UAAA,oBAAC,MAAD,CAAO,CAAA;CACY,CAAA;AAEzB,CAAC;AAED,gBAAgB,cAAc"}
@@ -1,20 +0,0 @@
1
- import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
2
- export interface BitkitUIHeaderNavButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
3
- /** The accessible name. */
4
- label?: string;
5
- /** The current workspace. Shown as the avatar's initials when it has no logo. */
6
- name: string;
7
- /** The workspace's logo. Without one the avatar falls back to its initials. */
8
- src?: string;
9
- }
10
- /**
11
- * Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits
12
- * in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.
13
- *
14
- * The two components do not know about each other: this button's `onClick` sets the navigation's
15
- * `open`, and the navigation asks to close through its own `onOpenChange`.
16
- *
17
- * It shows the current workspace, so switching workspaces is one tap away from anywhere.
18
- */
19
- declare const UIHeaderNavButton: import('react').ForwardRefExoticComponent<BitkitUIHeaderNavButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
20
- export default UIHeaderNavButton;
@@ -1,46 +0,0 @@
1
- import IconMenuHamburger from "../../icons/IconMenuHamburger.js";
2
- import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
3
- import { useUIHeaderContext } from "./UIHeaderContext.js";
4
- import { UIHeaderControlBase } from "./UIHeaderControl.js";
5
- import { Box } from "@chakra-ui/react/box";
6
- import { forwardRef } from "react";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- //#region lib/components/BitkitUIHeader/UIHeaderNavButton.tsx
9
- /**
10
- * Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits
11
- * in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.
12
- *
13
- * The two components do not know about each other: this button's `onClick` sets the navigation's
14
- * `open`, and the navigation asks to close through its own `onOpenChange`.
15
- *
16
- * It shows the current workspace, so switching workspaces is one tap away from anywhere.
17
- */
18
- var UIHeaderNavButton = forwardRef((props, ref) => {
19
- const { label = "Open navigation", name, src, ...rest } = props;
20
- const { styles } = useUIHeaderContext();
21
- const avatarProps = src ? {
22
- src,
23
- variant: "image"
24
- } : { variant: "letters" };
25
- return /* @__PURE__ */ jsxs(UIHeaderControlBase, {
26
- ref,
27
- footprint: "navButton",
28
- label,
29
- ...rest,
30
- children: [/* @__PURE__ */ jsx(BitkitAvatar, {
31
- name,
32
- ...avatarProps
33
- }), /* @__PURE__ */ jsx(Box, {
34
- css: styles.navButtonBadge,
35
- children: /* @__PURE__ */ jsx(IconMenuHamburger, {
36
- css: styles.navButtonIcon,
37
- size: "16"
38
- })
39
- })]
40
- });
41
- });
42
- UIHeaderNavButton.displayName = "BitkitUIHeader.NavButton";
43
- //#endregion
44
- export { UIHeaderNavButton as default };
45
-
46
- //# sourceMappingURL=UIHeaderNavButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UIHeaderNavButton.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderNavButton.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconMenuHamburger } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderNavButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n /** The accessible name. */\n label?: string;\n /** The current workspace. Shown as the avatar's initials when it has no logo. */\n name: string;\n /** The workspace's logo. Without one the avatar falls back to its initials. */\n src?: string;\n}\n\n/**\n * Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits\n * in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.\n *\n * The two components do not know about each other: this button's `onClick` sets the navigation's\n * `open`, and the navigation asks to close through its own `onOpenChange`.\n *\n * It shows the current workspace, so switching workspaces is one tap away from anywhere.\n */\nconst UIHeaderNavButton = forwardRef<HTMLButtonElement, BitkitUIHeaderNavButtonProps>((props, ref) => {\n const { label = 'Open navigation', name, src, ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n\n const avatarProps = src ? ({ src, variant: 'image' } as const) : ({ variant: 'letters' } as const);\n\n return (\n <UIHeaderControlBase ref={ref} footprint=\"navButton\" label={label} {...rest}>\n <BitkitAvatar name={name} {...avatarProps} />\n <Box css={styles.navButtonBadge}>\n <IconMenuHamburger css={styles.navButtonIcon} size=\"16\" />\n </Box>\n </UIHeaderControlBase>\n );\n});\n\nUIHeaderNavButton.displayName = 'BitkitUIHeader.NavButton';\n\nexport default UIHeaderNavButton;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,oBAAoB,YAA6D,OAAO,QAAQ;CACpG,MAAM,EAAE,QAAQ,mBAAmB,MAAM,KAAK,GAAG,SAAS;CAE1D,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,cAAc,MAAO;EAAE;EAAK,SAAS;CAAQ,IAAe,EAAE,SAAS,UAAU;CAEvF,OACE,qBAAC,qBAAD;EAA0B;EAAK,WAAU;EAAmB;EAAO,GAAI;EAAvE,UAAA,CACE,oBAAC,cAAD;GAAoB;GAAM,GAAI;EAAc,CAAA,GAC5C,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,mBAAD;IAAmB,KAAK,OAAO;IAAe,MAAK;GAAM,CAAA;EACtD,CAAA,CACc;;AAEzB,CAAC;AAED,kBAAkB,cAAc"}
@@ -1,32 +0,0 @@
1
- import { BoxProps } from '@chakra-ui/react/box';
2
- import { Ref } from 'react';
3
- export interface BitkitUIHeaderSearchProps extends Omit<BoxProps, 'children' | 'onChange'> {
4
- /**
5
- * The search field, for anchoring the results to it. The component owns no results list: what a
6
- * search turns up differs per product, so the consumer renders its own panel against this.
7
- */
8
- inputRef?: Ref<HTMLInputElement>;
9
- /** The accessible name of both the button and the field. */
10
- label?: string;
11
- /**
12
- * Called when the button is pressed, and when Escape closes the field.
13
- *
14
- * From `tablet` up this opens the field in place. Below it there is no inline field — the button
15
- * is a plain trigger, and what it opens is the consumer's to render.
16
- */
17
- onOpenChange?: (open: boolean) => void;
18
- onValueChange?: (value: string) => void;
19
- open?: boolean;
20
- placeholder?: string;
21
- /** Marks the button as the one whose panel is open. Meant for the mobile trigger. */
22
- selected?: boolean;
23
- value?: string;
24
- }
25
- /**
26
- * Search in the header bar: a button that opens a field lying over it, so opening the search moves
27
- * nothing else in the bar.
28
- *
29
- * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.
30
- */
31
- declare const UIHeaderSearch: import('react').ForwardRefExoticComponent<BitkitUIHeaderSearchProps & import('react').RefAttributes<HTMLDivElement>>;
32
- export default UIHeaderSearch;
@@ -1,116 +0,0 @@
1
- import IconMagnifier from "../../icons/IconMagnifier.js";
2
- import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
3
- import { useUIHeaderContext } from "./UIHeaderContext.js";
4
- import uiHeaderPart from "./uiHeaderPart.js";
5
- import { UIHeaderControlBase } from "./UIHeaderControl.js";
6
- import { Box } from "@chakra-ui/react/box";
7
- import { chakra } from "@chakra-ui/react/styled-system";
8
- import { forwardRef, useEffect, useMemo, useRef } from "react";
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
- import { useCallbackRef } from "@chakra-ui/react/hooks";
11
- import { mergeRefs } from "@chakra-ui/react";
12
- //#region lib/components/BitkitUIHeader/UIHeaderSearch.tsx
13
- /**
14
- * Search in the header bar: a button that opens a field lying over it, so opening the search moves
15
- * nothing else in the bar.
16
- *
17
- * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.
18
- */
19
- var UIHeaderSearch = forwardRef((props, ref) => {
20
- const { css, inputRef, label = "Search", onOpenChange, onValueChange, open = false, placeholder, selected, value = "", ...rest } = props;
21
- const { barRef, styles } = useUIHeaderContext();
22
- const buttonElementRef = useRef(null);
23
- const inputElementRef = useRef(null);
24
- const searchElementRef = useRef(null);
25
- const restoreFocusRef = useRef(false);
26
- const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);
27
- const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);
28
- const handleOpenChange = useCallbackRef(onOpenChange);
29
- useEffect(() => {
30
- if (open) {
31
- inputElementRef.current?.focus();
32
- return;
33
- }
34
- if (!restoreFocusRef.current) return;
35
- restoreFocusRef.current = false;
36
- buttonElementRef.current?.focus();
37
- }, [open]);
38
- useEffect(() => {
39
- if (!open) return void 0;
40
- const bar = barRef.current;
41
- if (!bar) return void 0;
42
- const dismiss = (event) => {
43
- const target = event.target instanceof Node ? event.target : null;
44
- if (!target || searchElementRef.current?.contains(target)) return;
45
- handleOpenChange?.(false);
46
- };
47
- bar.addEventListener("pointerdown", dismiss);
48
- return () => bar.removeEventListener("pointerdown", dismiss);
49
- }, [
50
- barRef,
51
- handleOpenChange,
52
- open
53
- ]);
54
- useEffect(() => {
55
- if (!open) return void 0;
56
- const close = (event) => {
57
- if (event.key !== "Escape") return;
58
- if (event.target === inputElementRef.current) event.preventDefault();
59
- restoreFocusRef.current = true;
60
- handleOpenChange?.(false);
61
- };
62
- document.addEventListener("keydown", close);
63
- return () => document.removeEventListener("keydown", close);
64
- }, [handleOpenChange, open]);
65
- const handleClear = () => {
66
- onValueChange?.("");
67
- inputElementRef.current?.focus();
68
- };
69
- return /* @__PURE__ */ jsxs(Box, {
70
- ref: setSearchRef,
71
- css: [styles.search, css],
72
- ...uiHeaderPart("search"),
73
- ...rest,
74
- children: [/* @__PURE__ */ jsx(UIHeaderControlBase, {
75
- ref: buttonElementRef,
76
- "aria-expanded": selected ?? open,
77
- css: styles.searchButton,
78
- "data-open": open ? "" : void 0,
79
- footprint: "control",
80
- label,
81
- onClick: () => onOpenChange?.(!open),
82
- selected,
83
- ...uiHeaderPart("search-button"),
84
- children: /* @__PURE__ */ jsx(IconMagnifier, {})
85
- }), /* @__PURE__ */ jsxs(Box, {
86
- css: styles.searchField,
87
- "data-open": open ? "" : void 0,
88
- ...uiHeaderPart("search-field"),
89
- children: [
90
- /* @__PURE__ */ jsx(IconMagnifier, { css: styles.searchIcon }),
91
- /* @__PURE__ */ jsx(chakra.input, {
92
- ref: setInputRef,
93
- "aria-label": label,
94
- css: styles.searchInput,
95
- onChange: (event) => onValueChange?.(event.target.value),
96
- ...uiHeaderPart("search-input"),
97
- placeholder,
98
- type: "search",
99
- value
100
- }),
101
- !!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
102
- "aria-label": "Clear search",
103
- colorVariant: "white",
104
- css: styles.searchClear,
105
- onClick: handleClear,
106
- size: "sm"
107
- })
108
- ]
109
- })]
110
- });
111
- });
112
- UIHeaderSearch.displayName = "BitkitUIHeader.Search";
113
- //#endregion
114
- export { UIHeaderSearch as default };
115
-
116
- //# sourceMappingURL=UIHeaderSearch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UIHeaderSearch.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderSearch.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { mergeRefs } from '@chakra-ui/react';\nimport { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useCallbackRef } from '@chakra-ui/react/hooks';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type Ref, useEffect, useMemo, useRef } from 'react';\n\nimport { IconMagnifier } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport interface BitkitUIHeaderSearchProps extends Omit<BoxProps, 'children' | 'onChange'> {\n /**\n * The search field, for anchoring the results to it. The component owns no results list: what a\n * search turns up differs per product, so the consumer renders its own panel against this.\n */\n inputRef?: Ref<HTMLInputElement>;\n /** The accessible name of both the button and the field. */\n label?: string;\n /**\n * Called when the button is pressed, and when Escape closes the field.\n *\n * From `tablet` up this opens the field in place. Below it there is no inline field — the button\n * is a plain trigger, and what it opens is the consumer's to render.\n */\n onOpenChange?: (open: boolean) => void;\n onValueChange?: (value: string) => void;\n open?: boolean;\n placeholder?: string;\n /** Marks the button as the one whose panel is open. Meant for the mobile trigger. */\n selected?: boolean;\n value?: string;\n}\n\n/**\n * Search in the header bar: a button that opens a field lying over it, so opening the search moves\n * nothing else in the bar.\n *\n * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.\n */\nconst UIHeaderSearch = forwardRef<HTMLDivElement, BitkitUIHeaderSearchProps>((props, ref) => {\n const {\n css,\n inputRef,\n label = 'Search',\n onOpenChange,\n onValueChange,\n open = false,\n placeholder,\n selected,\n value = '',\n ...rest\n } = props;\n\n const { barRef, styles } = useUIHeaderContext();\n\n const buttonElementRef = useRef<HTMLButtonElement>(null);\n const inputElementRef = useRef<HTMLInputElement>(null);\n const searchElementRef = useRef<HTMLDivElement>(null);\n const restoreFocusRef = useRef(false);\n const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);\n const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);\n\n // The field is controlled, so `onOpenChange` is usually a fresh arrow on every keystroke. Held\n // by a ref, the dismiss listener below is subscribed once per opening rather than per character.\n const handleOpenChange = useCallbackRef(onOpenChange);\n\n // Escape hands focus back to the button that opened the field, but only once the field is closed:\n // while it is open the button is `visibility: hidden`, and a hidden element cannot take focus.\n useEffect(() => {\n if (open) {\n inputElementRef.current?.focus();\n return;\n }\n\n if (!restoreFocusRef.current) return;\n restoreFocusRef.current = false;\n buttonElementRef.current?.focus();\n }, [open]);\n\n // Reaching for another control in the bar is as much a way out of the search as Escape, so the\n // open field gives way to it. Only presses in the bar itself count: the results are the\n // consumer's to render — in the `banner` slot as readily as anywhere else — and choosing from\n // them must not close the search.\n useEffect(() => {\n if (!open) return undefined;\n\n const bar = barRef.current;\n if (!bar) return undefined;\n\n const dismiss = (event: PointerEvent) => {\n const target = event.target instanceof Node ? event.target : null;\n if (!target || searchElementRef.current?.contains(target)) return;\n handleOpenChange?.(false);\n };\n\n bar.addEventListener('pointerdown', dismiss);\n return () => bar.removeEventListener('pointerdown', dismiss);\n }, [barRef, handleOpenChange, open]);\n\n useEffect(() => {\n if (!open) return undefined;\n\n const close = (event: globalThis.KeyboardEvent) => {\n if (event.key !== 'Escape') return;\n if (event.target === inputElementRef.current) event.preventDefault();\n restoreFocusRef.current = true;\n handleOpenChange?.(false);\n };\n\n document.addEventListener('keydown', close);\n return () => document.removeEventListener('keydown', close);\n }, [handleOpenChange, open]);\n\n const handleClear = () => {\n onValueChange?.('');\n inputElementRef.current?.focus();\n };\n\n return (\n <Box ref={setSearchRef} css={[styles.search, css]} {...uiHeaderPart('search')} {...rest}>\n <UIHeaderControlBase\n ref={buttonElementRef}\n aria-expanded={selected ?? open}\n css={styles.searchButton}\n data-open={open ? '' : undefined}\n footprint=\"control\"\n label={label}\n onClick={() => onOpenChange?.(!open)}\n selected={selected}\n {...uiHeaderPart('search-button')}\n >\n <IconMagnifier />\n </UIHeaderControlBase>\n <Box css={styles.searchField} data-open={open ? '' : undefined} {...uiHeaderPart('search-field')}>\n <IconMagnifier css={styles.searchIcon} />\n {/* No named primitive fits: Chakra's `Input` carries its own recipe, and this field is\n styled entirely by the header's own slot. */}\n <chakra.input\n ref={setInputRef}\n aria-label={label}\n css={styles.searchInput}\n onChange={(event) => onValueChange?.(event.target.value)}\n {...uiHeaderPart('search-input')}\n placeholder={placeholder}\n type=\"search\"\n value={value}\n />\n {!!value && (\n <BitkitCloseButton\n aria-label=\"Clear search\"\n colorVariant=\"white\"\n css={styles.searchClear}\n onClick={handleClear}\n size=\"sm\"\n />\n )}\n </Box>\n </Box>\n );\n});\n\nUIHeaderSearch.displayName = 'BitkitUIHeader.Search';\n\nexport default UIHeaderSearch;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,IAAM,iBAAiB,YAAuD,OAAO,QAAQ;CAC3F,MAAM,EACJ,KACA,UACA,QAAQ,UACR,cACA,eACA,OAAO,OACP,aACA,UACA,QAAQ,IACR,GAAG,SACD;CAEJ,MAAM,EAAE,QAAQ,WAAW,mBAAmB;CAE9C,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,mBAAmB,OAAuB,IAAI;CACpD,MAAM,kBAAkB,OAAO,KAAK;CACpC,MAAM,cAAc,cAAc,UAAU,iBAAiB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAClF,MAAM,eAAe,cAAc,UAAU,kBAAkB,GAAG,GAAG,CAAC,GAAG,CAAC;CAI1E,MAAM,mBAAmB,eAAe,YAAY;CAIpD,gBAAgB;EACd,IAAI,MAAM;GACR,gBAAgB,SAAS,MAAM;GAC/B;EACF;EAEA,IAAI,CAAC,gBAAgB,SAAS;EAC9B,gBAAgB,UAAU;EAC1B,iBAAiB,SAAS,MAAM;CAClC,GAAG,CAAC,IAAI,CAAC;CAMT,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK,OAAO,KAAA;EAEjB,MAAM,WAAW,UAAwB;GACvC,MAAM,SAAS,MAAM,kBAAkB,OAAO,MAAM,SAAS;GAC7D,IAAI,CAAC,UAAU,iBAAiB,SAAS,SAAS,MAAM,GAAG;GAC3D,mBAAmB,KAAK;EAC1B;EAEA,IAAI,iBAAiB,eAAe,OAAO;EAC3C,aAAa,IAAI,oBAAoB,eAAe,OAAO;CAC7D,GAAG;EAAC;EAAQ;EAAkB;CAAI,CAAC;CAEnC,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,SAAS,UAAoC;GACjD,IAAI,MAAM,QAAQ,UAAU;GAC5B,IAAI,MAAM,WAAW,gBAAgB,SAAS,MAAM,eAAe;GACnE,gBAAgB,UAAU;GAC1B,mBAAmB,KAAK;EAC1B;EAEA,SAAS,iBAAiB,WAAW,KAAK;EAC1C,aAAa,SAAS,oBAAoB,WAAW,KAAK;CAC5D,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAE3B,MAAM,oBAAoB;EACxB,gBAAgB,EAAE;EAClB,gBAAgB,SAAS,MAAM;CACjC;CAEA,OACE,qBAAC,KAAD;EAAK,KAAK;EAAc,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI,aAAa,QAAQ;EAAG,GAAI;EAAnF,UAAA,CACE,oBAAC,qBAAD;GACE,KAAK;GACL,iBAAe,YAAY;GAC3B,KAAK,OAAO;GACZ,aAAW,OAAO,KAAK,KAAA;GACvB,WAAU;GACH;GACP,eAAe,eAAe,CAAC,IAAI;GACzB;GACV,GAAI,aAAa,eAAe;GAEhC,UAAA,oBAAC,eAAD,CAAgB,CAAA;EACG,CAAA,GACrB,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,aAAW,OAAO,KAAK,KAAA;GAAW,GAAI,aAAa,cAAc;GAA/F,UAAA;IACE,oBAAC,eAAD,EAAe,KAAK,OAAO,WAAa,CAAA;IAGxC,oBAAC,OAAO,OAAR;KACE,KAAK;KACL,cAAY;KACZ,KAAK,OAAO;KACZ,WAAW,UAAU,gBAAgB,MAAM,OAAO,KAAK;KACvD,GAAI,aAAa,cAAc;KAClB;KACb,MAAK;KACE;IACR,CAAA;IACA,CAAC,CAAC,SACD,oBAAC,mBAAD;KACE,cAAW;KACX,cAAa;KACb,KAAK,OAAO;KACZ,SAAS;KACT,MAAK;IACN,CAAA;GAEA;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
@@ -1,9 +0,0 @@
1
- /**
2
- * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's
3
- * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.
4
- */
5
- declare const uiHeaderPart: (name: string) => {
6
- 'data-part': string;
7
- 'data-scope': string;
8
- };
9
- export default uiHeaderPart;
@@ -1,13 +0,0 @@
1
- //#region lib/components/BitkitUIHeader/uiHeaderPart.ts
2
- /**
3
- * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's
4
- * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.
5
- */
6
- var uiHeaderPart = (name) => ({
7
- "data-part": name,
8
- "data-scope": "ui-header"
9
- });
10
- //#endregion
11
- export { uiHeaderPart as default };
12
-
13
- //# sourceMappingURL=uiHeaderPart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"uiHeaderPart.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/uiHeaderPart.ts"],"sourcesContent":["/**\n * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's\n * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.\n */\nconst uiHeaderPart = (name: string) => ({ 'data-part': name, 'data-scope': 'ui-header' });\n\nexport default uiHeaderPart;\n"],"mappings":";;;;;AAIA,IAAM,gBAAgB,UAAkB;CAAE,aAAa;CAAM,cAAc;AAAY"}
@@ -1,103 +0,0 @@
1
- import { rem } from "../themeUtils.js";
2
- import { defineRecipe } from "@chakra-ui/react/styled-system";
3
- //#region lib/theme/recipes/UIHeaderButton.recipe.ts
4
- var borderColors = (variant) => variant === "secondary" ? {
5
- base: "sys/ui/header/button/secondary/border",
6
- disabled: "sys/ui/header/button/secondary/border-disabled"
7
- } : {
8
- base: "transparent",
9
- disabled: "transparent"
10
- };
11
- var variantStyles = (variant) => {
12
- const border = borderColors(variant);
13
- return {
14
- background: `sys/ui/header/button/${variant}/bg`,
15
- borderColor: border.base,
16
- color: `sys/ui/header/button/${variant}/fg`,
17
- _hover: {
18
- background: `sys/ui/header/button/${variant}/bg-hover`,
19
- _active: { background: `sys/ui/header/button/${variant}/bg-active` }
20
- },
21
- _active: { background: `sys/ui/header/button/${variant}/bg-active` },
22
- _selected: {
23
- background: `sys/ui/header/button/${variant}/bg-active`,
24
- _hover: { background: `sys/ui/header/button/${variant}/bg-active` }
25
- },
26
- _disabled: {
27
- background: `sys/ui/header/button/${variant}/bg-disabled`,
28
- borderColor: border.disabled,
29
- color: `sys/ui/header/button/${variant}/fg-disabled`,
30
- cursor: "not-allowed"
31
- }
32
- };
33
- };
34
- var badgeDot = {
35
- background: "sys/ui/header/badge/indigo",
36
- borderRadius: "full",
37
- content: "\"\"",
38
- pointerEvents: "none",
39
- position: "absolute"
40
- };
41
- var badgeStyles = {
42
- _before: {
43
- ...badgeDot,
44
- height: "8",
45
- insetBlockStart: "-4",
46
- insetInlineEnd: "-4",
47
- width: "8"
48
- },
49
- _after: {
50
- ...badgeDot,
51
- height: rem(10),
52
- insetBlockStart: rem(-5),
53
- insetInlineEnd: rem(-5),
54
- opacity: .5,
55
- width: rem(10)
56
- }
57
- };
58
- var uiHeaderButtonRecipe = defineRecipe({
59
- className: "ui-header-button",
60
- base: {
61
- alignItems: "center",
62
- borderRadius: "4",
63
- borderStyle: "solid",
64
- borderWidth: "1",
65
- cursor: "pointer",
66
- display: "inline-flex",
67
- flexShrink: 0,
68
- gap: "4",
69
- height: "32",
70
- justifyContent: "center",
71
- minWidth: "48",
72
- paddingInline: "8",
73
- position: "relative",
74
- textDecoration: "none",
75
- textStyle: "comp/button/sm",
76
- whiteSpace: "nowrap",
77
- "&:not(:last-child)": { marginInlineEnd: "8" },
78
- _disabled: { cursor: "not-allowed" }
79
- },
80
- variants: {
81
- variant: {
82
- primary: variantStyles("primary"),
83
- secondary: variantStyles("secondary"),
84
- tertiary: variantStyles("tertiary")
85
- },
86
- badge: {
87
- idle: badgeStyles,
88
- pulse: {
89
- ...badgeStyles,
90
- _after: {
91
- ...badgeStyles._after,
92
- animation: "ping",
93
- _motionReduce: { animation: "none" }
94
- }
95
- }
96
- }
97
- },
98
- defaultVariants: { variant: "primary" }
99
- });
100
- //#endregion
101
- export { uiHeaderButtonRecipe as default };
102
-
103
- //# sourceMappingURL=UIHeaderButton.recipe.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UIHeaderButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/UIHeaderButton.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\ntype Variant = 'primary' | 'secondary' | 'tertiary';\n\nconst borderColors = (variant: Variant) =>\n variant === 'secondary'\n ? { base: 'sys/ui/header/button/secondary/border', disabled: 'sys/ui/header/button/secondary/border-disabled' }\n : { base: 'transparent', disabled: 'transparent' };\n\nconst variantStyles = (variant: Variant): SystemStyleObject => {\n const border = borderColors(variant);\n\n return {\n background: `sys/ui/header/button/${variant}/bg`,\n borderColor: border.base,\n color: `sys/ui/header/button/${variant}/fg`,\n // `_hover`/`_active` compile to `:not(:disabled, [data-disabled])`, so they never match a\n // disabled button and `_disabled` wins without `!important`.\n _hover: {\n background: `sys/ui/header/button/${variant}/bg-hover`,\n // Repeat active under hover so clicking while hovering keeps the active styles.\n _active: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n },\n },\n _active: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n },\n // A button that holds a panel open stays pressed while the panel is, hover included — letting\n // hover lighten it would read as the panel having closed.\n _selected: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n _hover: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n },\n },\n _disabled: {\n background: `sys/ui/header/button/${variant}/bg-disabled`,\n borderColor: border.disabled,\n color: `sys/ui/header/button/${variant}/fg-disabled`,\n cursor: 'not-allowed',\n },\n };\n};\n\nconst badgeDot: SystemStyleObject = {\n background: 'sys/ui/header/badge/indigo',\n borderRadius: 'full',\n content: '\"\"',\n pointerEvents: 'none',\n position: 'absolute',\n};\n\nconst badgeStyles: SystemStyleObject = {\n _before: {\n ...badgeDot,\n height: '8',\n insetBlockStart: '-4',\n insetInlineEnd: '-4',\n width: '8',\n },\n _after: {\n ...badgeDot,\n height: rem(10),\n insetBlockStart: rem(-5),\n insetInlineEnd: rem(-5),\n opacity: 0.5,\n width: rem(10),\n },\n};\n\nconst uiHeaderButtonRecipe = defineRecipe({\n className: 'ui-header-button',\n base: {\n alignItems: 'center',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n cursor: 'pointer',\n display: 'inline-flex',\n flexShrink: 0,\n gap: '4',\n height: '32',\n justifyContent: 'center',\n minWidth: '48',\n paddingInline: '8',\n position: 'relative',\n textDecoration: 'none',\n textStyle: 'comp/button/sm',\n whiteSpace: 'nowrap',\n '&:not(:last-child)': {\n marginInlineEnd: '8',\n },\n _disabled: {\n cursor: 'not-allowed',\n },\n },\n variants: {\n variant: {\n primary: variantStyles('primary'),\n secondary: variantStyles('secondary'),\n tertiary: variantStyles('tertiary'),\n },\n badge: {\n idle: badgeStyles,\n pulse: {\n ...badgeStyles,\n _after: {\n ...badgeStyles._after,\n // The system's own ping: the ring expands past the dot and fades out.\n animation: 'ping',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport default uiHeaderButtonRecipe;\n"],"mappings":";;;AAMA,IAAM,gBAAgB,YACpB,YAAY,cACR;CAAE,MAAM;CAAyC,UAAU;AAAiD,IAC5G;CAAE,MAAM;CAAe,UAAU;AAAc;AAErD,IAAM,iBAAiB,YAAwC;CAC7D,MAAM,SAAS,aAAa,OAAO;CAEnC,OAAO;EACL,YAAY,wBAAwB,QAAQ;EAC5C,aAAa,OAAO;EACpB,OAAO,wBAAwB,QAAQ;EAGvC,QAAQ;GACN,YAAY,wBAAwB,QAAQ;GAE5C,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EAGA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,QAAQ,EACN,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,aAAa,OAAO;GACpB,OAAO,wBAAwB,QAAQ;GACvC,QAAQ;EACV;CACF;AACF;AAEA,IAAM,WAA8B;CAClC,YAAY;CACZ,cAAc;CACd,SAAS;CACT,eAAe;CACf,UAAU;AACZ;AAEA,IAAM,cAAiC;CACrC,SAAS;EACP,GAAG;EACH,QAAQ;EACR,iBAAiB;EACjB,gBAAgB;EAChB,OAAO;CACT;CACA,QAAQ;EACN,GAAG;EACH,QAAQ,IAAI,EAAE;EACd,iBAAiB,IAAI,EAAE;EACvB,gBAAgB,IAAI,EAAE;EACtB,SAAS;EACT,OAAO,IAAI,EAAE;CACf;AACF;AAEA,IAAM,uBAAuB,aAAa;CACxC,WAAW;CACX,MAAM;EACJ,YAAY;EACZ,cAAc;EACd,aAAa;EACb,aAAa;EACb,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,sBAAsB,EACpB,iBAAiB,IACnB;EACA,WAAW,EACT,QAAQ,cACV;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS,cAAc,SAAS;GAChC,WAAW,cAAc,WAAW;GACpC,UAAU,cAAc,UAAU;EACpC;EACA,OAAO;GACL,MAAM;GACN,OAAO;IACL,GAAG;IACH,QAAQ;KACN,GAAG,YAAY;KAEf,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}
@@ -1,4 +0,0 @@
1
- export declare const uiHeaderHeightPx = 48;
2
- export declare const uiHeaderHeight: `${number}rem`;
3
- declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "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" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
4
- export default uiHeaderSlotRecipe;