@seedgrid/fe-components 0.2.10 → 2026.3.1

package/dist/inputs/SgSlider.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } 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;
+    if (typeof value === "number")
+        return `${value}px`;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+export function SgSlider(props) {
+    const { id, minValue, maxValue, value, defaultValue, step = 1, disabled = false, onChange, ariaLabel, className, width, inputProps } = props;
+    const safeMin = Number.isFinite(minValue) ? minValue : 0;
+    const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
+    const safeMax = Math.max(safeMin, rawMax);
+    const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(() => clamp(defaultValue ?? safeMin, safeMin, safeMax));
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        setInternalValue((prev) => clamp(prev, safeMin, safeMax));
+    }, [isControlled, safeMin, safeMax]);
+    const currentValue = clamp(isControlled ? value : internalValue, safeMin, safeMax);
+    return (_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, "aria-label": ariaLabel, onChange: (event) => {
+            const nextRaw = Number(event.currentTarget.value);
+            const next = clamp(Number.isFinite(nextRaw) ? nextRaw : safeMin, safeMin, safeMax);
+            if (!isControlled)
+                setInternalValue(next);
+            onChange?.(next);
+        }, className: cn("h-5 w-full cursor-pointer", disabled ? "cursor-not-allowed opacity-60" : "", className), style: { width: toCssSize(width) }, ...inputProps }));
+}
+SgSlider.displayName = "SgSlider";

