@cube-dev/ui-kit 0.137.1 → 0.138.0

package/dist/components/overlays/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["mergeProps"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import { createDOMRef } from '@react-spectrum/utils';\nimport { DOMRefValue } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTooltipProps, useTooltip } from 'react-aria';\n\nimport { PlacementAxis } from '../../../shared';\nimport { mergeProps, mergeRefs, useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TooltipContext } from './context';\n\nexport type { AriaTooltipProps };\n\nconst TooltipElement = tasty({\n  styles: {\n    display: 'block',\n    fill: {\n      '': '#dark.85',\n      light: '#white',\n    },\n    color: {\n      '': '#white',\n      light: '#dark-02',\n    },\n    width: 'initial min(36x, (100dvw - 4x)) max-content',\n    radius: true,\n    padding: '.75x 1x',\n    preset: 't4',\n    backdropFilter: 'blur(.5x)',\n    whiteSpace: 'pre-line',\n    pointerEvents: {\n      '': 'none',\n      material: 'auto',\n    },\n    filter: {\n      '': false,\n      light: 'drop-shadow(0 0 1px #dark.2)',\n    },\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & [data-placement=\"bottom\"]': '0 0',\n      '!open & [data-placement=\"bottom\"]': '0 -1x',\n      'open & [data-placement=\"left\"]': '0 0',\n      '!open & [data-placement=\"left\"]': '1x 0',\n      'open & [data-placement=\"right\"]': '0 0',\n      '!open & [data-placement=\"right\"]': '-1x 0',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n      '[data-placement=\"left\"]': 'right center',\n      '[data-placement=\"right\"]': 'left center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .8',\n      '!open & ([data-placement=\"left\"] | [data-placement=\"right\"])': '.8 1',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n  },\n});\n\nconst TooltipTipElement = tasty({\n  styles: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    border: '.5x #clear',\n    borderTop: {\n      '': '.5x solid #dark.85',\n      light: '.5x solid #white',\n    },\n    borderBottom: '0',\n    top: {\n      '': 'initial',\n      '[data-placement=\"left\"] | [data-placement=\"right\"]': '50%',\n      '[data-placement=\"top\"]': '100%',\n    },\n    left: {\n      '': 'initial',\n      '[data-placement=\"top\"] | [data-placement=\"bottom\"]': '50%',\n      '[data-placement=\"left\"]': '100%',\n    },\n    right: {\n      '': 'initial',\n      '[data-placement=\"right\"]': '100%',\n    },\n    bottom: {\n      '': 'initial',\n      '[data-placement=\"bottom\"]': '100%',\n    },\n    transform: {\n      '': 'translate((-.375x - 1px), 0)',\n      '[data-placement=\"bottom\"]':\n        'translate((-.375x - 1px), 0) rotate(180deg)',\n      '[data-placement=\"left\"]': 'translate(-.25x, -.25x) rotate(270deg)',\n      '[data-placement=\"right\"]': 'translate(.25x, -.25x) rotate(90deg)',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeTooltipProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaTooltipProps {\n  tipStyles?: Styles;\n  showIcon?: boolean;\n  placement?: PlacementAxis;\n  isMaterial?: boolean;\n  isOpen?: boolean;\n  isLight?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  shouldFlip?: boolean;\n}\n\nfunction Tooltip(\n  props: CubeTooltipProps,\n  ref: ForwardedRef<DOMRefValue<HTMLDivElement>>,\n) {\n  let {\n    ref: overlayRef,\n    transitionRef,\n    arrowProps,\n    state,\n    overlayProps,\n    minOffset,\n    minScale,\n    isMaterial: isMaterialContext,\n    isLight: isLightContext,\n    phase,\n    isShown,\n    updatePosition,\n    ...tooltipProviderProps\n  } = useContext(TooltipContext);\n\n  const defaultRef = useRef<HTMLDivElement>(null);\n  const combinedRef = mergeRefs(transitionRef, overlayRef ?? defaultRef);\n  const finalOverlayRef = overlayRef ?? defaultRef;\n\n  props = mergeProps(props, tooltipProviderProps);\n\n  let {\n    placement = 'top',\n    isOpen,\n    tipStyles,\n    showIcon,\n    isMaterial = isMaterialContext,\n    isLight = isLightContext,\n    ...otherProps\n  } = props;\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let { tooltipProps } = useTooltip({ ...props, isDismissable: false }, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(finalOverlayRef));\n\n  if (typeof minOffset === 'number') {\n    minOffset = `${minOffset}px`;\n  }\n\n  if (typeof minScale === 'number') {\n    minScale = String(minScale);\n  }\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || placement || 'top';\n\n  const mods = useMemo(() => {\n    return {\n      material: isMaterial,\n      light: isLight,\n      open: isShown ?? isOpen,\n    };\n  }, [isMaterial, isShown, isOpen, isLight]);\n\n  // Update position when tooltip becomes visible\n  useLayoutEffect(() => {\n    updatePosition?.();\n  }, []);\n\n  return (\n    <TooltipElement\n      {...tooltipProps}\n      {...overlayProps}\n      ref={combinedRef}\n      styles={styles}\n      mods={mods}\n      data-min-offset={minOffset}\n      data-min-scale={minScale}\n      data-placement={placementDirection}\n      data-phase={phase}\n    >\n      {props.children}\n      <TooltipTipElement\n        data-placement={placementDirection}\n        styles={tipStyles}\n        mods={mods}\n        {...arrowProps}\n      />\n    </TooltipElement>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\n\n_Tooltip.displayName = 'Tooltip';\n\nexport { _Tooltip as Tooltip };\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,iBAAiB,MAAM,EAC3B,QAAQ;CACN,SAAS;CACT,MAAM;EACJ,IAAI;EACJ,OAAO;EACR;CACD,OAAO;EACL,IAAI;EACJ,OAAO;EACR;CACD,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,YAAY;CACZ,eAAe;EACb,IAAI;EACJ,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,OAAO;EACR;CACD,YACE;CACF,WAAW;EACT,IAAI;EACJ,mCAAiC;EACjC,oCAAkC;EAClC,sCAAoC;EACpC,uCAAqC;EACrC,oCAAkC;EAClC,qCAAmC;EACnC,qCAAmC;EACnC,sCAAoC;EACrC;CACD,iBAAiB;EACf,IAAI;EACJ,4BAA0B;EAC1B,6BAA2B;EAC3B,8BAA4B;EAC7B;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACT,oEAAgE;EACjE;CACD,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACF,EACF,CAAC;AAEF,MAAM,oBAAoB,MAAM,EAC9B,QAAQ;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,WAAW;EACT,IAAI;EACJ,OAAO;EACR;CACD,cAAc;CACd,KAAK;EACH,IAAI;EACJ,0DAAsD;EACtD,4BAA0B;EAC3B;CACD,MAAM;EACJ,IAAI;EACJ,0DAAsD;EACtD,6BAA2B;EAC5B;CACD,OAAO;EACL,IAAI;EACJ,8BAA4B;EAC7B;CACD,QAAQ;EACN,IAAI;EACJ,+BAA6B;EAC9B;CACD,WAAW;EACT,IAAI;EACJ,+BACE;EACF,6BAA2B;EAC3B,8BAA4B;EAC7B;CACD,YAAY;CACb,EACF,CAAC;AAiBF,SAAS,QACP,OACA,KACA;CACA,IAAI,EACF,KAAK,YACL,eACA,YACA,OACA,cACA,WACA,UACA,YAAY,mBACZ,SAAS,gBACT,OACA,SACA,gBACA,GAAG,yBACD,WAAW,eAAe;CAE9B,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,cAAc,UAAU,eAAe,cAAc,WAAW;CACtE,MAAM,kBAAkB,cAAc;AAEtC,SAAQA,aAAW,OAAO,qBAAqB;CAE/C,IAAI,EACF,YAAY,OACZ,QACA,WACA,UACA,aAAa,mBACb,UAAU,gBACV,GAAG,eACD;CAEJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,EAAE,iBAAiB,WAAW;EAAE,GAAG;EAAO,eAAe;EAAO,EAAE,MAAM;AAG5E,qBAAoB,WAAW,aAAa,gBAAgB,CAAC;AAE7D,KAAI,OAAO,cAAc,SACvB,aAAY,GAAG,UAAU;AAG3B,KAAI,OAAO,aAAa,SACtB,YAAW,OAAO,SAAS;CAI7B,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM,aAAa;CAEpE,MAAM,OAAO,cAAc;AACzB,SAAO;GACL,UAAU;GACV,OAAO;GACP,MAAM,WAAW;GAClB;IACA;EAAC;EAAY;EAAS;EAAQ;EAAQ,CAAC;AAG1C,yBAAsB;AACpB,oBAAkB;IACjB,EAAE,CAAC;AAEN,QACE,qBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK;EACG;EACF;EACN,mBAAiB;EACjB,kBAAgB;EAChB,kBAAgB;EAChB,cAAY;aAEX,MAAM,UACP,oBAAC;GACC,kBAAgB;GAChB,QAAQ;GACF;GACN,GAAI;IACJ;GACa;;;;;AAOrB,IAAI,WAAW,WAAW,QAAQ;AAElC,SAAS,cAAc"}
+{"version":3,"file":"Tooltip.js","names":["mergeProps"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import { createDOMRef } from '@react-spectrum/utils';\nimport { DOMRefValue } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTooltipProps, useTooltip } from 'react-aria';\n\nimport { PlacementAxis } from '../../../shared';\nimport { mergeProps, mergeRefs, useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TooltipContext } from './context';\n\nexport type { AriaTooltipProps };\n\nconst TooltipElement = tasty({\n  styles: {\n    display: 'block',\n    // The DEFAULT (dark) tooltip is intentionally scheme-invariant:\n    // `#surface-inverse.85` + `#white` keep it the \"always dark\" tooltip in\n    // light, dark, and high-contrast schemes — matching the legacy `#dark.85`\n    // + `#white` design.\n    //\n    // The `light` variant uses the adaptive surface tokens (`#surface` +\n    // `#surface-text-soft`) so it follows the page scheme. This restores the\n    // softer legacy `#dark-02` look in light mode (cr≈9.2) and stays AA-safe\n    // in dark mode (the previous fixed `#surface-inverse` was much darker\n    // than the legacy `#dark-02`, and pairing the fixed `#white` fill with\n    // the adaptive `#surface-text-soft` text — the LEGACY_ALIASES port of\n    // `#dark-02` — would collapse to cr≈1.8 in dark schemes; using `#surface`\n    // for the fill keeps both ends of the pair adapting together).\n    fill: {\n      '': '#surface-inverse.85',\n      light: '#surface',\n    },\n    color: {\n      '': '#white',\n      light: '#surface-text-soft',\n    },\n    width: 'initial min(36x, (100dvw - 4x)) max-content',\n    radius: true,\n    padding: '.75x 1x',\n    preset: 't4',\n    backdropFilter: 'blur(.5x)',\n    whiteSpace: 'pre-line',\n    pointerEvents: {\n      '': 'none',\n      material: 'auto',\n    },\n    filter: {\n      '': false,\n      light: 'drop-shadow(0 0 1px #surface-text-soft.2)',\n    },\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & [data-placement=\"bottom\"]': '0 0',\n      '!open & [data-placement=\"bottom\"]': '0 -1x',\n      'open & [data-placement=\"left\"]': '0 0',\n      '!open & [data-placement=\"left\"]': '1x 0',\n      'open & [data-placement=\"right\"]': '0 0',\n      '!open & [data-placement=\"right\"]': '-1x 0',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n      '[data-placement=\"left\"]': 'right center',\n      '[data-placement=\"right\"]': 'left center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .8',\n      '!open & ([data-placement=\"left\"] | [data-placement=\"right\"])': '.8 1',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n  },\n});\n\nconst TooltipTipElement = tasty({\n  styles: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    border: '.5x #clear',\n    borderTop: {\n      '': '.5x solid #surface-inverse.85',\n      light: '.5x solid #surface',\n    },\n    borderBottom: '0',\n    top: {\n      '': 'initial',\n      '[data-placement=\"left\"] | [data-placement=\"right\"]': '50%',\n      '[data-placement=\"top\"]': '100%',\n    },\n    left: {\n      '': 'initial',\n      '[data-placement=\"top\"] | [data-placement=\"bottom\"]': '50%',\n      '[data-placement=\"left\"]': '100%',\n    },\n    right: {\n      '': 'initial',\n      '[data-placement=\"right\"]': '100%',\n    },\n    bottom: {\n      '': 'initial',\n      '[data-placement=\"bottom\"]': '100%',\n    },\n    transform: {\n      '': 'translate((-.375x - 1px), 0)',\n      '[data-placement=\"bottom\"]':\n        'translate((-.375x - 1px), 0) rotate(180deg)',\n      '[data-placement=\"left\"]': 'translate(-.25x, -.25x) rotate(270deg)',\n      '[data-placement=\"right\"]': 'translate(.25x, -.25x) rotate(90deg)',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeTooltipProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaTooltipProps {\n  tipStyles?: Styles;\n  showIcon?: boolean;\n  placement?: PlacementAxis;\n  isMaterial?: boolean;\n  isOpen?: boolean;\n  isLight?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  shouldFlip?: boolean;\n}\n\nfunction Tooltip(\n  props: CubeTooltipProps,\n  ref: ForwardedRef<DOMRefValue<HTMLDivElement>>,\n) {\n  let {\n    ref: overlayRef,\n    transitionRef,\n    arrowProps,\n    state,\n    overlayProps,\n    minOffset,\n    minScale,\n    isMaterial: isMaterialContext,\n    isLight: isLightContext,\n    phase,\n    isShown,\n    updatePosition,\n    ...tooltipProviderProps\n  } = useContext(TooltipContext);\n\n  const defaultRef = useRef<HTMLDivElement>(null);\n  const combinedRef = mergeRefs(transitionRef, overlayRef ?? defaultRef);\n  const finalOverlayRef = overlayRef ?? defaultRef;\n\n  props = mergeProps(props, tooltipProviderProps);\n\n  let {\n    placement = 'top',\n    isOpen,\n    tipStyles,\n    showIcon,\n    isMaterial = isMaterialContext,\n    isLight = isLightContext,\n    ...otherProps\n  } = props;\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let { tooltipProps } = useTooltip({ ...props, isDismissable: false }, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(finalOverlayRef));\n\n  if (typeof minOffset === 'number') {\n    minOffset = `${minOffset}px`;\n  }\n\n  if (typeof minScale === 'number') {\n    minScale = String(minScale);\n  }\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || placement || 'top';\n\n  const mods = useMemo(() => {\n    return {\n      material: isMaterial,\n      light: isLight,\n      open: isShown ?? isOpen,\n    };\n  }, [isMaterial, isShown, isOpen, isLight]);\n\n  // Update position when tooltip becomes visible\n  useLayoutEffect(() => {\n    updatePosition?.();\n  }, []);\n\n  return (\n    <TooltipElement\n      {...tooltipProps}\n      {...overlayProps}\n      ref={combinedRef}\n      styles={styles}\n      mods={mods}\n      data-min-offset={minOffset}\n      data-min-scale={minScale}\n      data-placement={placementDirection}\n      data-phase={phase}\n    >\n      {props.children}\n      <TooltipTipElement\n        data-placement={placementDirection}\n        styles={tipStyles}\n        mods={mods}\n        {...arrowProps}\n      />\n    </TooltipElement>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\n\n_Tooltip.displayName = 'Tooltip';\n\nexport { _Tooltip as Tooltip };\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,iBAAiB,MAAM,EAC3B,QAAQ;CACN,SAAS;CAcT,MAAM;EACJ,IAAI;EACJ,OAAO;EACR;CACD,OAAO;EACL,IAAI;EACJ,OAAO;EACR;CACD,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,YAAY;CACZ,eAAe;EACb,IAAI;EACJ,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,OAAO;EACR;CACD,YACE;CACF,WAAW;EACT,IAAI;EACJ,mCAAiC;EACjC,oCAAkC;EAClC,sCAAoC;EACpC,uCAAqC;EACrC,oCAAkC;EAClC,qCAAmC;EACnC,qCAAmC;EACnC,sCAAoC;EACrC;CACD,iBAAiB;EACf,IAAI;EACJ,4BAA0B;EAC1B,6BAA2B;EAC3B,8BAA4B;EAC7B;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACT,oEAAgE;EACjE;CACD,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACF,EACF,CAAC;AAEF,MAAM,oBAAoB,MAAM,EAC9B,QAAQ;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,WAAW;EACT,IAAI;EACJ,OAAO;EACR;CACD,cAAc;CACd,KAAK;EACH,IAAI;EACJ,0DAAsD;EACtD,4BAA0B;EAC3B;CACD,MAAM;EACJ,IAAI;EACJ,0DAAsD;EACtD,6BAA2B;EAC5B;CACD,OAAO;EACL,IAAI;EACJ,8BAA4B;EAC7B;CACD,QAAQ;EACN,IAAI;EACJ,+BAA6B;EAC9B;CACD,WAAW;EACT,IAAI;EACJ,+BACE;EACF,6BAA2B;EAC3B,8BAA4B;EAC7B;CACD,YAAY;CACb,EACF,CAAC;AAiBF,SAAS,QACP,OACA,KACA;CACA,IAAI,EACF,KAAK,YACL,eACA,YACA,OACA,cACA,WACA,UACA,YAAY,mBACZ,SAAS,gBACT,OACA,SACA,gBACA,GAAG,yBACD,WAAW,eAAe;CAE9B,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,cAAc,UAAU,eAAe,cAAc,WAAW;CACtE,MAAM,kBAAkB,cAAc;AAEtC,SAAQA,aAAW,OAAO,qBAAqB;CAE/C,IAAI,EACF,YAAY,OACZ,QACA,WACA,UACA,aAAa,mBACb,UAAU,gBACV,GAAG,eACD;CAEJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,EAAE,iBAAiB,WAAW;EAAE,GAAG;EAAO,eAAe;EAAO,EAAE,MAAM;AAG5E,qBAAoB,WAAW,aAAa,gBAAgB,CAAC;AAE7D,KAAI,OAAO,cAAc,SACvB,aAAY,GAAG,UAAU;AAG3B,KAAI,OAAO,aAAa,SACtB,YAAW,OAAO,SAAS;CAI7B,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM,aAAa;CAEpE,MAAM,OAAO,cAAc;AACzB,SAAO;GACL,UAAU;GACV,OAAO;GACP,MAAM,WAAW;GAClB;IACA;EAAC;EAAY;EAAS;EAAQ;EAAQ,CAAC;AAG1C,yBAAsB;AACpB,oBAAkB;IACjB,EAAE,CAAC;AAEN,QACE,qBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK;EACG;EACF;EACN,mBAAiB;EACjB,kBAAgB;EAChB,kBAAgB;EAChB,cAAY;aAEX,MAAM,UACP,oBAAC;GACC,kBAAgB;GAChB,QAAQ;GACF;GACN,GAAI;IACJ;GACa;;;;;AAOrB,IAAI,WAAW,WAAW,QAAQ;AAElC,SAAS,cAAc"}

package/dist/components/overlays/Tooltip/TooltipProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Tooltip } from "./Tooltip.js";
 import { TooltipTrigger } from "./TooltipTrigger.js";
 import { isValidElement, useEffect, useState } from "react";

package/dist/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { TooltipContext } from "./context.js";
 import { Block } from "../../Block.js";
 import { _ActiveZone } from "../../content/ActiveZone/ActiveZone.js";

package/dist/components/overlays/Tooltip/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import React from "react";
 
 //#region src/components/overlays/Tooltip/context.ts

package/dist/components/portal/Portal.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { usePortal } from "./usePortal.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/portal/PortalProvider.d.ts

@@ -0,0 +1,2 @@
+
+import { RefObject } from "react";

package/dist/components/portal/PortalProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/portal/PortalProvider.ts

package/dist/components/portal/index.d.ts

@@ -1,3 +1,4 @@
 
+import "./PortalProvider.js";
 import { PortalProps } from "./types.js";
 import { Portal } from "./Portal.js";

package/dist/components/portal/usePortal.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { usePortalContext } from "./PortalProvider.js";
 import { useEffect, useRef, useState } from "react";
 import invariant from "tiny-invariant";

package/dist/components/shared/DraggableCollection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { ListDropTargetDelegate, ListKeyboardDelegate, mergeProps, useDraggableCollection, useDroppableCollection } from "react-aria";

package/dist/components/shared/InvalidIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { WarningIcon } from "../../icons/WarningIcon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/shared/ValidIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { CheckIcon } from "../../icons/CheckIcon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,14 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/status/LoadingAnimation/LoadingAnimation.tsx
 const CubeElement = tasty({
-	as: "img",
-	role: "presentation",
-	src: "data:image/svg+xml,%3Csvg width='36' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z' fill='%23FAFAFF'/%3E%3Cpath d='M18 41L0 30.75l.101-20.5L18 20.5' fill='%23E5E5F6'/%3E%3Cpath d='M36 30.75L18 41V20.6l17.899-10.25L36 30.75z' fill='%23C0C0EA'/%3E%3C/svg%3E",
-	alt: "",
+	as: "svg",
 	styles: {
 		display: "block",
 		position: "absolute",
@@ -97,9 +94,28 @@ const CubeElement = tasty({
 	}
 });
 function Cube({ index, style }) {
-	return /* @__PURE__ */ jsx(CubeElement, {
+	return /* @__PURE__ */ jsxs(CubeElement, {
 		mods: index != null ? { index } : void 0,
-		style
+		style,
+		viewBox: "0 0 36 41",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		role: "presentation",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "var(--loading-face-1-color)",
+				d: "M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "var(--loading-face-2-color)",
+				d: "M18 41L0 30.75l.101-20.5L18 20.5"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "var(--loading-face-3-color)",
+				d: "M36 30.75L18 41V20.6l17.899-10.25L36 30.75z"
+			})
+		]
 	});
 }
 const SIZE_MAP = {

package/dist/components/status/LoadingAnimation/LoadingAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingAnimation.js","names":[],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties } from 'react';\n\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CUBE_IMAGE =\n  \"data:image/svg+xml,%3Csvg width='36' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z' fill='%23FAFAFF'/%3E%3Cpath d='M18 41L0 30.75l.101-20.5L18 20.5' fill='%23E5E5F6'/%3E%3Cpath d='M36 30.75L18 41V20.6l17.899-10.25L36 30.75z' fill='%23C0C0EA'/%3E%3C/svg%3E\";\n\nconst CubeElement = tasty({\n  as: 'img',\n  role: 'presentation',\n  src: CUBE_IMAGE,\n  alt: '',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\n      'index=0 | index=1 | index=2': 0,\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  return (\n    <CubeElement mods={index != null ? { index } : undefined} style={style} />\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label=\"Loading animation\"\n      width={numSize}\n      height={numSize * 1.1388888889}\n      style={{ position: 'relative' }}\n      {...props}\n    >\n      <Cube style={{ transform: 'translate(0%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(98%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(49%, 96.5%)' }} />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":";;;;;;AAQA,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,MAAM;CACN,KALA;CAMA,KAAK;CACL,QAAQ;EACN,SAAS;EACT,UAAU;EACV,OAAO;EACP,QAAQ;EAER,eAAe;GACb,IAAI;GACJ,WAAW;GACX,WAAW;GACX,WAAW;GACZ;EACD,mBAAmB;GACjB,IAAI;GACJ,+BAA+B;GAChC;EACD,yBAAyB;GACvB,IAAI;GACJ,+BAA+B;GAChC;EACD,yBAAyB;GACvB,IAAI;GACJ,+BAA+B;GAChC;EACD,QAAQ;GACN,IAAI;GACJ,+BAA+B;GAChC;EAED,cAAc;GACZ,OAAO;IACL,MAAM;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,OAAO;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACrD,OAAO,EAAE,QAAQ,GAAG;IACpB,OAAO,EAAE,QAAQ,GAAG;IACpB,IAAI;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACnD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACpD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,IAAI;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACpD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACrD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,IAAI;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACrD;GACF;EACF;CACF,CAAC;AAOF,SAAS,KAAK,EAAE,OAAO,SAAoB;AACzC,QACE,oBAAC;EAAY,MAAM,SAAS,OAAO,EAAE,OAAO,GAAG;EAAkB;GAAS;;AAI9E,MAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAMD,SAAgB,iBAAiB,EAC/B,OAAO,UACP,GAAG,SACyB;CAC5B,MAAM,UAAkB,SAAS,SAAS,QAAQ,SAAS;AAE3D,QACE,qBAAC;EACC,MAAK;EACL,cAAW;EACX,OAAO;EACP,QAAQ,UAAU;EAClB,OAAO,EAAE,UAAU,YAAY;EAC/B,GAAI;;GAEJ,oBAAC,QAAK,OAAO,EAAE,WAAW,wBAAwB,GAAI;GACtD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;;GACZ"}
+{"version":3,"file":"LoadingAnimation.js","names":[],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties } from 'react';\n\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\n      'index=0 | index=1 | index=2': 0,\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  return (\n    <CubeElement\n      mods={index != null ? { index } : undefined}\n      style={style}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label=\"Loading animation\"\n      width={numSize}\n      height={numSize * 1.1388888889}\n      style={{ position: 'relative' }}\n      {...props}\n    >\n      <Cube style={{ transform: 'translate(0%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(98%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(49%, 96.5%)' }} />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":";;;;;;AAKA,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,OAAO;EACP,QAAQ;EAaR,eAAe;GACb,IAAI;GACJ,WAAW;GACX,WAAW;GACX,WAAW;GACZ;EACD,mBAAmB;GACjB,IAAI;GACJ,+BAA+B;GAChC;EACD,yBAAyB;GACvB,IAAI;GACJ,+BAA+B;GAChC;EACD,yBAAyB;GACvB,IAAI;GACJ,+BAA+B;GAChC;EACD,QAAQ;GACN,IAAI;GACJ,+BAA+B;GAChC;EAED,cAAc;GACZ,OAAO;IACL,MAAM;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,OAAO;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACrD,OAAO,EAAE,QAAQ,GAAG;IACpB,OAAO,EAAE,QAAQ,GAAG;IACpB,IAAI;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACnD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACpD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,IAAI;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACpD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACrD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,IAAI;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACrD;GACF;EACF;CACF,CAAC;AAOF,SAAS,KAAK,EAAE,OAAO,SAAoB;AACzC,QACE,qBAAC;EACC,MAAM,SAAS,OAAO,EAAE,OAAO,GAAG;EAC3B;EACP,SAAQ;EACR,MAAK;EACL,OAAM;EACN,MAAK;EACL,eAAY;;GAEZ,oBAAC;IACC,MAAK;IACL,GAAE;KACF;GACF,oBAAC;IACC,MAAK;IACL,GAAE;KACF;GACF,oBAAC;IACC,MAAK;IACL,GAAE;KACF;;GACU;;AAIlB,MAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAMD,SAAgB,iBAAiB,EAC/B,OAAO,UACP,GAAG,SACyB;CAC5B,MAAM,UAAkB,SAAS,SAAS,QAAQ,SAAS;AAE3D,QACE,qBAAC;EACC,MAAK;EACL,cAAW;EACX,OAAO;EACP,QAAQ,UAAU;EAClB,OAAO,EAAE,UAAU,YAAY;EAC/B,GAAI;;GAEJ,oBAAC,QAAK,OAAO,EAAE,WAAW,wBAAwB,GAAI;GACtD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;;GACZ"}

package/dist/components/status/Spin/Cube.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/status/Spin/InternalSpinner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { Cube } from "./Cube.js";
 import { SpinsContainer } from "./SpinsContainer.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/status/Spin/Spin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { InternalSpinner } from "./InternalSpinner.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/status/Spin/SpinsContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";