@keboola/design 16.1.0 → 17.1.0

package/dist/testing.js

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "./ThemeProvider-BCHllN7d.js";
+import { ThemeProvider } from "./ThemeProvider-MzVbTDBj.js";
 import { jsx } from "react/jsx-runtime";
 import { keboola } from "@keboola/brand-registry";
 import { render } from "@testing-library/react";

package/dist/{utils-DjFceY3H.js → utils-BxEJOnFD.js}

@@ -265,7 +265,7 @@ const debounce = (fn, delay) => {
 const getIsMac = () => {
 	if (typeof navigator !== "undefined" && "userAgentData" in navigator) {
 		const platform = navigator.userAgentData.platform;
-		if (typeof platform === "string") return platform.toLowerCase() === "macos";
+		if (typeof platform === "string" && platform !== "") return platform.toLowerCase() === "macos";
 	}
 	if (typeof navigator !== "undefined" && typeof navigator.platform === "string") return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
 	return false;
@@ -314,4 +314,4 @@ const splitEntry = (entry, separator) => {
 };
 export { DEFAULT_ENTRY_SEPARATOR, HINT_UNDERLINE_CLASS_NAME, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, copyToClipboard, createChangeInputEvent, createPrefixedString, debounce, isMac, keyCodes, noop, splitEntry, useSHA256, withHiddenFullscreen, withTooltipProvider, withVisualSettle };
 
-//# sourceMappingURL=utils-DjFceY3H.js.map
+//# sourceMappingURL=utils-BxEJOnFD.js.map

package/dist/{utils-DjFceY3H.js.map → utils-BxEJOnFD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-DjFceY3H.js","names":["Root"],"sources":["../src/utils/copyToClipboard.ts","../src/utils/createChangeInputEvent.ts","../src/constants/keyCodes.ts","../src/components/Tooltip/TooltipContent.tsx","../src/components/Tooltip/TooltipRoot.tsx","../src/components/Tooltip/TooltipTitle.tsx","../src/components/Tooltip/TooltipTrigger.tsx","../src/components/Tooltip/Tooltip.tsx","../src/utils/decorators.tsx","../src/utils/createPrefixedString.ts","../src/utils/noop.ts","../src/utils/debounce.ts","../src/utils/isMac.ts","../src/utils/useSHA256.ts","../src/utils/splitEntry.ts"],"sourcesContent":["/**\n * The async Clipboard API requires the document to be focused and rejects with\n * `NotAllowedError: Document is not focused` otherwise — which is the normal state\n * for a page inside an iframe that has not taken focus, such as Storybook's canvas\n * or an embedded preview. `execCommand` has no such requirement because it copies\n * the selection of a node we focus ourselves, so it covers that gap.\n */\nconst copyViaSelection = (text: string) => {\n  const node = document.createElement('textarea');\n  node.value = text;\n  node.setAttribute('readonly', '');\n  node.style.cssText = 'position:fixed;top:0;left:0;opacity:0';\n  document.body.append(node);\n  node.select();\n\n  try {\n    return document.execCommand('copy');\n  } finally {\n    node.remove();\n  }\n};\n\nexport const copyToClipboard = async (text: string) => {\n  try {\n    await navigator.clipboard.writeText(text);\n  } catch (error) {\n    if (!copyViaSelection(text)) throw error;\n  }\n};\n","import type { ChangeEvent } from 'react';\n\nexport const createChangeInputEvent = (input: HTMLInputElement) => {\n  const changeEvent: ChangeEvent<HTMLInputElement> = {\n    target: input,\n    currentTarget: input,\n    type: 'change',\n    nativeEvent: new Event('change', { bubbles: true }),\n    bubbles: true,\n    cancelable: false,\n    defaultPrevented: false,\n    eventPhase: 2, // AT_TARGET\n    isTrusted: false,\n    preventDefault: () => {},\n    isDefaultPrevented: () => false,\n    stopPropagation: () => {},\n    isPropagationStopped: () => false,\n    persist: () => {},\n    timeStamp: Date.now(),\n  };\n\n  Object.defineProperty(changeEvent, 'target', {\n    value: input,\n    writable: false,\n  });\n\n  return changeEvent;\n};\n","export const keyCodes = {\n  ENTER: 'Enter',\n  ESCAPE: 'Escape',\n  SPACE: ' ',\n};\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\nconst tooltipVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:inline-block',\n    'tw:wrap-anywhere',\n    'tw:max-h-96',\n    'tw:overflow-y-auto',\n    // Above `z-overlay` — every modal, menu and popup.\n    'tw:z-[1060]',\n\n    // rich content\n    'tw:[&_hr]:my-3',\n    'tw:[&_hr]:border-current/20',\n    'tw:[&_p:last-of-type]:mb-0',\n\n    // chrome\n    'tw:rounded-popover',\n    'tw:border',\n    'tw:border-solid',\n    'tw:border-border',\n    'tw:bg-popover',\n    'tw:text-popover-foreground',\n    'tw:shadow-md',\n\n    // open animation\n    'tw:data-[state=delayed-open]:animate-in',\n    'tw:data-[state=instant-open]:animate-in',\n    'tw:data-[state=delayed-open]:fade-in-0',\n    'tw:data-[state=instant-open]:fade-in-0',\n    'tw:data-[state=delayed-open]:zoom-in-95',\n    'tw:data-[state=instant-open]:zoom-in-95',\n\n    // closed animation\n    'tw:data-[state=closed]:animate-out',\n    'tw:data-[state=closed]:fade-out-0',\n    'tw:data-[state=closed]:zoom-out-95',\n\n    // position animation\n    'tw:data-[side=bottom]:slide-in-from-top-2',\n    'tw:data-[side=left]:slide-in-from-right-2',\n    'tw:data-[side=right]:slide-in-from-left-2',\n    'tw:data-[side=top]: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        ],\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 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        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 { ComponentProps } from 'react';\nimport { Root } from '@radix-ui/react-tooltip';\n\ntype Props = ComponentProps<typeof Root>;\n\nconst DELAY_SHOW_TOOLTIP = 300;\n\nexport const TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }: Props) => (\n  <Root {...rest} delayDuration={delayDuration}>\n    {children}\n  </Root>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/**\n * Small uppercase heading above a rich tooltip's body copy, in the tooltip's text colour.\n */\nexport const TooltipTitle = ({ className, ...rest }: ComponentProps<'div'>) => (\n  <div\n    className={cn('tw:mb-2 tw:text-xs tw:leading-5 tw:font-semibold tw:uppercase', className)}\n    {...rest}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Trigger } from '@radix-ui/react-tooltip';\n\nimport { cn } from '../../utils';\n\n/**\n * Radix stamps the tooltip's own open/closed `data-state` onto the trigger. Merged onto an\n * `asChild` child that keeps a `data-state` of its own — `ToggleGroup.Item`, `Switch`, a `Tabs`\n * trigger — it wins, because those primitives spread incoming props *after* their own attribute.\n * The child then silently loses every `data-[state=…]` style it has, which is usually the only\n * thing marking it as selected.\n *\n * The tooltip's trigger state is styled nowhere, so it is dropped before it reaches the child.\n */\nconst WithoutTooltipState = ({\n  children,\n  ...props\n  // `Slot`'s own props, plus the one attribute this exists to remove: React's types declare no\n  // `data-*`, so it has to be named to be destructured away.\n}: ComponentProps<typeof Slot> & { 'data-state'?: string }) => {\n  const { 'data-state': _tooltipState, ...rest } = props;\n\n  return <Slot {...rest}>{children}</Slot>;\n};\n\ntype Props = {\n  keepOpenOnClick?: boolean;\n} & ComponentProps<typeof Trigger>;\n\nexport const TooltipTrigger = ({\n  ref,\n  children,\n  className,\n  keepOpenOnClick = false,\n  onClick,\n  onPointerDown,\n  asChild,\n  ...rest\n}: Props) => {\n  const handleClick: ComponentProps<typeof Trigger>['onClick'] = (event) => {\n    if (keepOpenOnClick) event.preventDefault();\n    onClick?.(event);\n  };\n\n  const handlePointerDown: ComponentProps<typeof Trigger>['onPointerDown'] = (event) => {\n    if (keepOpenOnClick) event.preventDefault();\n    onPointerDown?.(event);\n  };\n\n  return (\n    <Trigger\n      {...rest}\n      asChild\n      ref={ref}\n      className={cn('tailwindcss-preflight', className)}\n      onClick={handleClick}\n      onPointerDown={handlePointerDown}\n    >\n      {asChild ? (\n        <WithoutTooltipState>{children}</WithoutTooltipState>\n      ) : (\n        // Default-mode trigger wraps children in a span so Radix has a\n        // single DOM element to attach handlers to. `tailwindcss-preflight`\n        // (merged in via Slot) activates Tailwind's preflight inside the\n        // span, which sets `svg { display: block }` — without an inline-flex\n        // container that would stack any bare Lucide icon onto its own\n        // line. `tw:inline-flex tw:items-center` keeps icon + text aligned.\n        <span className=\"tw:inline-flex tw:items-center\">{children}</span>\n      )}\n    </Trigger>\n  );\n};\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 { TooltipTitle } from './TooltipTitle';\nimport { TooltipTrigger } from './TooltipTrigger';\n\nconst ACTION_TOOLTIP_LIMIT = 30;\n\nexport const HINT_UNDERLINE_CLASS_NAME =\n  'tw:cursor-help tw:underline tw:decoration-dashed tw:decoration-muted-foreground/50 tw:underline-offset-2';\n\ntype TriggerProps = {\n  triggerAsChild?: boolean;\n};\n\nexport type Props = {\n  /** Stays open on trigger click (click-to-copy feedback). */\n  keepOpenOnTriggerClick?: boolean;\n  /** Plain text only — interactive content belongs in `HoverCard` / `Popover`. */\n  tooltip: ReactNode;\n  children: ReactNode;\n  placement?: ComponentProps<typeof Content>['side'];\n  /** Hides it regardless of hover. */\n  forceHide?: boolean;\n  /** Shows it regardless of hover (e.g. guided tours). */\n  forceShow?: boolean;\n  /** In ms; defaults to the shared 300ms. */\n  delayDuration?: number;\n  /** Dashed-underline hover hint on the trigger. */\n  hintUnderline?: boolean;\n  className?: string;\n} & TriggerProps &\n  Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;\n\n/** Mount once at the app root so tooltips share delay state. */\nexport const TooltipProvider = Provider;\n\n/**\n * Short plain-text label on hover or focus.\n *\n * - Use for icon-only buttons, disabled controls, truncated values.\n * - Rich content → `HoverCard`; links or buttons → `Popover` (they break a11y here).\n * - `variant` defaults to `\"explanatory\"` for strings over 30 chars, else `\"action\"`.\n * - A disabled `Button` takes `disabledReason` instead.\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  delayDuration,\n  triggerAsChild = false,\n  hintUnderline = 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      delayDuration={delayDuration}\n      disableHoverableContent={isActionVariant}\n    >\n      <TooltipTrigger\n        asChild={triggerAsChild}\n        keepOpenOnClick={keepOpenOnTriggerClick}\n        onKeyUp={handleKeyUp}\n        className={hintUnderline ? HINT_UNDERLINE_CLASS_NAME : undefined}\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;\nTooltip.Title = TooltipTitle;\n","import type { ComponentType } from 'react';\n\nimport { TooltipProvider } from '../components/Tooltip';\n\nexport const withTooltipProvider = (Story: ComponentType) => (\n  <TooltipProvider>\n    <Story />\n  </TooltipProvider>\n);\n\n// Marks a story whose final render arrives asynchronously (lazy chunk, debounced\n// parse). The visual suite waits for every `[data-skeleton]` inside this box to\n// unmount before capturing, so the baseline is the settled content, never the\n// placeholder it briefly shows.\nexport const withVisualSettle = (Story: ComponentType) => (\n  <div data-visual-settle>\n    <Story />\n  </div>\n);\n\n// position:fixed only fills the Storybook iframe, not the browser window.\nexport const withHiddenFullscreen = (Story: ComponentType) => (\n  <div className=\"tw:[&_[aria-label=Fullscreen]]:hidden\">\n    <Story />\n  </div>\n);\n","export const createPrefixedString = (prefix: string) => (literals: TemplateStringsArray) =>\n  literals.reduce((acc, literal) => acc + literal, `${prefix}-`);\n","export const noop = () => void 0;\n","type DebouncedFn<T extends (...args: any[]) => void> = {\n  (...args: Parameters<T>): void;\n  cancel: () => void;\n};\n\nexport const debounce = <T extends (...args: any[]) => void>(\n  fn: T,\n  delay: number,\n): DebouncedFn<T> => {\n  let timeoutId: ReturnType<typeof setTimeout>;\n  const debounced = (...args: Parameters<T>) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n  debounced.cancel = () => clearTimeout(timeoutId);\n  return debounced;\n};\n","// Platform detection\ntype NavigatorUAData = {\n  platform: string;\n  brands: { brand: string; version: string }[];\n  mobile: boolean;\n};\n\nconst getIsMac = (): boolean => {\n  // Modern approach using navigator.userAgentData\n  if (typeof navigator !== 'undefined' && 'userAgentData' in navigator) {\n    const platform = (navigator.userAgentData as NavigatorUAData).platform;\n\n    if (typeof platform === 'string') {\n      return platform.toLowerCase() === 'macos';\n    }\n  }\n\n  if (typeof navigator !== 'undefined' && typeof navigator.platform === 'string') {\n    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;\n  }\n\n  // Server-side rendering fallback\n  return false;\n};\n\nexport const isMac = getIsMac();\n","import { useEffect, useState } from 'react';\n\n// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string\nconst sha256 = async (text: string) => {\n  const msgUint8 = new TextEncoder().encode(text);\n  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);\n  const hashArray = Array.from(new Uint8Array(hashBuffer));\n  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');\n};\n\nexport const useSHA256 = (text?: string) => {\n  const [hash, setHash] = useState('');\n\n  useEffect(() => {\n    if (!text) return;\n    let cancelled = false;\n    sha256(text).then((h) => {\n      if (!cancelled) setHash(h);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [text]);\n\n  // Empty input has no hash — derive it during render instead of syncing state\n  // in the effect (avoids the extra render and a stale-value frame).\n  return text ? hash : '';\n};\n","/** The separator a typed entry is split on when the caller names none. */\nexport const DEFAULT_ENTRY_SEPARATOR = ',';\n\n/**\n * The strings one typed entry stands for.\n *\n * - Parts are trimmed; blanks dropped.\n * - Repeats collapse case-insensitively, matching the combobox's display-string matching.\n * - A `null` separator returns the entry verbatim, untrimmed — the caller must reject blank text.\n */\nexport const splitEntry = (entry: string, separator: string | RegExp | null): string[] => {\n  if (separator === null) return [entry];\n\n  const seen = new Set<string>();\n  return entry\n    .split(separator)\n    .map((part) => part.trim())\n    .filter((part) => {\n      if (part === '') return false;\n      const key = part.toLowerCase();\n      if (seen.has(key)) return false;\n      seen.add(key);\n      return true;\n    });\n};\n"],"mappings":"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"}
+{"version":3,"file":"utils-BxEJOnFD.js","names":["Root"],"sources":["../src/utils/copyToClipboard.ts","../src/utils/createChangeInputEvent.ts","../src/constants/keyCodes.ts","../src/components/Tooltip/TooltipContent.tsx","../src/components/Tooltip/TooltipRoot.tsx","../src/components/Tooltip/TooltipTitle.tsx","../src/components/Tooltip/TooltipTrigger.tsx","../src/components/Tooltip/Tooltip.tsx","../src/utils/decorators.tsx","../src/utils/createPrefixedString.ts","../src/utils/noop.ts","../src/utils/debounce.ts","../src/utils/isMac.ts","../src/utils/useSHA256.ts","../src/utils/splitEntry.ts"],"sourcesContent":["/**\n * The async Clipboard API requires the document to be focused and rejects with\n * `NotAllowedError: Document is not focused` otherwise — which is the normal state\n * for a page inside an iframe that has not taken focus, such as Storybook's canvas\n * or an embedded preview. `execCommand` has no such requirement because it copies\n * the selection of a node we focus ourselves, so it covers that gap.\n */\nconst copyViaSelection = (text: string) => {\n  const node = document.createElement('textarea');\n  node.value = text;\n  node.setAttribute('readonly', '');\n  node.style.cssText = 'position:fixed;top:0;left:0;opacity:0';\n  document.body.append(node);\n  node.select();\n\n  try {\n    return document.execCommand('copy');\n  } finally {\n    node.remove();\n  }\n};\n\nexport const copyToClipboard = async (text: string) => {\n  try {\n    await navigator.clipboard.writeText(text);\n  } catch (error) {\n    if (!copyViaSelection(text)) throw error;\n  }\n};\n","import type { ChangeEvent } from 'react';\n\nexport const createChangeInputEvent = (input: HTMLInputElement) => {\n  const changeEvent: ChangeEvent<HTMLInputElement> = {\n    target: input,\n    currentTarget: input,\n    type: 'change',\n    nativeEvent: new Event('change', { bubbles: true }),\n    bubbles: true,\n    cancelable: false,\n    defaultPrevented: false,\n    eventPhase: 2, // AT_TARGET\n    isTrusted: false,\n    preventDefault: () => {},\n    isDefaultPrevented: () => false,\n    stopPropagation: () => {},\n    isPropagationStopped: () => false,\n    persist: () => {},\n    timeStamp: Date.now(),\n  };\n\n  Object.defineProperty(changeEvent, 'target', {\n    value: input,\n    writable: false,\n  });\n\n  return changeEvent;\n};\n","export const keyCodes = {\n  ENTER: 'Enter',\n  ESCAPE: 'Escape',\n  SPACE: ' ',\n};\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\nconst tooltipVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:inline-block',\n    'tw:wrap-anywhere',\n    'tw:max-h-96',\n    'tw:overflow-y-auto',\n    // Above `z-overlay` — every modal, menu and popup.\n    'tw:z-[1060]',\n\n    // rich content\n    'tw:[&_hr]:my-3',\n    'tw:[&_hr]:border-current/20',\n    'tw:[&_p:last-of-type]:mb-0',\n\n    // chrome\n    'tw:rounded-popover',\n    'tw:border',\n    'tw:border-solid',\n    'tw:border-border',\n    'tw:bg-popover',\n    'tw:text-popover-foreground',\n    'tw:shadow-md',\n\n    // open animation\n    'tw:data-[state=delayed-open]:animate-in',\n    'tw:data-[state=instant-open]:animate-in',\n    'tw:data-[state=delayed-open]:fade-in-0',\n    'tw:data-[state=instant-open]:fade-in-0',\n    'tw:data-[state=delayed-open]:zoom-in-95',\n    'tw:data-[state=instant-open]:zoom-in-95',\n\n    // closed animation\n    'tw:data-[state=closed]:animate-out',\n    'tw:data-[state=closed]:fade-out-0',\n    'tw:data-[state=closed]:zoom-out-95',\n\n    // position animation\n    'tw:data-[side=bottom]:slide-in-from-top-2',\n    'tw:data-[side=left]:slide-in-from-right-2',\n    'tw:data-[side=right]:slide-in-from-left-2',\n    'tw:data-[side=top]: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        ],\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 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        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 { ComponentProps } from 'react';\nimport { Root } from '@radix-ui/react-tooltip';\n\ntype Props = ComponentProps<typeof Root>;\n\nconst DELAY_SHOW_TOOLTIP = 300;\n\nexport const TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }: Props) => (\n  <Root {...rest} delayDuration={delayDuration}>\n    {children}\n  </Root>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/**\n * Small uppercase heading above a rich tooltip's body copy, in the tooltip's text colour.\n */\nexport const TooltipTitle = ({ className, ...rest }: ComponentProps<'div'>) => (\n  <div\n    className={cn('tw:mb-2 tw:text-xs tw:leading-5 tw:font-semibold tw:uppercase', className)}\n    {...rest}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Trigger } from '@radix-ui/react-tooltip';\n\nimport { cn } from '../../utils';\n\n/**\n * Radix stamps the tooltip's own open/closed `data-state` onto the trigger. Merged onto an\n * `asChild` child that keeps a `data-state` of its own — `ToggleGroup.Item`, `Switch`, a `Tabs`\n * trigger — it wins, because those primitives spread incoming props *after* their own attribute.\n * The child then silently loses every `data-[state=…]` style it has, which is usually the only\n * thing marking it as selected.\n *\n * The tooltip's trigger state is styled nowhere, so it is dropped before it reaches the child.\n */\nconst WithoutTooltipState = ({\n  children,\n  ...props\n  // `Slot`'s own props, plus the one attribute this exists to remove: React's types declare no\n  // `data-*`, so it has to be named to be destructured away.\n}: ComponentProps<typeof Slot> & { 'data-state'?: string }) => {\n  const { 'data-state': _tooltipState, ...rest } = props;\n\n  return <Slot {...rest}>{children}</Slot>;\n};\n\ntype Props = {\n  keepOpenOnClick?: boolean;\n} & ComponentProps<typeof Trigger>;\n\nexport const TooltipTrigger = ({\n  ref,\n  children,\n  className,\n  keepOpenOnClick = false,\n  onClick,\n  onPointerDown,\n  asChild,\n  ...rest\n}: Props) => {\n  const handleClick: ComponentProps<typeof Trigger>['onClick'] = (event) => {\n    if (keepOpenOnClick) event.preventDefault();\n    onClick?.(event);\n  };\n\n  const handlePointerDown: ComponentProps<typeof Trigger>['onPointerDown'] = (event) => {\n    if (keepOpenOnClick) event.preventDefault();\n    onPointerDown?.(event);\n  };\n\n  return (\n    <Trigger\n      {...rest}\n      asChild\n      ref={ref}\n      className={cn('tailwindcss-preflight', className)}\n      onClick={handleClick}\n      onPointerDown={handlePointerDown}\n    >\n      {asChild ? (\n        <WithoutTooltipState>{children}</WithoutTooltipState>\n      ) : (\n        // Default-mode trigger wraps children in a span so Radix has a\n        // single DOM element to attach handlers to. `tailwindcss-preflight`\n        // (merged in via Slot) activates Tailwind's preflight inside the\n        // span, which sets `svg { display: block }` — without an inline-flex\n        // container that would stack any bare Lucide icon onto its own\n        // line. `tw:inline-flex tw:items-center` keeps icon + text aligned.\n        <span className=\"tw:inline-flex tw:items-center\">{children}</span>\n      )}\n    </Trigger>\n  );\n};\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 { TooltipTitle } from './TooltipTitle';\nimport { TooltipTrigger } from './TooltipTrigger';\n\nconst ACTION_TOOLTIP_LIMIT = 30;\n\nexport const HINT_UNDERLINE_CLASS_NAME =\n  'tw:cursor-help tw:underline tw:decoration-dashed tw:decoration-muted-foreground/50 tw:underline-offset-2';\n\ntype TriggerProps = {\n  triggerAsChild?: boolean;\n};\n\nexport type Props = {\n  /** Stays open on trigger click (click-to-copy feedback). */\n  keepOpenOnTriggerClick?: boolean;\n  /** Plain text only — interactive content belongs in `HoverCard` / `Popover`. */\n  tooltip: ReactNode;\n  children: ReactNode;\n  placement?: ComponentProps<typeof Content>['side'];\n  /** Hides it regardless of hover. */\n  forceHide?: boolean;\n  /** Shows it regardless of hover (e.g. guided tours). */\n  forceShow?: boolean;\n  /** In ms; defaults to the shared 300ms. */\n  delayDuration?: number;\n  /** Dashed-underline hover hint on the trigger. */\n  hintUnderline?: boolean;\n  className?: string;\n} & TriggerProps &\n  Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;\n\n/** Mount once at the app root so tooltips share delay state. */\nexport const TooltipProvider = Provider;\n\n/**\n * Short plain-text label on hover or focus.\n *\n * - Use for icon-only buttons, disabled controls, truncated values.\n * - Rich content → `HoverCard`; links or buttons → `Popover` (they break a11y here).\n * - `variant` defaults to `\"explanatory\"` for strings over 30 chars, else `\"action\"`.\n * - A disabled `Button` takes `disabledReason` instead.\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  delayDuration,\n  triggerAsChild = false,\n  hintUnderline = 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      delayDuration={delayDuration}\n      disableHoverableContent={isActionVariant}\n    >\n      <TooltipTrigger\n        asChild={triggerAsChild}\n        keepOpenOnClick={keepOpenOnTriggerClick}\n        onKeyUp={handleKeyUp}\n        className={hintUnderline ? HINT_UNDERLINE_CLASS_NAME : undefined}\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;\nTooltip.Title = TooltipTitle;\n","import type { ComponentType } from 'react';\n\nimport { TooltipProvider } from '../components/Tooltip';\n\nexport const withTooltipProvider = (Story: ComponentType) => (\n  <TooltipProvider>\n    <Story />\n  </TooltipProvider>\n);\n\n// Marks a story whose final render arrives asynchronously (lazy chunk, debounced\n// parse). The visual suite waits for every `[data-skeleton]` inside this box to\n// unmount before capturing, so the baseline is the settled content, never the\n// placeholder it briefly shows.\nexport const withVisualSettle = (Story: ComponentType) => (\n  <div data-visual-settle>\n    <Story />\n  </div>\n);\n\n// position:fixed only fills the Storybook iframe, not the browser window.\nexport const withHiddenFullscreen = (Story: ComponentType) => (\n  <div className=\"tw:[&_[aria-label=Fullscreen]]:hidden\">\n    <Story />\n  </div>\n);\n","export const createPrefixedString = (prefix: string) => (literals: TemplateStringsArray) =>\n  literals.reduce((acc, literal) => acc + literal, `${prefix}-`);\n","export const noop = () => void 0;\n","type DebouncedFn<T extends (...args: any[]) => void> = {\n  (...args: Parameters<T>): void;\n  cancel: () => void;\n};\n\nexport const debounce = <T extends (...args: any[]) => void>(\n  fn: T,\n  delay: number,\n): DebouncedFn<T> => {\n  let timeoutId: ReturnType<typeof setTimeout>;\n  const debounced = (...args: Parameters<T>) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n  debounced.cancel = () => clearTimeout(timeoutId);\n  return debounced;\n};\n","// Platform detection\ntype NavigatorUAData = {\n  platform: string;\n  brands: { brand: string; version: string }[];\n  mobile: boolean;\n};\n\nconst getIsMac = (): boolean => {\n  // Modern approach using navigator.userAgentData\n  if (typeof navigator !== 'undefined' && 'userAgentData' in navigator) {\n    const platform = (navigator.userAgentData as NavigatorUAData).platform;\n\n    // An empty hint (a user-agent override, DevTools emulation) falls back to `navigator.platform`.\n    if (typeof platform === 'string' && platform !== '') {\n      return platform.toLowerCase() === 'macos';\n    }\n  }\n\n  if (typeof navigator !== 'undefined' && typeof navigator.platform === 'string') {\n    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;\n  }\n\n  // Server-side rendering fallback\n  return false;\n};\n\nexport const isMac = getIsMac();\n","import { useEffect, useState } from 'react';\n\n// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string\nconst sha256 = async (text: string) => {\n  const msgUint8 = new TextEncoder().encode(text);\n  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);\n  const hashArray = Array.from(new Uint8Array(hashBuffer));\n  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');\n};\n\nexport const useSHA256 = (text?: string) => {\n  const [hash, setHash] = useState('');\n\n  useEffect(() => {\n    if (!text) return;\n    let cancelled = false;\n    sha256(text).then((h) => {\n      if (!cancelled) setHash(h);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [text]);\n\n  // Empty input has no hash — derive it during render instead of syncing state\n  // in the effect (avoids the extra render and a stale-value frame).\n  return text ? hash : '';\n};\n","/** The separator a typed entry is split on when the caller names none. */\nexport const DEFAULT_ENTRY_SEPARATOR = ',';\n\n/**\n * The strings one typed entry stands for.\n *\n * - Parts are trimmed; blanks dropped.\n * - Repeats collapse case-insensitively, matching the combobox's display-string matching.\n * - A `null` separator returns the entry verbatim, untrimmed — the caller must reject blank text.\n */\nexport const splitEntry = (entry: string, separator: string | RegExp | null): string[] => {\n  if (separator === null) return [entry];\n\n  const seen = new Set<string>();\n  return entry\n    .split(separator)\n    .map((part) => part.trim())\n    .filter((part) => {\n      if (part === '') return false;\n      const key = part.toLowerCase();\n      if (seen.has(key)) return false;\n      seen.add(key);\n      return true;\n    });\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "16.1.0",
+  "version": "17.1.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -122,7 +122,7 @@
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
     "@keboola/agent-vocabulary": "^0.2.0",
-    "@keboola/eslint-plugin-design": "^0.6.0",
+    "@keboola/eslint-plugin-design": "^0.7.0",
     "@keboola/oxlint-config": "^10.2.0",
     "@keboola/tsconfig": "^0.2.1",
     "@keboola/vitest-config": "^1.0.0",
@@ -196,7 +196,7 @@
     "@iconify-json/lucide": "^1.2.118",
     "@keboola/brand-registry": "^3.1.0",
     "@keboola/codemirror-lang-sql": "^0.7.4",
-    "@keboola/tailwind-config": "^1.2.0",
+    "@keboola/tailwind-config": "^1.2.1",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
     "@lexical/list": "^0.42.0",

package/src/styles.css

@@ -213,6 +213,7 @@
   --font-display: var(
     --font-sans,
     'Inter',
+    'Inter Fallback',
     system-ui,
     -apple-system,
     'Segoe UI',
@@ -415,6 +416,54 @@
         format('woff2');
   }
 
+  /* `Inter Fallback` — Arial scaled to Inter's metrics, painted until Inter arrives.
+     - Listed right after `Inter` in every Inter stack, so the swap reflows no text.
+     - `size-adjust` matches Inter's average advance width per weight.
+     - The overrides are Inter's ascent (96.9%) and descent (24.1%) divided by `size-adjust`.
+     - Liberation Sans shares Arial's metrics.
+     - `unicode-range` is the Inter subset's coverage; a glyph Inter lacks (`→`) comes from system-ui. */
+  @font-face {
+    font-family: 'Inter Fallback';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Arial'), local('Liberation Sans');
+    unicode-range:
+      U+0020-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2002-2044, U+2074,
+      U+20A0-20BF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2C7C, U+2C7F, U+A7FF, U+FEFF;
+    size-adjust: 106.37%;
+    ascent-override: 91.1%;
+    descent-override: 22.66%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: 'Inter Fallback';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Arial'), local('Liberation Sans');
+    unicode-range:
+      U+0020-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2002-2044, U+2074,
+      U+20A0-20BF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2C7C, U+2C7F, U+A7FF, U+FEFF;
+    size-adjust: 107.5%;
+    ascent-override: 90.14%;
+    descent-override: 22.42%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: 'Inter Fallback';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Arial Bold'), local('Liberation Sans Bold');
+    unicode-range:
+      U+0020-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2002-2044, U+2074,
+      U+20A0-20BF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2C7C, U+2C7F, U+A7FF, U+FEFF;
+    size-adjust: 101.29%;
+    ascent-override: 95.67%;
+    descent-override: 23.79%;
+    line-gap-override: 0%;
+  }
+
   html {
     /* Brand font opt-in: a brand's `typography.fontFamily` is injected as
        `--font-sans` by ThemeProvider and inherited from `html`; absent a brand
@@ -425,6 +474,7 @@
     font-family: var(
       --font-sans,
       'Inter',
+      'Inter Fallback',
       system-ui,
       -apple-system,
       'Segoe UI',

package/src/theme.css

@@ -21,9 +21,9 @@
    * name is prefixed (`--tw-font-sans`) and so cannot cycle with the runtime var it
    * reads — unlike `font-display`, which must stay an @utility. */
   --font-sans:
-    var(--font-sans, Inter), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+    var(--font-sans, Inter, 'Inter Fallback'), system-ui, -apple-system, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Legacy Bootstrap-era breakpoints (screens). */
   --breakpoint-sm-legacy: 992px;
@@ -566,7 +566,7 @@
 /* Scroll-container edge fade — `scroll-fade` (= `scroll-fade-y`) and `scroll-fade-x`.
  * - A mask driven by scroll-driven animations; each edge holds 1 (solid) until there is overflow past it.
  * - `--tw-scroll-fade-size` sets the depth; `--tw-scroll-fade-size-start` overrides the leading edge.
- * - Browsers without scroll timelines show a static fade on both edges. */
+ * - Browsers without scroll timelines show no fade: the reveal animations are off, both edges solid. */
 @property --tw-scroll-fade-start {
   syntax: '<number>';
   inherits: false;
@@ -613,8 +613,9 @@
     calc(100% - var(--tw-scroll-fade-size)) 100%;
 
   @supports not (animation-timeline: scroll()) {
-    --tw-scroll-fade-start: 0;
-    --tw-scroll-fade-end: 0;
+    animation: none;
+    --tw-scroll-fade-start: 1;
+    --tw-scroll-fade-end: 1;
   }
 }
 @utility scroll-fade {
@@ -640,7 +641,8 @@
     calc(100% - var(--tw-scroll-fade-size)) 100%;
 
   @supports not (animation-timeline: scroll()) {
-    --tw-scroll-fade-start: 0;
-    --tw-scroll-fade-end: 0;
+    animation: none;
+    --tw-scroll-fade-start: 1;
+    --tw-scroll-fade-end: 1;
   }
 }