@x-plat/design-system 0.5.21 → 0.5.22

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.
@@ -6,6 +6,27 @@
6
6
  position: relative;
7
7
  overflow: auto;
8
8
  }
9
+ .lib-xplat-table-wrapper.sm > .lib-xplat-table > thead > tr > th,
10
+ .lib-xplat-table-wrapper.sm > .lib-xplat-table > thead > tr > td,
11
+ .lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > th,
12
+ .lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > td {
13
+ padding: var(--spacing-space-1) var(--spacing-space-2);
14
+ font-size: 12px;
15
+ }
16
+ .lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > th,
17
+ .lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > td,
18
+ .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > th,
19
+ .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > td {
20
+ padding: var(--spacing-space-2) var(--spacing-space-3);
21
+ font-size: 14px;
22
+ }
23
+ .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > th,
24
+ .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > td,
25
+ .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > th,
26
+ .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > td {
27
+ padding: var(--spacing-space-3) var(--spacing-space-4);
28
+ font-size: 16px;
29
+ }
9
30
  .lib-xplat-table-wrapper > .lib-xplat-table {
10
31
  width: 100%;
11
32
  min-width: 600px;
@@ -66,6 +87,102 @@
66
87
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
67
88
  background-color: var(--semantic-surface-neutral-subtle);
68
89
  }
90
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success,
91
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success {
92
+ background-color: var(--semantic-surface-success-default);
93
+ }
94
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > td,
95
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > th,
96
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > td,
97
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > th {
98
+ color: var(--semantic-text-inverse);
99
+ background-color: var(--semantic-surface-success-default);
100
+ }
101
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > td.cell-hover:hover,
102
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > th.cell-hover:hover,
103
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > td.cell-hover:hover,
104
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > th.cell-hover:hover {
105
+ background-color: var(--semantic-surface-success-strong);
106
+ }
107
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success.hover:hover > td,
108
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success.hover:hover > th,
109
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success.hover:hover > td,
110
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success.hover:hover > th {
111
+ color: var(--semantic-text-inverse);
112
+ background-color: var(--semantic-surface-success-strong);
113
+ }
114
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error,
115
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error {
116
+ background-color: var(--semantic-surface-error-default);
117
+ }
118
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > td,
119
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > th,
120
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > td,
121
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > th {
122
+ color: var(--semantic-text-inverse);
123
+ background-color: var(--semantic-surface-error-default);
124
+ }
125
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > td.cell-hover:hover,
126
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > th.cell-hover:hover,
127
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > td.cell-hover:hover,
128
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > th.cell-hover:hover {
129
+ background-color: var(--semantic-surface-error-strong);
130
+ }
131
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error.hover:hover > td,
132
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error.hover:hover > th,
133
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error.hover:hover > td,
134
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error.hover:hover > th {
135
+ color: var(--semantic-text-inverse);
136
+ background-color: var(--semantic-surface-error-strong);
137
+ }
138
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning,
139
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning {
140
+ background-color: var(--semantic-surface-warning-default);
141
+ }
142
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td,
143
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th,
144
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td,
145
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th {
146
+ color: var(--semantic-text-strong);
147
+ background-color: var(--semantic-surface-warning-default);
148
+ }
149
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td.cell-hover:hover,
150
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th.cell-hover:hover,
151
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td.cell-hover:hover,
152
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th.cell-hover:hover {
153
+ background-color: var(--semantic-surface-warning-strong);
154
+ }
155
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > td,
156
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > th,
157
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > td,
158
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > th {
159
+ color: var(--semantic-text-strong);
160
+ background-color: var(--semantic-surface-warning-strong);
161
+ }
162
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info,
163
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info {
164
+ background-color: var(--semantic-surface-info-default);
165
+ }
166
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > td,
167
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > th,
168
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > td,
169
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > th {
170
+ color: var(--semantic-text-inverse);
171
+ background-color: var(--semantic-surface-info-default);
172
+ }
173
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > td.cell-hover:hover,
174
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > th.cell-hover:hover,
175
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > td.cell-hover:hover,
176
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > th.cell-hover:hover {
177
+ background-color: var(--semantic-surface-info-strong);
178
+ }
179
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info.hover:hover > td,
180
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info.hover:hover > th,
181
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info.hover:hover > td,
182
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info.hover:hover > th {
183
+ color: var(--semantic-text-inverse);
184
+ background-color: var(--semantic-surface-info-strong);
185
+ }
69
186
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
70
187
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
71
188
  cursor: pointer;
@@ -1,8 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
3
 
4
+ type TableSize = "sm" | "md" | "lg";
4
5
  interface TableProps {
5
6
  children: React.ReactNode;
7
+ size?: TableSize;
6
8
  rowBorderUse?: boolean;
7
9
  colBorderUse?: boolean;
8
10
  headerSticky?: boolean;
@@ -42,7 +44,7 @@ declare const TableHead: {
42
44
 
43
45
  interface TableRowProps {
44
46
  children: React.ReactNode;
45
- type?: "primary" | "secondary";
47
+ type?: "primary" | "secondary" | "success" | "error" | "warning" | "info";
46
48
  isHover?: boolean;
47
49
  onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
48
50
  }
@@ -1,8 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
3
 
4
+ type TableSize = "sm" | "md" | "lg";
4
5
  interface TableProps {
5
6
  children: React.ReactNode;
7
+ size?: TableSize;
6
8
  rowBorderUse?: boolean;
7
9
  colBorderUse?: boolean;
8
10
  headerSticky?: boolean;
@@ -42,7 +44,7 @@ declare const TableHead: {
42
44
 
43
45
  interface TableRowProps {
44
46
  children: React.ReactNode;
45
- type?: "primary" | "secondary";
47
+ type?: "primary" | "secondary" | "success" | "error" | "warning" | "info";
46
48
  isHover?: boolean;
47
49
  onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
48
50
  }
@@ -13,12 +13,13 @@ import { jsx } from "react/jsx-runtime";
13
13
  var Table = (props) => {
14
14
  const {
15
15
  children,
16
+ size = "md",
16
17
  rowBorderUse = true,
17
18
  colBorderUse = true,
18
19
  headerSticky = false,
19
20
  stickyShadow = true
20
21
  } = props;
21
- return /* @__PURE__ */ jsx("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ jsx(
22
+ return /* @__PURE__ */ jsx("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx(
22
23
  TableContext_default.Provider,
23
24
  {
24
25
  value: {