@validationcloud/fractal-ui 1.56.0 → 1.57.0

package/dist/charts.js

@@ -1,12 +1,12 @@
-import { EChartsRenderer as o } from "./src/components/echarts-renderer/echarts-renderer.js";
-import { EChartsThemeOption as a, isEChartsThemeOption as i } from "./src/components/echarts-renderer/echarts-theme-option.js";
-import { EChartsChartOption as s, isEChartsChartOption as h } from "./src/components/echarts-renderer/echarts-chart-option.js";
-import { useChartInstance as n } from "./src/components/echarts-renderer/use-chart-instance.js";
-import { MavrikChart as E } from "./src/components/echarts-renderer/mavrik-chart.js";
-import { MAVRIK_THEME as x, MAVRIK_THEME_HORIZONTAL as O, selectMavrikTheme as R } from "./src/components/echarts-renderer/mavrik-theme.js";
-import { hasHorizontalBars as M } from "./src/components/echarts-renderer/detect-horizontal-bars.js";
-import { WATERMARK_GRAPHIC as H, addWatermarkToOptions as I } from "./src/components/echarts-renderer/watermark-graphic.js";
-import { sanitizeChartOptionsForStaticRendering as _ } from "./src/components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
+import { EChartsRenderer as o } from "./components/echarts-renderer/echarts-renderer.js";
+import { EChartsThemeOption as a, isEChartsThemeOption as i } from "./components/echarts-renderer/echarts-theme-option.js";
+import { EChartsChartOption as s, isEChartsChartOption as h } from "./components/echarts-renderer/echarts-chart-option.js";
+import { useChartInstance as n } from "./components/echarts-renderer/use-chart-instance.js";
+import { MavrikChart as E } from "./components/echarts-renderer/mavrik-chart.js";
+import { MAVRIK_THEME as x, MAVRIK_THEME_HORIZONTAL as O, selectMavrikTheme as R } from "./components/echarts-renderer/mavrik-theme.js";
+import { hasHorizontalBars as M } from "./components/echarts-renderer/detect-horizontal-bars.js";
+import { WATERMARK_GRAPHIC as H, addWatermarkToOptions as I } from "./components/echarts-renderer/watermark-graphic.js";
+import { sanitizeChartOptionsForStaticRendering as _ } from "./components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
 export {
   s as EChartsChartOption,
   o as EChartsRenderer,

package/dist/components/echarts-renderer/mavrik-theme-horizontal.json.d.ts

@@ -136,9 +136,7 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": [
-          "#3A3D46"
-        ],
+        "color": ["#3A3D46"],
         "type": "dashed"
       }
     }
@@ -164,9 +162,7 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": [
-          "#3A3D46"
-        ],
+        "color": ["#3A3D46"],
         "type": "dashed"
       }
     }

package/dist/components/echarts-renderer/mavrik-theme.json.d.ts

@@ -136,9 +136,7 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": [
-          "#3A3D46"
-        ],
+        "color": ["#3A3D46"],
         "type": "dashed"
       }
     }
@@ -164,9 +162,7 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": [
-          "#3A3D46"
-        ],
+        "color": ["#3A3D46"],
         "type": "dashed"
       }
     }

package/dist/components/select/select.d.ts

@@ -1,3 +1,4 @@
+import { Select as SelectPrimitive } from 'radix-ui';
 /**
  * SelectItem is a wrapper around Radix's Select.Item component, meant to be used with the Select component.
  * It applies project-specific styling to the Radix's component.
@@ -6,7 +7,14 @@
  * - The trigger will display `textValue` when this item is selected
  * - The `children` will be displayed as custom content in the dropdown
  */
