@seedgrid/fe-components 2026.3.11-7 → 2026.3.13

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 (42) hide show
  1. package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts.map +1 -1
  2. package/dist/digits/roller3d-digit/SgRoller3DDigit.js +4 -2
  3. package/dist/digits/segment-digit/SgSegmentDigit.js +1 -1
  4. package/dist/gadgets/calendar/SgCalendar.js +1 -1
  5. package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
  6. package/dist/gadgets/clock/SgClock.js +10 -5
  7. package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map +1 -1
  8. package/dist/gadgets/clock/themes/SgClockThemePicker.js +3 -3
  9. package/dist/gadgets/clock/themes/renderTheme.d.ts.map +1 -1
  10. package/dist/gadgets/clock/themes/renderTheme.js +3 -1
  11. package/dist/gadgets/clock/themes/useDarkFlag.d.ts.map +1 -1
  12. package/dist/gadgets/clock/themes/useDarkFlag.js +34 -3
  13. package/dist/inputs/SgAutocomplete.js +3 -3
  14. package/dist/inputs/SgCombobox.js +4 -4
  15. package/dist/inputs/SgDatatable.js +3 -3
  16. package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
  17. package/dist/inputs/SgInputCurrency.js +5 -3
  18. package/dist/inputs/SgInputDate.js +2 -2
  19. package/dist/inputs/SgInputNumber.d.ts.map +1 -1
  20. package/dist/inputs/SgInputNumber.js +8 -4
  21. package/dist/inputs/SgInputOTP.js +1 -1
  22. package/dist/inputs/SgInputSelect.js +3 -3
  23. package/dist/inputs/SgInputText.d.ts.map +1 -1
  24. package/dist/inputs/SgInputText.js +8 -4
  25. package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
  26. package/dist/inputs/SgInputTextArea.js +8 -4
  27. package/dist/inputs/SgOrderList.js +2 -2
  28. package/dist/inputs/SgPickList.js +3 -3
  29. package/dist/inputs/SgTextEditor.d.ts.map +1 -1
  30. package/dist/inputs/SgTextEditor.js +9 -4
  31. package/dist/inputs/SgToggleSwitch.js +1 -1
  32. package/dist/layout/SgCarousel.js +3 -3
  33. package/dist/layout/SgGroupBox.js +1 -1
  34. package/dist/menus/SgDockMenu.d.ts.map +1 -1
  35. package/dist/menus/SgDockMenu.js +20 -10
  36. package/dist/others/SgPlayground.d.ts.map +1 -1
  37. package/dist/others/SgPlayground.js +24 -1
  38. package/dist/overlay/SgDialog.d.ts.map +1 -1
  39. package/dist/overlay/SgDialog.js +203 -1
  40. package/dist/sandbox.cjs +76 -76
  41. package/dist/wizard/SgWizard.js +4 -4
  42. package/package.json +1 -1
