@bitrise/bitkit-v2 0.3.481-beta.3103 → 0.3.481-beta.3105
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/BitkitUIHeader/BitkitUIHeader.js +41 -28
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +1 -1
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js +2 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +1 -1
- package/dist/components/BitkitUIHeader/UIHeaderButton.js +2 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +1 -1
- package/dist/components/BitkitUIHeader/UIHeaderControl.js +3 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +1 -1
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js +7 -1
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +1 -1
- package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts +14 -0
- package/dist/components/BitkitUIHeader/uiHeaderPart.js +18 -0
- package/dist/components/BitkitUIHeader/uiHeaderPart.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
2
2
|
import BitriseLogo from "./BitriseLogo.js";
|
|
3
3
|
import { UIHeaderContextProvider } from "./UIHeaderContext.js";
|
|
4
|
+
import uiHeaderPart from "./uiHeaderPart.js";
|
|
4
5
|
import UIHeaderControl from "./UIHeaderControl.js";
|
|
5
6
|
import UIHeaderAccount from "./UIHeaderAccount.js";
|
|
6
7
|
import UIHeaderButton from "./UIHeaderButton.js";
|
|
@@ -54,36 +55,48 @@ var BitkitUIHeader = forwardRef((props, ref) => {
|
|
|
54
55
|
asChild: true,
|
|
55
56
|
...rest,
|
|
56
57
|
css: [styles.root, css],
|
|
57
|
-
children: /* @__PURE__ */ jsxs("header", {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
css: styles.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
58
|
+
children: /* @__PURE__ */ jsxs("header", {
|
|
59
|
+
...uiHeaderPart("root"),
|
|
60
|
+
children: [/* @__PURE__ */ jsxs(Box, {
|
|
61
|
+
ref: barRef,
|
|
62
|
+
css: styles.bar,
|
|
63
|
+
...uiHeaderPart("bar"),
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsx(Box, {
|
|
66
|
+
css: styles.leading,
|
|
67
|
+
...uiHeaderPart("leading"),
|
|
68
|
+
children: leading
|
|
69
|
+
}),
|
|
70
|
+
/* @__PURE__ */ jsx(Box, {
|
|
71
|
+
css: styles.spacer,
|
|
72
|
+
...uiHeaderPart("spacer")
|
|
73
|
+
}),
|
|
74
|
+
/* @__PURE__ */ jsx(Box, {
|
|
75
|
+
css: styles.logoBlock,
|
|
76
|
+
...uiHeaderPart("logo-block"),
|
|
77
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
78
|
+
asChild: true,
|
|
79
|
+
css: styles.logoLink,
|
|
80
|
+
children: /* @__PURE__ */ jsx("a", {
|
|
81
|
+
"aria-label": "Bitrise",
|
|
82
|
+
href: logoHref,
|
|
83
|
+
...uiHeaderPart("logo-link"),
|
|
84
|
+
children: /* @__PURE__ */ jsx(BitriseLogo, {})
|
|
85
|
+
})
|
|
75
86
|
})
|
|
87
|
+
}),
|
|
88
|
+
/* @__PURE__ */ jsx(Box, {
|
|
89
|
+
css: styles.actions,
|
|
90
|
+
...uiHeaderPart("actions"),
|
|
91
|
+
children
|
|
76
92
|
})
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
]
|
|
83
|
-
})
|
|
84
|
-
css: styles.banner,
|
|
85
|
-
children: banner
|
|
86
|
-
})] })
|
|
93
|
+
]
|
|
94
|
+
}), !!banner && /* @__PURE__ */ jsx(Box, {
|
|
95
|
+
css: styles.banner,
|
|
96
|
+
...uiHeaderPart("banner"),
|
|
97
|
+
children: banner
|
|
98
|
+
})]
|
|
99
|
+
})
|
|
87
100
|
})
|
|
88
101
|
});
|
|
89
102
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitUIHeader.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/BitkitUIHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useMemo, useRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitriseLogo from './BitriseLogo';\nimport UIHeaderAccount from './UIHeaderAccount';\nimport UIHeaderButton from './UIHeaderButton';\nimport { UIHeaderContextProvider } from './UIHeaderContext';\nimport UIHeaderControl from './UIHeaderControl';\nimport UIHeaderNavButton from './UIHeaderNavButton';\nimport UIHeaderSearch from './UIHeaderSearch';\n\nexport interface BitkitUIHeaderProps extends Omit<BoxProps, 'children'> {\n /**\n * Content below the bar, inside the header itself — account-wide notices and the like. It is\n * part of the header rather than the page, so a pinned header keeps it pinned too, and a page\n * reserving room for the header has one element to measure rather than two to add up.\n *\n * Measure it is the word: the banner's height is your content, so a header carrying one is\n * taller than `uiHeaderHeight`. A pinned header needs the measurement, and a header that scrolls\n * with the page needs neither.\n */\n banner?: ReactNode;\n /** The trailing controls, in the order they should appear. */\n children?: ReactNode;\n /**\n * The slot before the logo, shown only below the `tablet` breakpoint. It takes a\n * `BitkitUIHeader.NavButton`, which opens the navigation drawer, or a `BitkitUIHeader.Control`\n * for an account with no workspace to navigate yet.\n *\n * It is a slot rather than a child because the design fixes where it goes: children all land in\n * the trailing cluster, on the far side of the logo.\n */\n leading?: ReactNode;\n /** Where the logo links to. */\n logoHref?: string;\n}\n\n/**\n * The platform's top bar: the Bitrise logo, and the controls for everything that is not navigation\n * — search, changelog, help, notifications, the account.\n *\n * ```tsx\n * <BitkitUIHeader leading={<BitkitUIHeader.NavButton name={workspace} onClick={openNav} />}>\n * <BitkitUIHeader.Button icon={IconSparkle} onClick={askAI} variant=\"secondary\">Ask AI</BitkitUIHeader.Button>\n * <BitkitUIHeader.Search onOpenChange={setSearchOpen} onValueChange={setQuery} open={searchOpen} value={query} />\n * <BitkitUIHeader.Control icon={IconBell} label=\"Notifications\" onClick={toggleNotifications} selected={isOpen} />\n * <BitkitUIHeader.Account name={user.name} onClick={toggleAccount} src={user.avatar} />\n * </BitkitUIHeader>\n * ```\n *\n * It does not position itself. The consumer decides whether it scrolls with the page or is pinned\n * to the top of it, which is what lets a page put its own chrome above the header. Pin it with the\n * style props the root forwards, and reserve `uiHeaderHeight` for it in the page below, or\n * `uiHeaderHeightPx` where the layout needs a number rather than a token. Those are the bar's\n * height: a header with a `banner` is taller, and a pinned one is measured rather than assumed.\n *\n * The panels the controls open are the consumer's: a control takes a `selected` flag and paints\n * itself as the open one, and nothing more. That keeps a drawer's content, placement and state\n * where the product can see them.\n *\n * It carries its own responsive behaviour and needs no breakpoint hook. Below `tablet` the\n * `leading` slot appears, the logo centres, the account button becomes an icon, and search stops\n * opening a field in the bar.\n */\nconst BitkitUIHeader = forwardRef<HTMLElement, BitkitUIHeaderProps>((props, ref) => {\n const { banner, children, css, leading, logoHref = '/', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'uiHeader' });\n const styles = recipe();\n\n const barRef = useRef<HTMLDivElement>(null);\n\n const context = useMemo(() => ({ barRef, styles }), [styles]);\n\n return (\n <UIHeaderContextProvider value={context}>\n <Box ref={ref} asChild {...rest} css={[styles.root, css]}>\n <header>\n <Box ref={barRef} css={styles.bar}>\n <Box css={styles.leading}
|
|
1
|
+
{"version":3,"file":"BitkitUIHeader.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/BitkitUIHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useMemo, useRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitriseLogo from './BitriseLogo';\nimport UIHeaderAccount from './UIHeaderAccount';\nimport UIHeaderButton from './UIHeaderButton';\nimport { UIHeaderContextProvider } from './UIHeaderContext';\nimport UIHeaderControl from './UIHeaderControl';\nimport UIHeaderNavButton from './UIHeaderNavButton';\nimport uiHeaderPart from './uiHeaderPart';\nimport UIHeaderSearch from './UIHeaderSearch';\n\nexport interface BitkitUIHeaderProps extends Omit<BoxProps, 'children'> {\n /**\n * Content below the bar, inside the header itself — account-wide notices and the like. It is\n * part of the header rather than the page, so a pinned header keeps it pinned too, and a page\n * reserving room for the header has one element to measure rather than two to add up.\n *\n * Measure it is the word: the banner's height is your content, so a header carrying one is\n * taller than `uiHeaderHeight`. A pinned header needs the measurement, and a header that scrolls\n * with the page needs neither.\n */\n banner?: ReactNode;\n /** The trailing controls, in the order they should appear. */\n children?: ReactNode;\n /**\n * The slot before the logo, shown only below the `tablet` breakpoint. It takes a\n * `BitkitUIHeader.NavButton`, which opens the navigation drawer, or a `BitkitUIHeader.Control`\n * for an account with no workspace to navigate yet.\n *\n * It is a slot rather than a child because the design fixes where it goes: children all land in\n * the trailing cluster, on the far side of the logo.\n */\n leading?: ReactNode;\n /** Where the logo links to. */\n logoHref?: string;\n}\n\n/**\n * The platform's top bar: the Bitrise logo, and the controls for everything that is not navigation\n * — search, changelog, help, notifications, the account.\n *\n * ```tsx\n * <BitkitUIHeader leading={<BitkitUIHeader.NavButton name={workspace} onClick={openNav} />}>\n * <BitkitUIHeader.Button icon={IconSparkle} onClick={askAI} variant=\"secondary\">Ask AI</BitkitUIHeader.Button>\n * <BitkitUIHeader.Search onOpenChange={setSearchOpen} onValueChange={setQuery} open={searchOpen} value={query} />\n * <BitkitUIHeader.Control icon={IconBell} label=\"Notifications\" onClick={toggleNotifications} selected={isOpen} />\n * <BitkitUIHeader.Account name={user.name} onClick={toggleAccount} src={user.avatar} />\n * </BitkitUIHeader>\n * ```\n *\n * It does not position itself. The consumer decides whether it scrolls with the page or is pinned\n * to the top of it, which is what lets a page put its own chrome above the header. Pin it with the\n * style props the root forwards, and reserve `uiHeaderHeight` for it in the page below, or\n * `uiHeaderHeightPx` where the layout needs a number rather than a token. Those are the bar's\n * height: a header with a `banner` is taller, and a pinned one is measured rather than assumed.\n *\n * The panels the controls open are the consumer's: a control takes a `selected` flag and paints\n * itself as the open one, and nothing more. That keeps a drawer's content, placement and state\n * where the product can see them.\n *\n * It carries its own responsive behaviour and needs no breakpoint hook. Below `tablet` the\n * `leading` slot appears, the logo centres, the account button becomes an icon, and search stops\n * opening a field in the bar.\n */\nconst BitkitUIHeader = forwardRef<HTMLElement, BitkitUIHeaderProps>((props, ref) => {\n const { banner, children, css, leading, logoHref = '/', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'uiHeader' });\n const styles = recipe();\n\n const barRef = useRef<HTMLDivElement>(null);\n\n const context = useMemo(() => ({ barRef, styles }), [styles]);\n\n return (\n <UIHeaderContextProvider value={context}>\n <Box ref={ref} asChild {...rest} css={[styles.root, css]}>\n <header {...uiHeaderPart('root')}>\n <Box ref={barRef} css={styles.bar} {...uiHeaderPart('bar')}>\n <Box css={styles.leading} {...uiHeaderPart('leading')}>\n {leading}\n </Box>\n <Box css={styles.spacer} {...uiHeaderPart('spacer')} />\n <Box css={styles.logoBlock} {...uiHeaderPart('logo-block')}>\n <Box asChild css={styles.logoLink}>\n <a aria-label=\"Bitrise\" href={logoHref} {...uiHeaderPart('logo-link')}>\n <BitriseLogo />\n </a>\n </Box>\n </Box>\n <Box css={styles.actions} {...uiHeaderPart('actions')}>\n {children}\n </Box>\n </Box>\n {!!banner && (\n <Box css={styles.banner} {...uiHeaderPart('banner')}>\n {banner}\n </Box>\n )}\n </header>\n </Box>\n </UIHeaderContextProvider>\n );\n});\n\nexport { uiHeaderHeight, uiHeaderHeightPx } from '../../theme/slot-recipes/UIHeader.recipe';\nexport { type BitkitUIHeaderAccountProps } from './UIHeaderAccount';\nexport { type BitkitUIHeaderButtonProps } from './UIHeaderButton';\nexport {\n type BitkitUIHeaderBadge,\n type BitkitUIHeaderControlAsAnchorProps,\n type BitkitUIHeaderControlAsButtonProps,\n type BitkitUIHeaderControlProps,\n} from './UIHeaderControl';\nexport { type BitkitUIHeaderNavButtonProps } from './UIHeaderNavButton';\nexport { type BitkitUIHeaderSearchProps } from './UIHeaderSearch';\n\nBitkitUIHeader.displayName = 'BitkitUIHeader';\n\nexport default withSubComponents(BitkitUIHeader, {\n Account: UIHeaderAccount,\n Button: UIHeaderButton,\n Control: UIHeaderControl,\n NavButton: UIHeaderNavButton,\n Search: UIHeaderSearch,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,IAAM,iBAAiB,YAA8C,OAAO,QAAQ;CAClF,MAAM,EAAE,QAAQ,UAAU,KAAK,SAAS,WAAW,KAAK,GAAG,SAAS;CAGpE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO;CAEtB,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,UAAU,eAAe;EAAE;EAAQ;CAAO,IAAI,CAAC,MAAM,CAAC;CAE5D,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,KAAD;GAAU;GAAK,SAAA;GAAQ,GAAI;GAAM,KAAK,CAAC,OAAO,MAAM,GAAG;GACrD,UAAA,qBAAC,UAAD;IAAQ,GAAI,aAAa,MAAM;IAA/B,UAAA,CACE,qBAAC,KAAD;KAAK,KAAK;KAAQ,KAAK,OAAO;KAAK,GAAI,aAAa,KAAK;KAAzD,UAAA;MACE,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI,aAAa,SAAS;OACjD,UAAA;MACE,CAAA;MACL,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAQ,GAAI,aAAa,QAAQ;MAAI,CAAA;MACtD,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAW,GAAI,aAAa,YAAY;OACvD,UAAA,oBAAC,KAAD;QAAK,SAAA;QAAQ,KAAK,OAAO;QACvB,UAAA,oBAAC,KAAD;SAAG,cAAW;SAAU,MAAM;SAAU,GAAI,aAAa,WAAW;SAClE,UAAA,oBAAC,aAAD,CAAc,CAAA;QACb,CAAA;OACA,CAAA;MACF,CAAA;MACL,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI,aAAa,SAAS;OACjD;MACE,CAAA;KACF;IACJ,CAAA,GAAA,CAAC,CAAC,UACD,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAQ,GAAI,aAAa,QAAQ;KAC/C,UAAA;IACE,CAAA,CAED;;EACL,CAAA;CACkB,CAAA;AAE7B,CAAC;AAcD,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB;CAC/C,SAAS;CACT,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;AACV,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import IconPerson from "../../icons/IconPerson.js";
|
|
2
2
|
import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
|
|
3
3
|
import { useUIHeaderContext } from "./UIHeaderContext.js";
|
|
4
|
+
import uiHeaderPart from "./uiHeaderPart.js";
|
|
4
5
|
import { UIHeaderControlBase } from "./UIHeaderControl.js";
|
|
5
6
|
import { forwardRef } from "react";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -22,6 +23,7 @@ var UIHeaderAccount = forwardRef((props, ref) => {
|
|
|
22
23
|
footprint: "control",
|
|
23
24
|
label: label ?? `Account: ${name}`,
|
|
24
25
|
selected,
|
|
26
|
+
...uiHeaderPart("account"),
|
|
25
27
|
...rest,
|
|
26
28
|
children: [/* @__PURE__ */ jsx(BitkitAvatar, {
|
|
27
29
|
css: styles.accountAvatar,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIHeaderAccount.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderAccount.tsx"],"sourcesContent":["import { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconPerson } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { type BitkitUIHeaderBadge, UIHeaderControlBase } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderAccountProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n /**\n * Marks the account as carrying something unread, like the other controls. It is announced as\n * part of the name too.\n */\n badge?: BitkitUIHeaderBadge;\n /**\n * The accessible name. Defaults to `Account: ` and the signed-in person's name — the name alone\n * would announce as a person rather than as what the button opens.\n */\n label?: string;\n /** Who is signed in. Shown as the avatar's initials when there is no picture. */\n name: string;\n /** Marks the account panel as open. */\n selected?: boolean;\n /** The signed-in person's picture. Without one the avatar falls back to their initials. */\n src?: string;\n}\n\n/**\n * The account button at the trailing end of the bar. It shows the signed-in person's avatar on\n * desktop and a plain icon on mobile, where the bar has no room for a picture.\n */\nconst UIHeaderAccount = forwardRef<HTMLButtonElement, BitkitUIHeaderAccountProps>((props, ref) => {\n const { badge, label, name, selected, src, ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n\n const avatarProps = src ? ({ src, variant: 'user' } as const) : ({ variant: 'letters' } as const);\n\n return (\n <UIHeaderControlBase\n ref={ref}\n badge={badge}\n footprint=\"control\"\n label={label ?? `Account: ${name}`}\n selected={selected}\n {...rest}\n >\n <BitkitAvatar css={styles.accountAvatar} name={name} size=\"32\" {...avatarProps} />\n <IconPerson css={styles.accountIcon} />\n </UIHeaderControlBase>\n );\n});\n\nUIHeaderAccount.displayName = 'BitkitUIHeader.Account';\n\nexport default UIHeaderAccount;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"UIHeaderAccount.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderAccount.tsx"],"sourcesContent":["import { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconPerson } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { type BitkitUIHeaderBadge, UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport interface BitkitUIHeaderAccountProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n /**\n * Marks the account as carrying something unread, like the other controls. It is announced as\n * part of the name too.\n */\n badge?: BitkitUIHeaderBadge;\n /**\n * The accessible name. Defaults to `Account: ` and the signed-in person's name — the name alone\n * would announce as a person rather than as what the button opens.\n */\n label?: string;\n /** Who is signed in. Shown as the avatar's initials when there is no picture. */\n name: string;\n /** Marks the account panel as open. */\n selected?: boolean;\n /** The signed-in person's picture. Without one the avatar falls back to their initials. */\n src?: string;\n}\n\n/**\n * The account button at the trailing end of the bar. It shows the signed-in person's avatar on\n * desktop and a plain icon on mobile, where the bar has no room for a picture.\n */\nconst UIHeaderAccount = forwardRef<HTMLButtonElement, BitkitUIHeaderAccountProps>((props, ref) => {\n const { badge, label, name, selected, src, ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n\n const avatarProps = src ? ({ src, variant: 'user' } as const) : ({ variant: 'letters' } as const);\n\n return (\n <UIHeaderControlBase\n ref={ref}\n badge={badge}\n footprint=\"control\"\n label={label ?? `Account: ${name}`}\n selected={selected}\n {...uiHeaderPart('account')}\n {...rest}\n >\n <BitkitAvatar css={styles.accountAvatar} name={name} size=\"32\" {...avatarProps} />\n <IconPerson css={styles.accountIcon} />\n </UIHeaderControlBase>\n );\n});\n\nUIHeaderAccount.displayName = 'BitkitUIHeader.Account';\n\nexport default UIHeaderAccount;\n"],"mappings":";;;;;;;;;;;;AAgCA,IAAM,kBAAkB,YAA2D,OAAO,QAAQ;CAChG,MAAM,EAAE,OAAO,OAAO,MAAM,UAAU,KAAK,GAAG,SAAS;CAEvD,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,cAAc,MAAO;EAAE;EAAK,SAAS;CAAO,IAAe,EAAE,SAAS,UAAU;CAEtF,OACE,qBAAC,qBAAD;EACO;EACE;EACP,WAAU;EACV,OAAO,SAAS,YAAY;EAClB;EACV,GAAI,aAAa,SAAS;EAC1B,GAAI;EAPN,UAAA,CASE,oBAAC,cAAD;GAAc,KAAK,OAAO;GAAqB;GAAM,MAAK;GAAK,GAAI;EAAc,CAAA,GACjF,oBAAC,YAAD,EAAY,KAAK,OAAO,YAAc,CAAA,CACnB;;AAEzB,CAAC;AAED,gBAAgB,cAAc"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import uiHeaderPart from "./uiHeaderPart.js";
|
|
1
2
|
import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
|
|
2
3
|
import { forwardRef } from "react";
|
|
3
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -19,6 +20,7 @@ var UIHeaderButton = forwardRef((props, ref) => {
|
|
|
19
20
|
"data-selected": selected ? "" : void 0,
|
|
20
21
|
disabled: state === "disabled",
|
|
21
22
|
type: "button",
|
|
23
|
+
...uiHeaderPart("button"),
|
|
22
24
|
...rest,
|
|
23
25
|
css: [recipe({
|
|
24
26
|
badge: badge === true ? "idle" : badge || void 0,
|
|
@@ -1 +1 @@
|
|
|
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 { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\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 * It is announced as part of the button's name too, so it is not the dot alone that carries it.\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 {!!badge && <VisuallyHidden>, unread</VisuallyHidden>}\n {!!SuffixIcon && <SuffixIcon size=\"16\" />}\n </chakra.button>\n );\n});\n\nUIHeaderButton.displayName = 'BitkitUIHeader.Button';\n\nexport default UIHeaderButton;\n"],"mappings":"
|
|
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 { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { type BitkitUIHeaderBadge } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\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 * It is announced as part of the button's name too, so it is not the dot alone that carries it.\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 {...uiHeaderPart('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 {!!badge && <VisuallyHidden>, unread</VisuallyHidden>}\n {!!SuffixIcon && <SuffixIcon size=\"16\" />}\n </chakra.button>\n );\n});\n\nUIHeaderButton.displayName = 'BitkitUIHeader.Button';\n\nexport default UIHeaderButton;\n"],"mappings":";;;;;;;;;;;;;AAsCA,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,aAAa,QAAQ;EACzB,GAAI;EACJ,KAAK,CAAC,OAAO;GAAE,OAAO,UAAU,OAAO,SAAS,SAAS,KAAA;GAAW;EAAQ,CAAC,GAAG,GAAG;EAVrF,UAAA;GAYG,CAAC,CAAC,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GAC5B,oBAAC,MAAD;IAAM,IAAG;IAAO,eAAc;IAC3B;GACG,CAAA;GACL,CAAC,CAAC,SAAS,oBAAC,gBAAD,EAAA,UAAgB,WAAwB,CAAA;GACnD,CAAC,CAAC,cAAc,oBAAC,YAAD,EAAY,MAAK,KAAM,CAAA;EAC3B;;AAEnB,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useUIHeaderContext } from "./UIHeaderContext.js";
|
|
2
|
+
import uiHeaderPart from "./uiHeaderPart.js";
|
|
2
3
|
import { Box } from "@chakra-ui/react/box";
|
|
3
4
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
4
5
|
import { forwardRef } from "react";
|
|
@@ -28,6 +29,7 @@ var UIHeaderControlBase = forwardRef((props, ref) => {
|
|
|
28
29
|
"data-selected": selected ? "" : void 0,
|
|
29
30
|
rel: isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel,
|
|
30
31
|
target: isExternal ? "_blank" : target,
|
|
32
|
+
...uiHeaderPart(footprint === "navButton" ? "nav-button" : "control"),
|
|
31
33
|
...anchorRest,
|
|
32
34
|
css: [styles[footprint], css],
|
|
33
35
|
children: content
|
|
@@ -40,6 +42,7 @@ var UIHeaderControlBase = forwardRef((props, ref) => {
|
|
|
40
42
|
"aria-label": accessibleName,
|
|
41
43
|
"data-selected": selected ? "" : void 0,
|
|
42
44
|
type: "button",
|
|
45
|
+
...uiHeaderPart(footprint === "navButton" ? "nav-button" : "control"),
|
|
43
46
|
...buttonRest,
|
|
44
47
|
css: [styles[footprint], css],
|
|
45
48
|
children: content
|
|
@@ -1 +1 @@
|
|
|
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';\n\nexport type BitkitUIHeaderBadge = boolean | 'idle' | 'pulse';\n\ninterface ControlCommonProps {\n /** Marks the control as carrying something unread. It is announced as part of the name too. */\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 accessibleName = props.badge ? `${props.label}, unread` : props.label;\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: _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={accessibleName}\n data-selected={selected ? '' : undefined}\n rel={isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel}\n target={isExternal ? '_blank' : target}\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: _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={accessibleName}\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 {...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":"
|
|
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. It is announced as part of the name too. */\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 accessibleName = props.badge ? `${props.label}, unread` : props.label;\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: _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={accessibleName}\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: _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={accessibleName}\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,iBAAiB,MAAM,QAAQ,GAAG,MAAM,MAAM,YAAY,MAAM;CAEtE,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,OAAO,QACP,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,OAAO,QACP,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,6 +1,7 @@
|
|
|
1
1
|
import IconMagnifier from "../../icons/IconMagnifier.js";
|
|
2
2
|
import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
|
|
3
3
|
import { useUIHeaderContext } from "./UIHeaderContext.js";
|
|
4
|
+
import uiHeaderPart from "./uiHeaderPart.js";
|
|
4
5
|
import { UIHeaderControlBase } from "./UIHeaderControl.js";
|
|
5
6
|
import { Box } from "@chakra-ui/react/box";
|
|
6
7
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
@@ -72,6 +73,7 @@ var UIHeaderSearch = forwardRef((props, ref) => {
|
|
|
72
73
|
return /* @__PURE__ */ jsxs(Box, {
|
|
73
74
|
ref: setSearchRef,
|
|
74
75
|
css: [styles.search, css],
|
|
76
|
+
...uiHeaderPart("search"),
|
|
75
77
|
...rest,
|
|
76
78
|
children: [/* @__PURE__ */ jsx(UIHeaderControlBase, {
|
|
77
79
|
ref: buttonElementRef,
|
|
@@ -82,10 +84,12 @@ var UIHeaderSearch = forwardRef((props, ref) => {
|
|
|
82
84
|
label,
|
|
83
85
|
onClick: () => onOpenChange?.(!open),
|
|
84
86
|
selected,
|
|
87
|
+
...uiHeaderPart("search-button"),
|
|
85
88
|
children: /* @__PURE__ */ jsx(IconMagnifier, {})
|
|
86
89
|
}), /* @__PURE__ */ jsxs(Box, {
|
|
87
90
|
css: styles.searchField,
|
|
88
91
|
"data-open": open ? "" : void 0,
|
|
92
|
+
...uiHeaderPart("search-field"),
|
|
89
93
|
children: [
|
|
90
94
|
/* @__PURE__ */ jsx(IconMagnifier, { css: styles.searchIcon }),
|
|
91
95
|
/* @__PURE__ */ jsx(chakra.input, {
|
|
@@ -93,6 +97,7 @@ var UIHeaderSearch = forwardRef((props, ref) => {
|
|
|
93
97
|
"aria-label": label,
|
|
94
98
|
css: styles.searchInput,
|
|
95
99
|
onChange: (event) => onValueChange?.(event.target.value),
|
|
100
|
+
...uiHeaderPart("search-input"),
|
|
96
101
|
placeholder,
|
|
97
102
|
type: "search",
|
|
98
103
|
value
|
|
@@ -102,7 +107,8 @@ var UIHeaderSearch = forwardRef((props, ref) => {
|
|
|
102
107
|
colorVariant: "white",
|
|
103
108
|
css: styles.searchClear,
|
|
104
109
|
onClick: handleClear,
|
|
105
|
-
size: "sm"
|
|
110
|
+
size: "sm",
|
|
111
|
+
...uiHeaderPart("search-clear")
|
|
106
112
|
})
|
|
107
113
|
]
|
|
108
114
|
})]
|
|
@@ -1 +1 @@
|
|
|
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';\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 what happens in the bar itself counts: 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 //\n // Focus is what settles it for the keyboard. The open field lies over the controls beside it\n // without taking them out of the tab order, so Shift+Tab out of the input lands on one of them,\n // covered — and reaching a control with the keyboard never fires a pointer event. Both end with\n // focus inside the bar and outside the search, which is the moment to close.\n //\n // The pointer still needs its own listener: Safari gives a button no focus when it is clicked.\n useEffect(() => {\n if (!open) return undefined;\n\n const bar = barRef.current;\n if (!bar) return undefined;\n\n const dismiss = (event: Event) => {\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('focusin', dismiss);\n bar.addEventListener('pointerdown', dismiss);\n return () => {\n bar.removeEventListener('focusin', dismiss);\n bar.removeEventListener('pointerdown', dismiss);\n };\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]} {...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 >\n <IconMagnifier />\n </UIHeaderControlBase>\n <Box css={styles.searchField} data-open={open ? '' : undefined}>\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 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":"
|
|
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 what happens in the bar itself counts: 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 //\n // Focus is what settles it for the keyboard. The open field lies over the controls beside it\n // without taking them out of the tab order, so Shift+Tab out of the input lands on one of them,\n // covered — and reaching a control with the keyboard never fires a pointer event. Both end with\n // focus inside the bar and outside the search, which is the moment to close.\n //\n // The pointer still needs its own listener: Safari gives a button no focus when it is clicked.\n useEffect(() => {\n if (!open) return undefined;\n\n const bar = barRef.current;\n if (!bar) return undefined;\n\n const dismiss = (event: Event) => {\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('focusin', dismiss);\n bar.addEventListener('pointerdown', dismiss);\n return () => {\n bar.removeEventListener('focusin', dismiss);\n bar.removeEventListener('pointerdown', dismiss);\n };\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 {...uiHeaderPart('search-clear')}\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;CAaT,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK,OAAO,KAAA;EAEjB,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAS,MAAM,kBAAkB,OAAO,MAAM,SAAS;GAC7D,IAAI,CAAC,UAAU,iBAAiB,SAAS,SAAS,MAAM,GAAG;GAC3D,mBAAmB,KAAK;EAC1B;EAEA,IAAI,iBAAiB,WAAW,OAAO;EACvC,IAAI,iBAAiB,eAAe,OAAO;EAC3C,aAAa;GACX,IAAI,oBAAoB,WAAW,OAAO;GAC1C,IAAI,oBAAoB,eAAe,OAAO;EAChD;CACF,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;KACL,GAAI,aAAa,cAAc;IAChC,CAAA;GAEA;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
* It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a
|
|
6
|
+
* product's global styles use `[data-scope]` to tell a design system's internals from its own
|
|
7
|
+
* markup — the platform's focus ring excludes them that way — and a hand-built component without
|
|
8
|
+
* it is the one thing in the bar those rules would reach.
|
|
9
|
+
*/
|
|
10
|
+
declare const uiHeaderPart: (name: string) => {
|
|
11
|
+
'data-part': string;
|
|
12
|
+
'data-scope': string;
|
|
13
|
+
};
|
|
14
|
+
export default uiHeaderPart;
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
* It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a
|
|
7
|
+
* product's global styles use `[data-scope]` to tell a design system's internals from its own
|
|
8
|
+
* markup — the platform's focus ring excludes them that way — and a hand-built component without
|
|
9
|
+
* it is the one thing in the bar those rules would reach.
|
|
10
|
+
*/
|
|
11
|
+
var uiHeaderPart = (name) => ({
|
|
12
|
+
"data-part": name,
|
|
13
|
+
"data-scope": "ui-header"
|
|
14
|
+
});
|
|
15
|
+
//#endregion
|
|
16
|
+
export { uiHeaderPart as default };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=uiHeaderPart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 *\n * It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a\n * product's global styles use `[data-scope]` to tell a design system's internals from its own\n * markup — the platform's focus ring excludes them that way — and a hand-built component without\n * it is the one thing in the bar those rules would reach.\n */\nconst uiHeaderPart = (name: string) => ({ 'data-part': name, 'data-scope': 'ui-header' });\n\nexport default uiHeaderPart;\n"],"mappings":";;;;;;;;;;AASA,IAAM,gBAAgB,UAAkB;CAAE,aAAa;CAAM,cAAc;AAAY"}
|