@seedgrid/fe-components 2026.3.5 → 2026.3.11

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 (122) hide show
  1. package/dist/buttons/SgFloatActionButton.d.ts +2 -3
  2. package/dist/buttons/SgFloatActionButton.d.ts.map +1 -1
  3. package/dist/buttons/SgFloatActionButton.js +3 -3
  4. package/dist/buttons/SgSplitButton.d.ts +1 -0
  5. package/dist/buttons/SgSplitButton.d.ts.map +1 -1
  6. package/dist/buttons/SgSplitButton.js +2 -2
  7. package/dist/commons/SgBadge.d.ts +2 -1
  8. package/dist/commons/SgBadge.d.ts.map +1 -1
  9. package/dist/commons/SgBadge.js +8 -7
  10. package/dist/commons/SgBadgeOverlay.d.ts +1 -0
  11. package/dist/commons/SgBadgeOverlay.d.ts.map +1 -1
  12. package/dist/commons/SgBadgeOverlay.js +2 -2
  13. package/dist/commons/SgToastHost.d.ts +17 -0
  14. package/dist/commons/SgToastHost.d.ts.map +1 -0
  15. package/dist/commons/SgToastHost.js +45 -0
  16. package/dist/commons/SgToaster.d.ts +3 -1
  17. package/dist/commons/SgToaster.d.ts.map +1 -1
  18. package/dist/commons/SgToaster.js +13 -0
  19. package/dist/commons/sgToastHostRegistry.d.ts +7 -0
  20. package/dist/commons/sgToastHostRegistry.d.ts.map +1 -0
  21. package/dist/commons/sgToastHostRegistry.js +41 -0
  22. package/dist/digits/segment-digit/SgSegmentDigit.d.ts +15 -0
  23. package/dist/digits/segment-digit/SgSegmentDigit.d.ts.map +1 -0
  24. package/dist/digits/segment-digit/SgSegmentDigit.js +96 -0
  25. package/dist/digits/segment-digit/index.d.ts +3 -0
  26. package/dist/digits/segment-digit/index.d.ts.map +1 -0
  27. package/dist/digits/segment-digit/index.js +1 -0
  28. package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.d.ts +36 -0
  29. package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.d.ts.map +1 -0
  30. package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.js +123 -0
  31. package/dist/digits/seven-segment-digit/index.d.ts +3 -0
  32. package/dist/digits/seven-segment-digit/index.d.ts.map +1 -0
  33. package/dist/digits/seven-segment-digit/index.js +1 -0
  34. package/dist/gadgets/calendar/SgCalendar.d.ts +29 -0
  35. package/dist/gadgets/calendar/SgCalendar.d.ts.map +1 -0
  36. package/dist/gadgets/calendar/SgCalendar.js +248 -0
  37. package/dist/gadgets/calendar/index.d.ts +3 -0
  38. package/dist/gadgets/calendar/index.d.ts.map +1 -0
  39. package/dist/gadgets/calendar/index.js +1 -0
  40. package/dist/gadgets/clock/SgClock.d.ts +6 -2
  41. package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
  42. package/dist/gadgets/clock/SgClock.js +84 -125
  43. package/dist/gadgets/string-animator/SgStringAnimator.d.ts +1 -1
  44. package/dist/gadgets/string-animator/SgStringAnimator.d.ts.map +1 -1
  45. package/dist/gadgets/string-animator/SgStringAnimator.js +1 -1
  46. package/dist/i18n/en-US.d.ts.map +1 -1
  47. package/dist/i18n/en-US.js +26 -1
  48. package/dist/i18n/es.d.ts.map +1 -1
  49. package/dist/i18n/es.js +26 -1
  50. package/dist/i18n/pt-BR.d.ts.map +1 -1
  51. package/dist/i18n/pt-BR.js +26 -1
  52. package/dist/i18n/pt-PT.d.ts.map +1 -1
  53. package/dist/i18n/pt-PT.js +26 -1
  54. package/dist/index.d.ts +22 -4
  55. package/dist/index.d.ts.map +1 -1
  56. package/dist/index.js +10 -1
  57. package/dist/inputs/SgCheckboxGroup.d.ts +46 -0
  58. package/dist/inputs/SgCheckboxGroup.d.ts.map +1 -0
  59. package/dist/inputs/SgCheckboxGroup.js +158 -0
  60. package/dist/inputs/SgDatatable.d.ts +104 -0
  61. package/dist/inputs/SgDatatable.d.ts.map +1 -0
  62. package/dist/inputs/SgDatatable.js +441 -0
  63. package/dist/inputs/{SgCurrencyEdit.d.ts → SgInputCurrency.d.ts} +5 -3
  64. package/dist/inputs/SgInputCurrency.d.ts.map +1 -0
  65. package/dist/inputs/{SgCurrencyEdit.js → SgInputCurrency.js} +7 -5
  66. package/dist/inputs/SgOrderList.d.ts +52 -0
  67. package/dist/inputs/SgOrderList.d.ts.map +1 -0
  68. package/dist/inputs/SgOrderList.js +316 -0
  69. package/dist/inputs/SgPickList.d.ts +71 -0
  70. package/dist/inputs/SgPickList.d.ts.map +1 -0
  71. package/dist/inputs/SgPickList.js +362 -0
  72. package/dist/inputs/SgRadioGroup.d.ts +1 -2
  73. package/dist/inputs/SgRadioGroup.d.ts.map +1 -1
  74. package/dist/inputs/SgRadioGroup.js +5 -49
  75. package/dist/inputs/SgRating.d.ts +2 -0
  76. package/dist/inputs/SgRating.d.ts.map +1 -1
  77. package/dist/inputs/SgRating.js +2 -2
  78. package/dist/inputs/SgTextEditor.d.ts +2 -0
  79. package/dist/inputs/SgTextEditor.d.ts.map +1 -1
  80. package/dist/inputs/SgTextEditor.js +2 -2
  81. package/dist/layout/SgCard.d.ts +13 -1
  82. package/dist/layout/SgCard.d.ts.map +1 -1
  83. package/dist/layout/SgCard.js +231 -15
  84. package/dist/layout/SgCarousel.d.ts +2 -0
  85. package/dist/layout/SgCarousel.d.ts.map +1 -1
  86. package/dist/layout/SgCarousel.js +2 -2
  87. package/dist/layout/SgDockLayout.d.ts +1 -0
  88. package/dist/layout/SgDockLayout.d.ts.map +1 -1
  89. package/dist/layout/SgDockLayout.js +2 -2
  90. package/dist/layout/SgDockZone.d.ts +1 -0
  91. package/dist/layout/SgDockZone.d.ts.map +1 -1
  92. package/dist/layout/SgDockZone.js +2 -2
  93. package/dist/layout/SgGroupBox.d.ts +1 -0
  94. package/dist/layout/SgGroupBox.d.ts.map +1 -1
  95. package/dist/layout/SgGroupBox.js +3 -2
  96. package/dist/layout/SgMenu.d.ts +2 -2
  97. package/dist/layout/SgMenu.d.ts.map +1 -1
  98. package/dist/layout/SgMenu.js +22 -22
  99. package/dist/layout/SgPageControl.d.ts +2 -1
  100. package/dist/layout/SgPageControl.d.ts.map +1 -1
  101. package/dist/layout/SgPageControl.js +4 -4
  102. package/dist/layout/SgToolBar.d.ts +2 -0
  103. package/dist/layout/SgToolBar.d.ts.map +1 -1
  104. package/dist/layout/SgToolBar.js +4 -3
  105. package/dist/layout/SgTreeView.d.ts +1 -0
  106. package/dist/layout/SgTreeView.d.ts.map +1 -1
  107. package/dist/layout/SgTreeView.js +2 -2
  108. package/dist/others/SgPlayground.d.ts +2 -0
  109. package/dist/others/SgPlayground.d.ts.map +1 -1
  110. package/dist/others/SgPlayground.js +4 -4
  111. package/dist/overlay/SgConfirmationDialog.d.ts +34 -0
  112. package/dist/overlay/SgConfirmationDialog.d.ts.map +1 -0
  113. package/dist/overlay/SgConfirmationDialog.js +81 -0
  114. package/dist/overlay/SgDialog.d.ts +6 -0
  115. package/dist/overlay/SgDialog.d.ts.map +1 -1
  116. package/dist/overlay/SgDialog.js +28 -3
  117. package/dist/sandbox.cjs +100 -82
  118. package/dist/wizard/SgWizard.d.ts +2 -0
  119. package/dist/wizard/SgWizard.d.ts.map +1 -1
  120. package/dist/wizard/SgWizard.js +2 -2
  121. package/package.json +1 -1
  122. package/dist/inputs/SgCurrencyEdit.d.ts.map +0 -1
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export { SgInputText } from "./inputs/SgInputText";
2
2
  export { SgInputNumber } from "./inputs/SgInputNumber";
