@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/layout/SgAccordion.js

@@ -0,0 +1,116 @@
+"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 toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+function normalizeIndices(value, max, multiple) {
+    if (value === undefined)
+        return [];
+    const source = Array.isArray(value) ? value : [value];
+    const next = source
+        .filter((idx) => Number.isInteger(idx))
+        .map((idx) => Number(idx))
+        .filter((idx) => idx >= 0 && idx < max);
+    const unique = Array.from(new Set(next)).sort((a, b) => a - b);
+    return multiple ? unique : unique.slice(0, 1);
+}
+function ChevronIcon(props) {
+    const base = props.horizontal
+        ? props.open
+            ? "rotate-180"
+            : "rotate-90"
+        : props.open
+            ? "rotate-180"
+            : "rotate-0";
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("transition-transform duration-200", base), "aria-hidden": "true", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }));
+}
+const DEFAULT_HEADER_BACKGROUND = "var(--sg-accordion-header-bg, rgb(var(--sg-primary-50, 239 246 255)))";
+export function SgAccordion(props) {
+    const { id, items, orientation = "vertical", multiple = false, collapsible = true, activeIndex, defaultActiveIndex, defaultOpenFirst = true, onActiveIndexChange, onItemToggle, panelClassName, headerClassName, headerBackgroundColor, contentClassName, animationDuration = 220, horizontalHeaderWidth = 52, horizontalMinHeight = 220, keepMounted = true, className, ...rest } = props;
+    const generatedId = React.useId().replace(/[:]/g, "");
+    const baseId = (id ?? `sg-accordion-${generatedId}`).replace(/\s+/g, "-");
+    const isHorizontal = orientation === "horizontal";
+    const headerWidth = toCssSize(horizontalHeaderWidth) ?? "52px";
+    const minHeight = toCssSize(horizontalMinHeight) ?? "220px";
+    const controlled = activeIndex !== undefined;
+    const controlledIndices = React.useMemo(() => normalizeIndices(activeIndex, items.length, multiple), [activeIndex, items.length, multiple]);
+    const [internalIndices, setInternalIndices] = React.useState(() => {
+        const seed = defaultActiveIndex !== undefined
+            ? defaultActiveIndex
+            : defaultOpenFirst && items.length > 0
+                ? 0
+                : [];
+        return normalizeIndices(seed, items.length, multiple);
+    });
+    React.useEffect(() => {
+        if (controlled)
+            return;
+        setInternalIndices((prev) => normalizeIndices(prev, items.length, multiple));
+    }, [controlled, items.length, multiple]);
+    const openIndices = controlled ? controlledIndices : internalIndices;
+    const openSet = React.useMemo(() => new Set(openIndices), [openIndices]);
+    const commitIndices = React.useCallback((next) => {
+        const normalized = normalizeIndices(next, items.length, multiple);
+        if (!controlled)
+            setInternalIndices(normalized);
+        onActiveIndexChange?.(normalized);
+    }, [controlled, items.length, multiple, onActiveIndexChange]);
+    const handleToggle = React.useCallback((index) => {
+        const item = items[index];
+        if (!item || item.disabled)
+            return;
+        const isOpen = openSet.has(index);
+        if (isOpen && !collapsible)
+            return;
+        let next;
+        if (isOpen) {
+            next = openIndices.filter((it) => it !== index);
+        }
+        else {
+            next = multiple ? [...openIndices, index] : [index];
+        }
+        commitIndices(next);
+        onItemToggle?.(index, !isOpen);
+    }, [items, openSet, collapsible, openIndices, multiple, commitIndices, onItemToggle]);
+    return (_jsx("div", { className: cn(isHorizontal ? "flex w-full gap-2 overflow-x-auto" : "space-y-2", className), "data-orientation": orientation, ...rest, children: items.map((item, index) => {
+            const isOpen = openSet.has(index);
+            const panelId = `${baseId}-panel-${item.id ?? index}`;
+            const headerId = `${baseId}-header-${item.id ?? index}`;
+            const contentId = `${baseId}-content-${item.id ?? index}`;
+            const resolvedHeaderBackground = item.headerBackgroundColor ?? headerBackgroundColor ?? DEFAULT_HEADER_BACKGROUND;
+            const sharedButtonClasses = cn("inline-flex items-center gap-2 text-left font-medium transition-[filter,colors] duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40", item.disabled ? "cursor-not-allowed opacity-55" : "cursor-pointer hover:brightness-95");
+            return (_jsxs("div", { id: panelId, className: cn("border border-border bg-background", isHorizontal ? "flex min-w-0 overflow-hidden rounded-lg" : "overflow-hidden rounded-lg", panelClassName, item.className), style: isHorizontal
+                    ? {
+                        minHeight,
+                        flex: isOpen ? "1 1 0%" : "0 0 auto",
+                        transition: `flex-basis ${animationDuration}ms ease`
+                    }
+                    : undefined, children: [_jsx("button", { id: headerId, type: "button", disabled: item.disabled, "aria-controls": contentId, "aria-expanded": isOpen, className: cn(sharedButtonClasses, isHorizontal
+                            ? "h-full flex-col justify-between border-r border-border px-2 py-3 text-[11px] uppercase tracking-wide"
+                            : "w-full justify-between px-4 py-3 text-sm", headerClassName, item.headerClassName), style: isHorizontal
+                            ? {
+                                width: headerWidth,
+                                backgroundColor: resolvedHeaderBackground
+                            }
+                            : {
+                                backgroundColor: resolvedHeaderBackground
+                            }, onClick: () => handleToggle(index), children: isHorizontal ? (_jsxs(_Fragment, { children: [_jsx(ChevronIcon, { open: isOpen, horizontal: true }), _jsx("span", { style: { writingMode: "vertical-rl", transform: "rotate(180deg)" }, className: "line-clamp-1 select-none text-center text-[10px] font-semibold tracking-wide", children: item.title }), item.icon ? _jsx("span", { className: "opacity-80", children: item.icon }) : _jsx("span", { "aria-hidden": "true" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [item.icon ? _jsx("span", { className: "opacity-80", children: item.icon }) : null, _jsx("span", { children: item.title })] }), _jsxs("span", { className: "inline-flex items-center gap-2", children: [item.end ? _jsx("span", { children: item.end }) : null, _jsx(ChevronIcon, { open: isOpen, horizontal: false })] })] })) }), _jsx("div", { id: contentId, role: "region", "aria-labelledby": headerId, className: cn("overflow-hidden", contentClassName, item.contentClassName), style: isHorizontal
+                            ? {
+                                width: isOpen ? "100%" : "0px",
+                                opacity: isOpen ? 1 : 0,
+                                transition: `width ${animationDuration}ms ease, opacity ${animationDuration}ms ease`
+                            }
+                            : {
+                                maxHeight: isOpen ? "960px" : "0px",
+                                opacity: isOpen ? 1 : 0,
+                                transition: `max-height ${animationDuration}ms ease, opacity ${animationDuration}ms ease`
+                            }, children: keepMounted || isOpen ? (_jsx("div", { className: cn(isHorizontal ? "h-full min-w-[220px] p-4" : "p-4"), children: item.content })) : null })] }, panelId));
+        }) }));
+}
+SgAccordion.displayName = "SgAccordion";

