@seedgrid/fe-components 2026.3.4 → 2026.3.9

package/dist/layout/SgCarousel.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from "lucide-react";
 export function SgCarousel(props) {
-    const { id, items, numVisible = 1, numScroll = 1, orientation = "horizontal", circular = true, autoPlay = false, autoPlayInterval = 3000, showNavigators = true, showIndicators = true, className = "", itemClassName = "", width = "100%", height, gap = 16, onIndexChange, customNavigators } = props;
+    const { id, items, numVisible = 1, numScroll = 1, orientation = "horizontal", circular = true, autoPlay = false, autoPlayInterval = 3000, showNavigators = true, showIndicators = true, className = "", itemClassName = "", width = "100%", height, gap = 16, onIndexChange, style, customNavigators } = props;
     const [activeIndex, setActiveIndex] = React.useState(0);
     const [isHovered, setIsHovered] = React.useState(false);
     const timerRef = React.useRef(null);
@@ -134,7 +134,7 @@ export function SgCarousel(props) {
                 : `left-1/2 -translate-x-1/2 ${isPrev ? "-top-5" : "-bottom-5"}`}
         `, children: _jsx(Icon, { className: "h-6 w-6 text-foreground" }) }));
     };
-    return (_jsxs("div", { id: id, className: `relative ${className}`, style: { width, height }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [showNavigators && (_jsxs(_Fragment, { children: [_jsx(NavButton, { direction: "prev", onClick: handlePrev, disabled: !canGoPrev }), _jsx(NavButton, { direction: "next", onClick: handleNext, disabled: !canGoNext })] })), _jsx("div", { ref: containerRef, className: "h-full w-full overflow-hidden rounded-lg", children: _jsx("div", { className: `
+    return (_jsxs("div", { id: id, className: `relative ${className}`, style: { width, height, ...style }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [showNavigators && (_jsxs(_Fragment, { children: [_jsx(NavButton, { direction: "prev", onClick: handlePrev, disabled: !canGoPrev }), _jsx(NavButton, { direction: "next", onClick: handleNext, disabled: !canGoNext })] })), _jsx("div", { ref: containerRef, className: "h-full w-full overflow-hidden rounded-lg", children: _jsx("div", { className: `
             flex transition-transform duration-500 ease-in-out
             ${isHorizontal ? "flex-row" : "flex-col"}
           `, style: {

package/dist/layout/SgDockLayout.d.ts

@@ -14,6 +14,7 @@ export type SgDockLayoutState = {
 export type SgDockLayoutProps = {
     id: string;
     className?: string;
+    style?: React.CSSProperties;
     children: React.ReactNode;
     defaultState?: SgDockLayoutState;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SgDockLayout.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgDockLayout.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,CAAC,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,IAAI,CAAC;IAC9D,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IAC9D,uBAAuB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,KAAK,mBAAmB,GAAG,IAAI,CAAC;IACzG,mBAAmB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,CAAC;IACpD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC1C,gBAAgB,EAAE,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IACpD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACpD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxE,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,CAAC;IACzD,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D,CAAC;AAIF,wBAAgB,eAAe,4BAE9B;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAwR9D;yBAxRe,YAAY"}

package/dist/layout/SgDockLayout.js

@@ -8,7 +8,7 @@ export function useSgDockLayout() {
 }
 const EMPTY_STATE = { version: 1, toolbars: {} };
 export function SgDockLayout(props) {
-    const { id, className, children, defaultState } = props;
+    const { id, className, style, children, defaultState } = props;
     const { value: persisted, setValue, hydrated } = useSgPersistentState({
         baseKey: `dock-layout:${id}`,
         defaultValue: defaultState ?? EMPTY_STATE
@@ -228,6 +228,6 @@ export function SgDockLayout(props) {
         getToolbarCollapsed,
         setToolbarCollapsed
     };
-    return (_jsx(DockContext.Provider, { value: ctx, children: _jsx("div", { className: className, children: children }) }));
+    return (_jsx(DockContext.Provider, { value: ctx, children: _jsx("div", { className: className, style: style, children: children }) }));
 }
 SgDockLayout.displayName = "SgDockLayout";

package/dist/layout/SgDockZone.d.ts

@@ -3,6 +3,7 @@ import { type SgDockZoneId } from "./SgDockLayout";
 export type SgDockZoneProps = {
     zone: SgDockZoneId;
     className?: string;
+    style?: React.CSSProperties;
     children?: React.ReactNode;
 };
 export declare function SgDockZone(props: Readonly<SgDockZoneProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SgDockZone.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockZone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA0E1D;yBA1Ee,UAAU"}
+{"version":3,"file":"SgDockZone.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockZone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA2E1D;yBA3Ee,UAAU"}

package/dist/layout/SgDockZone.js

@@ -15,7 +15,7 @@ const DEFAULT_ZONE_LAYOUT_CLASS = {
     free: "col-start-2 row-start-2 items-center justify-center"
 };
 export function SgDockZone(props) {
-    const { zone, className, children } = props;
+    const { zone, className, style, children } = props;
     const dock = useSgDockLayout();
     const i18n = useComponentsI18n();
     const ref = React.useRef(null);
@@ -40,7 +40,7 @@ export function SgDockZone(props) {
         dock.registerZone(zone, ref.current);
         return () => dock.registerZone(zone, null);
     }, [dock, zone]);
-    return (_jsxs("div", { ref: ref, "data-sg-dock-zone": zone, className: cn(hasExplicitPositionClass ? "flex min-h-0 min-w-0 gap-3 p-2" : "relative flex min-h-0 min-w-0 gap-3 p-2", isHorizontalZone
+    return (_jsxs("div", { ref: ref, "data-sg-dock-zone": zone, style: style, className: cn(hasExplicitPositionClass ? "flex min-h-0 min-w-0 gap-3 p-2" : "relative flex min-h-0 min-w-0 gap-3 p-2", isHorizontalZone
             ? "flex-row flex-wrap items-start content-start"
             : isVerticalZone
                 ? "flex-col flex-wrap items-start content-start"

package/dist/layout/SgGroupBox.d.ts

@@ -5,6 +5,7 @@ export type SgGroupBoxProps = {
     width?: number | string;
     children: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 };
 export declare function SgGroupBox(props: SgGroupBoxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgGroupBox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SgGroupBox.d.ts","sourceRoot":"","sources":["../../src/layout/SgGroupBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAOF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmBhD"}
+{"version":3,"file":"SgGroupBox.d.ts","sourceRoot":"","sources":["../../src/layout/SgGroupBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAOF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAoBhD"}

package/dist/layout/SgGroupBox.js

@@ -6,9 +6,10 @@ function toCssSize(value) {
     return typeof value === "number" ? `${value}px` : value;
 }
 export function SgGroupBox(props) {
-    const { title, height, width, children, className } = props;
+    const { title, height, width, children, className, style } = props;
     return (_jsx("div", { className: className, style: {
             width: toCssSize(width) ?? "100%",
-            height: toCssSize(height)
+            height: toCssSize(height),
+            ...style
         }, 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 })] }) }));
 }

package/dist/layout/SgMenu.d.ts

@@ -38,8 +38,8 @@ export type SgMenuProps = {
     brand?: SgMenuBrand;
     user?: SgMenuUser;
     userMenu?: SgMenuNode[];
-    variant?: "sidebar" | "drawer" | "inline" | "hybrid";
-    menuStyle?: SgMenuStyle;
+    menuStyle?: "sidebar" | "drawer" | "inline" | "hybrid";
+    menuVariantStyle?: SgMenuStyle;
     position?: "left" | "right";
     density?: "compact" | "comfortable";
     indent?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"SgMenu.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgMenu.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.tsx"],"names":[],"mappings":"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"}

package/dist/layout/SgMenu.js

@@ -194,7 +194,7 @@ function resolveIcon(node) {
     return node.icon ?? null;
 }
 export function SgMenu(props) {
-    const { id, menu, selection, brand, user, userMenu, variant = "sidebar", menuStyle = "panel", position = "left", density = "comfortable", indent = 16, collapsedWidth = 72, expandedWidth = 280, overlaySize, overlayBackdrop, dockable = false, dockZone, draggable = false, orientationDirection, mode = "multiple", expandedIds: expandedIdsProp, defaultExpandedIds = [], onExpandedIdsChange, collapsed, defaultCollapsed = false, onCollapsedChange, showCollapseButton = false, open, defaultOpen = false, onOpenChange, closeOnNavigate, pinned, defaultPinned = false, onPinnedChange, showPinButton = false, onNavigate, onAction, onItemClick, ariaLabel = "Menu", keyboardNavigation = true, openSubmenuOnHover = false, search, elevation = "none", border = true, className, style, userSectionClassName, userSectionStyle, footer } = props;
+    const { id, menu, selection, brand, user, userMenu, menuStyle = "sidebar", menuVariantStyle = "panel", position = "left", density = "comfortable", indent = 16, collapsedWidth = 72, expandedWidth = 280, overlaySize, overlayBackdrop, dockable = false, dockZone, draggable = false, orientationDirection, mode = "multiple", expandedIds: expandedIdsProp, defaultExpandedIds = [], onExpandedIdsChange, collapsed, defaultCollapsed = false, onCollapsedChange, showCollapseButton = false, open, defaultOpen = false, onOpenChange, closeOnNavigate, pinned, defaultPinned = false, onPinnedChange, showPinButton = false, onNavigate, onAction, onItemClick, ariaLabel = "Menu", keyboardNavigation = true, openSubmenuOnHover = false, search, elevation = "none", border = true, className, style, userSectionClassName, userSectionStyle, footer } = props;
     const densityCfg = density === "compact"
         ? {
             row: "min-h-8 px-2 py-1 text-xs",
@@ -211,11 +211,11 @@ export function SgMenu(props) {
             gap: "gap-2.5"
         };
     const maps = React.useMemo(() => buildMenuMaps(menu), [menu]);
-    const resolvedMenuStyle = normalizeMenuStyle(menuStyle);
+    const resolvedMenuStyle = normalizeMenuStyle(menuVariantStyle);
     const dock = useSgDockLayout();
     const autoId = React.useId();
     const dockableId = React.useMemo(() => id ?? `sg-menu-${autoId.replace(/[:]/g, "")}`, [autoId, id]);
-    const dockMode = Boolean(dockable && dock && variant !== "drawer" && variant !== "hybrid");
+    const dockMode = Boolean(dockable && dock && menuStyle !== "drawer" && menuStyle !== "hybrid");
     const defaultDockZone = dockZone ?? resolveDockZoneFromOrientationDirection(orientationDirection);
     const assignedDockZone = dockMode && dock ? dock.getToolbarZone(dockableId) : null;
     const effectiveDockZone = dockMode ? assignedDockZone ?? defaultDockZone : null;
@@ -280,11 +280,11 @@ export function SgMenu(props) {
     }, [isCollapsedPropControlled, collapsePersistKey, hasEnvironmentProvider, savePersistedState, onCollapsedChange]);
     const [drawerOpen, setDrawerOpen] = useControllableState(open, defaultOpen, onOpenChange);
     const [pinnedState, setPinnedState] = useControllableState(pinned, defaultPinned, onPinnedChange);
-    const isCollapsed = variant === "drawer" ? false : variant === "hybrid" ? !pinnedState : collapsedState;
+    const isCollapsed = menuStyle === "drawer" ? false : menuStyle === "hybrid" ? !pinnedState : collapsedState;
     const collapsedWidthCss = toCssSize(collapsedWidth, 72);
     const expandedWidthCss = toCssSize(expandedWidth, 280);
-    const resolvedOverlaySize = overlaySize ?? { default: variant === "drawer" ? 320 : expandedWidth, min: 240, max: 520 };
-    const overlayBackdropResolved = overlayBackdrop ?? (variant === "drawer");
+    const resolvedOverlaySize = overlaySize ?? { default: menuStyle === "drawer" ? 320 : expandedWidth, min: 240, max: 520 };
+    const overlayBackdropResolved = overlayBackdrop ?? (menuStyle === "drawer");
     const closeOnNavigateResolved = closeOnNavigate ?? true;
     const searchEnabled = search?.enabled ?? false;
     const [searchValue, setSearchValue] = React.useState("");
@@ -380,12 +380,12 @@ export function SgMenu(props) {
         }
     }, [megaActiveId, menu]);
     React.useEffect(() => {
-        if (variant !== "hybrid")
+        if (menuStyle !== "hybrid")
             return;
         if (!pinnedState || !drawerOpen)
             return;
         setDrawerOpen(false);
-    }, [drawerOpen, pinnedState, setDrawerOpen, variant]);
+    }, [drawerOpen, pinnedState, setDrawerOpen, menuStyle]);
     React.useEffect(() => {
         if (!dockMode || !dock)
             return;
@@ -539,7 +539,7 @@ export function SgMenu(props) {
             node.onClick();
             onAction?.(node);
         }
-        if ((variant === "drawer" || variant === "hybrid") && hasUrl && closeOnNavigateResolved && !pinnedState) {
+        if ((menuStyle === "drawer" || menuStyle === "hybrid") && hasUrl && closeOnNavigateResolved && !pinnedState) {
             setDrawerOpen(false);
         }
     }, [
@@ -549,7 +549,7 @@ export function SgMenu(props) {
         onNavigate,
         pinnedState,
         setDrawerOpen,
-        variant,
+        menuStyle,
         hideMenuHint
     ]);
     const handleDockDragPointerDown = React.useCallback((event) => {
@@ -891,8 +891,8 @@ export function SgMenu(props) {
     };
     const showDockDragHandle = dockMode && draggable && (!isCollapsed || isHorizontalDockZone);
     const collapseIconSide = isHorizontalDockZone ? effectiveDockZone : resolvedPosition;
-    const collapseButton = showCollapseButton && variant !== "drawer" ? (_jsx("button", { type: "button", onClick: () => {
-            if (variant === "hybrid") {
+    const collapseButton = showCollapseButton && menuStyle !== "drawer" ? (_jsx("button", { type: "button", onClick: () => {
+            if (menuStyle === "hybrid") {
                 if (pinnedState) {
                     setPinnedState(false);
                     setDrawerOpen(false);
@@ -902,7 +902,7 @@ export function SgMenu(props) {
                 return;
             }
             setCollapsedState(!collapsedState);
-        }, "aria-label": variant === "hybrid"
+        }, "aria-label": menuStyle === "hybrid"
             ? pinnedState
                 ? "Unpin and collapse menu"
                 : drawerOpen
@@ -910,7 +910,7 @@ export function SgMenu(props) {
                     : "Open menu"
             : collapsedState
                 ? "Expand menu"
-                : "Collapse menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(CollapseIcon, { collapsed: variant === "hybrid" ? !(pinnedState || drawerOpen) : collapsedState, side: collapseIconSide }) })) : null;
+                : "Collapse menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(CollapseIcon, { collapsed: menuStyle === "hybrid" ? !(pinnedState || drawerOpen) : collapsedState, side: collapseIconSide }) })) : null;
     const showBrandContent = Boolean(brand && (!isCollapsed || isHorizontalDockZone));
     const showBrandSpacer = !showBrandContent && !isCollapsed;
     // In horizontal zones: collapse goes left when aligned left/center, right when aligned right.
@@ -921,7 +921,7 @@ export function SgMenu(props) {
     const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 rounded-md", isHorizontalDockZone ? "flex-none" : "flex-1", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? "brand", className: cn("w-auto", isHorizontalDockZone ? "h-7 max-w-[120px]" : "h-12 max-w-[160px]") })) : null, brand.title ? (_jsx("span", { className: "truncate text-sm font-semibold", children: brand.title })) : null] })) : showBrandSpacer ? (_jsx("div", { className: "flex-1" })) : null, showDockDragHandle ? (_jsx("button", { type: "button", onPointerDown: handleDockDragPointerDown, "aria-label": "Drag menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", dockDragActive ? "cursor-grabbing" : "cursor-grab"), children: _jsxs("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "16", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "1.25", fill: "currentColor" })] }) })) : null, showPinButton ? (_jsx("button", { type: "button", onClick: () => {
                     const next = !pinnedState;
                     setPinnedState(next);
-                    if (variant === "hybrid" && next)
+                    if (menuStyle === "hybrid" && next)
                         setDrawerOpen(false);
                 }, "aria-label": pinnedState ? "Unpin menu" : "Pin menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(PinIcon, { pinned: pinnedState }) })) : null, !collapseOnLeft ? collapseButton : null] })) : null;
     const shellContentArea = (_jsxs(_Fragment, { children: [searchEnabled && !isCollapsed ? (_jsx("div", { className: cn("border-b border-border", densityCfg.section), children: _jsx(SgAutocomplete, { id: `${searchInputId}-menu-search`, label: search?.placeholder ?? "Search", placeholder: search?.placeholder ?? "Search", value: searchValue, onChange: setSearchValue, source: autocompleteSource, minLengthForSearch: 0, openOnFocus: true, showDropDownButton: true, clearOnSelect: true, grouped: true, onSelect: (item) => {
@@ -961,7 +961,7 @@ export function SgMenu(props) {
                         const node = data?.nodeId ? maps.nodeById.get(data.nodeId) : undefined;
                         const iconNode = node ? resolveIcon(node) : null;
                         return (_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("span", { className: cn("mt-0.5 inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(item.label, 1) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate", children: item.label }), path ? _jsx("div", { className: "truncate text-xs text-muted-foreground", children: path }) : null] })] }));
-                    } }) })) : null, _jsx("div", { className: cn("min-h-0 flex-1", effectiveMenuStyle === "panel" ? "overflow-auto" : "overflow-visible", densityCfg.section), role: "navigation", "aria-label": ariaLabel, onKeyDown: effectiveMenuStyle === "panel" ? onListKeyDown : undefined, children: renderMenuTree(filteredMenu) }), (user || (userMenu && userMenu.length > 0) || footer) ? (_jsx("div", { className: cn("border-t border-border", densityCfg.section, userSectionClassName), style: userSectionStyle, children: user ? (isCollapsed ? (_jsx("button", { type: "button", onClick: user.onClick, className: cn("mb-2 w-full rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", "hover:bg-muted/60", densityCfg.row), title: user.name, children: _jsx(SgAvatar, { src: user.avatar ? undefined : user.avatarSrc, label: user.name, size: density === "compact" ? "sm" : "md", severity: "secondary", children: user.avatar ?? undefined }) })) : (_jsxs(SgCard, { className: "mb-2", variant: "outlined", size: density === "compact" ? "sm" : "md", collapsible: true, defaultOpen: false, title: user.name, description: user.subtitle, leading: (_jsx("button", { type: "button", onClick: (event) => {
+                    } }) })) : null, _jsx("div", { className: cn("min-h-0 flex-1", effectiveMenuStyle === "panel" ? "overflow-auto" : "overflow-visible", densityCfg.section), role: "navigation", "aria-label": ariaLabel, onKeyDown: effectiveMenuStyle === "panel" ? onListKeyDown : undefined, children: renderMenuTree(filteredMenu) }), (user || (userMenu && userMenu.length > 0) || footer) ? (_jsx("div", { className: cn("border-t border-border", densityCfg.section, userSectionClassName), style: userSectionStyle, children: user ? (isCollapsed ? (_jsx("button", { type: "button", onClick: user.onClick, className: cn("mb-2 w-full rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", "hover:bg-muted/60", densityCfg.row), title: user.name, children: _jsx(SgAvatar, { src: user.avatar ? undefined : user.avatarSrc, label: user.name, size: density === "compact" ? "sm" : "md", severity: "secondary", children: user.avatar ?? undefined }) })) : (_jsxs(SgCard, { className: "mb-2", cardStyle: "outlined", size: density === "compact" ? "sm" : "md", collapsible: true, defaultOpen: false, title: user.name, description: user.subtitle, leading: (_jsx("button", { type: "button", onClick: (event) => {
                             event.stopPropagation();
                             user.onClick?.();
                         }, className: "inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", "aria-label": user.name, children: _jsx(SgAvatar, { src: user.avatar ? undefined : user.avatarSrc, label: user.name, size: density === "compact" ? "sm" : "md", severity: "secondary", children: user.avatar ?? undefined }) })), children: [userMenu && userMenu.length > 0 ? (_jsx("div", { className: "space-y-0.5", children: userMenu.map((node) => renderNode(node, 0)) })) : null, footer ? _jsx("div", { className: userMenu && userMenu.length > 0 ? "mt-2" : undefined, children: footer }) : null] }))) : (_jsxs(_Fragment, { children: [userMenu && userMenu.length > 0 && !isCollapsed ? (_jsx("div", { className: "space-y-0.5", children: userMenu.map((node) => renderNode(node, 0)) })) : null, footer ? _jsx("div", { className: "mt-2", children: footer }) : null] })) })) : null] }));
@@ -972,11 +972,11 @@ export function SgMenu(props) {
         : dockMode && effectiveDockZone === "left"
             ? { alignSelf: "flex-start" }
             : undefined;
-    const sidebarWidthCss = dockMode && isHorizontalDockZone && variant !== "sidebar"
+    const sidebarWidthCss = dockMode && isHorizontalDockZone && menuStyle !== "sidebar"
         ? "100%"
-        : variant === "inline" && isMegaMenuStyle
+        : menuStyle === "inline" && isMegaMenuStyle
             ? "100%"
-            : variant === "hybrid"
+            : menuStyle === "hybrid"
                 ? pinnedState
                     ? expandedWidthCss
                     : collapsedWidthCss
@@ -1004,11 +1004,11 @@ export function SgMenu(props) {
     if (dockMode && portalTarget) {
         return (_jsxs(_Fragment, { children: [createPortal(shellForRender, portalTarget), menuHintNode] }));
     }
-    if (variant === "drawer") {
+    if (menuStyle === "drawer") {
         return (_jsxs(_Fragment, { children: [_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: !pinnedState, closeOnEsc: !pinnedState, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", className: className, style: style, children: shellBody }), menuHintNode] }));
     }
-    if (variant === "hybrid") {
-        return (_jsxs(_Fragment, { children: [shellForRender, !pinnedState ? (_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: true, closeOnEsc: true, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", children: _jsx(SgMenu, { menu: menu, selection: { activeId: effectiveActiveId, activeUrl: effectiveActiveUrl }, brand: brand, user: user, userMenu: userMenu, variant: "inline", menuStyle: menuStyle, position: position, density: density, indent: indent, collapsed: false, collapsedWidth: collapsedWidth, expandedWidth: expandedWidth, mode: mode, expandedIds: expandedIds, onExpandedIdsChange: setExpandedIds, showCollapseButton: false, showPinButton: showPinButton, pinned: pinnedState, onPinnedChange: (next) => {
+    if (menuStyle === "hybrid") {
+        return (_jsxs(_Fragment, { children: [shellForRender, !pinnedState ? (_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: true, closeOnEsc: true, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", children: _jsx(SgMenu, { menu: menu, selection: { activeId: effectiveActiveId, activeUrl: effectiveActiveUrl }, brand: brand, user: user, userMenu: userMenu, menuStyle: "inline", menuVariantStyle: menuVariantStyle, position: position, density: density, indent: indent, collapsed: false, collapsedWidth: collapsedWidth, expandedWidth: expandedWidth, mode: mode, expandedIds: expandedIds, onExpandedIdsChange: setExpandedIds, showCollapseButton: false, showPinButton: showPinButton, pinned: pinnedState, onPinnedChange: (next) => {
                             setPinnedState(next);
                             if (next)
                                 setDrawerOpen(false);

package/dist/layout/SgPageControl.d.ts

@@ -8,6 +8,7 @@ export type SgPageControlPageProps = {
     disabled?: boolean;
     keepMounted?: boolean;
     className?: string;
+    style?: React.CSSProperties;
     tabClassName?: string;
     children: React.ReactNode;
 };
@@ -27,7 +28,7 @@ export type SgPageControlProps = {
     }) => void;
     hiddenPageIds?: string[];
     keepMounted?: boolean;
-    variant?: "underline" | "pills";
+    pageControlStyle?: "underline" | "pills";
     size?: "sm" | "md" | "lg";
     fullWidthTabs?: boolean;
     keyboardNavigation?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"SgPageControl.d.ts","sourceRoot":"","sources":["../../src/layout/SgPageControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACrD,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACtD,IAAI,CAAC;IAEV,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAiQhE;yBAjQe,aAAa;;;AAqQ7B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAExE;yBAFe,iBAAiB"}
+{"version":3,"file":"SgPageControl.d.ts","sourceRoot":"","sources":["../../src/layout/SgPageControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACrD,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACtD,IAAI,CAAC;IAEV,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACzC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAmQhE;yBAnQe,aAAa;;;AAuQ7B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAExE;yBAFe,iBAAiB"}

package/dist/layout/SgPageControl.js

@@ -22,7 +22,7 @@ function clampIndex(index, length) {
     return Math.max(0, Math.min(length - 1, Math.floor(index)));
 }
 export function SgPageControl(props) {
-    const { children, activePageId, activeIndex, defaultActivePageId, defaultActiveIndex = 0, onActivePageIdChange, onActiveIndexChange, hiddenPageIds, keepMounted = false, variant = "underline", size = "md", fullWidthTabs = false, keyboardNavigation = true, ariaLabel = "Page control", emptyMessage = "No visible pages.", className, tabListClassName, tabClassName, panelClassName, style } = props;
+    const { children, activePageId, activeIndex, defaultActivePageId, defaultActiveIndex = 0, onActivePageIdChange, onActiveIndexChange, hiddenPageIds, keepMounted = false, pageControlStyle = "underline", size = "md", fullWidthTabs = false, keyboardNavigation = true, ariaLabel = "Page control", emptyMessage = "No visible pages.", className, tabListClassName, tabClassName, panelClassName, style } = props;
     const records = React.useMemo(() => resolveRecords(children, hiddenPageIds), [children, hiddenPageIds]);
     const visiblePages = React.useMemo(() => records.filter((record) => !record.hidden), [records]);
     const isControlled = activePageId !== undefined || activeIndex !== undefined;
@@ -85,7 +85,7 @@ export function SgPageControl(props) {
                 icon: "size-4.5",
                 panel: "p-4"
             };
-    const tabStyle = variant === "pills"
+    const tabStyle = pageControlStyle === "pills"
         ? {
             base: cn("rounded-full border border-transparent text-muted-foreground", "hover:bg-muted/70 hover:text-foreground"),
             active: "bg-primary text-primary-foreground border-primary shadow-sm",
@@ -142,8 +142,8 @@ export function SgPageControl(props) {
                     const isActive = record.id === resolvedActiveId;
                     const tabId = `${rootId}-tab-${record.id}`;
                     const panelId = `${rootId}-panel-${record.id}`;
-                    return (_jsx("div", { id: panelId, role: "tabpanel", "aria-labelledby": tabId, hidden: !isActive, className: cn(sizeClasses.panel, !isActive ? "hidden" : "", record.props.className), children: record.props.children }, record.id));
-                })) : (_jsx("div", { id: `${rootId}-panel-${activePage?.id ?? "empty"}`, role: "tabpanel", "aria-labelledby": `${rootId}-tab-${activePage?.id ?? "empty"}`, className: cn(sizeClasses.panel, activePage?.props.className), children: activePage?.props.children })) })] }));
+                    return (_jsx("div", { id: panelId, role: "tabpanel", "aria-labelledby": tabId, hidden: !isActive, style: record.props.style, className: cn(sizeClasses.panel, !isActive ? "hidden" : "", record.props.className), children: record.props.children }, record.id));
+                })) : (_jsx("div", { id: `${rootId}-panel-${activePage?.id ?? "empty"}`, role: "tabpanel", "aria-labelledby": `${rootId}-tab-${activePage?.id ?? "empty"}`, style: activePage?.props.style, className: cn(sizeClasses.panel, activePage?.props.className), children: activePage?.props.children })) })] }));
 }
 SgPageControl.displayName = "SgPageControl";
 export function SgPageControlPage(props) {

package/dist/layout/SgToolBar.d.ts

@@ -38,6 +38,8 @@ export type SgToolbarIconButtonProps = {
     severity?: SgToolBarSeverity;
     disabled?: boolean;
     onClick?: () => void | Promise<void>;
+    className?: string;
+    style?: React.CSSProperties;
 };
 export declare function SgToolBar(props: Readonly<SgToolBarProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SgToolBar {

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

@@ -1 +1 @@
-{"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAwIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA8iBxD;yBA9iBe,SAAS;;;AAgjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAmIpE;yBApIe,mBAAmB"}
+{"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAwIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA8iBxD;yBA9iBe,SAAS;;;AAgjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAiJpE;yBAlJe,mBAAmB"}

package/dist/layout/SgToolBar.js

@@ -515,7 +515,7 @@ export function SgToolBar(props) {
     return toolbarForRender;
 }
 export function SgToolbarIconButton(props) {
-    const { icon, label, showLabel = true, hint, loading = false, severity = "plain", disabled, onClick, hideLabel } = props;
+    const { icon, label, showLabel = true, hint, loading = false, severity = "plain", disabled, onClick, hideLabel, className, style } = props;
     const toolbarOrientation = React.useContext(SgToolbarOrientationContext);
     const isHorizontalToolbar = toolbarOrientation === "horizontal";
     const c = BTN_COLORS[severity];
@@ -585,13 +585,14 @@ export function SgToolbarIconButton(props) {
     return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: buttonRef, type: "button", disabled: disabled || isLoading, onClick: handleClick, "aria-busy": isLoading || undefined, onMouseEnter: showHintTooltip ? () => {
                     updateHintPosition();
                     setIsHintHovered(true);
-                } : undefined, onMouseLeave: showHintTooltip ? () => setIsHintHovered(false) : undefined, "aria-label": hint ?? label ?? text ?? undefined, className: cn("group", "relative inline-flex items-center justify-center rounded-lg", "transition-[transform,filter] duration-150", "hover:brightness-95 active:brightness-90", "focus-visible:outline-none focus-visible:ring-4", "disabled:opacity-50 disabled:cursor-not-allowed", hasVisibleLabel ? "gap-2 px-2 pr-3" : ""), style: {
+                } : undefined, onMouseLeave: showHintTooltip ? () => setIsHintHovered(false) : undefined, "aria-label": hint ?? label ?? text ?? undefined, className: cn("group", "relative inline-flex items-center justify-center rounded-lg", "transition-[transform,filter] duration-150", "hover:brightness-95 active:brightness-90", "focus-visible:outline-none focus-visible:ring-4", "disabled:opacity-50 disabled:cursor-not-allowed", hasVisibleLabel ? "gap-2 px-2 pr-3" : "", className), style: {
                     width: hasVisibleLabel ? undefined : 40,
                     minWidth: 40,
                     height: 40,
                     backgroundColor: c.bg,
                     color: c.fg,
-                    ["--tw-ring-color"]: c.ring
+                    ["--tw-ring-color"]: c.ring,
+                    ...style
                 }, children: [isLoading ? (_jsx("span", { className: "inline-flex size-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent" })) : icon && typeof icon !== "string" ? (_jsx("span", { className: "inline-flex shrink-0", children: icon })) : (_jsx("span", { className: "shrink-0 text-[10px] font-semibold", children: text?.slice(0, 2) })), hasVisibleLabel ? (_jsx("span", { className: "text-xs font-medium leading-none", children: label })) : null] }), hintNode] }));
 }
 function CollapseIcon(props) {

package/dist/layout/SgTreeView.d.ts

@@ -49,6 +49,7 @@ export type SgTreeConfirmBar = false | {
 export type SgTreeViewProps = {
     nodes: SgTreeNode[];
     className?: string;
+    style?: React.CSSProperties;
     size?: SgSize;
     density?: SgDensity;
     tone?: SgTone;

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

@@ -1 +1 @@
-{"version":3,"file":"SgTreeView.d.ts","sourceRoot":"","sources":["../../src/layout/SgTreeView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgTreeView.d.ts","sourceRoot":"","sources":["../../src/layout/SgTreeView.tsx"],"names":[],"mappings":"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"}

package/dist/layout/SgTreeView.js

@@ -190,7 +190,7 @@ function toneClasses(tone) {
     };
 }
 export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
-    const { nodes, className, size = "md", density = "normal", tone = "default", iconTone = "default", checkable = false, checkMode = "live", confirmSelection = "leafOnly", searchable = false, searchPlaceholder = "Search...", expandMatchesOnSearch = true, branchLabelBehavior = "toggle", emptyText = "No items.", maxHeightClassName = "max-h-[60vh]" } = props;
+    const { nodes, className, style, size = "md", density = "normal", tone = "default", iconTone = "default", checkable = false, checkMode = "live", confirmSelection = "leafOnly", searchable = false, searchPlaceholder = "Search...", expandMatchesOnSearch = true, branchLabelBehavior = "toggle", emptyText = "No items.", maxHeightClassName = "max-h-[60vh]" } = props;
     const SZ = sizeMap[size];
     const DY = densityMap[density];
     const T = toneClasses(tone);
@@ -333,6 +333,6 @@ export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
                             }, disabled: isDisabled, children: node.label })] }), hasChildren && isOpen && _jsx("div", { children: node.children.map((c) => renderNode(c, depth + 1)) })] }, node.id));
     };
     const hasAny = filtered.length > 0;
-    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [searchable && (_jsx(SgInputText, { id: searchId, labelText: searchPlaceholder, placeholder: searchPlaceholder, prefixIcon: _jsx(Search, { size: 16 }), clearButton: true, filled: true, inputProps: { value: search }, onChange: (value) => setSearch(value) })), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: expandAll, leftIcon: _jsx(ChevronDown, { className: "size-4" }), children: "Expand all" }), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: collapseAll, leftIcon: _jsx(ChevronUp, { className: "size-4" }), children: "Collapse all" }), checkable && (_jsx(SgButton, { severity: "danger", appearance: "outline", size: "sm", shape: "rounded", onClick: clearChecked, title: "Clear selection", children: "Clear" }))] }), _jsxs("div", { className: cn("rounded-sg border border-sg-border", T.panelBg, "text-sg-text"), children: [_jsx("div", { className: cn("overflow-auto", maxHeightClassName), children: _jsx("div", { className: "p-2", children: !hasAny ? (_jsx("div", { className: cn("p-6 text-center", SZ.text, T.subtle), children: emptyText })) : (filtered.map((n) => renderNode(n, 0))) }) }), confirmEnabled && confirmCfg && (_jsx("div", { className: cn("border-t border-sg-border px-3 py-2", (confirmCfg.sticky ?? true) && "sticky bottom-0 bg-sg-surface/95 bg-background/95 backdrop-blur"), children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn("text-xs", T.subtle), children: confirmCfg.hint ?? (_jsxs(_Fragment, { children: ["Selected: ", _jsx("span", { className: "font-medium text-sg-text", children: confirmSelectedIds.length }), confirmSelection === "leafOnly" ? " (leafs)" : ""] })) }), _jsxs("div", { className: "flex items-center gap-2", children: [(confirmCfg.showCancel ?? false) && (_jsx("button", { type: "button", onClick: onCancel, className: cn("rounded-md border border-sg-border", T.panelBg, "text-sg-text hover:bg-sg-hover", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", SZ.btn), children: confirmCfg.cancelLabel ?? "Cancel" })), _jsx(SgButton, { severity: "secondary", appearance: "outline", size: "md", shape: "rounded", onClick: clearChecked, disabled: !!confirmDisabled, children: "Clear" }), _jsx(SgButton, { severity: "primary", appearance: "solid", elevation: "sm", size: "md", shape: "rounded", disabled: !!confirmDisabled, onClick: onConfirm, children: confirmCfg.label ?? "Confirm" })] })] }) }))] })] }));
+    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [searchable && (_jsx(SgInputText, { id: searchId, labelText: searchPlaceholder, placeholder: searchPlaceholder, prefixIcon: _jsx(Search, { size: 16 }), clearButton: true, filled: true, inputProps: { value: search }, onChange: (value) => setSearch(value) })), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: expandAll, leftIcon: _jsx(ChevronDown, { className: "size-4" }), children: "Expand all" }), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: collapseAll, leftIcon: _jsx(ChevronUp, { className: "size-4" }), children: "Collapse all" }), checkable && (_jsx(SgButton, { severity: "danger", appearance: "outline", size: "sm", shape: "rounded", onClick: clearChecked, title: "Clear selection", children: "Clear" }))] }), _jsxs("div", { className: cn("rounded-sg border border-sg-border", T.panelBg, "text-sg-text"), children: [_jsx("div", { className: cn("overflow-auto", maxHeightClassName), children: _jsx("div", { className: "p-2", children: !hasAny ? (_jsx("div", { className: cn("p-6 text-center", SZ.text, T.subtle), children: emptyText })) : (filtered.map((n) => renderNode(n, 0))) }) }), confirmEnabled && confirmCfg && (_jsx("div", { className: cn("border-t border-sg-border px-3 py-2", (confirmCfg.sticky ?? true) && "sticky bottom-0 bg-sg-surface/95 bg-background/95 backdrop-blur"), children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn("text-xs", T.subtle), children: confirmCfg.hint ?? (_jsxs(_Fragment, { children: ["Selected: ", _jsx("span", { className: "font-medium text-sg-text", children: confirmSelectedIds.length }), confirmSelection === "leafOnly" ? " (leafs)" : ""] })) }), _jsxs("div", { className: "flex items-center gap-2", children: [(confirmCfg.showCancel ?? false) && (_jsx("button", { type: "button", onClick: onCancel, className: cn("rounded-md border border-sg-border", T.panelBg, "text-sg-text hover:bg-sg-hover", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", SZ.btn), children: confirmCfg.cancelLabel ?? "Cancel" })), _jsx(SgButton, { severity: "secondary", appearance: "outline", size: "md", shape: "rounded", onClick: clearChecked, disabled: !!confirmDisabled, children: "Clear" }), _jsx(SgButton, { severity: "primary", appearance: "solid", elevation: "sm", size: "md", shape: "rounded", disabled: !!confirmDisabled, onClick: onConfirm, children: confirmCfg.label ?? "Confirm" })] })] }) }))] })] }));
 });
 SgTreeView.displayName = "SgTreeView";

package/dist/others/SgPlayground.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export type SgPlaygroundProps = {
     code: string;
     interactive?: boolean;
@@ -12,6 +13,7 @@ export type SgPlaygroundProps = {
     resizeAxis?: "vertical" | "horizontal" | "both";
     previewPadding?: number | string;
     className?: string;
+    style?: React.CSSProperties;
     dependencies?: Record<string, string>;
     defaultImports?: string;
     previewWrapperClassName?: string;

package/dist/others/SgPlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,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,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,2CAqlBtE"}
+{"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"}

package/dist/others/SgPlayground.js

@@ -1032,7 +1032,7 @@ function shouldSuppressCoreJsProviderWarning(args) {
     return typeof firstArg === "string" && firstArg.includes(COREJS_PROVIDER_WARNING_PREFIX);
 }
 export default function SgPlayground(props) {
-    const { code, interactive = false, codeContract = "renderBody", preset = "auto", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, 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;
+    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;
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
     const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
     const [isExpanded, setIsExpanded] = React.useState(false);
@@ -1427,12 +1427,12 @@ export default function SgPlayground(props) {
         visibleFiles: ["/App.tsx"],
         externalResources: includeSeedgridDependency ? SANDPACK_EXTERNAL_RESOURCES : []
     }), [includeSeedgridDependency, resolvedBundlerTimeoutMs, resolvedBundlerURL]);
-    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), 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"
+    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"
                                 ? "border-primary text-foreground"
                                 : "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"
                                 ? "border-primary text-foreground"
-                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px]", "grid-cols-1 md:grid-cols-2", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: cn("min-w-0 md:border-r border-border", activePanel !== "code" ? "hidden md:block" : ""), children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: cn("min-w-0", activePanel !== "preview" ? "hidden md:block" : ""), children: _jsx(SandpackPreview, { className: "sg-playground-preview", style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
+                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px]", "grid-cols-1 md:grid-cols-2", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: cn("min-w-0 md:border-r border-border", activePanel !== "code" ? "hidden md:block" : ""), children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: cn("min-w-0", activePanel !== "preview" ? "hidden md:block" : ""), children: _jsx(SandpackPreview, { className: "sg-playground-preview", style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), style: withCard ? undefined : style, children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
     if (!withCard)
         return content;
-    return (_jsx(SgCard, { id: cardId, title: title ?? "Codigo", description: description, collapsible: collapsible, defaultOpen: defaultOpen, className: cn("rounded-lg", className), bodyClassName: "p-0", children: content }));
+    return (_jsx(SgCard, { id: cardId, title: title ?? "Codigo", description: description, collapsible: collapsible, defaultOpen: defaultOpen, className: cn("rounded-lg", className), style: style, bodyClassName: "p-0", children: content }));
 }

package/dist/overlay/SgDialog.d.ts

@@ -18,6 +18,7 @@ export type SgDialogProps = {
     transitionMs?: number;
     autoCloseMs?: number;
     className?: string;
+    style?: React.CSSProperties;
     overlayClassName?: string;
     contentClassName?: string;
     headerClassName?: string;

package/dist/overlay/SgDialog.d.ts.map

@@ -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,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;AAuDF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAqPtD;yBArPe,QAAQ"}
+{"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,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;AAuDF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAuPtD;yBAvPe,QAAQ"}