@keboola/design 4.4.0 → 5.1.0

package/dist/testing.js

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
-import { keboola } from '@keboola/brand-registry';
-import { createContext, use, useState, useEffect } from 'react';
+import { keboolaLegacySidebar, keboolaLegacyTopnav, keboola } from '@keboola/brand-registry';
+import { createContext, useMemo, useState, useCallback, useEffect, useInsertionEffect } from 'react';
 import { Provider } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -8,7 +8,50 @@ import 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 
 // src/testing/renderWithTheme.tsx
-var ThemeContext = createContext(null);
+
+// src/components/ThemeProvider/utils.ts
+var createTheme = (brand) => ({
+  id: brand.id,
+  name: brand.name,
+  shell: brand.shell,
+  logo: brand.logo
+});
+var createCssVars = () => {
+  const vars = {};
+  return {
+    set: (name, value) => {
+      if (value !== void 0) vars[name] = value;
+    },
+    expose: () => ({ ...vars })
+  };
+};
+
+// src/components/ThemeProvider/defaults.ts
+var keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
+var DEFAULT_COLOR_SCHEME = "light";
+var DEFAULT_BRAND_ID = "design-system";
+var defaultBrand = {
+  id: DEFAULT_BRAND_ID,
+  name: "Design System",
+  shell: "sidebar",
+  theme: {}
+};
+var defaultTheme = createTheme(defaultBrand);
+var DEFAULT_BRANDS = [];
+
+// src/components/ThemeProvider/context.tsx
+var noop = () => void 0;
+var defaultContext = {
+  scheme: DEFAULT_COLOR_SCHEME,
+  resolvedScheme: DEFAULT_COLOR_SCHEME,
+  setScheme: noop,
+  brandId: defaultTheme.id,
+  setBrand: noop,
+  themes: [defaultTheme],
+  currentTheme: defaultTheme
+};
+var ThemeContext = createContext(defaultContext);
+var ArgoDesignContext = createContext(true);
 cva(
   [
     "tailwindcss-preflight",
@@ -89,132 +132,216 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsx("svg", { width: "0", height: "0",
     /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#5b2cb8" })
   ] })
 ] }) });
-
-// src/components/ThemeProvider/brandToCssVars.ts
-var brandToCssVars = (brand, resolvedMode) => {
-  const vars = {};
-  const colors = resolvedMode === "dark" ? brand.colorsDark : brand.colors;
-  if (colors) {
-    vars["--color-background"] = colors.background;
-    vars["--color-foreground"] = colors.foreground;
-    vars["--color-muted"] = colors.muted;
-    vars["--color-muted-foreground"] = colors.mutedForeground;
-    vars["--color-border"] = colors.border;
-    vars["--color-primary"] = colors.primary;
-    vars["--color-primary-foreground"] = colors.primaryForeground;
-    vars["--color-destructive"] = colors.destructive;
-    vars["--color-destructive-foreground"] = colors.destructiveForeground;
-    if (colors.accent !== void 0) vars["--color-accent"] = colors.accent;
-    if (colors.accentForeground !== void 0)
-      vars["--color-accent-foreground"] = colors.accentForeground;
-  }
-  const sidebar = resolvedMode === "dark" ? brand.sidebarColorsDark : brand.sidebarColors;
-  if (sidebar) {
-    const sidebarVars = {
-      "--color-sidebar": sidebar.sidebar,
-      "--color-sidebar-foreground": sidebar.sidebarForeground,
-      "--color-sidebar-primary": sidebar.sidebarPrimary,
-      "--color-sidebar-primary-foreground": sidebar.sidebarPrimaryForeground,
-      "--color-sidebar-accent": sidebar.sidebarAccent,
-      "--color-sidebar-accent-foreground": sidebar.sidebarAccentForeground,
-      "--color-sidebar-border": sidebar.sidebarBorder,
-      "--color-sidebar-ring": sidebar.sidebarRing
-    };
-    for (const [name, value] of Object.entries(sidebarVars)) {
-      if (value !== void 0) vars[name] = value;
-    }
-  }
-  const fontFamily = brand.typography?.fontFamily?.trim();
-  if (fontFamily) {
-    vars["--font-sans"] = fontFamily;
-  }
-  if (brand.radii) {
-    vars["--radius-sm"] = brand.radii.sm;
-    vars["--radius-md"] = brand.radii.md;
-    vars["--radius-lg"] = brand.radii.lg;
-  }
-  return vars;
+var BRAND_ATTRIBUTE = "data-brand";
+var useBrandState = ({
+  defaultBrandId: defaultBrand2 = DEFAULT_BRAND_ID,
+  brandId: controlledBrand,
+  onBrandIdChange: onBrandChange
+} = {}) => {
+  const [uncontrolledBrand, setUncontrolledBrand] = useState(defaultBrand2);
+  const isControlled = controlledBrand !== void 0;
+  const brandId = isControlled ? controlledBrand : uncontrolledBrand;
+  const setBrand = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledBrand(next);
+      onBrandChange?.(next);
+    },
+    [isControlled, onBrandChange]
+  );
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute(BRAND_ATTRIBUTE, brandId);
+  }, [brandId]);
+  return { brandId, setBrand };
 };
 var DARK_QUERY = "(prefers-color-scheme: dark)";
