@seedgrid/fe-components 2026.3.27-1 → 2026.3.27-2

package/dist/layout/SgPanel.d.ts

@@ -3,6 +3,9 @@ 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 SgPanelContentDirection = "row" | "column";
+export type SgPanelContentJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export type SgPanelContentAlign = "start" | "center" | "end" | "stretch";
 export type SgPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "align" | "children"> & {
     align?: SgPanelAlign;
     width?: SgPanelPercent;
@@ -13,6 +16,13 @@ export type SgPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "align" |
     padding?: number | string;
     scrollable?: SgPanelScrollable;
     scrollbarGutter?: boolean;
+    contentDirection?: SgPanelContentDirection;
+    contentGap?: number | string;
+    contentJustify?: SgPanelContentJustify;
+    contentAlign?: SgPanelContentAlign;
+    contentWrap?: boolean;
+    contentClassName?: string;
+    contentStyle?: React.CSSProperties;
     children?: React.ReactNode;
 };
 export declare function SgPanel(props: Readonly<SgPanelProps>): import("react/jsx-runtime").JSX.Element;

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;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"}
+{"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,uBAAuB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAC7B,OAAO,GACP,QAAQ,GACR,KAAK,GACL,SAAS,GACT,QAAQ,GACR,QAAQ,CAAC;AACb,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEzE,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,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;IAE1B,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA+CF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAmFpD;yBAnFe,OAAO"}

package/dist/layout/SgPanel.js

@@ -22,8 +22,42 @@ function getScrollClass(scrollable) {
         return "overflow-y-auto overflow-x-hidden";
     return "overflow-x-auto overflow-y-hidden";
 }
+function getDefaultContentDirection(align) {
+    return align === "top" || align === "bottom" ? "row" : "column";
+}
+function getDefaultContentAlign(align) {
+    return align === "top" || align === "bottom" ? "start" : "stretch";
+}
+function getDefaultContentGap() {
+    return 10;
+}
+function getJustifyClass(justify) {
+    const map = {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly"
+    };
+    return map[justify];
+}
+function getAlignClass(align) {
+    const map = {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch"
+    };
+    return map[align];
+}
 export function SgPanel(props) {
-    const { width, height, borderStyle = "solid", padding, scrollable = false, scrollbarGutter = false, className, style, children, ...rest } = props;
+    const { align = "client", width, height, borderStyle = "solid", padding, scrollable = false, scrollbarGutter = false, contentDirection, contentGap, contentJustify, contentAlign, contentWrap, contentClassName, contentStyle, className, style, children, ...rest } = props;
+    const resolvedContentDirection = contentDirection ?? getDefaultContentDirection(align);
+    const resolvedContentGap = contentGap ?? getDefaultContentGap();
+    const resolvedContentJustify = contentJustify ?? "start";
+    const resolvedContentAlign = contentAlign ?? getDefaultContentAlign(align);
+    const resolvedContentWrap = contentWrap ?? false;
     const borderClass = borderStyle === "none"
         ? "border border-transparent"
         : borderStyle === "dashed"
@@ -36,7 +70,12 @@ export function SgPanel(props) {
             ...(widthCss !== undefined ? { width: widthCss } : null),
             ...(heightCss !== undefined ? { height: heightCss } : null),
             padding: toCssSpace(padding),
-            ...(scrollbarGutter ? { scrollbarGutter: "stable" } : null)
-        }, ...rest, children: children }));
+            ...(scrollbarGutter
+                ? { scrollbarGutter: "stable" }
+                : null)
+        }, ...rest, children: _jsx("div", { className: cn("flex min-h-0 min-w-0", resolvedContentDirection === "row" ? "flex-row" : "flex-col", getJustifyClass(resolvedContentJustify), getAlignClass(resolvedContentAlign), resolvedContentWrap ? "flex-wrap" : "", contentClassName), style: {
+                gap: toCssSpace(resolvedContentGap),
+                ...contentStyle
+            }, children: children }) }));
 }
 SgPanel.displayName = "SgPanel";