-export declare const SelectItem: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-select').SelectItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement | null>>;
+export declare const SelectItem: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement | null>>;
+export interface SelectProps extends SelectPrimitive.SelectProps {
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'small' | 'large';
+    className?: string;
+    contentClassName?: string;
+    placeholder?: string;
+}
 /**
  * Select is a wrapper around Radix's Select component.
  * It applies project-specific styling to the Radix's component.
@@ -14,10 +22,4 @@ export declare const SelectItem: import('react').ForwardRefExoticComponent<Omit<
  *
  * @see {@link https://radix-ui.com/primitives/docs/components/select}
  */
-export declare const Select: import('react').ForwardRefExoticComponent<{
-    variant?: "primary" | "secondary" | "ghost";
-    size?: "small" | "large";
-    className?: string;
-    contentClassName?: string;
-    placeholder?: string;
-} & import('@radix-ui/react-select').SelectProps & import('react').RefAttributes<HTMLButtonElement | null>>;
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement | null>>;

package/dist/{src/components → components}/select/select.js

@@ -1,15 +1,15 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { SelectItem as p, SelectItemText as u, Select as m, SelectTrigger as x, SelectValue as b, SelectIcon as f, SelectPortal as y, SelectContent as S, SelectScrollUpButton as w, SelectViewport as v, SelectScrollDownButton as N } from "../../../node_modules/.pnpm/@radix-ui_react-select@2.1.7_@types_react-dom@19.2.3_@types_react@19.2.6__@types_react@_6ddc7a756051e26689ab8a69ff12c731/node_modules/@radix-ui/react-select/dist/index.js";
-import { forwardRef as i } from "react";
-import { Icon as d } from "../icon/icon.js";
-import { twMerge as a } from "../../lib/tailwind-merge.js";
-const I = i(
-  ({ className: e, children: r, textValue: o, ...c }, s) => {
-    const l = o !== void 0 && o !== "";
-    return /* @__PURE__ */ n(
-      p,
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Select as r } from "radix-ui";
+import { forwardRef as g } from "react";
+import { Icon as i } from "../icon/icon.js";
+import { twMerge as c } from "../../lib/tailwind-merge.js";
+const u = g(
+  ({ className: e, children: o, textValue: n, ...s }, d) => {
+    const l = n !== void 0 && n !== "";
+    return /* @__PURE__ */ a(
+      r.Item,
       {
-        className: a(
+        className: c(
           "tg-button-small text-neutral-40 data-highlighted:text-neutral-30 relative flex cursor-pointer items-center select-none data-disabled:pointer-events-none data-disabled:text-neutral-50 data-disabled:line-through data-highlighted:bg-(--bg-hover-color) data-highlighted:outline-none data-[state=checked]:text-white",
           // corner radius:
           "rounded-[calc(var(--content-radius)-(var(--content-padding)))]",
@@ -17,29 +17,29 @@ const I = i(
           "px-(--item-padding-x) py-(--item-padding-y)",
           e
         ),
-        textValue: o,
-        ...c,
-        ref: s,
+        textValue: n,
+        ...s,
+        ref: d,
         children: [
-          /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t("span", { children: l ? o : r }) }),
-          l && r
+          /* @__PURE__ */ t(r.ItemText, { children: /* @__PURE__ */ t("span", { children: l ? n : o }) }),
+          l && o
         ]
       }
     );
   }
 );
-I.displayName = "SelectItem";
-const _ = i(
-  ({ variant: e = "primary", size: r = "large", placeholder: o, children: c, className: s, contentClassName: l, ...g }, h) => /* @__PURE__ */ n(m, { ...g, children: [
-    /* @__PURE__ */ n(
-      x,
+u.displayName = "SelectItem";
+const m = g(
+  ({ variant: e = "primary", size: o = "large", placeholder: n, children: s, className: d, contentClassName: l, ...h }, p) => /* @__PURE__ */ a(r.Root, { ...h, children: [
+    /* @__PURE__ */ a(
+      r.Trigger,
       {
-        ref: h,
-        className: a(
+        ref: p,
+        className: c(
           "group inline-flex items-center justify-between outline-none",
           // size:
-          r === "small" && "tg-caption-bold h-8 gap-2 rounded-lg px-2 py-1.5",
-          r === "large" && "gap-r6 tg-button-small h-9 rounded-xl px-4 py-2",
+          o === "small" && "tg-caption-bold h-8 gap-2 rounded-lg px-2 py-1.5",
+          o === "large" && "gap-r6 tg-button-small h-9 rounded-xl px-4 py-2",
           // variants:
           e === "primary" && "bg-neutral-60 focus:shadow-neutral-40 text-white",
           e === "secondary" && "border-neutral-55 bg-neutral-70 text-neutral-40 border",
@@ -52,17 +52,17 @@ const _ = i(
           e === "primary" && "focus:shadow-[0_0_0_2px]",
           e === "secondary" && "focus:border-neutral-10",
           e === "ghost" && "focus:text-neutral-10",
-          s
+          d
         ),
         children: [
-          /* @__PURE__ */ t(b, { placeholder: o }),
-          /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(
-            d,
+          /* @__PURE__ */ t(r.Value, { placeholder: n }),
+          /* @__PURE__ */ t(r.Icon, { children: /* @__PURE__ */ t(
+            i,
             {
               icon: "chevron",
-              className: a(
-                r === "small" && "size-2",
-                r === "large" && "-mr-1 size-3",
+              className: c(
+                o === "small" && "size-2",
+                o === "large" && "-mr-1 size-3",
                 e === "primary" && "text-white",
                 e === "secondary" && "text-neutral-40 group-hover:text-neutral-30",
                 e === "ghost" && "text-neutral-40 group-hover:text-neutral-10 group-focus:text-neutral-10"
@@ -72,12 +72,12 @@ const _ = i(
         ]
       }
     ),
-    /* @__PURE__ */ t(y, { children: /* @__PURE__ */ n(
-      S,
+    /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ a(
+      r.Content,
       {
-        className: a(
-          r === "small" && "[--content-padding:--spacing(1)] [--content-radius:--spacing(2.5)] [--item-padding-x:--spacing(2)] [--item-padding-y:--spacing(1.5)]",
-          r === "large" && "[--content-padding:--spacing(1.5)] [--content-radius:--spacing(4)] [--item-padding-x:--spacing(4)] [--item-padding-y:--spacing(2)]",
+        className: c(
+          o === "small" && "[--content-padding:--spacing(1)] [--content-radius:--spacing(2.5)] [--item-padding-x:--spacing(2)] [--item-padding-y:--spacing(1.5)]",
+          o === "large" && "[--content-padding:--spacing(1.5)] [--content-radius:--spacing(4)] [--item-padding-x:--spacing(4)] [--item-padding-y:--spacing(2)]",
           "rounded-(--content-radius)",
           // variants:
           e === "primary" && "[--bg-color:var(--color-neutral-60)] [--bg-hover-color:var(--color-neutral-55)]",
@@ -90,16 +90,16 @@ const _ = i(
         align: "end",
         sideOffset: 4,
         children: [
-          /* @__PURE__ */ t(w, { className: "flex h-6 cursor-default items-center justify-center bg-(--bg-color) text-white hover:bg-(--bg-hover-color)", children: /* @__PURE__ */ t(d, { icon: "chevron", className: "size-3 -scale-y-100 text-white" }) }),
-          /* @__PURE__ */ t(v, { className: "p-(--content-padding)", children: c }),
-          /* @__PURE__ */ t(N, { className: "flex h-6 cursor-default items-center justify-center bg-(--bg-color) text-white hover:bg-(--bg-hover-color)", children: /* @__PURE__ */ t(d, { icon: "chevron", className: "size-3 text-white" }) })
+          /* @__PURE__ */ t(r.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-(--bg-color) text-white hover:bg-(--bg-hover-color)", children: /* @__PURE__ */ t(i, { icon: "chevron", className: "size-3 -scale-y-100 text-white" }) }),
+          /* @__PURE__ */ t(r.Viewport, { className: "p-(--content-padding)", children: s }),
+          /* @__PURE__ */ t(r.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-(--bg-color) text-white hover:bg-(--bg-hover-color)", children: /* @__PURE__ */ t(i, { icon: "chevron", className: "size-3 text-white" }) })
         ]
       }
     ) })
   ] })
 );
-_.displayName = "Select";
+m.displayName = "Select";
 export {
-  _ as Select,
-  I as SelectItem
+  m as Select,
+  u as SelectItem
 };

package/dist/index.js

@@ -1,32 +1,32 @@
-import { AnimatedLoader as e } from "./src/components/animated-loader/animated-loader.js";
-import { Badge as p } from "./src/components/badge/badge.js";
-import { Box as x } from "./src/components/box/box.js";
-import { Button as n } from "./src/components/button/button.js";
-import { ClientModal as d } from "./src/components/client-modal/client-modal.js";
-import { Collapsible as i, CollapsibleContent as u, CollapsibleTrigger as c } from "./src/components/collapsible/collapsible.js";
-import { CopyButton as B } from "./src/components/copy-button/copy-button.js";
-import { DecoratedIcon as C } from "./src/components/decorated-icon/decorated-icon.js";
-import { DropdownMenu as T, DropdownMenuItem as s } from "./src/components/dropdown-menu/dropdown-menu.js";
-import { ErrorBoundary as M } from "./src/components/error-boundary/error-boundary.js";
-import { ScrollArea as b } from "./src/components/scroll-area/index.js";
-import { Icon as h } from "./src/components/icon/icon.js";
-import { IconButton as y } from "./src/components/icon-button/icon-button.js";
-import { InputButton as L } from "./src/components/input-button/input-button.js";
-import { MountSvgSprite as k } from "./src/components/mount-svg-sprite/mount-svg-sprite.js";
-import { NotFoundComponent as F } from "./src/components/not-found-component/not-found-component.js";
-import { PagePadding as j } from "./src/components/page-padding/page-padding.js";
-import { ProtocolLogo as z } from "./src/components/protocol-logo/protocol-logo.js";
-import { Select as H, SelectItem as J } from "./src/components/select/select.js";
-import { Skeleton as O } from "./src/components/skeleton/skeleton.js";
-import { Switch as R } from "./src/components/switch/switch.js";
-import { TextInput as W } from "./src/components/text-input/text-input.js";
-import { Tooltip as Y } from "./src/components/tooltip/tooltip.js";
-import { TooltipProvider as _ } from "./src/components/tooltip-provider/tooltip-provider.js";
-import { TouchTarget as oo } from "./src/components/touch-target/touch-target.js";
-import { twMerge as eo } from "./src/lib/tailwind-merge.js";
-import { UserDropdown as po } from "./src/components/user-dropdown/user-dropdown.js";
-import { UserDropdownMobile as xo } from "./src/components/user-dropdown-mobile/user-dropdown-mobile.js";
-import { useScrollToBottom as no } from "./src/hooks/use-scroll-to-bottom.js";
+import { AnimatedLoader as e } from "./components/animated-loader/animated-loader.js";
+import { Badge as p } from "./components/badge/badge.js";
+import { Box as x } from "./components/box/box.js";
+import { Button as n } from "./components/button/button.js";
+import { ClientModal as d } from "./components/client-modal/client-modal.js";
+import { Collapsible as i, CollapsibleContent as u, CollapsibleTrigger as c } from "./components/collapsible/collapsible.js";
+import { CopyButton as B } from "./components/copy-button/copy-button.js";
+import { DecoratedIcon as C } from "./components/decorated-icon/decorated-icon.js";
+import { DropdownMenu as T, DropdownMenuItem as s } from "./components/dropdown-menu/dropdown-menu.js";
+import { ErrorBoundary as M } from "./components/error-boundary/error-boundary.js";
+import { ScrollArea as b } from "./components/scroll-area/index.js";
+import { Icon as h } from "./components/icon/icon.js";
+import { IconButton as y } from "./components/icon-button/icon-button.js";
+import { InputButton as L } from "./components/input-button/input-button.js";
+import { MountSvgSprite as k } from "./components/mount-svg-sprite/mount-svg-sprite.js";
+import { NotFoundComponent as F } from "./components/not-found-component/not-found-component.js";
+import { PagePadding as j } from "./components/page-padding/page-padding.js";
+import { ProtocolLogo as z } from "./components/protocol-logo/protocol-logo.js";
+import { Select as H, SelectItem as J } from "./components/select/select.js";
+import { Skeleton as O } from "./components/skeleton/skeleton.js";
+import { Switch as R } from "./components/switch/switch.js";
+import { TextInput as W } from "./components/text-input/text-input.js";
+import { Tooltip as Y } from "./components/tooltip/tooltip.js";
+import { TooltipProvider as _ } from "./components/tooltip-provider/tooltip-provider.js";
+import { TouchTarget as oo } from "./components/touch-target/touch-target.js";
+import { twMerge as eo } from "./lib/tailwind-merge.js";
+import { UserDropdown as po } from "./components/user-dropdown/user-dropdown.js";
+import { UserDropdownMobile as xo } from "./components/user-dropdown-mobile/user-dropdown-mobile.js";
+import { useScrollToBottom as no } from "./hooks/use-scroll-to-bottom.js";
 export {
   e as AnimatedLoader,
   p as Badge,

package/dist/lib/render-chart-to-image.d.ts

@@ -1,16 +1,3 @@
-import { EChartsInitOpts } from 'echarts';
-/**
- * Minimal ECharts interface for server-side rendering.
- * Only includes the methods needed by renderChartToImage.
- */
-export interface EChartsModule {
-    registerTheme: (name: string, theme: Record<string, unknown>) => void;
-    init: (dom?: any, theme?: string | Record<string, unknown> | null, opts?: EChartsInitOpts) => EChartsInstance;
-}
-interface EChartsInstance {
-    setOption: (option: unknown) => void;
-    dispose: () => void;
-}
 export interface RenderChartToImageOptions {
     option: unknown;
     theme?: Record<string, unknown>;
@@ -46,4 +33,3 @@ export interface RenderChartToImageOptions {
  * ```
  */
 export declare function renderChartToImage({ option, theme, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;
-export {};

package/dist/{src/lib → lib}/render-chart-to-image.js

@@ -1,16 +1,16 @@
+import * as p from "echarts";
 import { randomUUID as y } from "node:crypto";
 import e from "node:path";
-import { fileURLToPath as g } from "node:url";
-import { Image as h, Canvas as O, FontLibrary as b } from "skia-canvas";
+import { fileURLToPath as O } from "node:url";
+import { Image as b, Canvas as g, FontLibrary as h } from "skia-canvas";
 import { calculateTitleLayout as j } from "../components/echarts-renderer/calculate-title-layout.js";
 import { addWatermarkToOptions as P } from "../components/echarts-renderer/watermark-graphic.js";
-import { getEChartsModule as T } from "./get-echarts-module.js";
-globalThis.Image = h;
+globalThis.Image = b;
 let s = !1;
-function C() {
+function T() {
   if (!s)
     try {
-      const t = e.dirname(g(import.meta.url)), r = [
+      const t = e.dirname(O(import.meta.url)), r = [
         // dist/src/lib -> dist/fonts (packaged) OR src/lib -> src/fonts (dev)
         e.resolve(t, "../../fonts"),
         // dist/lib -> dist/fonts (packaged)
@@ -19,7 +19,7 @@ function C() {
       let n;
       for (const o of r)
         try {
-          b.use("Poppins", [
+          h.use("Poppins", [
             e.join(o, "Poppins-Regular.ttf"),
             e.join(o, "Poppins-Medium.ttf"),
             e.join(o, "Poppins-SemiBold.ttf"),
@@ -34,7 +34,7 @@ function C() {
       console.warn("Failed to register Poppins fonts, charts will use fallback font:", t), s = !0;
     }
 }
-const E = /* @__PURE__ */ new Set([
+const I = /* @__PURE__ */ new Set([
   "aria",
   // Tries to set DOM attributes which node-canvas doesn't implement
   "toolbox",
@@ -46,15 +46,15 @@ const E = /* @__PURE__ */ new Set([
   "axisPointer"
   // Crosshair on hover
 ]);
-function I(t) {
+function v(t) {
   if (!t || typeof t != "object" || Array.isArray(t))
     return { animation: !1 };
   const r = Object.fromEntries(
-    Object.entries(t).filter(([n]) => !E.has(n))
+    Object.entries(t).filter(([n]) => !I.has(n))
   );
   return r.animation = !1, r;
 }
-function w({
+function S({
   option: t,
   theme: r,
   includeWatermark: n = !1,
@@ -62,23 +62,22 @@ function w({
   height: a = 600,
   devicePixelRatio: m = 2
 }) {
-  const f = T();
-  C();
+  T();
   let i;
-  r && typeof r == "object" && (i = `theme-${y()}`, f.registerTheme(i, r));
-  const c = new O(o, a), l = f.init(c, i, {
+  r && typeof r == "object" && (i = `theme-${y()}`, p.registerTheme(i, r));
+  const f = new g(o, a), c = p.init(f, i, {
     renderer: "canvas",
     devicePixelRatio: m,
     width: o,
     height: a
   });
   try {
-    const u = I(t), p = j(u, o, r), d = n ? P(p) : p;
-    return l.setOption(d), c.toBufferSync("png");
+    const u = v(t), l = j(u, o, r), d = n ? P(l) : l;
+    return c.setOption(d), f.toBufferSync("png");
   } finally {
-    l.dispose();
+    c.dispose();
   }
 }
 export {
-  w as renderChartToImage
+  S as renderChartToImage
 };

package/dist/server.js

@@ -1,6 +1,6 @@
-import { renderChartToImage as o } from "./src/lib/render-chart-to-image.js";
-import { renderMavrikChartToImage as a } from "./src/lib/render-mavrik-chart-to-image.js";
-import { sanitizeChartOptionsForStaticRendering as n } from "./src/components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
+import { renderChartToImage as o } from "./lib/render-chart-to-image.js";
+import { renderMavrikChartToImage as a } from "./lib/render-mavrik-chart-to-image.js";
+import { sanitizeChartOptionsForStaticRendering as n } from "./components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
 export {
   o as renderChartToImage,
   a as renderMavrikChartToImage,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.56.0",
+  "version": "1.57.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
@@ -28,7 +28,7 @@
     "typecheck": "tsc -b --noEmit",
     "test": "vitest run",
     "prepublishOnly": "pnpm build",
-    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts"
+    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts && prettier --write src/components/echarts-renderer/mavrik-theme*.json"
   },
   "exports": {
     ".": {
@@ -50,8 +50,6 @@
     "node": ">=22.14.0"
   },
   "dependencies": {
-    "@radix-ui/react-select": "^2.1.7",
-    "echarts": "^6",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",
@@ -97,6 +95,7 @@
   },
   "peerDependencies": {
     "@radix-ui/react-compose-refs": "^1",
+    "echarts": "^6",
     "skia-canvas": "^3",
     "radix-ui": "^1",
     "react": "^19",

package/dist/lib/get-echarts-module.d.ts

@@ -1 +0,0 @@
-export declare function getEChartsModule(): typeof import('echarts');