@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/inputs/SgRating.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+import { t, useComponentsI18n } from "../i18n";
+const STAR_SIZES = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 40
+};
+function StarIcon({ size, filled = false }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: filled ? 0 : 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }));
+}
+function CancelIcon({ size }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "m15 9-6 6" }), _jsx("path", { d: "m9 9 6 6" })] }));
+}
+function ErrorText(props) {
+    if (!props.message)
+        return null;
+    return _jsx("p", { className: "text-xs text-red-600", children: props.message });
+}
+function SgRatingBase(props) {
+    const i18n = useComponentsI18n();
+    const { id, label, value = 0, stars = 5, allowHalf = false, cancel = true, disabled = false, readOnly = false, size = "md", className = "", onIcon, offIcon, cancelIcon, color = "hsl(var(--primary))", emptyColor = "hsl(var(--muted-foreground))", showTooltip = false, onChange, onHover, error, required = false, requiredMessage } = props;
+    const [hoverValue, setHoverValue] = React.useState(null);
+    const [internalValue, setInternalValue] = React.useState(value);
+    const [internalError, setInternalError] = React.useState(null);
+    React.useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const handleStarClick = (starIndex, isHalf) => {
+        if (disabled || readOnly)
+            return;
+        const newValue = allowHalf && isHalf ? starIndex + 0.5 : starIndex + 1;
+        setInternalValue(newValue);
+        onChange?.(newValue);
+        // Validation
+        if (required && newValue === 0) {
+            const message = requiredMessage ?? t(i18n, "components.rating.required");
+            setInternalError(message);
+        }
+        else {
+            setInternalError(null);
+        }
+    };
+    const handleStarHover = (starIndex, isHalf) => {
+        if (disabled || readOnly)
+            return;
+        const newHoverValue = allowHalf && isHalf ? starIndex + 0.5 : starIndex + 1;
+        setHoverValue(newHoverValue);
+        onHover?.(newHoverValue);
+    };
+    const handleMouseLeave = () => {
+        setHoverValue(null);
+        onHover?.(null);
+    };
+    const handleCancel = () => {
+        if (disabled || readOnly)
+            return;
+        setInternalValue(0);
+        onChange?.(0);
+        if (required) {
+            const message = requiredMessage ?? t(i18n, "components.rating.required");
+            setInternalError(message);
+        }
+        else {
+            setInternalError(null);
+        }
+    };
+    const displayValue = hoverValue ?? internalValue;
+    const starSize = STAR_SIZES[size];
+    const isInteractive = !disabled && !readOnly;
+    const getStarFillPercentage = (starIndex) => {
+        const starValue = starIndex + 1;
+        if (displayValue >= starValue)
+            return 100;
+        if (displayValue > starIndex && displayValue < starValue) {
+            return (displayValue - starIndex) * 100;
+        }
+        return 0;
+    };
+    return (_jsxs("div", { className: `sg-rating ${className}`, children: [label && (_jsxs("label", { htmlFor: id, className: "mb-2 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-1 text-red-600", children: "*" })] })), _jsxs("div", { className: "flex items-center gap-1", onMouseLeave: handleMouseLeave, style: {
+                    opacity: disabled ? 0.5 : 1,
+                    cursor: isInteractive ? "pointer" : "default"
+                }, children: [cancel && (_jsx("button", { type: "button", onClick: handleCancel, disabled: disabled || readOnly, className: "mr-1 transition-opacity hover:opacity-80", style: {
+                            color: emptyColor,
+                            cursor: isInteractive ? "pointer" : "default"
+                        }, title: t(i18n, "components.rating.cancel"), children: cancelIcon ?? _jsx(CancelIcon, { size: starSize }) })), Array.from({ length: stars }).map((_, index) => {
+                        const fillPercentage = getStarFillPercentage(index);
+                        const tooltipValue = showTooltip ? (hoverValue ?? internalValue) : null;
+                        return (_jsxs("div", { className: "relative inline-block", style: { position: "relative" }, children: [showTooltip && hoverValue !== null && Math.floor(hoverValue - 0.5) === index && (_jsx("div", { className: "absolute -top-8 left-1/2 -translate-x-1/2 rounded bg-black/80 px-2 py-1 text-xs text-white", style: { whiteSpace: "nowrap", zIndex: 10 }, children: tooltipValue })), _jsxs("div", { className: "relative inline-flex", style: { width: starSize, height: starSize }, children: [_jsx("div", { style: { color: emptyColor, position: "absolute", top: 0, left: 0 }, children: offIcon ?? _jsx(StarIcon, { size: starSize, filled: false }) }), _jsx("div", { style: {
+                                                color: color,
+                                                position: "absolute",
+                                                top: 0,
+                                                left: 0,
+                                                clipPath: `inset(0 ${100 - fillPercentage}% 0 0)`,
+                                                transition: "clip-path 0.2s ease"
+                                            }, children: onIcon ?? _jsx(StarIcon, { size: starSize, filled: true }) }), allowHalf ? (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                                        position: "absolute",
+                                                        top: 0,
+                                                        left: 0,
+                                                        width: "50%",
+                                                        height: "100%",
+                                                        cursor: isInteractive ? "pointer" : "default"
+                                                    }, onClick: () => handleStarClick(index, true), onMouseEnter: () => handleStarHover(index, true) }), _jsx("div", { style: {
+                                                        position: "absolute",
+                                                        top: 0,
+                                                        right: 0,
+                                                        width: "50%",
+                                                        height: "100%",
+                                                        cursor: isInteractive ? "pointer" : "default"
+                                                    }, onClick: () => handleStarClick(index, false), onMouseEnter: () => handleStarHover(index, false) })] })) : (_jsx("div", { style: {
+                                                position: "absolute",
+                                                top: 0,
+                                                left: 0,
+                                                width: "100%",
+                                                height: "100%",
+                                                cursor: isInteractive ? "pointer" : "default"
+                                            }, onClick: () => handleStarClick(index, false), onMouseEnter: () => handleStarHover(index, false) }))] })] }, index));
+                    })] }), _jsx(ErrorText, { message: error ?? internalError ?? undefined })] }));
+}
+export function SgRating(props) {
+    const { control, name, register, ...rest } = props;
+    if (name && register) {
+        return _jsx(SgRatingBase, { ...rest });
+    }
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgRatingBase, { ...rest, value: field.value ?? 0, onChange: (value) => {
+                    field.onChange(value);
+                    rest.onChange?.(value);
+                }, error: rest.error ?? fieldState.error?.message })) }));
+    }
+    return _jsx(SgRatingBase, { ...rest });
+}

