@bitrise/bitkit-v2 0.3.371 → 0.3.373
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 +14 -2
- package/dist/components/BitkitAccordion/BitkitAccordion.d.ts +3 -4
- package/dist/components/BitkitAccordion/BitkitAccordion.js +8 -8
- package/dist/components/BitkitAccordion/BitkitAccordion.js.map +1 -1
- package/dist/components/BitkitActionMenu/BitkitActionMenu.d.ts +43 -21
- package/dist/components/BitkitActionMenu/BitkitActionMenu.js +46 -32
- package/dist/components/BitkitActionMenu/BitkitActionMenu.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js +1 -1
- package/dist/components/BitkitCombobox/BitkitCombobox.js +1 -1
- package/dist/components/BitkitDialog/BitkitStepperDialog.js +1 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js +1 -1
- package/dist/components/BitkitPageFooter/BitkitPageFooter.js +1 -1
- package/dist/components/BitkitSelect/BitkitSelect.js +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.js +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.d.ts +3 -6
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js +7 -7
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.js +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js +30 -54
- package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -1
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js +28 -41
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map +1 -1
- package/dist/components/BitkitTreeView/BitkitTreeView.js +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/main.js +3 -3
- package/dist/theme/slot-recipes/Menu.recipe.d.ts +14 -3
- package/dist/theme/slot-recipes/Menu.recipe.js +18 -6
- package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Table.recipe.d.ts +20 -7
- package/dist/theme/slot-recipes/Table.recipe.js +97 -14
- package/dist/theme/slot-recipes/Table.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +34 -10
- package/package.json +1 -1
|
@@ -1,66 +1,42 @@
|
|
|
1
1
|
import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
|
|
2
2
|
import { Box } from "@chakra-ui/react/box";
|
|
3
|
-
import { chakra } from "@chakra-ui/react/styled-system";
|
|
4
3
|
import { forwardRef } from "react";
|
|
5
4
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
5
|
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
7
|
-
import { Table } from "@chakra-ui/react/table";
|
|
6
|
+
import { Table, useTableStyles } from "@chakra-ui/react/table";
|
|
8
7
|
//#region lib/components/BitkitTable/BitkitExpandableRow.tsx
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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, {
|
|
8
|
+
var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => {
|
|
9
|
+
const styles = useTableStyles();
|
|
10
|
+
return /* @__PURE__ */ jsx(Collapsible.Root, {
|
|
11
|
+
asChild: true,
|
|
12
|
+
defaultOpen,
|
|
13
|
+
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
|
|
14
|
+
ref,
|
|
15
|
+
css: styles.expandableRow,
|
|
16
|
+
children: [/* @__PURE__ */ jsx(Table.Cell, {
|
|
17
|
+
css: styles.expandCell,
|
|
18
|
+
children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
|
|
41
19
|
"aria-label": "Toggle row details",
|
|
42
|
-
css:
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
css: styles.expandTrigger,
|
|
21
|
+
children: /* @__PURE__ */ jsx(Collapsible.Indicator, {
|
|
22
|
+
asChild: true,
|
|
23
|
+
children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/text" })
|
|
24
|
+
})
|
|
45
25
|
})
|
|
26
|
+
}), children]
|
|
27
|
+
}), /* @__PURE__ */ jsx(Table.Row, {
|
|
28
|
+
css: styles.expandedRow,
|
|
29
|
+
children: /* @__PURE__ */ jsx(Table.Cell, {
|
|
30
|
+
colSpan,
|
|
31
|
+
css: styles.expandedCell,
|
|
32
|
+
children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
|
|
33
|
+
css: styles.expandedContent,
|
|
34
|
+
children: expandedContent
|
|
35
|
+
}) })
|
|
46
36
|
})
|
|
47
|
-
})
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
children: /* @__PURE__ */ jsx(Table.Cell, {
|
|
51
|
-
colSpan,
|
|
52
|
-
css: {
|
|
53
|
-
paddingBlock: 0,
|
|
54
|
-
paddingInline: 0,
|
|
55
|
-
height: 0
|
|
56
|
-
},
|
|
57
|
-
children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
|
|
58
|
-
css: expandedContentCss,
|
|
59
|
-
children: expandedContent
|
|
60
|
-
}) })
|
|
61
|
-
})
|
|
62
|
-
})] })
|
|
63
|
-
}));
|
|
37
|
+
})] })
|
|
38
|
+
});
|
|
39
|
+
});
|
|
64
40
|
BitkitExpandableRow.displayName = "BitkitExpandableRow";
|
|
65
41
|
//#endregion
|
|
66
42
|
export { BitkitExpandableRow as default };
|
|
@@ -1 +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 {
|
|
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 { Table, useTableStyles } 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 BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => {\n const styles = useTableStyles();\n\n return (\n <Collapsible.Root asChild defaultOpen={defaultOpen}>\n <>\n <Table.Row ref={ref} css={styles.expandableRow}>\n <Table.Cell css={styles.expandCell}>\n <Collapsible.Trigger aria-label=\"Toggle row details\" css={styles.expandTrigger}>\n <Collapsible.Indicator asChild>\n <AssetSelectChevron color=\"button/secondary/text\" />\n </Collapsible.Indicator>\n </Collapsible.Trigger>\n </Table.Cell>\n {children}\n </Table.Row>\n <Table.Row css={styles.expandedRow}>\n <Table.Cell colSpan={colSpan} css={styles.expandedCell}>\n <Collapsible.Content>\n <Box css={styles.expandedContent}>{expandedContent}</Box>\n </Collapsible.Content>\n </Table.Cell>\n </Table.Row>\n </>\n </Collapsible.Root>\n );\n },\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;AAcA,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAAQ;CACpE,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,YAAY,MAAb;EAAkB,SAAA;EAAqB;EACrC,UAAA,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;GAAgB;GAAK,KAAK,OAAO;GAAjC,UAAA,CACE,oBAAC,MAAM,MAAP;IAAY,KAAK,OAAO;IACtB,UAAA,oBAAC,YAAY,SAAb;KAAqB,cAAW;KAAqB,KAAK,OAAO;KAC/D,UAAA,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,EAAoB,OAAM,wBAAyB,CAAA;KAC9B,CAAA;IACJ,CAAA;GACX,CAAA,GACX,QACQ;EACX,CAAA,GAAA,oBAAC,MAAM,KAAP;GAAW,KAAK,OAAO;GACrB,UAAA,oBAAC,MAAM,MAAP;IAAqB;IAAS,KAAK,OAAO;IACxC,UAAA,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAkB,UAAA;IAAqB,CAAA,EACrC,CAAA;GACX,CAAA;EACH,CAAA,CACX,EAAA,CAAA;CACc,CAAA;AAEtB,CACF;AAEA,oBAAoB,cAAc"}
|
|
@@ -1,31 +1,9 @@
|
|
|
1
1
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Icon } from "@chakra-ui/react/icon";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { Table } from "@chakra-ui/react/table";
|
|
4
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Table, useTableStyles } from "@chakra-ui/react/table";
|
|
6
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
7
|
var SortIcon = forwardRef((props, ref) => {
|
|
30
8
|
const { direction, ...rest } = props;
|
|
31
9
|
const upFill = direction === "ascending" ? "currentColor" : "var(--sort-icon-inactive)";
|
|
@@ -57,23 +35,32 @@ var SortIcon = forwardRef((props, ref) => {
|
|
|
57
35
|
});
|
|
58
36
|
});
|
|
59
37
|
SortIcon.displayName = "SortIcon";
|
|
60
|
-
var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) =>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
38
|
+
var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => {
|
|
39
|
+
const styles = useTableStyles();
|
|
40
|
+
const isEndAligned = textAlign === "end";
|
|
41
|
+
const sortIcon = /* @__PURE__ */ jsx(SortIcon, { direction });
|
|
42
|
+
return /* @__PURE__ */ jsx(Table.ColumnHeader, {
|
|
43
|
+
ref,
|
|
44
|
+
"aria-sort": direction === "none" ? void 0 : direction,
|
|
45
|
+
css: styles.sortColumnHeader,
|
|
46
|
+
...rest,
|
|
47
|
+
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
48
|
+
css: styles.sortTrigger,
|
|
49
|
+
justifyContent: isEndAligned ? "flex-end" : void 0,
|
|
50
|
+
onClick: onSort,
|
|
51
|
+
type: "button",
|
|
52
|
+
children: isEndAligned ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
53
|
+
sortIcon,
|
|
54
|
+
" ",
|
|
55
|
+
children
|
|
56
|
+
] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
57
|
+
children,
|
|
58
|
+
" ",
|
|
59
|
+
sortIcon
|
|
60
|
+
] })
|
|
61
|
+
})
|
|
62
|
+
});
|
|
63
|
+
});
|
|
77
64
|
BitkitSortableColumnHeader.displayName = "BitkitSortableColumnHeader";
|
|
78
65
|
//#endregion
|
|
79
66
|
export { BitkitSortableColumnHeader as default };
|
|
@@ -1 +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
|
|
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, useTableStyles } 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 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 const styles = useTableStyles();\n const isEndAligned = textAlign === 'end';\n const sortIcon = <SortIcon direction={direction} />;\n\n return (\n <Table.ColumnHeader\n ref={ref}\n aria-sort={direction === 'none' ? undefined : direction}\n css={styles.sortColumnHeader}\n {...rest}\n >\n {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n <chakra.button\n css={styles.sortTrigger}\n justifyContent={isEndAligned ? 'flex-end' : undefined}\n onClick={onSort}\n type=\"button\"\n >\n {isEndAligned ? (\n <>\n {sortIcon} {children}\n </>\n ) : (\n <>\n {children} {sortIcon}\n </>\n )}\n </chakra.button>\n </Table.ColumnHeader>\n );\n },\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitSortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;CAE/D,OACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;EACjB;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,CACE;;CACD,CAAA;AAEV,CAAC;AAED,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QAAQ;CAC5D,MAAM,SAAS,eAAe;CAC9B,MAAM,eAAe,cAAc;CACnC,MAAM,WAAW,oBAAC,UAAD,EAAqB,UAAY,CAAA;CAElD,OACE,oBAAC,MAAM,cAAP;EACO;EACL,aAAW,cAAc,SAAS,KAAA,IAAY;EAC9C,KAAK,OAAO;EACZ,GAAI;EAGJ,UAAA,oBAAC,OAAO,QAAR;GACE,KAAK,OAAO;GACZ,gBAAgB,eAAe,aAAa,KAAA;GAC5C,SAAS;GACT,MAAK;GAEJ,UAAA,eACC,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA;EAES,CAAA;CACG,CAAA;AAExB,CACF;AAEA,2BAA2B,cAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
1
2
|
import IconChevronRight from "../../icons/IconChevronRight.js";
|
|
2
3
|
import IconFolder from "../../icons/IconFolder.js";
|
|
3
4
|
import IconWarningYellow from "../../icons/IconWarningYellow.js";
|
|
4
|
-
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
5
5
|
import { Box } from "@chakra-ui/react/box";
|
|
6
6
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
7
7
|
import { cloneElement, forwardRef } from "react";
|
|
@@ -1,6 +1,6 @@
|
|
|
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
|
|
3
|
+
export { default as BitkitActionMenu, type BitkitActionMenuGroupProps, type BitkitActionMenuItemProps, type BitkitActionMenuProps, type BitkitActionMenuSeparatorProps, } from './BitkitActionMenu/BitkitActionMenu';
|
|
4
4
|
export { default as BitkitAlert, type BitkitAlertProps } from './BitkitAlert/BitkitAlert';
|
|
5
5
|
export { default as BitkitAvatar, type BitkitAvatarProps } from './BitkitAvatar/BitkitAvatar';
|
|
6
6
|
export { default as BitkitBadge, type BitkitBadgeProps } from './BitkitBadge/BitkitBadge';
|
package/dist/main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import BitkitAccordion_default from "./components/BitkitAccordion/BitkitAccordion.js";
|
|
2
2
|
import { bitkitIcon } from "./icons/bitkitIcon.js";
|
|
3
3
|
import IconAbortCircle from "./icons/IconAbortCircle.js";
|
|
4
4
|
import IconAbortCircleFilled from "./icons/IconAbortCircleFilled.js";
|
|
@@ -286,7 +286,7 @@ import IconXTwitter from "./icons/IconXTwitter.js";
|
|
|
286
286
|
import BitkitLabelTooltip from "./components/BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
287
287
|
import BitkitCloseButton from "./components/BitkitCloseButton/BitkitCloseButton.js";
|
|
288
288
|
import BitkitActionBar from "./components/BitkitActionBar/BitkitActionBar.js";
|
|
289
|
-
import
|
|
289
|
+
import BitkitActionMenu_default from "./components/BitkitActionMenu/BitkitActionMenu.js";
|
|
290
290
|
import { rem } from "./theme/themeUtils.js";
|
|
291
291
|
import BitkitColorButton from "./components/BitkitColorButton/BitkitColorButton.js";
|
|
292
292
|
import BitkitAlert from "./components/BitkitAlert/BitkitAlert.js";
|
|
@@ -373,4 +373,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
|
|
|
373
373
|
import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
|
|
374
374
|
import bitkitTheme from "./theme/index.js";
|
|
375
375
|
import Provider from "./providers/BitkitProvider.js";
|
|
376
|
-
export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, 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, IconBuildHub, IconBuildHubFilled, 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, IconFileYml, 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, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
|
|
376
|
+
export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, 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, IconBuildHub, IconBuildHubFilled, 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, IconFileYml, 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, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
|
|
@@ -2,17 +2,28 @@ declare const menuSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"c
|
|
|
2
2
|
size: {
|
|
3
3
|
lg: {
|
|
4
4
|
item: {
|
|
5
|
+
alignItems: "center";
|
|
5
6
|
paddingY: "12";
|
|
6
7
|
textStyle: "body/lg/regular";
|
|
8
|
+
'&[data-helper]': {
|
|
9
|
+
alignItems: "flex-start";
|
|
10
|
+
paddingY: "8";
|
|
11
|
+
};
|
|
7
12
|
};
|
|
8
13
|
};
|
|
9
14
|
md: {
|
|
10
15
|
item: {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
16
|
+
alignItems: "center";
|
|
17
|
+
minHeight: "40";
|
|
14
18
|
paddingY: "8";
|
|
15
19
|
textStyle: "body/md/regular";
|
|
20
|
+
'&[data-helper]': {
|
|
21
|
+
_icon: {
|
|
22
|
+
marginTop: "2";
|
|
23
|
+
};
|
|
24
|
+
alignItems: "flex-start";
|
|
25
|
+
paddingY: "6";
|
|
26
|
+
};
|
|
16
27
|
};
|
|
17
28
|
};
|
|
18
29
|
};
|
|
@@ -15,13 +15,24 @@ var menuSlotRecipe = defineSlotRecipe({
|
|
|
15
15
|
slots: [...menuAnatomy.keys(), "itemHelper"],
|
|
16
16
|
variants: { size: {
|
|
17
17
|
lg: { item: {
|
|
18
|
+
alignItems: "center",
|
|
18
19
|
paddingY: "12",
|
|
19
|
-
textStyle: "body/lg/regular"
|
|
20
|
+
textStyle: "body/lg/regular",
|
|
21
|
+
"&[data-helper]": {
|
|
22
|
+
alignItems: "flex-start",
|
|
23
|
+
paddingY: "8"
|
|
24
|
+
}
|
|
20
25
|
} },
|
|
21
26
|
md: { item: {
|
|
22
|
-
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
minHeight: "40",
|
|
23
29
|
paddingY: "8",
|
|
24
|
-
textStyle: "body/md/regular"
|
|
30
|
+
textStyle: "body/md/regular",
|
|
31
|
+
"&[data-helper]": {
|
|
32
|
+
_icon: { marginTop: "2" },
|
|
33
|
+
alignItems: "flex-start",
|
|
34
|
+
paddingY: "6"
|
|
35
|
+
}
|
|
25
36
|
} }
|
|
26
37
|
} },
|
|
27
38
|
base: {
|
|
@@ -76,17 +87,18 @@ var menuSlotRecipe = defineSlotRecipe({
|
|
|
76
87
|
_highlighted: {
|
|
77
88
|
background: "button/secondary/bg-hover",
|
|
78
89
|
_active: itemActive
|
|
79
|
-
}
|
|
90
|
+
},
|
|
91
|
+
"& [data-suffix-icon]": { color: "icon/tertiary" }
|
|
80
92
|
},
|
|
81
93
|
itemGroupLabel: {
|
|
82
94
|
textStyle: "heading/h6",
|
|
83
95
|
color: "text/tertiary",
|
|
84
96
|
paddingTop: "12",
|
|
85
97
|
paddingLeft: "16",
|
|
86
|
-
paddingRight: "
|
|
98
|
+
paddingRight: "16",
|
|
87
99
|
paddingBottom: "6",
|
|
88
100
|
display: "flex",
|
|
89
|
-
gap: "
|
|
101
|
+
gap: "8",
|
|
90
102
|
flexDirection: "row",
|
|
91
103
|
alignItems: "center"
|
|
92
104
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n _icon: {\n color: 'icon/primary',\n },\n};\nconst itemActiveDanger: SystemStyleObject = {\n background: 'button/danger-secondary/bg-active',\n color: 'button/danger-secondary/fg-active',\n _icon: {\n color: 'button/danger-secondary/fg-active',\n },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n className: 'menu',\n slots: [...menuAnatomy.keys(), 'itemHelper'],\n variants: {\n size: {\n lg: {\n item: {\n paddingY: '12',\n textStyle: 'body/lg/regular',\n },\n },\n md: {\n item: {\n
|
|
1
|
+
{"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n _icon: {\n color: 'icon/primary',\n },\n};\nconst itemActiveDanger: SystemStyleObject = {\n background: 'button/danger-secondary/bg-active',\n color: 'button/danger-secondary/fg-active',\n _icon: {\n color: 'button/danger-secondary/fg-active',\n },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n className: 'menu',\n slots: [...menuAnatomy.keys(), 'itemHelper'],\n variants: {\n size: {\n lg: {\n item: {\n alignItems: 'center',\n paddingY: '12',\n textStyle: 'body/lg/regular',\n // With a helper line the item aligns to the top of the label and gets tighter padding.\n '&[data-helper]': {\n alignItems: 'flex-start',\n paddingY: '8',\n },\n },\n },\n md: {\n item: {\n alignItems: 'center',\n // The label line (20px) alone is shorter than the designed 40px row.\n minHeight: '40',\n paddingY: '8',\n textStyle: 'body/md/regular',\n '&[data-helper]': {\n _icon: {\n // Optically center the 16px icon against the 20px label line.\n marginTop: '2',\n },\n alignItems: 'flex-start',\n paddingY: '6',\n },\n },\n },\n },\n },\n base: {\n content: {\n // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n zIndex: 'popover',\n borderRadius: '4',\n paddingY: '8',\n border: '1px solid',\n borderColor: 'border/minimal',\n _focusVisible: { outline: 'none' },\n boxShadow: 'elevation/lg',\n background: 'background/primary',\n maxHeight: 'var(--available-height)',\n _open: {\n animationStyle: 'slide-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'slide-fade-out',\n animationDuration: 'faster',\n },\n },\n itemHelper: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n item: {\n _icon: {\n color: 'icon/secondary',\n _active: {\n color: 'icon/primary',\n },\n },\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n userSelect: 'none',\n flexDirection: 'row',\n paddingLeft: '16',\n paddingRight: '24',\n _disabled: {\n cursor: 'not-allowed',\n },\n '&[data-danger]': {\n color: 'button/danger-secondary/fg',\n _icon: {\n color: 'button/danger-secondary/fg',\n },\n _active: itemActiveDanger,\n _highlighted: {\n background: 'button/danger-secondary/bg-hover',\n color: 'button/danger-secondary/fg-hover',\n _active: itemActiveDanger,\n _icon: {\n color: 'button/danger-secondary/fg-hover',\n },\n },\n },\n _active: itemActive,\n _highlighted: {\n background: 'button/secondary/bg-hover',\n _active: itemActive,\n },\n // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n // state — including the destructive one, which overrides `_icon` above.\n '& [data-suffix-icon]': {\n color: 'icon/tertiary',\n },\n },\n itemGroupLabel: {\n textStyle: 'heading/h6',\n color: 'text/tertiary',\n paddingTop: '12',\n paddingLeft: '16',\n paddingRight: '16',\n paddingBottom: '6',\n display: 'flex',\n gap: '8',\n flexDirection: 'row',\n alignItems: 'center',\n },\n separator: {\n color: 'border/minimal',\n marginY: '8',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default menuSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,aAAgC;CACpC,YAAY;CACZ,OAAO,EACL,OAAO,eACT;AACF;AACA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,OAAO;CACP,OAAO,EACL,OAAO,oCACT;AACF;AACA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,CAAC,GAAG,YAAY,KAAK,GAAG,YAAY;CAC3C,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,WAAW;GAEX,kBAAkB;IAChB,YAAY;IACZ,UAAU;GACZ;EACF,EACF;EACA,IAAI,EACF,MAAM;GACJ,YAAY;GAEZ,WAAW;GACX,UAAU;GACV,WAAW;GACX,kBAAkB;IAChB,OAAO,EAEL,WAAW,IACb;IACA,YAAY;IACZ,UAAU;GACZ;EACF,EACF;CACF,EACF;CACA,MAAM;EACJ,SAAS;GAIP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,QAAQ;GACR,aAAa;GACb,eAAe,EAAE,SAAS,OAAO;GACjC,WAAW;GACX,YAAY;GACZ,WAAW;GACX,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,OAAO;IACL,OAAO;IACP,SAAS,EACP,OAAO,eACT;GACF;GACA,QAAQ;GACR,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GACf,aAAa;GACb,cAAc;GACd,WAAW,EACT,QAAQ,cACV;GACA,kBAAkB;IAChB,OAAO;IACP,OAAO,EACL,OAAO,6BACT;IACA,SAAS;IACT,cAAc;KACZ,YAAY;KACZ,OAAO;KACP,SAAS;KACT,OAAO,EACL,OAAO,mCACT;IACF;GACF;GACA,SAAS;GACT,cAAc;IACZ,YAAY;IACZ,SAAS;GACX;GAGA,wBAAwB,EACtB,OAAO,gBACT;EACF;EACA,gBAAgB;GACd,WAAW;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,cAAc;GACd,eAAe;GACf,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
|
|
1
|
+
declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
2
2
|
variant: {
|
|
3
3
|
default: {
|
|
4
4
|
root: {
|
|
5
|
-
borderColor: "border/
|
|
5
|
+
borderColor: "border/regular";
|
|
6
6
|
borderRadius: "4";
|
|
7
7
|
borderStyle: "solid";
|
|
8
8
|
borderWidth: "1";
|
|
@@ -73,6 +73,9 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
73
73
|
marginBlockEnd: "24";
|
|
74
74
|
};
|
|
75
75
|
columnHeader: {
|
|
76
|
+
'& > :where(label):only-child': {
|
|
77
|
+
display: string;
|
|
78
|
+
};
|
|
76
79
|
borderBottomStyle: "solid";
|
|
77
80
|
borderBottomWidth: "1";
|
|
78
81
|
color: "text/primary";
|
|
@@ -82,14 +85,17 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
82
85
|
verticalAlign: "middle";
|
|
83
86
|
};
|
|
84
87
|
cell: {
|
|
85
|
-
borderBottomStyle: "solid";
|
|
86
|
-
borderBottomWidth: "1";
|
|
87
|
-
verticalAlign: "middle";
|
|
88
88
|
'tfoot &': {
|
|
89
89
|
borderBottomWidth: number;
|
|
90
90
|
borderTopStyle: "solid";
|
|
91
91
|
borderTopWidth: "1";
|
|
92
92
|
};
|
|
93
|
+
'& > :where(label):only-child': {
|
|
94
|
+
display: string;
|
|
95
|
+
};
|
|
96
|
+
borderBottomStyle: "solid";
|
|
97
|
+
borderBottomWidth: "1";
|
|
98
|
+
verticalAlign: "middle";
|
|
93
99
|
};
|
|
94
100
|
body: {
|
|
95
101
|
'& :where(tr)': {
|
|
@@ -112,7 +118,7 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
112
118
|
caption: {
|
|
113
119
|
display: "block";
|
|
114
120
|
padding: "16";
|
|
115
|
-
backgroundColor: "background/
|
|
121
|
+
backgroundColor: "background/secondary";
|
|
116
122
|
borderBottomColor: "border/minimal";
|
|
117
123
|
borderBottomStyle: "solid";
|
|
118
124
|
borderBottomWidth: "1";
|
|
@@ -152,9 +158,16 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
152
158
|
content: "attr(data-label)";
|
|
153
159
|
flexShrink: number;
|
|
154
160
|
fontWeight: "semibold";
|
|
155
|
-
|
|
161
|
+
marginInlineEnd: "16";
|
|
156
162
|
width: "96";
|
|
157
163
|
};
|
|
164
|
+
'tfoot &': {
|
|
165
|
+
display: "block";
|
|
166
|
+
paddingInline: number;
|
|
167
|
+
_before: {
|
|
168
|
+
content: "none";
|
|
169
|
+
};
|
|
170
|
+
};
|
|
158
171
|
};
|
|
159
172
|
footer: {
|
|
160
173
|
borderTopStyle: "solid";
|
|
@@ -2,9 +2,20 @@ import { rem } from "../themeUtils.js";
|
|
|
2
2
|
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
3
|
import { tableAnatomy } from "@chakra-ui/react/anatomy";
|
|
4
4
|
//#region lib/theme/slot-recipes/Table.recipe.ts
|
|
5
|
+
var controlOnlyCell = { "& > :where(label):only-child": { display: "flex" } };
|
|
5
6
|
var tableSlotRecipe = defineSlotRecipe({
|
|
6
7
|
className: "table",
|
|
7
|
-
slots:
|
|
8
|
+
slots: [
|
|
9
|
+
...tableAnatomy.keys(),
|
|
10
|
+
"expandCell",
|
|
11
|
+
"expandTrigger",
|
|
12
|
+
"expandableRow",
|
|
13
|
+
"expandedCell",
|
|
14
|
+
"expandedContent",
|
|
15
|
+
"expandedRow",
|
|
16
|
+
"sortColumnHeader",
|
|
17
|
+
"sortTrigger"
|
|
18
|
+
],
|
|
8
19
|
base: {
|
|
9
20
|
root: {
|
|
10
21
|
fontVariantNumeric: "lining-nums tabular-nums",
|
|
@@ -19,13 +30,71 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
19
30
|
cell: {
|
|
20
31
|
color: "text/body",
|
|
21
32
|
textStyle: "body/md/regular"
|
|
33
|
+
},
|
|
34
|
+
expandCell: {
|
|
35
|
+
paddingBlock: 0,
|
|
36
|
+
paddingInline: 0,
|
|
37
|
+
verticalAlign: "middle",
|
|
38
|
+
width: "48"
|
|
39
|
+
},
|
|
40
|
+
expandTrigger: {
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
background: "none",
|
|
43
|
+
border: "none",
|
|
44
|
+
cursor: "pointer",
|
|
45
|
+
display: "flex",
|
|
46
|
+
height: "32",
|
|
47
|
+
justifyContent: "center",
|
|
48
|
+
marginInlineStart: "12",
|
|
49
|
+
padding: 0,
|
|
50
|
+
width: "32"
|
|
51
|
+
},
|
|
52
|
+
expandableRow: { "& > td": { borderBottomWidth: 0 } },
|
|
53
|
+
expandedCell: {
|
|
54
|
+
height: 0,
|
|
55
|
+
paddingBlock: 0,
|
|
56
|
+
paddingInline: 0
|
|
57
|
+
},
|
|
58
|
+
expandedContent: {
|
|
59
|
+
borderBlockStartColor: "border/minimal",
|
|
60
|
+
borderBlockStartStyle: "solid",
|
|
61
|
+
borderBlockStartWidth: "1",
|
|
62
|
+
marginInlineEnd: "16",
|
|
63
|
+
marginInlineStart: "48",
|
|
64
|
+
paddingBlockEnd: "24",
|
|
65
|
+
paddingBlockStart: "16",
|
|
66
|
+
paddingInlineEnd: "16",
|
|
67
|
+
paddingInlineStart: "12"
|
|
68
|
+
},
|
|
69
|
+
expandedRow: { _hover: { background: "none" } },
|
|
70
|
+
sortColumnHeader: {
|
|
71
|
+
paddingBlock: 0,
|
|
72
|
+
paddingInline: 0
|
|
73
|
+
},
|
|
74
|
+
sortTrigger: {
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
appearance: "none",
|
|
77
|
+
background: "none",
|
|
78
|
+
border: "none",
|
|
79
|
+
color: "inherit",
|
|
80
|
+
cursor: "pointer",
|
|
81
|
+
display: "flex",
|
|
82
|
+
font: "inherit",
|
|
83
|
+
gap: "8",
|
|
84
|
+
height: "full",
|
|
85
|
+
paddingBlock: "12",
|
|
86
|
+
paddingInline: "16",
|
|
87
|
+
userSelect: "none",
|
|
88
|
+
width: "full",
|
|
89
|
+
_focusVisible: { outlineOffset: "-3px" },
|
|
90
|
+
_hover: { backgroundColor: "background/active" }
|
|
22
91
|
}
|
|
23
92
|
},
|
|
24
93
|
variants: {
|
|
25
94
|
variant: {
|
|
26
95
|
default: {
|
|
27
96
|
root: {
|
|
28
|
-
borderColor: "border/
|
|
97
|
+
borderColor: "border/regular",
|
|
29
98
|
borderRadius: "4",
|
|
30
99
|
borderStyle: "solid",
|
|
31
100
|
borderWidth: "1",
|
|
@@ -80,12 +149,14 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
80
149
|
fontWeight: "bold",
|
|
81
150
|
textAlign: "start",
|
|
82
151
|
textStyle: "heading/h5",
|
|
83
|
-
verticalAlign: "middle"
|
|
152
|
+
verticalAlign: "middle",
|
|
153
|
+
...controlOnlyCell
|
|
84
154
|
},
|
|
85
155
|
cell: {
|
|
86
156
|
borderBottomStyle: "solid",
|
|
87
157
|
borderBottomWidth: "1",
|
|
88
158
|
verticalAlign: "middle",
|
|
159
|
+
...controlOnlyCell,
|
|
89
160
|
"tfoot &": {
|
|
90
161
|
borderBottomWidth: 0,
|
|
91
162
|
borderTopStyle: "solid",
|
|
@@ -105,7 +176,7 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
105
176
|
caption: {
|
|
106
177
|
display: "block",
|
|
107
178
|
padding: "16",
|
|
108
|
-
backgroundColor: "background/
|
|
179
|
+
backgroundColor: "background/secondary",
|
|
109
180
|
borderBottomColor: "border/minimal",
|
|
110
181
|
borderBottomStyle: "solid",
|
|
111
182
|
borderBottomWidth: "1"
|
|
@@ -141,8 +212,13 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
141
212
|
content: "attr(data-label)",
|
|
142
213
|
flexShrink: 0,
|
|
143
214
|
fontWeight: "semibold",
|
|
144
|
-
|
|
215
|
+
marginInlineEnd: "16",
|
|
145
216
|
width: "96"
|
|
217
|
+
},
|
|
218
|
+
"tfoot &": {
|
|
219
|
+
display: "block",
|
|
220
|
+
paddingInline: 0,
|
|
221
|
+
_before: { content: "none" }
|
|
146
222
|
}
|
|
147
223
|
},
|
|
148
224
|
footer: {
|
|
@@ -153,15 +229,22 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
153
229
|
}
|
|
154
230
|
}
|
|
155
231
|
},
|
|
156
|
-
compoundVariants: [
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
232
|
+
compoundVariants: [
|
|
233
|
+
{
|
|
234
|
+
css: { row: { borderBottomColor: "border/regular" } },
|
|
235
|
+
layout: "stacked",
|
|
236
|
+
variant: "borderless"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
css: { cell: { height: "auto" } },
|
|
240
|
+
layout: "stacked"
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
css: { body: { "& :where(tr)": { _hover: { backgroundColor: "background/secondary" } } } },
|
|
244
|
+
layout: "table",
|
|
245
|
+
rowHover: true
|
|
246
|
+
}
|
|
247
|
+
],
|
|
165
248
|
defaultVariants: {
|
|
166
249
|
layout: "table",
|
|
167
250
|
rowHover: true,
|