@bitrise/bitkit-v2 0.3.481 → 0.3.482-beta.3116

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 (51) hide show
  1. package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +41 -0
  2. package/dist/components/BitkitUIHeader/BitkitUIHeader.js +114 -0
  3. package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +1 -0
  4. package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +10 -0
  5. package/dist/components/BitkitUIHeader/BitriseLogo.js +86 -0
  6. package/dist/components/BitkitUIHeader/BitriseLogo.js.map +1 -0
  7. package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +26 -0
  8. package/dist/components/BitkitUIHeader/UIHeaderAccount.js +40 -0
  9. package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +1 -0
  10. package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +34 -0
  11. package/dist/components/BitkitUIHeader/UIHeaderButton.js +45 -0
  12. package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +1 -0
  13. package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +13 -0
  14. package/dist/components/BitkitUIHeader/UIHeaderContext.js +11 -0
  15. package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +1 -0
  16. package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +65 -0
  17. package/dist/components/BitkitUIHeader/UIHeaderControl.js +72 -0
  18. package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +1 -0
  19. package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +20 -0
  20. package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +46 -0
  21. package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +1 -0
  22. package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +32 -0
  23. package/dist/components/BitkitUIHeader/UIHeaderSearch.js +121 -0
  24. package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +1 -0
  25. package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts +14 -0
  26. package/dist/components/BitkitUIHeader/uiHeaderPart.js +18 -0
  27. package/dist/components/BitkitUIHeader/uiHeaderPart.js.map +1 -0
  28. package/dist/components/index.d.ts +1 -0
  29. package/dist/main.js +3 -1
  30. package/dist/theme/recipes/UIHeaderButton.recipe.js +103 -0
  31. package/dist/theme/recipes/UIHeaderButton.recipe.js.map +1 -0
  32. package/dist/theme/recipes/index.js +3 -1
  33. package/dist/theme/recipes/index.js.map +1 -1
  34. package/dist/theme/semantic-tokens/index.d.ts +5 -0
  35. package/dist/theme/semantic-tokens/semanticColors.d.ts +5 -0
  36. package/dist/theme/semantic-tokens/semanticColors.js +1 -0
  37. package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
  38. package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +14 -0
  39. package/dist/theme/slot-recipes/UIHeader.recipe.js +253 -0
  40. package/dist/theme/slot-recipes/UIHeader.recipe.js.map +1 -0
  41. package/dist/theme/slot-recipes/UISideNav.recipe.d.ts +1 -2
  42. package/dist/theme/slot-recipes/UISideNav.recipe.js +2 -3
  43. package/dist/theme/slot-recipes/UISideNav.recipe.js.map +1 -1
  44. package/dist/theme/slot-recipes/index.d.ts +2 -2
  45. package/dist/theme/slot-recipes/index.js +2 -0
  46. package/dist/theme/slot-recipes/index.js.map +1 -1
  47. package/dist/theme/themeUtils.d.ts +6 -0
  48. package/dist/theme/themeUtils.js +7 -1
  49. package/dist/theme/themeUtils.js.map +1 -1
  50. package/package.json +1 -1
  51. package/dist/theme/recipes/index.d.ts +0 -525
@@ -91,10 +91,9 @@ declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefiniti
91
91
  insetBlockStart: number;
92
92
  insetInline: number;
93
93
  position: "absolute";
94
- background: "border/inverse";
94
+ background: "sys/ui/sidenav/separator";
95
95
  content: "\"\"";
96
96
  height: "1";
97
- opacity: 0.2;
98
97
  };
99
98
  };
100
99
  };
@@ -12,10 +12,9 @@ var DRAWER_WIDTH = rem(320);
12
12
  var WORKSPACE_MENU_WIDTH = rem(360);
13
13
  var railRow = { minWidth: RAIL_WIDTH_EXPANDED };
14
14
  var hairline = {
15
- background: "border/inverse",
15
+ background: "sys/ui/sidenav/separator",
16
16
  content: "\"\"",
17
- height: "1",
18
- opacity: .2
17
+ height: "1"
19
18
  };