package/dist/inputs/SgSlider.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgSlider.d.ts","sourceRoot":"","sources":["../../src/inputs/SgSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,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,YAAY,CACf,CAAC;CACH,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA0DtD;yBA1De,QAAQ"}

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/inputs/SgToggleSwitch.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+import type { RhfFieldProps } from "../rhf";
+export type SgToggleSwitchProps = {
+    id: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    className?: string;
+    labelClassName?: string;
+    switchClassName?: string;
+    trackClassName?: string;
+    thumbClassName?: string;
+    onIcon?: React.ReactNode;
+    offIcon?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    width?: number | string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    validateOnBlur?: boolean;
+    validation?: (checked: boolean) => string | null;
+    onValidation?: (message: string | null) => void;
+    onChange?: (checked: boolean) => void;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
+        ref?: React.Ref<HTMLInputElement>;
+    };
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps;
+export declare function SgToggleSwitch(props: Readonly<SgToggleSwitchProps>): import("react/jsx-runtime").JSX.Element;
+export declare const SgSwitch: typeof SgToggleSwitch;
+export type SgSwitchProps = SgToggleSwitchProps;
+//# sourceMappingURL=SgToggleSwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/inputs/SgToggleSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAuC5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;AAsNlB,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAmDlE;AAED,eAAO,MAAM,QAAQ,uBAAiB,CAAC;AACvC,MAAM,MAAM,aAAa,GAAG,mBAAmB,CAAC"}

