@mindlogic-ai/logician-ui 3.1.0-alpha.6 → 3.1.0-alpha.7
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/Table/ExpandingTr/ExpandingTr.types.d.ts +1 -1
- package/dist/components/Table/ExpandingTr/ExpandingTr.types.d.ts.map +1 -1
- package/dist/components/Table/Table.styles.d.ts +1 -1
- package/dist/components/Table/Table.styles.d.ts.map +1 -1
- package/dist/components/Table/Table.styles.js +5 -2
- package/dist/components/Table/Table.styles.js.map +1 -1
- package/dist/components/Table/Table.styles.mjs +5 -2
- package/dist/components/Table/Table.styles.mjs.map +1 -1
- package/dist/components/Table/Table.types.d.ts +13 -0
- package/dist/components/Table/Table.types.d.ts.map +1 -1
- package/dist/components/Table/Tbody.d.ts.map +1 -1
- package/dist/components/Table/Tbody.js +2 -8
- package/dist/components/Table/Tbody.js.map +1 -1
- package/dist/components/Table/Tbody.mjs +2 -8
- package/dist/components/Table/Tbody.mjs.map +1 -1
- package/dist/components/Table/Th.d.ts.map +1 -1
- package/dist/components/Table/Th.js +1 -1
- package/dist/components/Table/Th.js.map +1 -1
- package/dist/components/Table/Th.mjs +1 -1
- package/dist/components/Table/Th.mjs.map +1 -1
- package/dist/components/Table/Thead.d.ts +2 -2
- package/dist/components/Table/Thead.d.ts.map +1 -1
- package/dist/components/Table/Thead.js +2 -2
- package/dist/components/Table/Thead.js.map +1 -1
- package/dist/components/Table/Thead.mjs +2 -2
- package/dist/components/Table/Thead.mjs.map +1 -1
- package/dist/components/Table/Tr.d.ts +10 -2
- package/dist/components/Table/Tr.d.ts.map +1 -1
- package/dist/components/Table/Tr.js +14 -3
- package/dist/components/Table/Tr.js.map +1 -1
- package/dist/components/Table/Tr.mjs +14 -3
- package/dist/components/Table/Tr.mjs.map +1 -1
- package/dist/theme/colors.d.ts +31 -1
- package/dist/theme/colors.d.ts.map +1 -1
- package/dist/theme/colors.js +21 -0
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/colors.mjs +21 -0
- package/dist/theme/colors.mjs.map +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +4 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +4 -0
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/recipes/table.d.ts +19 -0
- package/dist/theme/recipes/table.d.ts.map +1 -0
- package/dist/theme/recipes/table.js +97 -0
- package/dist/theme/recipes/table.js.map +1 -0
- package/dist/theme/recipes/table.mjs +95 -0
- package/dist/theme/recipes/table.mjs.map +1 -0
- package/package.json +1 -1
- package/src/components/Table/ExpandingTr/ExpandingTr.types.ts +1 -1
- package/src/components/Table/Table.stories.tsx +104 -0
- package/src/components/Table/Table.styles.ts +5 -2
- package/src/components/Table/Table.types.ts +16 -0
- package/src/components/Table/Tbody.tsx +2 -20
- package/src/components/Table/Th.tsx +2 -1
- package/src/components/Table/Thead.tsx +4 -2
- package/src/components/Table/Tr.tsx +31 -3
- package/src/theme/SemanticTokens.mdx +3 -0
- package/src/theme/colors.ts +30 -1
- package/src/theme/index.ts +4 -0
- package/src/theme/recipes/table.ts +91 -0
package/dist/theme/index.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
var colors = require('./colors.js');
|
|
8
8
|
var global = require('./global.js');
|
|
9
|
+
var table = require('./recipes/table.js');
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Shared textStyle value objects for DRY principle
|
|
@@ -239,6 +240,9 @@ const config = react.defineConfig({
|
|
|
239
240
|
colors: colors.semanticTokens.colors,
|
|
240
241
|
},
|
|
241
242
|
textStyles,
|
|
243
|
+
slotRecipes: {
|
|
244
|
+
table: table.tableSlotRecipe,
|
|
245
|
+
},
|
|
242
246
|
},
|
|
243
247
|
});
|
|
244
248
|
const system = react.createSystem(react.defaultConfig, config);
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":["defineTextStyles","defineConfig","globalCss","colors","semanticTokens","createSystem","defaultConfig"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":["defineTextStyles","defineConfig","globalCss","colors","semanticTokens","tableSlotRecipe","createSystem","defaultConfig"],"mappings":"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"}
|
package/dist/theme/index.mjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { defineTextStyles, defineConfig, createSystem, defaultConfig } from '@chakra-ui/react';
|
|
3
3
|
import { semanticTokens, colors } from './colors.mjs';
|
|
4
4
|
import { globalCss } from './global.mjs';
|
|
5
|
+
import { tableSlotRecipe } from './recipes/table.mjs';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* Shared textStyle value objects for DRY principle
|
|
@@ -235,6 +236,9 @@ const config = defineConfig({
|
|
|
235
236
|
colors: semanticTokens.colors,
|
|
236
237
|
},
|
|
237
238
|
textStyles,
|
|
239
|
+
slotRecipes: {
|
|
240
|
+
table: tableSlotRecipe,
|
|
241
|
+
},
|
|
238
242
|
},
|
|
239
243
|
});
|
|
240
244
|
const system = createSystem(defaultConfig, config);
|
package/dist/theme/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Logician overrides for Chakra's `table` slot recipe.
|
|
3
|
+
*
|
|
4
|
+
* Merged on top of Chakra's default table recipe by `createSystem`, so only
|
|
5
|
+
* the deltas live here. Everything uses semantic (mode-aware) tokens so a
|
|
6
|
+
* no-prop <Table> renders the correct header/border/text/hover in both light
|
|
7
|
+
* and dark mode — consumers should only override for genuine per-row state
|
|
8
|
+
* or layout.
|
|
9
|
+
*/
|
|
10
|
+
export declare const tableSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"body" | "header" | "cell" | "row" | "root" | "columnHeader", {
|
|
11
|
+
variant: {
|
|
12
|
+
line: {
|
|
13
|
+
row: {
|
|
14
|
+
bg: "transparent";
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
}>;
|
|
19
|
+
//# sourceMappingURL=table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/theme/recipes/table.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;;;;;;;;EA+E1B,CAAC"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var react = require('@chakra-ui/react');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Logician overrides for Chakra's `table` slot recipe.
|
|
8
|
+
*
|
|
9
|
+
* Merged on top of Chakra's default table recipe by `createSystem`, so only
|
|
10
|
+
* the deltas live here. Everything uses semantic (mode-aware) tokens so a
|
|
11
|
+
* no-prop <Table> renders the correct header/border/text/hover in both light
|
|
12
|
+
* and dark mode — consumers should only override for genuine per-row state
|
|
13
|
+
* or layout.
|
|
14
|
+
*/
|
|
15
|
+
const tableSlotRecipe = react.defineSlotRecipe({
|
|
16
|
+
slots: ['root', 'header', 'body', 'row', 'columnHeader', 'cell'],
|
|
17
|
+
base: {
|
|
18
|
+
root: {
|
|
19
|
+
color: 'fg.default',
|
|
20
|
+
},
|
|
21
|
+
header: {
|
|
22
|
+
color: 'fg.muted',
|
|
23
|
+
fontWeight: 'medium',
|
|
24
|
+
// Opt-in sticky header affordance: <Thead sticky>
|
|
25
|
+
'&[data-sticky]': {
|
|
26
|
+
position: 'sticky',
|
|
27
|
+
top: 0,
|
|
28
|
+
// Above sticky-column cells (zIndex 2 in Table.styles.ts)
|
|
29
|
+
zIndex: 'docked',
|
|
30
|
+
bg: 'bg.surface',
|
|
31
|
+
// border-collapse leaves cell borders behind when the header sticks;
|
|
32
|
+
// the shadow keeps the bottom hairline visible while scrolled
|
|
33
|
+
boxShadow: '0 1px 0 0 {colors.border.subtle}',
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
body: {
|
|
37
|
+
fontWeight: 'medium',
|
|
38
|
+
// Remove the last row's bottom border so it doesn't double up with
|
|
39
|
+
// TableContainer's border. Both rules are needed under border-collapse:
|
|
40
|
+
// the row border comes from base.row, the cell border from Chakra's
|
|
41
|
+
// line variant.
|
|
42
|
+
'& > tr:last-of-type': {
|
|
43
|
+
borderBottom: 'none',
|
|
44
|
+
},
|
|
45
|
+
'& > tr:last-of-type > td': {
|
|
46
|
+
borderBottom: 'none',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
row: {
|
|
50
|
+
borderBottomWidth: '1px',
|
|
51
|
+
borderBottomColor: 'border.subtle',
|
|
52
|
+
// Interactive styling is keyed off data-interactive, which <Tr> sets
|
|
53
|
+
// automatically when it receives onClick / role="button" / tabIndex —
|
|
54
|
+
// static tables never pick up hover/cursor styling.
|
|
55
|
+
'&[data-interactive]': {
|
|
56
|
+
cursor: 'pointer',
|
|
57
|
+
_hover: { bg: 'bg.muted' },
|
|
58
|
+
// Inset outline instead of the shared focusRing util (boxShadow
|
|
59
|
+
// ring): rows are clipped by TableContainer's rounded overflow,
|
|
60
|
+
// which would crop an outer ring.
|
|
61
|
+
_focusVisible: {
|
|
62
|
+
outline: '2px solid',
|
|
63
|
+
outlineColor: 'primary.main',
|
|
64
|
+
outlineOffset: '-2px',
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
// Row-state tints: set via <Tr state="..."> (data-selected /
|
|
68
|
+
// data-invalid / data-highlighted)
|
|
69
|
+
_selected: { bg: 'bg.selected' },
|
|
70
|
+
_invalid: { bg: 'bg.invalid.subtle' },
|
|
71
|
+
_highlighted: { bg: 'bg.highlighted' },
|
|
72
|
+
},
|
|
73
|
+
columnHeader: {
|
|
74
|
+
color: 'fg.muted',
|
|
75
|
+
fontWeight: 'medium',
|
|
76
|
+
bg: 'bg.subtle',
|
|
77
|
+
borderBottomWidth: '1px',
|
|
78
|
+
borderBottomColor: 'border.subtle',
|
|
79
|
+
},
|
|
80
|
+
cell: {
|
|
81
|
+
borderBottomColor: 'border.subtle',
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
variants: {
|
|
85
|
+
variant: {
|
|
86
|
+
line: {
|
|
87
|
+
// Chakra's line variant paints rows with the raw `bg` token (pure
|
|
88
|
+
// black in dark mode); keep rows transparent so the surface behind
|
|
89
|
+
// the table shows through and state tints/hover sit on top.
|
|
90
|
+
row: { bg: 'transparent' },
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
exports.tableSlotRecipe = tableSlotRecipe;
|
|
97
|
+
//# sourceMappingURL=table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.js","sources":["../../../src/theme/recipes/table.ts"],"sourcesContent":[null],"names":["defineSlotRecipe"],"mappings":";;;;;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAGA,sBAAgB,CAAC;AAC9C,IAAA,KAAK,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,CAAC;AAChE,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,YAAY;AACpB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,UAAU,EAAE,QAAQ;;AAEpB,YAAA,gBAAgB,EAAE;AAChB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,GAAG,EAAE,CAAC;;AAEN,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,EAAE,EAAE,YAAY;;;AAGhB,gBAAA,SAAS,EAAE,kCAAkC;AAC9C,aAAA;AACF,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,UAAU,EAAE,QAAQ;;;;;AAKpB,YAAA,qBAAqB,EAAE;AACrB,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACD,YAAA,0BAA0B,EAAE;AAC1B,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA;AACD,QAAA,GAAG,EAAE;AACH,YAAA,iBAAiB,EAAE,KAAK;AACxB,YAAA,iBAAiB,EAAE,eAAe;;;;AAIlC,YAAA,qBAAqB,EAAE;AACrB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE;;;;AAI1B,gBAAA,aAAa,EAAE;AACb,oBAAA,OAAO,EAAE,WAAW;AACpB,oBAAA,YAAY,EAAE,cAAc;AAC5B,oBAAA,aAAa,EAAE,MAAM;AACtB,iBAAA;AACF,aAAA;;;AAGD,YAAA,SAAS,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;AAChC,YAAA,QAAQ,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE;AACrC,YAAA,YAAY,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE;AACvC,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,iBAAiB,EAAE,KAAK;AACxB,YAAA,iBAAiB,EAAE,eAAe;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,iBAAiB,EAAE,eAAe;AACnC,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE;;;;AAIJ,gBAAA,GAAG,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;AAC3B,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA;;;;"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { defineSlotRecipe } from '@chakra-ui/react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Logician overrides for Chakra's `table` slot recipe.
|
|
6
|
+
*
|
|
7
|
+
* Merged on top of Chakra's default table recipe by `createSystem`, so only
|
|
8
|
+
* the deltas live here. Everything uses semantic (mode-aware) tokens so a
|
|
9
|
+
* no-prop <Table> renders the correct header/border/text/hover in both light
|
|
10
|
+
* and dark mode — consumers should only override for genuine per-row state
|
|
11
|
+
* or layout.
|
|
12
|
+
*/
|
|
13
|
+
const tableSlotRecipe = defineSlotRecipe({
|
|
14
|
+
slots: ['root', 'header', 'body', 'row', 'columnHeader', 'cell'],
|
|
15
|
+
base: {
|
|
16
|
+
root: {
|
|
17
|
+
color: 'fg.default',
|
|
18
|
+
},
|
|
19
|
+
header: {
|
|
20
|
+
color: 'fg.muted',
|
|
21
|
+
fontWeight: 'medium',
|
|
22
|
+
// Opt-in sticky header affordance: <Thead sticky>
|
|
23
|
+
'&[data-sticky]': {
|
|
24
|
+
position: 'sticky',
|
|
25
|
+
top: 0,
|
|
26
|
+
// Above sticky-column cells (zIndex 2 in Table.styles.ts)
|
|
27
|
+
zIndex: 'docked',
|
|
28
|
+
bg: 'bg.surface',
|
|
29
|
+
// border-collapse leaves cell borders behind when the header sticks;
|
|
30
|
+
// the shadow keeps the bottom hairline visible while scrolled
|
|
31
|
+
boxShadow: '0 1px 0 0 {colors.border.subtle}',
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
body: {
|
|
35
|
+
fontWeight: 'medium',
|
|
36
|
+
// Remove the last row's bottom border so it doesn't double up with
|
|
37
|
+
// TableContainer's border. Both rules are needed under border-collapse:
|
|
38
|
+
// the row border comes from base.row, the cell border from Chakra's
|
|
39
|
+
// line variant.
|
|
40
|
+
'& > tr:last-of-type': {
|
|
41
|
+
borderBottom: 'none',
|
|
42
|
+
},
|
|
43
|
+
'& > tr:last-of-type > td': {
|
|
44
|
+
borderBottom: 'none',
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
row: {
|
|
48
|
+
borderBottomWidth: '1px',
|
|
49
|
+
borderBottomColor: 'border.subtle',
|
|
50
|
+
// Interactive styling is keyed off data-interactive, which <Tr> sets
|
|
51
|
+
// automatically when it receives onClick / role="button" / tabIndex —
|
|
52
|
+
// static tables never pick up hover/cursor styling.
|
|
53
|
+
'&[data-interactive]': {
|
|
54
|
+
cursor: 'pointer',
|
|
55
|
+
_hover: { bg: 'bg.muted' },
|
|
56
|
+
// Inset outline instead of the shared focusRing util (boxShadow
|
|
57
|
+
// ring): rows are clipped by TableContainer's rounded overflow,
|
|
58
|
+
// which would crop an outer ring.
|
|
59
|
+
_focusVisible: {
|
|
60
|
+
outline: '2px solid',
|
|
61
|
+
outlineColor: 'primary.main',
|
|
62
|
+
outlineOffset: '-2px',
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
// Row-state tints: set via <Tr state="..."> (data-selected /
|
|
66
|
+
// data-invalid / data-highlighted)
|
|
67
|
+
_selected: { bg: 'bg.selected' },
|
|
68
|
+
_invalid: { bg: 'bg.invalid.subtle' },
|
|
69
|
+
_highlighted: { bg: 'bg.highlighted' },
|
|
70
|
+
},
|
|
71
|
+
columnHeader: {
|
|
72
|
+
color: 'fg.muted',
|
|
73
|
+
fontWeight: 'medium',
|
|
74
|
+
bg: 'bg.subtle',
|
|
75
|
+
borderBottomWidth: '1px',
|
|
76
|
+
borderBottomColor: 'border.subtle',
|
|
77
|
+
},
|
|
78
|
+
cell: {
|
|
79
|
+
borderBottomColor: 'border.subtle',
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
variants: {
|
|
83
|
+
variant: {
|
|
84
|
+
line: {
|
|
85
|
+
// Chakra's line variant paints rows with the raw `bg` token (pure
|
|
86
|
+
// black in dark mode); keep rows transparent so the surface behind
|
|
87
|
+
// the table shows through and state tints/hover sit on top.
|
|
88
|
+
row: { bg: 'transparent' },
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
export { tableSlotRecipe };
|
|
95
|
+
//# sourceMappingURL=table.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.mjs","sources":["../../../src/theme/recipes/table.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,gBAAgB,CAAC;AAC9C,IAAA,KAAK,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,CAAC;AAChE,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,YAAY;AACpB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,UAAU,EAAE,QAAQ;;AAEpB,YAAA,gBAAgB,EAAE;AAChB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,GAAG,EAAE,CAAC;;AAEN,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,EAAE,EAAE,YAAY;;;AAGhB,gBAAA,SAAS,EAAE,kCAAkC;AAC9C,aAAA;AACF,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,UAAU,EAAE,QAAQ;;;;;AAKpB,YAAA,qBAAqB,EAAE;AACrB,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACD,YAAA,0BAA0B,EAAE;AAC1B,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA;AACD,QAAA,GAAG,EAAE;AACH,YAAA,iBAAiB,EAAE,KAAK;AACxB,YAAA,iBAAiB,EAAE,eAAe;;;;AAIlC,YAAA,qBAAqB,EAAE;AACrB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE;;;;AAI1B,gBAAA,aAAa,EAAE;AACb,oBAAA,OAAO,EAAE,WAAW;AACpB,oBAAA,YAAY,EAAE,cAAc;AAC5B,oBAAA,aAAa,EAAE,MAAM;AACtB,iBAAA;AACF,aAAA;;;AAGD,YAAA,SAAS,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;AAChC,YAAA,QAAQ,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE;AACrC,YAAA,YAAY,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE;AACvC,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,iBAAiB,EAAE,KAAK;AACxB,YAAA,iBAAiB,EAAE,eAAe;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,iBAAiB,EAAE,eAAe;AACnC,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE;;;;AAIJ,gBAAA,GAAG,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;AAC3B,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -122,6 +122,110 @@ export const Default: Story = {
|
|
|
122
122
|
argTypes: {},
|
|
123
123
|
};
|
|
124
124
|
|
|
125
|
+
/**
|
|
126
|
+
* Rows that receive `onClick` (or `role="button"` / `tabIndex`) automatically
|
|
127
|
+
* get the interactive treatment from the table recipe: pointer cursor,
|
|
128
|
+
* `bg.muted` hover, and a focus-visible outline. Static rows never highlight.
|
|
129
|
+
*/
|
|
130
|
+
export const InteractiveRows: Story = {
|
|
131
|
+
render: (args) => (
|
|
132
|
+
<TableContainer>
|
|
133
|
+
<Table {...args}>
|
|
134
|
+
<Thead>
|
|
135
|
+
<Tr>
|
|
136
|
+
{columns.map((column) => (
|
|
137
|
+
<Th key={column.key}>{column.label}</Th>
|
|
138
|
+
))}
|
|
139
|
+
</Tr>
|
|
140
|
+
</Thead>
|
|
141
|
+
<Tbody>
|
|
142
|
+
{data.map((item) => (
|
|
143
|
+
<Tr
|
|
144
|
+
key={item.unit}
|
|
145
|
+
tabIndex={0}
|
|
146
|
+
onClick={() => alert(`Clicked ${item.unit}`)}
|
|
147
|
+
>
|
|
148
|
+
{columns.map((column) => (
|
|
149
|
+
<Td key={column.key}>{item[column.key]}</Td>
|
|
150
|
+
))}
|
|
151
|
+
</Tr>
|
|
152
|
+
))}
|
|
153
|
+
</Tbody>
|
|
154
|
+
</Table>
|
|
155
|
+
</TableContainer>
|
|
156
|
+
),
|
|
157
|
+
args: {},
|
|
158
|
+
argTypes: {},
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Per-row state tints via `<Tr state="...">`, backed by the mode-aware
|
|
163
|
+
* semantic tokens `bg.selected`, `bg.invalid.subtle` and `bg.highlighted`.
|
|
164
|
+
*/
|
|
165
|
+
export const RowStates: Story = {
|
|
166
|
+
render: (args) => (
|
|
167
|
+
<TableContainer>
|
|
168
|
+
<Table {...args}>
|
|
169
|
+
<Thead>
|
|
170
|
+
<Tr>
|
|
171
|
+
<Th>state</Th>
|
|
172
|
+
{columns.map((column) => (
|
|
173
|
+
<Th key={column.key}>{column.label}</Th>
|
|
174
|
+
))}
|
|
175
|
+
</Tr>
|
|
176
|
+
</Thead>
|
|
177
|
+
<Tbody>
|
|
178
|
+
{(['selected', 'invalid', 'highlighted', undefined] as const).map(
|
|
179
|
+
(state) => (
|
|
180
|
+
<Tr key={state ?? 'none'} state={state}>
|
|
181
|
+
<Td>{state ?? '—'}</Td>
|
|
182
|
+
{columns.map((column) => (
|
|
183
|
+
<Td key={column.key}>{data[0][column.key]}</Td>
|
|
184
|
+
))}
|
|
185
|
+
</Tr>
|
|
186
|
+
)
|
|
187
|
+
)}
|
|
188
|
+
</Tbody>
|
|
189
|
+
</Table>
|
|
190
|
+
</TableContainer>
|
|
191
|
+
),
|
|
192
|
+
args: {},
|
|
193
|
+
argTypes: {},
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* `<Thead sticky>` pins the header to the top of the scroll container
|
|
198
|
+
* (position: sticky, opaque surface bg, hairline shadow).
|
|
199
|
+
*/
|
|
200
|
+
export const StickyHeader: Story = {
|
|
201
|
+
render: (args) => (
|
|
202
|
+
<TableContainer maxH="240px">
|
|
203
|
+
<Table {...args}>
|
|
204
|
+
<Thead sticky>
|
|
205
|
+
<Tr>
|
|
206
|
+
{columns.map((column) => (
|
|
207
|
+
<Th key={column.key}>{column.label}</Th>
|
|
208
|
+
))}
|
|
209
|
+
</Tr>
|
|
210
|
+
</Thead>
|
|
211
|
+
<Tbody>
|
|
212
|
+
{Array.from({ length: 12 }, (_, i) => (
|
|
213
|
+
<Tr key={i}>
|
|
214
|
+
{columns.map((column) => (
|
|
215
|
+
<Td key={column.key}>
|
|
216
|
+
{data[i % data.length][column.key]}
|
|
217
|
+
</Td>
|
|
218
|
+
))}
|
|
219
|
+
</Tr>
|
|
220
|
+
))}
|
|
221
|
+
</Tbody>
|
|
222
|
+
</Table>
|
|
223
|
+
</TableContainer>
|
|
224
|
+
),
|
|
225
|
+
args: {},
|
|
226
|
+
argTypes: {},
|
|
227
|
+
};
|
|
228
|
+
|
|
125
229
|
export const ExpandedContent: Story = {
|
|
126
230
|
render: (args) => (
|
|
127
231
|
<TableContainer maxW="100%">
|
|
@@ -7,7 +7,10 @@ export const getStickyStyles = (
|
|
|
7
7
|
stickyDirection: StickyDirection = 'left',
|
|
8
8
|
scrollState: TableScrollState,
|
|
9
9
|
stickyOffset = 0,
|
|
10
|
-
isLastSticky = false
|
|
10
|
+
isLastSticky = false,
|
|
11
|
+
// Header cells use the recipe's header surface (bg.subtle); body cells the
|
|
12
|
+
// table surface — sticky cells need an opaque bg matching their row.
|
|
13
|
+
stickyBg: 'bg.surface' | 'bg.subtle' = 'bg.surface'
|
|
11
14
|
) => {
|
|
12
15
|
if (!isSticky || !scrollState) return {};
|
|
13
16
|
const { isScrollStart, isScrollEnd, isScrolling } = scrollState;
|
|
@@ -28,7 +31,7 @@ export const getStickyStyles = (
|
|
|
28
31
|
overflow: 'visible',
|
|
29
32
|
[stickyDirection]: `${stickyOffset}px`,
|
|
30
33
|
zIndex: 2,
|
|
31
|
-
backgroundColor:
|
|
34
|
+
backgroundColor: stickyBg,
|
|
32
35
|
...(shouldShowShadow && {
|
|
33
36
|
_after: {
|
|
34
37
|
content: '""',
|
|
@@ -11,3 +11,19 @@ export interface TableCellProps extends Table.CellProps {
|
|
|
11
11
|
stickyDirection?: StickyDirection;
|
|
12
12
|
stickyIndex?: number;
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
export type TableRowState = 'selected' | 'invalid' | 'highlighted';
|
|
16
|
+
|
|
17
|
+
export interface TableRowProps extends Table.RowProps {
|
|
18
|
+
/**
|
|
19
|
+
* Row background tint, driven by the table recipe's semantic tokens
|
|
20
|
+
* (`bg.selected` / `bg.invalid.subtle` / `bg.highlighted`) so it renders
|
|
21
|
+
* correctly in both light and dark mode.
|
|
22
|
+
*/
|
|
23
|
+
state?: TableRowState;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export interface TableHeaderProps extends Table.HeaderProps {
|
|
27
|
+
/** Stick the header row to the top of the scroll container. */
|
|
28
|
+
sticky?: boolean;
|
|
29
|
+
}
|
|
@@ -1,27 +1,9 @@
|
|
|
1
1
|
import { forwardRef } from 'react';
|
|
2
2
|
import { Table } from '@chakra-ui/react';
|
|
3
3
|
|
|
4
|
-
import { mergeCss } from '@/utils/mergeCss';
|
|
5
|
-
|
|
6
4
|
export const Tbody = forwardRef<HTMLTableSectionElement, Table.BodyProps>(
|
|
7
|
-
(
|
|
8
|
-
return
|
|
9
|
-
<Table.Body
|
|
10
|
-
ref={ref}
|
|
11
|
-
color="fg.default"
|
|
12
|
-
fontWeight="medium"
|
|
13
|
-
{...props}
|
|
14
|
-
css={mergeCss(
|
|
15
|
-
{
|
|
16
|
-
// Remove bottom border from last row to prevent overlap with container border
|
|
17
|
-
'& > tr:last-of-type > td': {
|
|
18
|
-
borderBottom: 'none',
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
css
|
|
22
|
-
)}
|
|
23
|
-
/>
|
|
24
|
-
);
|
|
5
|
+
(props, ref) => {
|
|
6
|
+
return <Table.Body ref={ref} {...props} />;
|
|
25
7
|
}
|
|
26
8
|
);
|
|
27
9
|
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Table } from '@chakra-ui/react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import { TableHeaderProps } from './Table.types';
|
|
4
|
+
|
|
5
|
+
export const Thead = ({ sticky, ...rest }: TableHeaderProps) => {
|
|
6
|
+
return <Table.Header data-sticky={sticky ? '' : undefined} {...rest} />;
|
|
5
7
|
};
|
|
@@ -1,5 +1,33 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
1
2
|
import { Table } from '@chakra-ui/react';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
import { TableRowProps } from './Table.types';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Table row.
|
|
8
|
+
*
|
|
9
|
+
* Sets `data-interactive` automatically when the row is clickable (onClick,
|
|
10
|
+
* role="button", or tabIndex), which keys the hover/cursor/focus styling in
|
|
11
|
+
* the table recipe — static rows never highlight. The ref is forwarded so
|
|
12
|
+
* drag-and-drop rows (e.g. dnd-kit) can attach directly.
|
|
13
|
+
*/
|
|
14
|
+
export const Tr = forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
15
|
+
({ state, ...rest }, ref) => {
|
|
16
|
+
const isInteractive =
|
|
17
|
+
rest.onClick != null || rest.role === 'button' || rest.tabIndex != null;
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Table.Row
|
|
21
|
+
ref={ref}
|
|
22
|
+
h={12}
|
|
23
|
+
data-interactive={isInteractive ? '' : undefined}
|
|
24
|
+
data-selected={state === 'selected' ? '' : undefined}
|
|
25
|
+
data-invalid={state === 'invalid' ? '' : undefined}
|
|
26
|
+
data-highlighted={state === 'highlighted' ? '' : undefined}
|
|
27
|
+
{...rest}
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
Tr.displayName = 'Tr';
|
|
@@ -67,6 +67,9 @@ between a light and a dark value.
|
|
|
67
67
|
| `bg.subtle` | `gray.50` | `gray.1300` | Subtle fill, hover background, secondary surface |
|
|
68
68
|
| `bg.muted` | `gray.100` | `gray.1200` | Muted fill, tertiary surface, neutral chips |
|
|
69
69
|
| `bg.inverse` | `gray.1300` | `gray.50` | High-contrast/inverse surface (flips with mode) |
|
|
70
|
+
| `bg.selected` | `blue.25` | `blue.900` | Selected rows/items (mirrors `primary.lightest`) |
|
|
71
|
+
| `bg.invalid.subtle` | `rose.25` | `rose.900` | Validation-error rows/fields (mirrors `danger.lightest`) |
|
|
72
|
+
| `bg.highlighted` | `gold.25` | `gold.900` | Transient highlights, scroll-to emphasis (mirrors `warning.lightest`) |
|
|
70
73
|
|
|
71
74
|
### Border — `border.*` (borders & dividers)
|
|
72
75
|
|
package/src/theme/colors.ts
CHANGED
|
@@ -268,6 +268,27 @@ export const semanticTokens = {
|
|
|
268
268
|
panel: {
|
|
269
269
|
value: { base: '{colors.white}', _dark: '{colors.gray.1400}' },
|
|
270
270
|
},
|
|
271
|
+
/**
|
|
272
|
+
* Row/selection state tints. Use these for selected rows,
|
|
273
|
+
* validation-error rows, and transient highlights instead of
|
|
274
|
+
* hand-picking `primary.*`/`danger.*` tints at the call site.
|
|
275
|
+
*
|
|
276
|
+
* Values mirror `primary.lightest` / `danger.lightest` /
|
|
277
|
+
* `warning.lightest` (this Chakra version doesn't resolve
|
|
278
|
+
* semantic→semantic token references, so the primitive pairs are
|
|
279
|
+
* repeated here — keep them in sync with the brand ramps above).
|
|
280
|
+
*/
|
|
281
|
+
selected: {
|
|
282
|
+
value: { base: '{colors.blue.25}', _dark: '{colors.blue.900}' },
|
|
283
|
+
},
|
|
284
|
+
invalid: {
|
|
285
|
+
subtle: {
|
|
286
|
+
value: { base: '{colors.rose.25}', _dark: '{colors.rose.900}' },
|
|
287
|
+
},
|
|
288
|
+
},
|
|
289
|
+
highlighted: {
|
|
290
|
+
value: { base: '{colors.gold.25}', _dark: '{colors.gold.900}' },
|
|
291
|
+
},
|
|
271
292
|
},
|
|
272
293
|
|
|
273
294
|
/**
|
|
@@ -336,7 +357,15 @@ export const semanticTokens = {
|
|
|
336
357
|
* contract. App code should use `bg.surface`/`bg.canvas`.
|
|
337
358
|
*/
|
|
338
359
|
export type SemanticColorToken =
|
|
339
|
-
| `bg.${
|
|
360
|
+
| `bg.${
|
|
361
|
+
| 'canvas'
|
|
362
|
+
| 'surface'
|
|
363
|
+
| 'subtle'
|
|
364
|
+
| 'muted'
|
|
365
|
+
| 'inverse'
|
|
366
|
+
| 'selected'
|
|
367
|
+
| 'highlighted'}`
|
|
368
|
+
| 'bg.invalid.subtle'
|
|
340
369
|
| `fg.${'default' | 'muted' | 'subtle' | 'inverse'}`
|
|
341
370
|
| `border.${'default' | 'subtle' | 'strong'}`
|
|
342
371
|
| `${'primary' | 'secondary' | 'danger' | 'success' | 'warning'}.${
|