@seedgrid/fe-components 2026.3.1 → 2026.3.2

package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts

@@ -1,5 +1,5 @@
 export type SgRoller3DDigitProps = {
-    /** Current value to display — must be present in `items` */
+    /** Current value to display — must be present in `items` */
     value: string;
     /**
      * Ordered list of all possible values this roller can show.
@@ -7,31 +7,33 @@ export type SgRoller3DDigitProps = {
      * @default ["0","1","2","3","4","5","6","7","8","9"]
      */
     items?: string[];
-    /** Font size in pixels — controls overall scale */
+    /** Font size in pixels — controls overall scale */
     fontSize?: number;
+    /** Transition duration in milliseconds */
+    transitionMs?: number;
     /** Additional CSS classes on the outer wrapper */
     className?: string;
 };
 /**
- * SgRoller3DDigit — a vertical drum/roller that animates between values.
+ * SgRoller3DDigit — a vertical drum/roller that animates between values.
  *
  * Renders a scrolling strip of items and smoothly transitions to the
  * position of `value` in the `items` list using a CSS transform.
  * Works with digits, letters, padded numbers or any custom strings.
  *
  * @example
- * // Digit roller (default 0–9)
+ * // Digit roller (default 0–9)
  * <SgRoller3DDigit value="7" fontSize={32} />
  *
  * @example
- * // Padded time roller (e.g. minutes 00–59)
+ * // Padded time roller (e.g. minutes 00–59)
  * const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
  * <SgRoller3DDigit value="42" items={MINUTES} fontSize={22} />
  *
  * @example
- * // Letter roller (A–Z) — animate names character by character
+ * // Letter roller (A–Z) — animate names character by character
  * const ALPHA = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  * <SgRoller3DDigit value="M" items={ALPHA} fontSize={32} />
  */
