@bitrise/bitkit-v2 0.3.209 → 0.3.211

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/components/BitkitActionMenu/BitkitActionMenu.js +1 -1
  2. package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js +88 -0
  3. package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map +1 -0
  4. package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.js +15 -0
  5. package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.js.map +1 -0
  6. package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.js +16 -0
  7. package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.js.map +1 -0
  8. package/dist/components/BitkitBreadcrumb/components/OverflowMenu.js +21 -0
  9. package/dist/components/BitkitBreadcrumb/components/OverflowMenu.js.map +1 -0
  10. package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.js +21 -0
  11. package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.js.map +1 -0
  12. package/dist/components/BitkitBreadcrumb/components/OverflowMenuTrigger.js +20 -0
  13. package/dist/components/BitkitBreadcrumb/components/OverflowMenuTrigger.js.map +1 -0
  14. package/dist/components/BitkitButton/BitkitButton.js +1 -1
  15. package/dist/components/BitkitCombobox/BitkitCombobox.js +1 -1
  16. package/dist/components/BitkitIconButton/BitkitIconButton.js +1 -1
  17. package/dist/components/BitkitPagination/BitkitPagination.js +1 -1
  18. package/dist/components/BitkitSplitButton/BitkitSplitButton.d.ts +2 -2
  19. package/dist/components/BitkitSplitButton/BitkitSplitButton.js +1 -1
  20. package/dist/components/BitkitTable/BitkitExpandableRow.js +67 -0
  21. package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -0
  22. package/dist/components/BitkitTable/BitkitSortableColumnHeader.js +81 -0
  23. package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map +1 -0
  24. package/dist/components/index.d.ts +4 -0
  25. package/dist/main.js +6 -2
  26. package/dist/theme/slot-recipes/Alert.recipe.d.ts +1 -1
  27. package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +1 -1
  28. package/dist/theme/slot-recipes/EmptyState.recipe.d.ts +1 -1
  29. package/dist/theme/slot-recipes/ExpandableCard.recipe.js +2 -0
  30. package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
  31. package/dist/theme/slot-recipes/FileUpload.recipe.d.ts +1 -1
  32. package/dist/theme/slot-recipes/Menu.recipe.d.ts +1 -1
  33. package/dist/theme/slot-recipes/NumberInput.recipe.d.ts +1 -1
  34. package/dist/theme/slot-recipes/Steps.recipe.d.ts +1 -1
  35. package/dist/theme/slot-recipes/TagsInput.recipe.d.ts +1 -1
  36. package/dist/theme/slot-recipes/Toast.recipe.d.ts +1 -1
  37. package/dist/theme/slot-recipes/TreeView.recipe.d.ts +1 -1
  38. package/docs/v1-to-v2-migration-guide.md +295 -0
  39. package/package.json +2 -1
@@ -3,8 +3,8 @@ import { Text } from "@chakra-ui/react/text";
3
3
  import { createContext, forwardRef, useContext } from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { Portal } from "@chakra-ui/react/portal";
6
- import { Separator } from "@chakra-ui/react/separator";
7
6
  import { Menu, useMenuStyles } from "@chakra-ui/react/menu";
7
+ import { Separator } from "@chakra-ui/react/separator";
8
8
  //#region lib/components/BitkitActionMenu/BitkitActionMenu.tsx
9
9
  var BitkitMenuContext = createContext("lg");
