ndcloud-storybook 1.2.1 → 1.2.2-beta.0

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/index.cjs CHANGED
@@ -1,30 +1,14 @@
1
1
  'use strict';
2
2
 
3
3
  var react = require('@emotion/react');
4
- var styled = require('@emotion/styled');
4
+ var styled16 = require('@emotion/styled');
5
5
  var jsxRuntime = require('@emotion/react/jsx-runtime');
6
6
 
7
7
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
8
 
9
- var styled__default = /*#__PURE__*/_interopDefault(styled);
9
+ var styled16__default = /*#__PURE__*/_interopDefault(styled16);
10
10
 
11
11
  // src/atoms/Button/Button.tsx
12
- var spin = react.keyframes`
13
- from { transform: rotate(0deg); }
14
- to { transform: rotate(360deg); }
15
- `;
16
- var Wrapper = styled__default.default.div`
17
- display: inline-flex;
18
- align-items: center;
19
- justify-content: center;
20
-
21
- svg {
22
- width: ${({ size = 20 }) => size}px;
23
- height: ${({ size = 20 }) => size}px;
24
- animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
25
- transform-origin: center;
26
- }
27
- `;
28
12
  var Spinner = ({
29
13
  size = 20,
30
14
  speed = "0.75s",
@@ -53,6 +37,22 @@ var Spinner = ({
53
37
  }
54
38
  ) });
55
39
  var Spinner_default = Spinner;
40
+ var spin = react.keyframes`
41
+ from { transform: rotate(0deg); }
42
+ to { transform: rotate(360deg); }
43
+ `;
44
+ var Wrapper = styled16__default.default.div`
45
+ display: inline-flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+
49
+ svg {
50
+ width: ${({ size = 20 }) => size}px;
51
+ height: ${({ size = 20 }) => size}px;
52
+ animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
53
+ transform-origin: center;
54
+ }
55
+ `;
56
56
 
57
57
  // src/tokens/colors.ts