20
19
  var uiSideNavSlotRecipe = defineSlotRecipe({
21
20
  className: "ui-side-nav",
@@ -1 +1 @@
1
- {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n paddingBlock: '8',\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n '[data-with-secondary] &': {\n marginBlock: '2',\n },\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n body: { overflowX: 'hidden', overflowY: 'auto', scrollbar: 'hidden' },\n item: { ...railRow, gap: '24', paddingBlock: '16' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
1
+ {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'sys/ui/sidenav/separator',\n content: '\"\"',\n height: '1',\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n paddingBlock: '8',\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n '[data-with-secondary] &': {\n marginBlock: '2',\n },\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n body: { overflowX: 'hidden', overflowY: 'auto', scrollbar: 'hidden' },\n item: { ...railRow, gap: '24', paddingBlock: '16' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
@@ -3763,6 +3763,7 @@ declare const slotRecipes: {
3763
3763
  };
3764
3764
  };
3765
3765
  }>;
3766
+ uiHeader: 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">>;
3766
3767
  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", {
3767
3768
  layout: {
3768
3769
  rail: {
@@ -3851,10 +3852,9 @@ declare const slotRecipes: {
3851
3852
  insetBlockStart: number;
3852
3853
  insetInline: number;
3853
3854
  position: "absolute";
3854
- background: "border/inverse";
3855
+ background: "sys/ui/sidenav/separator";
3855
3856
  content: "\"\"";
3856
3857
  height: "1";
3857
- opacity: 0.2;
3858
3858
  };
3859
3859
  };
3860
3860
  };
@@ -1,5 +1,6 @@
1
1
  import avatarSlotRecipe from "./Avatar.recipe.js";
2
2
  import numberInputSlotRecipe from "./NumberInput.recipe.js";
3
+ import uiHeaderSlotRecipe from "./UIHeader.recipe.js";
3
4
  import uiSideNavSlotRecipe from "./UISideNav.recipe.js";
4
5
  import accordionSlotRecipe from "./Accordion.recipe.js";
5
6
  import actionBarSlotRecipe from "./ActionBar.recipe.js";
@@ -133,6 +134,7 @@ var slotRecipes = {
133
134
  tooltip: tooltipSlotRecipe,
134
135
  tour: tourSlotRecipe,
135
136
  treeView: treeViewSlotRecipe,
137
+ uiHeader: uiHeaderSlotRecipe,
136
138
  uiSideNav: uiSideNavSlotRecipe
137
139
  };
138
140
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport filterSlotRecipe from './Filter.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport listboxSlotRecipe from './Listbox.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageHeaderSlotRecipe from './PageHeader.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiSideNavSlotRecipe from './UISideNav.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n filter: filterSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n listbox: listboxSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageHeader: pageHeaderSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tableCard: tableCardSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n toggletip: toggletipSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAcA;CACd,UAAU;CACV,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,eAAeC;CACf,MAAM;CACN,SAAS;CACT,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoBC;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgBC;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,WAAW;AACb"}
1
+ {"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport filterSlotRecipe from './Filter.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport listboxSlotRecipe from './Listbox.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageHeaderSlotRecipe from './PageHeader.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiHeaderSlotRecipe from './UIHeader.recipe';\nimport uiSideNavSlotRecipe from './UISideNav.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n filter: filterSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n listbox: listboxSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageHeader: pageHeaderSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tableCard: tableCardSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n toggletip: toggletipSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n uiHeader: uiHeaderSlotRecipe,\n uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAcA;CACd,UAAU;CACV,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,eAAeC;CACf,MAAM;CACN,SAAS;CACT,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoBC;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgBC;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU;CACV,WAAW;AACb"}
@@ -8,6 +8,12 @@ export declare function withSlashes(object: Record<string, any>): Record<string,
8
8
  * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`
9
9
  */
10
10
  export declare const rem: (input: number) => `${number}rem`;
11
+ /**
12
+ * A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`
13
+ * reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`
14
+ * as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.
15
+ */
16
+ export declare const colorVar: (token: string) => string;
11
17
  /**
12
18
  * The colour tokens under the given prefixes, for props that must take a semantic token.
13
19
  *
@@ -29,7 +29,13 @@ function withSlashes(object) {
29
29
  var rem = (input) => {
30
30
  return `${input / 16}rem`;
31
31
  };
32
+ /**
33
+ * A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`
34
+ * reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`
35
+ * as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.
36
+ */
37
+ var colorVar = (token) => `var(--colors-${token.replace(/\//g, "\\/")})`;
32
38
  //#endregion
33
- export { flattenTokens, rem, withSlashes };
39
+ export { colorVar, flattenTokens, rem, withSlashes };
34
40
 
35
41
  //# sourceMappingURL=themeUtils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n const result: Record<string, any> = {};\n const keys = Object.keys(object);\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n const value = (object as any)[key];\n\n const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n Object.assign(result, flattenTokens(value, prefixedKey));\n continue;\n }\n\n result[prefixedKey] = value;\n }\n\n return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n return {\n ...object,\n ...flattenTokens(object),\n };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n return `${input / 16}rem`;\n};\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n ? string\n : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n return `heading/${as}`;\n }\n return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB"}
1
+ {"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n const result: Record<string, any> = {};\n const keys = Object.keys(object);\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n const value = (object as any)[key];\n\n const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n Object.assign(result, flattenTokens(value, prefixedKey));\n continue;\n }\n\n result[prefixedKey] = value;\n }\n\n return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n return {\n ...object,\n ...flattenTokens(object),\n };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n return `${input / 16}rem`;\n};\n\n/**\n * A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`\n * reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`\n * as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.\n */\nexport const colorVar = (token: string): string => `var(--colors-${token.replace(/\\//g, '\\\\/')})`;\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n ? string\n : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n return `heading/${as}`;\n }\n return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB;;;;;;AAOA,IAAa,YAAY,UAA0B,gBAAgB,MAAM,QAAQ,OAAO,KAAK,EAAE"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.481",
4
+ "version": "0.3.482-beta.3116",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",