@seedgrid/fe-components 2026.3.20 → 2026.3.26

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 (172) hide show
  1. package/dist/buttons/SgFloatActionButton.d.ts.map +1 -1
  2. package/dist/buttons/SgFloatActionButton.js +5 -26
  3. package/dist/buttons/SgSplitButton.d.ts.map +1 -1
  4. package/dist/buttons/SgSplitButton.js +3 -1
  5. package/dist/buttons/fab-helpers.d.ts +6 -0
  6. package/dist/buttons/fab-helpers.d.ts.map +1 -0
  7. package/dist/buttons/fab-helpers.js +29 -0
  8. package/dist/commons/SgAvatar.d.ts.map +1 -1
  9. package/dist/commons/SgAvatar.js +6 -3
  10. package/dist/commons/SgBadge.d.ts.map +1 -1
  11. package/dist/commons/SgBadge.js +5 -2
  12. package/dist/commons/SgToast.d.ts.map +1 -1
  13. package/dist/commons/SgToast.js +3 -1
  14. package/dist/commons/SgToaster.d.ts.map +1 -1
  15. package/dist/commons/SgToaster.js +3 -1
  16. package/dist/environment/SgEnvironmentProvider.d.ts.map +1 -1
  17. package/dist/environment/SgEnvironmentProvider.js +10 -15
  18. package/dist/environment/persistent-state.d.ts +22 -0
  19. package/dist/environment/persistent-state.d.ts.map +1 -0
  20. package/dist/environment/persistent-state.js +33 -0
  21. package/dist/gadgets/calendar/SgCalendar.d.ts.map +1 -1
  22. package/dist/gadgets/calendar/SgCalendar.js +5 -23
  23. package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
  24. package/dist/gadgets/clock/SgClock.js +12 -10
  25. package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts +2 -1
  26. package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map +1 -1
  27. package/dist/gadgets/clock/themes/SgClockThemePicker.js +23 -28
  28. package/dist/gadgets/clock/themes/search.d.ts +9 -0
  29. package/dist/gadgets/clock/themes/search.d.ts.map +1 -0
  30. package/dist/gadgets/clock/themes/search.js +15 -0
  31. package/dist/gadgets/gauge/SgLinearGauge.d.ts.map +1 -1
  32. package/dist/gadgets/gauge/SgLinearGauge.js +39 -28
  33. package/dist/gadgets/gauge/SgRadialGauge.d.ts.map +1 -1
  34. package/dist/gadgets/gauge/SgRadialGauge.js +44 -37
  35. package/dist/gadgets/gauge/math.d.ts +90 -0
  36. package/dist/gadgets/gauge/math.d.ts.map +1 -0
  37. package/dist/gadgets/gauge/math.js +81 -0
  38. package/dist/gadgets/qr-code/SgQRCode.d.ts.map +1 -1
  39. package/dist/gadgets/qr-code/SgQRCode.js +3 -1
  40. package/dist/i18n/en-US.d.ts.map +1 -1
  41. package/dist/i18n/en-US.js +97 -1
  42. package/dist/i18n/es.d.ts.map +1 -1
  43. package/dist/i18n/es.js +153 -57
  44. package/dist/i18n/fr.d.ts +3 -0
  45. package/dist/i18n/fr.d.ts.map +1 -0
  46. package/dist/i18n/fr.js +206 -0
  47. package/dist/i18n/index.d.ts +5 -1
  48. package/dist/i18n/index.d.ts.map +1 -1
  49. package/dist/i18n/index.js +50 -14
  50. package/dist/i18n/pt-BR.d.ts.map +1 -1
  51. package/dist/i18n/pt-BR.js +97 -1
  52. package/dist/i18n/pt-PT.d.ts.map +1 -1
  53. package/dist/i18n/pt-PT.js +97 -1
  54. package/dist/index.d.ts +12 -2
  55. package/dist/index.d.ts.map +1 -1
  56. package/dist/index.js +10 -2
  57. package/dist/inputs/SgAutocomplete.d.ts +1 -1
  58. package/dist/inputs/SgAutocomplete.d.ts.map +1 -1
  59. package/dist/inputs/SgAutocomplete.js +7 -4
  60. package/dist/inputs/SgCheckboxGroup.d.ts +2 -6
  61. package/dist/inputs/SgCheckboxGroup.d.ts.map +1 -1
  62. package/dist/inputs/SgCheckboxGroup.js +6 -6
  63. package/dist/inputs/SgCombobox.d.ts.map +1 -1
  64. package/dist/inputs/SgCombobox.js +11 -2
  65. package/dist/inputs/SgInputBirthDate.d.ts.map +1 -1
  66. package/dist/inputs/SgInputBirthDate.js +6 -1
  67. package/dist/inputs/SgInputCNPJ.d.ts +3 -1
  68. package/dist/inputs/SgInputCNPJ.d.ts.map +1 -1
  69. package/dist/inputs/SgInputCNPJ.js +4 -3
  70. package/dist/inputs/SgInputCPF.d.ts +3 -1
  71. package/dist/inputs/SgInputCPF.d.ts.map +1 -1
  72. package/dist/inputs/SgInputCPF.js +8 -3
  73. package/dist/inputs/SgInputCPFCNPJ.d.ts +3 -1
  74. package/dist/inputs/SgInputCPFCNPJ.d.ts.map +1 -1
  75. package/dist/inputs/SgInputCPFCNPJ.js +8 -3
  76. package/dist/inputs/SgInputCurrency.d.ts +3 -7
  77. package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
  78. package/dist/inputs/SgInputCurrency.js +5 -2
  79. package/dist/inputs/SgInputDate.d.ts.map +1 -1
  80. package/dist/inputs/SgInputDate.js +6 -1
  81. package/dist/inputs/SgInputEmail.d.ts.map +1 -1
  82. package/dist/inputs/SgInputEmail.js +1 -1
  83. package/dist/inputs/SgInputNumber.d.ts +3 -7
  84. package/dist/inputs/SgInputNumber.d.ts.map +1 -1
  85. package/dist/inputs/SgInputNumber.js +5 -2
  86. package/dist/inputs/SgInputOTP.d.ts +5 -12
  87. package/dist/inputs/SgInputOTP.d.ts.map +1 -1
  88. package/dist/inputs/SgInputOTP.js +7 -4
  89. package/dist/inputs/SgInputPassword.d.ts.map +1 -1
  90. package/dist/inputs/SgInputPassword.js +1 -1
  91. package/dist/inputs/SgInputPhone.d.ts +3 -1
  92. package/dist/inputs/SgInputPhone.d.ts.map +1 -1
  93. package/dist/inputs/SgInputPhone.js +2 -1
  94. package/dist/inputs/SgInputPostalCode.d.ts.map +1 -1
  95. package/dist/inputs/SgInputPostalCode.js +2 -1
  96. package/dist/inputs/SgInputSelect.d.ts +4 -2
  97. package/dist/inputs/SgInputSelect.d.ts.map +1 -1
  98. package/dist/inputs/SgInputSelect.js +38 -3
  99. package/dist/inputs/SgInputText.d.ts +3 -7
  100. package/dist/inputs/SgInputText.d.ts.map +1 -1
  101. package/dist/inputs/SgInputText.js +5 -2
  102. package/dist/inputs/SgInputTextArea.d.ts +4 -2
  103. package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
  104. package/dist/inputs/SgInputTextArea.js +37 -2
  105. package/dist/inputs/SgOrderList.d.ts +3 -1
  106. package/dist/inputs/SgOrderList.d.ts.map +1 -1
  107. package/dist/inputs/SgOrderList.js +19 -3
  108. package/dist/inputs/SgPickList.d.ts +3 -1
  109. package/dist/inputs/SgPickList.d.ts.map +1 -1
  110. package/dist/inputs/SgPickList.js +20 -4
  111. package/dist/inputs/SgRadioGroup.d.ts +2 -6
  112. package/dist/inputs/SgRadioGroup.d.ts.map +1 -1
  113. package/dist/inputs/SgRadioGroup.js +6 -6
  114. package/dist/inputs/SgRating.d.ts +2 -10
  115. package/dist/inputs/SgRating.d.ts.map +1 -1
  116. package/dist/inputs/SgRating.js +6 -3
  117. package/dist/inputs/SgSlider.d.ts +8 -2
  118. package/dist/inputs/SgSlider.d.ts.map +1 -1
  119. package/dist/inputs/SgSlider.js +62 -10
  120. package/dist/inputs/SgStepperInput.d.ts +8 -2
  121. package/dist/inputs/SgStepperInput.d.ts.map +1 -1
  122. package/dist/inputs/SgStepperInput.js +62 -8
  123. package/dist/inputs/SgTextEditor.d.ts +3 -1
  124. package/dist/inputs/SgTextEditor.d.ts.map +1 -1
  125. package/dist/inputs/SgTextEditor.js +24 -11
  126. package/dist/inputs/SgToggleSwitch.d.ts +3 -7
  127. package/dist/inputs/SgToggleSwitch.d.ts.map +1 -1
  128. package/dist/inputs/SgToggleSwitch.js +6 -3
  129. package/dist/layout/SgBreadcrumb.d.ts.map +1 -1
  130. package/dist/layout/SgBreadcrumb.js +7 -3
  131. package/dist/layout/SgCard.d.ts.map +1 -1
  132. package/dist/layout/SgCard.js +3 -1
  133. package/dist/layout/SgCarousel.d.ts.map +1 -1
  134. package/dist/layout/SgCarousel.js +3 -1
  135. package/dist/layout/SgExpandablePanel.d.ts.map +1 -1
  136. package/dist/layout/SgExpandablePanel.js +3 -1
  137. package/dist/layout/SgMenu.d.ts.map +1 -1
  138. package/dist/layout/SgMenu.js +173 -297
  139. package/dist/layout/SgPageControl.d.ts.map +1 -1
  140. package/dist/layout/SgPageControl.js +7 -3
  141. package/dist/layout/SgToolBar.d.ts.map +1 -1
  142. package/dist/layout/SgToolBar.js +19 -55
  143. package/dist/layout/SgTreeView.d.ts.map +1 -1
  144. package/dist/layout/SgTreeView.js +7 -3
  145. package/dist/layout/drag-position.d.ts +7 -0
  146. package/dist/layout/drag-position.d.ts.map +1 -0
  147. package/dist/layout/drag-position.js +30 -0
  148. package/dist/layout/menu-logic.d.ts +187 -0
  149. package/dist/layout/menu-logic.d.ts.map +1 -0
  150. package/dist/layout/menu-logic.js +349 -0
  151. package/dist/layout/toolbar-logic.d.ts +26 -0
  152. package/dist/layout/toolbar-logic.d.ts.map +1 -0
  153. package/dist/layout/toolbar-logic.js +38 -0
  154. package/dist/menus/SgDockMenu.d.ts.map +1 -1
  155. package/dist/menus/SgDockMenu.js +44 -120
  156. package/dist/menus/dock-menu-logic.d.ts +50 -0
  157. package/dist/menus/dock-menu-logic.d.ts.map +1 -0
  158. package/dist/menus/dock-menu-logic.js +113 -0
  159. package/dist/overlay/SgDialog.d.ts.map +1 -1
  160. package/dist/overlay/SgDialog.js +4 -2
  161. package/dist/overlay/SgPopup.d.ts.map +1 -1
  162. package/dist/overlay/SgPopup.js +4 -1
  163. package/dist/rhf.d.ts +8 -3
  164. package/dist/rhf.d.ts.map +1 -1
  165. package/dist/rhf.js +18 -1
  166. package/dist/sandbox.cjs +60 -60
  167. package/dist/wizard/SgWizard.d.ts.map +1 -1
  168. package/dist/wizard/SgWizard.js +20 -32
  169. package/dist/wizard/logic.d.ts +9 -0
  170. package/dist/wizard/logic.d.ts.map +1 -0
  171. package/dist/wizard/logic.js +20 -0
  172. package/package.json +8 -6
