periplo-ui 4.11.0 → 4.11.2

package/dist/components/PhoneInput/hooks/usePhoneField.js

@@ -37,6 +37,9 @@ function usePhoneField({
     const initial = options.find((option) => isoOf(option) === iso);
     return initial ? getCountryValue(initial) : void 0;
   });
+  if (country !== void 0 && country !== internalCountryValue) {
+    setInternalCountryValue(country);
+  }
   const [pendingIntl, setPendingIntl] = React.useState(void 0);
   const selectedValue = country ?? internalCountryValue;
   const selectedOption = options.find((option) => getCountryValue(option) === selectedValue);

package/dist/components/PhoneInput/hooks/usePhoneField.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePhoneField.js","sources":["../../../../src/components/PhoneInput/hooks/usePhoneField.ts"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  describe,\n  detectIntl,\n  formatNational,\n  isPartialCallingCode,\n  parseDigits,\n  pickCountryOption,\n  resolveIso,\n  toIntlCandidate,\n} from '../phone'\nimport type { PhoneInputCountryAccessors, PhoneValue } from '../types'\n\ntype UsePhoneFieldOptions<T> = Pick<\n  PhoneInputCountryAccessors<T>,\n  'getCountryValue' | 'getCountryDialCode' | 'getCountryIsoCode'\n> & {\n  options: Array<T>\n  country?: string\n  number?: string\n  onChange?: (value: PhoneValue<T>) => void\n  defaultCountry?: string\n  priorityCountries?: Array<string>\n}\n\nconst CARET_END = Number.MAX_SAFE_INTEGER\n\nfunction trimTrailingNonDigits(text: string): string {\n  let end = text.length\n  while (end > 0 && !/\\d/.test(text[end - 1])) end -= 1\n  return text.slice(0, end)\n}\n\nfunction caretAfterNthDigit(formatted: string, n: number): number {\n  if (n <= 0) return 0\n  let seen = 0\n  for (let i = 0; i < formatted.length; i++) {\n    if (/\\d/.test(formatted[i])) {\n      seen += 1\n      if (seen === n) return i + 1\n    }\n  }\n  return formatted.length\n}\n\nexport function usePhoneField<T extends object>({\n  options,\n  getCountryValue,\n  getCountryDialCode,\n  getCountryIsoCode,\n  country,\n  number,\n  onChange,\n  defaultCountry,\n  priorityCountries,\n}: UsePhoneFieldOptions<T>) {\n  const isoOf = (option: T) => resolveIso(getCountryValue(option), getCountryIsoCode?.(option))\n\n  const [internalCountryValue, setInternalCountryValue] = React.useState<string | undefined>(() => {\n    if (!defaultCountry) return undefined\n    const iso = defaultCountry.toUpperCase()\n    const initial = options.find((option) => isoOf(option) === iso)\n    return initial ? getCountryValue(initial) : undefined\n  })\n\n  // Shown as typed until it resolves to a calling code (\"+3\" on the way to \"+34\").\n  const [pendingIntl, setPendingIntl] = React.useState<string | undefined>(undefined)\n\n  const selectedValue = country ?? internalCountryValue\n  const selectedOption = options.find((option) => getCountryValue(option) === selectedValue)\n  const selectedIso = selectedOption ? isoOf(selectedOption) : undefined\n  const displayValue = pendingIntl ?? formatNational(number ?? '', selectedIso)\n\n  const inputElRef = React.useRef<HTMLInputElement | null>(null)\n  const caretTarget = React.useRef<number | null>(null)\n\n  React.useLayoutEffect(() => {\n    const el = inputElRef.current\n    if (!el || caretTarget.current === null) return\n    const pos = caretAfterNthDigit(el.value, caretTarget.current)\n    el.setSelectionRange(pos, pos)\n    caretTarget.current = null\n  })\n\n  function emit(digits: string, option: T | undefined) {\n    const iso = option ? isoOf(option) : undefined\n    const described = describe(digits, iso)\n    onChange?.({\n      country: option ? getCountryValue(option) : undefined,\n      countryOption: option,\n      isoCode: iso,\n      dialCode: option ? getCountryDialCode(option) : undefined,\n      national: digits,\n      e164: described.e164,\n      isPossible: described.isPossible,\n      isValid: described.isValid,\n    })\n  }\n\n  function commit(digits: string, option: T | undefined, digitsBefore: number) {\n    caretTarget.current = digitsBefore\n    emit(digits, option)\n  }\n\n  function handleIntl(text: string) {\n    const { iso: detectedIso, callingCode, national } = detectIntl(text)\n\n    if (!callingCode) {\n      const digits = parseDigits(text)\n      if (text === '+' || (digits !== '' && isPartialCallingCode(digits))) {\n        setPendingIntl(text)\n        return\n      }\n      setPendingIntl(undefined)\n      commit(digits, selectedOption, CARET_END)\n      return\n    }\n\n    setPendingIntl(undefined)\n    const option =\n      options.length <= 1\n        ? selectedOption\n        : pickCountryOption({\n            detectedIso,\n            callingCode,\n            options,\n            currentOption: selectedOption,\n            priorityCountries,\n            isoOf,\n            dialOf: getCountryDialCode,\n          })\n\n    if (!option) {\n      commit(parseDigits(text), selectedOption, CARET_END)\n      return\n    }\n\n    setInternalCountryValue(getCountryValue(option))\n    commit(national, option, CARET_END)\n  }\n\n  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const raw = event.target.value\n    const caret = event.target.selectionStart ?? raw.length\n    const digitsBefore = parseDigits(raw.slice(0, caret)).length\n\n    const intlCandidate = toIntlCandidate(raw)\n    if (intlCandidate) {\n      handleIntl(intlCandidate)\n      return\n    }\n    setPendingIntl(undefined)\n\n    const digits = parseDigits(raw)\n\n    if (selectedIso && describe(digits, selectedIso).tooLong) {\n      // No state update means React won't revert the DOM, so undo the keystroke by hand.\n      event.target.value = displayValue\n      const pos = caretAfterNthDigit(displayValue, digitsBefore - 1)\n      event.target.setSelectionRange(pos, pos)\n      return\n    }\n\n    commit(digits, selectedOption, digitsBefore)\n  }\n\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key !== 'Backspace') return\n    if (pendingIntl !== undefined) return // no separators in pending text\n\n    const el = event.currentTarget\n    const { selectionStart: start, selectionEnd: end, value } = el\n    if (start === null || start !== end || start === 0) return\n    if (/\\d/.test(value[start - 1] ?? '')) return // deleting a digit: default is correct\n\n    event.preventDefault()\n    const head = trimTrailingNonDigits(value.slice(0, start))\n    const digits = parseDigits(head.slice(0, -1) + value.slice(start))\n    commit(digits, selectedOption, parseDigits(head).length - 1)\n  }\n\n  function selectCountry(option: T) {\n    setPendingIntl(undefined)\n    setInternalCountryValue(getCountryValue(option))\n    emit(number ?? '', option)\n    inputElRef.current?.focus()\n  }\n\n  return {\n    isoOf,\n    selectedValue,\n    selectedOption,\n    selectedIso,\n    displayValue,\n    inputElRef,\n    selectCountry,\n    onInputChange,\n    onInputKeyDown,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"usePhoneField.js","sources":["../../../../src/components/PhoneInput/hooks/usePhoneField.ts"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  describe,\n  detectIntl,\n  formatNational,\n  isPartialCallingCode,\n  parseDigits,\n  pickCountryOption,\n  resolveIso,\n  toIntlCandidate,\n} from '../phone'\nimport type { PhoneInputCountryAccessors, PhoneValue } from '../types'\n\ntype UsePhoneFieldOptions<T> = Pick<\n  PhoneInputCountryAccessors<T>,\n  'getCountryValue' | 'getCountryDialCode' | 'getCountryIsoCode'\n> & {\n  options: Array<T>\n  country?: string\n  number?: string\n  onChange?: (value: PhoneValue<T>) => void\n  defaultCountry?: string\n  priorityCountries?: Array<string>\n}\n\nconst CARET_END = Number.MAX_SAFE_INTEGER\n\nfunction trimTrailingNonDigits(text: string): string {\n  let end = text.length\n  while (end > 0 && !/\\d/.test(text[end - 1])) end -= 1\n  return text.slice(0, end)\n}\n\nfunction caretAfterNthDigit(formatted: string, n: number): number {\n  if (n <= 0) return 0\n  let seen = 0\n  for (let i = 0; i < formatted.length; i++) {\n    if (/\\d/.test(formatted[i])) {\n      seen += 1\n      if (seen === n) return i + 1\n    }\n  }\n  return formatted.length\n}\n\nexport function usePhoneField<T extends object>({\n  options,\n  getCountryValue,\n  getCountryDialCode,\n  getCountryIsoCode,\n  country,\n  number,\n  onChange,\n  defaultCountry,\n  priorityCountries,\n}: UsePhoneFieldOptions<T>) {\n  const isoOf = (option: T) => resolveIso(getCountryValue(option), getCountryIsoCode?.(option))\n\n  const [internalCountryValue, setInternalCountryValue] = React.useState<string | undefined>(() => {\n    if (!defaultCountry) return undefined\n    const iso = defaultCountry.toUpperCase()\n    const initial = options.find((option) => isoOf(option) === iso)\n    return initial ? getCountryValue(initial) : undefined\n  })\n\n  if (country !== undefined && country !== internalCountryValue) {\n    setInternalCountryValue(country)\n  }\n\n  // Shown as typed until it resolves to a calling code (\"+3\" on the way to \"+34\").\n  const [pendingIntl, setPendingIntl] = React.useState<string | undefined>(undefined)\n\n  const selectedValue = country ?? internalCountryValue\n  const selectedOption = options.find((option) => getCountryValue(option) === selectedValue)\n  const selectedIso = selectedOption ? isoOf(selectedOption) : undefined\n  const displayValue = pendingIntl ?? formatNational(number ?? '', selectedIso)\n\n  const inputElRef = React.useRef<HTMLInputElement | null>(null)\n  const caretTarget = React.useRef<number | null>(null)\n\n  React.useLayoutEffect(() => {\n    const el = inputElRef.current\n    if (!el || caretTarget.current === null) return\n    const pos = caretAfterNthDigit(el.value, caretTarget.current)\n    el.setSelectionRange(pos, pos)\n    caretTarget.current = null\n  })\n\n  function emit(digits: string, option: T | undefined) {\n    const iso = option ? isoOf(option) : undefined\n    const described = describe(digits, iso)\n    onChange?.({\n      country: option ? getCountryValue(option) : undefined,\n      countryOption: option,\n      isoCode: iso,\n      dialCode: option ? getCountryDialCode(option) : undefined,\n      national: digits,\n      e164: described.e164,\n      isPossible: described.isPossible,\n      isValid: described.isValid,\n    })\n  }\n\n  function commit(digits: string, option: T | undefined, digitsBefore: number) {\n    caretTarget.current = digitsBefore\n    emit(digits, option)\n  }\n\n  function handleIntl(text: string) {\n    const { iso: detectedIso, callingCode, national } = detectIntl(text)\n\n    if (!callingCode) {\n      const digits = parseDigits(text)\n      if (text === '+' || (digits !== '' && isPartialCallingCode(digits))) {\n        setPendingIntl(text)\n        return\n      }\n      setPendingIntl(undefined)\n      commit(digits, selectedOption, CARET_END)\n      return\n    }\n\n    setPendingIntl(undefined)\n    const option =\n      options.length <= 1\n        ? selectedOption\n        : pickCountryOption({\n            detectedIso,\n            callingCode,\n            options,\n            currentOption: selectedOption,\n            priorityCountries,\n            isoOf,\n            dialOf: getCountryDialCode,\n          })\n\n    if (!option) {\n      commit(parseDigits(text), selectedOption, CARET_END)\n      return\n    }\n\n    setInternalCountryValue(getCountryValue(option))\n    commit(national, option, CARET_END)\n  }\n\n  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const raw = event.target.value\n    const caret = event.target.selectionStart ?? raw.length\n    const digitsBefore = parseDigits(raw.slice(0, caret)).length\n\n    const intlCandidate = toIntlCandidate(raw)\n    if (intlCandidate) {\n      handleIntl(intlCandidate)\n      return\n    }\n    setPendingIntl(undefined)\n\n    const digits = parseDigits(raw)\n\n    if (selectedIso && describe(digits, selectedIso).tooLong) {\n      // No state update means React won't revert the DOM, so undo the keystroke by hand.\n      event.target.value = displayValue\n      const pos = caretAfterNthDigit(displayValue, digitsBefore - 1)\n      event.target.setSelectionRange(pos, pos)\n      return\n    }\n\n    commit(digits, selectedOption, digitsBefore)\n  }\n\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key !== 'Backspace') return\n    if (pendingIntl !== undefined) return // no separators in pending text\n\n    const el = event.currentTarget\n    const { selectionStart: start, selectionEnd: end, value } = el\n    if (start === null || start !== end || start === 0) return\n    if (/\\d/.test(value[start - 1] ?? '')) return // deleting a digit: default is correct\n\n    event.preventDefault()\n    const head = trimTrailingNonDigits(value.slice(0, start))\n    const digits = parseDigits(head.slice(0, -1) + value.slice(start))\n    commit(digits, selectedOption, parseDigits(head).length - 1)\n  }\n\n  function selectCountry(option: T) {\n    setPendingIntl(undefined)\n    setInternalCountryValue(getCountryValue(option))\n    emit(number ?? '', option)\n    inputElRef.current?.focus()\n  }\n\n  return {\n    isoOf,\n    selectedValue,\n    selectedOption,\n    selectedIso,\n    displayValue,\n    inputElRef,\n    selectCountry,\n    onInputChange,\n    onInputKeyDown,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Popover/Popover.d.ts