-export declare function SgRoller3DDigit({ value, items, fontSize, className, }: SgRoller3DDigitProps): import("react/jsx-runtime").JSX.Element;
+export declare function SgRoller3DDigit({ value, items, fontSize, transitionMs, className, }: SgRoller3DDigitProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgRoller3DDigit.d.ts.map

package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgRoller3DDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/roller3d-digit/SgRoller3DDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAqB,EACrB,QAAa,EACb,SAAS,GACV,EAAE,oBAAoB,2CAoDtB"}
+{"version":3,"file":"SgRoller3DDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/roller3d-digit/SgRoller3DDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAqB,EACrB,QAAa,EACb,YAAkB,EAClB,SAAS,GACV,EAAE,oBAAoB,2CAoDtB"}

package/dist/digits/roller3d-digit/SgRoller3DDigit.js

@@ -4,27 +4,27 @@ function cn(...parts) {
 }
 const DEFAULT_ITEMS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 /**
- * SgRoller3DDigit — a vertical drum/roller that animates between values.
+ * SgRoller3DDigit — a vertical drum/roller that animates between values.
  *
  * Renders a scrolling strip of items and smoothly transitions to the
  * position of `value` in the `items` list using a CSS transform.
  * Works with digits, letters, padded numbers or any custom strings.
  *
  * @example
- * // Digit roller (default 0–9)
+ * // Digit roller (default 0–9)
  * <SgRoller3DDigit value="7" fontSize={32} />
  *
  * @example
- * // Padded time roller (e.g. minutes 00–59)
+ * // Padded time roller (e.g. minutes 00–59)
  * const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
  * <SgRoller3DDigit value="42" items={MINUTES} fontSize={22} />
  *
  * @example
- * // Letter roller (A–Z) — animate names character by character
+ * // Letter roller (A–Z) — animate names character by character
  * const ALPHA = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  * <SgRoller3DDigit value="M" items={ALPHA} fontSize={32} />
  */
-export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, className, }) {
+export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, transitionMs = 500, className, }) {
     const idx = Math.max(0, items.indexOf(value));
     // Dimensions are derived from fontSize so the component scales uniformly.
     // The ratios match the original SgClock roller3d proportions exactly when
@@ -38,7 +38,7 @@ export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, c
         // top fade
         "before:absolute before:inset-0 before:z-10 before:bg-gradient-to-b before:from-black/[0.06] before:to-transparent before:content-['']", 
         // bottom fade
-        "after:absolute after:inset-0 after:z-10 after:bg-gradient-to-t after:from-black/[0.12] after:to-transparent after:content-['']", className), style: { width: w, height: h }, children: [_jsx("div", { className: "absolute left-0 right-0 top-1/2 z-20 h-px bg-red-500/70" }), _jsx("div", { className: "absolute left-0 top-0 w-full transition-transform duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] [mask-image:linear-gradient(to_bottom,transparent,black_22%,black_78%,transparent)]", style: { transform: `translateY(${translateY}px)` }, children: items.map((item, i) => (_jsx("div", { className: "flex select-none items-center justify-center font-medium tabular-nums", style: {
+        "after:absolute after:inset-0 after:z-10 after:bg-gradient-to-t after:from-black/[0.12] after:to-transparent after:content-['']", className), style: { width: w, height: h }, children: [_jsx("div", { className: "absolute left-0 right-0 top-1/2 z-20 h-px bg-red-500/70" }), _jsx("div", { className: "absolute left-0 top-0 w-full transition-transform [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] [mask-image:linear-gradient(to_bottom,transparent,black_22%,black_78%,transparent)]", style: { transform: `translateY(${translateY}px)`, transitionDuration: `${transitionMs}ms` }, children: items.map((item, i) => (_jsx("div", { className: "flex select-none items-center justify-center font-medium tabular-nums", style: {
                         height: itemH,
                         fontSize,
                         lineHeight: 1,

package/dist/others/SgPlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAqVF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoMtE"}
+{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA4VF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAgOtE"}

package/dist/others/SgPlayground.js

@@ -7,7 +7,7 @@ import { SgCard } from "../layout/SgCard";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.9";
+const DEFAULT_SEEDGRID_DEPENDENCY = "2026.3.1";
 const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
     "@codesandbox/sandpack-react": "^2.20.0",
     "react-hook-form": "^7.0.0",
@@ -301,15 +301,19 @@ function CopyButton() {
     }, [copyState]);
     return (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: handleCopy, children: copyState === "success" ? "Copiado" : copyState === "error" ? "Erro" : "Copiar" }));
 }
-function RunButton() {
+function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
-    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => sandpack.runSandpack(), children: "Run" }));
+    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => {
+            sandpack.runSandpack();
+            onRun?.();
+        }, children: "Run" }));
 }
 export default function SgPlayground(props) {
     const { code, interactive = false, codeContract = "renderBody", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
-    const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss(readThemeVarsFromHost(), effectivePreviewPadding));
+    const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
     const [isExpanded, setIsExpanded] = React.useState(false);
+    const [activePanel, setActivePanel] = React.useState("code");
     React.useEffect(() => {
         if (typeof window === "undefined")
             return;
@@ -376,13 +380,16 @@ export default function SgPlayground(props) {
                 : "resize";
     const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: { dependencies: deps }, options: {
                 autorun: false,
+                initMode: "lazy",
+                bundlerTimeOut: 60000,
                 activeFile: "/App.tsx",
                 visibleFiles: ["/App.tsx"],
                 externalResources: SANDPACK_EXTERNAL_RESOURCES
-            }, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, {})] })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px] min-w-[480px]", resizeClass), style: {
-                        gridTemplateColumns: "1fr 1fr",
-                        height: currentHeight
-                    }, children: [_jsxs("div", { className: "min-w-0 border-r border-border", children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: "min-w-0", children: _jsx(SandpackPreview, { style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
+            }, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
+                                ? "border-primary text-foreground"
+                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("code"), children: "C\u00F3digo" }), _jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "preview"
+                                ? "border-primary text-foreground"
+                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px]", "grid-cols-1 md:grid-cols-2", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: cn("min-w-0 md:border-r border-border", activePanel !== "code" ? "hidden md:block" : ""), children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: cn("min-w-0", activePanel !== "preview" ? "hidden md:block" : ""), children: _jsx(SandpackPreview, { style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
     if (!withCard)
         return content;
     return (_jsx(SgCard, { id: cardId, title: title ?? "Codigo", description: description, collapsible: collapsible, defaultOpen: defaultOpen, className: cn("rounded-lg", className), bodyClassName: "p-0", children: content }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "2026.3.1",
+  "version": "2026.3.2",
   "type": "module",
   "repository": {
     "type": "git",