@@ -1,6 +1,8 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
+ import { Controller } from "react-hook-form";
5
+ import { resolveFieldError } from "../rhf";
4
6
  import { SgButton } from "../buttons/SgButton";
5
7
  import { SgGroupBox } from "../layout/SgGroupBox";
6
8
  import { t, useComponentsI18n } from "../i18n";
@@ -109,7 +111,7 @@ function resolveMessage(translated, key, fallback) {
109
111
  }
110
112
  function SgOrderListBase(props, imperativeRef) {
111
113
  const i18n = useComponentsI18n();
112
- const { id, title, source, value: controlledValue, onChange, selectedValues: controlledSelection, onSelectionChange, selectionMode = "multiple", showControls = true, controlsPosition = "left", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {} } = props;
114
+ const { id, title, source, value: controlledValue, onChange, selectedValues: controlledSelection, onSelectionChange, selectionMode = "multiple", showControls = true, controlsPosition = "left", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {}, error } = props;
113
115
  const [internalItems, setInternalItems] = React.useState(() => controlledValue ?? source);
114
116
  const [internalSelection, setInternalSelection] = React.useState(() => uniqueValues(controlledSelection ?? []));
115
117
  const [anchorValue, setAnchorValue] = React.useState(null);
@@ -311,6 +313,20 @@ function SgOrderListBase(props, imperativeRef) {
311
313
  const controls = showControls ? (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveTop, title: moveTopLabel, "aria-label": moveTopLabel, onClick: () => applyMove("top"), children: "Top" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveUp, title: moveUpLabel, "aria-label": moveUpLabel, onClick: () => applyMove("up"), children: "Up" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveDown, title: moveDownLabel, "aria-label": moveDownLabel, onClick: () => applyMove("down"), children: "Down" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveBottom, title: moveBottomLabel, "aria-label": moveBottomLabel, onClick: () => applyMove("bottom"), children: "Bottom" })] })) : null;
