periplo-ui 4.10.0 → 4.11.1

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/Toaster/Toaster.js

@@ -1,12 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { CheckCircle } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { GlobeHemisphereEast } from '@phosphor-icons/react/dist/ssr/GlobeHemisphereEast';
 import { Info } from '@phosphor-icons/react/dist/ssr/Info';
 import { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap';
 import { Warning } from '@phosphor-icons/react/dist/ssr/Warning';
 import { XCircle } from '@phosphor-icons/react/dist/ssr/XCircle';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import { buttonVariants } from '../Button/Button.js';
+import { typographyVariants } from '../Typography/Typography.js';
 import { cn } from '../../lib/utils.js';
 
 const Toaster = ({
@@ -32,21 +34,25 @@ const Toaster = ({
         unstyled: true,
         classNames: {
           toast: cn(
-            "group toast-group flex w-full min-w-[300px] items-center gap-4 px-6 py-3 rounded-lg border text-sm border-1.5 bg-white shadow-toast",
+            "group toast-group flex w-full min-w-[300px] items-center gap-4 p-4 rounded-lg border text-sm border-1.5 bg-white shadow-toast",
             // Default variant
             "data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black",
-            // Success variant (green background)
-            "data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-500",
-            // Error variant (red background)
-            "data-[type=error]:bg-red-100 data-[type=error]:text-red-800 data-[type=error]:border-red-500",
-            // Warning variant (primary background)
-            "data-[type=warning]:bg-primary-100 data-[type=warning]:text-accent-900 data-[type=warning]:border-primary-500",
-            // Info variant (blue background)
-            "data-[type=info]:bg-blue-100 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500"
+            // Success variant
+            "data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-300",
+            // Error variant
+            "data-[type=error]:bg-error-100 data-[type=error]:text-error-800 data-[type=error]:border-error-300",
+            // Warning variant
+            "data-[type=warning]:bg-warning-100 data-[type=warning]:text-warning-800 data-[type=warning]:border-warning-300",
+            // Info variant
+            "data-[type=info]:bg-information-100 data-[type=info]:text-information-800 data-[type=info]:border-information-300"
           ),
+          icon: cn("-mr-1 shrink-0"),
+          content: cn("min-w-0"),
+          title: cn(typographyVariants({ weight: "medium" }), "text-inherit"),
+          description: cn(typographyVariants(), "text-inherit"),
           loader: cn("!static !transform-none data-[visible=false]:hidden"),
           closeButton: cn(
-            "right-0 top-3 left-auto",
+            "order-last ml-auto shrink-0",
             "p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent",
             "[&_svg]:h-4 [&_svg]:w-4"
           ),
@@ -54,13 +60,15 @@ const Toaster = ({
             buttonVariants({
               variant: "primary",
               size: "sm"
-            })
+            }),
+            "inline-block shrink-0 max-w-24 truncate text-left leading-8"
           ),
           cancelButton: cn(
             buttonVariants({
               variant: "ghost",
               size: "sm"
-            })
+            }),
+            "ml-auto -mr-2 inline-block shrink-0 max-w-24 truncate text-left leading-8"
           )
         }
       },
@@ -75,16 +83,19 @@ const Toaster = ({
     }
   );
 };
-const toast = Object.assign((message, options) => toast$1(message, options), {
-  info: (message, options) => toast$1.info(message, options),
-  success: (message, options) => toast$1.success(message, options),
-  error: (message, options) => toast$1.error(message, options),
-  warning: (message, options) => toast$1.warning(message, options),
-  loading: (message, options) => toast$1.loading(message, options),
-  promise: (promise, opts) => toast$1.promise(promise, opts),
-  dismiss: (toastId) => toast$1.dismiss(toastId),
-  custom: (render, options) => toast$1.custom(render, options)
-});
+const toast = Object.assign(
+  (message, options) => toast$1(message, { icon: /* @__PURE__ */ jsx(GlobeHemisphereEast, { size: 24 }), ...options }),
+  {
+    info: (message, options) => toast$1.info(message, options),
+    success: (message, options) => toast$1.success(message, options),
+    error: (message, options) => toast$1.error(message, options),
+    warning: (message, options) => toast$1.warning(message, options),
+    loading: (message, options) => toast$1.loading(message, options),
+    promise: (promise, opts) => toast$1.promise(promise, opts),
+    dismiss: (toastId) => toast$1.dismiss(toastId),
+    custom: (render, options) => toast$1.custom(render, options)
+  }
+);
 
 export { Toaster, toast };
 //# sourceMappingURL=Toaster.js.map

