@x-plat/design-system 0.5.30 → 0.5.31

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 (12) hide show
  1. package/dist/components/Table/index.cjs +8 -1
  2. package/dist/components/Table/index.css +34 -0
  3. package/dist/components/Table/index.d.cts +2 -0
  4. package/dist/components/Table/index.d.ts +2 -0
  5. package/dist/components/Table/index.js +8 -1
  6. package/dist/components/index.cjs +8 -1
  7. package/dist/components/index.css +34 -0
  8. package/dist/components/index.js +8 -1
  9. package/dist/index.cjs +8 -1
  10. package/dist/index.css +34 -0
  11. package/dist/index.js +8 -1
  12. package/package.json +1 -1
package/dist/components/Table/index.cjs CHANGED
@@ -210,6 +210,7 @@ var TableRow = import_react5.default.memo((props) => {
210
210
  const {
211
211
  children,
212
212
  type = "secondary",
213
+ color,
213
214
  isHover,
214
215
  onClick
215
216
  } = props;
@@ -226,11 +227,17 @@ var TableRow = import_react5.default.memo((props) => {
226
227
  {
227
228
  className: clsx_default(
228
229
  rowBorderUse ? "table-bottom-border" : null,
229
- type,
230
+ color != null ? "categorical" : type,
231
+ color === "neutral" && "cat-neutral",
230
232
  isHover && "hover",
231
233
  onClick && "clickable"
232
234
  ),
233
235
  onClick,
236
+ style: color != null && color !== "neutral" ? {
237
+ "--cat-fill": `var(--semantic-categorical-${color}-fill)`,
238
+ "--cat-text": `var(--semantic-categorical-${color}-text)`,
239
+ "--cat-bg": `var(--semantic-categorical-${color}-bg)`
240
+ } : void 0,
234
241
  children
235
242
  }
236
243
  ) });
package/dist/components/Table/index.css CHANGED
@@ -183,6 +183,40 @@
183
183
  color: var(--semantic-text-inverse);
184
184
  background-color: var(--semantic-surface-info-strong);
185
185
  }
186
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical,
187
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical {
188
+ background-color: var(--cat-fill);
189
+ }
190
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical > td,
191
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical > th,
192
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical > td,
193
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical > th {
194
+ color: var(--semantic-text-inverse);
195
+ background-color: var(--cat-fill);
196
+ }
197
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.hover:hover > td,
198
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.hover:hover > th,
199
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.hover:hover > td,
200
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.hover:hover > th {
201
+ background-color: var(--cat-text);
202
+ }
203
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral,
204
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral {
205
+ background-color: var(--semantic-surface-neutral-strong);
206
+ }
207
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > td,
208
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > th,
209
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > td,
210
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > th {
211
+ color: var(--semantic-text-inverse);
212
+ background-color: var(--semantic-surface-neutral-strong);
213
+ }
214
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > td,
215
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > th,
216
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral.hover:hover > td,
217
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral.hover:hover > th {
218
+ background-color: var(--semantic-surface-neutral-disabled);
219
+ }
186
220
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
187
221
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
188
222
  cursor: pointer;
package/dist/components/Table/index.d.cts CHANGED
@@ -42,9 +42,11 @@ declare const TableHead: {
42
42
  displayName: string;
43
43
  };
44
44
 
45
+ type RowColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | "neutral";
45
46
  interface TableRowProps {
46
47
  children: React.ReactNode;
47
48
  type?: "primary" | "secondary" | "success" | "error" | "warning" | "info";
49
+ color?: RowColor;
48
50
  isHover?: boolean;
49
51
  onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
50
52
  }
package/dist/components/Table/index.d.ts CHANGED
@@ -42,9 +42,11 @@ declare const TableHead: {
42
42
  displayName: string;
43
43
  };
44
44
 
45
+ type RowColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | "neutral";
45
46
  interface TableRowProps {
46
47
  children: React.ReactNode;
47
48
  type?: "primary" | "secondary" | "success" | "error" | "warning" | "info";
49
+ color?: RowColor;
48
50
  isHover?: boolean;
49
51
  onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
50
52
  }