package/dist/layout/SgBreadcrumb.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export type SgBreadcrumbItem = {
+    id: string;
+    label: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    onClick?: () => void;
+};
+export type SgBreadcrumbSeparator = "slash" | "chevron" | "dot" | "arrow";
+export type SgBreadcrumbProps = {
+    items: SgBreadcrumbItem[];
+    separator?: SgBreadcrumbSeparator | React.ReactNode;
+    maxItems?: number;
+    overflowBehavior?: "collapse" | "scroll";
+    showHomeIcon?: boolean;
+    homeHref?: string;
+    homeLabel?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "subtle" | "primary";
+    ariaLabel?: string;
+    overflowLabel?: string;
+    onNavigate?: (item: SgBreadcrumbItem, index: number) => void;
+    className?: string;
+    itemClassName?: string;
+    style?: React.CSSProperties;
+};
+export declare function SgBreadcrumb(props: Readonly<SgBreadcrumbProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgBreadcrumb {
+    var displayName: string;
+}
+//# sourceMappingURL=SgBreadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgBreadcrumb.d.ts","sourceRoot":"","sources":["../../src/layout/SgBreadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAsGF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA8K9D;yBA9Ke,YAAY"}

package/dist/layout/SgBreadcrumb.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight, Home, MoreHorizontal } from "lucide-react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function separatorNode(separator, iconClassName) {
+    if (React.isValidElement(separator))
+        return separator;
+    if (separator === "slash")
+        return _jsx("span", { className: iconClassName, children: "/" });
+    if (separator === "dot")
+        return _jsx("span", { className: iconClassName, children: "\u2022" });
+    if (separator === "arrow")
+        return _jsx("span", { className: iconClassName, children: "\u2192" });
+    return _jsx(ChevronRight, { className: iconClassName });
+}
+function toDisplayTokens(items, overflowBehavior, maxItems) {
+    if (overflowBehavior !== "collapse" ||
+        maxItems === undefined ||
+        maxItems < 2 ||
+        items.length <= maxItems) {
+        return items.map((item) => ({ type: "item", value: item }));
+    }
+    if (maxItems === 2) {
+        return [
+            { type: "item", value: items[0] },
+            { type: "item", value: items[items.length - 1] }
+        ];
+    }
+    const tailCount = maxItems - 2;
+    const head = items[0];
+    const tail = items.slice(-tailCount);
+    const hidden = items.slice(1, items.length - tailCount);
+    const out = [{ type: "item", value: head }];
+    if (hidden.length > 0)
+        out.push({ type: "overflow", value: hidden });
+    for (const item of tail)
+        out.push({ type: "item", value: item });
+    return out;
+}
+function renderActionItem(item, index, className, iconClassName, onNavigate) {
+    const content = (_jsxs(_Fragment, { children: [item.icon ? _jsx("span", { className: cn("inline-flex items-center justify-center", iconClassName), children: item.icon }) : null, _jsx("span", { className: "truncate", children: item.label })] }));
+    if (item.disabled) {
+        return _jsx("span", { className: cn(className, "cursor-not-allowed opacity-45"), children: content });
+    }
+    if (item.href) {
+        return (_jsx("a", { href: item.href, className: className, onClick: () => {
+                item.onClick?.();
+                onNavigate?.(item, index);
+            }, children: content }));
+    }
+    if (item.onClick) {
+        return (_jsx("button", { type: "button", className: className, onClick: () => {
+                item.onClick?.();
+                onNavigate?.(item, index);
+            }, children: content }));
+    }
+    return _jsx("span", { className: cn(className, "cursor-default"), children: content });
+}
+export function SgBreadcrumb(props) {
+    const { items, separator = "chevron", maxItems, overflowBehavior = "collapse", showHomeIcon = false, homeHref = "/", homeLabel = "Home", size = "md", variant = "default", ariaLabel = "Breadcrumb", overflowLabel = "Mais caminhos", onNavigate, className, itemClassName, style } = props;
+    const visibleItems = React.useMemo(() => items.filter((item) => !item.hidden), [items]);
+    const normalizedItems = React.useMemo(() => {
+        const base = visibleItems.map((item, index) => ({ item, index }));
+        if (!showHomeIcon)
+            return base;
+        const homeItem = {
+            item: {
+                id: "__sg_breadcrumb_home__",
+                label: homeLabel,
+                href: homeHref,
+                icon: _jsx(Home, { className: "size-full" })
+            },
+            index: -1
+        };
+        return [homeItem, ...base];
+    }, [homeHref, homeLabel, showHomeIcon, visibleItems]);
+    const tokens = React.useMemo(() => toDisplayTokens(normalizedItems, overflowBehavior, maxItems), [maxItems, normalizedItems, overflowBehavior]);
+    const sizeClasses = size === "sm"
+        ? {
+            root: "text-xs gap-1.5",
+            item: "px-1.5 py-0.5",
+            icon: "size-3.5",
+            sep: "text-[10px]"
+        }
+        : size === "lg"
+            ? {
+                root: "text-base gap-2.5",
+                item: "px-2 py-1",
+                icon: "size-4.5",
+                sep: "text-sm"
+            }
+            : {
+                root: "text-sm gap-2",
+                item: "px-1.5 py-0.5",
+                icon: "size-4",
+                sep: "text-xs"
+            };
+    const variantClasses = variant === "subtle"
+        ? {
+            item: "rounded-md text-muted-foreground hover:bg-muted/80 hover:text-foreground",
+            current: "rounded-md bg-muted text-foreground"
+        }
+        : variant === "primary"
+            ? {
+                item: "rounded-md text-primary hover:bg-primary/10",
+                current: "rounded-md bg-primary/10 text-primary font-medium"
+            }
+            : {
+                item: "text-muted-foreground hover:text-foreground",
+                current: "text-foreground font-medium"
+            };
+    const separatorEl = separatorNode(separator, cn("text-muted-foreground", sizeClasses.sep));
+    return (_jsx("nav", { "aria-label": ariaLabel, className: cn("min-w-0", className), style: style, children: _jsx("div", { className: cn(overflowBehavior === "scroll" ? "overflow-x-auto" : ""), children: _jsx("ol", { className: cn("flex min-w-0 items-center whitespace-nowrap", sizeClasses.root), children: tokens.map((token, tokenIndex) => {
+                    const isLast = tokenIndex === tokens.length - 1;
+                    return (_jsxs(React.Fragment, { children: [tokenIndex > 0 ? (_jsx("li", { "aria-hidden": true, className: "inline-flex shrink-0 items-center", children: separatorEl })) : null, token.type === "item" ? (_jsx("li", { className: "inline-flex min-w-0 items-center", children: isLast ? (_jsxs("span", { "aria-current": "page", className: cn("inline-flex min-w-0 items-center gap-1.5", sizeClasses.item, variantClasses.current, itemClassName), children: [token.value.item.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: token.value.item.icon })) : null, _jsx("span", { className: "truncate", children: token.value.item.label })] })) : (renderActionItem(token.value.item, token.value.index, cn("inline-flex min-w-0 items-center gap-1.5 transition-colors", sizeClasses.item, variantClasses.item, itemClassName), sizeClasses.icon, onNavigate)) })) : (_jsx("li", { className: "relative inline-flex items-center", children: _jsxs("details", { className: "group", children: [_jsx("summary", { "aria-label": overflowLabel, className: cn("list-none cursor-pointer rounded-md text-muted-foreground transition-colors", "inline-flex items-center justify-center", sizeClasses.item, "hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden"), children: _jsx(MoreHorizontal, { className: sizeClasses.icon }) }), _jsx("ul", { className: "absolute left-0 top-full z-20 mt-1 min-w-44 rounded-md border border-border bg-popover p-1 shadow-md", children: token.value.map((entry) => (_jsx("li", { children: renderActionItem(entry.item, entry.index, cn("inline-flex w-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-sm", "text-popover-foreground hover:bg-muted"), "size-4", onNavigate) }, entry.item.id))) })] }) }))] }, token.type === "item" ? token.value.item.id : `overflow-${tokenIndex}`));
+                }) }) }) }));
+}
+SgBreadcrumb.displayName = "SgBreadcrumb";