312
314
  const containerDirection = controlsPosition === "right" ? "flex-row-reverse" : "flex-row";
313
315
  const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
314
- return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: cn("flex items-start gap-3", containerDirection), children: [controls, _jsx("div", { className: "min-w-0 flex-1", children: renderedList })] }) }) }));
316
+ return (_jsx("div", { className: className, style: style, children: _jsxs(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: [error ? _jsx("p", { className: "mb-2 text-xs text-red-600", children: error }) : null, _jsxs("div", { className: cn("flex items-start gap-3", containerDirection), children: [controls, _jsx("div", { className: "min-w-0 flex-1", children: renderedList })] })] }) }));
315
317
  }
316
- export const SgOrderList = React.forwardRef((props, ref) => SgOrderListBase(props, ref));
318
+ export const SgOrderList = React.forwardRef((props, ref) => {
319
+ const { control, name, rules, ...rest } = props;
320
+ if (control && name) {
321
+ return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => SgOrderListBase({
322
+ ...rest,
323
+ error: resolveFieldError(rest.error, fieldState.error?.message),
324
+ value: Array.isArray(field.value) ? field.value : rest.value,
325
+ onChange: (items) => {
326
+ rest.onChange?.(items);
327
+ field.onChange(items);
328
+ }
329
+ }, ref) }));
330
+ }
331
+ return SgOrderListBase(rest, ref);
332
+ });
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { type RhfFieldProps } from "../rhf";
2
3
  import { type SgGroupBoxProps } from "../layout/SgGroupBox";