-var systemMode = () => {
+var THEME_ATTRIBUTE = "data-theme";
+var getSystemColorScheme = () => {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
   return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
 };
-var ThemeProvider = ({
-  brand = keboola,
-  setBrand,
-  colorScheme = "light",
-  children
-}) => {
-  const parent = use(ThemeContext);
-  const isRoot = parent === null;
-  const [systemResolved, setSystemResolved] = useState(systemMode);
+var useColorSchemeState = ({
+  defaultScheme = DEFAULT_COLOR_SCHEME,
+  scheme: propScheme,
+  onSchemeChange
+} = {}) => {
+  const [uncontrolledScheme, setUncontrolledScheme] = useState(defaultScheme);
+  const [systemScheme, setSystemScheme] = useState(getSystemColorScheme);
+  const isControlled = propScheme !== void 0;
+  const scheme = isControlled ? propScheme : uncontrolledScheme;
+  const setScheme = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledScheme(next);
+      onSchemeChange?.(next);
+    },
+    [isControlled, onSchemeChange]
+  );
   useEffect(() => {
-    if (!isRoot || colorScheme !== "system") return;
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const mql = window.matchMedia(DARK_QUERY);
-    const onChange = (event) => setSystemResolved(event.matches ? "dark" : "light");
-    setSystemResolved(mql.matches ? "dark" : "light");
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [isRoot, colorScheme]);
-  const ownMode = colorScheme === "system" ? systemResolved : colorScheme;
-  const resolvedMode = isRoot ? ownMode : parent.resolvedMode;
-  useEffect(() => {
-    if (!isRoot || typeof document === "undefined") return;
-    const root = document.documentElement;
-    const previous = root.getAttribute("data-theme");
-    root.setAttribute("data-theme", resolvedMode);
-    return () => {
-      if (root.getAttribute("data-theme") !== resolvedMode) return;
-      if (previous === null) {
-        root.removeAttribute("data-theme");
-      } else {
-        root.setAttribute("data-theme", previous);
-      }
-    };
-  }, [isRoot, resolvedMode]);
+    const mq = window.matchMedia(DARK_QUERY);
+    const onChange = () => setSystemScheme(mq.matches ? "dark" : "light");
+    onChange();
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  const resolvedScheme = scheme === "system" ? systemScheme : scheme;
   useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute(THEME_ATTRIBUTE, resolvedScheme);
+  }, [resolvedScheme]);
+  return { scheme, resolvedScheme, setScheme };
+};
+var brandThemeToTokens = (theme, scheme) => ({
+  colors: scheme === "dark" ? theme.colorsDark : theme.colors,
+  typography: theme.typography,
+  radii: theme.radii,
+  // Scheme-independent — the same values apply in light and dark.
+  shadows: theme.shadows,
+  spacing: theme.spacing,
+  motion: theme.motion,
+  gradient: theme.gradient
+});
+var tokensToCssVars = ({
+  colors,
+  typography,
+  radii,
+  shadows,
+  spacing,
+  motion,
+  gradient
+}) => {
+  const vars = createCssVars();
+  vars.set("--color-background", colors?.background);
+  vars.set("--color-foreground", colors?.foreground);
+  vars.set("--color-muted", colors?.muted);
+  vars.set("--color-muted-foreground", colors?.mutedForeground);
+  vars.set("--color-border", colors?.border);
+  vars.set("--color-input", colors?.input);
+  vars.set("--color-ring", colors?.ring);
+  vars.set("--color-ring-offset", colors?.ringOffset);
+  vars.set("--color-primary", colors?.primary);
+  vars.set("--color-primary-foreground", colors?.primaryForeground);
+  vars.set("--color-secondary", colors?.secondary);
+  vars.set("--color-secondary-foreground", colors?.secondaryForeground);
+  vars.set("--color-accent", colors?.accent);
+  vars.set("--color-accent-foreground", colors?.accentForeground);
+  vars.set("--color-card", colors?.card);
+  vars.set("--color-card-foreground", colors?.cardForeground);
+  vars.set("--color-popover", colors?.popover);
+  vars.set("--color-popover-foreground", colors?.popoverForeground);
+  vars.set("--color-destructive", colors?.destructive);
+  vars.set("--color-destructive-foreground", colors?.destructiveForeground);
+  vars.set("--color-success", colors?.success);
+  vars.set("--color-success-foreground", colors?.successForeground);
+  vars.set("--color-warning", colors?.warning);
+  vars.set("--color-warning-foreground", colors?.warningForeground);
+  vars.set("--color-info", colors?.info);
+  vars.set("--color-info-foreground", colors?.infoForeground);
+  vars.set("--color-chart-1", colors?.chart?.chart1);
+  vars.set("--color-chart-2", colors?.chart?.chart2);
+  vars.set("--color-chart-3", colors?.chart?.chart3);
+  vars.set("--color-chart-4", colors?.chart?.chart4);
+  vars.set("--color-chart-5", colors?.chart?.chart5);
+  vars.set("--color-sidebar", colors?.sidebar?.sidebar);
+  vars.set("--color-sidebar-foreground", colors?.sidebar?.sidebarForeground);
+  vars.set("--color-sidebar-primary", colors?.sidebar?.sidebarPrimary);
+  vars.set("--color-sidebar-primary-foreground", colors?.sidebar?.sidebarPrimaryForeground);
+  vars.set("--color-sidebar-accent", colors?.sidebar?.sidebarAccent);
+  vars.set("--color-sidebar-accent-foreground", colors?.sidebar?.sidebarAccentForeground);
+  vars.set("--color-sidebar-border", colors?.sidebar?.sidebarBorder);
+  vars.set("--color-sidebar-ring", colors?.sidebar?.sidebarRing);
+  vars.set("--font-sans", typography?.fontFamily?.trim() || void 0);
+  vars.set("--font-display", typography?.fontDisplay?.trim() || void 0);
+  vars.set("--font-mono", typography?.fontMono?.trim() || void 0);
+  vars.set("--radius-sm", radii?.sm);
+  vars.set("--radius-md", radii?.md);
+  vars.set("--radius-lg", radii?.lg);
+  vars.set("--shadow-sm", shadows?.sm);
+  vars.set("--shadow-md", shadows?.md);
+  vars.set("--shadow-lg", shadows?.lg);
+  vars.set("--shadow-lift", shadows?.lift);
+  vars.set("--space-gutter", spacing?.gutter);
+  vars.set("--space-inset", spacing?.inset);
+  vars.set("--motion-duration", motion?.duration);
+  vars.set("--motion-easing", motion?.easing);
+  vars.set("--gradient-brand", gradient?.brand);
+  return vars.expose();
+};
+var setTokens = (node, vars) => {
+  for (const [name, value] of Object.entries(vars)) {
+    node.style.setProperty(name, value);
+  }
+};
+var removeTokens = (node, vars) => {
+  for (const name of Object.keys(vars)) {
+    node.style.removeProperty(name);
+  }
+};
+var useThemeTokens = (tokens) => {
+  useInsertionEffect(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
-    const previousBrand = root.getAttribute("data-brand");
-    const vars = brandToCssVars(brand, resolvedMode);
-    const previousValues = {};
-    for (const name of Object.keys(vars)) {
-      previousValues[name] = root.style.getPropertyValue(name);
-    }
-    root.setAttribute("data-brand", brand.id);
-    for (const [name, value] of Object.entries(vars)) {
-      root.style.setProperty(name, value);
-    }
-    return () => {
-      for (const [name, previousValue] of Object.entries(previousValues)) {
-        if (root.style.getPropertyValue(name) !== vars[name]) continue;
-        if (previousValue === "") {
-          root.style.removeProperty(name);
-        } else {
-          root.style.setProperty(name, previousValue);
-        }
-      }
-      if (root.getAttribute("data-brand") === brand.id) {
-        if (previousBrand === null) {
-          root.removeAttribute("data-brand");
-        } else {
-          root.setAttribute("data-brand", previousBrand);
-        }
-      }
-    };
-  }, [brand, resolvedMode]);
-  return /* @__PURE__ */ jsxs(ThemeContext, { value: { brand, setBrand, colorScheme, resolvedMode }, children: [
-    isRoot && /* @__PURE__ */ jsx(AIGradientsSvg, {}),
-    isRoot ? /* @__PURE__ */ jsx(TooltipProvider, { children }) : children
+    const vars = tokensToCssVars(tokens);
+    setTokens(root, vars);
+    return () => removeTokens(root, vars);
+  }, [tokens]);
+};
+var ThemeProvider = ({
+  defaultScheme,
+  scheme,
+  onSchemeChange,
+  defaultBrandId,
+  brandId,
+  onBrandIdChange,
+  brands = DEFAULT_BRANDS,
+  children
+}) => {
+  const colorSchemeState = useColorSchemeState({
+    defaultScheme,
+    scheme,
+    onSchemeChange
+  });
+  const brandState = useBrandState({
+    defaultBrandId,
+    brandId,
+    onBrandIdChange
+  });
+  const brand = useMemo(
+    () => brands.find((item) => item.id === brandState.brandId) ?? defaultBrand,
+    [brands, brandState.brandId]
+  );
+  const themes = useMemo(() => brands.map(createTheme), [brands]);
+  const currentTheme = useMemo(() => createTheme(brand), [brand]);
+  const themeTokens = useMemo(
+    () => brandThemeToTokens(brand.theme, colorSchemeState.resolvedScheme),
+    [brand, colorSchemeState.resolvedScheme]
+  );
+  useThemeTokens(themeTokens);
+  const { scheme: activeScheme, resolvedScheme, setScheme } = colorSchemeState;
+  const { brandId: activeBrandId, setBrand } = brandState;
+  const context = useMemo(
+    () => ({
+      scheme: activeScheme,
+      resolvedScheme,
+      setScheme,
+      brandId: activeBrandId,
+      setBrand,
+      themes,
+      currentTheme
+    }),
+    [activeScheme, resolvedScheme, setScheme, activeBrandId, setBrand, themes, currentTheme]
+  );
+  return /* @__PURE__ */ jsxs(ThemeContext, { value: context, children: [
+    /* @__PURE__ */ jsx(AIGradientsSvg, {}),
+    /* @__PURE__ */ jsx(TooltipProvider, { children })
   ] });
 };
 var renderWithTheme = (ui, options = {}) => {
   const { brand = keboola, ...rest } = options;
+  const isArgo = !keboolaLegacyIds.includes(brand.id);
   return render(ui, {
     ...rest,
-    wrapper: ({ children }) => /* @__PURE__ */ jsx(ThemeProvider, { brand, children })
+    wrapper: ({ children }) => /* @__PURE__ */ jsx(ThemeProvider, { brands: [brand], brandId: brand.id, children: /* @__PURE__ */ jsx(ArgoDesignContext, { value: isArgo, children }) })
   });
 };
 

