@seedgrid/fe-components 0.2.4

package/dist/layout/SgCard.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+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 isInteractive = (clickable || typeof onClick === "function") && !collapsible;
+    const trailingNode = trailing ?? trailer;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const isControlled = typeof controlledOpen === "boolean";
+    const isOpen = collapsible ? (isControlled ? controlledOpen : uncontrolledOpen) : true;
+    const setOpen = React.useCallback((next) => {
+        if (!collapsible)
+            return;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [collapsible, isControlled, onOpenChange]);
+    const sizeClasses = size === "sm"
+        ? {
+            root: "rounded-xl",
+            header: "px-3 py-2",
+            body: "px-3 py-3",
+            footer: "px-3 py-2",
+            title: "text-sm",
+            desc: "text-xs"
+        }
+        : size === "lg"
+            ? {
+                root: "rounded-2xl",
+                header: "px-6 py-4",
+                body: "px-6 py-6",
+                footer: "px-6 py-4",
+                title: "text-base",
+                desc: "text-sm"
+            }
+            : {
+                root: "rounded-2xl",
+                header: "px-4 py-3",
+                body: "px-4 py-4",
+                footer: "px-4 py-3",
+                title: "text-sm",
+                desc: "text-xs"
+            };
+    const variantClasses = variant === "flat"
+        ? "bg-background border border-border/60 shadow-none"
+        : variant === "outlined"
+            ? "bg-background border border-border shadow-none"
+            : variant === "elevated"
+                ? "bg-background border border-border shadow-md"
+                : "bg-background border border-border shadow-sm";
+    const interactiveClasses = isInteractive
+        ? cn("transition-[box-shadow,transform] duration-150", "hover:shadow-md", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[hsl(var(--primary)/0.35)]", disabled ? "" : "cursor-pointer", disabled ? "" : "active:translate-y-[0.5px]")
+        : "";
+    const disabledClasses = disabled ? "opacity-60 pointer-events-none select-none" : "";
+    const rootClasses = cn("w-full", sizeClasses.root, variantClasses, interactiveClasses, disabledClasses, className);
+    const toggle = React.useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
+    const onHeaderClick = () => {
+        if (!collapsible)
+            return;
+        if (!toggleOnHeaderClick)
+            return;
+        if (disabled)
+            return;
+        toggle();
+    };
+    const ToggleButton = collapsible ? (_jsx("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            toggle();
+        }, className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md", "text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.35)]"), "aria-label": isOpen ? "Recolher" : "Expandir", "aria-expanded": isOpen, disabled: disabled, children: collapseIcon ?? _jsx(DefaultCaret, { open: isOpen }) })) : null;
+    const headerHasContent = Boolean(header) ||
+        Boolean(leading) ||
+        Boolean(title) ||
+        Boolean(description) ||
+        Boolean(trailingNode) ||
+        Boolean(actions) ||
+        collapsible;
+    const renderDefaultHeader = headerHasContent ? (_jsxs("div", { className: cn("flex items-start gap-3", "border-b border-border/60", sizeClasses.header, headerClassName, collapsible && toggleOnHeaderClick ? "cursor-pointer" : ""), onClick: onHeaderClick, role: collapsible && toggleOnHeaderClick ? "button" : undefined, tabIndex: collapsible && toggleOnHeaderClick && !disabled ? 0 : undefined, onKeyDown: (e) => {
+            if (!collapsible || !toggleOnHeaderClick || disabled)
+                return;
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggle();
+            }
+        }, "aria-expanded": collapsible ? isOpen : undefined, children: [collapseToggleAlign === "left" ? ToggleButton : null, leading ? _jsx("div", { className: "shrink-0 pt-0.5", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? (_jsx("div", { className: cn("font-medium text-foreground", sizeClasses.title), children: title })) : null, description ? (_jsx("div", { className: cn("mt-0.5 text-muted-foreground", sizeClasses.desc), children: description })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [trailingNode ? _jsx("div", { className: "shrink-0", children: trailingNode }) : null, actions ? _jsx("div", { className: "shrink-0", children: actions }) : null, collapseToggleAlign === "right" ? ToggleButton : null] })] })) : null;
+    const headerNode = header ? (_jsx("div", { className: cn("border-b border-border/60", sizeClasses.header, headerClassName, collapsible && toggleOnHeaderClick ? "cursor-pointer" : ""), onClick: onHeaderClick, role: collapsible && toggleOnHeaderClick ? "button" : undefined, tabIndex: collapsible && toggleOnHeaderClick && !disabled ? 0 : undefined, onKeyDown: (e) => {
+            if (!collapsible || !toggleOnHeaderClick || disabled)
+                return;
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggle();
+            }
+        }, "aria-expanded": collapsible ? isOpen : undefined, children: header })) : (renderDefaultHeader);
+    const collapsibleBodyWrapper = collapsible ? (_jsx("div", { className: cn("grid transition-all duration-200 ease-out motion-reduce:transition-none", isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"), children: _jsxs("div", { className: "overflow-hidden", children: [_jsx("div", { className: cn(sizeClasses.body, bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("border-t border-border/60", sizeClasses.footer, footerClassName), children: footer })) : null] }) })) : null;
+    const bodyNode = !collapsible ? _jsx("div", { className: cn(sizeClasses.body, bodyClassName), children: children }) : null;
+    const footerNode = !collapsible && footer ? (_jsx("div", { className: cn("border-t border-border/60", sizeClasses.footer, footerClassName), children: footer })) : null;
+    const Component = isInteractive ? "button" : "section";
+    const buttonLikeProps = isInteractive ? { type: "button", onClick: disabled ? undefined : onClick, disabled } : {};
+    return (_jsxs(Component, { className: rootClasses, ...buttonLikeProps, ...rest, children: [headerNode, collapsible ? collapsibleBodyWrapper : null, !collapsible ? bodyNode : null, !collapsible ? footerNode : null] }));
+}
+SgCard.displayName = "SgCard";

package/dist/layout/SgDockLayout.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type SgDockZoneId = "top" | "bottom" | "left" | "right" | "free";
+export type SgDockToolbarState = {
+    id: string;
+    zone: SgDockZoneId;
+    collapsed?: boolean;
+    orientation?: "horizontal" | "vertical";
+    order?: number;
+};
+export type SgDockLayoutState = {
+    version: 1;
+    toolbars: Record<string, SgDockToolbarState>;
+};
+export type SgDockLayoutProps = {
+    id: string;
+    className?: string;
+    children: React.ReactNode;
+    defaultState?: SgDockLayoutState;
+};
+type DockContextValue = {
+    layoutId: string;
+    getZoneElement: (zone: SgDockZoneId) => HTMLDivElement | null;
+    registerZone: (zone: SgDockZoneId, el: HTMLDivElement | null) => void;
+    getZoneAtPoint: (x: number, y: number) => SgDockZoneId | null;
+    getToolbarZone: (id: string) => SgDockZoneId | null;
+    moveToolbar: (id: string, zone: SgDockZoneId) => void;
+    ensureToolbar: (id: string, state: Partial<SgDockToolbarState>) => void;
+    getToolbarCollapsed: (id: string) => boolean | undefined;
+    setToolbarCollapsed: (id: string, next: boolean) => void;
+};
+export declare function useSgDockLayout(): DockContextValue | null;
+export declare function SgDockLayout(props: Readonly<SgDockLayoutProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgDockLayout {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=SgDockLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"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,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC,CAAC;AAIF,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,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IACpD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,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,2CAqH9D;yBArHe,YAAY"}

package/dist/layout/SgDockLayout.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useSgPersistentState } from "../environment/SgEnvironmentProvider";
+const DockContext = React.createContext(null);
+export function useSgDockLayout() {
+    return React.useContext(DockContext);
+}
+const EMPTY_STATE = { version: 1, toolbars: {} };
+export function SgDockLayout(props) {
+    const { id, className, children, defaultState } = props;
+    const { value: persisted, setValue } = useSgPersistentState({
+        baseKey: `dock-layout:${id}`,
+        defaultValue: defaultState ?? EMPTY_STATE
+    });
+    const zonesRef = React.useRef(new Map());
+    const registerZone = React.useCallback((zone, el) => {
+        if (!el) {
+            zonesRef.current.delete(zone);
+            return;
+        }
+        zonesRef.current.set(zone, el);
+    }, []);
+    const getZoneElement = React.useCallback((zone) => {
+        return zonesRef.current.get(zone) ?? null;
+    }, []);
+    const getZoneAtPoint = React.useCallback((x, y) => {
+        for (const [zone, el] of zonesRef.current.entries()) {
+            const rect = el.getBoundingClientRect();
+            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                return zone;
+            }
+        }
+        return null;
+    }, []);
+    const getToolbarZone = React.useCallback((toolbarId) => persisted.toolbars[toolbarId]?.zone ?? null, [persisted]);
+    const ensureToolbar = React.useCallback((toolbarId, state) => {
+        setValue((prev) => {
+            if (prev.toolbars[toolbarId])
+                return prev;
+            return {
+                ...prev,
+                toolbars: {
+                    ...prev.toolbars,
+                    [toolbarId]: {
+                        id: toolbarId,
+                        zone: state.zone ?? "free",
+                        collapsed: state.collapsed ?? false,
+                        orientation: state.orientation,
+                        order: state.order ?? Object.keys(prev.toolbars).length
+                    }
+                }
+            };
+        });
+    }, [setValue]);
+    const moveToolbar = React.useCallback((toolbarId, zone) => {
+        setValue((prev) => {
+            const current = prev.toolbars[toolbarId];
+            if (!current)
+                return prev;
+            return {
+                ...prev,
+                toolbars: {
+                    ...prev.toolbars,
+                    [toolbarId]: {
+                        ...current,
+                        zone
+                    }
+                }
+            };
+        });
+    }, [setValue]);
+    const getToolbarCollapsed = React.useCallback((toolbarId) => persisted.toolbars[toolbarId]?.collapsed, [persisted]);
+    const setToolbarCollapsed = React.useCallback((toolbarId, next) => {
+        setValue((prev) => {
+            const current = prev.toolbars[toolbarId];
+            if (!current)
+                return prev;
+            return {
+                ...prev,
+                toolbars: {
+                    ...prev.toolbars,
+                    [toolbarId]: { ...current, collapsed: next }
+                }
+            };
+        });
+    }, [setValue]);
+    const ctx = {
+        layoutId: id,
+        getZoneElement,
+        registerZone,
+        getZoneAtPoint,
+        getToolbarZone,
+        moveToolbar,
+        ensureToolbar,
+        getToolbarCollapsed,
+        setToolbarCollapsed
+    };
+    return (_jsx(DockContext.Provider, { value: ctx, children: _jsx("div", { className: className, children: children }) }));
+}
+SgDockLayout.displayName = "SgDockLayout";

package/dist/layout/SgDockZone.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type SgDockZoneId } from "./SgDockLayout";
+export type SgDockZoneProps = {
+    zone: SgDockZoneId;
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare function SgDockZone(props: Readonly<SgDockZoneProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgDockZone {
+    var displayName: string;
+}
+//# sourceMappingURL=SgDockZone.d.ts.map

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

@@ -0,0 +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;AAEpE,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;AAMF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAwB1D;yBAxBe,UAAU"}

package/dist/layout/SgDockZone.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useSgDockLayout } from "./SgDockLayout";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+export function SgDockZone(props) {
+    const { zone, className, children } = props;
+    const dock = useSgDockLayout();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!dock)
+            return;
+        dock.registerZone(zone, ref.current);
+        return () => dock.registerZone(zone, null);
+    }, [dock, zone]);
+    return (_jsx("div", { ref: ref, "data-sg-dock-zone": zone, className: cn("relative flex gap-3 p-3", zone === "top" || zone === "bottom" ? "flex-row items-center" : "flex-col items-center", className), children: children }));
+}
+SgDockZone.displayName = "SgDockZone";