58
58
  var colors = {
@@ -61,6 +61,7 @@ var colors = {
61
61
  // Brand
62
62
  primaryGreen: "#7EE896",
63
63
  primaryPurple: "#6D65DA",
64
+ primaryBlue: "#55A3BD",
64
65
  // Palette
65
66
  darkBlue1: "#12131B",
66
67
  darkBlue2: "#2A2B33",
@@ -136,6 +137,17 @@ var FONT_SIZE_KEYS = {
136
137
  xl: "xl",
137
138
  "2xl": "2xl"
138
139
  };
140
+
141
+ // src/utils/colorHelpers.ts
142
+ function getOpacity(hexColor, opacity) {
143
+ const hex = hexColor.trim().replace(/^#/, "");
144
+ if (!/^[\da-fA-F]{6}$/.test(hex)) {
145
+ throw new Error(`Invalid hex color: ${hexColor}`);
146
+ }
147
+ const opacityFraction = Math.round(opacity / 100 * 255);
148
+ const alphaHex = opacityFraction.toString(16).padStart(2, "0");
149
+ return `#${hex}${alphaHex}`;
150
+ }
139
151
  var Variant = /* @__PURE__ */ ((Variant2) => {
140
152
  Variant2["Primary"] = "primary";
141
153
  Variant2["Secondary"] = "secondary";
@@ -153,11 +165,35 @@ var VARIANTS = {
153
165
  },
154
166
  outline: {
155
167
  background: colors.backgrounds.transparent,
156
- border: "1px solid rgba(70, 70, 74, 0.10)",
157
- color: "#0E1116D9"
168
+ border: `1px solid ${getOpacity(colors.baseColors.grey2, 10)}`,
169
+ color: getOpacity(colors.baseColors.darkBlue3, 85)
158
170
  }
159
171
  };
160
- var StyledButton = styled__default.default.button`
172
+ var Button = ({
173
+ label,
174
+ icon,
175
+ loading,
176
+ disabled,
177
+ className,
178
+ variant = "primary",
179
+ selected,
180
+ ...rest
181
+ }) => /* @__PURE__ */ jsxRuntime.jsx(
182
+ StyledButton,
183
+ {
184
+ variant,
185
+ disabled: disabled || loading,
186
+ selected,
187
+ className,
188
+ ...rest,
189
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
190
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
191
+ label
192
+ ] })
193
+ }
194
+ );
195
+ var Button_default = Button;
196
+ var StyledButton = styled16__default.default.button`
161
197
  display: flex;
162
198
  align-items: center;
163
199
  justify-content: center;
@@ -187,46 +223,12 @@ var StyledButton = styled__default.default.button`
187
223
  pointer-events: ${disabled ? "none" : "auto"};
188
224
 
189
225
  &:focus-visible {
190
- outline: 2px solid #0070f3;
226
+ outline: 2px solid ${colors.baseColors.primaryBlue};
191
227
  outline-offset: 2px;
192
228
  }
193
229
  `;
194
230
  }}
195
231
  `;
196
- var Button = ({
197
- label,
198
- icon,
199
- loading,
200
- disabled,
201
- className,
202
- ...rest
203
- }) => /* @__PURE__ */ jsxRuntime.jsx(
204
- StyledButton,
205
- {
206
- label: "",
207
- disabled: disabled || loading,
208
- className,
209
- ...rest,
210
- children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
211
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
212
- label
213
- ] })
214
- }
215
- );
216
- var Button_default = Button;
217
-
218
- // src/utils/colorHelpers.ts
219
- function getOpacity(hexColor, opacity) {
220
- const hex = hexColor.trim().replace(/^#/, "");
221
- if (!/^[\da-fA-F]{6}$/.test(hex)) {
222
- throw new Error(`Invalid hex color: ${hexColor}`);
223
- }
224
- const opacityFraction = Math.round(opacity / 100 * 255);
225
- const alphaHex = opacityFraction.toString(16).padStart(2, "0");
226
- return `#${hex}${alphaHex}`;
227
- }
228
-
229
- // src/atoms/shared/inputStyles.ts
230
232
  var defaultPadding = "9px 17px";
231
233
  var focusedPadding = "8px 16px";
232
234
  var baseInputStyles = react.css`
@@ -286,7 +288,7 @@ var Input = ({ className, error, warning, ...rest }) => {
286
288
  return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { className, error, warning, ...rest });
287
289
  };
288
290
  var Input_default = Input;
289
- var StyledInput = styled__default.default.input`
291
+ var StyledInput = styled16__default.default.input`
290
292
  ${baseInputStyles}
291
293
 
292
294
  ${({ error }) => error && errorStyles}
@@ -300,7 +302,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
300
302
  return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { className, error, warning, ...rest });
301
303
  };
302
304
  var Textarea_default = Textarea;
303
- var StyledTextarea = styled__default.default.textarea`
305
+ var StyledTextarea = styled16__default.default.textarea`
304
306
  ${baseInputStyles}
305
307
  resize: vertical;
306
308
  min-height: 80px;
@@ -328,7 +330,7 @@ var Tab = ({
328
330
  );
329
331
  };
330
332
  var Tab_default = Tab;
331
- var StyledTab = styled__default.default.div`
333
+ var StyledTab = styled16__default.default.div`
332
334
  display: inline-block;
333
335
  padding: 8px 16px;
334
336
  user-select: none;
@@ -349,7 +351,7 @@ var StyledTab = styled__default.default.div`
349
351
  }
350
352
  `}
351
353
  `;
352
- var HelperText = styled__default.default.div`
354
+ var HelperText = styled16__default.default.div`
353
355
  margin-top: 4px;
354
356
  font-size: ${typography.fontSize.xs}px;
