@bitrise/bitkit-v2 0.3.406 → 0.3.408
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/AGENTS.md +1 -1
- package/dist/components/BitkitAccordion/BitkitAccordion.d.ts +17 -4
- package/dist/components/BitkitAccordion/BitkitAccordion.js +20 -11
- package/dist/components/BitkitAccordion/BitkitAccordion.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.d.ts +11 -3
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js +5 -22
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.d.ts +5 -2
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.js +2 -1
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.d.ts +5 -2
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.js +2 -1
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.d.ts +4 -2
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.js +4 -2
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/types.d.ts +3 -2
- package/dist/theme/slot-recipes/Accordion.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Accordion.recipe.js +22 -7
- package/dist/theme/slot-recipes/Accordion.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/LabeledData.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Stat.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/TreeView.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/index.d.ts +5 -5
- package/dist/utilities/AssetSelectChevron.js +1 -0
- package/dist/utilities/AssetSelectChevron.js.map +1 -1
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -99,7 +99,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
99
99
|
- **Slot props for content, not boolean flags** — pass an icon/badge/etc. directly as a prop. Element presence is the toggle:
|
|
100
100
|
```tsx
|
|
101
101
|
<BitkitButton icon={IconCheck}>Save</BitkitButton>
|
|
102
|
-
<BitkitAccordion.ItemTrigger
|
|
102
|
+
<BitkitAccordion.ItemTrigger suffixBadge={<BitkitBadge>3</BitkitBadge>}>Files</BitkitAccordion.ItemTrigger>
|
|
103
103
|
```
|
|
104
104
|
- **Buttons can render as links** — `BitkitButton`, `BitkitIconButton`, `BitkitControlButton`, and `BitkitColorButton` render an `<a>` when `href` is passed. Don't pass `as="a"` — they pick the element from `href` themselves. The button-recipe styles apply to the anchor. Pass `isExternal` to auto-add `target="_blank" rel="noreferrer noopener"`. For routing libraries (Next.js, React Router), use `asChild` with your own anchor element:
|
|
105
105
|
```tsx
|
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
import { Accordion, AccordionItemBodyProps, AccordionItemProps, AccordionItemTriggerProps, AccordionRootProps } from '@chakra-ui/react/accordion';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactElement, ReactNode } from 'react';
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
|
+
import { BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';
|
|
4
5
|
export type BitkitAccordionProps = AccordionRootProps;
|
|
5
6
|
export type BitkitAccordionItemProps = AccordionItemProps;
|
|
6
|
-
|
|
7
|
+
/** The suffix slot holds one thing: trailing text, or a badge. */
|
|
8
|
+
type SuffixProps = {
|
|
9
|
+
/** Trailing text in the suffix slot. */
|
|
10
|
+
suffix?: ReactNode;
|
|
11
|
+
suffixBadge?: never;
|
|
12
|
+
} | {
|
|
13
|
+
suffix?: never;
|
|
14
|
+
/**
|
|
15
|
+
* A `BitkitBadge` in the suffix slot. On a disabled item it is forced to
|
|
16
|
+
* `colorVariant="neutral"`, so a coloured badge doesn't stay loud next to greyed-out text.
|
|
17
|
+
*/
|
|
18
|
+
suffixBadge?: ReactElement<BitkitBadgeProps>;
|
|
19
|
+
};
|
|
20
|
+
export type BitkitAccordionItemTriggerProps = AccordionItemTriggerProps & {
|
|
7
21
|
icon?: BitkitIconComponent;
|
|
8
22
|
secondaryText?: ReactNode;
|
|
9
|
-
|
|
10
|
-
}
|
|
23
|
+
} & SuffixProps;
|
|
11
24
|
export type BitkitAccordionItemBodyProps = AccordionItemBodyProps;
|
|
12
25
|
declare const _default: import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
13
26
|
Item: import('react').ForwardRefExoticComponent<Accordion.ItemProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -3,7 +3,7 @@ import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
|
3
3
|
import { Accordion, useAccordionItemContext } from "@chakra-ui/react/accordion";
|
|
4
4
|
import { Box } from "@chakra-ui/react/box";
|
|
5
5
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
-
import { forwardRef } from "react";
|
|
6
|
+
import { cloneElement, forwardRef } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
//#region lib/components/BitkitAccordion/BitkitAccordion.tsx
|
|
9
9
|
var BitkitAccordion = forwardRef((props, ref) => {
|
|
@@ -19,8 +19,9 @@ var Item = forwardRef((props, ref) => {
|
|
|
19
19
|
...props
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
|
-
var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, ...props }, ref) => {
|
|
22
|
+
var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, suffixBadge, ...props }, ref) => {
|
|
23
23
|
const styles = useSlotRecipe({ key: "accordion" })();
|
|
24
|
+
const { disabled } = useAccordionItemContext();
|
|
24
25
|
return /* @__PURE__ */ jsxs(Accordion.ItemTrigger, {
|
|
25
26
|
ref,
|
|
26
27
|
...props,
|
|
@@ -31,7 +32,7 @@ var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, ...
|
|
|
31
32
|
children: [Icon && /* @__PURE__ */ jsx(Box, {
|
|
32
33
|
css: styles.icon,
|
|
33
34
|
asChild: true,
|
|
34
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
|
35
|
+
children: /* @__PURE__ */ jsx(Icon, {})
|
|
35
36
|
}), /* @__PURE__ */ jsxs(Box, {
|
|
36
37
|
display: "flex",
|
|
37
38
|
alignItems: "flex-start",
|
|
@@ -45,14 +46,22 @@ var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, ...
|
|
|
45
46
|
}), /* @__PURE__ */ jsxs(Box, {
|
|
46
47
|
display: "flex",
|
|
47
48
|
alignItems: "center",
|
|
48
|
-
children: [
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
49
|
+
children: [
|
|
50
|
+
suffix && /* @__PURE__ */ jsx(Box, {
|
|
51
|
+
as: "span",
|
|
52
|
+
css: styles.suffix,
|
|
53
|
+
children: suffix
|
|
54
|
+
}),
|
|
55
|
+
suffixBadge && /* @__PURE__ */ jsx(Box, {
|
|
56
|
+
as: "span",
|
|
57
|
+
css: styles.suffixBadge,
|
|
58
|
+
children: disabled ? cloneElement(suffixBadge, { colorVariant: "neutral" }) : suffixBadge
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsx(Accordion.ItemIndicator, {
|
|
61
|
+
asChild: true,
|
|
62
|
+
children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
|
|
63
|
+
})
|
|
64
|
+
]
|
|
56
65
|
})]
|
|
57
66
|
});
|
|
58
67
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitAccordion.js","names":[],"sources":["../../../lib/components/BitkitAccordion/BitkitAccordion.tsx"],"sourcesContent":["import {\n Accordion,\n type AccordionItemBodyProps,\n type AccordionItemProps,\n type AccordionItemTriggerProps,\n type AccordionRootProps,\n useAccordionItemContext,\n} from '@chakra-ui/react/accordion';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nexport type BitkitAccordionProps = AccordionRootProps;\nexport type BitkitAccordionItemProps = AccordionItemProps;\nexport
|
|
1
|
+
{"version":3,"file":"BitkitAccordion.js","names":[],"sources":["../../../lib/components/BitkitAccordion/BitkitAccordion.tsx"],"sourcesContent":["import {\n Accordion,\n type AccordionItemBodyProps,\n type AccordionItemProps,\n type AccordionItemTriggerProps,\n type AccordionRootProps,\n useAccordionItemContext,\n} from '@chakra-ui/react/accordion';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\n\nexport type BitkitAccordionProps = AccordionRootProps;\nexport type BitkitAccordionItemProps = AccordionItemProps;\n/** The suffix slot holds one thing: trailing text, or a badge. */\ntype SuffixProps =\n | {\n /** Trailing text in the suffix slot. */\n suffix?: ReactNode;\n suffixBadge?: never;\n }\n | {\n suffix?: never;\n /**\n * A `BitkitBadge` in the suffix slot. On a disabled item it is forced to\n * `colorVariant=\"neutral\"`, so a coloured badge doesn't stay loud next to greyed-out text.\n */\n suffixBadge?: ReactElement<BitkitBadgeProps>;\n };\n\nexport type BitkitAccordionItemTriggerProps = AccordionItemTriggerProps & {\n icon?: BitkitIconComponent;\n secondaryText?: ReactNode;\n} & SuffixProps;\nexport type BitkitAccordionItemBodyProps = AccordionItemBodyProps;\n\nconst BitkitAccordion = forwardRef<HTMLDivElement, BitkitAccordionProps>((props, ref) => {\n return <Accordion.Root ref={ref} multiple {...props} />;\n});\nconst Item = forwardRef<HTMLDivElement, BitkitAccordionItemProps>((props, ref) => {\n return <Accordion.Item ref={ref} {...props}></Accordion.Item>;\n});\nconst ItemTrigger = forwardRef<HTMLButtonElement, BitkitAccordionItemTriggerProps>(\n ({ children, icon: Icon, secondaryText, suffix, suffixBadge, ...props }, ref) => {\n const recipe = useSlotRecipe({ key: 'accordion' });\n const styles = recipe();\n const { disabled } = useAccordionItemContext();\n return (\n <Accordion.ItemTrigger ref={ref} {...props}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {Icon && (\n <Box css={styles.icon} asChild>\n <Icon />\n </Box>\n )}\n <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n {children}\n {secondaryText && (\n <Box as=\"span\" css={styles.secdText}>\n {secondaryText}\n </Box>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\">\n {suffix && (\n <Box as=\"span\" css={styles.suffix}>\n {suffix}\n </Box>\n )}\n {suffixBadge && (\n <Box as=\"span\" css={styles.suffixBadge}>\n {disabled ? cloneElement(suffixBadge, { colorVariant: 'neutral' }) : suffixBadge}\n </Box>\n )}\n <Accordion.ItemIndicator asChild>\n <AssetSelectChevron />\n </Accordion.ItemIndicator>\n </Box>\n </Accordion.ItemTrigger>\n );\n },\n);\nconst ItemBody = forwardRef<HTMLDivElement, BitkitAccordionItemBodyProps>(({ ...props }, ref) => {\n const itemProps = useAccordionItemContext();\n return (\n <Accordion.ItemContent>\n <Accordion.ItemBody ref={ref} aria-disabled={itemProps.disabled} {...props} />\n </Accordion.ItemContent>\n );\n});\n\nBitkitAccordion.displayName = 'BitkitAccordion';\nItemBody.displayName = 'BitkitAccordion.ItemBody';\nItem.displayName = 'BitkitAccordion.Item';\nItemTrigger.displayName = 'BitkitAccordion.ItemTrigger';\n\nexport default withSubComponents(BitkitAccordion, { Item, ItemBody, ItemTrigger });\n"],"mappings":";;;;;;;;AAyCA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,OAAO,oBAAC,UAAU,MAAX;EAAqB;EAAK,UAAA;EAAS,GAAI;CAAQ,CAAA;AACxD,CAAC;AACD,IAAM,OAAO,YAAsD,OAAO,QAAQ;CAChF,OAAO,oBAAC,UAAU,MAAX;EAAqB;EAAK,GAAI;CAAuB,CAAA;AAC9D,CAAC;AACD,IAAM,cAAc,YACjB,EAAE,UAAU,MAAM,MAAM,eAAe,QAAQ,aAAa,GAAG,SAAS,QAAQ;CAE/E,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO;CACtB,MAAM,EAAE,aAAa,wBAAwB;CAC7C,OACE,qBAAC,UAAU,aAAX;EAA4B;EAAK,GAAI;EAArC,UAAA,CACE,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAA5C,UAAA,CACG,QACC,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAM,SAAA;IACrB,UAAA,oBAAC,MAAD,CAAO,CAAA;GACJ,CAAA,GAEP,qBAAC,KAAD;IAAK,SAAQ;IAAO,YAAW;IAAa,eAAc;IAA1D,UAAA,CACG,UACA,iBACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA;IACE,CAAA,CAEJ;GACF,CAAA,CAAA;EACL,CAAA,GAAA,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAA/B,UAAA;IACG,UACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA;IACE,CAAA;IAEN,eACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA,WAAW,aAAa,aAAa,EAAE,cAAc,UAAU,CAAC,IAAI;IAClE,CAAA;IAEP,oBAAC,UAAU,eAAX;KAAyB,SAAA;KACvB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;IACE,CAAA;GACtB;EACgB,CAAA,CAAA;;AAE3B,CACF;AACA,IAAM,WAAW,YAA0D,EAAE,GAAG,SAAS,QAAQ;CAC/F,MAAM,YAAY,wBAAwB;CAC1C,OACE,oBAAC,UAAU,aAAX,EAAA,UACE,oBAAC,UAAU,UAAX;EAAyB;EAAK,iBAAe,UAAU;EAAU,GAAI;CAAQ,CAAA,EACxD,CAAA;AAE3B,CAAC;AAED,gBAAgB,cAAc;AAC9B,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,YAAY,cAAc;AAE1B,IAAA,0BAAe,kBAAkB,iBAAiB;CAAE;CAAM;CAAU;AAAY,CAAC"}
|
|
@@ -10,12 +10,20 @@ export type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {
|
|
|
10
10
|
declare const BitkitBreadcrumb: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.RootProps, "children"> & {
|
|
11
11
|
children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];
|
|
12
12
|
} & import('react').RefAttributes<HTMLElement>> & {
|
|
13
|
-
CurrentItem: import('react').ForwardRefExoticComponent<
|
|
14
|
-
|
|
13
|
+
CurrentItem: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.CurrentLinkProps, "children"> & {
|
|
14
|
+
children: import('react').ReactNode;
|
|
15
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
|
16
|
+
Item: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.LinkProps, "href" | "children"> & {
|
|
17
|
+
children: import('react').ReactNode;
|
|
18
|
+
href: string;
|
|
19
|
+
} & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
15
20
|
OverflowMenu: {
|
|
16
21
|
({ children }: OverflowMenuProps): import("react").JSX.Element;
|
|
17
22
|
displayName: string;
|
|
18
23
|
};
|
|
19
|
-
OverflowMenuItem: import('react').ForwardRefExoticComponent<
|
|
24
|
+
OverflowMenuItem: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.LinkProps, "href" | "children"> & {
|
|
25
|
+
children: import('react').ReactNode;
|
|
26
|
+
href: string;
|
|
27
|
+
} & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
20
28
|
};
|
|
21
29
|
export default BitkitBreadcrumb;
|
|
@@ -16,22 +16,11 @@ import { Show } from "@chakra-ui/react/show";
|
|
|
16
16
|
//#region lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx
|
|
17
17
|
var flattenItemProps = (elements) => {
|
|
18
18
|
const props = [];
|
|
19
|
-
for (const child of elements) if (child.type === BreadcrumbItem)
|
|
20
|
-
|
|
21
|
-
props.push({
|
|
22
|
-
href,
|
|
23
|
-
children
|
|
24
|
-
});
|
|
25
|
-
} else if (child.type === OverflowMenu) {
|
|
19
|
+
for (const child of elements) if (child.type === BreadcrumbItem) props.push(child.props);
|
|
20
|
+
else if (child.type === OverflowMenu) {
|
|
26
21
|
const { children: menuChildren } = child.props;
|
|
27
22
|
const menuChildArray = flattenChildren(menuChildren);
|
|
28
|
-
for (const menuChild of menuChildArray) if (menuChild.type === OverflowMenuItem)
|
|
29
|
-
const { href, children } = menuChild.props;
|
|
30
|
-
props.push({
|
|
31
|
-
href,
|
|
32
|
-
children
|
|
33
|
-
});
|
|
34
|
-
}
|
|
23
|
+
for (const menuChild of menuChildArray) if (menuChild.type === OverflowMenuItem) props.push(menuChild.props);
|
|
35
24
|
}
|
|
36
25
|
return props;
|
|
37
26
|
};
|
|
@@ -57,15 +46,9 @@ var BitkitBreadcrumbRoot = forwardRef(({ children, ...rest }, ref) => {
|
|
|
57
46
|
icon: IconMoreHorizontal,
|
|
58
47
|
label: "Open breadcrumbs",
|
|
59
48
|
size: "xs"
|
|
60
|
-
}) }), overflowLinks.map((link) => /* @__PURE__ */ jsx(OverflowMenuItem, {
|
|
61
|
-
href: link.href,
|
|
62
|
-
children: link.children
|
|
63
|
-
}, link.href))] }), /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })]
|
|
64
|
-
}),
|
|
65
|
-
/* @__PURE__ */ jsx(BreadcrumbItem, {
|
|
66
|
-
href: lastLink.href,
|
|
67
|
-
children: lastLink.children
|
|
49
|
+
}) }), overflowLinks.map((link) => /* @__PURE__ */ jsx(OverflowMenuItem, { ...link }, link.href))] }), /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })]
|
|
68
50
|
}),
|
|
51
|
+
/* @__PURE__ */ jsx(BreadcrumbItem, { ...lastLink }),
|
|
69
52
|
/* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
|
|
70
53
|
] })
|
|
71
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { forwardRef, Fragment, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {\n children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n const props: ItemProps[] = [];\n\n for (const child of elements) {\n if (child.type === BreadcrumbItem) {\n
|
|
1
|
+
{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { forwardRef, Fragment, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {\n children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\n// The whole prop bag travels, not just `href`/`children`: the mobile layout rebuilds its items\n// from these, so picking two keys here would drop everything else a consumer put on a crumb — a\n// `data-*` hook, an `aria-*`, an `onClick` — on mobile only, and silently.\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n const props: ItemProps[] = [];\n\n for (const child of elements) {\n if (child.type === BreadcrumbItem) {\n props.push(child.props as ItemProps);\n } else if (child.type === OverflowMenu) {\n const { children: menuChildren } = child.props as OverflowMenuProps;\n const menuChildArray = flattenChildren(menuChildren);\n for (const menuChild of menuChildArray) {\n if (menuChild.type === OverflowMenuItem) {\n props.push(menuChild.props as ItemProps);\n }\n }\n }\n }\n\n return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children, ...rest }, ref) => {\n const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n const childArray = flattenChildren(children);\n\n if (childArray.length === 0) {\n return null;\n }\n\n if (isMobile) {\n const links = flattenItemProps(childArray);\n if (links.length === 0) {\n return null;\n }\n\n const lastLink = links[links.length - 1];\n const overflowLinks = links.slice(0, -1).reverse();\n\n return (\n <Breadcrumb.Root ref={ref} {...rest}>\n <Breadcrumb.List>\n <Show when={overflowLinks.length > 0}>\n <OverflowMenu>\n <OverflowMenuTrigger>\n <BitkitControlButton icon={IconMoreHorizontal} label=\"Open breadcrumbs\" size=\"xs\" />\n </OverflowMenuTrigger>\n {overflowLinks.map((link) => (\n <OverflowMenuItem key={link.href} {...link} />\n ))}\n </OverflowMenu>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Show>\n <BreadcrumbItem {...lastLink} />\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Breadcrumb.List>\n </Breadcrumb.Root>\n );\n }\n\n return (\n <Breadcrumb.Root ref={ref} {...rest}>\n <Breadcrumb.List>\n {childArray.map((child, index) => (\n <Fragment key={child.key}>\n {child}\n <Show when={index < childArray.length - 1}>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Show>\n </Fragment>\n ))}\n </Breadcrumb.List>\n </Breadcrumb.Root>\n );\n});\n\nBitkitBreadcrumbRoot.displayName = 'BitkitBreadcrumb';\n\nconst BitkitBreadcrumb = withSubComponents(BitkitBreadcrumbRoot, {\n CurrentItem: BreadcrumbCurrentItem,\n Item: BreadcrumbItem,\n OverflowMenu,\n OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBACjB,MAAM,KAAK,MAAM,KAAkB;MAC9B,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,gBAAgB,YAAY;EACnD,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBACrB,MAAM,KAAK,UAAU,KAAkB;CAG7C;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAC1G,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;CAAM,GAAG,EAAE,UAAU,SAAS,CAAC;CACzF,MAAM,aAAa,gBAAgB,QAAQ;CAE3C,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,IAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,UAAU;EACzC,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ;EAEjD,OACE,oBAAC,WAAW,MAAZ;GAAsB;GAAK,GAAI;GAC7B,UAAA,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;KAAnC,UAAA,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;KAAM,CAAA,EAChE,CAAA,GACpB,cAAc,KAAK,SAClB,oBAAC,kBAAD,EAAkC,GAAI,KAAO,GAAtB,KAAK,IAAiB,CAC9C,CACW,EAAA,CAAA,GACd,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA,CAClB;;IACN,oBAAC,gBAAD,EAAgB,GAAI,SAAW,CAAA;IAC/B,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;GACP,EAAA,CAAA;EACF,CAAA;CAErB;CAEA,OACE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;EAC7B,UAAA,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OACD,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS;GACtC,UAAA,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;EAClB,CAAA,CACE,EAAA,GAPK,MAAM,GAOX,CACX,EACc,CAAA;CACF,CAAA;AAErB,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,kBAAkB,sBAAsB;CAC/D,aAAa;CACb,MAAM;CACN;CACA;AACF,CAAC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { Breadcrumb, BreadcrumbCurrentLinkProps } from '@chakra-ui/react/breadcrumb';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
|
-
export type CurrentItemProps = {
|
|
3
|
+
export type CurrentItemProps = Omit<BreadcrumbCurrentLinkProps, 'children'> & {
|
|
3
4
|
children: ReactNode;
|
|
4
5
|
};
|
|
5
|
-
declare const BreadcrumbCurrentItem: import('react').ForwardRefExoticComponent<
|
|
6
|
+
declare const BreadcrumbCurrentItem: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.CurrentLinkProps, "children"> & {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
|
6
9
|
export default BreadcrumbCurrentItem;
|
|
@@ -2,9 +2,10 @@ import { forwardRef } from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
|
|
4
4
|
//#region lib/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.tsx
|
|
5
|
-
var BreadcrumbCurrentItem = forwardRef(({ children }, ref) => {
|
|
5
|
+
var BreadcrumbCurrentItem = forwardRef(({ children, ...rest }, ref) => {
|
|
6
6
|
return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.CurrentLink, {
|
|
7
7
|
ref,
|
|
8
|
+
...rest,
|
|
8
9
|
children
|
|
9
10
|
}) });
|
|
10
11
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbCurrentItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport type CurrentItemProps = {\n children: ReactNode;\n};\n\nconst BreadcrumbCurrentItem = forwardRef<HTMLElement, CurrentItemProps>(({ children }, ref) => {\n return (\n <Breadcrumb.Item>\n <Breadcrumb.CurrentLink ref={ref}
|
|
1
|
+
{"version":3,"file":"BreadcrumbCurrentItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbCurrentLinkProps } from '@chakra-ui/react/breadcrumb';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport type CurrentItemProps = Omit<BreadcrumbCurrentLinkProps, 'children'> & {\n children: ReactNode;\n};\n\nconst BreadcrumbCurrentItem = forwardRef<HTMLElement, CurrentItemProps>(({ children, ...rest }, ref) => {\n return (\n <Breadcrumb.Item>\n <Breadcrumb.CurrentLink ref={ref} {...rest}>\n {children}\n </Breadcrumb.CurrentLink>\n </Breadcrumb.Item>\n );\n});\n\nBreadcrumbCurrentItem.displayName = 'BitkitBreadcrumb.CurrentItem';\n\nexport default BreadcrumbCurrentItem;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,YAA2C,EAAE,UAAU,GAAG,QAAQ,QAAQ;CACtG,OACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,WAAW,aAAZ;EAA6B;EAAK,GAAI;EACnC;CACqB,CAAA,EACT,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const BreadcrumbItem: import('react').ForwardRefExoticComponent<
|
|
1
|
+
import { Breadcrumb } from '@chakra-ui/react/breadcrumb';
|
|
2
|
+
declare const BreadcrumbItem: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.LinkProps, "href" | "children"> & {
|
|
3
|
+
children: import('react').ReactNode;
|
|
4
|
+
href: string;
|
|
5
|
+
} & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
3
6
|
export default BreadcrumbItem;
|
|
@@ -2,9 +2,10 @@ import { forwardRef } from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
|
|
4
4
|
//#region lib/components/BitkitBreadcrumb/components/BreadcrumbItem.tsx
|
|
5
|
-
var BreadcrumbItem = forwardRef(({ href,
|
|
5
|
+
var BreadcrumbItem = forwardRef(({ children, href, ...rest }, ref) => {
|
|
6
6
|
return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, {
|
|
7
7
|
ref,
|
|
8
|
+
...rest,
|
|
8
9
|
href,
|
|
9
10
|
children
|
|
10
11
|
}) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/BreadcrumbItem.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { forwardRef } from 'react';\n\nimport { type ItemProps } from '../types.ts';\n\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, ItemProps>(({ href,
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/BreadcrumbItem.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { forwardRef } from 'react';\n\nimport { type ItemProps } from '../types.ts';\n\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, ItemProps>(({ children, href, ...rest }, ref) => {\n return (\n <Breadcrumb.Item>\n {/* `rest` rides the link rather than the wrapping `li`: that is where the ref points, and it\n is the anchor a consumer means when they tag a crumb — `data-*` hooks, `aria-*`,\n `target`/`rel`, an `onClick`. */}\n <Breadcrumb.Link ref={ref} {...rest} href={href}>\n {children}\n </Breadcrumb.Link>\n </Breadcrumb.Item>\n );\n});\n\nBreadcrumbItem.displayName = 'BitkitBreadcrumb.Item';\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;AAKA,IAAM,iBAAiB,YAA0C,EAAE,UAAU,MAAM,GAAG,QAAQ,QAAQ;CACpG,OACE,oBAAC,WAAW,MAAZ,EAAA,UAIE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;EAAY;EACxC;CACc,CAAA,EACF,CAAA;AAErB,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
declare const OverflowMenuItem: import('react').ForwardRefExoticComponent<Omit<import('@chakra-ui/react').BreadcrumbLinkProps, "href" | "children"> & {
|
|
2
|
+
children: import('react').ReactNode;
|
|
3
|
+
href: string;
|
|
4
|
+
} & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
3
5
|
export default OverflowMenuItem;
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
+
import { chakra } from "@chakra-ui/react/styled-system";
|
|
1
2
|
import { forwardRef, useId } from "react";
|
|
2
3
|
import { jsx } from "react/jsx-runtime";
|
|
3
4
|
import { Menu } from "@chakra-ui/react/menu";
|
|
4
5
|
//#region lib/components/BitkitBreadcrumb/components/OverflowMenuItem.tsx
|
|
5
|
-
var OverflowMenuItem = forwardRef(({ href,
|
|
6
|
+
var OverflowMenuItem = forwardRef(({ children, href, ...rest }, ref) => {
|
|
6
7
|
const id = useId();
|
|
7
8
|
return /* @__PURE__ */ jsx(Menu.Item, {
|
|
8
9
|
value: id,
|
|
9
10
|
asChild: true,
|
|
10
|
-
children: /* @__PURE__ */ jsx(
|
|
11
|
+
children: /* @__PURE__ */ jsx(chakra.a, {
|
|
11
12
|
ref,
|
|
13
|
+
...rest,
|
|
12
14
|
href,
|
|
13
15
|
children
|
|
14
16
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowMenuItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenuItem.tsx"],"sourcesContent":["import { Menu } from '@chakra-ui/react/menu';\nimport { forwardRef, useId } from 'react';\n\nimport { type ItemProps } from '../types.ts';\n\nconst OverflowMenuItem = forwardRef<HTMLAnchorElement, ItemProps>(({ href,
|
|
1
|
+
{"version":3,"file":"OverflowMenuItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenuItem.tsx"],"sourcesContent":["import { Menu } from '@chakra-ui/react/menu';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useId } from 'react';\n\nimport { type ItemProps } from '../types.ts';\n\nconst OverflowMenuItem = forwardRef<HTMLAnchorElement, ItemProps>(({ children, href, ...rest }, ref) => {\n const id = useId();\n\n return (\n <Menu.Item value={id} asChild>\n {/* `chakra.a`, not a bare `<a>`: `rest` carries Chakra style props, which a plain anchor would\n spill onto the DOM as unknown attributes. `Link` is not an option either — it would layer\n its own recipe over the menu item's. */}\n <chakra.a ref={ref} {...rest} href={href}>\n {children}\n </chakra.a>\n </Menu.Item>\n );\n});\n\nOverflowMenuItem.displayName = 'BitkitBreadcrumb.OverflowMenuItem';\n\nexport default OverflowMenuItem;\n"],"mappings":";;;;;AAMA,IAAM,mBAAmB,YAA0C,EAAE,UAAU,MAAM,GAAG,QAAQ,QAAQ;CACtG,MAAM,KAAK,MAAM;CAEjB,OACE,oBAAC,KAAK,MAAN;EAAW,OAAO;EAAI,SAAA;EAIpB,UAAA,oBAAC,OAAO,GAAR;GAAe;GAAK,GAAI;GAAY;GACjC;EACO,CAAA;CACD,CAAA;AAEf,CAAC;AAED,iBAAiB,cAAc"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { BreadcrumbLinkProps } from '@chakra-ui/react/breadcrumb';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
|
-
export type ItemProps = {
|
|
3
|
-
href: string;
|
|
3
|
+
export type ItemProps = Omit<BreadcrumbLinkProps, 'children' | 'href'> & {
|
|
4
4
|
children: ReactNode;
|
|
5
|
+
href: string;
|
|
5
6
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const accordionSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "
|
|
1
|
+
declare const accordionSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge">>;
|
|
2
2
|
export default accordionSlotRecipe;
|
|
@@ -7,23 +7,30 @@ var accordionSlotRecipe = defineSlotRecipe({
|
|
|
7
7
|
...accordionAnatomy.keys(),
|
|
8
8
|
"icon",
|
|
9
9
|
"secdText",
|
|
10
|
-
"suffix"
|
|
10
|
+
"suffix",
|
|
11
|
+
"suffixBadge"
|
|
11
12
|
],
|
|
12
13
|
base: {
|
|
13
14
|
item: {
|
|
14
15
|
borderTop: "1px solid",
|
|
15
16
|
borderTopColor: "border/regular"
|
|
16
17
|
},
|
|
17
|
-
icon: {
|
|
18
|
+
icon: {
|
|
19
|
+
color: "icon/secondary",
|
|
20
|
+
"[data-part=\"item-trigger\"]:disabled &": { color: "icon/disabled" }
|
|
21
|
+
},
|
|
18
22
|
secdText: {
|
|
19
23
|
color: "text/secondary",
|
|
20
|
-
textStyle: "body/lg/regular"
|
|
24
|
+
textStyle: "body/lg/regular",
|
|
25
|
+
"[data-part=\"item-trigger\"]:disabled &": { color: "text/disabled" }
|
|
21
26
|
},
|
|
22
27
|
suffix: {
|
|
23
28
|
color: "text/secondary",
|
|
24
|
-
|
|
25
|
-
textStyle: "body/md/regular"
|
|
29
|
+
marginInline: "16",
|
|
30
|
+
textStyle: "body/md/regular",
|
|
31
|
+
"[data-part=\"item-trigger\"]:disabled &": { color: "text/disabled" }
|
|
26
32
|
},
|
|
33
|
+
suffixBadge: { marginInline: "16" },
|
|
27
34
|
itemContent: {
|
|
28
35
|
_open: {
|
|
29
36
|
animationName: "expand-height, fade-in",
|
|
@@ -33,6 +40,7 @@ var accordionSlotRecipe = defineSlotRecipe({
|
|
|
33
40
|
animationName: "collapse-height, fade-out",
|
|
34
41
|
animationDuration: "moderate"
|
|
35
42
|
},
|
|
43
|
+
_motionReduce: { animationName: "none" },
|
|
36
44
|
overflow: "hidden"
|
|
37
45
|
},
|
|
38
46
|
itemBody: {
|
|
@@ -54,10 +62,17 @@ var accordionSlotRecipe = defineSlotRecipe({
|
|
|
54
62
|
flexDirection: "row",
|
|
55
63
|
padding: "16",
|
|
56
64
|
gap: "16",
|
|
65
|
+
cursor: "pointer",
|
|
57
66
|
_open: { textStyle: "body/lg/semibold" },
|
|
67
|
+
_hover: {
|
|
68
|
+
background: "background/hover",
|
|
69
|
+
_active: { background: "background/active" }
|
|
70
|
+
},
|
|
58
71
|
_active: { background: "background/active" },
|
|
59
|
-
|
|
60
|
-
|
|
72
|
+
_disabled: {
|
|
73
|
+
color: "text/disabled",
|
|
74
|
+
cursor: "not-allowed"
|
|
75
|
+
}
|
|
61
76
|
},
|
|
62
77
|
root: {
|
|
63
78
|
borderBottom: "1px solid",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Accordion.recipe.ts"],"sourcesContent":["import { accordionAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst accordionSlotRecipe = defineSlotRecipe({\n className: 'accordion',\n slots: [...accordionAnatomy.keys(), 'icon', 'secdText', 'suffix'],\n base: {\n item: {\n borderTop: '1px solid',\n borderTopColor: 'border/regular',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n textStyle: 'body/lg/regular',\n },\n suffix: {\n color: 'text/secondary',\n
|
|
1
|
+
{"version":3,"file":"Accordion.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Accordion.recipe.ts"],"sourcesContent":["import { accordionAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst accordionSlotRecipe = defineSlotRecipe({\n className: 'accordion',\n slots: [...accordionAnatomy.keys(), 'icon', 'secdText', 'suffix', 'suffixBadge'],\n base: {\n item: {\n borderTop: '1px solid',\n borderTopColor: 'border/regular',\n },\n // Zag marks its own parts with data-disabled, but these three are our slots inside the\n // trigger, so nothing lands on them and _disabled would match nothing. They read the state off\n // the ancestor instead — the trigger is a native disabled <button>.\n icon: {\n color: 'icon/secondary',\n '[data-part=\"item-trigger\"]:disabled &': { color: 'icon/disabled' },\n },\n secdText: {\n color: 'text/secondary',\n textStyle: 'body/lg/regular',\n '[data-part=\"item-trigger\"]:disabled &': { color: 'text/disabled' },\n },\n suffix: {\n color: 'text/secondary',\n marginInline: '16',\n textStyle: 'body/md/regular',\n '[data-part=\"item-trigger\"]:disabled &': { color: 'text/disabled' },\n },\n // Spacing only — the badge brings its own colours.\n suffixBadge: {\n marginInline: '16',\n },\n itemContent: {\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n _motionReduce: {\n animationName: 'none',\n },\n overflow: 'hidden',\n },\n itemBody: {\n paddingX: '16',\n paddingTop: '8',\n paddingBottom: '24',\n _disabled: {\n color: 'text/disabled',\n },\n },\n itemIndicator: {\n display: 'flex',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n },\n itemTrigger: {\n textAlign: 'start',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n flexDirection: 'row',\n padding: '16',\n gap: '16',\n cursor: 'pointer',\n _open: {\n textStyle: 'body/lg/semibold',\n },\n // The pressed background also has to be nested inside _hover. `_hover` compiles to a\n // `@media (hover: hover)` block, which Chakra emits after the plain-selector rules, so a\n // top-level `_active` of equal specificity always loses to it — and a pointer press is a\n // hover too, which made the pressed state unreachable with a mouse.\n _hover: {\n background: 'background/hover',\n _active: {\n background: 'background/active',\n },\n },\n _active: {\n background: 'background/active',\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n },\n },\n root: {\n borderBottom: '1px solid',\n borderBottomColor: 'border/regular',\n },\n },\n});\n\nexport default accordionSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EAAC,GAAG,iBAAiB,KAAK;EAAG;EAAQ;EAAY;EAAU;CAAa;CAC/E,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,gBAAgB;EAClB;EAIA,MAAM;GACJ,OAAO;GACP,2CAAyC,EAAE,OAAO,gBAAgB;EACpE;EACA,UAAU;GACR,OAAO;GACP,WAAW;GACX,2CAAyC,EAAE,OAAO,gBAAgB;EACpE;EACA,QAAQ;GACN,OAAO;GACP,cAAc;GACd,WAAW;GACX,2CAAyC,EAAE,OAAO,gBAAgB;EACpE;EAEA,aAAa,EACX,cAAc,KAChB;EACA,aAAa;GACX,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;GACA,eAAe,EACb,eAAe,OACjB;GACA,UAAU;EACZ;EACA,UAAU;GACR,UAAU;GACV,YAAY;GACZ,eAAe;GACf,WAAW,EACT,OAAO,gBACT;EACF;EACA,eAAe;GACb,SAAS;GACT,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;EACA,aAAa;GACX,WAAW;GACX,SAAS;GACT,gBAAgB;GAChB,OAAO;GACP,eAAe;GACf,SAAS;GACT,KAAK;GACL,QAAQ;GACR,OAAO,EACL,WAAW,mBACb;GAKA,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,oBACd;GACF;GACA,SAAS,EACP,YAAY,oBACd;GACA,WAAW;IACT,OAAO;IACP,QAAQ;GACV;EACF;EACA,MAAM;GACJ,cAAc;GACd,mBAAmB;EACrB;CACF;AACF,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "
|
|
1
|
+
declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
|
|
2
2
|
size: {
|
|
3
3
|
md: {
|
|
4
4
|
header: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const labeledDataSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "
|
|
1
|
+
declare const labeledDataSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "limit" | "helpText", {
|
|
2
2
|
size: {
|
|
3
3
|
lg: {
|
|
4
4
|
label: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const statSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "
|
|
1
|
+
declare const statSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "helpText", {
|
|
2
2
|
size: {
|
|
3
3
|
lg: {
|
|
4
4
|
label: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "
|
|
1
|
+
declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
2
2
|
variant: {
|
|
3
3
|
files: {
|
|
4
4
|
branchControl: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
declare const slotRecipes: {
|
|
2
|
-
accordion: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "
|
|
2
|
+
accordion: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge">>;
|
|
3
3
|
actionBar: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "positioner" | "selectionTrigger" | "closeTrigger", {
|
|
4
4
|
size: {
|
|
5
5
|
md: {
|
|
@@ -941,7 +941,7 @@ declare const slotRecipes: {
|
|
|
941
941
|
};
|
|
942
942
|
};
|
|
943
943
|
}>;
|
|
944
|
-
expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "
|
|
944
|
+
expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
|
|
945
945
|
size: {
|
|
946
946
|
md: {
|
|
947
947
|
header: {
|
|
@@ -1695,7 +1695,7 @@ declare const slotRecipes: {
|
|
|
1695
1695
|
};
|
|
1696
1696
|
}>;
|
|
1697
1697
|
sectionHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "icon" | "root" | "titleBlock" | "helperText" | "contentBlock" | "helperBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "icon" | "root" | "titleBlock" | "helperText" | "contentBlock" | "helperBlock">>;
|
|
1698
|
-
labeledData: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "
|
|
1698
|
+
labeledData: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "limit" | "helpText", {
|
|
1699
1699
|
size: {
|
|
1700
1700
|
lg: {
|
|
1701
1701
|
label: {
|
|
@@ -1978,7 +1978,7 @@ declare const slotRecipes: {
|
|
|
1978
1978
|
};
|
|
1979
1979
|
};
|
|
1980
1980
|
}>;
|
|
1981
|
-
stat: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "
|
|
1981
|
+
stat: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "helpText", {
|
|
1982
1982
|
size: {
|
|
1983
1983
|
lg: {
|
|
1984
1984
|
label: {
|
|
@@ -2764,7 +2764,7 @@ declare const slotRecipes: {
|
|
|
2764
2764
|
};
|
|
2765
2765
|
}>;
|
|
2766
2766
|
tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
|
|
2767
|
-
treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "
|
|
2767
|
+
treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
2768
2768
|
variant: {
|
|
2769
2769
|
files: {
|
|
2770
2770
|
branchControl: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetSelectChevron.js","names":[],"sources":["../../lib/utilities/AssetSelectChevron.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { forwardRef, type Ref } from 'react';\n\nconst AssetSelectChevron = forwardRef((props: IconProps, ref: Ref<SVGSVGElement>) => (\n <Icon\n asChild\n ref={ref}\n transition=\"0.2s ease\"\n _open={{\n transform: 'rotate(180deg)',\n }}\n _disabled={{\n cursor: 'not-allowed',\n color: 'icon/disabled',\n }}\n color=\"icon/secondary\"\n _groupFocusWithin={{\n color: 'icon/primary',\n }}\n _groupHover={{\n color: 'icon/primary',\n }}\n {...props}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.29285 10.2071L7.70706 8.79289L12 13.0858L16.2928 8.79289L17.7071 10.2071L12 15.9142L6.29285 10.2071Z\"\n fill=\"currentColor\"\n />\n </svg>\n </Icon>\n));\n\nAssetSelectChevron.displayName = 'AssetSelectChevron';\n\nexport default AssetSelectChevron;\n"],"mappings":";;;;AAGA,IAAM,qBAAqB,YAAY,OAAkB,QACvD,oBAAC,MAAD;CACE,SAAA;CACK;CACL,YAAW;
|
|
1
|
+
{"version":3,"file":"AssetSelectChevron.js","names":[],"sources":["../../lib/utilities/AssetSelectChevron.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { forwardRef, type Ref } from 'react';\n\nconst AssetSelectChevron = forwardRef((props: IconProps, ref: Ref<SVGSVGElement>) => (\n <Icon\n asChild\n ref={ref}\n transition=\"0.2s ease\"\n // The rotation is the whole animation here, so reduced motion means snapping to it.\n _motionReduce={{\n transition: 'none',\n }}\n _open={{\n transform: 'rotate(180deg)',\n }}\n _disabled={{\n cursor: 'not-allowed',\n color: 'icon/disabled',\n }}\n color=\"icon/secondary\"\n _groupFocusWithin={{\n color: 'icon/primary',\n }}\n _groupHover={{\n color: 'icon/primary',\n }}\n {...props}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.29285 10.2071L7.70706 8.79289L12 13.0858L16.2928 8.79289L17.7071 10.2071L12 15.9142L6.29285 10.2071Z\"\n fill=\"currentColor\"\n />\n </svg>\n </Icon>\n));\n\nAssetSelectChevron.displayName = 'AssetSelectChevron';\n\nexport default AssetSelectChevron;\n"],"mappings":";;;;AAGA,IAAM,qBAAqB,YAAY,OAAkB,QACvD,oBAAC,MAAD;CACE,SAAA;CACK;CACL,YAAW;CAEX,eAAe,EACb,YAAY,OACd;CACA,OAAO,EACL,WAAW,iBACb;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAM;CACN,mBAAmB,EACjB,OAAO,eACT;CACA,aAAa,EACX,OAAO,eACT;CACA,GAAI;CAEJ,UAAA,oBAAC,OAAD;EAAK,OAAM;EAA6B,SAAQ;EAAY,OAAM;EAAK,QAAO;EAC5E,UAAA,oBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;EACN,CAAA;CACE,CAAA;AACD,CAAA,CACP;AAED,mBAAmB,cAAc"}
|