@cloudraker/reki 2.6.1

package/dist/chunks/tooltip-ncaia8n1lavkyw8n.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
+import { u as x } from "./portal-provider-off76og7tjyz96ys.js";
+import { $ as v, V as C, W as L, X as w, Y as T, Z as k, bk as b } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+const Z = v;
+function M({
+  content: e,
+  children: i,
+  align: n,
+  asChild: r,
+  render: l,
+  side: d,
+  className: p,
+  container: c,
+  closeDelay: m,
+  delay: f,
+  ...h
+}) {
+  const u = x(), g = c ?? u ?? void 0, s = l ?? (r ? i : void 0);
+  return /* @__PURE__ */ a(C, { ...h, children: [
+    /* @__PURE__ */ t(
+      L,
+      {
+        closeDelay: m,
+        delay: f,
+        className: o(
+          // Defensive resets when rendering as button wrapper (not render/asChild)
+          // These prevent global button styles from polluting the trigger
+          // Consumer styles passed via className will override these (tailwind-merge)
+          !(s !== void 0) && "inline-flex items-center bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0]",
+          // Tooltip triggers are disclosure elements, not actions — override
+          // cursor: pointer (e.g. from Button used via render prop) so the
+          // trigger doesn't appear clickable
+          "cursor-default",
+          p
+        ),
+        render: s,
+        children: r ? void 0 : i
+      }
+    ),
+    /* @__PURE__ */ t(w, { container: g, children: /* @__PURE__ */ t(T, { align: n, side: d, sideOffset: 10, className: "max-w-[var(--available-width)]", children: /* @__PURE__ */ a(
+      k,
+      {
+        className: o(
+          "flex origin-[var(--transform-origin)] flex-col rounded-md bg-reki-base px-2.5 py-1.5 text-sm text-reki-default",
+          "shadow-lg shadow-reki-tip-shadow outline outline-reki-fill",
+          "transition-[transform,scale,opacity] duration-150",
+          "data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
+          "data-[ending-style]:scale-90 data-[ending-style]:opacity-0",
+          "data-[instant]:duration-0",
+          "reki-tooltip-popup"
+        ),
+        children: [
+          /* @__PURE__ */ t(
+            b,
+            {
+              className: o(
+                "flex",
+                "data-[side=bottom]:top-[-8px]",
+                "data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
+                "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
+                "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180"
+              ),
+              children: /* @__PURE__ */ t(y, {})
+            }
+          ),
+          e
+        ]
+      }
+    ) }) })
+  ] });
+}
+function y(e) {
+  return /* @__PURE__ */ a("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...e, children: [
+    /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+        className: "fill-reki-base"
+      }
+    ),
+    /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+        className: "fill-reki-tip-shadow"
+      }
+    ),
+    /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+        className: "fill-reki-tip-stroke"
+      }
+    )
+  ] });
+}
+export {
+  M as T,
+  Z as a
+};
+//# sourceMappingURL=tooltip-ncaia8n1lavkyw8n.js.map