3
4
  export interface SgPickListItem {
4
5
  label: string;
@@ -27,7 +28,8 @@ export type SgPickListRef = {
27
28
  moveAllToSource: () => void;
28
29
  clearSelection: () => void;
29
30
  };
30
- export interface SgPickListProps {
31
+ export interface SgPickListProps extends RhfFieldProps {
32
+ error?: string;
31
33
  id?: string;
32
34
  title?: string;
33
35
  source: SgPickListItem[];
@@ -1 +1 @@
1
- {"version":3,"file":"SgPickList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPickList.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SgPickList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPickList.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +1,8 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
+ import { Controller } from "react-hook-form";
5
+ import { resolveFieldError } from "../rhf";
4
6
  import { SgButton } from "../buttons/SgButton";
5
7
  import { SgGroupBox } from "../layout/SgGroupBox";
6
8
  import { t, useComponentsI18n } from "../i18n";
@@ -84,7 +86,7 @@ function matchFilter(label, query, mode) {
84
86
  }
85
87
  function SgPickListBase(props, imperativeRef) {
86
88
  const i18n = useComponentsI18n();
87
- const { id, title, source, target, value: controlledValue, onChange, sourceSelection: controlledSourceSelection, targetSelection: controlledTargetSelection, onSourceSelectionChange, onTargetSelectionChange, selectionMode = "multiple", sourceHeader, targetHeader, showTransferControls = true, showSourceControls = true, showTargetControls = true, showSourceFilter = false, showTargetFilter = false, sourceFilterPlaceholder, targetFilterPlaceholder, filterMatchMode = "contains", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {} } = props;
89
+ const { id, title, source, target, value: controlledValue, onChange, sourceSelection: controlledSourceSelection, targetSelection: controlledTargetSelection, onSourceSelectionChange, onTargetSelectionChange, selectionMode = "multiple", sourceHeader, targetHeader, showTransferControls = true, showSourceControls = true, showTargetControls = true, showSourceFilter = false, showTargetFilter = false, sourceFilterPlaceholder, targetFilterPlaceholder, filterMatchMode = "contains", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {}, error } = props;
88
90
  const [internalValue, setInternalValue] = React.useState(() => ({ source, target }));
89
91
  const [internalSourceSelection, setInternalSourceSelection] = React.useState(() => uniqueValues(controlledSourceSelection ?? []));
90
92
  const [internalTargetSelection, setInternalTargetSelection] = React.useState(() => uniqueValues(controlledTargetSelection ?? []));
@@ -354,9 +356,23 @@ function SgPickListBase(props, imperativeRef) {
354
356
  ? itemTemplate(item, { index, selected: selectedItem, disabled: itemDisabled, list })
355
357
  : (_jsxs("span", { className: "flex items-center gap-2", children: [item.icon ? _jsx("span", { className: "shrink-0", children: item.icon }) : null, _jsx("span", { className: "truncate", children: item.label })] })) }), dragEnabled && !item.disabled ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-xs text-[rgb(var(--sg-muted))]", children: "::" })) : null] }) }, `${item.value}-${index}`));
356
358
  })) }));
357
- const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveTopLabel, title: moveTopLabel, onClick: () => applyReorder(list, "top"), children: "Top" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveUpLabel, title: moveUpLabel, onClick: () => applyReorder(list, "up"), children: "Up" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveDownLabel, title: moveDownLabel, onClick: () => applyReorder(list, "down"), children: "Down" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveBottomLabel, title: moveBottomLabel, onClick: () => applyReorder(list, "bottom"), children: "Bottom" })] }));
359
+ const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveTopLabel, title: moveTopLabel, onClick: () => applyReorder(list, "top"), children: t(i18n, "components.actions.top") }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveUpLabel, title: moveUpLabel, onClick: () => applyReorder(list, "up"), children: t(i18n, "components.actions.up") }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveDownLabel, title: moveDownLabel, onClick: () => applyReorder(list, "down"), children: t(i18n, "components.actions.down") }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveBottomLabel, title: moveBottomLabel, onClick: () => applyReorder(list, "bottom"), children: t(i18n, "components.actions.bottom") })] }));
358
360
  const transferControls = showTransferControls ? (_jsxs("div", { className: "flex shrink-0 flex-row gap-2 md:flex-col", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveToTargetLabel, title: moveToTargetLabel, onClick: moveToTarget, children: ">" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveAllToTargetLabel, title: moveAllToTargetLabel, onClick: moveAllToTarget, children: ">>" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveToSourceLabel, title: moveToSourceLabel, onClick: moveToSource, children: "<" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveAllToSourceLabel, title: moveAllToSourceLabel, onClick: moveAllToSource, children: "<<" })] })) : null;
359
361
  const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
360
- return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: sourceHeaderLabel }), showSourceFilter ? (_jsx("input", { value: sourceFilter, onChange: (event) => setSourceFilter(event.target.value), placeholder: sourceFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [showSourceControls ? renderReorderControls("source") : null, _jsx("div", { className: "min-w-0 flex-1", children: renderList("source", filteredSource, sourceSelectedSet) })] })] }), _jsx("div", { className: "flex justify-center md:pt-7", children: transferControls }), _jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: targetHeaderLabel }), showTargetFilter ? (_jsx("input", { value: targetFilter, onChange: (event) => setTargetFilter(event.target.value), placeholder: targetFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: renderList("target", filteredTarget, targetSelectedSet) }), showTargetControls ? renderReorderControls("target") : null] })] })] }) }) }));
362
+ return (_jsx("div", { className: className, style: style, children: _jsxs(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: [error ? _jsx("p", { className: "mb-2 text-xs text-red-600", children: error }) : null, _jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: sourceHeaderLabel }), showSourceFilter ? (_jsx("input", { value: sourceFilter, onChange: (event) => setSourceFilter(event.target.value), placeholder: sourceFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [showSourceControls ? renderReorderControls("source") : null, _jsx("div", { className: "min-w-0 flex-1", children: renderList("source", filteredSource, sourceSelectedSet) })] })] }), _jsx("div", { className: "flex justify-center md:pt-7", children: transferControls }), _jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: targetHeaderLabel }), showTargetFilter ? (_jsx("input", { value: targetFilter, onChange: (event) => setTargetFilter(event.target.value), placeholder: targetFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: renderList("target", filteredTarget, targetSelectedSet) }), showTargetControls ? renderReorderControls("target") : null] })] })] })] }) }));
361
363
  }