10
10
  var Root = ({ trigger, children, ...props }) => {
@@ -0,0 +1,88 @@
1
+ import IconChevronRight from "../../icons/IconChevronRight.js";
2
+ import IconMoreHorizontal from "../../icons/IconMoreHorizontal.js";
3
+ import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
4
+ import BreadcrumbCurrentItem from "./components/BreadcrumbCurrentItem.js";
5
+ import BreadcrumbItem from "./components/BreadcrumbItem.js";
6
+ import OverflowMenuTrigger from "./components/OverflowMenuTrigger.js";
7
+ import OverflowMenu from "./components/OverflowMenu.js";
8
+ import OverflowMenuItem from "./components/OverflowMenuItem.js";
9
+ import { Children, Fragment, forwardRef, isValidElement } from "react";
10
+ import { jsx, jsxs } from "react/jsx-runtime";
11
+ import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
12
+ import { useBreakpointValue } from "@chakra-ui/react/hooks";
13
+ import { Show } from "@chakra-ui/react/show";
14
+ //#region lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx
15
+ var flattenItemProps = (elements) => {
16
+ const props = [];
17
+ for (const child of elements) if (child.type === BreadcrumbItem) {
18
+ const { href, children } = child.props;
19
+ props.push({
20
+ href,
21
+ children
22
+ });
23
+ } else if (child.type === OverflowMenu) {
24
+ const { children: menuChildren } = child.props;
25
+ const menuChildArray = Children.toArray(menuChildren).filter(isValidElement);
26
+ for (const menuChild of menuChildArray) if (menuChild.type === OverflowMenuItem) {
27
+ const { href, children } = menuChild.props;
28
+ props.push({
29
+ href,
30
+ children
31
+ });
32
+ }
33
+ }
34
+ return props;
35
+ };
36
+ var BitkitBreadcrumbRoot = forwardRef(({ children }, ref) => {
37
+ const isMobile = useBreakpointValue({
38
+ base: true,
39
+ tablet: false
40
+ }, { fallback: "tablet" });
41
+ const childArray = Children.toArray(children).filter(isValidElement);
42
+ if (childArray.length === 0) return null;
43
+ if (isMobile) {
44
+ const links = flattenItemProps(childArray);
45
+ if (links.length === 0) return null;
46
+ const lastLink = links[links.length - 1];
47
+ const overflowLinks = links.slice(0, -1).reverse();
48
+ return /* @__PURE__ */ jsx(Breadcrumb.Root, {
49
+ ref,
50
+ children: /* @__PURE__ */ jsxs(Breadcrumb.List, { children: [
51
+ /* @__PURE__ */ jsxs(Show, {
52
+ when: overflowLinks.length > 0,
53
+ children: [/* @__PURE__ */ jsxs(OverflowMenu, { children: [/* @__PURE__ */ jsx(OverflowMenuTrigger, { children: /* @__PURE__ */ jsx(BitkitControlButton, {
54
+ icon: IconMoreHorizontal,
55
+ label: "Open breadcrumbs",
56
+ size: "xs"
57
+ }) }), overflowLinks.map((link) => /* @__PURE__ */ jsx(OverflowMenuItem, {
58
+ href: link.href,
59
+ children: link.children
60
+ }, link.href))] }), /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })]
61
+ }),
62
+ /* @__PURE__ */ jsx(BreadcrumbItem, {
63
+ href: lastLink.href,
64
+ children: lastLink.children
65
+ }),
66
+ /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
67
+ ] })
68
+ });
69
+ }
70
+ return /* @__PURE__ */ jsx(Breadcrumb.Root, {
71
+ ref,
72
+ children: /* @__PURE__ */ jsx(Breadcrumb.List, { children: childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [child, /* @__PURE__ */ jsx(Show, {
73
+ when: index < childArray.length - 1,
74
+ children: /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
75
+ })] }, child.key)) })
76
+ });
77
+ });
78
+ BitkitBreadcrumbRoot.displayName = "BitkitBreadcrumb";
79
+ var BitkitBreadcrumb = Object.assign(BitkitBreadcrumbRoot, {
80
+ CurrentItem: BreadcrumbCurrentItem,
81
+ Item: BreadcrumbItem,
82
+ OverflowMenu,
83
+ OverflowMenuItem
84
+ });
85
+ //#endregion
86
+ export { BitkitBreadcrumb as default };
87
+
88
+ //# sourceMappingURL=BitkitBreadcrumb.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { Children, forwardRef, Fragment, isValidElement, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\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 = {\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 const { href, children } = child.props as ItemProps;\n props.push({ href, children });\n } else if (child.type === OverflowMenu) {\n const { children: menuChildren } = child.props as OverflowMenuProps;\n const menuChildArray = Children.toArray(menuChildren).filter(isValidElement);\n for (const menuChild of menuChildArray) {\n if (menuChild.type === OverflowMenuItem) {\n const { href, children } = menuChild.props as ItemProps;\n props.push({ href, children });\n }\n }\n }\n }\n\n return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children }, ref) => {\n const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n const childArray = Children.toArray(children).filter(isValidElement);\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}>\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} href={link.href}>\n {link.children}\n </OverflowMenuItem>\n ))}\n </OverflowMenu>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Show>\n <BreadcrumbItem href={lastLink.href}>{lastLink.children}</BreadcrumbItem>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Breadcrumb.List>\n </Breadcrumb.Root>\n );\n }\n\n return (\n <Breadcrumb.Root ref={ref}>\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 = Object.assign(BitkitBreadcrumbRoot, {\n CurrentItem: BreadcrumbCurrentItem,\n Item: BreadcrumbItem,\n OverflowMenu,\n OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,EAAE;AAE7B,MAAK,MAAM,SAAS,SAClB,KAAI,MAAM,SAAS,gBAAgB;EACjC,MAAM,EAAE,MAAM,aAAa,MAAM;AACjC,QAAM,KAAK;GAAE;GAAM;GAAU,CAAC;YACrB,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,SAAS,QAAQ,aAAa,CAAC,OAAO,eAAe;AAC5E,OAAK,MAAM,aAAa,eACtB,KAAI,UAAU,SAAS,kBAAkB;GACvC,MAAM,EAAE,MAAM,aAAa,UAAU;AACrC,SAAM,KAAK;IAAE;IAAM;IAAU,CAAC;;;AAMtC,QAAO;;AAGT,IAAM,uBAAuB,YAAgD,EAAE,YAAY,QAAQ;CACjG,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;EAAO,EAAE,EAAE,UAAU,UAAU,CAAC;CAC1F,MAAM,aAAa,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;AAEpE,KAAI,WAAW,WAAW,EACxB,QAAO;AAGT,KAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,WAAW;AAC1C,MAAI,MAAM,WAAW,EACnB,QAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS;AAElD,SACE,oBAAC,WAAW,MAAZ;GAAsB;aACpB,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;eAAnC,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;MAAO,CAAA,EAChE,CAAA,EACrB,cAAc,KAAK,SAClB,oBAAC,kBAAD;MAAkC,MAAM,KAAK;gBAC1C,KAAK;MACW,EAFI,KAAK,KAET,CACnB,CACW,EAAA,CAAA,EACf,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACC,CAAA,CAClB;;IACP,oBAAC,gBAAD;KAAgB,MAAM,SAAS;eAAO,SAAS;KAA0B,CAAA;IACzE,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACC,CAAA;IACP,EAAA,CAAA;GACF,CAAA;;AAItB,QACE,oBAAC,WAAW,MAAZ;EAAsB;YACpB,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OACD,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS;aACtC,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACC,CAAA;GAClB,CAAA,CACE,EAAA,EAPI,MAAM,IAOV,CACX,EACc,CAAA;EACF,CAAA;EAEpB;AAEF,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,OAAO,OAAO,sBAAsB;CAC3D,aAAa;CACb,MAAM;CACN;CACA;CACD,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { forwardRef } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
4
+ //#region lib/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.tsx
5
+ var BreadcrumbCurrentItem = forwardRef(({ children }, ref) => {
6
+ return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.CurrentLink, {
7
+ ref,
8
+ children
9
+ }) });
10
+ });
11
+ BreadcrumbCurrentItem.displayName = "BitkitBreadcrumb.CurrentItem";
12
+ //#endregion
13
+ export { BreadcrumbCurrentItem as default };
14
+
15
+ //# sourceMappingURL=BreadcrumbCurrentItem.js.map
@@ -0,0 +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}>{children}</Breadcrumb.CurrentLink>\n </Breadcrumb.Item>\n );\n});\n\nBreadcrumbCurrentItem.displayName = 'BitkitBreadcrumb.CurrentItem';\n\nexport default BreadcrumbCurrentItem;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,YAA2C,EAAE,YAAY,QAAQ;AAC7F,QACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,WAAW,aAAZ;EAA6B;EAAM;EAAkC,CAAA,EACrD,CAAA;EAEpB;AAEF,sBAAsB,cAAc"}
@@ -0,0 +1,16 @@
1
+ import { forwardRef } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
4
+ //#region lib/components/BitkitBreadcrumb/components/BreadcrumbItem.tsx
5
+ var BreadcrumbItem = forwardRef(({ href, children }, ref) => {
6
+ return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, {
7
+ ref,
8
+ href,
9
+ children
10
+ }) });
11
+ });
12
+ BreadcrumbItem.displayName = "BitkitBreadcrumb.Item";
13
+ //#endregion
14
+ export { BreadcrumbItem as default };
15
+
16
+ //# sourceMappingURL=BreadcrumbItem.js.map
@@ -0,0 +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, children }, ref) => {\n return (\n <Breadcrumb.Item>\n <Breadcrumb.Link ref={ref} 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,MAAM,YAAY,QAAQ;AAC3F,QACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,WAAW,MAAZ;EAAsB;EAAW;EAC9B;EACe,CAAA,EACF,CAAA;EAEpB;AAEF,eAAe,cAAc"}
@@ -0,0 +1,21 @@
1
+ import OverflowMenuTrigger from "./OverflowMenuTrigger.js";
2
+ import { Children, isValidElement } from "react";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Portal } from "@chakra-ui/react/portal";
5
+ import { Menu } from "@chakra-ui/react/menu";
6
+ //#region lib/components/BitkitBreadcrumb/components/OverflowMenu.tsx
7
+ var OverflowMenu = ({ children }) => {
8
+ const childArray = Children.toArray(children).filter(isValidElement);
9
+ const trigger = childArray.find((child) => child.type === OverflowMenuTrigger);
10
+ const items = childArray.filter((child) => child.type !== OverflowMenuTrigger);
11
+ return /* @__PURE__ */ jsxs(Menu.Root, {
12
+ size: "md",
13
+ positioning: { offset: { crossAxis: -16 } },
14
+ children: [trigger ?? /* @__PURE__ */ jsx(OverflowMenuTrigger, {}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items }) }) })]
15
+ });
16
+ };
17
+ OverflowMenu.displayName = "BitkitBreadcrumb.OverflowMenu";
18
+ //#endregion
19
+ export { OverflowMenu as default };
20
+
21
+ //# sourceMappingURL=OverflowMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OverflowMenu.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenu.tsx"],"sourcesContent":["import { Menu } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport OverflowMenuTrigger from './OverflowMenuTrigger.tsx';\n\nexport type OverflowMenuProps = {\n children: ReactNode;\n};\n\nconst OverflowMenu = ({ children }: OverflowMenuProps) => {\n const childArray = Children.toArray(children).filter(isValidElement);\n const trigger = childArray.find((child) => child.type === OverflowMenuTrigger);\n const items = childArray.filter((child) => child.type !== OverflowMenuTrigger);\n\n return (\n <Menu.Root size=\"md\" positioning={{ offset: { crossAxis: -16 } }}>\n {trigger ?? <OverflowMenuTrigger />}\n <Portal>\n <Menu.Positioner>\n <Menu.Content>{items}</Menu.Content>\n </Menu.Positioner>\n </Portal>\n </Menu.Root>\n );\n};\n\nOverflowMenu.displayName = 'BitkitBreadcrumb.OverflowMenu';\n\nexport default OverflowMenu;\n"],"mappings":";;;;;;AAUA,IAAM,gBAAgB,EAAE,eAAkC;CACxD,MAAM,aAAa,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CACpE,MAAM,UAAU,WAAW,MAAM,UAAU,MAAM,SAAS,oBAAoB;CAC9E,MAAM,QAAQ,WAAW,QAAQ,UAAU,MAAM,SAAS,oBAAoB;AAE9E,QACE,qBAAC,KAAK,MAAN;EAAW,MAAK;EAAK,aAAa,EAAE,QAAQ,EAAE,WAAW,KAAK,EAAE;YAAhE,CACG,WAAW,oBAAC,qBAAD,EAAuB,CAAA,EACnC,oBAAC,QAAD,EAAA,UACE,oBAAC,KAAK,YAAN,EAAA,UACE,oBAAC,KAAK,SAAN,EAAA,UAAe,OAAqB,CAAA,EACpB,CAAA,EACX,CAAA,CACC;;;AAIhB,aAAa,cAAc"}
@@ -0,0 +1,21 @@
1
+ import { forwardRef, useId } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Menu } from "@chakra-ui/react/menu";
4
+ //#region lib/components/BitkitBreadcrumb/components/OverflowMenuItem.tsx
5
+ var OverflowMenuItem = forwardRef(({ href, children }, ref) => {
6
+ const id = useId();
7
+ return /* @__PURE__ */ jsx(Menu.Item, {
8
+ value: id,
9
+ asChild: true,
10
+ children: /* @__PURE__ */ jsx("a", {
11
+ ref,
12
+ href,
13
+ children
14
+ })
15
+ });
16
+ });
17
+ OverflowMenuItem.displayName = "BitkitBreadcrumb.OverflowMenuItem";
18
+ //#endregion
19
+ export { OverflowMenuItem as default };
20
+
21
+ //# sourceMappingURL=OverflowMenuItem.js.map
@@ -0,0 +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, children }, ref) => {\n const id = useId();\n\n return (\n <Menu.Item value={id} asChild>\n <a ref={ref} href={href}>\n {children}\n </a>\n </Menu.Item>\n );\n});\n\nOverflowMenuItem.displayName = 'BitkitBreadcrumb.OverflowMenuItem';\n\nexport default OverflowMenuItem;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,YAA0C,EAAE,MAAM,YAAY,QAAQ;CAC7F,MAAM,KAAK,OAAO;AAElB,QACE,oBAAC,KAAK,MAAN;EAAW,OAAO;EAAI,SAAA;YACpB,oBAAC,KAAD;GAAQ;GAAW;GAChB;GACC,CAAA;EACM,CAAA;EAEd;AAEF,iBAAiB,cAAc"}
@@ -0,0 +1,20 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Menu } from "@chakra-ui/react/menu";
3
+ import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
4
+ //#region lib/components/BitkitBreadcrumb/components/OverflowMenuTrigger.tsx
5
+ var DEFAULT_TRIGGER = /* @__PURE__ */ jsx(Breadcrumb.Ellipsis, {
6
+ as: "span",
7
+ tabIndex: 0,
8
+ children: ". . ."
9
+ });
10
+ var OverflowMenuTrigger = ({ children = DEFAULT_TRIGGER }) => {
11
+ return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Menu.Trigger, {
12
+ asChild: true,
13
+ children
14
+ }) });
15
+ };
16
+ OverflowMenuTrigger.displayName = "BitkitBreadcrumb.OverflowMenuTrigger";
17
+ //#endregion
18
+ export { OverflowMenuTrigger as default };
19
+
20
+ //# sourceMappingURL=OverflowMenuTrigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OverflowMenuTrigger.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenuTrigger.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { Menu } from '@chakra-ui/react/menu';\nimport { type ReactNode } from 'react';\n\ntype OverflowMenuTriggerProps = {\n children?: ReactNode;\n};\n\nconst DEFAULT_TRIGGER = (\n <Breadcrumb.Ellipsis as=\"span\" tabIndex={0}>\n . . .\n </Breadcrumb.Ellipsis>\n);\n\nconst OverflowMenuTrigger = ({ children = DEFAULT_TRIGGER }: OverflowMenuTriggerProps) => {\n return (\n <Breadcrumb.Item>\n <Menu.Trigger asChild>{children}</Menu.Trigger>\n </Breadcrumb.Item>\n );\n};\n\nOverflowMenuTrigger.displayName = 'BitkitBreadcrumb.OverflowMenuTrigger';\n\nexport default OverflowMenuTrigger;\n"],"mappings":";;;;AAQA,IAAM,kBACJ,oBAAC,WAAW,UAAZ;CAAqB,IAAG;CAAO,UAAU;WAAG;CAEtB,CAAA;AAGxB,IAAM,uBAAuB,EAAE,WAAW,sBAAgD;AACxF,QACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,KAAK,SAAN;EAAc,SAAA;EAAS;EAAwB,CAAA,EAC/B,CAAA;;AAItB,oBAAoB,cAAc"}
@@ -1,7 +1,7 @@
1
1
  import { forwardRef } from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { Button } from "@chakra-ui/react/button";