package/dist/inputs/SgOrderList.js CHANGED
@@ -295,14 +295,14 @@ function SgOrderListBase(props, imperativeRef) {
295
295
  const canMoveUp = canInteract && moveSelectionUp(currentItems, movableSelection) !== currentItems;
296
296
  const canMoveDown = canInteract && moveSelectionDown(currentItems, movableSelection) !== currentItems;
297
297
  const canMoveBottom = canInteract && moveSelectionBottom(currentItems, movableSelection) !== currentItems;
298
- const renderedList = (_jsxs("ul", { id: id, role: "listbox", "aria-multiselectable": selectionMode === "multiple" ? true : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, className: cn("w-full min-w-0 overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-white p-1", "max-h-[22rem]", listClassName), children: [currentItems.length === 0 ? (_jsx("li", { className: "list-none px-3 py-4 text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (currentItems.map((item, index) => {
298
+ const renderedList = (_jsxs("ul", { id: id, role: "listbox", "aria-multiselectable": selectionMode === "multiple" ? true : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, className: cn("w-full min-w-0 overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-1", "max-h-[22rem]", listClassName), children: [currentItems.length === 0 ? (_jsx("li", { className: "list-none px-3 py-4 text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (currentItems.map((item, index) => {
299
299
  const isItemSelected = selectedSet.has(item.value);
300
300
  const isItemDisabled = disabled || Boolean(item.disabled);
301
301
  const isDropTarget = dropIndex === index && draggingIndex !== null && draggingIndex !== index;
302
302
  const isDragging = draggingIndex === index;
303
303
  return (_jsx("li", { className: "list-none", children: _jsxs("button", { type: "button", role: "option", "aria-selected": isItemSelected, draggable: allowDrag && !item.disabled, disabled: isItemDisabled, onClick: (event) => handleItemSelection(event, item, index), onKeyDown: (event) => handleItemKeyDown(event, item, index), onDragStart: (event) => handleDragStart(event, item, index), onDragOver: (event) => handleDragOver(event, index), onDrop: (event) => handleDrop(event, index), onDragEnd: clearDragState, className: cn("group flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-all", isItemSelected
304
304
  ? "bg-[rgb(var(--sg-primary-100))] text-[rgb(var(--sg-text))] ring-1 ring-[rgb(var(--sg-primary-300))]"
305
- : "bg-white text-[rgb(var(--sg-text))] hover:bg-[rgb(var(--sg-primary-50))]", isItemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", allowDrag && !item.disabled ? "active:cursor-grabbing" : "", isDropTarget ? "ring-2 ring-[rgb(var(--sg-primary-400))]" : "", isDragging ? "opacity-50" : "", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1", children: itemTemplate ? (itemTemplate(item, {
305
+ : "bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] text-[rgb(var(--sg-text))] hover:bg-[rgb(var(--sg-primary-50))]", isItemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", allowDrag && !item.disabled ? "active:cursor-grabbing" : "", isDropTarget ? "ring-2 ring-[rgb(var(--sg-primary-400))]" : "", isDragging ? "opacity-50" : "", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1", children: itemTemplate ? (itemTemplate(item, {
306
306
  index,
307
307
  selected: isItemSelected,
308
308
  disabled: isItemDisabled
package/dist/inputs/SgPickList.js CHANGED
@@ -311,7 +311,7 @@ function SgPickListBase(props, imperativeRef) {
311
311
  const filteredTarget = targetItems
312
312
  .map((item, index) => ({ item, index }))
313
313
  .filter(({ item }) => !targetFilter || matchFilter(item.label, targetFilter, filterMatchMode));
314
- const renderList = (list, items, selected) => (_jsx("ul", { id: id ? `${id}-${list}` : undefined, role: "listbox", "aria-multiselectable": selectionMode === "multiple" || undefined, className: cn("max-h-[22rem] min-w-0 w-full overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-white p-1", listClassName), onDragOver: (event) => {
314
+ const renderList = (list, items, selected) => (_jsx("ul", { id: id ? `${id}-${list}` : undefined, role: "listbox", "aria-multiselectable": selectionMode === "multiple" || undefined, className: cn("max-h-[22rem] min-w-0 w-full overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-1", listClassName), onDragOver: (event) => {
315
315
  if (!dragEnabled)
316
316
  return;
317
317
  event.preventDefault();
@@ -350,13 +350,13 @@ function SgPickListBase(props, imperativeRef) {
350
350
  handleDrop(list, index);
351
351
  }, onDragEnd: () => setDragState(null), className: cn("flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm", selectedItem
352
352
  ? "bg-[rgb(var(--sg-primary-100))] ring-1 ring-[rgb(var(--sg-primary-300))]"
353
- : "bg-white hover:bg-[rgb(var(--sg-primary-50))]", itemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: itemTemplate
353
+ : "bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] hover:bg-[rgb(var(--sg-primary-50))]", itemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: itemTemplate
354
354
  ? itemTemplate(item, { index, selected: selectedItem, disabled: itemDisabled, list })
355
355
  : (_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
356
  })) }));
357
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" })] }));
358
358
  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
359
  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-white px-2 py-1 text-sm 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-white px-2 py-1 text-sm 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] })] })] }) }) }));
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] })] })] }) }) }));
361
361
  }
362
362
  export const SgPickList = React.forwardRef((props, ref) => SgPickListBase(props, ref));
package/dist/inputs/SgTextEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/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,2CAsZ9D;yBAtZe,YAAY"}
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"}
package/dist/inputs/SgTextEditor.js CHANGED
@@ -13,6 +13,7 @@ import Highlight from "@tiptap/extension-highlight";
13
13
  import Subscript from "@tiptap/extension-subscript";
14
14
  import Superscript from "@tiptap/extension-superscript";
15
15
  import FontFamily from "@tiptap/extension-font-family";
16
+ import { AlignCenter, AlignJustify, AlignLeft, AlignRight, FileImage, Highlighter, IndentDecrease, IndentIncrease, List, ListOrdered, Palette } from "lucide-react";
16
17
  function cn(...parts) {
17
18
  return parts.filter(Boolean).join(" ");
18
19
  }
@@ -182,7 +183,7 @@ export function SgTextEditor(props) {
182
183
  if (!editor)
183
184
  return;
184
185
  editor.chain().focus().setMark("textStyle", { fontSize: size }).run();
185
- }, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bold", text: "B", active: active("bold"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleBold().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", text: "I", active: active("italic"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleItalic().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", text: "U", active: active("underline"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleUnderline().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strike", text: "S", active: active("strike"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleStrike().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleStrike().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "A" }), _jsx("input", { type: "color", disabled: !editor || disabled, onChange: (e) => editor?.chain().focus().setColor(e.target.value).run(), className: "h-8 w-10 cursor-pointer", "aria-label": "Text color" })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "H" }), _jsx("input", { type: "color", disabled: !editor || disabled, onChange: (e) => editor?.chain().focus().toggleHighlight({ color: e.target.value }).run(), className: "h-8 w-10 cursor-pointer", "aria-label": "Highlight color" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Subscript", text: "x2", active: active("subscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSubscript().run()) }), _jsx(ToolbarButton, { label: "Superscript", text: "x^", active: active("superscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSuperscript().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bullets", text: "\u2022", active: active("bulletList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered", text: "1.", active: active("orderedList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Outdent", text: "<", active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Indent", text: ">", active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().sinkListItem("listItem").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Align left", text: "L", active: active("paragraph", { textAlign: "left" }) || active("heading", { textAlign: "left" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", text: "C", active: active("paragraph", { textAlign: "center" }) || active("heading", { textAlign: "center" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", text: "R", active: active("paragraph", { textAlign: "right" }) || active("heading", { textAlign: "right" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", text: "J", active: active("paragraph", { textAlign: "justify" }) || active("heading", { textAlign: "justify" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("justify").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Link", text: "Link", active: active("link"), disabled: !editor || !!disabled, onClick: () => {
186
+ }, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bold", icon: _jsx("span", { className: "font-bold leading-none", "aria-hidden": "true", children: "B" }), active: active("bold"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleBold().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: _jsx("span", { className: "italic leading-none", "aria-hidden": "true", children: "I" }), active: active("italic"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleItalic().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: _jsx("span", { className: "underline leading-none", "aria-hidden": "true", children: "U" }), active: active("underline"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleUnderline().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strike", icon: _jsx("span", { className: "line-through leading-none", "aria-hidden": "true", children: "S" }), active: active("strike"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleStrike().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleStrike().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ColorPickerButton, { label: "Text color", hint: "Text color", icon: _jsx(Palette, { size: 14, "aria-hidden": "true" }), disabled: !editor || !!disabled, onChange: (color) => editor?.chain().focus().setColor(color).run() }), _jsx(ColorPickerButton, { label: "Highlight color", hint: "Highlight color", icon: _jsx(Highlighter, { size: 14, "aria-hidden": "true" }), disabled: !editor || !!disabled, onChange: (color) => editor?.chain().focus().toggleHighlight({ color }).run() }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Subscript", text: "x2", active: active("subscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSubscript().run()) }), _jsx(ToolbarButton, { label: "Superscript", text: "x^", active: active("superscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSuperscript().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bullets", icon: _jsx(List, { size: 14, "aria-hidden": "true" }), active: active("bulletList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered", icon: _jsx(ListOrdered, { size: 14, "aria-hidden": "true" }), active: active("orderedList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Outdent", icon: _jsx(IndentDecrease, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Indent", icon: _jsx(IndentIncrease, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().sinkListItem("listItem").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Align left", icon: _jsx(AlignLeft, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "left" }) || active("heading", { textAlign: "left" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: _jsx(AlignCenter, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "center" }) || active("heading", { textAlign: "center" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: _jsx(AlignRight, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "right" }) || active("heading", { textAlign: "right" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: _jsx(AlignJustify, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "justify" }) || active("heading", { textAlign: "justify" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("justify").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Link", text: "Link", active: active("link"), disabled: !editor || !!disabled, onClick: () => {
186
187
  if (!editor)
187
188
  return;
188
189
  const prev = editor.getAttributes("link").href;
@@ -192,7 +193,7 @@ export function SgTextEditor(props) {
192
193
  return;
193
194
  }
194
195
  editor.chain().focus().setLink({ href: url }).run();
195
- } }), _jsx(ToolbarButton, { label: "Image", text: "Img", active: false, disabled: !editor || !!disabled, onClick: () => {
196
+ } }), _jsx(ToolbarButton, { label: "Image", icon: _jsx(FileImage, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => {
196
197
  if (!editor)
197
198
  return;
198
199
  const src = window.prompt("Image URL");
@@ -212,7 +213,11 @@ export function SgTextEditor(props) {
212
213
  } })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: editorContainerStyle, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs", style: cssTextareaStyle }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "CSS is embedded inside the saved HTML document." })] })) : null] }));
213
214
  }
214
215
  function ToolbarButton(props) {
215
- const { label, text, active, disabled, onClick } = props;
216
- return (_jsx("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: onClick, className: cn("h-9 min-w-9 rounded-md border px-2 text-sm", "hover:bg-muted/80 disabled:opacity-50", active ? "bg-muted" : "bg-background"), children: text }));
216
+ const { label, text, icon, active, disabled, onClick } = props;
217
+ return (_jsx("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: onClick, className: cn("inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-2 text-sm", "hover:bg-muted/80 disabled:opacity-50", active ? "bg-muted" : "bg-background"), children: icon ?? text }));
218
+ }
219
+ function ColorPickerButton(props) {
220
+ const { label, hint, icon, disabled, onChange } = props;
221
+ return (_jsxs("label", { title: hint ?? label, "aria-label": label, className: cn("relative inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-2 text-sm", "bg-background hover:bg-muted/80", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"), children: [icon, _jsx("input", { type: "color", disabled: disabled, onChange: (e) => onChange(e.target.value), className: cn("absolute inset-0 h-full w-full opacity-0", disabled ? "cursor-not-allowed" : "cursor-pointer"), "aria-label": label })] }));
217
222
  }
218
223
  SgTextEditor.displayName = "SgTextEditor";
package/dist/inputs/SgToggleSwitch.js CHANGED
@@ -146,7 +146,7 @@ function SgToggleSwitchBase(props) {
146
146
  : "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]"
147
147
  : hasError
148
148
  ? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.05)]"
149
- : "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-white text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
149
+ : "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
150
150
  }
151
151
  export function SgToggleSwitch(props) {
152
152
  const { control, name, register, rules, ...rest } = props;
package/dist/layout/SgCarousel.js CHANGED
@@ -127,8 +127,8 @@ export function SgCarousel(props) {
127
127
  }
128
128
  return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: `
129
129
  absolute z-10 flex h-10 w-10 items-center justify-center rounded-full
130
- bg-white/90 shadow-lg opacity-70 transition-all
131
- ${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 hover:bg-white cursor-pointer"}
130
+ bg-background/90 shadow-lg opacity-70 transition-all
131
+ ${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 hover:bg-background cursor-pointer"}
132
132
  ${isHorizontal
133
133
  ? `top-1/2 -translate-y-1/2 ${isPrev ? "left-2" : "right-2"}`
134
134
  : `left-1/2 -translate-x-1/2 ${isPrev ? "-top-5" : "-bottom-5"}`}
@@ -159,7 +159,7 @@ export function SgCarousel(props) {
159
159
  ${isHorizontal ? "h-2" : "w-2"}
160
160
  ${isActive
161
161
  ? `${isHorizontal ? "w-8" : "h-8"} bg-primary`
162
- : `${isHorizontal ? "w-2" : "h-2"} bg-white/60 hover:bg-white/80`}
162
+ : `${isHorizontal ? "w-2" : "h-2"} bg-foreground/20 hover:bg-foreground/35`}
163
163
  rounded-full
164
164
  `, "aria-label": `Go to slide ${index + 1}` }, index));
165
165
  }) }))] }));
package/dist/layout/SgGroupBox.js CHANGED
@@ -11,5 +11,5 @@ export function SgGroupBox(props) {
11
11
  width: toCssSize(width) ?? "100%",
12
12
  height: toCssSize(height),
13
13
  ...style
14
- }, children: _jsxs("fieldset", { className: "relative rounded-lg border border-border bg-white px-4 pb-4 pt-5", children: [_jsx("legend", { className: "px-2 text-xs font-semibold uppercase tracking-wider text-foreground/70", children: title }), _jsx("div", { children: children })] }) }));
14
+ }, children: _jsxs("fieldset", { className: "relative rounded-lg border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-4 pb-4 pt-5", children: [_jsx("legend", { className: "px-2 text-xs font-semibold uppercase tracking-wider text-foreground/70", children: title }), _jsx("div", { children: children })] }) }));
15
15
  }
package/dist/menus/SgDockMenu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAihB1D"}
1
+ {"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA2hB1D"}
package/dist/menus/SgDockMenu.js CHANGED
@@ -72,7 +72,7 @@ export function SgDockMenu(props) {
72
72
  const i18n = useComponentsI18n();
73
73
  const hasEnvironmentProvider = useHasSgEnvironmentProvider();
74
74
  const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
75
- const { id, items, position = "center-bottom", enableDragDrop = false, dragId, offset, className = "", itemClassName = "", zIndex = 50, itemSize = 48, gap = 16, backgroundColor = "rgba(255, 255, 255, 0.95)", showLabels = true, magnify = true, magnifyScale = 1.5, borderRadius = 16, elevation = "lg", style, } = props;
75
+ const { id, items, position = "center-bottom", enableDragDrop = false, dragId, offset, className = "", itemClassName = "", zIndex = 50, itemSize = 48, gap = 16, backgroundColor = "rgb(var(--sg-surface, 248 250 252) / 0.9)", showLabels = true, magnify = true, magnifyScale = 1.5, borderRadius = 16, elevation = "lg", style, } = props;
76
76
  const [dragPos, setDragPos] = React.useState(null);
77
77
  const dragPosRef = React.useRef(null);
78
78
  const hasStoredPosRef = React.useRef(false);
@@ -90,6 +90,11 @@ export function SgDockMenu(props) {
90
90
  const storageKey = dragId
91
91
  ? `sg-dockmenu-pos:${dragId}:${isAbsolutePosition ? "parent" : "viewport"}`
92
92
  : null;
93
+ const itemSurfaceColor = "rgb(var(--sg-muted-surface, 241 245 249) / 0.92)";
94
+ const itemSurfaceHoverColor = "rgb(var(--sg-primary-500, 34 197 94) / 0.18)";
95
+ const itemIconColor = "rgb(var(--sg-text, 15 23 42))";
96
+ const tooltipBgColor = "rgb(var(--sg-surface, 15 23 42) / 0.96)";
97
+ const tooltipTextColor = "rgb(var(--sg-text, 255 255 255))";
93
98
  const loadStoredPosition = React.useCallback(async () => {
94
99
  if (!storageKey)
95
100
  return null;
@@ -359,6 +364,7 @@ export function SgDockMenu(props) {
359
364
  paddingRight: crossPadding
360
365
  }),
361
366
  backgroundColor,
367
+ border: "1px solid rgb(var(--sg-border, 226 232 240) / 0.85)",
362
368
  borderRadius: `${borderRadius}px`,
363
369
  backdropFilter: "blur(10px)",
364
370
  transition: "all 0.3s ease",
@@ -405,18 +411,19 @@ export function SgDockMenu(props) {
405
411
  alignItems: "center",
406
412
  justifyContent: "center",
407
413
  borderRadius: `${borderRadius * 0.5}px`,
408
- backgroundColor: "rgba(0, 0, 0, 0.05)",
414
+ backgroundColor: itemSurfaceColor,
415
+ color: itemIconColor,
409
416
  transition: "background-color 0.2s ease",
410
417
  }, onMouseEnter: (e) => {
411
- e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
418
+ e.currentTarget.style.backgroundColor = itemSurfaceHoverColor;
412
419
  }, onMouseLeave: (e) => {
413
- e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
420
+ e.currentTarget.style.backgroundColor = itemSurfaceColor;
414
421
  }, children: item.icon }), item.badge && (_jsx("div", { className: "sg-dock-item-badge", style: {
415
422
  position: "absolute",
416
423
  top: -4,
417
424
  right: -4,
418
425
  backgroundColor: "hsl(var(--destructive))",
419
- color: "white",
426
+ color: "hsl(var(--destructive-foreground))",
420
427
  borderRadius: "50%",
421
428
  minWidth: 20,
422
429
  height: 20,
@@ -434,8 +441,8 @@ export function SgDockMenu(props) {
434
441
  : position.startsWith("left")
435
442
  ? { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: 8 }
436
443
  : { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: 8 }),
437
- backgroundColor: "rgba(0, 0, 0, 0.8)",
438
- color: "white",
444
+ backgroundColor: tooltipBgColor,
445
+ color: tooltipTextColor,
439
446
  padding: "4px 8px",
440
447
  borderRadius: 6,
441
448
  fontSize: 12,
@@ -456,7 +463,9 @@ export function SgDockMenu(props) {
456
463
  top: "50%",
457
464
  left: "50%",
458
465
  transform: "translate(-50%, -50%)",
459
- backgroundColor: "white",
466
+ backgroundColor: "rgb(var(--sg-surface, 248 250 252))",
467
+ color: "rgb(var(--sg-text, 15 23 42))",
468
+ border: "1px solid rgb(var(--sg-border, 226 232 240))",
460
469
  borderRadius: 12,
461
470
  padding: 24,
462
471
  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
@@ -465,7 +474,8 @@ export function SgDockMenu(props) {
465
474
  padding: "8px 16px",
466
475
  borderRadius: 6,
467
476
  border: "1px solid hsl(var(--border))",
468
- backgroundColor: "transparent",
477
+ backgroundColor: "rgb(var(--sg-muted-surface, 241 245 249))",
478
+ color: "rgb(var(--sg-text, 15 23 42))",
469
479
  cursor: "pointer",
470
480
  fontSize: 14,
471
481
  }, children: t(i18n, "components.actions.cancel") }), _jsx("button", { onClick: handleResetPosition, style: {
@@ -473,7 +483,7 @@ export function SgDockMenu(props) {
473
483
  borderRadius: 6,
474
484
  border: "none",
475
485
  backgroundColor: "hsl(var(--primary))",
476
- color: "white",
486
+ color: "hsl(var(--primary-foreground))",
477
487
  cursor: "pointer",
478
488
  fontSize: 14,
479
489
  fontWeight: 500,
package/dist/others/SgPlayground.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA0mCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA6lBtE"}
1
+ {"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA6nCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAkmBtE"}
package/dist/others/SgPlayground.js CHANGED
@@ -383,6 +383,7 @@ const SANDPACK_NODE_FS_PROMISES_PACKAGE_JSON_SHIM = JSON.stringify({
383
383
  module: "index.js"
384
384
  });
385
385
  const SANDPACK_FALLBACK_THEME_VARS = {
386
+ "--sg-mode": "light",
386
387
  // shadcn/ui design tokens (HSL)
387
388
  "--background": "0 0% 100%",
388
389
  "--foreground": "222.2 84% 4.9%",
@@ -564,6 +565,7 @@ const SANDPACK_CORE_THEME_VARS = [
564
565
  // CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
565
566
  // so we must call getPropertyValue() for each var by name.
566
567
  const SANDPACK_SG_VARS = [
568
+ "--sg-mode",
567
569
  // Neutrals
568
570
  "--sg-bg", "--sg-surface", "--sg-muted-surface",
569
571
  "--sg-text", "--sg-muted", "--sg-border", "--sg-ring",
@@ -856,6 +858,25 @@ function readThemeVarsFromHost() {
856
858
  Object.assign(themeVars, mapSgVarsToCoreVars(themeVars));
857
859
  return themeVars;
858
860
  }
861
+ function resolveSandpackThemeFromHost() {
862
+ if (typeof window === "undefined")
863
+ return "light";
864
+ const root = document.documentElement;
865
+ const computed = window.getComputedStyle(root);
866
+ const mode = computed.getPropertyValue("--sg-mode").trim().toLowerCase();
867
+ if (mode === "dark")
868
+ return "dark";
869
+ if (mode === "light")
870
+ return "light";
871
+ const dataTheme = root.getAttribute("data-theme")?.trim().toLowerCase();
872
+ if (dataTheme === "dark")
873
+ return "dark";
874
+ if (dataTheme === "light")
875
+ return "light";
876
+ if (root.classList.contains("dark"))
877
+ return "dark";
878
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
879
+ }
859
880
  function getStyleSheetHref(styleSheet) {
860
881
  const cssSheet = styleSheet;
861
882
  if (cssSheet.href)
@@ -1035,6 +1056,7 @@ export default function SgPlayground(props) {
1035
1056
  const { code, interactive = false, codeContract = "renderBody", preset = "auto", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, style, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, bundlerURL, bundlerTimeoutMs, npmRegistries, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
1036
1057
  const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
1037
1058
  const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
1059
+ const [sandpackTheme, setSandpackTheme] = React.useState(() => resolveSandpackThemeFromHost());
1038
1060
  const [isExpanded, setIsExpanded] = React.useState(false);
1039
1061
  const [activePanel, setActivePanel] = React.useState("code");
1040
1062
  React.useEffect(() => {
@@ -1045,6 +1067,7 @@ export default function SgPlayground(props) {
1045
1067
  const liveThemeVars = readThemeVarsFromHost();
1046
1068
  const hostCss = readHostNextCssText();
1047
1069
  setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding, hostCss));
1070
+ setSandpackTheme(resolveSandpackThemeFromHost());
1048
1071
  };
1049
1072
  let frameId = null;
1050
1073
  const scheduleRefresh = () => {
@@ -1427,7 +1450,7 @@ export default function SgPlayground(props) {
1427
1450
  visibleFiles: ["/App.tsx"],
1428
1451
  externalResources: includeSeedgridDependency ? SANDPACK_EXTERNAL_RESOURCES : []
1429
1452
  }), [includeSeedgridDependency, resolvedBundlerTimeoutMs, resolvedBundlerURL]);
1430
- const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), style: withCard ? undefined : style, children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, children: [_jsx("style", { children: SANDPACK_HOST_STYLES_CSS }), _jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
1453
+ const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), style: withCard ? undefined : style, children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, theme: sandpackTheme, children: [_jsx("style", { children: SANDPACK_HOST_STYLES_CSS }), _jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
1431
1454
  ? "border-primary text-foreground"
1432
1455
  : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("code"), children: "C\u00F3digo" }), _jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "preview"
1433
1456
  ? "border-primary text-foreground"
package/dist/overlay/SgDialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2EF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAmQtD;yBAnQe,QAAQ"}
1
+ {"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsRF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BA4QtD;yBA5Qe,QAAQ"}
package/dist/overlay/SgDialog.js CHANGED
@@ -69,6 +69,199 @@ function resolveDialogShadow(elevation, shadow) {
69
69
  return elevation;
70
70
  }
71
71
  }
72
+ function clampByte(value) {
73
+ return Math.min(255, Math.max(0, Math.round(value)));
74
+ }
75
+ function parseHexColor(input) {
76
+ const hex = input.replace("#", "").trim();
77
+ if (!hex)
78
+ return null;
79
+ if (hex.length === 3 || hex.length === 4) {
80
+ const r = Number.parseInt((hex.slice(0, 1) || "0").repeat(2), 16);
81
+ const g = Number.parseInt((hex.slice(1, 2) || "0").repeat(2), 16);
82
+ const b = Number.parseInt((hex.slice(2, 3) || "0").repeat(2), 16);
83
+ if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b))
84
+ return null;
85
+ return { r, g, b };
86
+ }
87
+ if (hex.length === 6 || hex.length === 8) {
88
+ const r = Number.parseInt(hex.slice(0, 2), 16);
89
+ const g = Number.parseInt(hex.slice(2, 4), 16);
90
+ const b = Number.parseInt(hex.slice(4, 6), 16);
91
+ if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b))
92
+ return null;
93
+ return { r, g, b };
94
+ }
95
+ return null;
96
+ }
97
+ function parseRgbChannel(token) {
98
+ const value = token.trim();
99
+ if (!value)
100
+ return null;
101
+ if (value.endsWith("%")) {
102
+ const numeric = Number.parseFloat(value.slice(0, -1));
103
+ if (!Number.isFinite(numeric))
104
+ return null;
105
+ return clampByte((numeric / 100) * 255);
106
+ }
107
+ const numeric = Number.parseFloat(value);
108
+ if (!Number.isFinite(numeric))
109
+ return null;
110
+ return clampByte(numeric);
111
+ }
112
+ function parseRgbColor(input) {
113
+ const match = input.match(/^rgba?\((.+)\)$/i);
114
+ if (!match)
115
+ return null;
116
+ const raw = match[1]?.trim() ?? "";
117
+ const withoutAlpha = raw.replace(/\s*\/\s*[\d.]+%?\s*$/, "");
118
+ const tokens = withoutAlpha.includes(",")
119
+ ? withoutAlpha.split(",")
120
+ : withoutAlpha.split(/\s+/);
121
+ if (tokens.length < 3)
122
+ return null;
123
+ const r = parseRgbChannel(tokens[0] ?? "");
124
+ const g = parseRgbChannel(tokens[1] ?? "");
125
+ const b = parseRgbChannel(tokens[2] ?? "");
126
+ if (r === null || g === null || b === null)
127
+ return null;
128
+ return { r, g, b };
129
+ }
130
+ function parseHue(token) {
131
+ const value = token.trim().toLowerCase();
132
+ if (!value)
133
+ return null;
134
+ if (value.endsWith("turn")) {
135
+ const numeric = Number.parseFloat(value.slice(0, -4));
136
+ if (!Number.isFinite(numeric))
137
+ return null;
138
+ return numeric * 360;
139
+ }
140
+ if (value.endsWith("rad")) {
141
+ const numeric = Number.parseFloat(value.slice(0, -3));
142
+ if (!Number.isFinite(numeric))
143
+ return null;
144
+ return (numeric * 180) / Math.PI;
145
+ }
146
+ if (value.endsWith("deg")) {
147
+ const numeric = Number.parseFloat(value.slice(0, -3));
148
+ if (!Number.isFinite(numeric))
149
+ return null;
150
+ return numeric;
151
+ }
152
+ const numeric = Number.parseFloat(value);
153
+ return Number.isFinite(numeric) ? numeric : null;
154
+ }
155
+ function parsePercent(token) {
156
+ const value = token.trim();
157
+ if (!value.endsWith("%"))
158
+ return null;
159
+ const numeric = Number.parseFloat(value.slice(0, -1));
160
+ if (!Number.isFinite(numeric))
161
+ return null;
162
+ return Math.min(100, Math.max(0, numeric));
163
+ }
164
+ function hslToRgb(h, s, l) {
165
+ const sat = Math.min(1, Math.max(0, s / 100));
166
+ const lig = Math.min(1, Math.max(0, l / 100));
167
+ const hue = ((h % 360) + 360) % 360;
168
+ const c = (1 - Math.abs(2 * lig - 1)) * sat;
169
+ const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
170
+ const m = lig - c / 2;
171
+ let r = 0;
172
+ let g = 0;
173
+ let b = 0;
174
+ if (hue < 60) {
175
+ r = c;
176
+ g = x;
177
+ }
178
+ else if (hue < 120) {
179
+ r = x;
180
+ g = c;
181
+ }
182
+ else if (hue < 180) {
183
+ g = c;
184
+ b = x;
185
+ }
186
+ else if (hue < 240) {
187
+ g = x;
188
+ b = c;
189
+ }
190
+ else if (hue < 300) {
191
+ r = x;
192
+ b = c;
193
+ }
194
+ else {
195
+ r = c;
196
+ b = x;
197
+ }
198
+ return {
199
+ r: clampByte((r + m) * 255),
200
+ g: clampByte((g + m) * 255),
201
+ b: clampByte((b + m) * 255)
202
+ };
203
+ }
204
+ function parseHslColor(input) {
205
+ const match = input.match(/^hsla?\((.+)\)$/i);
206
+ if (!match)
207
+ return null;
208
+ const raw = match[1]?.trim() ?? "";
209
+ const withoutAlpha = raw.replace(/\s*\/\s*[\d.]+%?\s*$/, "");
210
+ const tokens = withoutAlpha.includes(",")
211
+ ? withoutAlpha.split(",")
212
+ : withoutAlpha.split(/\s+/);
213
+ if (tokens.length < 3)
214
+ return null;
215
+ const h = parseHue(tokens[0] ?? "");
216
+ const s = parsePercent(tokens[1] ?? "");
217
+ const l = parsePercent(tokens[2] ?? "");
218
+ if (h === null || s === null || l === null)
219
+ return null;
220
+ return hslToRgb(h, s, l);
221
+ }
222
+ function parseCssColorToRgb(color) {
223
+ const input = color.trim();
224
+ if (!input)
225
+ return null;
226
+ if (input.startsWith("#"))
227
+ return parseHexColor(input);
228
+ if (/^rgba?\(/i.test(input))
229
+ return parseRgbColor(input);
230
+ if (/^hsla?\(/i.test(input))
231
+ return parseHslColor(input);
232
+ return null;
233
+ }
234
+ function relativeLuminance({ r, g, b }) {
235
+ const normalize = (channel) => {
236
+ const n = channel / 255;
237
+ return n <= 0.03928 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4;
238
+ };
239
+ return 0.2126 * normalize(r) + 0.7152 * normalize(g) + 0.0722 * normalize(b);
240
+ }
241
+ function resolveCustomSurfacePalette(backgroundColor) {
242
+ if (typeof backgroundColor !== "string")
243
+ return null;
244
+ const parsed = parseCssColorToRgb(backgroundColor);
245
+ if (!parsed)
246
+ return null;
247
+ const lightSurface = relativeLuminance(parsed) >= 0.56;
248
+ if (lightSurface) {
249
+ return {
250
+ foreground: "rgb(17 24 39)",
251
+ mutedForeground: "rgb(71 85 105)",
252
+ border: "rgba(15, 23, 42, 0.16)",
253
+ hoverBg: "rgba(15, 23, 42, 0.08)",
254
+ activeBg: "rgba(15, 23, 42, 0.14)"
255
+ };
256
+ }
257
+ return {
258
+ foreground: "rgb(243 244 246)",
259
+ mutedForeground: "rgb(203 213 225)",
260
+ border: "rgba(248, 250, 252, 0.18)",
261
+ hoverBg: "rgba(248, 250, 252, 0.08)",
262
+ activeBg: "rgba(248, 250, 252, 0.14)"
263
+ };
264
+ }
72
265
  export function SgDialog(props) {
73
266
  const { open: openProp, onOpenChange, defaultOpen = false, title, subtitle, leading, trailing, children, footer, size = "md", severity = "plain", animation = "zoom", transitionMs = 160, autoCloseMs, className, style, customColor, elevation, shadow, showTopAccent = true, overlayClassName, contentClassName, headerClassName, bodyClassName, footerClassName, closeable = true, onClose, closeOnOverlayClick = true, closeOnEsc = true, lockBodyScroll = true, initialFocusRef, restoreFocus = true, ariaLabel } = props;
74
267
  const isControlled = openProp !== undefined;
@@ -188,13 +381,22 @@ export function SgDialog(props) {
188
381
  "max-h-[85vh] flex flex-col transition duration-150 ease-out" +
189
382
  (showTopAccent ? " border-t-4" : "");
190
383
  const resolvedShadow = resolveDialogShadow(elevation, shadow);
384
+ const customPalette = resolveCustomSurfacePalette(customColor);
385
+ const dialogVars = {
386
+ "--sg-dialog-muted-foreground": customPalette?.mutedForeground ?? "hsl(var(--muted-foreground))",
387
+ "--sg-dialog-divider": customPalette?.border ?? "hsl(var(--border))",
388
+ "--sg-dialog-hover-bg": customPalette?.hoverBg ?? "hsl(var(--muted) / 0.6)",
389
+ "--sg-dialog-active-bg": customPalette?.activeBg ?? "hsl(var(--muted))"
390
+ };
191
391
  const transitionStyle = { transitionDuration: `${transitionMs}ms` };
192
392
  const contentStyle = {
393
+ ...dialogVars,
193
394
  ...transitionStyle,
194
395
  ...(customColor !== undefined ? { backgroundColor: customColor } : {}),
396
+ ...(customPalette ? { color: customPalette.foreground, borderColor: customPalette.border } : {}),
195
397
  ...(resolvedShadow !== undefined ? { boxShadow: resolvedShadow } : {})
196
398
  };
197
- return createPortal(_jsxs("div", { className: cn("fixed inset-0 z-[1000]", className), style: style, role: "dialog", "aria-modal": "true", "aria-label": a11yLabel, children: [_jsx("div", { ref: overlayRef, onMouseDown: onOverlayMouseDown, className: cn(overlayBase, overlayState, overlayClassName), style: transitionStyle }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs("div", { ref: contentRef, className: cn(contentBase, sizeClass(size), contentStateClass(animation, entered), showTopAccent ? severityClass(severity) : false, contentClassName), style: contentStyle, children: [(title || subtitle || closeable || leading || trailing) && (_jsxs("div", { className: cn("px-5 py-4 border-b border-border flex items-start gap-3", headerClassName), children: [leading ? _jsx("div", { className: "shrink-0 pt-0.5", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "text-base font-semibold leading-6", children: title }) : null, subtitle ? _jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [trailing ? _jsx("div", { className: "shrink-0", children: trailing }) : null, closeable ? (_jsx("button", { type: "button", onClick: close, className: cn("inline-flex items-center justify-center h-9 w-9 rounded-lg", "hover:bg-muted/60 active:bg-muted", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring,var(--primary)))]"), "aria-label": "Close", children: _jsx(CloseIcon, {}) })) : null] })] })), _jsx("div", { className: cn("px-5 py-4 overflow-auto", bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("px-5 py-4 border-t border-border flex items-center justify-end gap-2", footerClassName), children: footer })) : null] }) })] }), document.body);
399
+ return createPortal(_jsxs("div", { className: cn("fixed inset-0 z-[1000]", className), style: style, role: "dialog", "aria-modal": "true", "aria-label": a11yLabel, children: [_jsx("div", { ref: overlayRef, onMouseDown: onOverlayMouseDown, className: cn(overlayBase, overlayState, overlayClassName), style: transitionStyle }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs("div", { ref: contentRef, className: cn(contentBase, sizeClass(size), contentStateClass(animation, entered), showTopAccent ? severityClass(severity) : false, contentClassName), style: contentStyle, children: [(title || subtitle || closeable || leading || trailing) && (_jsxs("div", { className: cn("px-5 py-4 border-b border-[var(--sg-dialog-divider)] flex items-start gap-3", headerClassName), children: [leading ? _jsx("div", { className: "shrink-0 pt-0.5", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "text-base font-semibold leading-6", children: title }) : null, subtitle ? _jsx("div", { className: "mt-1 text-sm text-[var(--sg-dialog-muted-foreground)]", children: subtitle }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [trailing ? _jsx("div", { className: "shrink-0", children: trailing }) : null, closeable ? (_jsx("button", { type: "button", onClick: close, className: cn("inline-flex items-center justify-center h-9 w-9 rounded-lg", "hover:bg-[var(--sg-dialog-hover-bg)] active:bg-[var(--sg-dialog-active-bg)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring,var(--primary)))]"), "aria-label": "Close", children: _jsx(CloseIcon, {}) })) : null] })] })), _jsx("div", { className: cn("px-5 py-4 overflow-auto", bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("px-5 py-4 border-t border-[var(--sg-dialog-divider)] flex items-center justify-end gap-2", footerClassName), children: footer })) : null] }) })] }), document.body);
198
400
  }
199
401
  function CloseIcon() {
200
402
  return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-5", "aria-hidden": "true", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));