362
- export const SgPickList = React.forwardRef((props, ref) => SgPickListBase(props, ref));
364
+ export const SgPickList = React.forwardRef((props, ref) => {
365
+ const { control, name, rules, ...rest } = props;
366
+ if (control && name) {
367
+ return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => SgPickListBase({
368
+ ...rest,
369
+ error: resolveFieldError(rest.error, fieldState.error?.message),
370
+ value: field.value ?? rest.value,
371
+ onChange: (event) => {
372
+ rest.onChange?.(event);
373
+ field.onChange({ source: event.source, target: event.target });
374
+ }
375
+ }, ref) }));
376
+ }
377
+ return SgPickListBase(rest, ref);
378
+ });
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import { UseFormRegister, FieldValues } from "react-hook-form";
3
2
  import { type SgGroupBoxProps } from "../layout/SgGroupBox";
3
+ import { type RhfFieldProps } from "../rhf";
4
4
  export type SgRadioGroupOrientation = "horizontal" | "vertical";
5
5
  export type SgRadioGroupSelectionStyle = "radio" | "highlight";
6
6
  export interface SgRadioGroupOption {
@@ -9,7 +9,7 @@ export interface SgRadioGroupOption {
9
9
  icon?: React.ReactNode;
10
10
  disabled?: boolean;
11
11
  }
12
- export interface SgRadioGroupProps {
12
+ export interface SgRadioGroupProps extends RhfFieldProps {
13
13
  id?: string;
14
14
  title?: string;
15
15
  source: SgRadioGroupOption[];
@@ -21,10 +21,6 @@ export interface SgRadioGroupProps {
21
21
  readOnly?: boolean;
22
22
  required?: boolean;
23
23
  onChange?: (value: string | number | null) => void;
24
- name?: string;
25
- control?: any;
26
- register?: UseFormRegister<FieldValues>;
27
- error?: string;
28
24
  className?: string;
29
25
  style?: React.CSSProperties;
30
26
  optionClassName?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"SgRadioGroup.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRadioGroup.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,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,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,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAGnD,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;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA8OpD"}
1
+ {"version":3,"file":"SgRadioGroup.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAElF,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,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,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAGnD,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;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAmPpD"}
@@ -4,9 +4,10 @@ import React from "react";
4
4
  import { Controller } from "react-hook-form";
5
5
  import { SgGroupBox } from "../layout/SgGroupBox";
6
6
  import { t, useComponentsI18n } from "../i18n";
7
+ import { mergeRequiredRule, resolveFieldError } from "../rhf";
7
8
  export function SgRadioGroup(props) {
8
9
  const i18n = useComponentsI18n();
9
- const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false, disabled = false, readOnly = false, required = false, onChange, name, control, register, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
10
+ const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false, disabled = false, readOnly = false, required = false, onChange, name, control, register, rules, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
10
11
  const resolvedGroupBoxTitle = (() => {
11
12
  const baseTitle = groupBoxProps.title ?? title ?? "";
12
13
  if (!required || !baseTitle.trim())
@@ -75,17 +76,16 @@ export function SgRadioGroup(props) {
75
76
  flex ${isHighlightSelection ? "gap-0" : "gap-4"}
76
77
  ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
77
78
  `, role: "radiogroup", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderRadioOption(option, index)) }) }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
79
+ const resolvedRules = mergeRequiredRule(rules, required, t(i18n, "components.inputs.required"));
78
80
  // React Hook Form integration
79
81
  if (control && name) {
80
- return (_jsx(Controller, { name: name, control: control, rules: { required: required ? t(i18n, "components.inputs.required") : false }, render: ({ field, fieldState }) => (_jsx(SgRadioGroup, { ...props, value: field.value, onChange: (val) => {
82
+ return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgRadioGroup, { ...props, value: field.value, onChange: (val) => {
81
83
  field.onChange(val);
82
84
  onChange?.(val);
83
- }, error: fieldState.error?.message, control: undefined })) }));
85
+ }, error: resolveFieldError(error, fieldState.error?.message), control: undefined })) }));
84
86
  }
85
87
  if (register && name) {
86
- const registration = register(name, {
87
- required: required ? t(i18n, "components.inputs.required") : false
88
- });
88
+ const registration = register(name, resolvedRules);
89
89
  return (_jsxs("div", { className: className, style: style, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", children: _jsx("div", { className: `
90
90
  flex ${isHighlightSelection ? "gap-0" : "gap-4"}
91
91
  ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
- import type { FieldValues, UseFormRegister } from "react-hook-form";
2
+ import { type RhfFieldProps } from "../rhf";
3
3
  export type SgRatingSize = "sm" | "md" | "lg" | "xl";
4
- export interface SgRatingProps {
4
+ export interface SgRatingProps extends RhfFieldProps {
5
5
  /** Unique identifier */
6
6
  id?: string;
7
7
  /** Label text */
@@ -40,14 +40,6 @@ export interface SgRatingProps {
40
40
  onChange?: (value: number) => void;
41
41
  /** Callback when hovering over stars */
42
42
  onHover?: (value: number | null) => void;
43
- /** React Hook Form integration */
44
- register?: UseFormRegister<FieldValues>;
45
- /** React Hook Form field name */
46
- name?: string;
47
- /** React Hook Form control */
48
- control?: any;
49
- /** Error message */
50
- error?: string;
51
43
  /** Required field */
52
44
  required?: boolean;
53
45
  /** Required message */
@@ -1 +1 @@
1
- {"version":3,"file":"SgRating.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAIzB,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+QD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkC5C"}
1
+ {"version":3,"file":"SgRating.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+QD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAyC5C"}
@@ -2,6 +2,7 @@
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { Controller } from "react-hook-form";
5
+ import { mergeRequiredRule, resolveFieldError } from "../rhf";
5
6
  import { t, useComponentsI18n } from "../i18n";
6
7
  const STAR_SIZES = {
7
8
  sm: 16,
@@ -121,15 +122,17 @@ function SgRatingBase(props) {
121
122
  })] }), _jsx(ErrorText, { message: error ?? internalError ?? undefined })] }));
122
123
  }
123
124
  export function SgRating(props) {
124
- const { control, name, register, ...rest } = props;
125
+ const i18n = useComponentsI18n();
126
+ const { control, name, register, rules, ...rest } = props;
127
+ const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.rating.required"));
125
128
  if (name && register) {
126
129
  return _jsx(SgRatingBase, { ...rest });
127
130
  }
128
131
  if (control && name) {
129
- return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgRatingBase, { ...rest, value: field.value ?? 0, onChange: (value) => {
132
+ return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgRatingBase, { ...rest, value: field.value ?? 0, onChange: (value) => {
130
133
  field.onChange(value);
131
134
  rest.onChange?.(value);
132
- }, error: rest.error ?? fieldState.error?.message })) }));
135
+ }, error: resolveFieldError(rest.error, fieldState.error?.message) })) }));
133
136
  }
