@keboola/design 2.1.0 → 3.1.0

package/dist/mermaid.js

@@ -1,15 +1,33 @@
-import { useId, useState, useRef, useEffect, useCallback } from 'react';
+import { createContext, forwardRef, useId, useState, useRef, useEffect, useMemo, useCallback, use } from 'react';
 import { renderMermaidSVG } from 'beautiful-mermaid';
 import colors from '@keboola/tailwind-config/colors';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Root as Root$1, Trigger, Portal, Content } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { keboolaLegacy } from '@keboola/brand-registry';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import DOMPurify from 'dompurify';
 import { Root, Slottable } from '@radix-ui/react-slot';
-import { Minimize2, Maximize2, Loader2, Copy } from 'lucide-react';
+import * as lucide_react_star from 'lucide-react';
 
-// src/blocks/MermaidDiagram/MermaidDiagram.tsx
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget);
 var twMerge = extendTailwindMerge({
   prefix: "tw-"
 });
@@ -25,17 +43,49 @@ var keyCodes = {
   ENTER: "Enter",
   SPACE: " "
 };
+var ThemeContext = createContext(null);
+
+// src/components/internal/useIsLegacyBrand.ts
+var useIsLegacyBrand = () => {
+  const context = use(ThemeContext);
+  return context === null || context.brand.id === keboolaLegacy.id;
+};
 var tooltipVariants = cva(
   [
     "tailwindcss-preflight",
     "tw-inline-block",
-    "tw-rounded",
-    "tw-bg-neutral-800",
-    "tw-text-white",
     "tw-break-anywhere",
     "tw-max-h-96",
     "tw-overflow-y-auto",
-    "tw-z-[1060]"
+    "tw-z-[1060]",
+    // legacy (dark) chrome — default
+    "tw-rounded",
+    "tw-bg-neutral-800",
+    "tw-text-white",
+    // argo chrome overrides — semantic floating-panel tokens
+    "data-[argo=true]:tw-rounded-2xl",
+    "data-[argo=true]:tw-border",
+    "data-[argo=true]:tw-border-solid",
+    "data-[argo=true]:tw-border-border",
+    "data-[argo=true]:tw-bg-popover",
+    "data-[argo=true]:tw-text-popover-foreground",
+    "data-[argo=true]:tw-shadow-md",
+    // argo open animation
+    "data-[argo=true]:data-[state=delayed-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=instant-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=instant-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95",
+    "data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95",
+    // argo closed animation
+    "data-[argo=true]:data-[state=closed]:tw-animate-out",
+    "data-[argo=true]:data-[state=closed]:tw-fade-out-0",
+    "data-[argo=true]:data-[state=closed]:tw-zoom-out-95",
+    // argo position animation
+    "data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2",
+    "data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2",
+    "data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2",
+    "data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2"
   ],
   {
     defaultVariants: {
@@ -68,6 +118,7 @@ var tooltipVariants = cva(
 var TooltipContent = ({
   className,
   variant,
+  argo,
   keepOpenOnPointerDownOutside = false,
   children,
   onPointerDownOutside,
@@ -77,6 +128,8 @@ var TooltipContent = ({
   placement = "right",
   ...rest
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handlePointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -85,7 +138,8 @@ var TooltipContent = ({
     Content,
     {
       ...rest,
-      "data-tooltip-content": true,
+      "data-tooltip-content": renderArgo ? void 0 : true,
+      "data-argo": renderArgo,
       sideOffset,
       collisionPadding,
       onPointerDownOutside: handlePointerDownOutside,
@@ -144,6 +198,7 @@ var Tooltip = ({
   className,
   keepOpenOnTriggerClick = false,
   variant,
+  argo,
   placement = "right",
   forceHide = false,
   forceShow = false,
@@ -182,6 +237,7 @@ var Tooltip = ({
           {
             className,
             variant: resolvedVariant,
+            argo,
             placement,
             keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
             children: tooltip
@@ -208,7 +264,7 @@ var ANIMATION_CLASS_NAME = cn(
   "tw-relative",
   "tw-overflow-hidden",
   "tw-pointer-events-none",
-  "tw-bg-neutral-150",
+  "tw-bg-muted",
   // before
   'before:tw-content-[""]',
   "before:tw-opacity-100",
@@ -233,6 +289,33 @@ var Skeleton = ({ height = "md", className, count = 1 }) => {
     key
   )) });
 };
+
+// src/icons/index.ts
+var icons_exports = {};
+__export(icons_exports, {
+  Keboola: () => Keboola
+});
+__reExport(icons_exports, lucide_react_star);
+var Keboola = forwardRef(
+  ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 300 512",
+      fill: color,
+      className: cn("lucide", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M152 320C79.7 320 24.5 233.9 24.5 124.7C24.5 15.6 70.5 0 152 0s123.6 15.6 123.6 124.7C275.5 233.9 217.7 320 152 320zm-8.7-50.5c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm55.7 0c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm68.9 115.1c10.2 9.3 20.2 20.5 29 35c5.9 9.7 2.6 22.1-7.5 27.8c-3.4 1.9-7.1 2.8-10.7 2.8c-7.2 0-14.3-3.6-18.3-10c-6.8-11.1-13.8-18.9-21.7-26.1c-7.3-6.7-15.6-12.7-24.9-19.5c-.7-.5-1.4-1-2.1-1.5c-5-3.6-10-6.8-14.9-9.4c.6 1 1.2 2.1 1.8 3.2c14.4 26.4 29.2 63.1 29.2 104.9c0 11.2-9.5 20.3-21.2 20.3c-11.7 0-21.2-9.1-21.2-20.3c.1-31.8-11.6-62.3-23.8-84.9c-4-7.4-8-13.9-11.6-19.3c-3.4 5.2-7.2 11.3-11 18.3c-12.5 22.7-24.5 53.8-24.4 86c0 11.2-9.5 20.3-21.2 20.3s-21.2-9.1-21.2-20.3c.1-41.8 14.9-78.4 29.2-104.9c.6-1.1 1.2-2.1 1.8-3.2c-5 2.7-9.9 5.8-14.9 9.4c-.6 .5-1.3 .9-1.9 1.4c-9.5 6.9-17.8 12.9-25.1 19.7c-7.9 7.2-14.9 15.1-21.7 26.1c-5.9 9.7-18.9 12.9-29 7.2C.5 441.8-2.9 429.3 3.1 419.7c8.9-14.4 18.8-25.7 29-35c9.2-8.4 18.5-15.1 27.6-21.7c1-.7 2-1.4 3-2.2c4.7-3.5 9.6-6.7 14.6-9.6c-5-2.9-9.8-6.1-14.6-9.6C39.8 325 19.9 302.5 3.1 275.1c-5.9-9.7-2.6-22.1 7.5-27.8c10.1-5.7 23.1-2.5 29 7.2c14.6 23.7 31.1 42 48.7 54.9c18.9 13.7 37.4 20.5 56.5 21.5c1.7-.1 3.5-.1 5.2-.1c1.8 0 3.5 .1 5.2 .1c0 0 0 0 0 0c19.1-1.1 37.6-7.9 56.5-21.5c17.6-12.8 34.2-31.2 48.7-54.9c6-9.7 18.9-12.9 29-7.2c10.1 5.7 13.4 18.1 7.5 27.8c-16.8 27.4-36.7 49.9-59.6 66.6c-4.7 3.5-9.6 6.7-14.5 9.6c4.9 2.9 9.8 6.1 14.5 9.6c.9 .7 1.8 1.3 2.7 2c9.2 6.7 18.5 13.5 27.9 22z" }),
+        children
+      ]
+    }
+  )
+);
+Keboola.displayName = "Keboola";
 var variants = cva(
   [
     "tailwindcss-preflight",
@@ -420,6 +503,8 @@ var argoVariants = cva(
     "tw-bg-clip-padding",
     // anchor support
     "!tw-no-underline",
+    "aria-disabled:tw-cursor-not-allowed",
+    "aria-disabled:tw-opacity-50",
     // icon
     "tw-shrink-0",
     "[&_svg]:tw-pointer-events-none",
@@ -522,14 +607,11 @@ var Button = ({
   block = false,
   ...buttonProps
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const Comp = asChild ? Root : "button";
   const isIconOnly = String(size).startsWith("icon");
-  const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
-    size,
-    variant,
-    block,
-    className
-  });
+  const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
   const handleClick = (event) => {
     const isAnchor = event.currentTarget.tagName === "A";
     if (isAnchor && disabled) {
@@ -551,7 +633,7 @@ var Button = ({
       onClick: handleClick,
       className: cn(classNames),
       children: [
-        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+        isLoading && /* @__PURE__ */ jsx(icons_exports.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
         /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
@@ -620,7 +702,7 @@ var Clipboard = ({
     )
   ] });
 };
-var DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
+var DEFAULT_ICON = /* @__PURE__ */ jsx(icons_exports.Copy, {});
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -650,6 +732,10 @@ var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
 var ZoomableSvg = ({ html, copyText, className }) => {
+  const safeHtml = useMemo(
+    () => DOMPurify.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
+    [html]
+  );
   const containerRef = useRef(null);
   const [scale, setScale] = useState(1);
   const [translate, setTranslate] = useState({ x: 0, y: 0 });
@@ -745,7 +831,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
                   isFullscreen && "tw-h-full [&>svg]:tw-h-full"
                 ),
                 style: { transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` },
-                dangerouslySetInnerHTML: { __html: html }
+                dangerouslySetInnerHTML: { __html: safeHtml }
               }
             )
           }
@@ -782,7 +868,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                       onClick: () => setIsFullscreen((f) => !f),
                       argo: true,
-                      children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "tw-size-4" })
+                      children: isFullscreen ? /* @__PURE__ */ jsx(icons_exports.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.Maximize2, { className: "tw-size-4" })
                     }
                   )
                 }
@@ -798,7 +884,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
       "div",
       {
         role: "presentation",
-        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-neutral-50 tw-p-4",
+        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
         onClick: stopPropagation,
         children: diagramContent
       }
@@ -808,13 +894,18 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     "div",
     {
       className: cn(
-        "tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-150 tw-bg-neutral-50",
+        "tw-overflow-hidden tw-rounded-md tw-border tw-border-border tw-bg-muted",
         className
       ),
       children: diagramContent
     }
   );
 };
+var PRIMARY_FALLBACK_CHANNELS = "31 143 255";
+var resolvePrimary = () => {
+  const channels = typeof document === "undefined" ? PRIMARY_FALLBACK_CHANNELS : getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim() || PRIMARY_FALLBACK_CHANNELS;
+  return `rgb(${channels})`;
+};
 var mermaidPromise = null;
 var getMermaid = () => {
   if (!mermaidPromise) {
@@ -863,7 +954,7 @@ var getMermaid = () => {
           taskTextColor: colors.neutral[800],
           taskTextDarkColor: colors.neutral[800],
           taskTextLightColor: colors.neutral[800],
-          activeTaskBorderColor: colors.primary.DEFAULT,
+          activeTaskBorderColor: resolvePrimary(),
           activeTaskBkgColor: colors.secondary[200],
           doneTaskBorderColor: colors.primary[600],
           doneTaskBkgColor: colors.primary[100],
@@ -915,46 +1006,28 @@ var makeResponsive = (svgString) => {
 };
 var RENDER_DEBOUNCE_MS = 300;
 var svgCache = /* @__PURE__ */ new Map();
+var resolveSyncSvg = (code) => {
+  const cached = svgCache.get(code);
+  if (cached) return cached;
+  const fast = tryFastRender(code);
+  if (fast) svgCache.set(code, fast);
+  return fast;
+};
 var MermaidDiagram = ({ code }) => {
   const id = useId();
-  const [svg, setSvg] = useState(() => {
-    const cached = svgCache.get(code);
-    if (cached) return cached;
-    const fast = tryFastRender(code);
-    if (fast) {
-      svgCache.set(code, fast);
-      return fast;
-    }
-    return null;
-  });
+  const [svg, setSvg] = useState(() => resolveSyncSvg(code));
   const [renderFailed, setRenderFailed] = useState(false);
   const debounceRef = useRef(null);
   const renderIdRef = useRef(0);
   const [prevCode, setPrevCode] = useState(code);
   if (code !== prevCode) {
     setPrevCode(code);
-    const cached = svgCache.get(code);
-    const fast = cached ?? tryFastRender(code);
-    if (fast && !cached) svgCache.set(code, fast);
-    setSvg(fast);
+    setSvg(resolveSyncSvg(code));
     setRenderFailed(false);
   }
   useEffect(() => {
-    if (svgCache.has(code)) {
-      setSvg(svgCache.get(code));
-      setRenderFailed(false);
-      return;
-    }
-    const fastResult = tryFastRender(code);
-    if (fastResult) {
-      svgCache.set(code, fastResult);
-      setSvg(fastResult);
-      setRenderFailed(false);
-      return;
-    }
-    setSvg(null);
+    if (svgCache.has(code)) return;
     const currentRenderId = ++renderIdRef.current;
-    setRenderFailed(false);
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
     }