package/dist/testing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ThemeProvider/themeContext.ts","../src/components/Tooltip/TooltipContent.tsx","../src/utils/classNames.ts","../src/components/Tooltip/Tooltip.tsx","../src/components/ThemeProvider/AIGradientSvg.tsx","../src/components/ThemeProvider/brandToCssVars.ts","../src/components/ThemeProvider/ThemeProvider.tsx","../src/testing/renderWithTheme.tsx"],"names":["jsx","jsxs","use","useState","keboola"],"mappings":"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","file":"testing.js","sourcesContent":["import { createContext } from 'react';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nexport type ColorScheme = 'light' | 'dark' | 'system';\nexport type ResolvedMode = 'light' | 'dark';\n\nexport type ThemeContextValue = {\n  brand: Brand;\n  setBrand?: (brand: Brand) => void;\n  /** The configured color scheme (may be `'system'`). */\n  colorScheme: ColorScheme;\n  /** The effective light/dark mode after resolving `'system'`. */\n  resolvedMode: ResolvedMode;\n};\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-tooltip';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useIsLegacyBrand } from '../internal/useIsLegacyBrand';\n\nconst tooltipVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw-inline-block',\n    'tw-break-anywhere',\n    'tw-max-h-96',\n    'tw-overflow-y-auto',\n    'tw-z-[1060]',\n\n    // legacy (dark) chrome — default\n    'tw-rounded',\n    'tw-bg-neutral-800',\n    'tw-text-white',\n\n    // argo chrome overrides — semantic floating-panel tokens\n    'data-[argo=true]:tw-rounded-2xl',\n    'data-[argo=true]:tw-border',\n    'data-[argo=true]:tw-border-solid',\n    'data-[argo=true]:tw-border-border',\n    'data-[argo=true]:tw-bg-popover',\n    'data-[argo=true]:tw-text-popover-foreground',\n    'data-[argo=true]:tw-shadow-md',\n\n    // argo open animation\n    'data-[argo=true]:data-[state=delayed-open]:tw-animate-in',\n    'data-[argo=true]:data-[state=instant-open]:tw-animate-in',\n    'data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0',\n    'data-[argo=true]:data-[state=instant-open]:tw-fade-in-0',\n    'data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95',\n    'data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95',\n\n    // argo closed animation\n    'data-[argo=true]:data-[state=closed]:tw-animate-out',\n    'data-[argo=true]:data-[state=closed]:tw-fade-out-0',\n    'data-[argo=true]:data-[state=closed]:tw-zoom-out-95',\n\n    // argo position animation\n    'data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2',\n    'data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2',\n    'data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2',\n    'data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2',\n  ],\n  {\n    defaultVariants: {\n      variant: 'action',\n    },\n    variants: {\n      variant: {\n        action: [\n          'tw-max-w-fit',\n          'tw-px-3',\n          'tw-py-2',\n\n          'tw-text-center',\n          'tw-text-xs',\n          'tw-font-medium',\n          'tw-uppercase',\n          'tw-tracking-wider',\n        ],\n        explanatory: [\n          'tw-max-w-80',\n          'tw-px-4',\n          'tw-py-3',\n          'tw-text-left',\n\n          'tw-text-sm',\n          'tw-font-normal',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = {\n  keepOpenOnPointerDownOutside?: boolean;\n  placement?: ComponentProps<typeof Content>['side'];\n} & Omit<ComponentProps<typeof Content>, 'side'> &\n  VariantProps<typeof tooltipVariants>;\n\nexport const TooltipContent = ({\n  className,\n  variant,\n  keepOpenOnPointerDownOutside = false,\n  children,\n  onPointerDownOutside,\n  sideOffset = 8,\n  collisionPadding = 8,\n  hideWhenDetached = true,\n  placement = 'right',\n  ...rest\n}: Props) => {\n  const isLegacy = useIsLegacyBrand();\n  const renderArgo = !isLegacy;\n\n  const handlePointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (\n    event,\n  ) => {\n    if (keepOpenOnPointerDownOutside) event.preventDefault();\n    onPointerDownOutside?.(event);\n  };\n\n  return (\n    <Portal>\n      <Content\n        {...rest}\n        // Marks the dark (non-argo) tooltip chrome so styles.css can invert\n        // nested `.tw-prose` for contrast.\n        data-tooltip-content={renderArgo ? undefined : true}\n        data-argo={renderArgo}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        onPointerDownOutside={handlePointerDownOutside}\n        className={tooltipVariants({ className, variant })}\n        hideWhenDetached={hideWhenDetached}\n        side={placement}\n      >\n        {children}\n      </Content>\n    </Portal>\n  );\n};\n","import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw-',\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Content, Trigger } from '@radix-ui/react-tooltip';\nimport { Provider } from '@radix-ui/react-tooltip';\n\nimport { keyCodes } from '../../constants/keyCodes';\n\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipRoot } from './TooltipRoot';\nimport { TooltipTrigger } from './TooltipTrigger';\n\nconst ACTION_TOOLTIP_LIMIT = 30;\n\ntype TriggerProps = {\n  triggerAsChild?: boolean;\n};\n\n/**\n * Props for `Tooltip`. `tooltip` is the popup content; `children` is the trigger element.\n * `variant` auto-resolves to `\"explanatory\"` for strings >30 chars, else `\"action\"`.\n */\nexport type Props = {\n  /** Keep the tooltip visible when the user clicks the trigger (useful for click-to-copy feedback). */\n  keepOpenOnTriggerClick?: boolean;\n  /** Content rendered inside the tooltip. Plain text only — no interactive elements (use `HoverCard` or `Popover` for that). */\n  tooltip: ReactNode;\n  children: ReactNode;\n  placement?: ComponentProps<typeof Content>['side'];\n  /** Forcibly hide the tooltip regardless of hover state. */\n  forceHide?: boolean;\n  /** Forcibly show the tooltip regardless of hover state. Useful for guided-tour overlays. */\n  forceShow?: boolean;\n  className?: string;\n} & TriggerProps &\n  Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;\n\n/** Re-export of Radix `Tooltip.Provider`. Mount once at the app root so tooltips share delay state. */\nexport const TooltipProvider = Provider;\n\n/**\n * Short plain-text label that appears on hover or focus.\n *\n * **When to use:** describing an icon-only `Button`, explaining a disabled control, or labelling a\n * truncated value. Plain text only — auto-switches to the longer `\"explanatory\"` variant when the string\n * exceeds 30 characters.\n * **When NOT to use:** for rich preview content (multiple lines, formatted text, structured data) use\n * `HoverCard`; for tooltips containing links or buttons use `Popover` (interactive elements break a11y\n * inside a `Tooltip`).\n * **Composition:** wrap any focusable element via `triggerAsChild` so the tooltip targets the underlying\n * native element. Mount `TooltipProvider` once at the app root.\n *\n * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern\n */\nexport const Tooltip = ({\n  tooltip,\n  children,\n  className,\n  keepOpenOnTriggerClick = false,\n  variant,\n  placement = 'right',\n  forceHide = false,\n  forceShow = false,\n  // trigger props\n  triggerAsChild = false,\n}: Props) => {\n  const [open, setOpen] = useState(false);\n\n  const resolvedVariant = (() => {\n    if (!!variant) return variant;\n    if (typeof tooltip === 'string' && tooltip.length > ACTION_TOOLTIP_LIMIT) return 'explanatory';\n\n    return 'action';\n  })();\n\n  const isActionVariant = resolvedVariant === 'action';\n\n  const handleKeyUp: ComponentProps<typeof Trigger>['onKeyUp'] = (event) => {\n    if (![keyCodes.ENTER, keyCodes.SPACE].includes(event.key)) return;\n    event.stopPropagation();\n  };\n\n  return (\n    <TooltipRoot\n      open={!!tooltip && (open || forceShow) && !forceHide}\n      onOpenChange={setOpen}\n      disableHoverableContent={isActionVariant}\n    >\n      <TooltipTrigger\n        asChild={triggerAsChild}\n        keepOpenOnClick={keepOpenOnTriggerClick}\n        onKeyUp={handleKeyUp}\n      >\n        {children}\n      </TooltipTrigger>\n\n      <TooltipContent\n        className={className}\n        variant={resolvedVariant}\n        placement={placement}\n        keepOpenOnPointerDownOutside={keepOpenOnTriggerClick}\n      >\n        {tooltip}\n      </TooltipContent>\n    </TooltipRoot>\n  );\n};\n\nTooltip.Root = TooltipRoot;\nTooltip.Content = TooltipContent;\nTooltip.Trigger = TooltipTrigger;\n","export const AIGradientsSvg = () => (\n  <svg width=\"0\" height=\"0\" style={{ position: 'absolute', visibility: 'hidden' }}>\n    <defs>\n      {/*aigradient-600*/}\n      <linearGradient id=\"aigradient-600\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#61E4FF\" />\n        <stop offset=\"50%\" stopColor=\"#1F8FFF\" />\n        <stop offset=\"100%\" stopColor=\"#7C5CFF\" />\n      </linearGradient>\n\n      {/*aigradient-700*/}\n      <linearGradient id=\"aigradient-700\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#075fb8\" />\n        <stop offset=\"100%\" stopColor=\"#5b2cb8\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n","import type { Brand } from '@keboola/brand-registry';\n\nimport type { ResolvedMode } from './themeContext';\n\n/**\n * Map every brand-overridable slot to the matching CSS variable on `:root`.\n *\n * Brand colours are already stored as `R G B` channel strings (validated by\n * the brand schema), matching the shape Tailwind's\n * `rgb(var(--color-*) / <alpha-value>)` template consumes — they're written\n * straight into the CSS variable without conversion.\n *\n * Mode-aware: when `resolvedMode === 'dark'` and the brand ships a\n * `colorsDark` palette, that palette wins; otherwise `colors` (light) is\n * used. The crucial exception — if `resolvedMode === 'dark'` and the brand\n * has NO `colorsDark`, the 9 colour vars are omitted entirely so the\n * stylesheet's `[data-theme='dark']` block supplies the dark palette.\n * Emitting the light values here would clobber that with no `!important`\n * recourse. Non-colour vars (radii) are emitted regardless of mode.\n *\n * Slots the brand doesn't define are omitted — `ThemeProvider` only\n * captures/restores the keys returned here, so unset slots inherit whatever\n * is already live on `<html>` (an outer provider's value, or the `:root` /\n * `[data-theme='dark']` defaults in `styles.css` if no outer provider has\n * touched them). The accent colours (in `colors` / `colorsDark`), the sidebar\n * colour family (`brand.sidebarColors` / `brand.sidebarColorsDark`), and the\n * brand font (`typography.fontFamily`, emitted as `--font-sans`) follow the\n * same opt-in rule.\n */\nexport const brandToCssVars = (\n  brand: Brand,\n  resolvedMode: ResolvedMode,\n): Record<string, string> => {\n  const vars: Record<string, string> = {};\n\n  // In dark mode with no brand dark palette, leave the colour vars to the\n  // stylesheet's `[data-theme='dark']` block (do not emit light values).\n  const colors = resolvedMode === 'dark' ? brand.colorsDark : brand.colors;\n  if (colors) {\n    vars['--color-background'] = colors.background;\n    vars['--color-foreground'] = colors.foreground;\n    vars['--color-muted'] = colors.muted;\n    vars['--color-muted-foreground'] = colors.mutedForeground;\n    vars['--color-border'] = colors.border;\n    vars['--color-primary'] = colors.primary;\n    vars['--color-primary-foreground'] = colors.primaryForeground;\n    vars['--color-destructive'] = colors.destructive;\n    vars['--color-destructive-foreground'] = colors.destructiveForeground;\n    // accent is a general semantic colour (content + sidebar); optional.\n    if (colors.accent !== undefined) vars['--color-accent'] = colors.accent;\n    if (colors.accentForeground !== undefined)\n      vars['--color-accent-foreground'] = colors.accentForeground;\n  }\n\n  // Sidebar colour tokens — same dark-mode rule as the core palette: with no\n  // `sidebarColorsDark`, leave the stylesheet `[data-theme='dark']` sidebar intact.\n  const sidebar = resolvedMode === 'dark' ? brand.sidebarColorsDark : brand.sidebarColors;\n  if (sidebar) {\n    const sidebarVars: Record<string, string | undefined> = {\n      '--color-sidebar': sidebar.sidebar,\n      '--color-sidebar-foreground': sidebar.sidebarForeground,\n      '--color-sidebar-primary': sidebar.sidebarPrimary,\n      '--color-sidebar-primary-foreground': sidebar.sidebarPrimaryForeground,\n      '--color-sidebar-accent': sidebar.sidebarAccent,\n      '--color-sidebar-accent-foreground': sidebar.sidebarAccentForeground,\n      '--color-sidebar-border': sidebar.sidebarBorder,\n      '--color-sidebar-ring': sidebar.sidebarRing,\n    };\n    for (const [name, value] of Object.entries(sidebarVars)) {\n      if (value !== undefined) vars[name] = value;\n    }\n  }\n\n  // Trim at the runtime boundary too: ThemeProvider applies this output without\n  // re-validating the schema, so a whitespace-only value must not emit\n  // `--font-sans` (it would defeat the `var(--font-sans, …)` fallback).\n  const fontFamily = brand.typography?.fontFamily?.trim();\n  if (fontFamily) {\n    vars['--font-sans'] = fontFamily;\n  }\n\n  if (brand.radii) {\n    vars['--radius-sm'] = brand.radii.sm;\n    vars['--radius-md'] = brand.radii.md;\n    vars['--radius-lg'] = brand.radii.lg;\n  }\n\n  return vars;\n};\n","import { type ReactNode, use, useEffect, useState } from 'react';\n\nimport { type Brand, keboola } from '@keboola/brand-registry';\n\nimport { TooltipProvider } from '../Tooltip';\n\nimport { AIGradientsSvg } from './AIGradientSvg';\nimport { brandToCssVars } from './brandToCssVars';\nimport { type ColorScheme, type ResolvedMode, ThemeContext } from './themeContext';\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\nconst systemMode = (): ResolvedMode => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'light';\n  return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';\n};\n\ntype Props = {\n  /**\n   * Brand whose tokens drive the chrome (`@keboola/design`'s semantic CSS\n   * variables) inside this provider's subtree. Defaults to the canonical\n   * `keboola` brand so existing apps that mount `<ThemeProvider>` without a\n   * `brand` prop continue to render as today.\n   */\n  brand?: Brand;\n  /**\n   * Optional setter exposed through `useTheme()` so consumers can flip\n   * brands at runtime (Storybook toolbar, a customer-impersonation switch).\n   */\n  setBrand?: (brand: Brand) => void;\n  /**\n   * Light/dark mode. `'system'` follows `prefers-color-scheme` and updates\n   * reactively. Defaults to `'light'` so existing mounts don't drift. Only\n   * the ROOT provider applies this (sets `data-theme`, owns the media\n   * listener); a nested provider inherits the root's resolved mode.\n   */\n  colorScheme?: ColorScheme;\n  children: ReactNode;\n};\n\n/**\n * Responsibilities:\n * - ROOT only: render hidden SVG gradient definitions (`aigradient-600`,\n *   `aigradient-700`). The IDs are hardcoded, so a nested provider must not\n *   re-emit them or the document gains duplicate (HTML-invalid) IDs.\n * - Set `data-brand=\"<brand.id>\"` on `<html>` and inject the matching `--color-*` /\n *   `--radius-*` CSS variables (for the resolved light/dark mode) so chrome\n *   re-skins for the supplied brand.\n * - ROOT only: set `data-theme` (`light` | `dark`) on `<html>` and own the\n *   `prefers-color-scheme` media listener when `colorScheme === 'system'`.\n *   A nested provider inherits the resolved mode from the parent context and\n *   touches neither `data-theme` nor a media listener.\n * - Expose `{ brand, setBrand?, colorScheme, resolvedMode }` via `useTheme()`.\n * - ROOT only: mount a Radix `TooltipProvider` around the subtree so any\n *   `Tooltip` works without a separately-mounted provider. Nested providers\n *   inherit the root's `TooltipProvider` via context, so they add none of their\n *   own — this keeps a single delay group across the app (apps like kbc-ui mount\n *   dozens of scoped `ThemeProvider`s, so re-mounting a provider per subtree\n *   would fragment tooltip delay behavior). A consumer's own `TooltipProvider`\n *   still composes fine.\n *\n * Brand × mode: the active mode's palette is injected inline on `<html>`. When\n * the resolved mode is `dark` and the brand has no `colorsDark`, the colour\n * vars are NOT emitted — the stylesheet `[data-theme='dark']` block supplies\n * them, so no `!important` override is ever needed.\n *\n * `data-brand` (brand id) and `data-theme` (light/dark) are separate axes so\n * they compose without clobbering each other.\n */\nexport const ThemeProvider = ({\n  brand = keboola,\n  setBrand,\n  colorScheme = 'light',\n  children,\n}: Props) => {\n  const parent = use(ThemeContext);\n  const isRoot = parent === null;\n\n  // System mode is tracked only by the root; nested providers inherit the\n  // parent's resolved mode and never subscribe to media changes.\n  const [systemResolved, setSystemResolved] = useState<ResolvedMode>(systemMode);\n\n  useEffect(() => {\n    if (!isRoot || colorScheme !== 'system') return;\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n    const mql = window.matchMedia(DARK_QUERY);\n    const onChange = (event: MediaQueryListEvent) =>\n      setSystemResolved(event.matches ? 'dark' : 'light');\n    // Re-sync in case the value changed between the lazy initializer and effect.\n    setSystemResolved(mql.matches ? 'dark' : 'light');\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, [isRoot, colorScheme]);\n\n  const ownMode: ResolvedMode = colorScheme === 'system' ? systemResolved : colorScheme;\n  // Nested providers inherit the root's resolved mode; the root uses its own.\n  const resolvedMode: ResolvedMode = isRoot ? ownMode : parent.resolvedMode;\n\n  // Root owns `data-theme` on `<html>`.\n  useEffect(() => {\n    if (!isRoot || typeof document === 'undefined') return;\n    const root = document.documentElement;\n    const previous = root.getAttribute('data-theme');\n    root.setAttribute('data-theme', resolvedMode);\n    return () => {\n      if (root.getAttribute('data-theme') !== resolvedMode) return;\n      if (previous === null) {\n        root.removeAttribute('data-theme');\n      } else {\n        root.setAttribute('data-theme', previous);\n      }\n    };\n  }, [isRoot, resolvedMode]);\n\n  // Every provider (root or nested) injects ITS brand's vars for the resolved mode.\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    const root = document.documentElement;\n\n    // Capture the previous `data-brand` + per-property inline-style values\n    // so cleanup can restore them. Cleanup only restores values that\n    // weren't overwritten by some other provider in between — without that\n    // check, an inner provider unmounting after an outer one wrote new\n    // values would clobber the outer's brand back to bare `:root` (React\n    // runs child effects before parent effects on mount, so the inner's\n    // captured \"previous\" is stale by the time it unmounts).\n    const previousBrand = root.getAttribute('data-brand');\n    const vars = brandToCssVars(brand, resolvedMode);\n    const previousValues: Record<string, string> = {};\n    for (const name of Object.keys(vars)) {\n      previousValues[name] = root.style.getPropertyValue(name);\n    }\n\n    root.setAttribute('data-brand', brand.id);\n    for (const [name, value] of Object.entries(vars)) {\n      root.style.setProperty(name, value);\n    }\n\n    return () => {\n      for (const [name, previousValue] of Object.entries(previousValues)) {\n        // Only roll back if our value is still live — if someone else\n        // (an outer provider, a sibling) has since written a different\n        // value, leave it alone.\n        if (root.style.getPropertyValue(name) !== vars[name]) continue;\n        if (previousValue === '') {\n          root.style.removeProperty(name);\n        } else {\n          root.style.setProperty(name, previousValue);\n        }\n      }\n      if (root.getAttribute('data-brand') === brand.id) {\n        if (previousBrand === null) {\n          root.removeAttribute('data-brand');\n        } else {\n          root.setAttribute('data-brand', previousBrand);\n        }\n      }\n    };\n  }, [brand, resolvedMode]);\n\n  return (\n    <ThemeContext value={{ brand, setBrand, colorScheme, resolvedMode }}>\n      {/* ROOT only — the defs use hardcoded IDs; a nested provider re-emitting\n          them would produce duplicate, HTML-invalid element IDs. */}\n      {isRoot && <AIGradientsSvg />}\n      {/* ROOT only — a nested provider inherits the root's TooltipProvider via\n          context, so re-mounting one here would just fragment the delay group. */}\n      {isRoot ? <TooltipProvider>{children}</TooltipProvider> : children}\n    </ThemeContext>\n  );\n};\n","import type { ReactElement } from 'react';\nimport { render, type RenderOptions, type RenderResult } from '@testing-library/react';\n\nimport { type Brand, keboola } from '@keboola/brand-registry';\n\nimport { ThemeProvider } from '../components/ThemeProvider';\n\ntype Options = Omit<RenderOptions, 'wrapper'> & {\n  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */\n  brand?: Brand;\n};\n\n/**\n * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.\n *\n * Use in unit tests for any component that calls `useTheme()` or relies on\n * the brand-driven CSS variables. Defaults to the canonical Keboola brand so\n * callers can opt into a specific brand only when they need to assert\n * brand-dependent behaviour (e.g. chrome re-skins under `keboola-legacy`).\n */\nexport const renderWithTheme = (ui: ReactElement, options: Options = {}): RenderResult => {\n  const { brand = keboola, ...rest } = options;\n  return render(ui, {\n    ...rest,\n    wrapper: ({ children }) => <ThemeProvider brand={brand}>{children}</ThemeProvider>,\n  });\n};\n"]}
+{"version":3,"sources":["../src/components/ThemeProvider/utils.ts","../src/components/ThemeProvider/defaults.ts","../src/components/ThemeProvider/context.tsx","../src/components/Tooltip/TooltipContent.tsx","../src/utils/classNames.ts","../src/components/Tooltip/Tooltip.tsx","../src/components/ThemeProvider/AIGradientSvg.tsx","../src/components/ThemeProvider/useBrandState.ts","../src/components/ThemeProvider/useColorSchemeState.ts","../src/components/ThemeProvider/useThemeTokens.ts","../src/components/ThemeProvider/ThemeProvider.tsx","../src/testing/renderWithTheme.tsx"],"names":["jsx","jsxs","defaultBrand","useState","useCallback","useEffect","keboola"],"mappings":"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","file":"testing.js","sourcesContent":["import type { Brand } from '@keboola/brand-registry';\n\nimport type { Theme } from './types';\n\nexport const createTheme = (brand: Brand): Theme => ({\n  id: brand.id,\n  name: brand.name,\n  shell: brand.shell,\n  logo: brand.logo,\n});\n\nexport type CssVars = {\n  set: (name: string, value: string | undefined) => void;\n  expose: () => Record<string, string>;\n};\n\nexport const createCssVars = (): CssVars => {\n  const vars: Record<string, string> = {};\n  return {\n    set: (name, value) => {\n      if (value !== undefined) vars[name] = value;\n    },\n    expose: () => ({ ...vars }),\n  };\n};\n","import type { Brand } from '@keboola/brand-registry';\nimport { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createTheme } from './utils';\n\nexport const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];\nexport const DEFAULT_COLOR_SCHEME: ResolvedColorScheme = 'light';\n\n// Sentinel active-brand id that maps to no registry brand. It resolves to\n// `defaultBrand` below, whose empty theme injects nothing — so the design-system\n// stylesheet defaults (`:root` / `[data-theme='dark']`) provide every token.\nexport const DEFAULT_BRAND_ID = 'design-system';\n\n// The \"no brand\" fallback: an empty theme → no CSS vars injected → the\n// stylesheet defaults win. Its shell/name still drive AppShell + switcher label.\nexport const defaultBrand: Brand = {\n  id: DEFAULT_BRAND_ID,\n  name: 'Design System',\n  shell: 'sidebar',\n  theme: {},\n};\nexport const defaultTheme = createTheme(defaultBrand);\n\nexport const DEFAULT_BRANDS: Brand[] = [];\n","import { createContext, use } from 'react';\n\nimport { DEFAULT_COLOR_SCHEME, defaultTheme } from './defaults';\nimport type { Theme } from './types';\nimport type { useBrandState } from './useBrandState';\nimport type { useColorSchemeState } from './useColorSchemeState';\n\nexport type ThemeContextValue = ReturnType<typeof useColorSchemeState> &\n  ReturnType<typeof useBrandState> & {\n    themes: Theme[];\n    currentTheme: Theme;\n  };\n\nconst noop = () => void 0;\n\nconst defaultContext: ThemeContextValue = {\n  scheme: DEFAULT_COLOR_SCHEME,\n  resolvedScheme: DEFAULT_COLOR_SCHEME,\n  setScheme: noop,\n  brandId: defaultTheme.id,\n  setBrand: noop,\n\n  themes: [defaultTheme],\n  currentTheme: defaultTheme,\n};\n\nexport const ThemeContext = createContext(defaultContext);\n\nexport const useTheme = () => use(ThemeContext);\n\n/**\n * TEMPORARY — kbc-ui-internal only.\n *\n * Flags whether the subtree renders the argo design language. Defaults to argo\n * (`true`) — the modern default; legacy chrome is the exception. It exists\n * solely to bridge kbc-ui while its chrome is migrated off the legacy design\n * language: kbc-ui provides `false` for legacy brands/surfaces (see its\n * `AppThemeProvider`) and reads it via `useArgoDesign`. `ThemeProvider` does\n * not set it — argo is decoupled from the brand. Once every kbc-ui surface has\n * been migrated, this context and its hook can be deleted.\n */\nexport const ArgoDesignContext = createContext<boolean>(true);\n\nexport const useArgoDesign = () => use(ArgoDesignContext);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-tooltip';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst tooltipVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw-inline-block',\n    'tw-break-anywhere',\n    'tw-max-h-96',\n    'tw-overflow-y-auto',\n    'tw-z-[1060]',\n\n    // legacy (dark) chrome — default\n    'tw-rounded',\n    'tw-bg-neutral-800',\n    'tw-text-white',\n\n    // argo chrome overrides — semantic floating-panel tokens\n    'data-[argo=true]:tw-rounded-2xl',\n    'data-[argo=true]:tw-border',\n    'data-[argo=true]:tw-border-solid',\n    'data-[argo=true]:tw-border-border',\n    'data-[argo=true]:tw-bg-popover',\n    'data-[argo=true]:tw-text-popover-foreground',\n    'data-[argo=true]:tw-shadow-md',\n\n    // argo open animation\n    'data-[argo=true]:data-[state=delayed-open]:tw-animate-in',\n    'data-[argo=true]:data-[state=instant-open]:tw-animate-in',\n    'data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0',\n    'data-[argo=true]:data-[state=instant-open]:tw-fade-in-0',\n    'data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95',\n    'data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95',\n\n    // argo closed animation\n    'data-[argo=true]:data-[state=closed]:tw-animate-out',\n    'data-[argo=true]:data-[state=closed]:tw-fade-out-0',\n    'data-[argo=true]:data-[state=closed]:tw-zoom-out-95',\n\n    // argo position animation\n    'data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2',\n    'data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2',\n    'data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2',\n    'data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2',\n  ],\n  {\n    defaultVariants: {\n      variant: 'action',\n    },\n    variants: {\n      variant: {\n        action: [\n          'tw-max-w-fit',\n          'tw-px-3',\n          'tw-py-2',\n\n          'tw-text-center',\n          'tw-text-xs',\n          'tw-font-medium',\n          'tw-uppercase',\n          'tw-tracking-wider',\n        ],\n        explanatory: [\n          'tw-max-w-80',\n          'tw-px-4',\n          'tw-py-3',\n          'tw-text-left',\n\n          'tw-text-sm',\n          'tw-font-normal',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = {\n  keepOpenOnPointerDownOutside?: boolean;\n  placement?: ComponentProps<typeof Content>['side'];\n} & Omit<ComponentProps<typeof Content>, 'side'> &\n  VariantProps<typeof tooltipVariants>;\n\nexport const TooltipContent = ({\n  className,\n  variant,\n  keepOpenOnPointerDownOutside = false,\n  children,\n  onPointerDownOutside,\n  sideOffset = 8,\n  collisionPadding = 8,\n  hideWhenDetached = true,\n  placement = 'right',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n\n  const handlePointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (\n    event,\n  ) => {\n    if (keepOpenOnPointerDownOutside) event.preventDefault();\n    onPointerDownOutside?.(event);\n  };\n\n  return (\n    <Portal>\n      <Content\n        {...rest}\n        // Marks the dark (non-argo) tooltip chrome so styles.css can invert\n        // nested `.tw-prose` for contrast.\n        data-tooltip-content={renderArgo ? undefined : true}\n        data-argo={renderArgo}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        onPointerDownOutside={handlePointerDownOutside}\n        className={tooltipVariants({ className, variant })}\n        hideWhenDetached={hideWhenDetached}\n        side={placement}\n      >\n        {children}\n      </Content>\n    </Portal>\n  );\n};\n","import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw-',\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Content, Trigger } from '@radix-ui/react-tooltip';\nimport { Provider } from '@radix-ui/react-tooltip';\n\nimport { keyCodes } from '../../constants/keyCodes';\n\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipRoot } from './TooltipRoot';\nimport { TooltipTrigger } from './TooltipTrigger';\n\nconst ACTION_TOOLTIP_LIMIT = 30;\n\ntype TriggerProps = {\n  triggerAsChild?: boolean;\n};\n\n/**\n * Props for `Tooltip`. `tooltip` is the popup content; `children` is the trigger element.\n * `variant` auto-resolves to `\"explanatory\"` for strings >30 chars, else `\"action\"`.\n */\nexport type Props = {\n  /** Keep the tooltip visible when the user clicks the trigger (useful for click-to-copy feedback). */\n  keepOpenOnTriggerClick?: boolean;\n  /** Content rendered inside the tooltip. Plain text only — no interactive elements (use `HoverCard` or `Popover` for that). */\n  tooltip: ReactNode;\n  children: ReactNode;\n  placement?: ComponentProps<typeof Content>['side'];\n  /** Forcibly hide the tooltip regardless of hover state. */\n  forceHide?: boolean;\n  /** Forcibly show the tooltip regardless of hover state. Useful for guided-tour overlays. */\n  forceShow?: boolean;\n  className?: string;\n} & TriggerProps &\n  Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;\n\n/** Re-export of Radix `Tooltip.Provider`. Mount once at the app root so tooltips share delay state. */\nexport const TooltipProvider = Provider;\n\n/**\n * Short plain-text label that appears on hover or focus.\n *\n * **When to use:** describing an icon-only `Button`, explaining a disabled control, or labelling a\n * truncated value. Plain text only — auto-switches to the longer `\"explanatory\"` variant when the string\n * exceeds 30 characters.\n * **When NOT to use:** for rich preview content (multiple lines, formatted text, structured data) use\n * `HoverCard`; for tooltips containing links or buttons use `Popover` (interactive elements break a11y\n * inside a `Tooltip`).\n * **Composition:** wrap any focusable element via `triggerAsChild` so the tooltip targets the underlying\n * native element. Mount `TooltipProvider` once at the app root.\n *\n * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern\n */\nexport const Tooltip = ({\n  tooltip,\n  children,\n  className,\n  keepOpenOnTriggerClick = false,\n  variant,\n  placement = 'right',\n  forceHide = false,\n  forceShow = false,\n  // trigger props\n  triggerAsChild = false,\n}: Props) => {\n  const [open, setOpen] = useState(false);\n\n  const resolvedVariant = (() => {\n    if (!!variant) return variant;\n    if (typeof tooltip === 'string' && tooltip.length > ACTION_TOOLTIP_LIMIT) return 'explanatory';\n\n    return 'action';\n  })();\n\n  const isActionVariant = resolvedVariant === 'action';\n\n  const handleKeyUp: ComponentProps<typeof Trigger>['onKeyUp'] = (event) => {\n    if (![keyCodes.ENTER, keyCodes.SPACE].includes(event.key)) return;\n    event.stopPropagation();\n  };\n\n  return (\n    <TooltipRoot\n      open={!!tooltip && (open || forceShow) && !forceHide}\n      onOpenChange={setOpen}\n      disableHoverableContent={isActionVariant}\n    >\n      <TooltipTrigger\n        asChild={triggerAsChild}\n        keepOpenOnClick={keepOpenOnTriggerClick}\n        onKeyUp={handleKeyUp}\n      >\n        {children}\n      </TooltipTrigger>\n\n      <TooltipContent\n        className={className}\n        variant={resolvedVariant}\n        placement={placement}\n        keepOpenOnPointerDownOutside={keepOpenOnTriggerClick}\n      >\n        {tooltip}\n      </TooltipContent>\n    </TooltipRoot>\n  );\n};\n\nTooltip.Root = TooltipRoot;\nTooltip.Content = TooltipContent;\nTooltip.Trigger = TooltipTrigger;\n","export const AIGradientsSvg = () => (\n  <svg width=\"0\" height=\"0\" style={{ position: 'absolute', visibility: 'hidden' }}>\n    <defs>\n      {/*aigradient-600*/}\n      <linearGradient id=\"aigradient-600\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#61E4FF\" />\n        <stop offset=\"50%\" stopColor=\"#1F8FFF\" />\n        <stop offset=\"100%\" stopColor=\"#7C5CFF\" />\n      </linearGradient>\n\n      {/*aigradient-700*/}\n      <linearGradient id=\"aigradient-700\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#075fb8\" />\n        <stop offset=\"100%\" stopColor=\"#5b2cb8\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n","import { useCallback, useEffect, useState } from 'react';\n\nimport { DEFAULT_BRAND_ID } from './defaults';\nimport type { BrandId } from './types';\n\nexport const BRAND_ATTRIBUTE = 'data-brand';\n\nexport type UseBrandOptions = {\n  /** Initial active brand id for uncontrolled use. Defaults to the design-system sentinel (`DEFAULT_BRAND_ID`) — no brand tokens injected, so the stylesheet defaults apply. */\n  defaultBrandId?: BrandId;\n  /** Controlled active brand id. When set, the parent owns the value and `setBrand` only notifies via `onBrandIdChange` (it does not mutate internal state). */\n  brandId?: BrandId;\n  /** Called with the next id whenever `setBrand` runs — required to persist the choice in controlled mode. */\n  onBrandIdChange?: (brandId: BrandId) => void;\n};\n\nexport const useBrandState = ({\n  defaultBrandId: defaultBrand = DEFAULT_BRAND_ID,\n  brandId: controlledBrand,\n  onBrandIdChange: onBrandChange,\n}: UseBrandOptions = {}) => {\n  const [uncontrolledBrand, setUncontrolledBrand] = useState(defaultBrand);\n\n  const isControlled = controlledBrand !== undefined;\n  const brandId = isControlled ? controlledBrand : uncontrolledBrand;\n\n  const setBrand = useCallback(\n    (next: BrandId) => {\n      if (!isControlled) setUncontrolledBrand(next);\n      onBrandChange?.(next);\n    },\n    [isControlled, onBrandChange],\n  );\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    document.documentElement.setAttribute(BRAND_ATTRIBUTE, brandId);\n  }, [brandId]);\n\n  return { brandId, setBrand };\n};\n","import { useCallback, useEffect, useState } from 'react';\n\nimport { DEFAULT_COLOR_SCHEME } from './defaults';\nimport type { ColorScheme, ResolvedColorScheme } from './types';\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\nexport const THEME_ATTRIBUTE = 'data-theme';\n\nconst getSystemColorScheme = (): ResolvedColorScheme => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'light';\n  return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';\n};\n\nexport type UseColorSchemeOptions = {\n  /** Initial colour scheme for uncontrolled use. Defaults to `light` (`DEFAULT_COLOR_SCHEME`). */\n  defaultScheme?: ColorScheme;\n  /** Controlled colour scheme (`light` / `dark` / `system`). When set, the parent owns the value and `setScheme` only notifies via `onSchemeChange`. `system` follows `prefers-color-scheme` and resolves reactively. */\n  scheme?: ColorScheme;\n  /** Called with the next scheme whenever `setScheme` runs — required to persist the choice in controlled mode. */\n  onSchemeChange?: (theme: ColorScheme) => void;\n};\n\nexport const useColorSchemeState = ({\n  defaultScheme = DEFAULT_COLOR_SCHEME,\n  scheme: propScheme,\n  onSchemeChange,\n}: UseColorSchemeOptions = {}) => {\n  const [uncontrolledScheme, setUncontrolledScheme] = useState(defaultScheme);\n  const [systemScheme, setSystemScheme] = useState<ResolvedColorScheme>(getSystemColorScheme);\n\n  const isControlled = propScheme !== undefined;\n  const scheme = isControlled ? propScheme : uncontrolledScheme;\n\n  const setScheme = useCallback(\n    (next: ColorScheme) => {\n      if (!isControlled) setUncontrolledScheme(next);\n      onSchemeChange?.(next);\n    },\n    [isControlled, onSchemeChange],\n  );\n\n  // Track the OS preference so `system` stays live as the user flips it.\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n    const mq = window.matchMedia(DARK_QUERY);\n    const onChange = () => setSystemScheme(mq.matches ? 'dark' : 'light');\n    onChange();\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n\n  const resolvedScheme: ResolvedColorScheme = scheme === 'system' ? systemScheme : scheme;\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    document.documentElement.setAttribute(THEME_ATTRIBUTE, resolvedScheme);\n  }, [resolvedScheme]);\n\n  return { scheme, resolvedScheme, setScheme };\n};\n","import { useInsertionEffect } from 'react';\n\nimport type {\n  BrandTheme,\n  Colors,\n  Gradient,\n  Motion,\n  Radii,\n  Shadows,\n  Spacing,\n  Typography,\n} from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createCssVars } from './utils';\n\nexport type ThemeTokens = {\n  colors?: Colors;\n  typography?: Typography;\n  radii?: Radii;\n  shadows?: Shadows;\n  spacing?: Spacing;\n  motion?: Motion;\n  gradient?: Gradient;\n};\n\nexport const brandThemeToTokens = (\n  theme: BrandTheme,\n  scheme: ResolvedColorScheme,\n): ThemeTokens => ({\n  colors: scheme === 'dark' ? theme.colorsDark : theme.colors,\n  typography: theme.typography,\n  radii: theme.radii,\n  // Scheme-independent — the same values apply in light and dark.\n  shadows: theme.shadows,\n  spacing: theme.spacing,\n  motion: theme.motion,\n  gradient: theme.gradient,\n});\n\nexport const tokensToCssVars = ({\n  colors,\n  typography,\n  radii,\n  shadows,\n  spacing,\n  motion,\n  gradient,\n}: ThemeTokens): Record<string, string> => {\n  const vars = createCssVars();\n\n  vars.set('--color-background', colors?.background);\n  vars.set('--color-foreground', colors?.foreground);\n  vars.set('--color-muted', colors?.muted);\n  vars.set('--color-muted-foreground', colors?.mutedForeground);\n  vars.set('--color-border', colors?.border);\n  vars.set('--color-input', colors?.input);\n  vars.set('--color-ring', colors?.ring);\n  vars.set('--color-ring-offset', colors?.ringOffset);\n  vars.set('--color-primary', colors?.primary);\n  vars.set('--color-primary-foreground', colors?.primaryForeground);\n  vars.set('--color-secondary', colors?.secondary);\n  vars.set('--color-secondary-foreground', colors?.secondaryForeground);\n  vars.set('--color-accent', colors?.accent);\n  vars.set('--color-accent-foreground', colors?.accentForeground);\n  vars.set('--color-card', colors?.card);\n  vars.set('--color-card-foreground', colors?.cardForeground);\n  vars.set('--color-popover', colors?.popover);\n  vars.set('--color-popover-foreground', colors?.popoverForeground);\n  vars.set('--color-destructive', colors?.destructive);\n  vars.set('--color-destructive-foreground', colors?.destructiveForeground);\n  vars.set('--color-success', colors?.success);\n  vars.set('--color-success-foreground', colors?.successForeground);\n  vars.set('--color-warning', colors?.warning);\n  vars.set('--color-warning-foreground', colors?.warningForeground);\n  vars.set('--color-info', colors?.info);\n  vars.set('--color-info-foreground', colors?.infoForeground);\n\n  vars.set('--color-chart-1', colors?.chart?.chart1);\n  vars.set('--color-chart-2', colors?.chart?.chart2);\n  vars.set('--color-chart-3', colors?.chart?.chart3);\n  vars.set('--color-chart-4', colors?.chart?.chart4);\n  vars.set('--color-chart-5', colors?.chart?.chart5);\n\n  vars.set('--color-sidebar', colors?.sidebar?.sidebar);\n  vars.set('--color-sidebar-foreground', colors?.sidebar?.sidebarForeground);\n  vars.set('--color-sidebar-primary', colors?.sidebar?.sidebarPrimary);\n  vars.set('--color-sidebar-primary-foreground', colors?.sidebar?.sidebarPrimaryForeground);\n  vars.set('--color-sidebar-accent', colors?.sidebar?.sidebarAccent);\n  vars.set('--color-sidebar-accent-foreground', colors?.sidebar?.sidebarAccentForeground);\n  vars.set('--color-sidebar-border', colors?.sidebar?.sidebarBorder);\n  vars.set('--color-sidebar-ring', colors?.sidebar?.sidebarRing);\n\n  /**\n   * TYPOGRAPHY\n   */\n  vars.set('--font-sans', typography?.fontFamily?.trim() || undefined);\n  vars.set('--font-display', typography?.fontDisplay?.trim() || undefined);\n  vars.set('--font-mono', typography?.fontMono?.trim() || undefined);\n\n  vars.set('--radius-sm', radii?.sm);\n  vars.set('--radius-md', radii?.md);\n  vars.set('--radius-lg', radii?.lg);\n\n  /**\n   * ELEVATION / DENSITY / MOTION / GRADIENT\n   */\n  vars.set('--shadow-sm', shadows?.sm);\n  vars.set('--shadow-md', shadows?.md);\n  vars.set('--shadow-lg', shadows?.lg);\n  vars.set('--shadow-lift', shadows?.lift);\n\n  vars.set('--space-gutter', spacing?.gutter);\n  vars.set('--space-inset', spacing?.inset);\n\n  vars.set('--motion-duration', motion?.duration);\n  vars.set('--motion-easing', motion?.easing);\n\n  vars.set('--gradient-brand', gradient?.brand);\n\n  return vars.expose();\n};\n\nconst setTokens = (node: HTMLElement, vars: Record<string, string>) => {\n  for (const [name, value] of Object.entries(vars)) {\n    node.style.setProperty(name, value);\n  }\n};\n\nconst removeTokens = (node: HTMLElement, vars: Record<string, string>) => {\n  for (const name of Object.keys(vars)) {\n    node.style.removeProperty(name);\n  }\n};\n\nexport const useThemeTokens = (tokens: ThemeTokens) => {\n  // Insertion effect: runs before the DOM mutates and before any (descendant)\n  // layout effect measures token-dependent geometry. Write-only, so it fits the\n  // hook's constraints. Only the brand's overrides are set; unset slots fall\n  // through to the stylesheet's `:root` / `[data-theme='dark']` defaults.\n  useInsertionEffect(() => {\n    if (typeof document === 'undefined') return;\n    const root = document.documentElement;\n    const vars = tokensToCssVars(tokens);\n\n    setTokens(root, vars);\n\n    return () => removeTokens(root, vars);\n  }, [tokens]);\n};\n","import { type ReactNode, useMemo } from 'react';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { TooltipProvider } from '../Tooltip';\n\nimport { AIGradientsSvg } from './AIGradientSvg';\nimport { ThemeContext, type ThemeContextValue } from './context';\nimport { DEFAULT_BRANDS, defaultBrand } from './defaults';\nimport { type UseBrandOptions, useBrandState } from './useBrandState';\nimport { type UseColorSchemeOptions, useColorSchemeState } from './useColorSchemeState';\nimport { brandThemeToTokens, useThemeTokens } from './useThemeTokens';\nimport { createTheme } from './utils';\n\ntype Props = UseColorSchemeOptions &\n  UseBrandOptions & {\n    /** Brands this provider knows about; the active brand id resolves against these. */\n    brands?: readonly Brand[];\n    children: ReactNode;\n  };\n\nexport const ThemeProvider = ({\n  defaultScheme,\n  scheme,\n  onSchemeChange,\n  defaultBrandId,\n  brandId,\n  onBrandIdChange,\n  brands = DEFAULT_BRANDS,\n  children,\n}: Props) => {\n  const colorSchemeState = useColorSchemeState({\n    defaultScheme,\n    scheme,\n    onSchemeChange,\n  });\n\n  const brandState = useBrandState({\n    defaultBrandId,\n    brandId,\n    onBrandIdChange,\n  });\n\n  // Resolve the active brand; an unknown id (incl. the default sentinel) falls\n  // back to `defaultBrand`, whose empty theme injects nothing so the stylesheet\n  // defaults apply.\n  const brand = useMemo(\n    () => brands.find((item) => item.id === brandState.brandId) ?? defaultBrand,\n    [brands, brandState.brandId],\n  );\n  const themes = useMemo(() => brands.map(createTheme), [brands]);\n  const currentTheme = useMemo(() => createTheme(brand), [brand]);\n\n  // Only the brand's overrides for the resolved scheme are injected; every slot\n  // it omits (including a missing dark palette) falls through to the stylesheet's\n  // `:root` / `[data-theme='dark']` defaults — so dark mode works for any brand.\n  const themeTokens = useMemo(\n    () => brandThemeToTokens(brand.theme, colorSchemeState.resolvedScheme),\n    [brand, colorSchemeState.resolvedScheme],\n  );\n\n  useThemeTokens(themeTokens);\n\n  const { scheme: activeScheme, resolvedScheme, setScheme } = colorSchemeState;\n  const { brandId: activeBrandId, setBrand } = brandState;\n  const context = useMemo<ThemeContextValue>(\n    () => ({\n      scheme: activeScheme,\n      resolvedScheme,\n      setScheme,\n      brandId: activeBrandId,\n      setBrand,\n      themes,\n      currentTheme,\n    }),\n    [activeScheme, resolvedScheme, setScheme, activeBrandId, setBrand, themes, currentTheme],\n  );\n\n  return (\n    <ThemeContext value={context}>\n      <AIGradientsSvg />\n      <TooltipProvider>{children}</TooltipProvider>\n    </ThemeContext>\n  );\n};\n","import type { ReactElement } from 'react';\nimport { render, type RenderOptions, type RenderResult } from '@testing-library/react';\n\nimport { type Brand, keboola } from '@keboola/brand-registry';\n\nimport { ArgoDesignContext, ThemeProvider } from '../components/ThemeProvider';\nimport { keboolaLegacyIds } from '../components/ThemeProvider/defaults';\n\ntype Options = Omit<RenderOptions, 'wrapper'> & {\n  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */\n  brand?: Brand;\n};\n\n/**\n * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.\n *\n * Use in unit tests for any component that calls `useTheme()` or relies on\n * the brand-driven CSS variables. Defaults to the canonical Keboola brand so\n * callers can opt into a specific brand only when they need to assert\n * brand-dependent behaviour (e.g. chrome re-skins under `keboola-legacy`).\n *\n * `ThemeProvider` no longer drives the argo/legacy design language (that is\n * kbc-ui-specific), so this helper also provides `ArgoDesignContext` derived\n * from the brand — a legacy brand renders legacy chrome, any other renders\n * argo — matching how kbc-ui wires it, so brand-dependent chrome tests keep\n * working through a single `brand` option.\n */\nexport const renderWithTheme = (ui: ReactElement, options: Options = {}): RenderResult => {\n  const { brand = keboola, ...rest } = options;\n  const isArgo = !keboolaLegacyIds.includes(brand.id);\n  return render(ui, {\n    ...rest,\n    wrapper: ({ children }) => (\n      <ThemeProvider brands={[brand]} brandId={brand.id}>\n        <ArgoDesignContext value={isArgo}>{children}</ArgoDesignContext>\n      </ThemeProvider>\n    ),\n  });\n};\n"]}