@seedgrid/fe-components 2026.3.4 → 2026.3.9

package/dist/inputs/SgPickList.js

@@ -0,0 +1,362 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SgButton } from "../buttons/SgButton";
+import { SgGroupBox } from "../layout/SgGroupBox";
+import { t, useComponentsI18n } from "../i18n";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function uniqueValues(values) {
+    return Array.from(new Set(values));
+}
+function moveSingleItem(items, fromIndex, toIndex) {
+    if (items.length < 2)
+        return items;
+    if (fromIndex < 0 || fromIndex >= items.length)
+        return items;
+    if (toIndex < 0 || toIndex > items.length)
+        return items;
+    if (fromIndex === toIndex || fromIndex + 1 === toIndex)
+        return items;
+    const next = [...items];
+    const [picked] = next.splice(fromIndex, 1);
+    if (picked === undefined)
+        return items;
+    const targetIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
+    const insertAt = Math.max(0, Math.min(targetIndex, next.length));
+    next.splice(insertAt, 0, picked);
+    return next;
+}
+function moveSelectionTop(items, selected) {
+    const picked = items.filter((item) => selected.has(item.value) && !item.disabled);
+    if (picked.length === 0)
+        return items;
+    const rest = items.filter((item) => !(selected.has(item.value) && !item.disabled));
+    return [...picked, ...rest];
+}
+function moveSelectionBottom(items, selected) {
+    const picked = items.filter((item) => selected.has(item.value) && !item.disabled);
+    if (picked.length === 0)
+        return items;
+    const rest = items.filter((item) => !(selected.has(item.value) && !item.disabled));
+    return [...rest, ...picked];
+}
+function moveSelectionUp(items, selected) {
+    const next = [...items];
+    for (let index = 1; index < next.length; index += 1) {
+        const current = next[index];
+        const prev = next[index - 1];
+        if (!(selected.has(current.value) && !current.disabled))
+            continue;
+        if (selected.has(prev.value) && !prev.disabled)
+            continue;
+        next[index] = prev;
+        next[index - 1] = current;
+    }
+    return next;
+}
+function moveSelectionDown(items, selected) {
+    const next = [...items];
+    for (let index = next.length - 2; index >= 0; index -= 1) {
+        const current = next[index];
+        const nextItem = next[index + 1];
+        if (!(selected.has(current.value) && !current.disabled))
+            continue;
+        if (selected.has(nextItem.value) && !nextItem.disabled)
+            continue;
+        next[index] = nextItem;
+        next[index + 1] = current;
+    }
+    return next;
+}
+function resolveMessage(translated, key, fallback) {
+    return translated === key ? fallback : translated;
+}
+function matchFilter(label, query, mode) {
+    const text = label.toLowerCase();
+    const search = query.toLowerCase();
+    if (mode === "startsWith")
+        return text.startsWith(search);
+    if (mode === "endsWith")
+        return text.endsWith(search);
+    return text.includes(search);
+}
+function SgPickListBase(props, imperativeRef) {
+    const i18n = useComponentsI18n();
+    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;
+    const [internalValue, setInternalValue] = React.useState(() => ({ source, target }));
+    const [internalSourceSelection, setInternalSourceSelection] = React.useState(() => uniqueValues(controlledSourceSelection ?? []));
+    const [internalTargetSelection, setInternalTargetSelection] = React.useState(() => uniqueValues(controlledTargetSelection ?? []));
+    const [sourceFilter, setSourceFilter] = React.useState("");
+    const [targetFilter, setTargetFilter] = React.useState("");
+    const [dragState, setDragState] = React.useState(null);
+    const isValueControlled = controlledValue !== undefined;
+    const isSourceSelectionControlled = controlledSourceSelection !== undefined;
+    const isTargetSelectionControlled = controlledTargetSelection !== undefined;
+    React.useEffect(() => {
+        if (isValueControlled)
+            return;
+        setInternalValue({ source, target });
+    }, [source, target, isValueControlled]);
+    const currentValue = isValueControlled ? controlledValue : internalValue;
+    const sourceItems = currentValue.source ?? [];
+    const targetItems = currentValue.target ?? [];
+    const sourceSelectionRaw = isSourceSelectionControlled ? (controlledSourceSelection ?? []) : internalSourceSelection;
+    const targetSelectionRaw = isTargetSelectionControlled ? (controlledTargetSelection ?? []) : internalTargetSelection;
+    const sourceSelection = uniqueValues(sourceSelectionRaw.filter((valueItem) => sourceItems.some((item) => item.value === valueItem)));
+    const targetSelection = uniqueValues(targetSelectionRaw.filter((valueItem) => targetItems.some((item) => item.value === valueItem)));
+    const sourceSelectedSet = new Set(sourceSelection);
+    const targetSelectedSet = new Set(targetSelection);
+    const canInteract = !disabled && !readOnly;
+    const commitValue = React.useCallback((nextValue, type) => {
+        if (!isValueControlled)
+            setInternalValue(nextValue);
+        onChange?.({ ...nextValue, type });
+    }, [isValueControlled, onChange]);
+    const commitSourceSelection = React.useCallback((values) => {
+        const normalized = uniqueValues(values);
+        if (!isSourceSelectionControlled)
+            setInternalSourceSelection(normalized);
+        onSourceSelectionChange?.(normalized);
+    }, [isSourceSelectionControlled, onSourceSelectionChange]);
+    const commitTargetSelection = React.useCallback((values) => {
+        const normalized = uniqueValues(values);
+        if (!isTargetSelectionControlled)
+            setInternalTargetSelection(normalized);
+        onTargetSelectionChange?.(normalized);
+    }, [isTargetSelectionControlled, onTargetSelectionChange]);
+    const clearSelection = React.useCallback(() => {
+        commitSourceSelection([]);
+        commitTargetSelection([]);
+    }, [commitSourceSelection, commitTargetSelection]);
+    const moveToTarget = React.useCallback(() => {
+        if (!canInteract)
+            return;
+        const picked = sourceItems.filter((item) => sourceSelectedSet.has(item.value) && !item.disabled);
+        if (picked.length === 0)
+            return;
+        const nextSource = sourceItems.filter((item) => !(sourceSelectedSet.has(item.value) && !item.disabled));
+        const nextTarget = [...targetItems, ...picked];
+        commitValue({ source: nextSource, target: nextTarget }, "moveToTarget");
+        commitSourceSelection([]);
+        commitTargetSelection(picked.map((item) => item.value));
+    }, [canInteract, sourceItems, sourceSelectedSet, targetItems, commitValue, commitSourceSelection, commitTargetSelection]);
+    const moveAllToTarget = React.useCallback(() => {
+        if (!canInteract)
+            return;
+        const picked = sourceItems.filter((item) => !item.disabled);
+        if (picked.length === 0)
+            return;
+        const nextSource = sourceItems.filter((item) => item.disabled);
+        const nextTarget = [...targetItems, ...picked];
+        commitValue({ source: nextSource, target: nextTarget }, "moveAllToTarget");
+        commitSourceSelection([]);
+        commitTargetSelection(picked.map((item) => item.value));
+    }, [canInteract, sourceItems, targetItems, commitValue, commitSourceSelection, commitTargetSelection]);
+    const moveToSource = React.useCallback(() => {
+        if (!canInteract)
+            return;
+        const picked = targetItems.filter((item) => targetSelectedSet.has(item.value) && !item.disabled);
+        if (picked.length === 0)
+            return;
+        const nextTarget = targetItems.filter((item) => !(targetSelectedSet.has(item.value) && !item.disabled));
+        const nextSource = [...sourceItems, ...picked];
+        commitValue({ source: nextSource, target: nextTarget }, "moveToSource");
+        commitTargetSelection([]);
+        commitSourceSelection(picked.map((item) => item.value));
+    }, [canInteract, targetItems, targetSelectedSet, sourceItems, commitValue, commitTargetSelection, commitSourceSelection]);
+    const moveAllToSource = React.useCallback(() => {
+        if (!canInteract)
+            return;
+        const picked = targetItems.filter((item) => !item.disabled);
+        if (picked.length === 0)
+            return;
+        const nextTarget = targetItems.filter((item) => item.disabled);
+        const nextSource = [...sourceItems, ...picked];
+        commitValue({ source: nextSource, target: nextTarget }, "moveAllToSource");
+        commitTargetSelection([]);
+        commitSourceSelection(picked.map((item) => item.value));
+    }, [canInteract, targetItems, sourceItems, commitValue, commitTargetSelection, commitSourceSelection]);
+    const moveSingleByDoubleClick = React.useCallback((from, fromIndex) => {
+        if (!canInteract)
+            return;
+        if (from === "source") {
+            const moving = sourceItems[fromIndex];
+            if (!moving || moving.disabled)
+                return;
+            const nextSource = sourceItems.filter((_, index) => index !== fromIndex);
+            const nextTarget = [...targetItems, moving];
+            commitValue({ source: nextSource, target: nextTarget }, "moveToTarget");
+            commitSourceSelection(sourceSelection.filter((valueItem) => valueItem !== moving.value));
+            commitTargetSelection([moving.value]);
+            return;
+        }
+        const moving = targetItems[fromIndex];
+        if (!moving || moving.disabled)
+            return;
+        const nextTarget = targetItems.filter((_, index) => index !== fromIndex);
+        const nextSource = [...sourceItems, moving];
+        commitValue({ source: nextSource, target: nextTarget }, "moveToSource");
+        commitTargetSelection(targetSelection.filter((valueItem) => valueItem !== moving.value));
+        commitSourceSelection([moving.value]);
+    }, [
+        canInteract,
+        sourceItems,
+        targetItems,
+        sourceSelection,
+        targetSelection,
+        commitValue,
+        commitSourceSelection,
+        commitTargetSelection
+    ]);
+    React.useImperativeHandle(imperativeRef, () => ({
+        getValue: () => ({ source: sourceItems, target: targetItems }),
+        setValue: (nextValue) => commitValue(nextValue, "dragdrop"),
+        moveToTarget,
+        moveAllToTarget,
+        moveToSource,
+        moveAllToSource,
+        clearSelection
+    }), [sourceItems, targetItems, commitValue, moveToTarget, moveAllToTarget, moveToSource, moveAllToSource, clearSelection]);
+    const applyReorder = (list, direction) => {
+        if (!canInteract)
+            return;
+        const items = list === "source" ? sourceItems : targetItems;
+        const selected = list === "source" ? sourceSelectedSet : targetSelectedSet;
+        if (selected.size === 0)
+            return;
+        let nextItems = items;
+        if (direction === "top")
+            nextItems = moveSelectionTop(items, selected);
+        if (direction === "up")
+            nextItems = moveSelectionUp(items, selected);
+        if (direction === "down")
+            nextItems = moveSelectionDown(items, selected);
+        if (direction === "bottom")
+            nextItems = moveSelectionBottom(items, selected);
+        if (list === "source")
+            commitValue({ source: nextItems, target: targetItems }, "reorderSource");
+        if (list === "target")
+            commitValue({ source: sourceItems, target: nextItems }, "reorderTarget");
+    };
+    const handleSelect = (list, item) => {
+        if (!canInteract || item.disabled)
+            return;
+        const selected = list === "source" ? sourceSelectedSet : targetSelectedSet;
+        const commit = list === "source" ? commitSourceSelection : commitTargetSelection;
+        const current = list === "source" ? sourceSelection : targetSelection;
+        if (selectionMode === "single") {
+            commit([item.value]);
+            return;
+        }
+        if (selected.has(item.value)) {
+            commit(current.filter((valueItem) => valueItem !== item.value));
+        }
+        else {
+            commit([...current, item.value]);
+        }
+    };
+    const dragEnabled = canInteract && draggable;
+    const handleDrop = (to, toIndex) => {
+        if (!dragEnabled || !dragState)
+            return;
+        if (dragState.from === to) {
+            const list = to === "source" ? sourceItems : targetItems;
+            const next = moveSingleItem(list, dragState.fromIndex, toIndex);
+            if (to === "source")
+                commitValue({ source: next, target: targetItems }, "reorderSource");
+            if (to === "target")
+                commitValue({ source: sourceItems, target: next }, "reorderTarget");
+            setDragState(null);
+            return;
+        }
+        const fromList = dragState.from === "source" ? sourceItems : targetItems;
+        const toList = to === "source" ? sourceItems : targetItems;
+        const moving = fromList[dragState.fromIndex];
+        if (!moving || moving.disabled) {
+            setDragState(null);
+            return;
+        }
+        const nextFrom = fromList.filter((_, idx) => idx !== dragState.fromIndex);
+        const nextTo = [...toList];
+        const insertAt = Math.max(0, Math.min(toIndex, nextTo.length));
+        nextTo.splice(insertAt, 0, moving);
+        if (dragState.from === "source" && to === "target") {
+            commitValue({ source: nextFrom, target: nextTo }, "dragdrop");
+            commitSourceSelection(sourceSelection.filter((valueItem) => valueItem !== moving.value));
+        }
+        else {
+            commitValue({ source: nextTo, target: nextFrom }, "dragdrop");
+            commitTargetSelection(targetSelection.filter((valueItem) => valueItem !== moving.value));
+        }
+        setDragState(null);
+    };
+    const moveTopLabel = resolveMessage(t(i18n, "components.orderlist.moveTop"), "components.orderlist.moveTop", "Move to top");
+    const moveUpLabel = resolveMessage(t(i18n, "components.orderlist.moveUp"), "components.orderlist.moveUp", "Move up");
+    const moveDownLabel = resolveMessage(t(i18n, "components.orderlist.moveDown"), "components.orderlist.moveDown", "Move down");
+    const moveBottomLabel = resolveMessage(t(i18n, "components.orderlist.moveBottom"), "components.orderlist.moveBottom", "Move to bottom");
+    const moveToTargetLabel = resolveMessage(t(i18n, "components.picklist.moveToTarget"), "components.picklist.moveToTarget", "Move selected to target");
+    const moveAllToTargetLabel = resolveMessage(t(i18n, "components.picklist.moveAllToTarget"), "components.picklist.moveAllToTarget", "Move all to target");
+    const moveToSourceLabel = resolveMessage(t(i18n, "components.picklist.moveToSource"), "components.picklist.moveToSource", "Move selected to source");
+    const moveAllToSourceLabel = resolveMessage(t(i18n, "components.picklist.moveAllToSource"), "components.picklist.moveAllToSource", "Move all to source");
+    const sourceHeaderLabel = sourceHeader ?? resolveMessage(t(i18n, "components.picklist.sourceHeader"), "components.picklist.sourceHeader", "Source");
+    const targetHeaderLabel = targetHeader ?? resolveMessage(t(i18n, "components.picklist.targetHeader"), "components.picklist.targetHeader", "Target");
+    const sourceFilterLabel = sourceFilterPlaceholder ?? resolveMessage(t(i18n, "components.picklist.sourceFilterPlaceholder"), "components.picklist.sourceFilterPlaceholder", "Search source");
+    const targetFilterLabel = targetFilterPlaceholder ?? resolveMessage(t(i18n, "components.picklist.targetFilterPlaceholder"), "components.picklist.targetFilterPlaceholder", "Search target");
+    const emptyLabel = emptyMessage ?? resolveMessage(t(i18n, "components.picklist.empty"), "components.picklist.empty", "No items available.");
+    const filteredSource = sourceItems
+        .map((item, index) => ({ item, index }))
+        .filter(({ item }) => !sourceFilter || matchFilter(item.label, sourceFilter, filterMatchMode));
+    const filteredTarget = targetItems
+        .map((item, index) => ({ item, index }))
+        .filter(({ item }) => !targetFilter || matchFilter(item.label, targetFilter, filterMatchMode));
+    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) => {
+            if (!dragEnabled)
+                return;
+            event.preventDefault();
+        }, onDrop: (event) => {
+            if (!dragEnabled)
+                return;
+            event.preventDefault();
+            handleDrop(list, list === "source" ? sourceItems.length : targetItems.length);
+        }, children: items.length === 0 ? (_jsx("li", { className: "list-none px-3 py-4 text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (items.map(({ item, index }) => {
+            const selectedItem = selected.has(item.value);
+            const itemDisabled = disabled || Boolean(item.disabled);
+            return (_jsx("li", { className: "list-none", children: _jsxs("button", { type: "button", role: "option", "aria-selected": selectedItem, disabled: itemDisabled, draggable: dragEnabled && !item.disabled, onClick: (event) => {
+                        if (event.detail >= 2) {
+                            moveSingleByDoubleClick(list, index);
+                            return;
+                        }
+                        handleSelect(list, item);
+                    }, onDragStart: (event) => {
+                        setDragState({ from: list, fromIndex: index });
+                        event.dataTransfer.effectAllowed = "move";
+                        try {
+                            event.dataTransfer.setData("text/plain", String(item.value));
+                        }
+                        catch {
+                            // Ignore setData failures in restrictive browser contexts.
+                        }
+                    }, onDragOver: (event) => {
+                        if (!dragEnabled)
+                            return;
+                        event.preventDefault();
+                    }, onDrop: (event) => {
+                        if (!dragEnabled)
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleDrop(list, index);
+                    }, onDragEnd: () => setDragState(null), className: cn("flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm", selectedItem
+                        ? "bg-[rgb(var(--sg-primary-100))] ring-1 ring-[rgb(var(--sg-primary-300))]"
+                        : "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
+                                ? itemTemplate(item, { index, selected: selectedItem, disabled: itemDisabled, list })
+                                : (_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}`));
+        })) }));
+    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" })] }));
+    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;
+    const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
+    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] })] })] }) }) }));
+}
+export const SgPickList = React.forwardRef((props, ref) => SgPickListBase(props, ref));

package/dist/inputs/SgRadioGroup.d.ts

@@ -17,8 +17,6 @@ export interface SgRadioGroupProps {
     orientation?: SgRadioGroupOrientation;
     selectionStyle?: SgRadioGroupSelectionStyle;
     iconOnly?: boolean;
-    showCancel?: boolean;
-    cancelLabel?: string;
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
@@ -28,6 +26,7 @@ export interface SgRadioGroupProps {
     register?: UseFormRegister<FieldValues>;
     error?: string;
     className?: string;
+    style?: React.CSSProperties;
     optionClassName?: string;
     groupBoxProps?: Omit<Partial<SgGroupBoxProps>, "children" | "title"> & {
         title?: string;

package/dist/inputs/SgRadioGroup.d.ts.map

@@ -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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,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,2CAsUpD"}
+{"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"}

package/dist/inputs/SgRadioGroup.js

@@ -6,7 +6,7 @@ import { SgGroupBox } from "../layout/SgGroupBox";
 import { t, useComponentsI18n } from "../i18n";
 export function SgRadioGroup(props) {
     const i18n = useComponentsI18n();
-    const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false, showCancel = false, cancelLabel, disabled = false, readOnly = false, required = false, onChange, name, control, register, error, className = "", optionClassName = "", groupBoxProps = {} } = props;
+    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;
     const resolvedGroupBoxTitle = (() => {
         const baseTitle = groupBoxProps.title ?? title ?? "";
         if (!required || !baseTitle.trim())
@@ -71,54 +71,10 @@ export function SgRadioGroup(props) {
                         handleChange(option.value);
                     }, className: inputClassName }), option.icon && (_jsx("span", { className: "flex items-center justify-center", children: option.icon })), !iconOnly && (_jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: option.label }))] }, `${option.value}-${index}`));
     };
-    const renderCancelOption = (registration) => {
-        if (!showCancel)
-            return null;
-        const isSelected = currentValue === null;
-        const inputClassName = isHighlightSelection
-            ? "sr-only"
-            : "w-4 h-4 text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed";
-        if (isHighlightSelection) {
-            return (_jsxs("label", { className: `
-            flex items-center gap-2 border px-3 py-2 transition-all duration-150 select-none
-            ${orientation === "vertical" ? "w-full -mt-px rounded-none first:mt-0 first:rounded-t-md last:rounded-b-md" : "inline-flex rounded-md"}
-            ${iconOnly ? "justify-center" : ""}
-            ${isSelected
-                    ? "relative z-10 translate-y-px rounded-md border-[rgb(var(--sg-primary-300))] bg-[rgb(var(--sg-primary-100))] ring-1 ring-[rgb(var(--sg-primary-200))] shadow-[inset_0_2px_4px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.75),0_1px_2px_rgba(15,23,42,0.08)]"
-                    : "border-[rgb(var(--sg-primary-200))] bg-[rgb(var(--sg-primary-50))] shadow-[0_2px_0_rgba(148,163,184,0.32),0_6px_10px_rgba(15,23,42,0.07)]"}
-            ${disabled
-                    ? "cursor-not-allowed opacity-50"
-                    : readOnly
-                        ? "cursor-default"
-                        : `cursor-pointer ${isSelected ? "hover:bg-[rgb(var(--sg-primary-200))]" : "hover:-translate-y-px hover:bg-[rgb(var(--sg-primary-100))] hover:shadow-[0_3px_0_rgba(148,163,184,0.32),0_10px_14px_rgba(15,23,42,0.1)]"}`}
-            focus-within:outline-none
-            focus-within:ring-2
-            focus-within:ring-[rgb(var(--sg-ring))]
-            ${optionClassName}
-          `, children: [_jsx("input", { type: "radio", ...(registration ? registration : { name: name || id }), value: "", checked: isSelected, disabled: disabled || readOnly, onChange: (event) => {
-                            if (registration)
-                                registration.onChange(event);
-                            handleChange(null);
-                        }, className: inputClassName }), !iconOnly ? (_jsx("span", { className: `
-                text-[rgb(var(--sg-text))] transition-[font-size] duration-150
-                ${isSelected ? "text-[15px] font-medium" : "text-sm"}
-              `, children: cancelLabel || t(i18n, "components.radiogroup.cancel") })) : null] }));
-        }
-        return (_jsxs("label", { className: `
-          inline-flex items-center gap-2 cursor-pointer select-none
-          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-          ${readOnly ? "cursor-default" : ""}
-          ${optionClassName}
-        `, children: [_jsx("input", { type: "radio", ...(registration ? registration : { name: name || id }), value: "", checked: isSelected, disabled: disabled || readOnly, onChange: (event) => {
-                        if (registration)
-                            registration.onChange(event);
-                        handleChange(null);
-                    }, className: inputClassName }), !iconOnly && (_jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: cancelLabel || t(i18n, "components.radiogroup.cancel") }))] }));
-    };
-    const content = (_jsxs("div", { className: className, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", className: groupBoxProps.className || "", children: _jsxs("div", { className: `
+    const content = (_jsxs("div", { className: className, style: style, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", className: groupBoxProps.className || "", children: _jsx("div", { className: `
             flex ${isHighlightSelection ? "gap-0" : "gap-4"}
             ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
-          `, role: "radiogroup", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: [source.map((option, index) => renderRadioOption(option, index)), renderCancelOption()] }) }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
+          `, 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 }))] }));
     // React Hook Form integration
     if (control && name) {
         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) => {
@@ -130,10 +86,10 @@ export function SgRadioGroup(props) {
         const registration = register(name, {
             required: required ? t(i18n, "components.inputs.required") : false
         });
-        return (_jsxs("div", { className: className, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", children: _jsxs("div", { className: `
+        return (_jsxs("div", { className: className, style: style, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", children: _jsx("div", { className: `
               flex ${isHighlightSelection ? "gap-0" : "gap-4"}
               ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
-            `, role: "radiogroup", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: [source.map((option, index) => renderRadioOption(option, index, registration)), renderCancelOption(registration)] }) }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
+            `, role: "radiogroup", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderRadioOption(option, index, registration)) }) }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
     }
     return content;
 }

package/dist/inputs/SgRating.d.ts

@@ -22,6 +22,8 @@ export interface SgRatingProps {
     size?: SgRatingSize;
     /** Custom class name */
     className?: string;
+    /** Custom inline style */
+    style?: React.CSSProperties;
     /** Custom icon for filled state */
     onIcon?: React.ReactNode;
     /** Custom icon for empty state */

package/dist/inputs/SgRating.d.ts.map

@@ -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,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;AA8QD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkC5C"}
+{"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"}

package/dist/inputs/SgRating.js

@@ -22,7 +22,7 @@ function ErrorText(props) {
 }
 function SgRatingBase(props) {
     const i18n = useComponentsI18n();
-    const { id, label, value = 0, stars = 5, allowHalf = false, cancel = true, disabled = false, readOnly = false, size = "md", className = "", onIcon, offIcon, cancelIcon, color = "hsl(var(--primary))", emptyColor = "hsl(var(--muted-foreground))", showTooltip = false, onChange, onHover, error, required = false, requiredMessage } = props;
+    const { id, label, value = 0, stars = 5, allowHalf = false, cancel = true, disabled = false, readOnly = false, size = "md", className = "", style, onIcon, offIcon, cancelIcon, color = "hsl(var(--primary))", emptyColor = "hsl(var(--muted-foreground))", showTooltip = false, onChange, onHover, error, required = false, requiredMessage } = props;
     const [hoverValue, setHoverValue] = React.useState(null);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalError, setInternalError] = React.useState(null);
@@ -80,7 +80,7 @@ function SgRatingBase(props) {
         }
         return 0;
     };
-    return (_jsxs("div", { className: `sg-rating ${className}`, children: [label && (_jsxs("label", { htmlFor: id, className: "mb-2 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-1 text-red-600", children: "*" })] })), _jsxs("div", { className: "flex items-center gap-1", onMouseLeave: handleMouseLeave, style: {
+    return (_jsxs("div", { className: `sg-rating ${className}`, style: style, children: [label && (_jsxs("label", { htmlFor: id, className: "mb-2 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-1 text-red-600", children: "*" })] })), _jsxs("div", { className: "flex items-center gap-1", onMouseLeave: handleMouseLeave, style: {
                     opacity: disabled ? 0.5 : 1,
                     cursor: isInteractive ? "pointer" : "default"
                 }, children: [cancel && (_jsx("button", { type: "button", onClick: handleCancel, disabled: disabled || readOnly, className: "mr-1 transition-opacity hover:opacity-80", style: {

package/dist/inputs/SgTextEditor.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export type SgTextEditorSaveMeta = {
     htmlDocument: string;
     contentHtml: string;
@@ -20,6 +21,7 @@ export type SgTextEditorProps = {
     showCssEditor?: boolean;
     cssEditorLabel?: string;
     className?: string;
+    style?: React.CSSProperties;
 };
 export declare function SgTextEditor(props: Readonly<SgTextEditorProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SgTextEditor {

package/dist/inputs/SgTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAgBA,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;CACpB,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqZ9D;yBArZe,YAAY"}
+{"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"}

package/dist/inputs/SgTextEditor.js

@@ -68,7 +68,7 @@ function canRun(editor, fn) {
     }
 }
 export function SgTextEditor(props) {
-    const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder = "Type here...", disabled, borderRadius, showCssEditor = false, cssEditorLabel = "Embedded CSS", className } = props;
+    const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder = "Type here...", disabled, borderRadius, showCssEditor = false, cssEditorLabel = "Embedded CSS", className, style } = props;
     const resolvedBorderRadius = React.useMemo(() => {
         if (borderRadius === undefined)
             return undefined;
@@ -153,7 +153,7 @@ export function SgTextEditor(props) {
     const cssTextareaStyle = resolvedBorderRadius
         ? { borderRadius: resolvedBorderRadius }
         : undefined;
-    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-t-lg border border-b-0 bg-background p-2", style: toolbarStyle, children: [_jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, value: active("heading", { level: 1 })
+    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-t-lg border border-b-0 bg-background p-2", style: toolbarStyle, children: [_jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, value: active("heading", { level: 1 })
                             ? "h1"
                             : active("heading", { level: 2 })
                                 ? "h2"

package/dist/layout/SgCard.d.ts

@@ -6,7 +6,7 @@ export type SgCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title" | "onC
     headerClassName?: string;
     bodyClassName?: string;
     footerClassName?: string;
-    variant?: SgCardVariant;
+    cardStyle?: SgCardVariant;
     size?: SgCardSize;
     leading?: React.ReactNode;
     trailing?: React.ReactNode;

package/dist/layout/SgCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0BF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA4OlD;yBA5Oe,MAAM"}
+{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0BF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA4OlD;yBA5Oe,MAAM"}

package/dist/layout/SgCard.js

@@ -8,7 +8,7 @@ function DefaultCaret({ open }) {
     return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cn("shrink-0 transition-transform duration-200", open ? "rotate-90" : "rotate-0"), "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01Z" }) }));
 }
 export function SgCard(props) {
-    const { className, headerClassName, bodyClassName, footerClassName, variant = "default", size = "md", leading, trailing, trailer, title, description, actions, header, footer, clickable = false, disabled = false, collapsible = false, defaultOpen = true, open: controlledOpen, onOpenChange, collapseIcon, collapseToggleAlign = "left", toggleOnHeaderClick = true, onClick, children, ...rest } = props;
+    const { className, headerClassName, bodyClassName, footerClassName, cardStyle = "default", size = "md", leading, trailing, trailer, title, description, actions, header, footer, clickable = false, disabled = false, collapsible = false, defaultOpen = true, open: controlledOpen, onOpenChange, collapseIcon, collapseToggleAlign = "left", toggleOnHeaderClick = true, onClick, children, ...rest } = props;
     const isInteractive = (clickable || typeof onClick === "function") && !collapsible;
     const trailingNode = trailing ?? trailer;
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
@@ -47,11 +47,11 @@ export function SgCard(props) {
                 title: "text-sm",
                 desc: "text-xs"
             };
-    const variantClasses = variant === "flat"
+    const variantClasses = cardStyle === "flat"
         ? "bg-background border border-border/60 shadow-none"
-        : variant === "outlined"
+        : cardStyle === "outlined"
             ? "bg-background border border-border shadow-none"
-            : variant === "elevated"
+            : cardStyle === "elevated"
                 ? "bg-background border border-border shadow-md"
                 : "bg-background border border-border shadow-sm";
     const interactiveClasses = isInteractive

package/dist/layout/SgCarousel.d.ts

@@ -33,6 +33,8 @@ export interface SgCarouselProps {
     gap?: number;
     /** Callback when active index changes */
     onIndexChange?: (index: number) => void;
+    /** Custom inline style for container */
+    style?: React.CSSProperties;
     /** Custom render for navigation buttons */
     customNavigators?: {
         prev?: React.ReactNode;

package/dist/layout/SgCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgCarousel.d.ts","sourceRoot":"","sources":["../../src/layout/SgCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE;QACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA2RhD"}
+{"version":3,"file":"SgCarousel.d.ts","sourceRoot":"","sources":["../../src/layout/SgCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE;QACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA4RhD"}