package/dist/layout/SgCarousel.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+export type SgCarouselOrientation = "horizontal" | "vertical";
+export interface SgCarouselProps {
+    /** Unique identifier for the carousel */
+    id?: string;
+    /** Items to display in the carousel */
+    items: React.ReactNode[];
+    /** Number of items to display at once */
+    numVisible?: number;
+    /** Number of items to scroll at a time */
+    numScroll?: number;
+    /** Orientation of the carousel */
+    orientation?: SgCarouselOrientation;
+    /** Enable circular mode (infinite loop) */
+    circular?: boolean;
+    /** Enable auto play */
+    autoPlay?: boolean;
+    /** Auto play interval in milliseconds */
+    autoPlayInterval?: number;
+    /** Show navigation buttons */
+    showNavigators?: boolean;
+    /** Show indicators (dots) */
+    showIndicators?: boolean;
+    /** Custom class name for container */
+    className?: string;
+    /** Custom class name for items */
+    itemClassName?: string;
+    /** Width of the carousel container */
+    width?: number | string;
+    /** Height of the carousel container */
+    height?: number | string;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Callback when active index changes */
+    onIndexChange?: (index: number) => void;
+    /** Custom render for navigation buttons */
+    customNavigators?: {
+        prev?: React.ReactNode;
+        next?: React.ReactNode;
+    };
+}
+export declare function SgCarousel(props: SgCarouselProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgCarousel.d.ts.map

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

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

package/dist/layout/SgCarousel.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 [activeIndex, setActiveIndex] = React.useState(0);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const timerRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const lastNotifiedIndexRef = React.useRef(activeIndex);
+    const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });
+    const safeNumVisible = Math.max(1, numVisible);
+    const safeNumScroll = Math.max(1, numScroll);
+    const itemCount = items.length;
+    const maxStartIndex = Math.max(itemCount - safeNumVisible, 0);
+    const totalPages = itemCount === 0 ? 0 : Math.floor(maxStartIndex / safeNumScroll) + 1;
+    const isHorizontal = orientation === "horizontal";
+    // Auto play logic
+    React.useEffect(() => {
+        if (autoPlay && !isHovered) {
+            timerRef.current = setInterval(() => {
+                handleNext();
+            }, autoPlayInterval);
+        }
+        return () => {
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+            }
+        };
+    }, [autoPlay, autoPlayInterval, isHovered, activeIndex]);
+    // Keep active index within bounds when props/items change.
+    React.useEffect(() => {
+        setActiveIndex((prev) => Math.min(Math.max(prev, 0), maxStartIndex));
+    }, [maxStartIndex]);
+    // Notify parent after the state is committed, avoiding setState during render warnings.
+    React.useEffect(() => {
+        if (lastNotifiedIndexRef.current === activeIndex)
+            return;
+        lastNotifiedIndexRef.current = activeIndex;
+        onIndexChange?.(activeIndex);
+    }, [activeIndex, onIndexChange]);
+    React.useEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const updateSize = () => {
+            const rect = element.getBoundingClientRect();
+            setViewportSize({ width: rect.width, height: rect.height });
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateSize);
+            return () => {
+                window.removeEventListener("resize", updateSize);
+            };
+        }
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    const handleNext = () => {
+        setActiveIndex((prev) => {
+            if (itemCount === 0)
+                return 0;
+            const next = prev + safeNumScroll;
+            if (next > maxStartIndex) {
+                return circular ? 0 : maxStartIndex;
+            }
+            return next;
+        });
+    };
+    const handlePrev = () => {
+        setActiveIndex((prev) => {
+            if (itemCount === 0)
+                return 0;
+            const next = prev - safeNumScroll;
+            if (next < 0) {
+                return circular ? maxStartIndex : 0;
+            }
+            return next;
+        });
+    };
+    const handleIndicatorClick = (index) => {
+        const next = Math.min(index * safeNumScroll, maxStartIndex);
+        setActiveIndex(next);
+    };
+    const canGoPrev = circular ? maxStartIndex > 0 : activeIndex > 0;
+    const canGoNext = circular ? maxStartIndex > 0 : activeIndex < maxStartIndex;
+    const itemPercent = 100 / safeNumVisible;
+    const gapPerItem = (gap * (safeNumVisible - 1)) / safeNumVisible;
+    const itemExtentCss = `calc(${itemPercent}% - ${gapPerItem}px)`;
+    const getTransformValue = () => {
+        const viewportExtent = isHorizontal ? viewportSize.width : viewportSize.height;
+        if (viewportExtent > 0) {
+            const itemExtent = Math.max(0, (viewportExtent - gap * (safeNumVisible - 1)) / safeNumVisible);
+            const step = itemExtent + gap;
+            const offsetPx = activeIndex * step;
+            return isHorizontal
+                ? `translate3d(-${offsetPx}px, 0, 0)`
+                : `translate3d(0, -${offsetPx}px, 0)`;
+        }
+        // Fallback before first measure.
+        const itemPercent = 100 / safeNumVisible;
+        const fallbackGap = (activeIndex * gap) / safeNumVisible;
+        const fallbackOffset = activeIndex * itemPercent;
+        return isHorizontal
+            ? `translateX(calc(-${fallbackOffset}% - ${fallbackGap}px))`
+            : `translateY(calc(-${fallbackOffset}% - ${fallbackGap}px))`;
+    };
+    const NavButton = ({ direction, onClick, disabled }) => {
+        const isPrev = direction === "prev";
+        const Icon = isHorizontal
+            ? isPrev ? ChevronLeft : ChevronRight
+            : isPrev ? ChevronUp : ChevronDown;
+        const customButton = isPrev ? customNavigators?.prev : customNavigators?.next;
+        if (customButton) {
+            return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: `
+            absolute z-10 flex items-center justify-center transition-all
+            ${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 cursor-pointer"}
+            ${isHorizontal
+                    ? `top-1/2 -translate-y-1/2 ${isPrev ? "left-2" : "right-2"}`
+                    : `left-1/2 -translate-x-1/2 ${isPrev ? "-top-5" : "-bottom-5"}`}
+          `, children: customButton }));
+        }
+        return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: `
+          absolute z-10 flex h-10 w-10 items-center justify-center rounded-full
+          bg-white/90 shadow-lg opacity-70 transition-all
+          ${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 hover:bg-white cursor-pointer"}
+          ${isHorizontal
+                ? `top-1/2 -translate-y-1/2 ${isPrev ? "left-2" : "right-2"}`
+                : `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: `
+            flex transition-transform duration-500 ease-in-out
+            ${isHorizontal ? "flex-row" : "flex-col"}
+          `, style: {
+                        transform: getTransformValue(),
+                        gap: `${gap}px`,
+                        height: isHorizontal ? undefined : "100%"
+                    }, children: items.map((item, index) => (_jsx("div", { className: `
+                flex-shrink-0
+                ${itemClassName}
+              `, style: {
+                            width: isHorizontal ? itemExtentCss : "100%",
+                            height: isHorizontal ? "100%" : itemExtentCss
+                        }, children: item }, index))) }) }), showIndicators && (_jsx("div", { className: `
+            absolute flex gap-2 z-10
+            ${isHorizontal
+                    ? "bottom-4 left-1/2 -translate-x-1/2 flex-row"
+                    : "-right-6 top-1/2 -translate-y-1/2 flex-col"}
+          `, children: Array.from({ length: totalPages }).map((_, index) => {
+                    const isActive = Math.floor(activeIndex / safeNumScroll) === index;
+                    return (_jsx("button", { type: "button", onClick: () => handleIndicatorClick(index), className: `
+                  transition-all
+                  ${isHorizontal ? "h-2" : "w-2"}
+                  ${isActive
+                            ? `${isHorizontal ? "w-8" : "h-8"} bg-primary`
+                            : `${isHorizontal ? "w-2" : "h-2"} bg-white/60 hover:bg-white/80`}
+                  rounded-full
+                `, "aria-label": `Go to slide ${index + 1}` }, index));
+                }) }))] }));
+}