4
3
  import { Skeleton } from "@chakra-ui/react/skeleton";
4
+ import { Button } from "@chakra-ui/react/button";
5
5
  //#region lib/components/BitkitButton/BitkitButton.tsx
6
6
  var BitkitButton = forwardRef((props, ref) => {
7
7
  const { children, icon: Icon, size, state, suffixIcon: SuffixIcon, ...rest } = props;
@@ -7,8 +7,8 @@ import BitkitField from "../BitkitField/BitkitField.js";
7
7
  import { forwardRef } from "react";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  import { Portal } from "@chakra-ui/react/portal";
10
- import { Combobox } from "@chakra-ui/react/combobox";
11
10
  import { useListCollection } from "@chakra-ui/react/hooks";
11
+ import { Combobox } from "@chakra-ui/react/combobox";
12
12
  import { useFilter } from "@chakra-ui/react/locale";
13
13
  //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
14
14
  var BitkitCombobox = forwardRef((props, ref) => {
@@ -1,8 +1,8 @@
1
1
  import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
2
2
  import { forwardRef } from "react";
3
3
  import { jsx } from "react/jsx-runtime";
4
- import { IconButton } from "@chakra-ui/react/button";
5
4
  import { Skeleton } from "@chakra-ui/react/skeleton";
5
+ import { IconButton } from "@chakra-ui/react/button";
6
6
  //#region lib/components/BitkitIconButton/BitkitIconButton.tsx
7
7
  var BitkitIconButton = forwardRef((props, ref) => {
8
8
  const { icon: Icon, label, size, state, tooltipProps, ...rest } = props;
@@ -6,8 +6,8 @@ import { Box } from "@chakra-ui/react/box";
6
6
  import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
7
7
  import { forwardRef, useMemo } from "react";
8
8
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
9
- import { Skeleton } from "@chakra-ui/react/skeleton";
10
9
  import { Separator } from "@chakra-ui/react/separator";
10
+ import { Skeleton } from "@chakra-ui/react/skeleton";
11
11
  //#region lib/components/BitkitPagination/BitkitPagination.tsx
12
12
  var DEFAULT_LABELS = {
13
13
  items: "{start}–{end} of {total} items",
@@ -17,8 +17,8 @@ declare const _default: import('react').ForwardRefExoticComponent<{
17
17
  children?: ReactNode | undefined;
18
18
  } & import('react').RefAttributes<HTMLDivElement>> & {
19
19
  Action: import('react').ForwardRefExoticComponent<BitkitSplitButtonActionProps & import('react').RefAttributes<HTMLButtonElement>>;
20
- Group: import('react').ForwardRefExoticComponent<import('../BitkitActionMenu/BitkitActionMenu').BitkitMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
21
- Item: import('react').ForwardRefExoticComponent<import('../BitkitActionMenu/BitkitActionMenu').BitkitMenuItemProps & import('react').RefAttributes<HTMLDivElement>>;
20
+ Group: import('react').ForwardRefExoticComponent<import('..').BitkitMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
21
+ Item: import('react').ForwardRefExoticComponent<import('..').BitkitMenuItemProps & import('react').RefAttributes<HTMLDivElement>>;
22
22
  Separator: {
23
23
  (): import("react/jsx-runtime").JSX.Element;
24
24
  displayName: string;
@@ -1,7 +1,7 @@
1
1
  import IconChevronDown from "../../icons/IconChevronDown.js";
2
+ import BitkitActionMenu from "../BitkitActionMenu/BitkitActionMenu.js";
2
3
  import BitkitButton from "../BitkitButton/BitkitButton.js";
3
4
  import BitkitIconButton from "../BitkitIconButton/BitkitIconButton.js";
4
- import BitkitActionMenu from "../BitkitActionMenu/BitkitActionMenu.js";
5
5
  import { useSlotRecipe } from "@chakra-ui/react/styled-system";
6
6
  import { Children, forwardRef, isValidElement } from "react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -0,0 +1,67 @@
1
+ import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
2
+ import { Box } from "@chakra-ui/react/box";
3
+ import { chakra } from "@chakra-ui/react/styled-system";
4
+ import { forwardRef } from "react";
5
+ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
6
+ import { Collapsible } from "@chakra-ui/react/collapsible";
7
+ import { Table } from "@chakra-ui/react/table";
8
+ //#region lib/components/BitkitTable/BitkitExpandableRow.tsx
9
+ var expandCellCss = {
10
+ paddingBlock: 0,
11
+ paddingInline: 0,
12
+ verticalAlign: "middle",
13
+ width: "48"
14
+ };
15
+ var expandTriggerCss = {
16
+ alignItems: "center",
17
+ background: "none",
18
+ border: "none",
19
+ cursor: "pointer",
20
+ display: "flex",
21
+ justifyContent: "center",
22
+ padding: "12",
23
+ paddingInlineEnd: "4",
24
+ width: "full"
25
+ };
26
+ var expandedContentCss = {
27
+ paddingBlock: "16",
28
+ paddingInlineEnd: "16",
29
+ paddingInlineStart: "64"
30
+ };
31
+ var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => /* @__PURE__ */ jsx(Collapsible.Root, {
32
+ asChild: true,
33
+ defaultOpen,
34
+ children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
35
+ ref,
36
+ children: [/* @__PURE__ */ jsx(Table.Cell, {
37
+ css: expandCellCss,
38
+ children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
39
+ asChild: true,
40
+ children: /* @__PURE__ */ jsx(chakra.button, {
41
+ "aria-label": "Toggle row details",
42
+ css: expandTriggerCss,
43
+ type: "button",
44
+ children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/fg/text" })
45
+ })
46
+ })
47
+ }), children]
48
+ }), /* @__PURE__ */ jsx(Table.Row, {
49
+ css: { _hover: { background: "none" } },
50
+ children: /* @__PURE__ */ jsx(Table.Cell, {
51
+ colSpan,
52
+ css: {
53
+ paddingBlock: 0,
54
+ paddingInline: 0
55
+ },
56
+ children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
57
+ css: expandedContentCss,
58
+ children: expandedContent
59
+ }) })
60
+ })
61
+ })] })
62
+ }));
63
+ BitkitExpandableRow.displayName = "BitkitExpandableRow";
64
+ //#endregion
65
+ export { BitkitExpandableRow as default };
66
+
67
+ //# sourceMappingURL=BitkitExpandableRow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n children: ReactNode;\n colSpan: number;\n defaultOpen?: boolean;\n expandedContent: ReactNode;\n}\n\nconst expandCellCss: SystemStyleObject = {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n};\n\nconst expandTriggerCss: SystemStyleObject = {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '12',\n paddingInlineEnd: '4',\n width: 'full',\n};\n\nconst expandedContentCss: SystemStyleObject = {\n paddingBlock: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '64',\n};\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => (\n <Collapsible.Root asChild defaultOpen={defaultOpen}>\n <>\n <Table.Row ref={ref}>\n <Table.Cell css={expandCellCss}>\n <Collapsible.Trigger asChild>\n <chakra.button aria-label=\"Toggle row details\" css={expandTriggerCss} type=\"button\">\n <AssetSelectChevron color=\"button/secondary/fg/text\" />\n </chakra.button>\n </Collapsible.Trigger>\n </Table.Cell>\n {children}\n </Table.Row>\n <Table.Row css={{ _hover: { background: 'none' } }}>\n <Table.Cell colSpan={colSpan} css={{ paddingBlock: 0, paddingInline: 0 }}>\n <Collapsible.Content>\n <Box css={expandedContentCss}>{expandedContent}</Box>\n </Collapsible.Content>\n </Table.Cell>\n </Table.Row>\n </>\n </Collapsible.Root>\n ),\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;;AAeA,IAAM,gBAAmC;CACvC,cAAc;CACd,eAAe;CACf,eAAe;CACf,OAAO;CACR;AAED,IAAM,mBAAsC;CAC1C,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,gBAAgB;CAChB,SAAS;CACT,kBAAkB;CAClB,OAAO;CACR;AAED,IAAM,qBAAwC;CAC5C,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACrB;AAED,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAC5D,oBAAC,YAAY,MAAb;CAAkB,SAAA;CAAqB;WACrC,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;EAAgB;YAAhB,CACE,oBAAC,MAAM,MAAP;GAAY,KAAK;aACf,oBAAC,YAAY,SAAb;IAAqB,SAAA;cACnB,oBAAC,OAAO,QAAR;KAAe,cAAW;KAAqB,KAAK;KAAkB,MAAK;eACzE,oBAAC,oBAAD,EAAoB,OAAM,4BAA6B,CAAA;KACzC,CAAA;IACI,CAAA;GACX,CAAA,EACZ,SACS;KACZ,oBAAC,MAAM,KAAP;EAAW,KAAK,EAAE,QAAQ,EAAE,YAAY,QAAQ,EAAE;YAChD,oBAAC,MAAM,MAAP;GAAqB;GAAS,KAAK;IAAE,cAAc;IAAG,eAAe;IAAG;aACtE,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;IAAK,KAAK;cAAqB;IAAsB,CAAA,EACjC,CAAA;GACX,CAAA;EACH,CAAA,CACX,EAAA,CAAA;CACc,CAAA,CAEtB;AAED,oBAAoB,cAAc"}
@@ -0,0 +1,81 @@
1
+ import { chakra } from "@chakra-ui/react/styled-system";
2
+ import { forwardRef } from "react";
3
+ import { Icon } from "@chakra-ui/react/icon";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { Table } from "@chakra-ui/react/table";
6
+ //#region lib/components/BitkitTable/BitkitSortableColumnHeader.tsx
7
+ var sortHeaderCss = {
8
+ paddingBlock: 0,
9
+ paddingInline: 0
10
+ };
11
+ var sortButtonCss = {
12
+ alignItems: "center",
13
+ appearance: "none",
14
+ background: "none",
15
+ border: "none",
16
+ color: "inherit",
17
+ cursor: "pointer",
18
+ display: "flex",
19
+ font: "inherit",
20
+ gap: "4",
21
+ height: "100%",
22
+ paddingBlock: "12",
23
+ paddingInline: "16",
24
+ userSelect: "none",
25
+ _focusVisible: { outlineOffset: "-3px" },
26
+ width: "100%",
27
+ _hover: { backgroundColor: "background/active" }
28
+ };
29
+ var SortIcon = forwardRef((props, ref) => {
30
+ const { direction, ...rest } = props;
31
+ const upFill = direction === "ascending" ? "currentColor" : "var(--sort-icon-inactive)";
32
+ const downFill = direction === "descending" ? "currentColor" : "var(--sort-icon-inactive)";
33
+ return /* @__PURE__ */ jsx(Icon, {
34
+ ref,
35
+ asChild: true,
36
+ css: {
37
+ "--sort-icon-inactive": "colors.icon.disabled",
38
+ color: "icon/primary",
39
+ display: "inline-block",
40
+ verticalAlign: "middle"
41
+ },
42
+ ...rest,
43
+ children: /* @__PURE__ */ jsxs("svg", {
44
+ fill: "none",
45
+ height: "24",
46
+ viewBox: "0 0 24 24",
47
+ width: "24",
48
+ xmlns: "http://www.w3.org/2000/svg",
49
+ children: [/* @__PURE__ */ jsx("path", {
50
+ d: "M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z",
51
+ fill: upFill
52
+ }), /* @__PURE__ */ jsx("path", {
53
+ d: "M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z",
54
+ fill: downFill
55
+ })]
56
+ })
57
+ });
58
+ });
59
+ SortIcon.displayName = "SortIcon";
60
+ var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => /* @__PURE__ */ jsx(Table.ColumnHeader, {
61
+ ref,
62
+ "aria-sort": direction === "none" ? void 0 : direction,
63
+ css: sortHeaderCss,
64
+ ...rest,
65
+ children: /* @__PURE__ */ jsxs(chakra.button, {
66
+ css: sortButtonCss,
67
+ justifyContent: textAlign === "end" ? "flex-end" : void 0,
68
+ onClick: onSort,
69
+ type: "button",
70
+ children: [
71
+ children,
72
+ " ",
73
+ /* @__PURE__ */ jsx(SortIcon, { direction })
74
+ ]
75
+ })
76
+ }));
77
+ BitkitSortableColumnHeader.displayName = "BitkitSortableColumnHeader";
78
+ //#endregion
79
+ export { BitkitSortableColumnHeader as default };
80
+
81
+ //# sourceMappingURL=BitkitSortableColumnHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n direction: SortDirection;\n onSort: () => void;\n}\n\nconst sortHeaderCss = {\n paddingBlock: 0,\n paddingInline: 0,\n};\n\nconst sortButtonCss = {\n alignItems: 'center',\n appearance: 'none' as const,\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '4',\n height: '100%',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none' as const,\n _focusVisible: {\n outlineOffset: '-3px',\n },\n width: '100%',\n _hover: { backgroundColor: 'background/active' },\n};\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n const { direction, ...rest } = props;\n const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n return (\n <Icon\n ref={ref}\n asChild\n css={{\n '--sort-icon-inactive': 'colors.icon.disabled',\n color: 'icon/primary',\n display: 'inline-block',\n verticalAlign: 'middle',\n }}\n {...rest}\n >\n <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n fill={upFill}\n />\n <path\n d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n fill={downFill}\n />\n </svg>\n </Icon>\n );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n ({ children, direction, onSort, textAlign, ...rest }, ref) => (\n <Table.ColumnHeader\n ref={ref}\n aria-sort={direction === 'none' ? undefined : direction}\n css={sortHeaderCss}\n {...rest}\n >\n <chakra.button\n css={sortButtonCss}\n justifyContent={textAlign === 'end' ? 'flex-end' : undefined}\n onClick={onSort}\n type=\"button\"\n >\n {children} <SortIcon direction={direction} />\n </chakra.button>\n </Table.ColumnHeader>\n ),\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitSortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,gBAAgB;CACpB,cAAc;CACd,eAAe;CAChB;AAED,IAAM,gBAAgB;CACpB,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACT,MAAM;CACN,KAAK;CACL,QAAQ;CACR,cAAc;CACd,eAAe;CACf,YAAY;CACZ,eAAe,EACb,eAAe,QAChB;CACD,OAAO;CACP,QAAQ,EAAE,iBAAiB,qBAAqB;CACjD;AAED,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;AAE/D,QACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;GAChB;EACD,GAAI;YAEJ,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;aAAlE,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;IACN,CAAA,EACF,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;IACN,CAAA,CACE;;EACD,CAAA;EAET;AAEF,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QACpD,oBAAC,MAAM,cAAP;CACO;CACL,aAAW,cAAc,SAAS,KAAA,IAAY;CAC9C,KAAK;CACL,GAAI;WAEJ,qBAAC,OAAO,QAAR;EACE,KAAK;EACL,gBAAgB,cAAc,QAAQ,aAAa,KAAA;EACnD,SAAS;EACT,MAAK;YAJP;GAMG;GAAS;GAAC,oBAAC,UAAD,EAAqB,WAAa,CAAA;GAC/B;;CACG,CAAA,CAExB;AAED,2BAA2B,cAAc"}
@@ -1,8 +1,10 @@
1
1
  export { default as BitkitAccordion, type BitkitAccordionItemBodyProps, type BitkitAccordionItemProps, type BitkitAccordionItemTriggerProps, type BitkitAccordionProps, } from './BitkitAccordion/BitkitAccordion';