package/dist/chunks/tooltip-ncaia8n1lavkyw8n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-ncaia8n1lavkyw8n.js","sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipBase } from \"@base-ui/react/tooltip\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Tooltip side variant definitions mapping positions to their Tailwind classes. */\nexport const REKI_TOOLTIP_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Tooltip appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Tooltip appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Tooltip appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Tooltip appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const REKI_TOOLTIP_DEFAULT_VARIANTS = {\n  side: \"top\",\n} as const;\n\n// Derived types from REKI_TOOLTIP_VARIANTS\nexport type RekiTooltipSide = keyof typeof REKI_TOOLTIP_VARIANTS.side;\n\nexport interface RekiTooltipVariantsProps {\n  /**\n   * Preferred side of the trigger to render the tooltip.\n   * - `\"top\"` — Tooltip appears above the trigger\n   * - `\"bottom\"` — Tooltip appears below the trigger\n   * - `\"left\"` — Tooltip appears to the left of the trigger\n   * - `\"right\"` — Tooltip appears to the right of the trigger\n   * @default \"top\"\n   */\n  side?: RekiTooltipSide;\n}\n\nexport function tooltipVariants({\n  side = REKI_TOOLTIP_DEFAULT_VARIANTS.side,\n}: RekiTooltipVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-reki-base px-2.5 py-1.5 text-sm text-reki-default\",\n    \"shadow-lg shadow-reki-tip-shadow outline outline-1 outline-reki-fill\",\n    \"transition-[transform,scale,opacity] duration-150\",\n    \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n    \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n    \"data-[instant]:duration-0\",\n    // Apply side-specific styles (currently none, but extensible)\n    resolveVariant(\n      REKI_TOOLTIP_VARIANTS.side,\n      side,\n      REKI_TOOLTIP_DEFAULT_VARIANTS.side,\n    ).classes,\n  );\n}\n\nexport const TooltipProvider = TooltipBase.Provider;\n\ntype BaseTooltipProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;\n\ntype TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;\n\n/** Alignment options for tooltip positioning. Source: PositionerProps[\"align\"] */\ntype TooltipAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Tooltip component props.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Add new item\" render={<Button shape=\"square\" icon={PlusIcon} />}>\n *   Add\n * </Tooltip>\n * ```\n */\nexport type TooltipProps = BaseTooltipProps &\n  RekiTooltipVariantsProps & {\n    /**\n     * Alignment on the axis perpendicular to `side`.\n     * - `\"start\"` — Align to the start edge\n     * - `\"center\"` — Center-aligned\n     * - `\"end\"` — Align to the end edge\n     */\n    align?: TooltipAlign;\n    /**\n     * @deprecated Use the `render` prop instead.\n     * @example `<Tooltip render={<Button />}>Label</Tooltip>` instead of `<Tooltip asChild><Button>Label</Button></Tooltip>`\n     */\n    asChild?: boolean;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Content to display inside the tooltip popup. */\n    content: ReactNode;\n    /**\n     * Container element for the portal. Use this to render the tooltip inside\n     * a Shadow DOM or custom container. Overrides `RekiPortalProvider` context.\n     * @default document.body (or RekiPortalProvider container if set)\n     */\n    container?: PortalContainer;\n    /**\n     * How long to wait before closing the tooltip. Specified in milliseconds.\n     * @default 0\n     */\n    closeDelay?: number;\n    /**\n     * How long to wait before opening the tooltip. Specified in milliseconds.\n     * @default 600\n     */\n    delay?: number;\n    /**\n     * Element to render as the tooltip trigger. Children are passed to this element.\n     * @example `<Tooltip content=\"Save\" render={<Button />}>Save</Tooltip>`\n     */\n    render?: TriggerProps[\"render\"];\n  };\n\n/**\n * Accessible popup that shows additional information on hover/focus.\n * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save changes\" render={<Button variant=\"primary\" />}>\n *   Save\n * </Tooltip>\n * ```\n */\nexport function Tooltip({\n  content,\n  children,\n  align,\n  asChild,\n  render,\n  side,\n  className,\n  container: containerProp,\n  closeDelay,\n  delay,\n  ...props\n}: TooltipProps) {\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  // Support both render prop (preferred) and deprecated asChild pattern\n  // When using asChild, children IS the render element, so don't pass it as children\n  const resolvedRender =\n    render ?? (asChild ? (children as TriggerProps[\"render\"]) : undefined);\n  const shouldUseRender = resolvedRender !== undefined;\n\n  return (\n    <TooltipBase.Root {...props}>\n      <TooltipBase.Trigger\n        closeDelay={closeDelay}\n        delay={delay}\n        className={cn(\n          // Defensive resets when rendering as button wrapper (not render/asChild)\n          // These prevent global button styles from polluting the trigger\n          // Consumer styles passed via className will override these (tailwind-merge)\n          !shouldUseRender &&\n            \"inline-flex items-center bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0]\",\n          // Tooltip triggers are disclosure elements, not actions — override\n          // cursor: pointer (e.g. from Button used via render prop) so the\n          // trigger doesn't appear clickable\n          \"cursor-default\",\n          className,\n        )}\n        render={resolvedRender}\n      >\n        {asChild ? undefined : (children as ReactNode)}\n      </TooltipBase.Trigger>\n      <TooltipBase.Portal container={container}>\n        <TooltipBase.Positioner align={align} side={side} sideOffset={10} className=\"max-w-[var(--available-width)]\">\n          <TooltipBase.Popup\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-reki-base px-2.5 py-1.5 text-sm text-reki-default\",\n              \"shadow-lg shadow-reki-tip-shadow outline outline-reki-fill\",\n              \"transition-[transform,scale,opacity] duration-150\",\n              \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n              \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n              \"data-[instant]:duration-0\",\n              \"reki-tooltip-popup\",\n            )}\n          >\n            <TooltipBase.Arrow\n              className={cn(\n                \"flex\",\n                \"data-[side=bottom]:top-[-8px]\",\n                \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n                \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n                \"data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n              )}\n            >\n              <ArrowSvg />\n            </TooltipBase.Arrow>\n            {content}\n          </TooltipBase.Popup>\n        </TooltipBase.Positioner>\n      </TooltipBase.Portal>\n    </TooltipBase.Root>\n  );\n}\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches tooltip background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the tooltip's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/tooltip\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-reki-base\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-reki-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-reki-tip-stroke\"\n      />\n    </svg>\n  );\n}\n"],"names":["TooltipProvider","TooltipBase.Provider","Tooltip","content","children","align","asChild","render","side","className","containerProp","closeDelay","delay","props","contextContainer","usePortalContainer","container","resolvedRender","jsxs","TooltipBase.Root","jsx","TooltipBase.Trigger","cn","TooltipBase.Portal","TooltipBase.Positioner","TooltipBase.Popup","TooltipBase.Arrow","ArrowSvg"],"mappings":";;;;;AAsEO,MAAMA,IAAkBC;AAuExB,SAASC,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAWC;AAAA,EACX,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAmBC,EAAA,GACnBC,IAAYN,KAAiBI,KAAoB,QAIjDG,IACJV,MAAWD,IAAWF,IAAsC;AAG9D,SACE,gBAAAc,EAACC,GAAA,EAAkB,GAAGN,GACpB,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,YAAAV;AAAA,QACA,OAAAC;AAAA,QACA,WAAWU;AAAA;AAAA;AAAA;AAAA,UAIT,EAXgBL,MAAmB,WAYjC;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACAR;AAAA,QAAA;AAAA,QAEF,QAAQQ;AAAA,QAEP,cAAU,SAAab;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1B,gBAAAgB,EAACG,GAAA,EAAmB,WAAAP,GAClB,UAAA,gBAAAI,EAACI,GAAA,EAAuB,OAAAnB,GAAc,MAAAG,GAAY,YAAY,IAAI,WAAU,kCAC1E,UAAA,gBAAAU;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,WAAWJ;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGF,4BAACK,GAAA,CAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXxB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAiBA,SAASwB,EAASd,GAAoC;AACpD,SACE,gBAAAK,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAQ,GAAGL,GAC9D,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}