package/dist/inputs/SgToggleSwitch.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+import { t, useComponentsI18n } from "../i18n";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toBoolean(value, fallback = false) {
+    if (typeof value === "boolean")
+        return value;
+    if (typeof value === "number")
+        return value !== 0;
+    if (typeof value === "string") {
+        const normalized = value.trim().toLowerCase();
+        return normalized === "true" || normalized === "1" || normalized === "on" || normalized === "yes";
+    }
+    return fallback;
+}
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function ErrorText(props) {
+    if (!props.message)
+        return null;
+    return (_jsx("p", { id: props.id, "data-sg-error": true, className: "text-xs text-red-600", children: props.message }));
+}
+function mergeInputPropsWithField(inputProps, field) {
+    return {
+        ...inputProps,
+        checked: toBoolean(field.value, false),
+        onChange: (event) => {
+            field.onChange(event.currentTarget.checked);
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            field.onBlur();
+            inputProps?.onBlur?.(event);
+        },
+        ref: (node) => {
+            field.ref(node);
+            const ref = inputProps?.ref;
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function SgToggleSwitchBase(props) {
+    const i18n = useComponentsI18n();
+    const inputProps = props.inputProps ?? {};
+    const { checked: inputChecked, defaultChecked: inputDefaultChecked, onChange: inputOnChange, onBlur: inputOnBlur, onClick: inputOnClick, disabled: inputDisabled, readOnly: inputReadOnly, className: inputClassName, ref: inputRef, style: inputStyle, ...restInputProps } = inputProps;
+    const isControlled = props.checked !== undefined || inputChecked !== undefined;
+    const [internalChecked, setInternalChecked] = React.useState(() => toBoolean(props.defaultChecked ?? inputDefaultChecked, false));
+    const [internalError, setInternalError] = React.useState(null);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const inputNodeRef = React.useRef(null);
+    const errorId = `${props.id}-error`;
+    const checked = isControlled ? toBoolean(props.checked ?? inputChecked, false) : internalChecked;
+    const isReadOnly = Boolean(props.readOnly ?? inputReadOnly);
+    const isDisabled = props.enabled === false || Boolean(inputDisabled);
+    const setRefs = React.useMemo(() => mergeRefs((node) => {
+        inputNodeRef.current = node;
+    }, inputRef), [inputRef]);
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        const domChecked = inputNodeRef.current?.checked ?? false;
+        setInternalChecked((prev) => (prev === domChecked ? prev : domChecked));
+    }, [isControlled]);
+    const runValidation = React.useCallback((nextChecked) => {
+        if ((props.required ?? false) && !nextChecked) {
+            const message = props.requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.validation) {
+            const message = props.validation(nextChecked);
+            setInternalError(message);
+            props.onValidation?.(message ?? null);
+            return;
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [i18n, props]);
+    const handleChange = (event) => {
+        if (isReadOnly) {
+            event.preventDefault();
+            event.currentTarget.checked = checked;
+            return;
+        }
+        const nextChecked = event.currentTarget.checked;
+        if (!isControlled)
+            setInternalChecked(nextChecked);
+        setHasInteracted(true);
+        if (props.validateOnBlur === false) {
+            runValidation(nextChecked);
+        }
+        inputOnChange?.(event);
+        props.onChange?.(nextChecked);
+    };
+    const handleBlur = (event) => {
+        if ((props.validateOnBlur ?? true) || hasInteracted) {
+            runValidation(event.currentTarget.checked);
+        }
+        inputOnBlur?.(event);
+    };
+    const handleClick = (event) => {
+        if (isReadOnly) {
+            event.preventDefault();
+            return;
+        }
+        inputOnClick?.(event);
+    };
+    const hasError = Boolean(props.error ?? internalError);
+    const resolvedBorderRadius = 9999;
+    const switchWidth = props.width
+        ? typeof props.width === "number"
+            ? `${props.width}px`
+            : props.width
+        : undefined;
+    return (_jsxs("div", { className: cn("space-y-1", props.className), style: switchWidth ? { width: switchWidth } : undefined, children: [_jsxs("label", { htmlFor: props.id, className: cn("inline-flex items-start gap-3 select-none", isDisabled
+                    ? "cursor-not-allowed opacity-70"
+                    : isReadOnly
+                        ? "cursor-default"
+                        : "cursor-pointer"), children: [_jsx("input", { id: props.id, type: "checkbox", role: "switch", "aria-invalid": hasError, "aria-describedby": hasError ? errorId : undefined, "aria-label": props.label ? undefined : props.id, checked: isControlled ? checked : undefined, defaultChecked: isControlled ? undefined : toBoolean(props.defaultChecked ?? inputDefaultChecked, false), disabled: isDisabled, readOnly: isReadOnly, ...restInputProps, className: cn("peer sr-only", inputClassName), style: inputStyle, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onClick: handleClick }), _jsxs("span", { className: cn("relative inline-flex h-6 w-11 items-center", props.switchClassName), children: [_jsx("span", { "aria-hidden": "true", className: cn("absolute inset-0 rounded-full border transition-colors duration-200", checked
+                                    ? hasError
+                                        ? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.2)]"
+                                        : "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]"
+                                    : hasError
+                                        ? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.05)]"
+                                        : "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-white text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
+}
+export function SgToggleSwitch(props) {
+    const { control, name, register, rules, ...rest } = props;
+    if (name && register) {
+        const reg = register(name, rules);
+        return (_jsx(SgToggleSwitchBase, { ...rest, inputProps: {
+                ...rest.inputProps,
+                name,
+                onChange: (event) => {
+                    reg.onChange(event);
+                    rest.inputProps?.onChange?.(event);
+                },
+                onBlur: (event) => {
+                    reg.onBlur(event);
+                    rest.inputProps?.onBlur?.(event);
+                },
+                ref: mergeRefs(reg.ref, rest.inputProps?.ref)
+            } }));
+    }
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgToggleSwitchBase, { ...rest, error: rest.error ?? fieldState.error?.message, inputProps: mergeInputPropsWithField(rest.inputProps, field) })) }));
+    }
+    return _jsx(SgToggleSwitchBase, { ...rest });
+}
+export const SgSwitch = SgToggleSwitch;

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