134
137
  return _jsx(SgRatingBase, { ...rest });
135
138
  }
@@ -1,4 +1,8 @@
1
1
  import * as React from "react";
2
+ import { type RhfFieldProps } from "../rhf";
3
+ type SliderInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "disabled" | "aria-label"> & {
4
+ ref?: React.Ref<HTMLInputElement>;
5
+ };
2
6
  export type SgSliderProps = {
3
7
  id: string;
4
8
  minValue: number;
@@ -11,10 +15,12 @@ export type SgSliderProps = {
11
15
  ariaLabel?: string;
12
16
  className?: string;
13
17
  width?: number | string;
14
- inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "onChange" | "disabled" | "aria-label">;
15
- };
18
+ error?: string;
19
+ inputProps?: SliderInputProps;
20
+ } & RhfFieldProps;
16
21
  export declare function SgSlider(props: Readonly<SgSliderProps>): import("react/jsx-runtime").JSX.Element;
17
22
  export declare namespace SgSlider {
18
23
  var displayName: string;
19
24
  }
25
+ export {};
20
26
  //# sourceMappingURL=SgSlider.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SgSlider.d.ts","sourceRoot":"","sources":["../../src/inputs/SgSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,GACV,YAAY,CACf,CAAC;CACH,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA0DtD;yBA1De,QAAQ"}
1
+ {"version":3,"file":"SgSlider.d.ts","sourceRoot":"","sources":["../../src/inputs/SgSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAiB/D,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,CACf,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,aAAa,CAAC;AA2FlB,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAqDtD;yBArDe,QAAQ"}
@@ -1,6 +1,8 @@
1
1
  "use client";
2
- import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import * as React from "react";
4
+ import { Controller } from "react-hook-form";
5
+ import { resolveFieldError } from "../rhf";
4
6
  function cn(...parts) {
5
7
  return parts.filter(Boolean).join(" ");
6
8
  }
@@ -15,8 +17,24 @@ function toCssSize(value) {
15
17
  function clamp(value, min, max) {
16
18
  return Math.max(min, Math.min(max, value));
17
19
  }
18
- export function SgSlider(props) {
19
- const { id, minValue, maxValue, value, defaultValue, step = 1, disabled = false, onChange, ariaLabel, className, width, inputProps } = props;
20
+ function mergeInputRefs(primary, secondary) {
21
+ return (node) => {
22
+ if (typeof primary === "function") {
23
+ primary(node);
24
+ }
25
+ else if (primary && typeof primary === "object" && "current" in primary) {
26
+ primary.current = node;
27
+ }
28
+ if (typeof secondary === "function") {
29
+ secondary(node);
30
+ }
31
+ else if (secondary && typeof secondary === "object" && "current" in secondary) {
32
+ secondary.current = node;
33
+ }
34
+ };
35
+ }
36
+ function SgSliderBase(props) {
37
+ const { id, minValue, maxValue, value, defaultValue, step = 1, disabled = false, onChange, ariaLabel, className, width, error, inputProps } = props;
20
38
  const safeMin = Number.isFinite(minValue) ? minValue : 0;
21
39
  const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
22
40
  const safeMax = Math.max(safeMin, rawMax);
@@ -29,12 +47,46 @@ export function SgSlider(props) {
29
47
  setInternalValue((prev) => clamp(prev, safeMin, safeMax));
30
48
  }, [isControlled, safeMin, safeMax]);
31
49
  const currentValue = clamp(isControlled ? value : internalValue, safeMin, safeMax);
32
- return (_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, "aria-label": ariaLabel, onChange: (event) => {
33
- const nextRaw = Number(event.currentTarget.value);
34
- const next = clamp(Number.isFinite(nextRaw) ? nextRaw : safeMin, safeMin, safeMax);
35
- if (!isControlled)
36
- setInternalValue(next);
37
- onChange?.(next);
38
- }, className: cn("h-5 w-full cursor-pointer", disabled ? "cursor-not-allowed opacity-60" : "", className), style: { width: toCssSize(width) }, ...inputProps }));
50
+ return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, "aria-label": ariaLabel, "aria-invalid": error ? true : undefined, onChange: (event) => {
51
+ const nextRaw = Number(event.currentTarget.value);
52
+ const next = clamp(Number.isFinite(nextRaw) ? nextRaw : safeMin, safeMin, safeMax);
53
+ if (!isControlled)
54
+ setInternalValue(next);
55
+ onChange?.(next);
56
+ inputProps?.onChange?.(event);
57
+ }, onBlur: (event) => {
58
+ inputProps?.onBlur?.(event);
59
+ }, className: cn("h-5 w-full cursor-pointer", disabled ? "cursor-not-allowed opacity-60" : "", className), ...inputProps }), error ? _jsx("p", { className: "mt-1 text-xs text-red-600", children: error }) : null] }));
60
+ }
61
+ export function SgSlider(props) {
62
+ const { control, name, register, rules, ...rest } = props;
63
+ if (name && register) {
64
+ const reg = register(name, rules);
65
+ return (_jsx(SgSliderBase, { ...rest, inputProps: {
66
+ ...rest.inputProps,
67
+ name,
68
+ ref: mergeInputRefs(reg.ref, rest.inputProps?.ref),
69
+ onBlur: (event) => {
70
+ reg.onBlur(event);
71
+ rest.inputProps?.onBlur?.(event);
72
+ },
73
+ onChange: (event) => {
74
+ reg.onChange(event);
75
+ rest.inputProps?.onChange?.(event);
76
+ }
77
+ } }));
78
+ }
79
+ if (control && name) {
80
+ return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgSliderBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), value: typeof field.value === "number" ? field.value : Number(field.value ?? rest.minValue), onChange: (next) => field.onChange(next), inputProps: {
81
+ ...rest.inputProps,
82
+ name,
83
+ ref: mergeInputRefs(field.ref, rest.inputProps?.ref),
84
+ onBlur: (event) => {
85
+ field.onBlur();
86
+ rest.inputProps?.onBlur?.(event);
87
+ }
88
+ } })) }));
89
+ }
90
+ return _jsx(SgSliderBase, { ...rest });
39
91
  }