3
- export { SgCurrencyEdit } from "./inputs/SgCurrencyEdit";
3
+ export { SgInputCurrency, SgCurrencyEdit } from "./inputs/SgInputCurrency";
4
4
  export { SgInputTextArea } from "./inputs/SgInputTextArea";
5
5
  export { SgInputSelect } from "./inputs/SgInputSelect";
6
6
  export { SgInputCPF } from "./inputs/SgInputCPF";
@@ -21,13 +21,19 @@ export { SgCombobox } from "./inputs/SgCombobox";
21
21
  export { SgTextEditor } from "./inputs/SgTextEditor";
22
22
  export { SgRating } from "./inputs/SgRating";
23
23
  export { SgRadioGroup } from "./inputs/SgRadioGroup";
24
+ export { SgCheckboxGroup } from "./inputs/SgCheckboxGroup";
25
+ export { SgOrderList } from "./inputs/SgOrderList";
26
+ export { SgPickList } from "./inputs/SgPickList";
27
+ export { SgDatatable } from "./inputs/SgDatatable";
24
28
  export { SgButton } from "./buttons/SgButton";
25
29
  export { SgSplitButton } from "./buttons/SgSplitButton";
26
30
  export { SgFloatActionButton } from "./buttons/SgFloatActionButton";
27
31
  export { SgDockMenu } from "./menus/SgDockMenu";
