@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/layout/SgPageControl.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+export type SgPageControlPageProps = {
+    id?: string;
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+    hidden?: boolean;
+    disabled?: boolean;
+    keepMounted?: boolean;
+    className?: string;
+    tabClassName?: string;
+    children: React.ReactNode;
+};
+export type SgPageControlProps = {
+    children: React.ReactNode;
+    activePageId?: string;
+    activeIndex?: number;
+    defaultActivePageId?: string;
+    defaultActiveIndex?: number;
+    onActivePageIdChange?: (pageId: string, context: {
+        index: number;
+        page: SgPageControlPageProps;
+    }) => void;
+    onActiveIndexChange?: (index: number, context: {
+        pageId: string;
+        page: SgPageControlPageProps;
+    }) => void;
+    hiddenPageIds?: string[];
+    keepMounted?: boolean;
+    variant?: "underline" | "pills";
+    size?: "sm" | "md" | "lg";
+    fullWidthTabs?: boolean;
+    keyboardNavigation?: boolean;
+    ariaLabel?: string;
+    emptyMessage?: React.ReactNode;
+    className?: string;
+    tabListClassName?: string;
+    tabClassName?: string;
+    panelClassName?: string;
+    style?: React.CSSProperties;
+};
+export declare function SgPageControl(props: Readonly<SgPageControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgPageControl {
+    var displayName: string;
+}
+export declare function SgPageControlPage(props: Readonly<SgPageControlPageProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgPageControlPage {
+    var displayName: string;
+}
+//# sourceMappingURL=SgPageControl.d.ts.map

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

@@ -0,0 +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,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,2CAgQhE;yBAhQe,aAAa;;;AAoQ7B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAExE;yBAFe,iBAAiB"}

package/dist/layout/SgPageControl.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function resolveRecords(children, hiddenPageIds) {
+    const hiddenSet = new Set(hiddenPageIds ?? []);
+    const pageElements = React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        (child.type === SgPageControlPage || child.type?.displayName === "SgPageControlPage"));
+    return pageElements.map((element, index) => {
+        const id = element.props.id ?? `sg-page-control-page-${index + 1}`;
+        const hidden = !!element.props.hidden || hiddenSet.has(id);
+        return { id, props: element.props, element, hidden };
+    });
+}
+function clampIndex(index, length) {
+    if (length <= 0)
+        return 0;
+    if (!Number.isFinite(index))
+        return 0;
+    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 records = React.useMemo(() => resolveRecords(children, hiddenPageIds), [children, hiddenPageIds]);
+    const visiblePages = React.useMemo(() => records.filter((record) => !record.hidden), [records]);
+    const isControlled = activePageId !== undefined || activeIndex !== undefined;
+    const defaultIdFromProps = defaultActivePageId !== undefined
+        ? defaultActivePageId
+        : visiblePages[clampIndex(defaultActiveIndex, visiblePages.length)]?.id;
+    const [internalActiveId, setInternalActiveId] = React.useState(defaultIdFromProps ?? visiblePages[0]?.id);
+    const controlledId = activePageId !== undefined
+        ? activePageId
+        : activeIndex !== undefined
+            ? visiblePages[clampIndex(activeIndex, visiblePages.length)]?.id
+            : undefined;
+    const tentativeActiveId = controlledId ?? internalActiveId;
+    const resolvedActiveId = tentativeActiveId && visiblePages.some((record) => record.id === tentativeActiveId)
+        ? tentativeActiveId
+        : visiblePages[0]?.id;
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        if (resolvedActiveId === internalActiveId)
+            return;
+        setInternalActiveId(resolvedActiveId);
+    }, [isControlled, internalActiveId, resolvedActiveId]);
+    const activeIndexResolved = React.useMemo(() => visiblePages.findIndex((record) => record.id === resolvedActiveId), [resolvedActiveId, visiblePages]);
+    const activePage = activeIndexResolved >= 0 ? visiblePages[activeIndexResolved] : undefined;
+    const fireOnChange = React.useCallback((nextId) => {
+        const nextIndex = visiblePages.findIndex((record) => record.id === nextId);
+        if (nextIndex < 0)
+            return;
+        const nextPage = visiblePages[nextIndex]?.props;
+        if (!nextPage)
+            return;
+        onActivePageIdChange?.(nextId, { index: nextIndex, page: nextPage });
+        onActiveIndexChange?.(nextIndex, { pageId: nextId, page: nextPage });
+    }, [onActiveIndexChange, onActivePageIdChange, visiblePages]);
+    const selectPage = React.useCallback((nextId) => {
+        const next = visiblePages.find((record) => record.id === nextId);
+        if (!next || next.props.disabled)
+            return;
+        if (!isControlled)
+            setInternalActiveId(nextId);
+        fireOnChange(nextId);
+    }, [fireOnChange, isControlled, visiblePages]);
+    const tabsRef = React.useRef([]);
+    const rootId = React.useId();
+    const sizeClasses = size === "sm"
+        ? {
+            tab: "h-8 px-3 text-xs gap-1.5",
+            icon: "size-4",
+            panel: "p-3"
+        }
+        : size === "lg"
+            ? {
+                tab: "h-11 px-4 text-sm gap-2.5",
+                icon: "size-5",
+                panel: "p-5"
+            }
+            : {
+                tab: "h-9 px-3.5 text-sm gap-2",
+                icon: "size-4.5",
+                panel: "p-4"
+            };
+    const tabStyle = variant === "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",
+            inactive: ""
+        }
+        : {
+            base: cn("rounded-t-md border-b-2 border-transparent text-muted-foreground", "hover:text-foreground hover:bg-muted/40"),
+            active: "border-primary text-primary bg-muted/30",
+            inactive: ""
+        };
+    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [_jsx("div", { role: "tablist", "aria-label": ariaLabel, className: cn("flex min-h-0 items-end gap-1 overflow-x-auto border-b border-border pb-0.5", fullWidthTabs ? "grid auto-cols-fr grid-flow-col" : "", tabListClassName), onKeyDown: (event) => {
+                    if (!keyboardNavigation || visiblePages.length === 0)
+                        return;
+                    const focused = document.activeElement;
+                    const focusedIndex = tabsRef.current.findIndex((tab) => tab === focused);
+                    if (focusedIndex < 0)
+                        return;
+                    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+                        event.preventDefault();
+                        const nextIndex = (focusedIndex + 1) % visiblePages.length;
+                        tabsRef.current[nextIndex]?.focus();
+                        return;
+                    }
+                    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                        event.preventDefault();
+                        const nextIndex = (focusedIndex - 1 + visiblePages.length) % visiblePages.length;
+                        tabsRef.current[nextIndex]?.focus();
+                        return;
+                    }
+                    if (event.key === "Home") {
+                        event.preventDefault();
+                        tabsRef.current[0]?.focus();
+                        return;
+                    }
+                    if (event.key === "End") {
+                        event.preventDefault();
+                        tabsRef.current[visiblePages.length - 1]?.focus();
+                        return;
+                    }
+                    if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        const record = visiblePages[focusedIndex];
+                        if (record)
+                            selectPage(record.id);
+                    }
+                }, children: visiblePages.map((record, index) => {
+                    const isActive = record.id === resolvedActiveId;
+                    const tabId = `${rootId}-tab-${record.id}`;
+                    const panelId = `${rootId}-panel-${record.id}`;
+                    return (_jsxs("button", { ref: (el) => {
+                            tabsRef.current[index] = el;
+                        }, type: "button", id: tabId, role: "tab", "aria-controls": panelId, "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: record.props.disabled, onClick: () => selectPage(record.id), className: cn("inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors", sizeClasses.tab, tabStyle.base, isActive ? tabStyle.active : tabStyle.inactive, fullWidthTabs ? "w-full" : "", record.props.disabled ? "cursor-not-allowed opacity-45" : "", tabClassName, record.props.tabClassName), children: [record.props.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: record.props.icon })) : null, _jsx("span", { className: "truncate", children: record.props.title })] }, record.id));
+                }) }), _jsx("div", { className: cn("rounded-b-md border border-t-0 border-border bg-background", panelClassName), children: visiblePages.length === 0 ? (_jsx("div", { className: cn(sizeClasses.panel, "text-sm text-muted-foreground"), children: emptyMessage })) : keepMounted ? (visiblePages.map((record) => {
+                    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 })) })] }));
+}
+SgPageControl.displayName = "SgPageControl";
+export function SgPageControlPage(props) {
+    return _jsx(_Fragment, { children: props.children });
+}
+SgPageControlPage.displayName = "SgPageControlPage";

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