package/dist/inputs/SgStepperInput.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type SgStepperInputProps = {
+    id: string;
+    minValue: number;
+    maxValue: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (value: number) => void;
+    ariaLabel?: string;
+    className?: string;
+    inputClassName?: string;
+    width?: number | string;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "disabled" | "readOnly" | "onChange" | "aria-label">;
+};
+export declare function SgStepperInput(props: Readonly<SgStepperInputProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgStepperInput {
+    var displayName: string;
+}
+//# sourceMappingURL=SgStepperInput.d.ts.map

package/dist/inputs/SgStepperInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgStepperInput.d.ts","sourceRoot":"","sources":["../../src/inputs/SgStepperInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,GACV,UAAU,GACV,YAAY,CACf,CAAC;CACH,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAiHlE;yBAjHe,cAAc"}

package/dist/inputs/SgStepperInput.js

@@ -0,0 +1,51 @@
+"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 toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === "number")
+        return `${value}px`;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+export function SgStepperInput(props) {
+    const { id, minValue, maxValue, step = 1, value, defaultValue, disabled = false, readOnly = false, onChange, ariaLabel, className, inputClassName, width, inputProps } = props;
+    const safeMin = Number.isFinite(minValue) ? minValue : 0;
+    const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
+    const safeMax = Math.max(safeMin, rawMax);
+    const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(() => clamp(defaultValue ?? safeMin, safeMin, safeMax));
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        setInternalValue((prev) => clamp(prev, safeMin, safeMax));
+    }, [isControlled, safeMin, safeMax]);
+    const currentValue = clamp(isControlled ? value : internalValue, safeMin, safeMax);
+    const emitValue = React.useCallback((nextRaw) => {
+        const next = clamp(nextRaw, safeMin, safeMax);
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    }, [isControlled, onChange, safeMax, safeMin]);
+    const canDecrease = !disabled && !readOnly && currentValue > safeMin;
+    const canIncrease = !disabled && !readOnly && currentValue < safeMax;
+    return (_jsxs("div", { className: cn("inline-flex h-10 overflow-hidden rounded-md border border-border bg-background", disabled ? "opacity-60" : "", className), style: { width: toCssSize(width) }, children: [_jsx("input", { id: id, type: "number", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, onChange: (event) => {
+                    const inputNext = Number(event.currentTarget.value);
+                    if (!Number.isFinite(inputNext))
+                        return;
+                    emitValue(inputNext);
+                }, className: cn("min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none", "focus:ring-0 [appearance:textfield]", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", inputClassName), ...inputProps }), _jsxs("div", { className: "flex w-7 flex-col border-l border-border", children: [_jsx("button", { type: "button", "aria-label": "Increase value", disabled: !canIncrease, onClick: () => emitValue(currentValue + safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground", "border-b border-border text-[10px]", canIncrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "up" }) }), _jsx("button", { type: "button", "aria-label": "Decrease value", disabled: !canDecrease, onClick: () => emitValue(currentValue - safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground text-[10px]", canDecrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "down" }) })] })] }));
+}
+SgStepperInput.displayName = "SgStepperInput";
+function StepArrow(props) {
+    const rotate = props.direction === "up" ? 0 : 180;
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-3", style: { transform: `rotate(${rotate}deg)` }, "aria-hidden": "true", children: _jsx("path", { d: "M12 8l5 8H7z", fill: "currentColor" }) }));
+}

package/dist/inputs/SgTextEditor.d.ts

@@ -16,6 +16,7 @@ export type SgTextEditorProps = {
     height?: number;
     placeholder?: string;
     disabled?: boolean;
+    borderRadius?: number | string;
     showCssEditor?: boolean;
     cssEditorLabel?: string;
     className?: string;

package/dist/inputs/SgTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAgY9D;yBAhYe,YAAY"}
+{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoZ9D;yBApZe,YAAY"}

package/dist/inputs/SgTextEditor.js

@@ -68,7 +68,12 @@ function canRun(editor, fn) {
     }
 }
 export function SgTextEditor(props) {
-    const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder = "Type here...", disabled, showCssEditor = false, cssEditorLabel = "Embedded CSS", className } = props;
+    const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder = "Type here...", disabled, borderRadius, showCssEditor = false, cssEditorLabel = "Embedded CSS", className } = props;
+    const resolvedBorderRadius = React.useMemo(() => {
+        if (borderRadius === undefined)
+            return undefined;
+        return typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    }, [borderRadius]);
     const isControlled = typeof valueHtml === "string";
     const editor = useEditor({
         editable: !disabled,
@@ -136,7 +141,18 @@ export function SgTextEditor(props) {
         fn();
     };
     const active = (name, attrs) => !!editor?.isActive(name, attrs);
-    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-t-lg border border-b-0 bg-background p-2", children: [_jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, value: active("heading", { level: 1 })
+    const toolbarStyle = resolvedBorderRadius
+        ? { borderTopLeftRadius: resolvedBorderRadius, borderTopRightRadius: resolvedBorderRadius }
+        : undefined;
+    const editorContainerStyle = { height };
+    if (resolvedBorderRadius) {
+        editorContainerStyle.borderBottomLeftRadius = resolvedBorderRadius;
+        editorContainerStyle.borderBottomRightRadius = resolvedBorderRadius;
+    }
+    const cssTextareaStyle = resolvedBorderRadius
+        ? { borderRadius: resolvedBorderRadius }
+        : undefined;
+    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-t-lg border border-b-0 bg-background p-2", style: toolbarStyle, children: [_jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, value: active("heading", { level: 1 })
                             ? "h1"
                             : active("heading", { level: 2 })
                                 ? "h2"
@@ -192,7 +208,7 @@ export function SgTextEditor(props) {
                                                 return;
                                             void loadFromHtmlFile(f);
                                             e.currentTarget.value = "";
-                                        } })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: { height }, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "CSS is embedded inside the saved HTML document." })] })) : null] }));
+                                        } })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: editorContainerStyle, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs", style: cssTextareaStyle }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "CSS is embedded inside the saved HTML document." })] })) : null] }));
 }
 function ToolbarButton(props) {
     const { label, text, active, disabled, onClick } = props;

package/dist/layout/SgAccordion.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type SgAccordionOrientation = "vertical" | "horizontal";
+export type SgAccordionItem = {
+    id?: string | number;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    end?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    headerBackgroundColor?: string;
+    contentClassName?: string;
+};
+export type SgAccordionProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    id?: string;
+    items: SgAccordionItem[];
+    orientation?: SgAccordionOrientation;
+    multiple?: boolean;
+    collapsible?: boolean;
+    activeIndex?: number | number[];
+    defaultActiveIndex?: number | number[];
+    defaultOpenFirst?: boolean;
+    onActiveIndexChange?: (indexes: number[]) => void;
+    onItemToggle?: (index: number, isOpen: boolean) => void;
+    panelClassName?: string;
+    headerClassName?: string;
+    headerBackgroundColor?: string;
+    contentClassName?: string;
+    animationDuration?: number;
+    horizontalHeaderWidth?: number | string;
+    horizontalMinHeight?: number | string;
+    keepMounted?: boolean;
+};
+export declare function SgAccordion(props: Readonly<SgAccordionProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgAccordion {
+    var displayName: string;
+}
+//# sourceMappingURL=SgAccordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgAccordion.d.ts","sourceRoot":"","sources":["../../src/layout/SgAccordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsD/B,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAKF,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAgN5D;yBAhNe,WAAW"}

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"}