28
32
  export { SgToaster } from "./commons/SgToaster";
33
+ export { SgToastHost } from "./commons/SgToastHost";
29
34
  export { SgPopup } from "./overlay/SgPopup";
30
35
  export { SgDialog } from "./overlay/SgDialog";
36
+ export { SgConfirmationDialog } from "./overlay/SgConfirmationDialog";
31
37
  export { SgBadge } from "./commons/SgBadge";
32
38
  export { SgBadgeOverlay } from "./commons/SgBadgeOverlay";
33
39
  export { SgSkeleton } from "./commons/SgSkeleton";
@@ -56,12 +62,15 @@ export { SgDockScreen } from "./layout/SgDockScreen";
56
62
  export { SgTreeView, sgTreeFromJson, sgTreeFromJsonWithChecked } from "./layout/SgTreeView";
57
63
  export { SgTimeProvider, useSgTime } from "./gadgets/clock/SgTimeProvider";
58
64
  export { SgClock } from "./gadgets/clock/SgClock";
65
+ export { SgCalendar } from "./gadgets/calendar";
59
66
  export { SgFlipDigit } from "./digits/flip-digit";
60
67
  export { SgFadeDigit } from "./digits/fade-digit";
61
68
  export { SgRoller3DDigit } from "./digits/roller3d-digit";
62
69
  export { SgMatrixDigit } from "./digits/matrix-digit";
63
70
  export { SgNeonDigit } from "./digits/neon-digit";
64
71
  export { SgDiscardDigit } from "./digits/discard-digit";
72
+ export { SgSegmentDigit } from "./digits/segment-digit";
73
+ export { SgSevenSegmentDigit } from "./digits/seven-segment-digit";
65
74
  export { SgStringAnimator, SG_STRING_ANIMATOR_DEFAULT_CHARSET } from "./gadgets/string-animator";
66
75
  export { SgQRCode } from "./gadgets/qr-code";
67
76
  export { SgLinearGauge, SgRadialGauge } from "./gadgets/gauge";