package/dist/layout/SgDockLayout.d.ts

@@ -17,13 +17,27 @@ export type SgDockLayoutProps = {
     children: React.ReactNode;
     defaultState?: SgDockLayoutState;
 };
+export type SgDockDropIndicator = {
+    zone: SgDockZoneId;
+    index: number;
+};
 type DockContextValue = {
     layoutId: string;
     getZoneElement: (zone: SgDockZoneId) => HTMLDivElement | null;
     registerZone: (zone: SgDockZoneId, el: HTMLDivElement | null) => void;
     getZoneAtPoint: (x: number, y: number) => SgDockZoneId | null;
+    getDropPlacementAtPoint: (x: number, y: number, draggingToolbarId: string) => SgDockDropIndicator | null;
+    getZoneToolbarCount: (zone: SgDockZoneId) => number;
+    isDropPreviewActive: boolean;
+    setDropPreviewActive: (next: boolean) => void;
+    draggingToolbarId: string | null;
+    setDraggingToolbarId: (toolbarId: string | null) => void;
+    dropIndicator: SgDockDropIndicator | null;
+    setDropIndicator: (next: SgDockDropIndicator | null) => void;
     getToolbarZone: (id: string) => SgDockZoneId | null;
+    getToolbarOrder: (id: string) => number | undefined;
     moveToolbar: (id: string, zone: SgDockZoneId) => void;
+    placeToolbar: (id: string, zone: SgDockZoneId, index: number) => void;
     ensureToolbar: (id: string, state: Partial<SgDockToolbarState>) => void;
     getToolbarCollapsed: (id: string) => boolean | undefined;
     setToolbarCollapsed: (id: string, next: boolean) => void;

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

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