@bitrise/bitkit-v2 0.3.481-beta.3105 → 0.3.481-beta.3109
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.
- package/dist/components/BitkitCalendar/BitkitCalendar.d.ts +12 -0
- package/dist/components/BitkitCalendar/BitkitCalendar.js +7 -1
- package/dist/components/BitkitCalendar/BitkitCalendar.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarContent.d.ts +5 -1
- package/dist/components/BitkitCalendar/components/CalendarContent.js +60 -43
- package/dist/components/BitkitCalendar/components/CalendarContent.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonth.d.ts +4 -2
- package/dist/components/BitkitCalendar/components/CalendarMonth.js +15 -5
- package/dist/components/BitkitCalendar/components/CalendarMonth.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.d.ts +2 -1
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js +3 -2
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.d.ts +3 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js +3 -3
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.d.ts +3 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +3 -3
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarSelect.d.ts +1 -0
- package/dist/components/BitkitCalendar/components/CalendarSelect.js +5 -3
- package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js +1 -0
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.d.ts +2 -1
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js +3 -2
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map +1 -1
- package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts +2 -0
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js +2 -1
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map +1 -1
- package/dist/components/BitkitFilter/BitkitFilter.context.d.ts +65 -0
- package/dist/components/BitkitFilter/BitkitFilter.context.js +82 -0
- package/dist/components/BitkitFilter/BitkitFilter.context.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilter.d.ts +54 -0
- package/dist/components/BitkitFilter/BitkitFilter.js +247 -0
- package/dist/components/BitkitFilter/BitkitFilter.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilter.utils.d.ts +18 -0
- package/dist/components/BitkitFilter/BitkitFilter.utils.js +42 -0
- package/dist/components/BitkitFilter/BitkitFilter.utils.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterAdd.d.ts +18 -0
- package/dist/components/BitkitFilter/BitkitFilterAdd.js +200 -0
- package/dist/components/BitkitFilter/BitkitFilterAdd.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterDateRange.d.ts +26 -0
- package/dist/components/BitkitFilter/BitkitFilterDateRange.js +118 -0
- package/dist/components/BitkitFilter/BitkitFilterDateRange.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterSearch.d.ts +23 -0
- package/dist/components/BitkitFilter/BitkitFilterSearch.js +72 -0
- package/dist/components/BitkitFilter/BitkitFilterSearch.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterSelect.d.ts +61 -0
- package/dist/components/BitkitFilter/BitkitFilterSelect.js +149 -0
- package/dist/components/BitkitFilter/BitkitFilterSelect.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterSwitch.d.ts +28 -0
- package/dist/components/BitkitFilter/BitkitFilterSwitch.js +87 -0
- package/dist/components/BitkitFilter/BitkitFilterSwitch.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterChip.d.ts +23 -0
- package/dist/components/BitkitFilter/components/FilterChip.js +66 -0
- package/dist/components/BitkitFilter/components/FilterChip.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterField.d.ts +15 -0
- package/dist/components/BitkitFilter/components/FilterField.js +60 -0
- package/dist/components/BitkitFilter/components/FilterField.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterPanel.d.ts +42 -0
- package/dist/components/BitkitFilter/components/FilterPanel.js +126 -0
- package/dist/components/BitkitFilter/components/FilterPanel.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts +15 -0
- package/dist/components/BitkitFilter/components/FilterSearchInput.js +41 -0
- package/dist/components/BitkitFilter/components/FilterSearchInput.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts +45 -0
- package/dist/components/BitkitFilter/components/FilterSelectForm.js +342 -0
- package/dist/components/BitkitFilter/components/FilterSelectForm.js.map +1 -0
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.d.ts +4 -3
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js +3 -2
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js.map +1 -1
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +1 -1
- package/dist/components/BitkitTextInput/BitkitTextInput.js +16 -13
- package/dist/components/BitkitTextInput/BitkitTextInput.js.map +1 -1
- package/dist/components/index.d.ts +6 -1
- package/dist/main.js +8 -9
- package/dist/theme/recipes/index.d.ts +525 -0
- package/dist/theme/recipes/index.js +1 -3
- package/dist/theme/recipes/index.js.map +1 -1
- package/dist/theme/semantic-tokens/index.d.ts +0 -5
- package/dist/theme/semantic-tokens/semanticColors.d.ts +0 -5
- package/dist/theme/semantic-tokens/semanticColors.js +0 -1
- package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
- package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +15 -0
- package/dist/theme/slot-recipes/DatePicker.recipe.js +72 -22
- package/dist/theme/slot-recipes/DatePicker.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +85 -0
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.js +35 -10
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Filter.recipe.d.ts +39 -0
- package/dist/theme/slot-recipes/Filter.recipe.js +656 -0
- package/dist/theme/slot-recipes/Filter.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Listbox.recipe.d.ts +22 -0
- package/dist/theme/slot-recipes/Listbox.recipe.js +108 -0
- package/dist/theme/slot-recipes/Listbox.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Menu.recipe.js +6 -1
- package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Tag.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/UISideNav.recipe.d.ts +2 -1
- package/dist/theme/slot-recipes/UISideNav.recipe.js +3 -2
- package/dist/theme/slot-recipes/UISideNav.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +162 -3
- package/dist/theme/slot-recipes/index.js +4 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/theme/themeUtils.d.ts +0 -6
- package/dist/theme/themeUtils.js +1 -7
- package/dist/theme/themeUtils.js.map +1 -1
- package/dist/utilities/BitkitPortalContext.js +3 -2
- package/dist/utilities/BitkitPortalContext.js.map +1 -1
- package/docs/v1-to-v2-migration-guide.md +48 -1
- package/package.json +1 -1
- package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +0 -41
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js +0 -114
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +0 -1
- package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +0 -10
- package/dist/components/BitkitUIHeader/BitriseLogo.js +0 -86
- package/dist/components/BitkitUIHeader/BitriseLogo.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +0 -26
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js +0 -40
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +0 -34
- package/dist/components/BitkitUIHeader/UIHeaderButton.js +0 -45
- package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +0 -13
- package/dist/components/BitkitUIHeader/UIHeaderContext.js +0 -11
- package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +0 -65
- package/dist/components/BitkitUIHeader/UIHeaderControl.js +0 -72
- package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +0 -20
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +0 -46
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +0 -32
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js +0 -121
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +0 -1
- package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts +0 -14
- package/dist/components/BitkitUIHeader/uiHeaderPart.js +0 -18
- package/dist/components/BitkitUIHeader/uiHeaderPart.js.map +0 -1
- package/dist/theme/recipes/UIHeaderButton.recipe.js +0 -103
- package/dist/theme/recipes/UIHeaderButton.recipe.js.map +0 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +0 -14
- package/dist/theme/slot-recipes/UIHeader.recipe.js +0 -253
- package/dist/theme/slot-recipes/UIHeader.recipe.js.map +0 -1
|
@@ -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,14 +0,0 @@
|
|
|
1
|
-
/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */
|
|
2
|
-
export declare const uiHeaderHeightPx = 48;
|
|
3
|
-
/**
|
|
4
|
-
* The height of the header's bar. A page that pins the header reserves this much room for it, and
|
|
5
|
-
* anything anchored under the header starts here: a drawer's backdrop and positioner, a side
|
|
6
|
-
* navigation's `insetBlockStart`.
|
|
7
|
-
*
|
|
8
|
-
* It is the bar alone. A `banner` sits below it inside the header, and its height is the
|
|
9
|
-
* consumer's content, so a pinned header carrying one is taller than this — measure it rather than
|
|
10
|
-
* assume it.
|
|
11
|
-
*/
|
|
12
|
-
export declare const uiHeaderHeight: `${number}rem`;
|
|
13
|
-
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">>;
|
|
14
|
-
export default uiHeaderSlotRecipe;
|
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
import { colorVar, rem } from "../themeUtils.js";
|
|
2
|
-
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
-
//#region lib/theme/slot-recipes/UIHeader.recipe.ts
|
|
4
|
-
/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */
|
|
5
|
-
var uiHeaderHeightPx = 48;
|
|
6
|
-
/**
|
|
7
|
-
* The height of the header's bar. A page that pins the header reserves this much room for it, and
|
|
8
|
-
* anything anchored under the header starts here: a drawer's backdrop and positioner, a side
|
|
9
|
-
* navigation's `insetBlockStart`.
|
|
10
|
-
*
|
|
11
|
-
* It is the bar alone. A `banner` sits below it inside the header, and its height is the
|
|
12
|
-
* consumer's content, so a pinned header carrying one is taller than this — measure it rather than
|
|
13
|
-
* assume it.
|
|
14
|
-
*/
|
|
15
|
-
var uiHeaderHeight = rem(48);
|
|
16
|
-
var SEARCH_FIELD_WIDTH = rem(240);
|
|
17
|
-
var SEARCH_FIELD_TINT = colorVar("color/white/20");
|
|
18
|
-
var controlBase = {
|
|
19
|
-
background: "sys/ui/header/control/bg",
|
|
20
|
-
_hover: {
|
|
21
|
-
background: "sys/ui/header/control/bg-hover",
|
|
22
|
-
_active: { background: "sys/ui/header/control/bg-active" }
|
|
23
|
-
},
|
|
24
|
-
_active: { background: "sys/ui/header/control/bg-active" },
|
|
25
|
-
_selected: {
|
|
26
|
-
background: "sys/ui/header/control/bg-selected",
|
|
27
|
-
_hover: {
|
|
28
|
-
background: "sys/ui/header/control/bg-selected-hover",
|
|
29
|
-
_active: { background: "sys/ui/header/control/bg-selected" }
|
|
30
|
-
},
|
|
31
|
-
_active: { background: "sys/ui/header/control/bg-selected" }
|
|
32
|
-
},
|
|
33
|
-
alignItems: "center",
|
|
34
|
-
borderRadius: 0,
|
|
35
|
-
color: "icon/on-color",
|
|
36
|
-
cursor: "pointer",
|
|
37
|
-
display: "flex",
|
|
38
|
-
flexShrink: 0,
|
|
39
|
-
height: uiHeaderHeight,
|
|
40
|
-
justifyContent: "center",
|
|
41
|
-
position: "relative",
|
|
42
|
-
textDecoration: "none",
|
|
43
|
-
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
|
|
44
|
-
};
|
|
45
|
-
var uiHeaderSlotRecipe = defineSlotRecipe({
|
|
46
|
-
className: "ui-header",
|
|
47
|
-
slots: [
|
|
48
|
-
"accountAvatar",
|
|
49
|
-
"accountIcon",
|
|
50
|
-
"actions",
|
|
51
|
-
"badge",
|
|
52
|
-
"banner",
|
|
53
|
-
"bar",
|
|
54
|
-
"control",
|
|
55
|
-
"indicator",
|
|
56
|
-
"leading",
|
|
57
|
-
"logoBlock",
|
|
58
|
-
"logoLink",
|
|
59
|
-
"navButton",
|
|
60
|
-
"navButtonBadge",
|
|
61
|
-
"navButtonIcon",
|
|
62
|
-
"root",
|
|
63
|
-
"search",
|
|
64
|
-
"searchButton",
|
|
65
|
-
"searchClear",
|
|
66
|
-
"searchField",
|
|
67
|
-
"searchIcon",
|
|
68
|
-
"searchInput",
|
|
69
|
-
"spacer"
|
|
70
|
-
],
|
|
71
|
-
base: {
|
|
72
|
-
root: {
|
|
73
|
-
background: "sys/ui/header/bg",
|
|
74
|
-
color: "text/on-color",
|
|
75
|
-
display: "flex",
|
|
76
|
-
flexDirection: "column",
|
|
77
|
-
width: "full"
|
|
78
|
-
},
|
|
79
|
-
bar: {
|
|
80
|
-
alignItems: "center",
|
|
81
|
-
display: "flex",
|
|
82
|
-
flexShrink: 0,
|
|
83
|
-
height: uiHeaderHeight,
|
|
84
|
-
position: "relative",
|
|
85
|
-
tablet: { paddingInlineStart: "20" }
|
|
86
|
-
},
|
|
87
|
-
leading: {
|
|
88
|
-
display: "flex",
|
|
89
|
-
flexShrink: 0,
|
|
90
|
-
tablet: { display: "none" }
|
|
91
|
-
},
|
|
92
|
-
spacer: {
|
|
93
|
-
flexShrink: 1,
|
|
94
|
-
width: "48",
|
|
95
|
-
tablet: { display: "none" }
|
|
96
|
-
},
|
|
97
|
-
logoBlock: {
|
|
98
|
-
alignItems: "center",
|
|
99
|
-
display: "flex",
|
|
100
|
-
flex: 1,
|
|
101
|
-
justifyContent: "center",
|
|
102
|
-
minWidth: 0,
|
|
103
|
-
tablet: { flex: "none" }
|
|
104
|
-
},
|
|
105
|
-
logoLink: {
|
|
106
|
-
borderRadius: "4",
|
|
107
|
-
color: "text/on-color",
|
|
108
|
-
display: "flex",
|
|
109
|
-
marginBlockEnd: rem(3)
|
|
110
|
-
},
|
|
111
|
-
actions: {
|
|
112
|
-
alignItems: "center",
|
|
113
|
-
display: "flex",
|
|
114
|
-
flexShrink: 0,
|
|
115
|
-
marginInlineStart: "auto",
|
|
116
|
-
tablet: { paddingInlineEnd: "32" }
|
|
117
|
-
},
|
|
118
|
-
banner: { width: "full" },
|
|
119
|
-
control: {
|
|
120
|
-
...controlBase,
|
|
121
|
-
width: "48"
|
|
122
|
-
},
|
|
123
|
-
accountAvatar: {
|
|
124
|
-
borderRadius: "full",
|
|
125
|
-
display: "none",
|
|
126
|
-
overflow: "hidden",
|
|
127
|
-
tablet: { display: "inline-flex" }
|
|
128
|
-
},
|
|
129
|
-
accountIcon: {
|
|
130
|
-
display: "block",
|
|
131
|
-
tablet: { display: "none" }
|
|
132
|
-
},
|
|
133
|
-
navButton: {
|
|
134
|
-
...controlBase,
|
|
135
|
-
paddingBlock: "8",
|
|
136
|
-
paddingInlineEnd: "8",
|
|
137
|
-
paddingInlineStart: "12"
|
|
138
|
-
},
|
|
139
|
-
navButtonBadge: {
|
|
140
|
-
alignItems: "flex-start",
|
|
141
|
-
background: "sys/ui/header/bg",
|
|
142
|
-
borderStartStartRadius: "2",
|
|
143
|
-
color: "icon/on-color",
|
|
144
|
-
display: "flex",
|
|
145
|
-
height: "12",
|
|
146
|
-
insetBlockEnd: "8",
|
|
147
|
-
insetInlineEnd: "8",
|
|
148
|
-
overflow: "hidden",
|
|
149
|
-
pointerEvents: "none",
|
|
150
|
-
position: "absolute",
|
|
151
|
-
width: "16"
|
|
152
|
-
},
|
|
153
|
-
navButtonIcon: {
|
|
154
|
-
flexShrink: 0,
|
|
155
|
-
marginBlockStart: rem(-1),
|
|
156
|
-
marginInlineStart: "1"
|
|
157
|
-
},
|
|
158
|
-
badge: {
|
|
159
|
-
background: "sys/ui/header/badge/red",
|
|
160
|
-
borderRadius: "full",
|
|
161
|
-
height: "8",
|
|
162
|
-
insetBlockStart: "12",
|
|
163
|
-
insetInlineStart: rem(28),
|
|
164
|
-
pointerEvents: "none",
|
|
165
|
-
position: "absolute",
|
|
166
|
-
width: "8",
|
|
167
|
-
"&[data-pulse]": { _after: {
|
|
168
|
-
animation: "ping",
|
|
169
|
-
background: "sys/ui/header/badge/red",
|
|
170
|
-
borderRadius: "full",
|
|
171
|
-
content: "\"\"",
|
|
172
|
-
inset: 0,
|
|
173
|
-
opacity: .5,
|
|
174
|
-
position: "absolute",
|
|
175
|
-
_motionReduce: { animation: "none" }
|
|
176
|
-
} }
|
|
177
|
-
},
|
|
178
|
-
indicator: {
|
|
179
|
-
background: "sys/ui/header/control/indicator",
|
|
180
|
-
height: "4",
|
|
181
|
-
insetBlockEnd: 0,
|
|
182
|
-
insetInline: 0,
|
|
183
|
-
pointerEvents: "none",
|
|
184
|
-
position: "absolute"
|
|
185
|
-
},
|
|
186
|
-
search: {
|
|
187
|
-
display: "flex",
|
|
188
|
-
flexShrink: 0,
|
|
189
|
-
position: "relative"
|
|
190
|
-
},
|
|
191
|
-
searchField: {
|
|
192
|
-
alignItems: "center",
|
|
193
|
-
backgroundColor: "sys/ui/header/bg",
|
|
194
|
-
backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,
|
|
195
|
-
borderColor: "border/strong",
|
|
196
|
-
borderRadius: "4",
|
|
197
|
-
borderStyle: "solid",
|
|
198
|
-
borderWidth: "1",
|
|
199
|
-
display: "none",
|
|
200
|
-
gap: "8",
|
|
201
|
-
height: "40",
|
|
202
|
-
insetBlockStart: "4",
|
|
203
|
-
insetInlineEnd: 0,
|
|
204
|
-
opacity: 0,
|
|
205
|
-
paddingInlineEnd: "12",
|
|
206
|
-
paddingInlineStart: "8",
|
|
207
|
-
position: "absolute",
|
|
208
|
-
transitionDuration: "fast",
|
|
209
|
-
transitionProperty: "opacity, visibility",
|
|
210
|
-
transitionTimingFunction: "ease-out",
|
|
211
|
-
visibility: "hidden",
|
|
212
|
-
width: SEARCH_FIELD_WIDTH,
|
|
213
|
-
"&:has(input:focus-visible)": { boxShadow: "0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset" },
|
|
214
|
-
_open: {
|
|
215
|
-
opacity: 1,
|
|
216
|
-
visibility: "visible"
|
|
217
|
-
},
|
|
218
|
-
_motionReduce: { transitionProperty: "none" },
|
|
219
|
-
tablet: { display: "flex" }
|
|
220
|
-
},
|
|
221
|
-
searchButton: { tablet: { _open: { visibility: "hidden" } } },
|
|
222
|
-
searchClear: {
|
|
223
|
-
color: "icon/on-color",
|
|
224
|
-
flexShrink: 0
|
|
225
|
-
},
|
|
226
|
-
searchIcon: {
|
|
227
|
-
color: "icon/on-color",
|
|
228
|
-
flexShrink: 0
|
|
229
|
-
},
|
|
230
|
-
searchInput: {
|
|
231
|
-
background: "transparent",
|
|
232
|
-
borderWidth: 0,
|
|
233
|
-
color: "text/on-color",
|
|
234
|
-
flex: 1,
|
|
235
|
-
minWidth: 0,
|
|
236
|
-
padding: 0,
|
|
237
|
-
textStyle: "body/lg/regular",
|
|
238
|
-
"&::-webkit-search-cancel-button": { display: "none" },
|
|
239
|
-
_focusVisible: {
|
|
240
|
-
outline: "none",
|
|
241
|
-
outlineWidth: 0
|
|
242
|
-
},
|
|
243
|
-
_placeholder: {
|
|
244
|
-
color: "text/on-color",
|
|
245
|
-
opacity: .6
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
});
|
|
250
|
-
//#endregion
|
|
251
|
-
export { uiHeaderSlotRecipe as default, uiHeaderHeight, uiHeaderHeightPx };
|
|
252
|
-
|
|
253
|
-
//# sourceMappingURL=UIHeader.recipe.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 '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 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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"}
|