@@ -51,6 +51,12 @@ export type PopoverProps = {
      * @default document.body
      */
     container?: HTMLElement;
+    /**
+     * The minimum distance in pixels to keep between the popover and the boundary (usually the viewport) edges.
+     * Can be a single number applied to all sides, or an object to configure each side individually.
+     * @default 8
+     */
+    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
 };
 /**
  * PopoverContent component that renders the actual popover content.
@@ -82,5 +88,5 @@ declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimit
  *   <div>Custom content</div>
  * </PopoverComponent>
  */
-export declare const Popover: ({ side, triggerElement, children, className, align, sideOffset, container, }: Readonly<PopoverProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ side, triggerElement, children, className, align, sideOffset, container, collisionPadding, }: Readonly<PopoverProps>) => import("react/jsx-runtime").JSX.Element;
 export { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger };

package/dist/components/Popover/Popover.js

@@ -6,15 +6,16 @@ import { cn } from '../../lib/utils.js';
 const PopoverRoot = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, side = "bottom", container, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, side = "bottom", collisionPadding = 8, container, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     side,
+    collisionPadding,
     className: cn(
-      "text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-[var(--radix-popover-trigger-width)] min-w-[200px] rounded-md border bg-white p-4 text-center shadow-md outline-none",
+      "text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-(--radix-popover-trigger-width) min-w-50 rounded-md border bg-white p-4 text-center shadow-md outline-none",
       className
     ),
     ...props