355
357
  color: ${({ error, warning }) => {
@@ -358,6 +360,94 @@ var HelperText = styled__default.default.div`
358
360
  return colors.baseColors.grey3;
359
361
  }};
360
362
  `;
363
+ var USER_ROLES = {
364
+ OWNER: "owner",
365
+ EDITOR: "editor",
366
+ VIEWER: "viewer",
367
+ AUDITOR: "auditor"
368
+ };
369
+ var USER_STATUS = {
370
+ INVITED: "invited"
371
+ };
372
+ var getBadgeColor = (role, status) => {
373
+ if (status?.toLowerCase() === USER_STATUS.INVITED) {
374
+ return colors.accents.warning;
375
+ }
376
+ const roleLower = role.toLowerCase();
377
+ switch (roleLower) {
378
+ case USER_ROLES.OWNER:
379
+ return colors.baseColors.primaryGreen;
380
+ case USER_ROLES.EDITOR:
381
+ return colors.baseColors.primaryBlue;
382
+ case USER_ROLES.VIEWER:
383
+ case USER_ROLES.AUDITOR:
384
+ return colors.baseColors.primaryPurple;
385
+ default:
386
+ return colors.baseColors.primaryGreen;
387
+ }
388
+ };
389
+ function GroupBadge({ role, status, children }) {
390
+ const badgeColor = getBadgeColor(role, status);
391
+ const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
392
+ return /* @__PURE__ */ jsxRuntime.jsx(Badge, { badgeColor, children: displayText });
393
+ }
394
+ var Badge = styled16__default.default.div`
395
+ display: inline-flex;
396
+ padding: 8px 28px;
397
+ border-radius: 100px;
398
+ background-color: ${({ badgeColor }) => getOpacity(badgeColor, 20)};
399
+ border: 1px solid ${({ badgeColor }) => badgeColor};
400
+ color: ${({ badgeColor }) => badgeColor};
401
+ font-size: ${FONT_SIZES.s}px;
402
+ font-weight: ${FONT_WEIGHTS.bold};
403
+ text-transform: capitalize;
404
+ `;
405
+ var Badge_default = GroupBadge;
406
+ function UserAvatar({
407
+ initials,
408
+ badgeColor,
409
+ onClick,
410
+ size = 56
411
+ }) {
412
+ if (!initials || !initials.trim()) {
413
+ return null;
414
+ }
415
+ if (onClick) {
416
+ return /* @__PURE__ */ jsxRuntime.jsx(
417
+ ProfileAvatar,
418
+ {
419
+ badgeColor,
420
+ size,
421
+ onClick,
422
+ children: initials
423
+ }
424
+ );
425
+ }
426
+ return /* @__PURE__ */ jsxRuntime.jsx(ColourAvatar, { badgeColor, size, children: initials });
427
+ }
428
+ var UserAvatar_default = UserAvatar;
429
+ var ColourAvatar = styled16__default.default.div`
430
+ width: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
431
+ height: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
432
+ border-radius: 50%;
433
+ background: ${({ badgeColor }) => badgeColor ? getOpacity(badgeColor, 20) : "linear-gradient(90deg, #6d65da 0.08%, #55a3bd 68.44%)"};
434
+ border: ${({ badgeColor }) => badgeColor ? `2px solid ${badgeColor}` : "none"};
435
+ display: flex;
436
+ align-items: center;
437
+ justify-content: center;
438
+ color: ${colors.baseColors.darkBlue1};
439
+ font-size: ${({ size }) => typeof size === "number" ? `${size * 0.325}px` : size === "large" ? `${FONT_SIZES.xs}px` : `${FONT_SIZES.s}px`};
440
+ font-weight: ${FONT_WEIGHTS.normal};
441
+ flex-shrink: 0;
442
+ `;
443
+ var ProfileAvatar = styled16__default.default(ColourAvatar)`
444
+ color: #fff;
445
+ background: ${colors.gradients.gradient1};
446
+ border: none;
447
+ border-radius: 999px;
448
+ line-height: 138%;
449
+ margin-bottom: 12px;
450
+ `;
361
451
  var FormField = ({
362
452
  id,
363
453
  label,
@@ -395,7 +485,7 @@ var FormField = ({
395
485
  displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
396
486
  ] });
397
487
  };
398
- var FormFieldWrapper = styled__default.default.div`
488
+ var FormFieldWrapper = styled16__default.default.div`
399
489
  display: flex;
400
490
  flex-direction: column;
401
491
 
@@ -443,7 +533,7 @@ var FormFieldTextarea = ({
443
533
  displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
444
534
  ] });
445
535
  };
446
- var FormFieldWrapper2 = styled__default.default.div`
536
+ var FormFieldWrapper2 = styled16__default.default.div`
447
537
  display: flex;
448
538
  flex-direction: column;
449
539
 
@@ -454,20 +544,333 @@ var FormFieldWrapper2 = styled__default.default.div`
454
544
  }
455
545
  `;
456
546
  var FormFieldTextarea_default = FormFieldTextarea;