@@ -0,0 +1,46 @@
1
+ import React from "react";
2
+ import { UseFormRegister, FieldValues } from "react-hook-form";
3
+ import { type SgGroupBoxProps } from "../layout/SgGroupBox";
4
+ export type SgCheckboxGroupOrientation = "horizontal" | "vertical";
5
+ export type SgCheckboxGroupSelectionStyle = "checkbox" | "highlight";
6
+ export interface SgCheckboxGroupOption {
7
+ label: string;
8
+ value: string | number;
9
+ checked?: boolean;
10
+ icon?: React.ReactNode;
11
+ disabled?: boolean;
12
+ }
13
+ export type SgCheckboxGroupRef = {
14
+ getChecked: () => (string | number)[];
15
+ setChecked: (values: (string | number)[]) => void;
16
+ checkAll: () => void;
17
+ clearAll: () => void;
18
+ };
19
+ export interface SgCheckboxGroupProps {
20
+ id?: string;
21
+ title?: string;
22
+ source: SgCheckboxGroupOption[];
23
+ value?: (string | number)[];
24
+ orientation?: SgCheckboxGroupOrientation;
25
+ selectionStyle?: SgCheckboxGroupSelectionStyle;
26
+ iconOnly?: boolean;
27
+ disabled?: boolean;
28
+ readOnly?: boolean;
29
+ required?: boolean;
30
+ onChange?: (value: (string | number)[]) => void;
31
+ showCheckAll?: boolean;
32
+ checkAllLabel?: string;
33
+ checkAllIcon?: React.ReactNode;
34
+ name?: string;
35
+ control?: any;
36
+ register?: UseFormRegister<FieldValues>;
37
+ error?: string;
38
+ className?: string;
39
+ style?: React.CSSProperties;
40
+ optionClassName?: string;
41
+ groupBoxProps?: Omit<Partial<SgGroupBoxProps>, "children" | "title"> & {
42
+ title?: string;
43
+ };
44
+ }
45
+ export declare const SgCheckboxGroup: React.ForwardRefExoticComponent<SgCheckboxGroupProps & React.RefAttributes<SgCheckboxGroupRef>>;
46
+ //# sourceMappingURL=SgCheckboxGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SgCheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/inputs/SgCheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,WAAW,EAAc,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,MAAM,0BAA0B,GAAG,YAAY,GAAG,UAAU,CAAC;AACnE,MAAM,MAAM,6BAA6B,GAAG,UAAU,GAAG,WAAW,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,UAAU,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,qBAAqB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,cAAc,CAAC,EAAE,6BAA6B,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAGhD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAG/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAiWD,eAAO,MAAM,eAAe,iGAE3B,CAAC"}
@@ -0,0 +1,158 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import React from "react";
4
+ import { Controller } from "react-hook-form";
5
+ import { SgGroupBox } from "../layout/SgGroupBox";
6
+ import { t, useComponentsI18n } from "../i18n";
7
+ function deriveInitialValue(source) {
8
+ return source.filter((opt) => opt.checked).map((opt) => opt.value);
9
+ }
10
+ // Internal component — plain function, no forwardRef, safe for self-reference inside Controller
11
+ function SgCheckboxGroupBase(props, imperativeRef) {
12
+ const i18n = useComponentsI18n();
13
+ const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "checkbox", iconOnly = false, disabled = false, readOnly = false, required = false, onChange, showCheckAll = false, checkAllLabel, checkAllIcon, name, control, register, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
14
+ const resolvedCheckAllLabel = checkAllLabel ?? t(i18n, "components.checkboxgroup.checkAll") ?? "Selecionar todos";
15
+ const resolvedGroupBoxTitle = (() => {
16
+ const baseTitle = groupBoxProps.title ?? title ?? "";
17
+ if (!required || !baseTitle.trim())
18
+ return baseTitle;
19
+ return baseTitle.includes("*") ? baseTitle : `${baseTitle} *`;
20
+ })();
21
+ const [internalValue, setInternalValue] = React.useState(() => controlledValue ?? deriveInitialValue(source));
22
+ const isControlled = controlledValue !== undefined;
23
+ const currentValue = isControlled ? controlledValue : internalValue;
24
+ const isHighlightSelection = selectionStyle === "highlight";
25
+ const handleChange = (optionValue) => {
26
+ if (disabled || readOnly)
27
+ return;
28
+ const next = currentValue.includes(optionValue)
29
+ ? currentValue.filter((v) => v !== optionValue)
30
+ : [...currentValue, optionValue];
31
+ if (!isControlled)
32
+ setInternalValue(next);
33
+ onChange?.(next);
34
+ };
35
+ const handleCheckAll = () => {
36
+ if (disabled || readOnly)
37
+ return;
38
+ const enabledValues = source.filter((opt) => !opt.disabled).map((opt) => opt.value);
39
+ const next = currentValue.length === enabledValues.length ? [] : enabledValues;
40
+ if (!isControlled)
41
+ setInternalValue(next);
42
+ onChange?.(next);
43
+ };
44
+ React.useImperativeHandle(imperativeRef, () => ({
45
+ getChecked: () => currentValue,
46
+ setChecked: (values) => {
47
+ if (!isControlled)
48
+ setInternalValue(values);
49
+ onChange?.(values);
50
+ },
51
+ checkAll: () => {
52
+ const enabledValues = source.filter((opt) => !opt.disabled).map((opt) => opt.value);
53
+ if (!isControlled)
54
+ setInternalValue(enabledValues);
55
+ onChange?.(enabledValues);
56
+ },
57
+ clearAll: () => {
58
+ if (!isControlled)
59
+ setInternalValue([]);
60
+ onChange?.([]);
61
+ }
62
+ }));
63
+ // Check all state
64
+ const enabledValues = source.filter((opt) => !opt.disabled).map((opt) => opt.value);
65
+ const checkedEnabledCount = enabledValues.filter((v) => currentValue.includes(v)).length;
66
+ const allChecked = enabledValues.length > 0 && checkedEnabledCount === enabledValues.length;
67
+ const someChecked = checkedEnabledCount > 0 && !allChecked;
68
+ const checkAllRef = React.useRef(null);
69
+ React.useEffect(() => {
70
+ if (checkAllRef.current) {
71
+ checkAllRef.current.indeterminate = someChecked;
72
+ }
73
+ }, [someChecked]);
74
+ const renderOption = (option, index) => {
75
+ const isSelected = currentValue.includes(option.value);
76
+ const isDisabled = disabled || option.disabled;
77
+ const inputClassName = isHighlightSelection
78
+ ? "sr-only"
79
+ : "w-4 h-4 rounded text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed";
80
+ if (isHighlightSelection) {
81
+ return (_jsxs("label", { className: `
82
+ flex items-center gap-2 border px-3 py-2 transition-all duration-150 select-none
83
+ ${orientation === "vertical" ? "w-full -mt-px rounded-none first:mt-0 first:rounded-t-md last:rounded-b-md" : "inline-flex rounded-md"}
84
+ ${iconOnly ? "justify-center" : ""}
85
+ ${isSelected
86
+ ? "relative z-10 translate-y-px rounded-md border-[rgb(var(--sg-primary-300))] bg-[rgb(var(--sg-primary-100))] ring-1 ring-[rgb(var(--sg-primary-200))] shadow-[inset_0_2px_4px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.75),0_1px_2px_rgba(15,23,42,0.08)]"
87
+ : "border-[rgb(var(--sg-primary-200))] bg-[rgb(var(--sg-primary-50))] shadow-[0_2px_0_rgba(148,163,184,0.32),0_6px_10px_rgba(15,23,42,0.07)]"}
88
+ ${isDisabled
89
+ ? "cursor-not-allowed opacity-50"
90
+ : readOnly
91
+ ? "cursor-default"
92
+ : `cursor-pointer ${isSelected ? "hover:bg-[rgb(var(--sg-primary-200))]" : "hover:-translate-y-px hover:bg-[rgb(var(--sg-primary-100))] hover:shadow-[0_3px_0_rgba(148,163,184,0.32),0_10px_14px_rgba(15,23,42,0.1)]"}`}
93
+ focus-within:outline-none
94
+ focus-within:ring-2
95
+ focus-within:ring-[rgb(var(--sg-ring))]
96
+ ${optionClassName}
97
+ `, children: [_jsx("input", { type: "checkbox", name: name || id, value: option.value, checked: isSelected, disabled: isDisabled || readOnly, onChange: () => handleChange(option.value), className: inputClassName }), option.icon ? (_jsx("span", { className: `
98
+ flex items-center justify-center transition-transform duration-150
99
+ ${isSelected ? "scale-110" : "scale-100"}
100
+ `, children: option.icon })) : null, !iconOnly ? (_jsx("span", { className: `
101
+ text-[rgb(var(--sg-text))] transition-[font-size] duration-150
102
+ ${isSelected ? "text-[15px] font-medium" : "text-sm"}
103
+ `, children: option.label })) : null] }, `${option.value}-${index}`));
104
+ }
105
+ return (_jsxs("label", { className: `
106
+ inline-flex items-center gap-2 cursor-pointer select-none
107
+ ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
108
+ ${readOnly ? "cursor-default" : ""}
109
+ ${optionClassName}
110
+ `, children: [_jsx("input", { type: "checkbox", name: name || id, value: option.value, checked: isSelected, disabled: isDisabled || readOnly, onChange: () => handleChange(option.value), className: inputClassName }), option.icon && (_jsx("span", { className: "flex items-center justify-center", children: option.icon })), !iconOnly && (_jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: option.label }))] }, `${option.value}-${index}`));
111
+ };
112
+ const checkAllNode = showCheckAll ? (_jsxs("div", { className: `${isHighlightSelection ? "px-3 pt-1 pb-2" : "pb-2"}`, children: [_jsxs("label", { className: `
113
+ inline-flex items-center gap-2 select-none font-medium
114
+ ${disabled ? "opacity-50 cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"}
115
+ `, children: [_jsx("input", { ref: checkAllRef, type: "checkbox", checked: allChecked, disabled: disabled || readOnly, onChange: handleCheckAll, className: "w-4 h-4 rounded text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed" }), checkAllIcon ? (_jsx("span", { className: "flex items-center justify-center", children: checkAllIcon })) : null, _jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: resolvedCheckAllLabel })] }), _jsx("hr", { className: "mt-2 border-[rgb(var(--sg-border))]" })] })) : null;
116
+ const groupContent = (_jsxs(_Fragment, { children: [checkAllNode, _jsx("div", { className: `
117
+ flex ${isHighlightSelection ? "gap-0" : "gap-4"}
118
+ ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
119
+ `, role: "group", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderOption(option, index)) })] }));
120
+ // React Hook Form — Controller
121
+ if (control && name) {
122
+ return (_jsx(Controller, { name: name, control: control, rules: { required: required ? t(i18n, "components.inputs.required") : false }, render: ({ field, fieldState }) => SgCheckboxGroupBase({
123
+ ...props,
124
+ value: field.value ?? [],
125
+ onChange: (val) => {
126
+ field.onChange(val);
127
+ onChange?.(val);
128
+ },
129
+ error: fieldState.error?.message,
130
+ control: undefined
131
+ }, undefined) }));
132
+ }
133
+ // React Hook Form — register
134
+ if (register && name) {
135
+ const registration = register(name, {
136
+ required: required ? t(i18n, "components.inputs.required") : false
137
+ });
138
+ return (_jsxs("div", { className: className, style: style, children: [_jsxs(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", children: [checkAllNode, _jsx("div", { className: `
139
+ flex ${isHighlightSelection ? "gap-0" : "gap-4"}
140
+ ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
141
+ ${showCheckAll && !isHighlightSelection ? "mt-1" : ""}
142
+ `, role: "group", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => {
143
+ const isSelected = currentValue.includes(option.value);
144
+ const isDisabled = disabled || option.disabled;
145
+ return (_jsxs("label", { className: `
146
+ inline-flex items-center gap-2 cursor-pointer select-none
147
+ ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
148
+ ${readOnly ? "cursor-default" : ""}
149
+ ${optionClassName}
150
+ `, children: [_jsx("input", { type: "checkbox", ...registration, value: option.value, checked: isSelected, disabled: isDisabled || readOnly, onChange: (event) => {
151
+ registration.onChange(event);
152
+ handleChange(option.value);
153
+ }, className: "w-4 h-4 rounded text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed" }), option.icon && (_jsx("span", { className: "flex items-center justify-center", children: option.icon })), !iconOnly && (_jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: option.label }))] }, `${option.value}-${index}`));
154
+ }) })] }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
155
+ }
156
+ return (_jsxs("div", { className: className, style: style, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", className: groupBoxProps.className || "", children: groupContent }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
157
+ }
158
+ export const SgCheckboxGroup = React.forwardRef((props, ref) => SgCheckboxGroupBase(props, ref));
@@ -0,0 +1,104 @@
1
+ import React from "react";
2
+ import { type SgGroupBoxProps } from "../layout/SgGroupBox";
3
+ export type SgDatatableRow = Record<string, unknown>;
4
+ export type SgDatatableSortOrder = 1 | -1 | 0;
5
+ export type SgDatatableSelectionMode = "single" | "multiple";
6
+ export type SgDatatableFilterMatchMode = "contains" | "startsWith" | "endsWith" | "equals";
7
+ export type SgDatatableSortEvent = {
8
+ sortField: string | null;
9
+ sortOrder: SgDatatableSortOrder;
10
+ };
11
+ export type SgDatatablePageEvent = {
12
+ first: number;
13
+ rows: number;
14
+ page: number;
15
+ pageCount: number;
16
+ totalRecords: number;
17
+ };
18
+ export type SgDatatableFilterEvent = {
19
+ filters: Record<string, string>;
20
+ globalFilter: string;
21
+ };
22
+ export type SgDatatableColumnAlign = "left" | "center" | "right";
23
+ export type SgDatatableCellMeta<T extends SgDatatableRow> = {
24
+ rowIndex: number;
25
+ field: string | undefined;
26
+ value: unknown;
27
+ rowData: T;
28
+ };
29
+ export type SgDatatableColumn<T extends SgDatatableRow = SgDatatableRow> = {
30
+ field?: string;
31
+ header: React.ReactNode;
32
+ body?: (rowData: T, meta: SgDatatableCellMeta<T>) => React.ReactNode;
33
+ footer?: React.ReactNode | ((rows: T[]) => React.ReactNode);
34
+ sortable?: boolean;
35
+ sortField?: string;
36
+ sortFunction?: (rowA: T, rowB: T) => number;
37
+ filter?: boolean;
38
+ filterField?: string;
39
+ filterPlaceholder?: string;
40
+ filterMatchMode?: SgDatatableFilterMatchMode;
41
+ excludeGlobalFilter?: boolean;
42
+ align?: SgDatatableColumnAlign;
43
+ width?: number | string;
44
+ minWidth?: number | string;
45
+ hidden?: boolean;
46
+ className?: string;
47
+ headerClassName?: string;
48
+ bodyClassName?: string | ((rowData: T, rowIndex: number) => string | undefined);
49
+ };
50
+ export type SgDatatableSelection<T extends SgDatatableRow> = T | T[] | null;
51
+ export type SgDatatableRef<T extends SgDatatableRow = SgDatatableRow> = {
52
+ getProcessedRows: () => T[];
53
+ getPagedRows: () => T[];
54
+ clearFilters: () => void;
55
+ clearSelection: () => void;
56
+ resetSort: () => void;
57
+ resetPage: () => void;
58
+ goToPage: (page: number) => void;
59
+ };
60
+ export type SgDatatableProps<T extends SgDatatableRow = SgDatatableRow> = {
61
+ id?: string;
62
+ title?: string;
63
+ value: T[];
64
+ columns: SgDatatableColumn<T>[];
65
+ dataKey?: string;
66
+ lazy?: boolean;
67
+ totalRecords?: number;
68
+ paginator?: boolean;
69
+ rows?: number;
70
+ first?: number;
71
+ rowsPerPageOptions?: number[];
72
+ onPage?: (event: SgDatatablePageEvent) => void;
73
+ sortField?: string | null;
74
+ sortOrder?: SgDatatableSortOrder;
75
+ onSort?: (event: SgDatatableSortEvent) => void;
76
+ removableSort?: boolean;
77
+ selectionMode?: SgDatatableSelectionMode;
78
+ selection?: SgDatatableSelection<T>;
79
+ onSelectionChange?: (selection: SgDatatableSelection<T>) => void;
80
+ showGlobalFilter?: boolean;
81
+ globalFilter?: string;
82
+ globalFilterPlaceholder?: string;
83
+ onGlobalFilterChange?: (value: string) => void;
84
+ showColumnFilters?: boolean;
85
+ filters?: Record<string, string>;
86
+ onFilter?: (event: SgDatatableFilterEvent) => void;
87
+ showClearFiltersButton?: boolean;
88
+ stripedRows?: boolean;
89
+ showGridlines?: boolean;
90
+ hoverableRows?: boolean;
91
+ loading?: boolean;
92
+ emptyMessage?: string;
93
+ className?: string;
94
+ style?: React.CSSProperties;
95
+ tableClassName?: string;
96
+ rowClassName?: string | ((rowData: T, rowIndex: number) => string | undefined);
97
+ groupBoxProps?: Omit<Partial<SgGroupBoxProps>, "children" | "title"> & {
98
+ title?: string;
99
+ };
100
+ };
101
+ export declare const SgDatatable: <T extends SgDatatableRow>(props: SgDatatableProps<T> & {
102
+ ref?: React.Ref<SgDatatableRef<T>>;
103
+ }) => React.ReactElement;
104
+ //# sourceMappingURL=SgDatatable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SgDatatable.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.tsx"],"names":[],"mappings":"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"}