@@ -28,11 +29,23 @@ const Popover = ({
   className,
   align = "center",
   sideOffset = 4,
-  container
+  container,
+  collisionPadding
 }) => {
   return /* @__PURE__ */ jsxs(PopoverRoot, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: typeof triggerElement === "string" ? /* @__PURE__ */ jsx("span", { className: "cursor-pointer", children: triggerElement }) : triggerElement }),
-    /* @__PURE__ */ jsx(PopoverContent, { container, side, className, align, sideOffset, children })
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        container,
+        side,
+        className,
+        align,
+        sideOffset,
+        collisionPadding,
+        children
+      }
+    )
   ] });
 };
 

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Root component for the Popover.\n * Manages the state and accessibility of the popover dialog.\n */\nconst PopoverRoot = PopoverPrimitive.Root\n\n/**\n * The button that triggers the popover to open/close.\n * Must be wrapped in a Popover component.\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n/**\n * Optional anchor element that positions the popover.\n * Useful when the trigger element is not where you want the popover to be anchored.\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nexport type PopoverProps = {\n  /**\n   * Content to be displayed inside the popover.\n   * Can be either a React element or a string.\n   */\n  children: React.ReactElement | string\n\n  /**\n   * Element that triggers the popover when interacted with.\n   * Can be either a React element or a string.\n   * @example <PopoverComponent triggerElement={<Button>Click me</Button>} />\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * Position of the popover relative to the trigger element.\n   * @default bottom\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Additional CSS classes to be applied to the popover content.\n   */\n  className?: string\n\n  /**\n   * Alignment of the popover relative to the trigger element.\n   * @default center\n   */\n  align?: 'start' | 'center' | 'end'\n\n  /**\n   * Distance in pixels between the trigger element and the popover.\n   * @default 4\n   */\n  sideOffset?: number\n\n  /**\n   * Container element to position the popover relative to.\n   * @default document.body\n   */\n  container?: HTMLElement\n}\n\n/**\n * PopoverContent component that renders the actual popover content.\n * Handled internally by the PopoverComponent.\n */\nconst PopoverContent = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { container?: HTMLElement }\n>(({ className, align = 'center', sideOffset = 4, side = 'bottom', container, ...props }, ref) => (\n  <PopoverPrimitive.Portal container={container}>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      side={side}\n      className={cn(\n        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-[var(--radix-popover-trigger-width)] min-w-[200px] rounded-md border bg-white p-4 text-center shadow-md outline-none',\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\n/**\n * A versatile Popover component that displays floating content when triggered.\n * Built on top of Radix UI's Popover primitives.\n *\n * @example\n * // Basic usage\n * <PopoverComponent\n *   triggerElement={<Button>Click me</Button>}\n *   side=\"bottom\"\n * >\n *   Popover content\n * </PopoverComponent>\n *\n * // With custom alignment and offset\n * <PopoverComponent\n *   triggerElement={<Button>Settings</Button>}\n *   side=\"right\"\n *   align=\"start\"\n *   sideOffset={8}\n * >\n *   <div>Custom content</div>\n * </PopoverComponent>\n */\nexport const Popover = ({\n  side,\n  triggerElement,\n  children,\n  className,\n  align = 'center',\n  sideOffset = 4,\n  container,\n}: Readonly<PopoverProps>) => {\n  return (\n    <PopoverRoot>\n      <PopoverTrigger asChild>\n        {typeof triggerElement === 'string' ? <span className=\"cursor-pointer\">{triggerElement}</span> : triggerElement}\n      </PopoverTrigger>\n      <PopoverContent container={container} side={side} className={className} align={align} sideOffset={sideOffset}>\n        {children}\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nexport { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger }\n"],"names":[],"mappings":";;;;;AASA,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAMxC,MAAM,gBAAgB,gBAAA,CAAiB;AAkDvC,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,UAAU,UAAA,GAAa,CAAA,EAAG,OAAO,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxF,GAAA,CAAC,gBAAA,CAAiB,MAAA,EAAjB,EAAwB,SAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,EAAC,gBAAA,CAAiB,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,uhBAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AAyB/C,MAAM,UAAU,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb;AACF,CAAA,KAA8B;AAC5B,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,OAAO,cAAA,KAAmB,QAAA,mBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,cAAA,EAAe,CAAA,GAAU,cAAA,EACnG,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe,SAAA,EAAsB,MAAY,SAAA,EAAsB,KAAA,EAAc,YACnF,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Root component for the Popover.\n * Manages the state and accessibility of the popover dialog.\n */\nconst PopoverRoot = PopoverPrimitive.Root\n\n/**\n * The button that triggers the popover to open/close.\n * Must be wrapped in a Popover component.\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n/**\n * Optional anchor element that positions the popover.\n * Useful when the trigger element is not where you want the popover to be anchored.\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nexport type PopoverProps = {\n  /**\n   * Content to be displayed inside the popover.\n   * Can be either a React element or a string.\n   */\n  children: React.ReactElement | string\n\n  /**\n   * Element that triggers the popover when interacted with.\n   * Can be either a React element or a string.\n   * @example <PopoverComponent triggerElement={<Button>Click me</Button>} />\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * Position of the popover relative to the trigger element.\n   * @default bottom\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Additional CSS classes to be applied to the popover content.\n   */\n  className?: string\n\n  /**\n   * Alignment of the popover relative to the trigger element.\n   * @default center\n   */\n  align?: 'start' | 'center' | 'end'\n\n  /**\n   * Distance in pixels between the trigger element and the popover.\n   * @default 4\n   */\n  sideOffset?: number\n\n  /**\n   * Container element to position the popover relative to.\n   * @default document.body\n   */\n  container?: HTMLElement\n\n  /**\n   * The minimum distance in pixels to keep between the popover and the boundary (usually the viewport) edges.\n   * Can be a single number applied to all sides, or an object to configure each side individually.\n   * @default 8\n   */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n}\n\n/**\n * PopoverContent component that renders the actual popover content.\n * Handled internally by the PopoverComponent.\n */\nconst PopoverContent = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { container?: HTMLElement }\n>(({ className, align = 'center', sideOffset = 4, side = 'bottom', collisionPadding = 8, container, ...props }, ref) => (\n  <PopoverPrimitive.Portal container={container}>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      side={side}\n      collisionPadding={collisionPadding}\n      className={cn(\n        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-(--radix-popover-trigger-width) min-w-50 rounded-md border bg-white p-4 text-center shadow-md outline-none',\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\n/**\n * A versatile Popover component that displays floating content when triggered.\n * Built on top of Radix UI's Popover primitives.\n *\n * @example\n * // Basic usage\n * <PopoverComponent\n *   triggerElement={<Button>Click me</Button>}\n *   side=\"bottom\"\n * >\n *   Popover content\n * </PopoverComponent>\n *\n * // With custom alignment and offset\n * <PopoverComponent\n *   triggerElement={<Button>Settings</Button>}\n *   side=\"right\"\n *   align=\"start\"\n *   sideOffset={8}\n * >\n *   <div>Custom content</div>\n * </PopoverComponent>\n */\nexport const Popover = ({\n  side,\n  triggerElement,\n  children,\n  className,\n  align = 'center',\n  sideOffset = 4,\n  container,\n  collisionPadding,\n}: Readonly<PopoverProps>) => {\n  return (\n    <PopoverRoot>\n      <PopoverTrigger asChild>\n        {typeof triggerElement === 'string' ? <span className=\"cursor-pointer\">{triggerElement}</span> : triggerElement}\n      </PopoverTrigger>\n      <PopoverContent\n        container={container}\n        side={side}\n        className={className}\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n      >\n        {children}\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nexport { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger }\n"],"names":[],"mappings":";;;;;AASA,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAMxC,MAAM,gBAAgB,gBAAA,CAAiB;AAyDvC,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,QAAA,EAAU,UAAA,GAAa,CAAA,EAAG,IAAA,GAAO,UAAU,gBAAA,GAAmB,CAAA,EAAG,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBAC9G,GAAA,CAAC,gBAAA,CAAiB,MAAA,EAAjB,EAAwB,SAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,EAAC,gBAAA,CAAiB,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,6gBAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AAyB/C,MAAM,UAAU,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,SAAA;AAAA,EACA;AACF,CAAA,KAA8B;AAC5B,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,OAAO,cAAA,KAAmB,QAAA,mBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,cAAA,EAAe,CAAA,GAAU,cAAA,EACnG,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -64,6 +64,7 @@ function Tooltip({
       sideOffset: mobileSideOffset,
       triggerElement,
       container,
+      collisionPadding,
       ...props,
       children
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { Popover } from '../Popover/Popover'\n\nimport { useIsTouchDevice } from '@/lib/useTouchDevice'\nimport { cn } from '@/lib/utils'\n\n/**\n * Provider component that wraps all tooltip instances.\n * Controls the delay duration and positioning of tooltips app-wide.\n */\nconst TooltipProvider = TooltipPrimitive.Provider\n\n/**\n * The root component that wraps the trigger and content.\n * Manages the open state and hover interactions.\n */\nconst TooltipRoot = TooltipPrimitive.Root\n\n/**\n * The element that triggers the tooltip when hovered or focused.\n * Wrap with asChild to use custom components as triggers.\n */\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipPortal = TooltipPrimitive.Portal\n\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n  arrow?: boolean\n  /**\n   * Container for the portal. When provided, the tooltip is portaled into this element instead of `document.body`.\n   * Pass `null` to disable portaling and render inline (legacy behavior).\n   */\n  container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>['container'] | null\n}\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className, sideOffset = 4, collisionPadding = 8, arrow, container, children, ...props }, ref) => {\n    const content = (\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(\n          'z-50 rounded-lg bg-white px-3 py-1.5 text-sm',\n          'shadow-tooltip',\n          'animate-in fade-in-0 zoom-in-95',\n          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {arrow && <TooltipPrimitive.Arrow fill=\"white\" />}\n      </TooltipPrimitive.Content>\n    )\n\n    if (container === null) return content\n    return <TooltipPrimitive.Portal container={container ?? undefined}>{content}</TooltipPrimitive.Portal>\n  },\n)\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport type TooltipProps = {\n  /**\n   * The content to be displayed inside the tooltip\n   */\n  children: React.ReactElement | string\n\n  /**\n   * The element that triggers the tooltip on hover\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * The preferred side of the trigger to render the tooltip\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Optional custom className for additional styling\n   */\n  className?: string\n\n  /**\n   * Delay duration for showing the tooltip in milliseconds\n   * @default 300\n   */\n  delayDuration?: number\n\n  /**\n   * Whether to show an arrow pointer on the tooltip\n   * @default false\n   */\n  arrow?: boolean\n\n  /**\n   * The preferred side of the trigger to render the mobile\n   */\n  mobileSide?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * The preferred alignment of the mobile\n   */\n  mobileAlign?: 'start' | 'center' | 'end'\n\n  /**\n   * The preferred side offset of the mobile\n   */\n  mobileSideOffset?: number\n\n  /**\n   * The container to position the mobile\n   */\n  container?: HTMLElement\n\n  /**\n   * The minimum distance in pixels to keep between the tooltip and the boundary (usually the viewport) edges.\n   * Can be a single number applied to all sides, or an object to configure each side individually.\n   * @default 8\n   */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n}\n\n/**\n * A versatile tooltip component that shows additional information on hover.\n * Built on top of Radix UI's tooltip primitives with custom styling and animations.\n *\n * @example\n * // Basic usage\n * <Tooltip triggerElement={<button>Hover me</button>} side=\"top\">\n *   Helpful information\n * </Tooltip>\n *\n * @example\n * // With custom delay and className\n * <Tooltip\n *   triggerElement={<Icon />}\n *   side=\"right\"\n *   delayDuration={300}\n *   className=\"custom-tooltip\"\n * >\n *   Icon description\n * </Tooltip>\n */\nexport function Tooltip({\n  triggerElement,\n  children,\n  side = 'top',\n  className,\n  delayDuration = 300,\n  arrow = false,\n  mobileSide,\n  mobileAlign,\n  mobileSideOffset,\n  container,\n  collisionPadding,\n  ...props\n}: Readonly<TooltipProps>) {\n  const isTouchDevice = useIsTouchDevice()\n\n  return isTouchDevice ? (\n    <Popover\n      side={mobileSide}\n      className={className}\n      align={mobileAlign}\n      sideOffset={mobileSideOffset}\n      triggerElement={triggerElement}\n      container={container}\n      {...props}\n    >\n      {children}\n    </Popover>\n  ) : (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={delayDuration}>\n        <TooltipTrigger asChild>{triggerElement}</TooltipTrigger>\n        <TooltipContent\n          side={side}\n          className={className}\n          arrow={arrow}\n          container={container}\n          collisionPadding={collisionPadding}\n        >\n          {children}\n        </TooltipContent>\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n\n/**\n * Export primitive components for custom tooltip implementations.\n * Use these when you need more control over the tooltip behavior and styling.\n *\n * @example\n * // Custom implementation using primitives\n * <TooltipProvider>\n *   <TooltipRoot>\n *     <TooltipTrigger asChild>\n *       <button>Hover</button>\n *     </TooltipTrigger>\n *     <TooltipContent>Custom tooltip</TooltipContent>\n *   </TooltipRoot>\n * </TooltipProvider>\n */\nexport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger }\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,kBAAkB,gBAAA,CAAiB;AAMzC,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAExC,MAAM,gBAAgB,gBAAA,CAAiB;AAWvC,MAAM,iBAAiB,KAAA,CAAM,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,gBAAA,GAAmB,CAAA,EAAG,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClG,IAAA,MAAM,OAAA,mBACJ,IAAA;AAAA,MAAC,gBAAA,CAAiB,OAAA;AAAA,MAAjB;AAAA,QACC,GAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,8CAAA;AAAA,UACA,gBAAA;AAAA,UACA,iCAAA;AAAA,UACA,gGAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,yBAAS,GAAA,CAAC,gBAAA,CAAiB,KAAA,EAAjB,EAAuB,MAAK,OAAA,EAAQ;AAAA;AAAA;AAAA,KACjD;AAGF,IAAA,IAAI,SAAA,KAAc,MAAM,OAAO,OAAA;AAC/B,IAAA,2BAAQ,gBAAA,CAAiB,MAAA,EAAjB,EAAwB,SAAA,EAAW,SAAA,IAAa,QAAY,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,EAC9E;AACF;AACA,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AAoF/C,SAAS,OAAA,CAAQ;AAAA,EACtB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB,KAAA,GAAQ,KAAA;AAAA,EACR,UAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,gBAAgB,gBAAA,EAAiB;AAEvC,EAAA,OAAO,aAAA,mBACL,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,UAAA;AAAA,MACN,SAAA;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACP,UAAA,EAAY,gBAAA;AAAA,MACZ,cAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,mBAEA,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,eAAY,aAAA,EACX,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,oBACxC,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,gBAAA;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { Popover } from '../Popover/Popover'\n\nimport { useIsTouchDevice } from '@/lib/useTouchDevice'\nimport { cn } from '@/lib/utils'\n\n/**\n * Provider component that wraps all tooltip instances.\n * Controls the delay duration and positioning of tooltips app-wide.\n */\nconst TooltipProvider = TooltipPrimitive.Provider\n\n/**\n * The root component that wraps the trigger and content.\n * Manages the open state and hover interactions.\n */\nconst TooltipRoot = TooltipPrimitive.Root\n\n/**\n * The element that triggers the tooltip when hovered or focused.\n * Wrap with asChild to use custom components as triggers.\n */\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipPortal = TooltipPrimitive.Portal\n\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n  arrow?: boolean\n  /**\n   * Container for the portal. When provided, the tooltip is portaled into this element instead of `document.body`.\n   * Pass `null` to disable portaling and render inline (legacy behavior).\n   */\n  container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>['container'] | null\n}\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className, sideOffset = 4, collisionPadding = 8, arrow, container, children, ...props }, ref) => {\n    const content = (\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(\n          'z-50 rounded-lg bg-white px-3 py-1.5 text-sm',\n          'shadow-tooltip',\n          'animate-in fade-in-0 zoom-in-95',\n          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {arrow && <TooltipPrimitive.Arrow fill=\"white\" />}\n      </TooltipPrimitive.Content>\n    )\n\n    if (container === null) return content\n    return <TooltipPrimitive.Portal container={container ?? undefined}>{content}</TooltipPrimitive.Portal>\n  },\n)\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport type TooltipProps = {\n  /**\n   * The content to be displayed inside the tooltip\n   */\n  children: React.ReactElement | string\n\n  /**\n   * The element that triggers the tooltip on hover\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * The preferred side of the trigger to render the tooltip\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Optional custom className for additional styling\n   */\n  className?: string\n\n  /**\n   * Delay duration for showing the tooltip in milliseconds\n   * @default 300\n   */\n  delayDuration?: number\n\n  /**\n   * Whether to show an arrow pointer on the tooltip\n   * @default false\n   */\n  arrow?: boolean\n\n  /**\n   * The preferred side of the trigger to render the mobile\n   */\n  mobileSide?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * The preferred alignment of the mobile\n   */\n  mobileAlign?: 'start' | 'center' | 'end'\n\n  /**\n   * The preferred side offset of the mobile\n   */\n  mobileSideOffset?: number\n\n  /**\n   * The container to position the mobile\n   */\n  container?: HTMLElement\n\n  /**\n   * The minimum distance in pixels to keep between the tooltip and the boundary (usually the viewport) edges.\n   * Can be a single number applied to all sides, or an object to configure each side individually.\n   * @default 8\n   */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n}\n\n/**\n * A versatile tooltip component that shows additional information on hover.\n * Built on top of Radix UI's tooltip primitives with custom styling and animations.\n *\n * @example\n * // Basic usage\n * <Tooltip triggerElement={<button>Hover me</button>} side=\"top\">\n *   Helpful information\n * </Tooltip>\n *\n * @example\n * // With custom delay and className\n * <Tooltip\n *   triggerElement={<Icon />}\n *   side=\"right\"\n *   delayDuration={300}\n *   className=\"custom-tooltip\"\n * >\n *   Icon description\n * </Tooltip>\n */\nexport function Tooltip({\n  triggerElement,\n  children,\n  side = 'top',\n  className,\n  delayDuration = 300,\n  arrow = false,\n  mobileSide,\n  mobileAlign,\n  mobileSideOffset,\n  container,\n  collisionPadding,\n  ...props\n}: Readonly<TooltipProps>) {\n  const isTouchDevice = useIsTouchDevice()\n\n  return isTouchDevice ? (\n    <Popover\n      side={mobileSide}\n      className={className}\n      align={mobileAlign}\n      sideOffset={mobileSideOffset}\n      triggerElement={triggerElement}\n      container={container}\n      collisionPadding={collisionPadding}\n      {...props}\n    >\n      {children}\n    </Popover>\n  ) : (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={delayDuration}>\n        <TooltipTrigger asChild>{triggerElement}</TooltipTrigger>\n        <TooltipContent\n          side={side}\n          className={className}\n          arrow={arrow}\n          container={container}\n          collisionPadding={collisionPadding}\n        >\n          {children}\n        </TooltipContent>\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n\n/**\n * Export primitive components for custom tooltip implementations.\n * Use these when you need more control over the tooltip behavior and styling.\n *\n * @example\n * // Custom implementation using primitives\n * <TooltipProvider>\n *   <TooltipRoot>\n *     <TooltipTrigger asChild>\n *       <button>Hover</button>\n *     </TooltipTrigger>\n *     <TooltipContent>Custom tooltip</TooltipContent>\n *   </TooltipRoot>\n * </TooltipProvider>\n */\nexport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger }\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,kBAAkB,gBAAA,CAAiB;AAMzC,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAExC,MAAM,gBAAgB,gBAAA,CAAiB;AAWvC,MAAM,iBAAiB,KAAA,CAAM,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,gBAAA,GAAmB,CAAA,EAAG,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClG,IAAA,MAAM,OAAA,mBACJ,IAAA;AAAA,MAAC,gBAAA,CAAiB,OAAA;AAAA,MAAjB;AAAA,QACC,GAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,8CAAA;AAAA,UACA,gBAAA;AAAA,UACA,iCAAA;AAAA,UACA,gGAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,yBAAS,GAAA,CAAC,gBAAA,CAAiB,KAAA,EAAjB,EAAuB,MAAK,OAAA,EAAQ;AAAA;AAAA;AAAA,KACjD;AAGF,IAAA,IAAI,SAAA,KAAc,MAAM,OAAO,OAAA;AAC/B,IAAA,2BAAQ,gBAAA,CAAiB,MAAA,EAAjB,EAAwB,SAAA,EAAW,SAAA,IAAa,QAAY,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,EAC9E;AACF;AACA,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AAoF/C,SAAS,OAAA,CAAQ;AAAA,EACtB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB,KAAA,GAAQ,KAAA;AAAA,EACR,UAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,gBAAgB,gBAAA,EAAiB;AAEvC,EAAA,OAAO,aAAA,mBACL,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,UAAA;AAAA,MACN,SAAA;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACP,UAAA,EAAY,gBAAA;AAAA,MACZ,cAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,mBAEA,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,eAAY,aAAA,EACX,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,oBACxC,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,gBAAA;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.11.0",
+  "version": "4.11.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",