547
+ var SearchContainer = styled16__default.default.div`
548
+ width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
549
+ `;
550
+ var InputWrapper = styled16__default.default.div`
551
+ position: relative;
552
+ width: 100%;
553
+ display: flex;
554
+ align-items: center;
555
+ `;
556
+ var IconWrapper = styled16__default.default.div`
557
+ position: absolute;
558
+ left: 17px;
559
+ top: 50%;
560
+ transform: translateY(-50%);
561
+ display: flex;
562
+ align-items: center;
563
+ justify-content: center;
564
+ color: ${colors.baseColors.grey3};
565
+ pointer-events: none;
566
+ z-index: 2;
567
+ `;
568
+ var StyledInput2 = styled16__default.default(Input_default)`
569
+ width: 100%;
570
+ padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
571
+ padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
572
+ font-size: ${({ fontSize = "s" }) => `${typography.fontSize[fontSize]}px`};
573
+ position: relative;
574
+ z-index: 1;
575
+
576
+ &:focus {
577
+ padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
578
+ }
579
+ `;
580
+ var ClearButton = styled16__default.default.button`
581
+ position: absolute;
582
+ right: 8px;
583
+ top: 50%;
584
+ transform: translateY(-50%);
585
+ background: none;
586
+ border: none;
587
+ cursor: pointer;
588
+ padding: 4px;
589
+ display: flex;
590
+ align-items: center;
591
+ justify-content: center;
592
+ color: ${colors.baseColors.grey3};
593
+ transition: color 0.2s ease;
594
+ z-index: 3;
595
+
596
+ &:hover {
597
+ color: ${colors.baseColors.grey1};
598
+ }
599
+
600
+ &:focus {
601
+ outline: 2px solid ${colors.baseColors.primaryPurple};
602
+ outline-offset: 2px;
603
+ border-radius: 4px;
604
+ }
605
+ `;
606
+ var ClearIcon = styled16__default.default.svg`
607
+ width: 16px;
608
+ height: 16px;
609
+ stroke-width: 2;
610
+ stroke-linecap: round;
611
+ stroke-linejoin: round;
612
+ `;
613
+ function SearchInput({
614
+ value,
615
+ onChange,
616
+ placeholder = "Search...",
617
+ showClearButton = false,
618
+ icon,
619
+ width = "208px",
620
+ fontSize = "s"
621
+ }) {
622
+ const handleChange = (e) => {
623
+ onChange(e.target.value);
624
+ };
625
+ const handleClear = () => {
626
+ onChange("");
627
+ };
628
+ const hasClearButton = showClearButton && !!value;
629
+ const hasIcon = !!icon;
630
+ return /* @__PURE__ */ jsxRuntime.jsx(SearchContainer, { width, children: /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { children: [
631
+ hasIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: icon }),
632
+ /* @__PURE__ */ jsxRuntime.jsx(
633
+ StyledInput2,
634
+ {
635
+ type: "text",
636
+ placeholder,
637
+ value,
638
+ onChange: handleChange,
639
+ autoComplete: "off",
640
+ hasClearButton,
641
+ hasIcon,
642
+ fontSize
643
+ }
644
+ ),
645
+ hasClearButton && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, type: "button", "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsxs(ClearIcon, { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
646
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
647
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
648
+ ] }) })
649
+ ] }) });
650
+ }
651
+ var SearchInput_default = SearchInput;
652
+ function TableElement({ children, ...rest }) {
653
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { ...rest, children });
654
+ }
655
+ var Table_default = TableElement;
656
+ var StyledTable = styled16__default.default.table`
657
+ width: 100%;
658
+ border-collapse: separate;
659
+ border-spacing: 0 4px;
660
+ `;
661
+ function TableHeader({ alignRight, children, ...rest }) {
662
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeader, { alignRight, ...rest, children });
663
+ }
664
+ var TableHeader_default = TableHeader;
665
+ var StyledTableHeader = styled16__default.default.th`
666
+ padding-bottom: 12px;
667
+ text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
668
+ font-size: ${FONT_SIZES.xs}px;
669
+ font-weight: ${FONT_WEIGHTS.bold};
670
+ padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
671
+ padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
672
+ `;
673
+ function TableCell({ children, colSpan, ...rest }) {
674
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledTableCell, { colSpan, ...rest, children });
675
+ }
676
+ var TableCell_default = TableCell;
677
+ var StyledTableCell = styled16__default.default.td`
678
+
679
+ `;
680
+ function TableRow({ children, ...rest }) {
681
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledTableRow, { ...rest, children });
682
+ }
683
+ var TableRow_default = TableRow;
684
+ var StyledTableRow = styled16__default.default.tr`
685
+ /* Base row styling */
686
+ `;
687
+ var TableRowWrapper = styled16__default.default.div`
688
+ border-radius: 6px;
689
+ border: 1px solid ${colors.baseColors.grey7};
690
+ display: flex;
691
+ align-items: center;
692
+ justify-content: space-between;
693
+ padding: 12px 24px;
694
+ `;
695
+ var CheckboxWrapper = styled16__default.default.div`
696
+ display: flex;
697
+ align-items: center;
698
+ `;
699
+ var ActionsWrapper = styled16__default.default.div`
700
+ display: flex;
701
+ align-items: center;
702
+ justify-content: flex-end;
703
+ `;
704
+ var AlignedTableCell = styled16__default.default(TableCell_default)`
705
+ padding-top: 12px;
706
+ padding-bottom: 12px;
707
+ padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
708
+ padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
709
+ text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
710
+ border: 1px solid ${colors.baseColors.grey7};
711
+ border-right: ${({ isLast }) => isLast ? `1px solid ${colors.baseColors.grey7}` : "none"};
712
+ border-left: ${({ isFirst }) => isFirst ? `1px solid ${colors.baseColors.grey7}` : "none"};
713
+ ${({ isFirst }) => isFirst && `border-top-left-radius: 6px; border-bottom-left-radius: 6px;`}
714
+ ${({ isLast }) => isLast && `border-top-right-radius: 6px; border-bottom-right-radius: 6px;`}
715
+ `;
716
+ var CellContent = styled16__default.default.div`
717
+ display: flex;
718
+ align-items: center;
719
+ justify-content: ${({ alignRight }) => alignRight ? "flex-end" : "flex-start"};
720
+ flex: ${({ alignRight }) => alignRight ? "0 0 auto" : "1"};
721
+ min-width: 0;
722
+ `;
723
+ var TableWrapper = styled16__default.default.div`
724
+ margin-top: 32px;
725
+ `;
726
+ var EmptyState = styled16__default.default.div`
727
+ padding: 24px;
728
+ text-align: center;
729
+ display: flex;
730
+ flex-direction: column;
731
+ gap: 8px;
732
+ `;
733
+ var EmptyHeader = styled16__default.default.div`
734
+ font-size: 26px;
735
+ font-weight: 700;
736
+ color: ${colors.baseColors.darkBlue1};
737
+ `;
738
+ var EmptySubheader = styled16__default.default.div`
739
+ font-size: 12px;
740
+ font-weight: 500;
741
+ color: ${colors.baseColors.grey3};
742
+ `;
743
+ function getCellContent(column, row, rowIndex) {
744
+ if (column.renderCell) {
745
+ return column.renderCell(row, rowIndex);
746
+ }
747
+ if (column.accessor) {
748
+ if (typeof column.accessor === "function") {
749
+ return column.accessor(row);
750
+ }
751
+ return String(row[column.accessor] ?? "");
752
+ }
753
+ return null;
754
+ }
755
+ function getTotalColumns(columns, showCheckboxes, renderActions) {
756
+ return columns.length + (showCheckboxes ? 1 : 0) + (renderActions ? 1 : 0);
757
+ }
758
+ function Table({
759
+ data,
760
+ columns,
761
+ getRowKey,
762
+ emptyMessage,
763
+ emptyHeader,
764
+ emptySubheader,
765
+ showCheckboxes = false,
766
+ onSelectAll,
767
+ onSelectRow,
768
+ selectedRows = /* @__PURE__ */ new Set(),
769
+ renderActions,
770
+ rowLayout = "aligned"
771
+ }) {
772
+ const getKey = getRowKey || ((row, index) => index);
773
+ const allSelected = data.length > 0 && data.every((row, idx) => selectedRows.has(getKey(row, idx)));
774
+ const someSelected = data.some((row, idx) => selectedRows.has(getKey(row, idx)));
775
+ const totalColumns = getTotalColumns(columns, showCheckboxes, renderActions);
776
+ const handleSelectAll = (e) => {
777
+ onSelectAll?.(e.target.checked);
778
+ };
779
+ const handleSelectRow = (row, e) => {
780
+ onSelectRow?.(row, e.target.checked);
781
+ };
782
+ return /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table_default, { children: [
783
+ /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow_default, { children: [
784
+ showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { children: /* @__PURE__ */ jsxRuntime.jsx(
785
+ "input",
786
+ {
787
+ type: "checkbox",
788
+ checked: allSelected,
789
+ ref: (input) => {
790
+ if (input) input.indeterminate = someSelected && !allSelected;
791
+ },
792
+ onChange: handleSelectAll,
793
+ "aria-label": "Select all rows"
794
+ }
795
+ ) }),
796
+ columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { alignRight: column.alignRight, children: column.label }, index)),
797
+ renderActions && /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { alignRight: true, children: " " })
798
+ ] }) }),
799
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyHeader ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
800
+ /* @__PURE__ */ jsxRuntime.jsx(EmptyHeader, { children: emptyHeader }),
801
+ emptySubheader && /* @__PURE__ */ jsxRuntime.jsx(EmptySubheader, { children: emptySubheader })
802
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: emptyMessage || "No data found" }) }) }) }) : data.map((row, rowIndex) => {
803
+ const rowKey = getKey(row, rowIndex);
804
+ const isSelected = selectedRows.has(rowKey);
805
+ if (rowLayout === "spaced") {
806
+ return /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsxs(TableRowWrapper, { children: [
807
+ showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
808
+ "input",
809
+ {
810
+ type: "checkbox",
811
+ checked: isSelected,
812
+ onChange: (e) => handleSelectRow(row, e),
813
+ "aria-label": `Select row ${rowIndex + 1}`
814
+ }
815
+ ) }),
816
+ columns.map((column, colIndex) => {
817
+ const cellContent = getCellContent(column, row, rowIndex);
818
+ const isLast = colIndex === columns.length - 1 && !renderActions;
819
+ return /* @__PURE__ */ jsxRuntime.jsx(CellContent, { alignRight: column.alignRight, isLast, children: cellContent }, colIndex);
820
+ }),
821
+ renderActions && /* @__PURE__ */ jsxRuntime.jsx(ActionsWrapper, { children: renderActions(row, rowIndex) })
822
+ ] }) }) }, rowKey);
823
+ } else {
824
+ return /* @__PURE__ */ jsxRuntime.jsxs(TableRow_default, { children: [
825
+ showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { isFirst: true, isLast: totalColumns === 1, children: /* @__PURE__ */ jsxRuntime.jsx(
826
+ "input",
827
+ {
828
+ type: "checkbox",
829
+ checked: isSelected,
830
+ onChange: (e) => handleSelectRow(row, e),
831
+ "aria-label": `Select row ${rowIndex + 1}`
832
+ }
833
+ ) }),
834
+ columns.map((column, colIndex) => {
835
+ const cellContent = getCellContent(column, row, rowIndex);
836
+ const isFirst = !showCheckboxes && colIndex === 0;
837
+ const isLast = !renderActions && colIndex === columns.length - 1;
838
+ return /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { alignRight: column.alignRight, isFirst, isLast, children: cellContent }, colIndex);
839
+ }),
840
+ renderActions && /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { alignRight: true, isLast: true, children: renderActions(row, rowIndex) })
841
+ ] }, rowKey);
842
+ }
843
+ }) })
844
+ ] }) });
845
+ }
846
+ var DataTable_default = Table;
457
847
 
