@keboola/design 3.0.0 → 3.1.1

package/dist/mermaid.js

@@ -1,11 +1,13 @@
-import { forwardRef, 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 { 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 * as lucide_react_star from 'lucide-react';
 
@@ -41,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: {
@@ -84,6 +118,7 @@ var tooltipVariants = cva(
 var TooltipContent = ({
   className,
   variant,
+  argo,
   keepOpenOnPointerDownOutside = false,
   children,
   onPointerDownOutside,
@@ -93,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);
@@ -101,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,
@@ -160,6 +198,7 @@ var Tooltip = ({
   className,
   keepOpenOnTriggerClick = false,
   variant,
+  argo,
   placement = "right",
   forceHide = false,
   forceShow = false,
@@ -198,6 +237,7 @@ var Tooltip = ({
           {
             className,
             variant: resolvedVariant,
+            argo,
             placement,
             keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
             children: tooltip
@@ -224,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",
@@ -463,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",
@@ -565,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) {
@@ -693,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 });
@@ -788,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 }
               }
             )
           }
@@ -841,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
       }
@@ -851,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) {
@@ -906,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],
@@ -958,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);
     }