@@ -1 +1 @@
-{"version":3,"file":"SgPanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC;AAC7D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5F,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AASF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAgCpD;yBAhCe,OAAO"}
+{"version":3,"file":"SgPanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC;AAC7D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5F,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AASF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAuCpD;yBAvCe,OAAO"}

package/dist/layout/SgPanel.js

@@ -8,6 +8,11 @@ function toCssSpace(value) {
         return undefined;
     return typeof value === "number" ? `${value}px` : value;
 }
+function toCssPercent(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}%` : value;
+}
 function getScrollClass(scrollable) {
     if (!scrollable)
         return "";
@@ -18,14 +23,18 @@ function getScrollClass(scrollable) {
     return "overflow-x-auto overflow-y-hidden";
 }
 export function SgPanel(props) {
-    const { borderStyle = "solid", padding, scrollable = false, scrollbarGutter = false, className, style, children, ...rest } = props;
+    const { width, height, borderStyle = "solid", padding, scrollable = false, scrollbarGutter = false, className, style, children, ...rest } = props;
     const borderClass = borderStyle === "none"
         ? "border border-transparent"
         : borderStyle === "dashed"
             ? "border border-dashed border-border"
             : "border border-solid border-border";
+    const widthCss = toCssPercent(width);
+    const heightCss = toCssPercent(height);
     return (_jsx("div", { className: cn("min-h-0 min-w-0 bg-background", borderClass, getScrollClass(scrollable), className), style: {
             ...style,
+            ...(widthCss !== undefined ? { width: widthCss } : null),
+            ...(heightCss !== undefined ? { height: heightCss } : null),
             padding: toCssSpace(padding),
             ...(scrollbarGutter ? { scrollbarGutter: "stable" } : null)
         }, ...rest, children: children }));

package/dist/layout/SgScreen.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 export type SgScreenProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     fullscreen?: boolean;
+    width?: number | string;
+    height?: number | string;
     padding?: number | string;
     children?: React.ReactNode;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SgScreen.d.ts","sourceRoot":"","sources":["../../src/layout/SgScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA0BtD;yBA1Be,QAAQ"}
+{"version":3,"file":"SgScreen.d.ts","sourceRoot":"","sources":["../../src/layout/SgScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA8BtD;yBA9Be,QAAQ"}

package/dist/layout/SgScreen.js

@@ -9,9 +9,11 @@ function toCssSpace(value) {
     return typeof value === "number" ? `${value}px` : value;
 }
 export function SgScreen(props) {
-    const { fullscreen = true, padding, className, style, children, ...rest } = props;
-    return (_jsx("div", { className: cn("min-h-0 min-w-0", fullscreen ? "h-screen w-screen" : "h-full w-full", className), style: {
+    const { fullscreen = true, width, height, padding, className, style, children, ...rest } = props;
+    return (_jsx("div", { className: cn("relative min-h-0 min-w-0", fullscreen ? "h-screen w-screen" : "h-full w-full", className), style: {
             ...style,
+            ...(width !== undefined ? { width: toCssSpace(width) } : null),
+            ...(height !== undefined ? { height: toCssSpace(height) } : null),
             padding: toCssSpace(padding)
         }, ...rest, children: children }));
 }

package/dist/layout/SgToolBar.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 export type SgToolBarOrientation = "horizontal" | "vertical";
+export type SgToolBarOrientationDirection = "vertical-up" | "vertical-down" | "horizontal-left" | "horizontal-right";
 export type SgToolBarSeverity = "primary" | "secondary" | "success" | "info" | "warning" | "help" | "danger" | "plain";
 export type SgToolBarSize = {
     w?: number;
@@ -8,7 +9,10 @@ export type SgToolBarSize = {
 export type SgToolBarProps = {
     id: string;
     title?: React.ReactNode;
-    orientation?: SgToolBarOrientation;
+    orientationDirection?: SgToolBarOrientationDirection;
+    buttonsPerDirection?: number;
+    bgColorTitle?: string;
+    bgColor?: string;
     size?: SgToolBarSize;
     className?: string;
     style?: React.CSSProperties;
@@ -22,16 +26,18 @@ export type SgToolBarProps = {
     collapsible?: boolean;
     collapsed?: boolean;
     defaultCollapsed?: boolean;
-    collapseDirection?: "left" | "right" | "top" | "bottom";
     onCollapsedChange?: (collapsed: boolean) => void;
     children?: React.ReactNode;
 };
 export type SgToolbarIconButtonProps = {
     icon?: React.ReactNode | string;
+    label?: string;
+    showLabel?: boolean;
     hint?: string;
+    loading?: boolean;
     severity?: SgToolBarSeverity;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: () => void | Promise<void>;
 };
 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;AAI/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,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,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,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,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACxD,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAsEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAsLxD;yBAtLe,SAAS;;;AAwLzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAwCpE;yBAzCe,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;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,2CA8HpE;yBA/He,mBAAmB"}