2
2
  export { default as BitkitActionBar, type BitkitActionBarProps } from './BitkitActionBar/BitkitActionBar';
3
+ export { default as BitkitActionMenu, type BitkitMenuGroupProps, type BitkitMenuItemProps, } from './BitkitActionMenu/BitkitActionMenu';
3
4
  export { default as BitkitAlert, type BitkitAlertProps } from './BitkitAlert/BitkitAlert';
4
5
  export { default as BitkitAvatar, type BitkitAvatarProps } from './BitkitAvatar/BitkitAvatar';
5
6
  export { default as BitkitBadge, type BitkitBadgeProps } from './BitkitBadge/BitkitBadge';
7
+ export { default as BitkitBreadcrumb, type BitkitBreadcrumbProps } from './BitkitBreadcrumb/BitkitBreadcrumb';
6
8
  export { default as BitkitButton, type BitkitButtonProps } from './BitkitButton/BitkitButton';
7
9
  export { default as BitkitCalendar, type BitkitCalendarProps } from './BitkitCalendar/BitkitCalendar';
8
10
  export { default as BitkitCard } from './BitkitCard/BitkitCard';
@@ -67,6 +69,8 @@ export { default as BitkitStat, type BitkitStatProps, type TrendColor, type Tren
67
69
  export { default as BitkitSteps, type BitkitStepsItemProps, type BitkitStepsItemState, type BitkitStepsProps, } from './BitkitSteps/BitkitSteps';
68
70
  export { default as BitkitStepsCard, type BitkitStepsCardBodyProps, type BitkitStepsCardFooterProps, type BitkitStepsCardHeaderProps, type BitkitStepsCardProps, type BitkitStepsCardStepProps, } from './BitkitStepsCard/BitkitStepsCard';
69
71
  export { default as BitkitSwitch, type BitkitSwitchProps } from './BitkitSwitch';
72
+ export { default as BitkitExpandableRow, type BitkitExpandableRowProps } from './BitkitTable/BitkitExpandableRow';
73
+ export { default as BitkitSortableColumnHeader, type BitkitSortableColumnHeaderProps, } from './BitkitTable/BitkitSortableColumnHeader';
70
74
  export { default as BitkitTabs } from './BitkitTabs/BitkitTabs';
71
75
  export { default as BitkitTag, type BitkitTagProps } from './BitkitTag/BitkitTag';
72
76
  export { default as BitkitTagsInput, type BitkitTagsInputProps } from './BitkitTagsInput/BitkitTagsInput';
package/dist/main.js CHANGED
@@ -283,10 +283,13 @@ import IconXTwitter from "./icons/IconXTwitter.js";
283
283
  import BitkitLabelTooltip from "./components/BitkitLabelTooltip/BitkitLabelTooltip.js";
284
284
  import BitkitCloseButton from "./components/BitkitCloseButton/BitkitCloseButton.js";
285
285
  import BitkitActionBar from "./components/BitkitActionBar/BitkitActionBar.js";
286
+ import BitkitActionMenu from "./components/BitkitActionMenu/BitkitActionMenu.js";
286
287
  import BitkitColorButton from "./components/BitkitColorButton/BitkitColorButton.js";
287
288
  import BitkitAlert from "./components/BitkitAlert/BitkitAlert.js";
288
289
  import BitkitAvatar from "./components/BitkitAvatar/BitkitAvatar.js";
289
290
  import BitkitBadge from "./components/BitkitBadge/BitkitBadge.js";
291
+ import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
292
+ import BitkitBreadcrumb from "./components/BitkitBreadcrumb/BitkitBreadcrumb.js";
290
293
  import BitkitButton from "./components/BitkitButton/BitkitButton.js";
291
294
  import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
292
295
  import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
@@ -300,7 +303,6 @@ import BitkitLabel from "./components/BitkitLabel/BitkitLabel.js";
300
303
  import BitkitCollapsible from "./components/BitkitCollapsible/BitkitCollapsible.js";
301
304
  import BitkitField from "./components/BitkitField/BitkitField.js";
302
305
  import BitkitCombobox from "./components/BitkitCombobox/BitkitCombobox.js";
303
- import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
304
306
  import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
305
307
  import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
306
308
  import BitkitDialogStep from "./components/BitkitDialog/BitkitDialogStep.js";
@@ -350,6 +352,8 @@ import BitkitStat from "./components/BitkitStat/BitkitStat.js";
350
352
  import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
351
353
  import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
352
354
  import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
355
+ import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
356
+ import BitkitSortableColumnHeader from "./components/BitkitTable/BitkitSortableColumnHeader.js";
353
357
  import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
354
358
  import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
355
359
  import BitkitTextArea from "./components/BitkitTextArea/BitkitTextArea.js";
@@ -359,4 +363,4 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
359
363
  import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
360
364
  import bitkitTheme from "./theme/index.js";
361
365
  import Provider from "./providers/BitkitProvider.js";
362
- export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogHeader, BitkitDialogRoot, BitkitDialogStep, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
366
+ export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogHeader, BitkitDialogRoot, BitkitDialogStep, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
@@ -1,4 +1,4 @@
1
- declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
1
+ declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
2
2
  variant: {
3
3
  [k: string]: {
4
4
  indicator: {
@@ -1,4 +1,4 @@
1
- declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "root" | "trigger" | "positioner" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "valueText" | "months", {
1
+ declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "root" | "trigger" | "positioner" | "valueText" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "months", {
2
2
  layout: {
3
3
  '1-month': {
4
4
  content: {
@@ -1,4 +1,4 @@
1
- declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
1
+ declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
2
2
  colorScheme: {
3
3
  white: {
4
4
  root: {
@@ -21,8 +21,10 @@ var expandableCardSlotRecipe = defineSlotRecipe({
21
21
  justifyContent: "space-between",
22
22
  cursor: "pointer",
23
23
  width: "100%",
24
+ color: "text/primary",
24
25
  "&:active": { backgroundColor: "background/active" },
25
26
  "&:hover:not(:active)": { backgroundColor: "background/hover" },
27
+ _hover: { color: "text/primary" },
26
28
  _open: { backgroundColor: "background/secondary" }
27
29
  },
28
30
  collapsible: {
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'icon', 'secdText', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _open: {\n backgroundColor: 'background/secondary',\n },\n },\n collapsible: {\n overflow: 'hidden',\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 },\n body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,MAAM;EAAE;EAAe;EAAQ;EAAY;EAAS;CAC3E,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;GACX;EACD,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,YAAY,EACV,iBAAiB,qBAClB;GACD,wBAAwB,EACtB,iBAAiB,oBAClB;GACD,OAAO,EACL,iBAAiB,wBAClB;GACF;EACD,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;IACpB;GACD,SAAS;IACP,eAAe;IACf,mBAAmB;IACpB;GACF;EACD,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;GACV;EACD,MAAM,EACJ,OAAO,kBACR;EACD,UAAU,EACR,OAAO,kBACR;EACD,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;GACZ;EACF;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;IAAM;GACxE,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACD,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;IAAM;GACvD,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACF,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC"}
1
+ {"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'icon', 'secdText', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n color: 'text/primary',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _hover: {\n color: 'text/primary',\n },\n _open: {\n backgroundColor: 'background/secondary',\n },\n },\n collapsible: {\n overflow: 'hidden',\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 },\n body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,MAAM;EAAE;EAAe;EAAQ;EAAY;EAAS;CAC3E,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;GACX;EACD,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,qBAClB;GACD,wBAAwB,EACtB,iBAAiB,oBAClB;GACD,QAAQ,EACN,OAAO,gBACR;GACD,OAAO,EACL,iBAAiB,wBAClB;GACF;EACD,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;IACpB;GACD,SAAS;IACP,eAAe;IACf,mBAAmB;IACpB;GACF;EACD,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;GACV;EACD,MAAM,EACJ,OAAO,kBACR;EACD,UAAU,EACR,OAAO,kBACR;EACD,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;GACZ;EACF;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;IAAM;GACxE,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACD,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;IAAM;GACvD,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACF,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC"}
@@ -1,4 +1,4 @@
1
- declare const fileUploadSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
1
+ declare const fileUploadSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "itemGroup" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
2
2
  variant: {
3
3
  image: {
4
4
  root: {
@@ -1,4 +1,4 @@
1
- declare const menuSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "indicator" | "itemText" | "itemGroup" | "itemGroupLabel" | "contextTrigger" | "triggerItem" | "itemCommand" | "itemHelper", {
1
+ declare const menuSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "contextTrigger" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "triggerItem" | "itemCommand" | "itemHelper", {
2
2
  size: {
3
3
  lg: {
4
4
  item: {
@@ -1,5 +1,5 @@
1
1
  export declare const triggerSeparatorStyle: import('@chakra-ui/react').SystemStyleObject;
2
- export declare const numberInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
2
+ export declare const numberInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "valueText" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
3
3
  size: {
4
4
  md: {
5
5
  input: import('@chakra-ui/react').SystemStyleObject | undefined;
@@ -1,4 +1,4 @@
1
- declare const stepsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "progress" | "title" | "separator" | "list" | "root" | "item" | "trigger" | "description" | "indicator" | "nextTrigger" | "prevTrigger", {
1
+ declare const stepsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "progress" | "title" | "separator" | "list" | "root" | "item" | "trigger" | "indicator" | "description" | "nextTrigger" | "prevTrigger", {
2
2
  orientation: {
3
3
  horizontal: {
4
4
  list: {
@@ -1,4 +1,4 @@
1
- declare const tagsInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemDeleteTrigger" | "itemPreview" | "tagsBlock" | "itemInput" | "suffixBlock", {
1
+ declare const tagsInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "itemText" | "clearTrigger" | "control" | "itemDeleteTrigger" | "itemPreview" | "tagsBlock" | "itemInput" | "suffixBlock", {
2
2
  size: {
3
3
  md: {
4
4
  control: {
@@ -1,4 +1,4 @@
1
- declare const toastSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "description" | "indicator" | "timestamp" | "actionTrigger", {
1
+ declare const toastSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "indicator" | "description" | "timestamp" | "actionTrigger", {
2
2
  variant: {
3
3
  [k: string]: {
4
4
  icon: {
@@ -1,4 +1,4 @@
1
- declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
1
+ declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "itemText" | "tree" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
2
2
  variant: {
3
3
  files: {
4
4
  branchControl: {
@@ -0,0 +1,295 @@
1
+ # Bitkit v1 → v2 Migration Guide
2
+
3
+ Practical learnings from migrating a React frontend from `@bitrise/bitkit` (Chakra UI v2) to `@bitrise/bitkit-v2` (Chakra UI v3).
4
+
5
+ ---
6
+
7
+ ## Strategy: coexistence first, cutover last
8
+
9
+ Don't attempt a big-bang migration. Instead:
10
+
11
+ 1. Install `@bitrise/bitkit-v2` alongside v1
12
+ 2. Wrap `BitkitProvider` (v2) **inside** the existing v1 `<Provider>`. In practice, nesting them works without additional config.
13
+ 3. Migrate file by file, component by component
14
+ 4. Remove v1 `<Provider>` only when zero v1 imports remain
15
+ 5. Remove `@bitrise/bitkit` from `package.json` last
16
+
17
+ ```tsx
18
+ // Transitional App.tsx
19
+ <Provider theme={customTheme}> {/* v1 — stays until all v1 imports gone */}
20
+ <BitkitProvider> {/* v2 */}
21
+ <App />
22
+ </BitkitProvider>
23
+ </Provider>
24
+ ```
25
+
26
+ > **Note on CSS conflicts**: If Chakra v3's preflight reset causes visual conflicts during coexistence, `BitkitProvider` can't help — it hardcodes its internal system with `preflight: true` and doesn't expose an override. The fallback is `ChakraProvider` with a custom system where `preflight: false`, but be aware that also drops Bitkit's bundled font imports and `BitkitToaster` — those would need to be re-added manually.
27
+
28
+ ---
29
+
30
+ ## Migration order
31
+
32
+ Migrate in this order to minimize blockers:
33
+
34
+ 1. **Primitives**: `Box`, `Text`, `Divider` — these are used everywhere, get them out of the way first
35
+ 2. **Atomic components**: `Button`, `Badge`, `Tag`, `Spinner`, `Toast`
36
+ 3. **Form components**: `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`
37
+ 4. **Layout & navigation**: `Sidebar`, `Breadcrumb`
38
+ 5. **Composite components**: `Dialog`, `Tabs`, `Table`, `Card`, `Alert`
39
+ 6. **Icons** (if migrating from `lucide-react` or similar)
40
+ 7. **Dependency cleanup**: remove v1 and all now-unused peer deps
41
+
42
+ ---
43
+
44
+ ## Component mapping
45
+
46
+ ### Primitives
47
+
48
+ | v1 | v2 |
49
+ |----|----|
50
+ | `Box` from `@bitrise/bitkit` | `Box` from `@chakra-ui/react/box` |
51
+ | `Text` from `@bitrise/bitkit` | `Text` from `@chakra-ui/react/text` |
52
+ | `Divider` | `Separator` from `@chakra-ui/react/separator` |
53
+ | `BoxProps`, `TextProps` | same, from `@chakra-ui/react/box` and `@chakra-ui/react/text` |
54
+
55
+ Chakra v2 → v3 prop changes on primitives:
56
+ - `noOfLines` → `lineClamp`
57
+ - `Box as="a" href="..."` doesn't work → use `chakra.a` from `@chakra-ui/react/styled-system`
58
+ - `Box as="button" onClick={...}` → use `chakra.button` from `@chakra-ui/react/styled-system`
59
+
60
+ ### Buttons
61
+
62
+ | v1 | v2 |
63
+ |----|----|
64
+ | `Button` | `BitkitButton` |
65
+ | `IconButton` | `BitkitIconButton` |
66
+ | `leftIconName` | `icon` |
67
+ | `isDisabled` | `state="disabled"` |
68
+ | `isLoading` | `state="loading"` |
69
+
70
+ **Gotcha**: `BitkitButton` requires `children` to be a `string`. If a button contains complex layout (icon + text, conditional content, custom JSX), use `chakra.button` from `@chakra-ui/react/styled-system` instead of forcing it into `BitkitButton`.
71
+
72
+ ### Badge / Tag
73
+
74
+ | v1 | v2 |
75
+ |----|----|
76
+ | `Badge colorScheme="positive"` | `BitkitBadge colorPalette="green"` |
77
+ | `Badge colorScheme="negative"` | `BitkitBadge colorPalette="red"` |
78
+ | `Badge colorScheme="warning"` | `BitkitBadge colorPalette="yellow"` |
79
+ | `Badge colorScheme="progress"` | `BitkitBadge colorPalette="purple"` |
80
+ | `Tag` | `BitkitTag` |
81
+
82
+ ### Toast
83
+
84
+ ```tsx
85
+ // v1
86
+ const toast = useToast()
87
+ toast({ status: 'error', title: 'Oops', description: 'Something failed' })
88
+
89
+ // v2
90
+ createBitkitToast({ variant: 'critical', titleText: 'Oops', messageText: 'Something failed' })
91
+ ```
92
+
93
+ `status` → `variant`, and `'error'` → `'critical'`. Note: `createBitkitToast` is called directly with props — it's not a factory that returns a function.
94
+
95
+ ### Dialogs
96
+
97
+ ```tsx
98
+ // v1
99
+ <Dialog isOpen={open} onClose={() => setOpen(false)}>
100
+ <DialogBody>...</DialogBody>
101
+ <DialogFooter>...</DialogFooter>
102
+ </Dialog>
103
+
104
+ // v2
105
+ <BitkitDialog open={open} onOpenChange={({ open }) => setOpen(open)}>
106
+ <BitkitDialog.Body>...</BitkitDialog.Body>
107
+ <BitkitDialog.Footer>
108
+ <BitkitDialog.Buttons>...</BitkitDialog.Buttons>
109
+ </BitkitDialog.Footer>
110
+ </BitkitDialog>
111
+ ```
112
+
113
+ Key changes: `isOpen` → `open`, `onClose` → `onOpenChange` (receives `{ open: boolean }`).
114
+
115
+ ### Tabs
116
+
117
+ The API changed fundamentally — from index-based to value-based:
118
+
119
+ ```tsx
120
+ // v1 (index-based)
121
+ <Tabs>
122
+ <TabList>
123
+ <Tab>First</Tab>
124
+ <Tab>Second</Tab>
125
+ </TabList>
126
+ <TabPanels>
127
+ <TabPanel>...</TabPanel>
128
+ <TabPanel>...</TabPanel>
129
+ </TabPanels>
130
+ </Tabs>
131
+
132
+ // v2 (value-based)
133
+ <BitkitTabs.Root defaultValue="first">
134
+ <BitkitTabs.List>
135
+ <BitkitTabs.Trigger value="first">First</BitkitTabs.Trigger>
136
+ <BitkitTabs.Trigger value="second">Second</BitkitTabs.Trigger>
137
+ </BitkitTabs.List>
138
+ <BitkitTabs.ContentGroup>
139
+ <BitkitTabs.Content value="first">...</BitkitTabs.Content>
140
+ <BitkitTabs.Content value="second">...</BitkitTabs.Content>
141
+ </BitkitTabs.ContentGroup>
142
+ </BitkitTabs.Root>
143
+ ```
144
+
145
+ This is one of the more involved migrations — every tab needs an explicit `value`.
146
+
147
+ ### Table
148
+
149
+ ```tsx
150
+ // v1 — flat imports
151
+ import { Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@bitrise/bitkit'
152
+
153
+ // v2 — namespace
154
+ import { Table } from '@chakra-ui/react/table'
155
+ <Table.Root><Table.Header><Table.Row><Table.ColumnHeader>
156
+ <Table.Body><Table.Row><Table.Cell>
157
+ ```
158
+
159
+ ### Forms
160
+
161
+ | v1 | v2 |
162
+ |----|----|
163
+ | `Input` | `BitkitTextInput` |
164
+ | `Textarea` | `BitkitTextArea` |
165
+ | `Select` | `BitkitNativeSelect` |
166
+ | `Checkbox` | `BitkitCheckbox` |
167
+ | `Toggle` (`Switch` in v1) | `BitkitSwitch` |
168
+ | `SearchInput` | `BitkitSearchInput` |
169
+
170
+ For password fields with an eye-toggle: use `BitkitField` + Chakra v3 `InputGroup` with `endElement`.
171
+
172
+ ### Cards
173
+
174
+ | v1 | v2 |
175
+ |----|----|
176
+ | `Card` | `BitkitCard` |
177
+ | `ExpandableCard` | `BitkitExpandableCard` |
178
+
179
+ `BitkitCard` accepts `paddingSize` and `elevation` (boolean). Common `BitkitExpandableCard` props: `title`, `secdText`, `size`; use `defaultExpanded` for uncontrolled or `expanded`/`onChange` for controlled usage. It also supports `icon`, `suffix`, and other options — see the component API for the full list.
180
+
181
+ If your codebase has a local `card.tsx` wrapper around v1 Card (e.g. Shadcn-style `CardHeader`, `CardContent` etc.), remove the wrapper entirely and migrate to `BitkitCard` directly — keeping the wrapper layer just adds indirection you'll need to unwind later.
182
+
183
+ ### Notifications / Alert
184
+
185
+ | v1 | v2 |
186
+ |----|----|
187
+ | `Notification` | `BitkitAlert` |
188
+
189
+ ### Sidebar & Breadcrumb
190
+
191
+ ```tsx
192
+ // Sidebar v2
193
+ <BitkitSidebar>
194
+ <BitkitSidebar.Title>Title</BitkitSidebar.Title>
195
+ <BitkitSidebar.GroupHeading>Group</BitkitSidebar.GroupHeading>
196
+ <BitkitSidebar.Item icon={IconName} selected={...}>Label</BitkitSidebar.Item>
197
+ </BitkitSidebar>
198
+
199
+ // Breadcrumb v2
200
+ <BitkitBreadcrumb>
201
+ <BitkitBreadcrumb.Item href="#/path">Label</BitkitBreadcrumb.Item>
202
+ <BitkitBreadcrumb.CurrentItem>Current</BitkitBreadcrumb.CurrentItem>
203
+ </BitkitBreadcrumb>
204
+ ```
205
+
206
+ **HashRouter gotcha**: `BitkitBreadcrumb` uses plain `href`. With HashRouter all links need the `#/` prefix (e.g. `href="#/sessions"`), otherwise navigation breaks silently.
207
+
208
+ **Version requirement**: `BitkitBreadcrumb` requires `@bitrise/bitkit-v2 >= 0.3.210`.
209
+
210
+ ### textStyle tokens
211
+
212
+ Replace explicit `fontSize` / `fontWeight` / `lineHeight` props on `<Text>` with `textStyle` tokens:
213
+
214
+ ```tsx
215
+ // Before
216
+ <Text fontSize="14px" fontWeight="600" lineHeight="20px">...</Text>
217
+
218
+ // After
219
+ <Text textStyle="body/md/semibold">...</Text>
220
+ ```
221
+
222
+ Common tokens: `body/sm/regular`, `body/md/regular`, `body/md/semibold`, `body/lg/semibold`, `heading/h3` … `heading/h1`. Do this alongside the component migration per file — don't leave it for a separate pass at the end, it accumulates quickly.
223
+
224
+ ---
225
+
226
+ ## Action menus
227
+
228
+ If the codebase has a hand-rolled dropdown/action menu (state + ref + `useEffect` for click-outside), replace it with `BitkitActionMenu`:
229
+
230
+ ```tsx
231
+ <BitkitActionMenu.Root trigger={<button>...</button>}>
232
+ <BitkitActionMenu.Item onClick={...}>Edit</BitkitActionMenu.Item>
233
+ <BitkitActionMenu.Separator />
234
+ <BitkitActionMenu.Item onClick={...} danger>Delete</BitkitActionMenu.Item>
235
+ </BitkitActionMenu.Root>
236
+ ```
237
+
238
+ ---
239
+
240
+ ## Color tokens: `text/*` vs `icon/*`
241
+
242
+ Use `text/*` tokens on `<Text>` (and other text elements), and `icon/*` tokens on `<Icon*>` components. Most pairs resolve to the same underlying color, so a mismatch won't be visible — but the semantics matter.
243
+
244
+ | `text/*` token | `icon/*` equivalent | Same color? |
245
+ |---|---|---|
246
+ | `text/secondary` | `icon/secondary` | ✓ |
247
+ | `text/tertiary` | `icon/tertiary` | ✓ |
248
+ | `text/link` | `icon/interactive` | ✓ (both → `sys.interactive`) |
249
+
250
+ **Gotcha**: `icon/link` does **not** exist. Use `icon/interactive` instead — it resolves to the same `sys.interactive` color as `text/link`.
251
+
252
+ ---
253
+
254
+ ## Dependency cleanup
255
+
256
+ After the migration, audit `package.json` carefully — v1 pulled in transitive deps that may still be listed:
257
+
258
+ - `@emotion/react` — you may no longer need to list it directly in your app's `package.json`; `@bitrise/bitkit-v2` brings it transitively
259
+ - `lucide-react` — if icons are now from `@bitrise/bitkit-v2`
260
+ - `zustand` — if Bitkit's sidebar hook was the only consumer
261
+ - `@types/luxon`, `patch-package`, `postcss` — check if still used
262
+
263
+ Also check `scripts` in `package.json` for any `postinstall` entries referencing removed packages (e.g. `"postinstall": "patch-package"`) — these will silently break CI.
264
+
265
+ ---
266
+
267
+ ## Working efficiently (token / context budget)
268
+
269
+ Migrating a large repo component-by-component is token-intensive. What works well:
270
+
271
+ - **Grep first, cheap**: `grep -r "@bitrise/bitkit" src --include="*.tsx" -l` gives you the full scope before touching anything
272
+ - **You navigate, AI executes**: identify the interesting/complex files yourself, hand them over one at a time. Avoid "replace all X with Y across the entire repo" — it requires reading every file even for trivial changes
273
+ - **Codemods for mechanical swaps**: simple renames across many files (`Box` → `chakra.Box`, import path changes) are better done with `sed` or a codemod script; use AI for the cases that need judgment
274
+ - **Identify custom components early**: look for any local wrappers around v1 components or hand-rolled alternatives to v2 components (dropdowns, cards, dialogs). Plan to replace these, not wrap them again
275
+
276
+ ---
277
+
278
+ ## Pre-migration checklist
279
+
280
+ - [ ] `grep -r "@bitrise/bitkit" src` — inventory of files and components
281
+ - [ ] Identify local wrapper components around v1 Bitkit components
282
+ - [ ] Identify hand-rolled alternatives to v2 components (dropdowns, modals, etc.)
283
+ - [ ] Check `@bitrise/bitkit-v2` changelog for version requirements per component
284
+ - [ ] Check if HashRouter is in use (affects Breadcrumb `href`)
285
+ - [ ] Note any buttons with complex children (non-string) — these need `chakra.button`
286
+
287
+ ## Post-migration checklist
288
+
289
+ - [ ] Zero `@bitrise/bitkit` imports in source
290
+ - [ ] `npm run build` passes
291
+ - [ ] `npm run lint` clean
292
+ - [ ] Remove `@bitrise/bitkit` from `package.json`
293
+ - [ ] Remove transitively-pulled peer deps that are no longer needed
294
+ - [ ] Check all `scripts` entries in `package.json` for references to removed packages
295
+ - [ ] Visual walkthrough: all pages, dialogs, tabs, forms, toasts, tables
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.209",
4
+ "version": "0.3.211",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",
@@ -13,6 +13,7 @@
13
13
  "type": "module",
14
14
  "files": [
15
15
  "dist",
16
+ "docs",
16
17
  "scripts/postinstall.cjs",
17
18
  "README.md",
18
19
  "package.json"