package/dist/layout/SgGrid.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type SgGridColumns = number | Partial<Record<"base" | "sm" | "md" | "lg" | "xl" | "2xl", number>>;
+export type SgGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, "align" | "children"> & {
+    columns?: SgGridColumns;
+    minItemWidth?: number | string;
+    gap?: number | string;
+    padding?: number | string;
+    dense?: boolean;
+    rowHeight?: number | string;
+    justify?: "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly";
+    align?: "start" | "center" | "end" | "stretch";
+    children?: React.ReactNode;
+};
+export declare function SgGrid(props: Readonly<SgGridProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgGrid {
+    var displayName: string;
+}
+//# sourceMappingURL=SgGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgGrid.d.ts","sourceRoot":"","sources":["../../src/layout/SgGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AAExE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC3F,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACnF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAyCF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA4FlD;yBA5Fe,MAAM"}

package/dist/layout/SgGrid.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSpace(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+const BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+};
+function normalizeColumns(columns) {
+    if (!columns)
+        return { base: 1 };
+    if (typeof columns === "number")
+        return { base: columns };
+    return { base: columns.base ?? 1, ...columns };
+}
+function justifyToCss(value) {
+    if (!value)
+        return undefined;
+    const map = {
+        start: "start",
+        center: "center",
+        end: "end",
+        stretch: "stretch",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly"
+    };
+    return map[value];
+}
+function alignToCss(value) {
+    if (!value)
+        return undefined;
+    const map = {
+        start: "start",
+        center: "center",
+        end: "end",
+        stretch: "stretch"
+    };
+    return map[value];
+}
+export function SgGrid(props) {
+    const { columns, minItemWidth, gap = 0, padding, dense = false, rowHeight, justify, align, className, style, children, ...rest } = props;
+    const instanceId = React.useId().replace(/:/g, "");
+    const normalized = normalizeColumns(columns);
+    const dynamicCss = React.useMemo(() => {
+        if (minItemWidth)
+            return "";
+        const rules = [];
+        rules.push(`[data-sg-grid="${instanceId}"]{--sg-grid-cols:${normalized.base};}`);
+        Object.keys(BREAKPOINTS).forEach((bp) => {
+            const next = normalized[bp];
+            if (!next || next < 1)
+                return;
+            rules.push(`@media (min-width:${BREAKPOINTS[bp]}px){[data-sg-grid="${instanceId}"]{--sg-grid-cols:${next};}}`);
+        });
+        return rules.join("\n");
+    }, [instanceId, minItemWidth, normalized]);
+    const templateColumns = minItemWidth
+        ? `repeat(auto-fit, minmax(${toCssSpace(minItemWidth)}, 1fr))`
+        : "repeat(var(--sg-grid-cols), minmax(0, 1fr))";
+    const items = React.Children.toArray(children);
+    return (_jsxs(_Fragment, { children: [dynamicCss ? _jsx("style", { children: dynamicCss }) : null, _jsx("div", { "data-sg-grid": instanceId, className: cn("grid min-h-0 min-w-0", className), style: {
+                    ...style,
+                    gridTemplateColumns: templateColumns,
+                    gap: toCssSpace(gap),
+                    padding: toCssSpace(padding),
+                    gridAutoRows: toCssSpace(rowHeight),
+                    gridAutoFlow: dense ? "dense" : undefined,
+                    justifyContent: justifyToCss(justify),
+                    alignItems: alignToCss(align)
+                }, ...rest, children: items.map((item, index) => {
+                    if (!React.isValidElement(item)) {
+                        return item;
+                    }
+                    const element = item;
+                    const span = element.props?.span;
+                    const rowSpan = element.props?.rowSpan;
+                    const hasSpan = typeof span === "number" && span > 1;
+                    const hasRowSpan = typeof rowSpan === "number" && rowSpan > 1;
+                    if (!hasSpan && !hasRowSpan) {
+                        return React.cloneElement(element, { key: element.key ?? `grid-item-${index}` });
+                    }
+                    const wrapperStyle = {};
+                    if (hasSpan)
+                        wrapperStyle.gridColumn = `span ${span} / span ${span}`;
+                    if (hasRowSpan)
+                        wrapperStyle.gridRow = `span ${rowSpan} / span ${rowSpan}`;
+                    return (_jsx("div", { className: "min-h-0 min-w-0", style: wrapperStyle, children: element }, item.key ?? `grid-wrap-${index}`));
+                }) })] }));
+}
+SgGrid.displayName = "SgGrid";

package/dist/layout/SgGroupBox.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type SgGroupBoxProps = {
+    title: string;
+    height?: number | string;
+    width?: number | string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function SgGroupBox(props: SgGroupBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgGroupBox.d.ts.map

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

@@ -0,0 +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"}

package/dist/layout/SgGroupBox.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function SgGroupBox(props) {
+    const { title, height, width, children, className } = props;
+    return (_jsx("div", { className: className, style: {
+            width: toCssSize(width) ?? "100%",
+            height: toCssSize(height)
+        }, 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/SgMainPanel.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type SgMainPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    gap?: number | string;
+    padding?: number | string;
+    children?: React.ReactNode;
+};
+export declare function SgMainPanel(props: Readonly<SgMainPanelProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgMainPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=SgMainPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgMainPanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgMainPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CA6H5D;yBA7He,WAAW"}

package/dist/layout/SgMainPanel.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSpace(value) {
+    if (value === undefined || value === null)
+        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 cloneWithLayout(node, key, extraStyle, extraClassName) {
+    if (!React.isValidElement(node)) {
+        return (_jsx("div", { style: extraStyle, className: extraClassName, children: node }, key));
+    }
+    const element = node;
+    const mergedStyle = { ...(element.props.style ?? {}), ...extraStyle };
+    return React.cloneElement(element, {
+        key: element.key ?? key,
+        className: cn(element.props.className, extraClassName),
+        style: mergedStyle
+    });
+}
+export function SgMainPanel(props) {
+    const { gap = 0, padding, className, style, children, ...rest } = props;
+    const allItems = React.Children.toArray(children).map((node, index) => {
+        const key = (React.isValidElement(node) ? node.key : null) ?? `dock-${index}`;
+        if (!React.isValidElement(node)) {
+            return { key, node, align: "client" };
+        }
+        return {
+            key,
+            node,
+            align: node.props.align ?? "client",
+            width: node.props.width,
+            height: node.props.height
+        };
+    });
+    const top = allItems.filter((item) => item.align === "top");
+    const bottom = allItems.filter((item) => item.align === "bottom");
+    const left = allItems.filter((item) => item.align === "left");
+    const right = allItems.filter((item) => item.align === "right");
+    const client = allItems.filter((item) => item.align === "client");
+    const dockGapStyle = { gap: toCssSpace(gap) };
+    return (_jsxs("div", { className: cn("flex h-full w-full min-h-0 min-w-0 flex-col", className), style: {
+            ...style,
+            padding: toCssSpace(padding)
+        }, ...rest, children: [top.length > 0 ? (_jsx("div", { className: "flex flex-col min-h-0 min-w-0", style: dockGapStyle, children: top.map((item, index) => cloneWithLayout(item.node, item.key ?? `top-${index}`, {
+                    width: "100%",
+                    height: toCssPercent(item.height)
+                }, "w-full")) })) : null, _jsxs("div", { className: "flex flex-1 min-h-0 min-w-0", style: dockGapStyle, children: [left.length > 0 ? (_jsx("div", { className: "flex min-h-0 min-w-0 flex-col", style: dockGapStyle, children: left.map((item, index) => cloneWithLayout(item.node, item.key ?? `left-${index}`, {
+                            width: toCssPercent(item.width),
+                            height: "100%"
+                        }, "h-full")) })) : null, _jsx("div", { className: "flex flex-1 min-h-0 min-w-0", style: dockGapStyle, children: client.map((item, index) => (_jsx("div", { className: "flex-1 min-h-0 min-w-0", children: cloneWithLayout(item.node, item.key ?? `client-inner-${index}`, {
+                                width: "100%",
+                                height: "100%"
+                            }, "h-full w-full") }, item.key ?? `client-${index}`))) }), right.length > 0 ? (_jsx("div", { className: "flex min-h-0 min-w-0 flex-col", style: dockGapStyle, children: right.map((item, index) => cloneWithLayout(item.node, item.key ?? `right-${index}`, {
+                            width: toCssPercent(item.width),
+                            height: "100%"
+                        }, "h-full")) })) : null] }), bottom.length > 0 ? (_jsx("div", { className: "flex flex-col min-h-0 min-w-0", style: dockGapStyle, children: bottom.map((item, index) => cloneWithLayout(item.node, item.key ?? `bottom-${index}`, {
+                    width: "100%",
+                    height: toCssPercent(item.height)
+                }, "w-full")) })) : null] }));
+}
+SgMainPanel.displayName = "SgMainPanel";

package/dist/layout/SgPanel.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type SgPanelAlign = "top" | "left" | "bottom" | "right" | "client";
+export type SgPanelBorderStyle = "none" | "solid" | "dashed";
+export type SgPanelScrollable = boolean | "auto" | "y" | "x";
+export type SgPanelPercent = number | `${number}%`;
+export type SgPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "align" | "children"> & {
+    align?: SgPanelAlign;
+    width?: SgPanelPercent;
+    height?: SgPanelPercent;
+    span?: number;
+    rowSpan?: number;
+    borderStyle?: SgPanelBorderStyle;
+    padding?: number | string;
+    scrollable?: SgPanelScrollable;
+    scrollbarGutter?: boolean;
+    children?: React.ReactNode;
+};
+export declare function SgPanel(props: Readonly<SgPanelProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=SgPanel.d.ts.map

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

@@ -0,0 +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"}

package/dist/layout/SgPanel.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSpace(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+function getScrollClass(scrollable) {
+    if (!scrollable)
+        return "";
+    if (scrollable === true || scrollable === "auto")
+        return "overflow-auto";
+    if (scrollable === "y")
+        return "overflow-y-auto overflow-x-hidden";
+    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 borderClass = borderStyle === "none"
+        ? "border border-transparent"
+        : borderStyle === "dashed"
+            ? "border border-dashed border-border"
+            : "border border-solid border-border";
+    return (_jsx("div", { className: cn("min-h-0 min-w-0 bg-background", borderClass, getScrollClass(scrollable), className), style: {
+            ...style,
+            padding: toCssSpace(padding),
+            ...(scrollbarGutter ? { scrollbarGutter: "stable" } : null)
+        }, ...rest, children: children }));
+}
+SgPanel.displayName = "SgPanel";

package/dist/layout/SgScreen.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type SgScreenProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    fullscreen?: boolean;
+    padding?: number | string;
+    children?: React.ReactNode;
+};
+export declare function SgScreen(props: Readonly<SgScreenProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgScreen {
+    var displayName: string;
+}
+//# sourceMappingURL=SgScreen.d.ts.map

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

@@ -0,0 +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"}

package/dist/layout/SgScreen.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSpace(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    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: {
+            ...style,
+            padding: toCssSpace(padding)
+        }, ...rest, children: children }));
+}
+SgScreen.displayName = "SgScreen";