848
+ exports.Badge = Badge_default;
458
849
  exports.Button = Button_default;
459
850
  exports.FONT_SIZES = FONT_SIZES;
460
851
  exports.FONT_SIZE_KEYS = FONT_SIZE_KEYS;
461
852
  exports.FONT_WEIGHTS = FONT_WEIGHTS;
462
853
  exports.FormField = FormField_default;
463
854
  exports.FormFieldTextarea = FormFieldTextarea_default;
855
+ exports.GroupBadge = GroupBadge;
464
856
  exports.HelperText = HelperText;
465
857
  exports.Input = Input_default;
466
858
  exports.Label = Label_default;
859
+ exports.SearchInput = SearchInput_default;
467
860
  exports.Tab = Tab_default;
861
+ exports.Table = DataTable_default;
862
+ exports.TableCell = TableCell_default;
863
+ exports.TableElement = Table_default;
864
+ exports.TableHeader = TableHeader_default;
865
+ exports.TableRow = TableRow_default;
866
+ exports.TableRowWrapper = TableRowWrapper;
468
867
  exports.Textarea = Textarea_default;
868
+ exports.USER_ROLES = USER_ROLES;
869
+ exports.USER_STATUS = USER_STATUS;
870
+ exports.UserAvatar = UserAvatar_default;
469
871
  exports.Variant = Variant;
470
872
  exports.colors = colors;
873
+ exports.getBadgeColor = getBadgeColor;
471
874
  exports.getOpacity = getOpacity;
472
875
  exports.typography = typography;
473
876
  //# sourceMappingURL=index.cjs.map