package/dist/components/Table/index.js CHANGED
@@ -170,6 +170,7 @@ var TableRow = React5.memo((props) => {
170
170
  const {
171
171
  children,
172
172
  type = "secondary",
173
+ color,
173
174
  isHover,
174
175
  onClick
175
176
  } = props;
@@ -186,11 +187,17 @@ var TableRow = React5.memo((props) => {
186
187
  {
187
188
  className: clsx_default(
188
189
  rowBorderUse ? "table-bottom-border" : null,
189
- type,
190
+ color != null ? "categorical" : type,
191
+ color === "neutral" && "cat-neutral",
190
192
  isHover && "hover",
191
193
  onClick && "clickable"
192
194
  ),
193
195
  onClick,
196
+ style: color != null && color !== "neutral" ? {
197
+ "--cat-fill": `var(--semantic-categorical-${color}-fill)`,
198
+ "--cat-text": `var(--semantic-categorical-${color}-text)`,
199
+ "--cat-bg": `var(--semantic-categorical-${color}-bg)`
200
+ } : void 0,
194
201
  children
195
202
  }
196
203
  ) });
package/dist/components/index.cjs CHANGED
@@ -5088,6 +5088,7 @@ var TableRow = import_react37.default.memo((props) => {
5088
5088
  const {
5089
5089
  children,
5090
5090
  type = "secondary",
5091
+ color,
5091
5092
  isHover,
5092
5093
  onClick
5093
5094
  } = props;
@@ -5104,11 +5105,17 @@ var TableRow = import_react37.default.memo((props) => {
5104
5105
  {
5105
5106
  className: clsx_default(
5106
5107
  rowBorderUse ? "table-bottom-border" : null,
5107
- type,
5108
+ color != null ? "categorical" : type,
5109
+ color === "neutral" && "cat-neutral",
5108
5110
  isHover && "hover",
5109
5111
  onClick && "clickable"
5110
5112
  ),
5111
5113
  onClick,
5114
+ style: color != null && color !== "neutral" ? {
5115
+ "--cat-fill": `var(--semantic-categorical-${color}-fill)`,
5116
+ "--cat-text": `var(--semantic-categorical-${color}-text)`,
5117
+ "--cat-bg": `var(--semantic-categorical-${color}-bg)`
5118
+ } : void 0,
5112
5119
  children
5113
5120
  }
5114
5121
  ) });
package/dist/components/index.css CHANGED
@@ -4022,6 +4022,40 @@
4022
4022
  color: var(--semantic-text-inverse);
4023
4023
  background-color: var(--semantic-surface-info-strong);
4024
4024
  }
4025
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical,
4026
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical {
4027
+ background-color: var(--cat-fill);
4028
+ }
4029
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical > td,
4030
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical > th,
4031
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical > td,
4032
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical > th {
4033
+ color: var(--semantic-text-inverse);
4034
+ background-color: var(--cat-fill);
4035
+ }
4036
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.hover:hover > td,
4037
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.hover:hover > th,
4038
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.hover:hover > td,
4039
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.hover:hover > th {
4040
+ background-color: var(--cat-text);
4041
+ }
4042
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral,
4043
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral {
4044
+ background-color: var(--semantic-surface-neutral-strong);
4045
+ }
4046
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > td,
4047
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > th,
4048
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > td,
4049
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > th {
4050
+ color: var(--semantic-text-inverse);
4051
+ background-color: var(--semantic-surface-neutral-strong);
4052
+ }
4053
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > td,
4054
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > th,
4055
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral.hover:hover > td,
4056
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral.hover:hover > th {
4057
+ background-color: var(--semantic-surface-neutral-disabled);
4058
+ }
4025
4059
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
4026
4060
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
4027
4061
  cursor: pointer;
package/dist/components/index.js CHANGED
@@ -4998,6 +4998,7 @@ var TableRow = React36.memo((props) => {
4998
4998
  const {
4999
4999
  children,
5000
5000
  type = "secondary",
5001
+ color,
5001
5002
  isHover,
5002
5003
  onClick
5003
5004
  } = props;
@@ -5014,11 +5015,17 @@ var TableRow = React36.memo((props) => {
5014
5015
  {
5015
5016
  className: clsx_default(
5016
5017
  rowBorderUse ? "table-bottom-border" : null,
5017
- type,
5018
+ color != null ? "categorical" : type,
5019
+ color === "neutral" && "cat-neutral",
5018
5020
  isHover && "hover",
5019
5021
  onClick && "clickable"
5020
5022
  ),
5021
5023
  onClick,
5024
+ style: color != null && color !== "neutral" ? {
5025
+ "--cat-fill": `var(--semantic-categorical-${color}-fill)`,
5026
+ "--cat-text": `var(--semantic-categorical-${color}-text)`,
5027
+ "--cat-bg": `var(--semantic-categorical-${color}-bg)`
5028
+ } : void 0,
5022
5029
  children
5023
5030
  }
5024
5031
  ) });
package/dist/index.cjs CHANGED
@@ -9500,6 +9500,7 @@ var TableRow = import_react37.default.memo((props) => {
9500
9500
  const {
9501
9501
  children,
9502
9502
  type = "secondary",
9503
+ color,
9503
9504
  isHover,
9504
9505
  onClick
9505
9506
  } = props;
@@ -9516,11 +9517,17 @@ var TableRow = import_react37.default.memo((props) => {
9516
9517
  {
9517
9518
  className: clsx_default(
9518
9519
  rowBorderUse ? "table-bottom-border" : null,
9519
- type,
9520
+ color != null ? "categorical" : type,
9521
+ color === "neutral" && "cat-neutral",
9520
9522
  isHover && "hover",
9521
9523
  onClick && "clickable"
9522
9524
  ),
9523
9525
  onClick,
9526
+ style: color != null && color !== "neutral" ? {
9527
+ "--cat-fill": `var(--semantic-categorical-${color}-fill)`,
9528
+ "--cat-text": `var(--semantic-categorical-${color}-text)`,
9529
+ "--cat-bg": `var(--semantic-categorical-${color}-bg)`
9530
+ } : void 0,
9524
9531
  children
9525
9532
  }
9526
9533
  ) });
package/dist/index.css CHANGED
@@ -4022,6 +4022,40 @@
4022
4022
  color: var(--semantic-text-inverse);
4023
4023
  background-color: var(--semantic-surface-info-strong);
4024
4024
  }
4025
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical,
4026
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical {
4027
+ background-color: var(--cat-fill);
4028
+ }
4029
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical > td,
4030
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical > th,
4031
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical > td,
4032
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical > th {
4033
+ color: var(--semantic-text-inverse);
4034
+ background-color: var(--cat-fill);
4035
+ }
4036
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.hover:hover > td,
4037
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.hover:hover > th,
4038
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.hover:hover > td,
4039
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.hover:hover > th {
4040
+ background-color: var(--cat-text);
4041
+ }
4042
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral,
4043
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral {
4044
+ background-color: var(--semantic-surface-neutral-strong);
4045
+ }
4046
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > td,
4047
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > th,
4048
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > td,
4049
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > th {
4050
+ color: var(--semantic-text-inverse);
4051
+ background-color: var(--semantic-surface-neutral-strong);
4052
+ }
4053
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > td,
4054
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > th,
4055
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral.hover:hover > td,
4056
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral.hover:hover > th {
4057
+ background-color: var(--semantic-surface-neutral-disabled);
4058
+ }
4025
4059
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
4026
4060
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
4027
4061
  cursor: pointer;
package/dist/index.js CHANGED
@@ -9101,6 +9101,7 @@ var TableRow = React36.memo((props) => {
9101
9101
  const {
9102
9102
  children,
9103
9103
  type = "secondary",
9104
+ color,
9104
9105
  isHover,
9105
9106
  onClick
9106
9107
  } = props;
@@ -9117,11 +9118,17 @@ var TableRow = React36.memo((props) => {
9117
9118
  {
9118
9119
  className: clsx_default(
9119
9120
  rowBorderUse ? "table-bottom-border" : null,
9120
- type,
9121
+ color != null ? "categorical" : type,
9122
+ color === "neutral" && "cat-neutral",
9121
9123
  isHover && "hover",
9122
9124
  onClick && "clickable"
9123
9125
  ),
9124
9126
  onClick,
9127
+ style: color != null && color !== "neutral" ? {
9128
+ "--cat-fill": `var(--semantic-categorical-${color}-fill)`,
9129
+ "--cat-text": `var(--semantic-categorical-${color}-text)`,
9130
+ "--cat-bg": `var(--semantic-categorical-${color}-bg)`
9131
+ } : void 0,
9125
9132
  children
9126
9133
  }
9127
9134
  ) });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.30",
3
+ "version": "0.5.31",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",