@bitrise/bitkit-v2 0.3.176 → 0.3.177
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitTable/BitkitExpandableRow.d.ts +9 -0
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.d.ts +8 -0
- package/dist/theme/slot-recipes/Table.recipe.d.ts +134 -1
- package/dist/theme/slot-recipes/Table.recipe.js +132 -14
- package/dist/theme/slot-recipes/index.d.ts +134 -1
- package/package.json +5 -5
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface BitkitExpandableRowProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
colSpan: number;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
expandedContent: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare const BitkitExpandableRow: import('react').ForwardRefExoticComponent<BitkitExpandableRowProps & import('react').RefAttributes<HTMLTableRowElement>>;
|
|
9
|
+
export default BitkitExpandableRow;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Table } from '@chakra-ui/react/table';
|
|
2
|
+
type SortDirection = 'ascending' | 'descending' | 'none';
|
|
3
|
+
export interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {
|
|
4
|
+
direction: SortDirection;
|
|
5
|
+
onSort: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const BitkitSortableColumnHeader: import('react').ForwardRefExoticComponent<BitkitSortableColumnHeaderProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
8
|
+
export default BitkitSortableColumnHeader;
|
|
@@ -1,2 +1,135 @@
|
|
|
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" | "columnHeader", {
|
|
2
|
+
variant: {
|
|
3
|
+
default: {
|
|
4
|
+
root: {
|
|
5
|
+
borderColor: "border/minimal";
|
|
6
|
+
borderRadius: "4";
|
|
7
|
+
borderStyle: "solid";
|
|
8
|
+
borderWidth: "1px";
|
|
9
|
+
overflow: "hidden";
|
|
10
|
+
};
|
|
11
|
+
header: {
|
|
12
|
+
'& :where(th)': {
|
|
13
|
+
backgroundColor: "background/tertiary";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
columnHeader: {
|
|
17
|
+
borderBottomColor: "border/minimal";
|
|
18
|
+
paddingBlock: "12";
|
|
19
|
+
paddingInline: "16";
|
|
20
|
+
};
|
|
21
|
+
cell: {
|
|
22
|
+
borderBottomColor: "border/minimal";
|
|
23
|
+
paddingInline: "16";
|
|
24
|
+
};
|
|
25
|
+
footer: {
|
|
26
|
+
borderTopColor: "border/minimal";
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
borderless: {
|
|
30
|
+
columnHeader: {
|
|
31
|
+
borderBottomColor: "border/regular";
|
|
32
|
+
padding: "12";
|
|
33
|
+
};
|
|
34
|
+
cell: {
|
|
35
|
+
borderBottomColor: "border/regular";
|
|
36
|
+
paddingInline: "12";
|
|
37
|
+
};
|
|
38
|
+
footer: {
|
|
39
|
+
borderTopColor: "border/regular";
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
layout: {
|
|
44
|
+
table: {
|
|
45
|
+
root: {
|
|
46
|
+
borderCollapse: "separate";
|
|
47
|
+
borderSpacing: "0";
|
|
48
|
+
};
|
|
49
|
+
caption: {
|
|
50
|
+
marginBlockEnd: "24";
|
|
51
|
+
};
|
|
52
|
+
columnHeader: {
|
|
53
|
+
borderBottomStyle: "solid";
|
|
54
|
+
borderBottomWidth: "1px";
|
|
55
|
+
color: "text/primary";
|
|
56
|
+
fontWeight: "bold";
|
|
57
|
+
textAlign: "start";
|
|
58
|
+
textStyle: "heading/h5";
|
|
59
|
+
verticalAlign: "middle";
|
|
60
|
+
};
|
|
61
|
+
cell: {
|
|
62
|
+
borderBottomStyle: "solid";
|
|
63
|
+
borderBottomWidth: "1px";
|
|
64
|
+
paddingBlock: "20";
|
|
65
|
+
verticalAlign: "middle";
|
|
66
|
+
};
|
|
67
|
+
body: {
|
|
68
|
+
'& :where(tr)': {
|
|
69
|
+
_hover: {
|
|
70
|
+
backgroundColor: "background/hover";
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
'& :where(tr:last-child) td': {
|
|
74
|
+
borderBottomWidth: "0";
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
stacked: {
|
|
79
|
+
root: {
|
|
80
|
+
display: "block";
|
|
81
|
+
};
|
|
82
|
+
caption: {
|
|
83
|
+
display: "block";
|
|
84
|
+
padding: "16";
|
|
85
|
+
backgroundColor: "background/tertiary";
|
|
86
|
+
borderBottomColor: "border/minimal";
|
|
87
|
+
borderBottomStyle: "solid";
|
|
88
|
+
borderBottomWidth: "1px";
|
|
89
|
+
};
|
|
90
|
+
header: {
|
|
91
|
+
borderWidth: "0";
|
|
92
|
+
clip: "rect(0, 0, 0, 0)";
|
|
93
|
+
height: "1";
|
|
94
|
+
margin: "-1px";
|
|
95
|
+
overflow: "hidden";
|
|
96
|
+
padding: number;
|
|
97
|
+
position: "absolute";
|
|
98
|
+
whiteSpace: "nowrap";
|
|
99
|
+
width: "1";
|
|
100
|
+
};
|
|
101
|
+
body: {
|
|
102
|
+
display: "block";
|
|
103
|
+
};
|
|
104
|
+
row: {
|
|
105
|
+
borderBottomColor: "border/minimal";
|
|
106
|
+
borderBottomStyle: "solid";
|
|
107
|
+
borderBottomWidth: "1px";
|
|
108
|
+
display: "block";
|
|
109
|
+
paddingBlock: "12";
|
|
110
|
+
'&:last-child': {
|
|
111
|
+
borderBottomWidth: "0";
|
|
112
|
+
};
|
|
113
|
+
};
|
|
114
|
+
cell: {
|
|
115
|
+
alignItems: "center";
|
|
116
|
+
display: "flex";
|
|
117
|
+
minHeight: "48";
|
|
118
|
+
paddingInline: "16";
|
|
119
|
+
_before: {
|
|
120
|
+
alignSelf: "center";
|
|
121
|
+
color: "text/primary";
|
|
122
|
+
content: "attr(data-label)";
|
|
123
|
+
flexShrink: number;
|
|
124
|
+
fontWeight: "semibold";
|
|
125
|
+
paddingInlineEnd: "16";
|
|
126
|
+
width: "96";
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
footer: {
|
|
130
|
+
display: "block";
|
|
131
|
+
};
|
|
132
|
+
};
|
|
133
|
+
};
|
|
134
|
+
}>;
|
|
2
135
|
export default tableSlotRecipe;
|
|
@@ -6,24 +6,142 @@ var n = e({
|
|
|
6
6
|
slots: t.keys(),
|
|
7
7
|
base: {
|
|
8
8
|
root: {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
fontVariantNumeric: "lining-nums tabular-nums",
|
|
10
|
+
textAlign: "start",
|
|
11
|
+
width: "full"
|
|
12
12
|
},
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
padding: "8",
|
|
18
|
-
textAlign: "left",
|
|
19
|
-
textStyle: "heading/h5"
|
|
13
|
+
caption: {
|
|
14
|
+
captionSide: "top !important",
|
|
15
|
+
textAlign: "start",
|
|
16
|
+
"& > * + *": { marginBlockStart: "4" }
|
|
20
17
|
},
|
|
21
18
|
cell: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
padding: "8"
|
|
19
|
+
color: "text/body",
|
|
20
|
+
textStyle: "body/md/regular"
|
|
25
21
|
},
|
|
26
|
-
|
|
22
|
+
footer: {
|
|
23
|
+
borderTopStyle: "solid",
|
|
24
|
+
borderTopWidth: "1px"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
variants: {
|
|
28
|
+
variant: {
|
|
29
|
+
default: {
|
|
30
|
+
root: {
|
|
31
|
+
borderColor: "border/minimal",
|
|
32
|
+
borderRadius: "4",
|
|
33
|
+
borderStyle: "solid",
|
|
34
|
+
borderWidth: "1px",
|
|
35
|
+
overflow: "hidden"
|
|
36
|
+
},
|
|
37
|
+
header: { "& :where(th)": { backgroundColor: "background/tertiary" } },
|
|
38
|
+
columnHeader: {
|
|
39
|
+
borderBottomColor: "border/minimal",
|
|
40
|
+
paddingBlock: "12",
|
|
41
|
+
paddingInline: "16"
|
|
42
|
+
},
|
|
43
|
+
cell: {
|
|
44
|
+
borderBottomColor: "border/minimal",
|
|
45
|
+
paddingInline: "16"
|
|
46
|
+
},
|
|
47
|
+
footer: { borderTopColor: "border/minimal" }
|
|
48
|
+
},
|
|
49
|
+
borderless: {
|
|
50
|
+
columnHeader: {
|
|
51
|
+
borderBottomColor: "border/regular",
|
|
52
|
+
padding: "12"
|
|
53
|
+
},
|
|
54
|
+
cell: {
|
|
55
|
+
borderBottomColor: "border/regular",
|
|
56
|
+
paddingInline: "12"
|
|
57
|
+
},
|
|
58
|
+
footer: { borderTopColor: "border/regular" }
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
layout: {
|
|
62
|
+
table: {
|
|
63
|
+
root: {
|
|
64
|
+
borderCollapse: "separate",
|
|
65
|
+
borderSpacing: "0"
|
|
66
|
+
},
|
|
67
|
+
caption: { marginBlockEnd: "24" },
|
|
68
|
+
columnHeader: {
|
|
69
|
+
borderBottomStyle: "solid",
|
|
70
|
+
borderBottomWidth: "1px",
|
|
71
|
+
color: "text/primary",
|
|
72
|
+
fontWeight: "bold",
|
|
73
|
+
textAlign: "start",
|
|
74
|
+
textStyle: "heading/h5",
|
|
75
|
+
verticalAlign: "middle"
|
|
76
|
+
},
|
|
77
|
+
cell: {
|
|
78
|
+
borderBottomStyle: "solid",
|
|
79
|
+
borderBottomWidth: "1px",
|
|
80
|
+
paddingBlock: "20",
|
|
81
|
+
verticalAlign: "middle"
|
|
82
|
+
},
|
|
83
|
+
body: {
|
|
84
|
+
"& :where(tr)": { _hover: { backgroundColor: "background/hover" } },
|
|
85
|
+
"& :where(tr:last-child) td": { borderBottomWidth: "0" }
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
stacked: {
|
|
89
|
+
root: { display: "block" },
|
|
90
|
+
caption: {
|
|
91
|
+
display: "block",
|
|
92
|
+
padding: "16",
|
|
93
|
+
backgroundColor: "background/tertiary",
|
|
94
|
+
borderBottomColor: "border/minimal",
|
|
95
|
+
borderBottomStyle: "solid",
|
|
96
|
+
borderBottomWidth: "1px"
|
|
97
|
+
},
|
|
98
|
+
header: {
|
|
99
|
+
borderWidth: "0",
|
|
100
|
+
clip: "rect(0, 0, 0, 0)",
|
|
101
|
+
height: "1",
|
|
102
|
+
margin: "-1px",
|
|
103
|
+
overflow: "hidden",
|
|
104
|
+
padding: 0,
|
|
105
|
+
position: "absolute",
|
|
106
|
+
whiteSpace: "nowrap",
|
|
107
|
+
width: "1"
|
|
108
|
+
},
|
|
109
|
+
body: { display: "block" },
|
|
110
|
+
row: {
|
|
111
|
+
borderBottomColor: "border/minimal",
|
|
112
|
+
borderBottomStyle: "solid",
|
|
113
|
+
borderBottomWidth: "1px",
|
|
114
|
+
display: "block",
|
|
115
|
+
paddingBlock: "12",
|
|
116
|
+
"&:last-child": { borderBottomWidth: "0" }
|
|
117
|
+
},
|
|
118
|
+
cell: {
|
|
119
|
+
alignItems: "center",
|
|
120
|
+
display: "flex",
|
|
121
|
+
minHeight: "48",
|
|
122
|
+
paddingInline: "16",
|
|
123
|
+
_before: {
|
|
124
|
+
alignSelf: "center",
|
|
125
|
+
color: "text/primary",
|
|
126
|
+
content: "attr(data-label)",
|
|
127
|
+
flexShrink: 0,
|
|
128
|
+
fontWeight: "semibold",
|
|
129
|
+
paddingInlineEnd: "16",
|
|
130
|
+
width: "96"
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
footer: { display: "block" }
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
compoundVariants: [{
|
|
138
|
+
css: { row: { borderBottomColor: "border/regular" } },
|
|
139
|
+
layout: "stacked",
|
|
140
|
+
variant: "borderless"
|
|
141
|
+
}],
|
|
142
|
+
defaultVariants: {
|
|
143
|
+
layout: "table",
|
|
144
|
+
variant: "default"
|
|
27
145
|
}
|
|
28
146
|
});
|
|
29
147
|
//#endregion
|
|
@@ -928,7 +928,140 @@ declare const slotRecipes: {
|
|
|
928
928
|
};
|
|
929
929
|
};
|
|
930
930
|
}>;
|
|
931
|
-
table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader",
|
|
931
|
+
table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
|
|
932
|
+
variant: {
|
|
933
|
+
default: {
|
|
934
|
+
root: {
|
|
935
|
+
borderColor: "border/minimal";
|
|
936
|
+
borderRadius: "4";
|
|
937
|
+
borderStyle: "solid";
|
|
938
|
+
borderWidth: "1px";
|
|
939
|
+
overflow: "hidden";
|
|
940
|
+
};
|
|
941
|
+
header: {
|
|
942
|
+
'& :where(th)': {
|
|
943
|
+
backgroundColor: "background/tertiary";
|
|
944
|
+
};
|
|
945
|
+
};
|
|
946
|
+
columnHeader: {
|
|
947
|
+
borderBottomColor: "border/minimal";
|
|
948
|
+
paddingBlock: "12";
|
|
949
|
+
paddingInline: "16";
|
|
950
|
+
};
|
|
951
|
+
cell: {
|
|
952
|
+
borderBottomColor: "border/minimal";
|
|
953
|
+
paddingInline: "16";
|
|
954
|
+
};
|
|
955
|
+
footer: {
|
|
956
|
+
borderTopColor: "border/minimal";
|
|
957
|
+
};
|
|
958
|
+
};
|
|
959
|
+
borderless: {
|
|
960
|
+
columnHeader: {
|
|
961
|
+
borderBottomColor: "border/regular";
|
|
962
|
+
padding: "12";
|
|
963
|
+
};
|
|
964
|
+
cell: {
|
|
965
|
+
borderBottomColor: "border/regular";
|
|
966
|
+
paddingInline: "12";
|
|
967
|
+
};
|
|
968
|
+
footer: {
|
|
969
|
+
borderTopColor: "border/regular";
|
|
970
|
+
};
|
|
971
|
+
};
|
|
972
|
+
};
|
|
973
|
+
layout: {
|
|
974
|
+
table: {
|
|
975
|
+
root: {
|
|
976
|
+
borderCollapse: "separate";
|
|
977
|
+
borderSpacing: "0";
|
|
978
|
+
};
|
|
979
|
+
caption: {
|
|
980
|
+
marginBlockEnd: "24";
|
|
981
|
+
};
|
|
982
|
+
columnHeader: {
|
|
983
|
+
borderBottomStyle: "solid";
|
|
984
|
+
borderBottomWidth: "1px";
|
|
985
|
+
color: "text/primary";
|
|
986
|
+
fontWeight: "bold";
|
|
987
|
+
textAlign: "start";
|
|
988
|
+
textStyle: "heading/h5";
|
|
989
|
+
verticalAlign: "middle";
|
|
990
|
+
};
|
|
991
|
+
cell: {
|
|
992
|
+
borderBottomStyle: "solid";
|
|
993
|
+
borderBottomWidth: "1px";
|
|
994
|
+
paddingBlock: "20";
|
|
995
|
+
verticalAlign: "middle";
|
|
996
|
+
};
|
|
997
|
+
body: {
|
|
998
|
+
'& :where(tr)': {
|
|
999
|
+
_hover: {
|
|
1000
|
+
backgroundColor: "background/hover";
|
|
1001
|
+
};
|
|
1002
|
+
};
|
|
1003
|
+
'& :where(tr:last-child) td': {
|
|
1004
|
+
borderBottomWidth: "0";
|
|
1005
|
+
};
|
|
1006
|
+
};
|
|
1007
|
+
};
|
|
1008
|
+
stacked: {
|
|
1009
|
+
root: {
|
|
1010
|
+
display: "block";
|
|
1011
|
+
};
|
|
1012
|
+
caption: {
|
|
1013
|
+
display: "block";
|
|
1014
|
+
padding: "16";
|
|
1015
|
+
backgroundColor: "background/tertiary";
|
|
1016
|
+
borderBottomColor: "border/minimal";
|
|
1017
|
+
borderBottomStyle: "solid";
|
|
1018
|
+
borderBottomWidth: "1px";
|
|
1019
|
+
};
|
|
1020
|
+
header: {
|
|
1021
|
+
borderWidth: "0";
|
|
1022
|
+
clip: "rect(0, 0, 0, 0)";
|
|
1023
|
+
height: "1";
|
|
1024
|
+
margin: "-1px";
|
|
1025
|
+
overflow: "hidden";
|
|
1026
|
+
padding: number;
|
|
1027
|
+
position: "absolute";
|
|
1028
|
+
whiteSpace: "nowrap";
|
|
1029
|
+
width: "1";
|
|
1030
|
+
};
|
|
1031
|
+
body: {
|
|
1032
|
+
display: "block";
|
|
1033
|
+
};
|
|
1034
|
+
row: {
|
|
1035
|
+
borderBottomColor: "border/minimal";
|
|
1036
|
+
borderBottomStyle: "solid";
|
|
1037
|
+
borderBottomWidth: "1px";
|
|
1038
|
+
display: "block";
|
|
1039
|
+
paddingBlock: "12";
|
|
1040
|
+
'&:last-child': {
|
|
1041
|
+
borderBottomWidth: "0";
|
|
1042
|
+
};
|
|
1043
|
+
};
|
|
1044
|
+
cell: {
|
|
1045
|
+
alignItems: "center";
|
|
1046
|
+
display: "flex";
|
|
1047
|
+
minHeight: "48";
|
|
1048
|
+
paddingInline: "16";
|
|
1049
|
+
_before: {
|
|
1050
|
+
alignSelf: "center";
|
|
1051
|
+
color: "text/primary";
|
|
1052
|
+
content: "attr(data-label)";
|
|
1053
|
+
flexShrink: number;
|
|
1054
|
+
fontWeight: "semibold";
|
|
1055
|
+
paddingInlineEnd: "16";
|
|
1056
|
+
width: "96";
|
|
1057
|
+
};
|
|
1058
|
+
};
|
|
1059
|
+
footer: {
|
|
1060
|
+
display: "block";
|
|
1061
|
+
};
|
|
1062
|
+
};
|
|
1063
|
+
};
|
|
1064
|
+
}>;
|
|
932
1065
|
tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
|
|
933
1066
|
variant: {
|
|
934
1067
|
line: {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.177",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@figma-export/output-components-as-svg": "^6.4.0",
|
|
61
61
|
"@figma-export/transform-svg-with-svgo": "^6.4.0",
|
|
62
62
|
"@google-cloud/storage": "^7.19.0",
|
|
63
|
-
"@storybook/addon-docs": "10.3.
|
|
63
|
+
"@storybook/addon-docs": "10.3.5",
|
|
64
64
|
"@storybook/addon-mcp": "^0.5.0",
|
|
65
|
-
"@storybook/react-vite": "10.3.
|
|
65
|
+
"@storybook/react-vite": "10.3.5",
|
|
66
66
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
67
67
|
"@types/node": "^25.5.2",
|
|
68
68
|
"@types/react": "^19.2.14",
|
|
@@ -73,10 +73,10 @@
|
|
|
73
73
|
"react": "^19.2.4",
|
|
74
74
|
"react-dom": "^19.2.4",
|
|
75
75
|
"release-it": "^19.2.4",
|
|
76
|
-
"storybook": "10.3.
|
|
76
|
+
"storybook": "10.3.5",
|
|
77
77
|
"tsx": "^4.21.0",
|
|
78
78
|
"typescript": "^6.0.2",
|
|
79
|
-
"vite": "^8.0.
|
|
79
|
+
"vite": "^8.0.7",
|
|
80
80
|
"vite-plugin-dts": "^4.5.4",
|
|
81
81
|
"vite-plugin-svgr": "^5.2.0"
|
|
82
82
|
},
|