40
92
  SgSlider.displayName = "SgSlider";
@@ -1,4 +1,8 @@
1
1
  import * as React from "react";
2
+ import { type RhfFieldProps } from "../rhf";
3
+ type StepperInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "disabled" | "readOnly" | "aria-label"> & {
4
+ ref?: React.Ref<HTMLInputElement>;
5
+ };
2
6
  export type SgStepperInputProps = {
3
7
  id: string;
4
8
  minValue: number;
@@ -13,10 +17,12 @@ export type SgStepperInputProps = {
13
17
  className?: string;
14
18
  inputClassName?: string;
15
19
  width?: number | string;
16
- inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "disabled" | "readOnly" | "onChange" | "aria-label">;
17
- };
20
+ error?: string;
21
+ inputProps?: StepperInputProps;
22
+ } & RhfFieldProps;
18
23
  export declare function SgStepperInput(props: Readonly<SgStepperInputProps>): import("react/jsx-runtime").JSX.Element;
19
24
  export declare namespace SgStepperInput {
20
25
  var displayName: string;
21
26
  }
27
+ export {};
22
28
  //# sourceMappingURL=SgStepperInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SgStepperInput.d.ts","sourceRoot":"","sources":["../../src/inputs/SgStepperInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,GACV,UAAU,GACV,YAAY,CACf,CAAC;CACH,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAiHlE;yBAjHe,cAAc"}