package/dist/components/Toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle } from '@phosphor-icons/react/dist/ssr/CheckCircle'\nimport { Info } from '@phosphor-icons/react/dist/ssr/Info'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap'\nimport { Warning } from '@phosphor-icons/react/dist/ssr/Warning'\nimport { XCircle } from '@phosphor-icons/react/dist/ssr/XCircle'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default' | 'info'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n  /** Label text for the action button */\n  label: string\n  /** onClick handler for the action button */\n  onClick: () => void\n  /** Optional style object for the button */\n  style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n  /** Optional description text below the main message */\n  description?: React.ReactNode\n  /** Duration in milliseconds to show the toast */\n  duration?: number\n  /** Custom icon element */\n  icon?: React.ReactNode\n  /** Position of the toast on screen */\n  position?: ToastPosition\n  /** ID for programmatically managing the toast */\n  id?: string | number\n  /** Action button configuration */\n  action?: ToastAction\n  /** Cancel button configuration */\n  cancel?: ToastAction\n  /** Callback when toast is dismissed */\n  onDismiss?: () => void\n  /** Callback when toast auto-closes */\n  onAutoClose?: () => void\n  /** Whether the toast can be dismissed */\n  dismissible?: boolean\n  /** Custom CSS classes */\n  className?: string\n  /** Whether to show the close button at the toast */\n  closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n  /** Number of visible toasts */\n  visibleToasts?: number\n  /** Position of toasts */\n  position?: ToastPosition\n  /** Show close button on toasts, dismissable has to be true */\n  closeButton?: boolean\n  /** Whether to expand the toast */\n  expand?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n *   theme=\"light\"\n *   visibleToasts={3}\n *   position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({\n  visibleToasts = 3,\n  position = 'bottom-right',\n  closeButton = false,\n  expand = true,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Sonner\n      className=\"toaster group\"\n      theme=\"light\"\n      richColors={false}\n      expand={expand}\n      visibleToasts={visibleToasts}\n      position={position}\n      closeButton={closeButton}\n      dir=\"ltr\"\n      invert={false}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: cn(\n            'group toast-group flex w-full min-w-[300px] items-center gap-4 px-6 py-3 rounded-lg border text-sm border-1.5 bg-white shadow-toast',\n            // Default variant\n            'data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black',\n            // Success variant (green background)\n            'data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-500',\n            // Error variant (red background)\n            'data-[type=error]:bg-red-100 data-[type=error]:text-red-800 data-[type=error]:border-red-500',\n            // Warning variant (primary background)\n            'data-[type=warning]:bg-primary-100 data-[type=warning]:text-accent-900 data-[type=warning]:border-primary-500',\n            // Info variant (blue background)\n            'data-[type=info]:bg-blue-100 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500',\n          ),\n          loader: cn('!static !transform-none data-[visible=false]:hidden'),\n          closeButton: cn(\n            'right-0 top-3 left-auto',\n            'p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent',\n            '[&_svg]:h-4 [&_svg]:w-4',\n          ),\n          actionButton: cn(\n            buttonVariants({\n              variant: 'primary',\n              size: 'sm',\n            }),\n          ),\n          cancelButton: cn(\n            buttonVariants({\n              variant: 'ghost',\n              size: 'sm',\n            }),\n          ),\n        },\n      }}\n      icons={{\n        success: <CheckCircle size={24} />,\n        warning: <Warning size={24} />,\n        error: <XCircle size={24} />,\n        info: <Info size={24} />,\n        loading: (\n          <div className=\"flex h-6 w-6 items-center justify-center\">\n            <SpinnerGap size={20} className=\"animate-spin\" />\n          </div>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\n\nconst toast = Object.assign((message: React.ReactNode, options?: ToastOptions) => sonnerToast(message, options), {\n  info: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.info(message, options),\n  success: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.success(message, options),\n  error: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.error(message, options),\n  warning: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.warning(message, options),\n  loading: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.loading(message, options),\n  promise: <T,>(\n    promise: Promise<T>,\n    opts: {\n      loading: React.ReactNode\n      success: React.ReactNode | ((data: T) => React.ReactNode)\n      error: React.ReactNode | ((error: Error) => React.ReactNode)\n      duration?: number\n      description?: React.ReactNode\n      position?: ToastPosition\n      id?: string\n      icon?: React.ReactNode\n      className?: string\n      dismissible?: boolean\n      closeButton?: boolean\n    },\n  ) => sonnerToast.promise(promise, opts),\n  dismiss: (toastId: string | number) => sonnerToast.dismiss(toastId),\n  custom: (render: (id: string | number) => React.ReactElement, options?: ToastOptions) =>\n    sonnerToast.custom(render, options),\n})\n\nexport { Toaster, toast }\n"],"names":[],"mappings":";;;;;;;;;;;AA2FA;AAAiB;AACC;AACL;AACG;AACL;AAEX;AACE;AACE;AAAC;AAAA;AACW;AACJ;AACM;AACZ;AACA;AACA;AACA;AACI;AACI;AACM;AACF;AACE;AACH;AACL;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AACF;AACgE;AACnD;AACX;AACA;AACA;AACF;AACc;AACG;AACJ;AACH;AACP;AACH;AACc;AACG;AACJ;AACH;AACP;AACH;AACF;AACF;AACO;AAC2B;AACJ;AACF;AACJ;AAIpB;AAEJ;AACI;AAAA;AAGV;AAEA;AAAiH;AAClB;AACM;AACJ;AACI;AACA;AAgB7D;AAC4B;AAGpE;;"}
+{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle } from '@phosphor-icons/react/dist/ssr/CheckCircle'\nimport { GlobeHemisphereEast } from '@phosphor-icons/react/dist/ssr/GlobeHemisphereEast'\nimport { Info } from '@phosphor-icons/react/dist/ssr/Info'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap'\nimport { Warning } from '@phosphor-icons/react/dist/ssr/Warning'\nimport { XCircle } from '@phosphor-icons/react/dist/ssr/XCircle'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\nimport { typographyVariants } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default' | 'info'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n  /** Label text for the action button */\n  label: string\n  /** onClick handler for the action button */\n  onClick: () => void\n  /** Optional style object for the button */\n  style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n  /** Optional description text below the main message */\n  description?: React.ReactNode\n  /** Duration in milliseconds to show the toast */\n  duration?: number\n  /** Custom icon element */\n  icon?: React.ReactNode\n  /** Position of the toast on screen */\n  position?: ToastPosition\n  /** ID for programmatically managing the toast */\n  id?: string | number\n  /** Action button configuration */\n  action?: ToastAction\n  /** Cancel button configuration */\n  cancel?: ToastAction\n  /** Callback when toast is dismissed */\n  onDismiss?: () => void\n  /** Callback when toast auto-closes */\n  onAutoClose?: () => void\n  /** Whether the toast can be dismissed */\n  dismissible?: boolean\n  /** Custom CSS classes */\n  className?: string\n  /** Whether to show the close button at the toast */\n  closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n  /** Number of visible toasts */\n  visibleToasts?: number\n  /** Position of toasts */\n  position?: ToastPosition\n  /** Show close button on toasts, dismissable has to be true */\n  closeButton?: boolean\n  /** Whether to expand the toast */\n  expand?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n *   theme=\"light\"\n *   visibleToasts={3}\n *   position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({\n  visibleToasts = 3,\n  position = 'bottom-right',\n  closeButton = false,\n  expand = true,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Sonner\n      className=\"toaster group\"\n      theme=\"light\"\n      richColors={false}\n      expand={expand}\n      visibleToasts={visibleToasts}\n      position={position}\n      closeButton={closeButton}\n      dir=\"ltr\"\n      invert={false}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: cn(\n            'group toast-group flex w-full min-w-[300px] items-center gap-4 p-4 rounded-lg border text-sm border-1.5 bg-white shadow-toast',\n            // Default variant\n            'data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black',\n            // Success variant\n            'data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-300',\n            // Error variant\n            'data-[type=error]:bg-error-100 data-[type=error]:text-error-800 data-[type=error]:border-error-300',\n            // Warning variant\n            'data-[type=warning]:bg-warning-100 data-[type=warning]:text-warning-800 data-[type=warning]:border-warning-300',\n            // Info variant\n            'data-[type=info]:bg-information-100 data-[type=info]:text-information-800 data-[type=info]:border-information-300',\n          ),\n          icon: cn('-mr-1 shrink-0'),\n          content: cn('min-w-0'),\n          title: cn(typographyVariants({ weight: 'medium' }), 'text-inherit'),\n          description: cn(typographyVariants(), 'text-inherit'),\n          loader: cn('!static !transform-none data-[visible=false]:hidden'),\n          closeButton: cn(\n            'order-last ml-auto shrink-0',\n            'p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent',\n            '[&_svg]:h-4 [&_svg]:w-4',\n          ),\n          actionButton: cn(\n            buttonVariants({\n              variant: 'primary',\n              size: 'sm',\n            }),\n            'inline-block shrink-0 max-w-24 truncate text-left leading-8',\n          ),\n          cancelButton: cn(\n            buttonVariants({\n              variant: 'ghost',\n              size: 'sm',\n            }),\n            'ml-auto -mr-2 inline-block shrink-0 max-w-24 truncate text-left leading-8',\n          ),\n        },\n      }}\n      icons={{\n        success: <CheckCircle size={24} />,\n        warning: <Warning size={24} />,\n        error: <XCircle size={24} />,\n        info: <Info size={24} />,\n        loading: (\n          <div className=\"flex h-6 w-6 items-center justify-center\">\n            <SpinnerGap size={20} className=\"animate-spin\" />\n          </div>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\n\nconst toast = Object.assign(\n  (message: React.ReactNode, options?: ToastOptions) =>\n    sonnerToast(message, { icon: <GlobeHemisphereEast size={24} />, ...options }),\n  {\n    info: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.info(message, options),\n    success: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.success(message, options),\n    error: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.error(message, options),\n    warning: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.warning(message, options),\n    loading: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.loading(message, options),\n    promise: <T,>(\n      promise: Promise<T>,\n      opts: {\n        loading: React.ReactNode\n        success: React.ReactNode | ((data: T) => React.ReactNode)\n        error: React.ReactNode | ((error: Error) => React.ReactNode)\n        duration?: number\n        description?: React.ReactNode\n        position?: ToastPosition\n        id?: string\n        icon?: React.ReactNode\n        className?: string\n        dismissible?: boolean\n        closeButton?: boolean\n      },\n    ) => sonnerToast.promise(promise, opts),\n    dismiss: (toastId: string | number) => sonnerToast.dismiss(toastId),\n    custom: (render: (id: string | number) => React.ReactElement, options?: ToastOptions) =>\n      sonnerToast.custom(render, options),\n  },\n)\n\nexport { Toaster, toast }\n"],"names":[],"mappings":";;;;;;;;;;;;;AA6FA;AAAiB;AACC;AACL;AACG;AACL;AAEX;AACE;AACE;AAAC;AAAA;AACW;AACJ;AACM;AACZ;AACA;AACA;AACA;AACI;AACI;AACM;AACF;AACE;AACH;AACL;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AACF;AACyB;AACJ;AAC6C;AACd;AACY;AACnD;AACX;AACA;AACA;AACF;AACc;AACG;AACJ;AACH;AACP;AACD;AACF;AACc;AACG;AACJ;AACH;AACP;AACD;AACF;AACF;AACF;AACO;AAC2B;AACJ;AACF;AACJ;AAIpB;AAEJ;AACI;AAAA;AAGV;AAEA;AAAqB;AAE2D;AAC9E;AAC+F;AACM;AACJ;AACI;AACA;AAgB7D;AAC4B;AAE9B;AAExC;;"}

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.10.0",
+  "version": "4.11.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",