1
+ {"version":3,"file":"SgStepperInput.d.ts","sourceRoot":"","sources":["../../src/inputs/SgStepperInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAkB/D,KAAK,iBAAiB,GAAG,IAAI,CAC3B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,GACV,YAAY,CACf,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC,GAAG,aAAa,CAAC;AAoJlB,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAqDlE;yBArDe,cAAc"}
@@ -1,6 +1,9 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import * as React from "react";
4
+ import { Controller } from "react-hook-form";
5
+ import { resolveFieldError } from "../rhf";
6
+ import { t, useComponentsI18n } from "../i18n";
4
7
  function cn(...parts) {
5
8
  return parts.filter(Boolean).join(" ");
6
9
  }
@@ -15,8 +18,25 @@ function toCssSize(value) {
15
18
  function clamp(value, min, max) {
16
19
  return Math.max(min, Math.min(max, value));
17
20
  }
18
- export function SgStepperInput(props) {
19
- const { id, minValue, maxValue, step = 1, value, defaultValue, disabled = false, readOnly = false, onChange, ariaLabel, className, inputClassName, width, inputProps } = props;
21
+ function mergeInputRefs(primary, secondary) {
22
+ return (node) => {
23
+ if (typeof primary === "function") {
24
+ primary(node);
25
+ }
26
+ else if (primary && typeof primary === "object" && "current" in primary) {
27
+ primary.current = node;
28
+ }
29
+ if (typeof secondary === "function") {
30
+ secondary(node);
31
+ }
32
+ else if (secondary && typeof secondary === "object" && "current" in secondary) {
33
+ secondary.current = node;
34
+ }
35
+ };
36
+ }
37
+ function SgStepperInputBase(props) {
38
+ const i18n = useComponentsI18n();
39
+ const { id, minValue, maxValue, step = 1, value, defaultValue, disabled = false, readOnly = false, onChange, ariaLabel, className, inputClassName, width, error, inputProps } = props;
20
40
  const safeMin = Number.isFinite(minValue) ? minValue : 0;
21
41
  const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
22
42
  const safeMax = Math.max(safeMin, rawMax);
@@ -37,12 +57,46 @@ export function SgStepperInput(props) {
37
57
  }, [isControlled, onChange, safeMax, safeMin]);
38
58
  const canDecrease = !disabled && !readOnly && currentValue > safeMin;
39
59
  const canIncrease = !disabled && !readOnly && currentValue < safeMax;
40
- return (_jsxs("div", { className: cn("inline-flex h-10 overflow-hidden rounded-md border border-border bg-background", disabled ? "opacity-60" : "", className), style: { width: toCssSize(width) }, children: [_jsx("input", { id: id, type: "number", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, onChange: (event) => {
41
- const inputNext = Number(event.currentTarget.value);
42
- if (!Number.isFinite(inputNext))
43
- return;
44
- emitValue(inputNext);
45
- }, className: cn("min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none", "focus:ring-0 [appearance:textfield]", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", inputClassName), ...inputProps }), _jsxs("div", { className: "flex w-7 flex-col border-l border-border", children: [_jsx("button", { type: "button", "aria-label": "Increase value", disabled: !canIncrease, onClick: () => emitValue(currentValue + safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground", "border-b border-border text-[10px]", canIncrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "up" }) }), _jsx("button", { type: "button", "aria-label": "Decrease value", disabled: !canDecrease, onClick: () => emitValue(currentValue - safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground text-[10px]", canDecrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "down" }) })] })] }));
60
+ return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsxs("div", { className: cn("inline-flex h-10 w-full overflow-hidden rounded-md border border-border bg-background", disabled ? "opacity-60" : "", error ? "border-[hsl(var(--destructive))]" : "", className), children: [_jsx("input", { id: id, type: "number", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, "aria-invalid": error ? true : undefined, onChange: (event) => {
61
+ const inputNext = Number(event.currentTarget.value);
62
+ if (!Number.isFinite(inputNext))
63
+ return;
64
+ emitValue(inputNext);
65
+ inputProps?.onChange?.(event);
66
+ }, onBlur: (event) => {
67
+ inputProps?.onBlur?.(event);
68
+ }, className: cn("min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none", "focus:ring-0 [appearance:textfield]", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", inputClassName), ...inputProps }), _jsxs("div", { className: "flex w-7 flex-col border-l border-border", children: [_jsx("button", { type: "button", "aria-label": t(i18n, "components.inputs.stepper.increase"), disabled: !canIncrease, onClick: () => emitValue(currentValue + safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground", "border-b border-border text-[10px]", canIncrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "up" }) }), _jsx("button", { type: "button", "aria-label": t(i18n, "components.inputs.stepper.decrease"), disabled: !canDecrease, onClick: () => emitValue(currentValue - safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground text-[10px]", canDecrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "down" }) })] })] }), error ? _jsx("p", { className: "mt-1 text-xs text-red-600", children: error }) : null] }));
69
+ }
70
+ export function SgStepperInput(props) {
71
+ const { control, name, register, rules, ...rest } = props;
72
+ if (name && register) {
73
+ const reg = register(name, rules);
74
+ return (_jsx(SgStepperInputBase, { ...rest, inputProps: {
75
+ ...rest.inputProps,
76
+ name,
77
+ ref: mergeInputRefs(reg.ref, rest.inputProps?.ref),
78
+ onBlur: (event) => {
79
+ reg.onBlur(event);
80
+ rest.inputProps?.onBlur?.(event);
81
+ },
82
+ onChange: (event) => {
83
+ reg.onChange(event);
84
+ rest.inputProps?.onChange?.(event);
85
+ }
86
+ } }));
87
+ }
88
+ if (control && name) {
89
+ return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgStepperInputBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), value: typeof field.value === "number" ? field.value : Number(field.value ?? rest.minValue), onChange: (next) => field.onChange(next), inputProps: {
90
+ ...rest.inputProps,
91
+ name,
92
+ ref: mergeInputRefs(field.ref, rest.inputProps?.ref),
93
+ onBlur: (event) => {
94
+ field.onBlur();
95
+ rest.inputProps?.onBlur?.(event);
96
+ }
97
+ } })) }));
98
+ }
99
+ return _jsx(SgStepperInputBase, { ...rest });
46
100
  }
47
101
  SgStepperInput.displayName = "SgStepperInput";
48
102
  function StepArrow(props) {
@@ -1,10 +1,12 @@
1
1
  import * as React from "react";
2
+ import { type RhfFieldProps } from "../rhf";
2
3
  export type SgTextEditorSaveMeta = {
3
4
  htmlDocument: string;
4
5
  contentHtml: string;
5
6
  cssText: string;
6
7
  };
7
8
  export type SgTextEditorProps = {
9
+ error?: string;
8
10
  id: string;
9
11
  valueHtml?: string;
10
12
  defaultValueHtml?: string;
@@ -22,7 +24,7 @@ export type SgTextEditorProps = {
22
24
  cssEditorLabel?: string;
23
25
  className?: string;
24
26
  style?: React.CSSProperties;
25
- };
27
+ } & RhfFieldProps;
26
28
  export declare function SgTextEditor(props: Readonly<SgTextEditorProps>): import("react/jsx-runtime").JSX.Element;
27
29
  export declare namespace SgTextEditor {
28
30
  var displayName: string;
@@ -1 +1 @@
1
- {"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAgZ9D;yBAhZe,YAAY"}
1
+ {"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AA4B/D,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,aAAa,CAAC;AA8clB,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAsB9D;yBAtBe,YAAY"}