@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/components/atoms/pager-control/pager-control.js

@@ -0,0 +1,165 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as e from "react";
+import { tv as E, cnBase as k } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const D = E({
+  base: "flex items-center",
+  variants: {
+    size: {
+      // Uses primitive spacing tokens
+      sm: "gap-2",
+      default: "gap-2",
+      lg: "gap-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), F = E({
+  base: "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
+  variants: {
+    size: {
+      // Uses primitive spacing tokens
+      sm: "h-6",
+      default: "h-10",
+      lg: "h-16"
+    },
+    variant: {
+      charcoal: "",
+      ivory: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "charcoal"
+  }
+}), G = e.forwardRef(
+  ({
+    className: $,
+    size: u,
+    variant: i,
+    count: s,
+    activeIndex: b,
+    duration: o = 5e3,
+    autoPlay: h = !0,
+    onChange: c,
+    pauseOnHover: m = !0,
+    loop: y = !0,
+    ...T
+  }, V) => {
+    const [x, p] = e.useState(0), [A, C] = e.useState(!1), [v, g] = e.useState(0), S = b !== void 0 ? b : x, a = b !== void 0;
+    e.useEffect(() => {
+    }, [s, b, a, c]);
+    const w = Math.max(0, Math.min(S, s - 1)), l = e.useRef(null), n = e.useRef(null), f = e.useRef(0), P = e.useCallback(() => {
+      const t = w + 1;
+      t >= s ? y && (a || p(0), c?.(0)) : (a || p(t), c?.(t));
+    }, [w, s, y, a, c]), R = e.useCallback(
+      (t) => {
+        a || p(t), c?.(t), g(0), f.current = 0, n.current = null;
+      },
+      [a, c]
+    );
+    e.useEffect(() => {
+      if (!h || o <= 0 || A) {
+        l.current && (cancelAnimationFrame(l.current), l.current = null);
+        return;
+      }
+      const t = (r) => {
+        n.current === null && (n.current = r - f.current / 100 * o);
+        const M = r - n.current, N = Math.min(M / o * 100, 100);
+        g(N), N >= 100 ? (P(), g(0), f.current = 0, n.current = null) : l.current = requestAnimationFrame(t);
+      };
+      return l.current = requestAnimationFrame(t), () => {
+        l.current && cancelAnimationFrame(l.current);
+      };
+    }, [h, o, A, P]);
+    const q = e.useCallback(() => {
+      m && (f.current = v, n.current = null, C(!0));
+    }, [m, v]), z = e.useCallback(() => {
+      m && C(!1);
+    }, [m]);
+    e.useEffect(() => {
+      a && (g(0), f.current = 0, n.current = null);
+    }, [a]);
+    const I = (t) => {
+      if (t)
+        switch (u) {
+          case "sm":
+            return "w-16";
+          case "lg":
+            return "w-36";
+          default:
+            return "w-28";
+        }
+      switch (u) {
+        case "sm":
+          return "w-6";
+        case "lg":
+          return "w-16";
+        default:
+          return "w-10";
+      }
+    }, B = () => i === "ivory" ? "bg-alpha-white-30 hover:bg-alpha-white-60" : "bg-alpha-black-30 hover:bg-alpha-black-60", L = () => i === "ivory" ? "bg-alpha-white-30" : "bg-alpha-black-30", j = () => i === "ivory" ? "bg-gray-50" : "bg-gray-1200";
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: V,
+        role: "tablist",
+        "aria-label": "Page indicators",
+        className: D({ size: u, class: $ }),
+        onMouseEnter: q,
+        onMouseLeave: z,
+        ...T,
+        children: Array.from({ length: s }, (t, r) => r === w ? /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": !0,
+            "aria-label": `Page ${r + 1} of ${s}, current`,
+            className: k(
+              "relative cursor-pointer overflow-hidden rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
+              F({ size: u, variant: i }),
+              I(!0),
+              L()
+            ),
+            onClick: () => R(r),
+            children: /* @__PURE__ */ d(
+              "div",
+              {
+                className: k(
+                  "absolute top-0 bottom-0 left-0 h-full rounded-full",
+                  j()
+                ),
+                style: {
+                  width: h && o > 0 ? `${v}%` : "100%"
+                }
+              }
+            )
+          },
+          r
+        ) : /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": !1,
+            "aria-label": `Go to page ${r + 1} of ${s}`,
+            className: k(
+              F({ size: u, variant: i }),
+              I(!1),
+              B()
+            ),
+            onClick: () => R(r)
+          },
+          r
+        ))
+      }
+    );
+  }
+);
+G.displayName = "PagerControl";
+export {
+  G as PagerControl,
+  D as pagerControlVariants
+};
+//# sourceMappingURL=pager-control.js.map

package/dist/components/atoms/pager-control/pager-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pager-control.js","sources":["../../../../src/components/atoms/pager-control/pager-control.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\nconst pagerControlVariants = tv({\n\tbase: \"flex items-center\",\n\tvariants: {\n\t\tsize: {\n\t\t\t// Uses primitive spacing tokens\n\t\t\tsm: \"gap-2\",\n\t\t\tdefault: \"gap-2\",\n\t\t\tlg: \"gap-4\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t},\n});\n\nconst dotBaseVariants = tv({\n\tbase: \"cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]\",\n\tvariants: {\n\t\tsize: {\n\t\t\t// Uses primitive spacing tokens\n\t\t\tsm: \"h-6\",\n\t\t\tdefault: \"h-10\",\n\t\t\tlg: \"h-16\",\n\t\t},\n\t\tvariant: {\n\t\t\tcharcoal: \"\",\n\t\t\tivory: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t\tvariant: \"charcoal\",\n\t},\n});\n\nexport interface PagerControlProps\n\textends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n\t\tVariantProps<typeof pagerControlVariants>,\n\t\tVariantProps<typeof dotBaseVariants> {\n\t/**\n\t * Total number of pages/items\n\t */\n\tcount: number;\n\t/**\n\t * Current active page index (0-based)\n\t */\n\tactiveIndex?: number;\n\t/**\n\t * Duration in milliseconds for each page before auto-advancing\n\t * Set to 0 to disable auto-advance\n\t * @default 5000\n\t */\n\tduration?: number;\n\t/**\n\t * Whether the pager should auto-advance\n\t * @default true\n\t */\n\tautoPlay?: boolean;\n\t/**\n\t * Callback when the active page changes\n\t */\n\tonChange?: (index: number) => void;\n\t/**\n\t * Whether to pause auto-advance on hover\n\t * @default true\n\t */\n\tpauseOnHover?: boolean;\n\t/**\n\t * Whether to loop back to the first page after the last\n\t * @default true\n\t */\n\tloop?: boolean;\n}\n\n/**\n * PagerControl component for indicating progress through a series of pages/slides.\n *\n * Features smooth width transitions when switching between dots and an animated\n * progress fill on the active dot that shows time remaining before auto-advancing\n * (similar to Apple's carousel indicators).\n *\n * Variants:\n * - charcoal: Dark dots (for light backgrounds)\n * - ivory: Light dots (for dark backgrounds)\n *\n * Sizes:\n * - sm: Small dots (6px height)\n * - default: Medium dots (10px height)\n * - lg: Large dots (16px height)\n */\nconst PagerControl = React.forwardRef<HTMLDivElement, PagerControlProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tsize,\n\t\t\tvariant,\n\t\t\tcount,\n\t\t\tactiveIndex: controlledIndex,\n\t\t\tduration = 5000,\n\t\t\tautoPlay = true,\n\t\t\tonChange,\n\t\t\tpauseOnHover = true,\n\t\t\tloop = true,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [internalIndex, setInternalIndex] = React.useState(0);\n\t\tconst [isPaused, setIsPaused] = React.useState(false);\n\t\tconst [progress, setProgress] = React.useState(0);\n\n\t\t// Use controlled index if provided, otherwise use internal state\n\t\tconst activeIndex =\n\t\t\tcontrolledIndex !== undefined ? controlledIndex : internalIndex;\n\t\tconst isControlled = controlledIndex !== undefined;\n\n\t\t// Development warnings for common issues\n\t\tReact.useEffect(() => {\n\t\t\tif (import.meta.env?.DEV) {\n\t\t\t\tif (count < 1) {\n\t\t\t\t\tconsole.warn(\"PagerControl: count must be at least 1\");\n\t\t\t\t}\n\t\t\t\tif (controlledIndex !== undefined && controlledIndex >= count) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`PagerControl: activeIndex (${controlledIndex}) is out of bounds. Must be less than count (${count}).`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (controlledIndex !== undefined && controlledIndex < 0) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`PagerControl: activeIndex (${controlledIndex}) cannot be negative.`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (isControlled && onChange === undefined) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\"PagerControl: controlled mode (activeIndex provided) requires an onChange handler.\",\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}, [count, controlledIndex, isControlled, onChange]);\n\n\t\t// Clamp activeIndex to valid bounds\n\t\tconst safeActiveIndex = Math.max(0, Math.min(activeIndex, count - 1));\n\n\t\tconst animationFrameRef = React.useRef<number | null>(null);\n\t\tconst startTimeRef = React.useRef<number | null>(null);\n\t\tconst pausedProgressRef = React.useRef<number>(0);\n\n\t\tconst goToNext = React.useCallback(() => {\n\t\t\tconst nextIndex = safeActiveIndex + 1;\n\t\t\tif (nextIndex >= count) {\n\t\t\t\tif (loop) {\n\t\t\t\t\tif (!isControlled) setInternalIndex(0);\n\t\t\t\t\tonChange?.(0);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (!isControlled) setInternalIndex(nextIndex);\n\t\t\t\tonChange?.(nextIndex);\n\t\t\t}\n\t\t}, [safeActiveIndex, count, loop, isControlled, onChange]);\n\n\t\tconst goToIndex = React.useCallback(\n\t\t\t(index: number) => {\n\t\t\t\tif (!isControlled) setInternalIndex(index);\n\t\t\t\tonChange?.(index);\n\t\t\t\t// Reset progress when manually changing\n\t\t\t\tsetProgress(0);\n\t\t\t\tpausedProgressRef.current = 0;\n\t\t\t\tstartTimeRef.current = null;\n\t\t\t},\n\t\t\t[isControlled, onChange],\n\t\t);\n\n\t\t// Animation loop for smooth progress fill\n\t\tReact.useEffect(() => {\n\t\t\tif (!autoPlay || duration <= 0 || isPaused) {\n\t\t\t\tif (animationFrameRef.current) {\n\t\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t\t\tanimationFrameRef.current = null;\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst animate = (timestamp: number) => {\n\t\t\t\tif (startTimeRef.current === null) {\n\t\t\t\t\tstartTimeRef.current =\n\t\t\t\t\t\ttimestamp - (pausedProgressRef.current / 100) * duration;\n\t\t\t\t}\n\n\t\t\t\tconst elapsed = timestamp - startTimeRef.current;\n\t\t\t\tconst newProgress = Math.min((elapsed / duration) * 100, 100);\n\t\t\t\tsetProgress(newProgress);\n\n\t\t\t\tif (newProgress >= 100) {\n\t\t\t\t\tgoToNext();\n\t\t\t\t\t// Reset for next cycle\n\t\t\t\t\tsetProgress(0);\n\t\t\t\t\tpausedProgressRef.current = 0;\n\t\t\t\t\tstartTimeRef.current = null;\n\t\t\t\t} else {\n\t\t\t\t\tanimationFrameRef.current = requestAnimationFrame(animate);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tanimationFrameRef.current = requestAnimationFrame(animate);\n\n\t\t\treturn () => {\n\t\t\t\tif (animationFrameRef.current) {\n\t\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t\t}\n\t\t\t};\n\t\t}, [autoPlay, duration, isPaused, goToNext]);\n\n\t\t// Handle pause/resume\n\t\tconst handleMouseEnter = React.useCallback(() => {\n\t\t\tif (pauseOnHover) {\n\t\t\t\tpausedProgressRef.current = progress;\n\t\t\t\tstartTimeRef.current = null;\n\t\t\t\tsetIsPaused(true);\n\t\t\t}\n\t\t}, [pauseOnHover, progress]);\n\n\t\tconst handleMouseLeave = React.useCallback(() => {\n\t\t\tif (pauseOnHover) {\n\t\t\t\tsetIsPaused(false);\n\t\t\t}\n\t\t}, [pauseOnHover]);\n\n\t\t// Reset progress when activeIndex changes externally (controlled mode)\n\t\tReact.useEffect(() => {\n\t\t\tif (isControlled) {\n\t\t\t\tsetProgress(0);\n\t\t\t\tpausedProgressRef.current = 0;\n\t\t\t\tstartTimeRef.current = null;\n\t\t\t}\n\t\t}, [isControlled]);\n\n\t\t// Get dot dimensions based on size - uses primitive spacing tokens\n\t\tconst getDotWidth = (isActive: boolean) => {\n\t\t\tif (isActive) {\n\t\t\t\tswitch (size) {\n\t\t\t\t\tcase \"sm\":\n\t\t\t\t\t\treturn \"w-16\";\n\t\t\t\t\tcase \"lg\":\n\t\t\t\t\t\treturn \"w-36\";\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn \"w-28\";\n\t\t\t\t}\n\t\t\t}\n\t\t\tswitch (size) {\n\t\t\t\tcase \"sm\":\n\t\t\t\t\treturn \"w-6\";\n\t\t\t\tcase \"lg\":\n\t\t\t\t\treturn \"w-16\";\n\t\t\t\tdefault:\n\t\t\t\t\treturn \"w-10\";\n\t\t\t}\n\t\t};\n\n\t\t// Get background classes for inactive dots\n\t\tconst getInactiveClasses = () => {\n\t\t\tif (variant === \"ivory\") {\n\t\t\t\treturn \"bg-alpha-white-30 hover:bg-alpha-white-60\";\n\t\t\t}\n\t\t\treturn \"bg-alpha-black-30 hover:bg-alpha-black-60\";\n\t\t};\n\n\t\t// Get background class for active dot (the track/background)\n\t\tconst getActiveTrackClass = () => {\n\t\t\tif (variant === \"ivory\") {\n\t\t\t\treturn \"bg-alpha-white-30\";\n\t\t\t}\n\t\t\treturn \"bg-alpha-black-30\";\n\t\t};\n\n\t\t// Get fill color for the progress indicator\n\t\tconst getProgressFillClass = () => {\n\t\t\tif (variant === \"ivory\") {\n\t\t\t\treturn \"bg-gray-50\";\n\t\t\t}\n\t\t\treturn \"bg-gray-1200\";\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\trole=\"tablist\"\n\t\t\t\taria-label=\"Page indicators\"\n\t\t\t\tclassName={pagerControlVariants({ size, class: className })}\n\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{Array.from({ length: count }, (_, index) => {\n\t\t\t\t\tconst isActive = index === safeActiveIndex;\n\n\t\t\t\t\tif (isActive) {\n\t\t\t\t\t\t// Active dot with progress fill\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Pagination dots have fixed order based on count\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={true}\n\t\t\t\t\t\t\t\taria-label={`Page ${index + 1} of ${count}, current`}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"relative cursor-pointer overflow-hidden rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]\",\n\t\t\t\t\t\t\t\t\tdotBaseVariants({ size, variant }),\n\t\t\t\t\t\t\t\t\tgetDotWidth(true),\n\t\t\t\t\t\t\t\t\tgetActiveTrackClass(),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tonClick={() => goToIndex(index)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/* Progress fill */}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"absolute top-0 bottom-0 left-0 h-full rounded-full\",\n\t\t\t\t\t\t\t\t\t\tgetProgressFillClass(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: autoPlay && duration > 0 ? `${progress}%` : \"100%\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Inactive dot\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Pagination dots have fixed order based on count\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-selected={false}\n\t\t\t\t\t\t\taria-label={`Go to page ${index + 1} of ${count}`}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tdotBaseVariants({ size, variant }),\n\t\t\t\t\t\t\t\tgetDotWidth(false),\n\t\t\t\t\t\t\t\tgetInactiveClasses(),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tonClick={() => goToIndex(index)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t},\n);\nPagerControl.displayName = \"PagerControl\";\n\nexport { PagerControl, pagerControlVariants };\n"],"names":["pagerControlVariants","tv","dotBaseVariants","PagerControl","React","className","size","variant","count","controlledIndex","duration","autoPlay","onChange","pauseOnHover","loop","props","ref","internalIndex","setInternalIndex","isPaused","setIsPaused","progress","setProgress","activeIndex","isControlled","safeActiveIndex","animationFrameRef","startTimeRef","pausedProgressRef","goToNext","nextIndex","goToIndex","index","animate","timestamp","elapsed","newProgress","handleMouseEnter","handleMouseLeave","getDotWidth","isActive","getInactiveClasses","getActiveTrackClass","getProgressFillClass","jsx","_","cn"],"mappings":"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"}

package/dist/components/atoms/popover/popover.d.ts

@@ -0,0 +1,195 @@
+import { Popover as BasePopover } from '@base-ui-components/react/popover';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Popover popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ * - spatial.component.overlay.padding/gap - Consistent spacing
+ */
+declare const popoverPopupVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Popover arrow variants - uses shared floating arrow variants
+ */
+declare const popoverArrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface PopoverRootProps extends BasePopover.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Root
+ *
+ * Groups all popover parts. Does not render an element.
+ */
+declare const PopoverRoot: ({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverTriggerProps extends React.ComponentProps<typeof BasePopover.Trigger> {
+    className?: string;
+}
+/**
+ * Popover Trigger
+ *
+ * The element that triggers the popover on click.
+ * Renders as the child element with popover behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverPortalProps extends BasePopover.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Portal
+ *
+ * Renders the popover popup in a portal outside the DOM hierarchy.
+ */
+declare const PopoverPortal: ({ children, ...props }: PopoverPortalProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverBackdropProps extends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Backdrop
+ *
+ * Optional backdrop element that can be used to close the popover on click.
+ */
+declare const PopoverBackdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverPositionerProps extends Omit<React.ComponentProps<typeof BasePopover.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Positioner
+ *
+ * Positions the popover popup relative to the trigger.
+ */
+declare const PopoverPositioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverPopupProps extends Omit<React.ComponentProps<typeof BasePopover.Popup>, "className">, VariantProps<typeof popoverPopupVariants> {
+    className?: string;
+}
+/**
+ * Popover Popup
+ *
+ * The popover content container with styled appearance.
+ */
+declare const PopoverPopup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverArrowProps extends Omit<React.ComponentProps<typeof BasePopover.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Arrow
+ *
+ * Visual pointer element for the popover.
+ * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.
+ */
+declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends Omit<React.ComponentProps<typeof BasePopover.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Title
+ *
+ * Title element for the popover content.
+ */
+declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export interface PopoverDescriptionProps extends Omit<React.ComponentProps<typeof BasePopover.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Description
+ *
+ * Description element for the popover content.
+ */
+declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface PopoverCloseProps extends Omit<React.ComponentProps<typeof BasePopover.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Close
+ *
+ * Close button for the popover.
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverProps {
+    /** The content to show in the popover */
+    children: React.ReactNode;
+    /** The element that triggers the popover */
+    trigger: React.ReactNode;
+    /** Title for the popover (optional) */
+    title?: React.ReactNode;
+    /** Side of the trigger to show the popover */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Whether to show an arrow */
+    showArrow?: boolean;
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Popover
+ *
+ * A simple, pre-composed popover component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Click me</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>This is the popover content.</p>
+ * </Popover>
+ * ```
+ */
+declare const Popover: ({ children, trigger, title, side, sideOffset, align, showArrow, showClose, open, defaultOpen, onOpenChange, className, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverParts: (({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: PopoverPortalProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Popover, PopoverRoot, PopoverTrigger, PopoverPortal, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose, popoverPopupVariants, popoverArrowVariants, };

package/dist/components/atoms/popover/popover.js

@@ -0,0 +1,230 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import { tv as $, cnBase as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { floatingArrowVariants as C, FloatingArrowSvg as A } from "../../shared/floating-arrow.js";
+import { PopoverArrow as B } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/arrow/PopoverArrow.js";
+import { PopoverBackdrop as D } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/backdrop/PopoverBackdrop.js";
+import { PopoverClose as V } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/close/PopoverClose.js";
+import { PopoverDescription as j } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/description/PopoverDescription.js";
+import { PopoverPopup as z } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/popup/PopoverPopup.js";
+import { PopoverPortal as E } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/portal/PopoverPortal.js";
+import { PopoverPositioner as L } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/positioner/PopoverPositioner.js";
+import { PopoverRoot as S } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/root/PopoverRoot.js";
+import { PopoverTitle as M } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/title/PopoverTitle.js";
+import { PopoverTrigger as g } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/trigger/PopoverTrigger.js";
+const F = $({
+  base: [
+    // Layout - uses component overlay tokens
+    "p-spatial-component-overlay-padding",
+    // Background - uses overlay background token
+    "bg-overlay-background",
+    // Border - uses overlay border token
+    "border border-overlay-border",
+    // Text - uses overlay text token
+    "text-overlay-text",
+    // Border radius - uses surface overlay token
+    "rounded-surface-overlay",
+    // Shadow for elevation
+    "shadow-lg",
+    // Allow arrow to extend outside popup bounds
+    "overflow-visible",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content (higher than backdrop z-40)
+    "z-50",
+    // Max width for reasonable content display
+    "max-w-[320px]"
+  ],
+  variants: {
+    variant: {
+      default: ""
+      // Future variants can be added here
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), O = C, l = ({ children: o, ...r }) => /* @__PURE__ */ e(S, { ...r, children: o }), d = a.forwardRef(
+  ({ className: o, children: r, ...t }, s) => a.isValidElement(r) ? /* @__PURE__ */ e(
+    g,
+    {
+      ref: s,
+      className: o,
+      render: r,
+      ...t
+    }
+  ) : /* @__PURE__ */ e(g, { ref: s, className: o, ...t, children: r })
+);
+d.displayName = "PopoverTrigger";
+const y = ({ children: o, ...r }) => /* @__PURE__ */ e(E, { ...r, children: o }), b = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    D,
+    {
+      ref: t,
+      className: i("fixed inset-0 z-40", o),
+      ...r
+    }
+  )
+);
+b.displayName = "PopoverBackdrop";
+const v = a.forwardRef(({ className: o, side: r = "bottom", sideOffset: t = 8, ...s }, p) => /* @__PURE__ */ e(
+  L,
+  {
+    ref: p,
+    side: r,
+    sideOffset: t,
+    className: i("z-50", o),
+    ...s
+  }
+));
+v.displayName = "PopoverPositioner";
+const m = a.forwardRef(
+  ({ className: o, variant: r, ...t }, s) => /* @__PURE__ */ e(
+    z,
+    {
+      ref: s,
+      className: i(F({ variant: r }), o),
+      ...t
+    }
+  )
+);
+m.displayName = "PopoverPopup";
+const c = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    B,
+    {
+      ref: t,
+      className: i(O(), o),
+      ...r,
+      children: /* @__PURE__ */ e(
+        A,
+        {
+          fillClassName: "fill-overlay-background",
+          borderClassName: "fill-overlay-border"
+        }
+      )
+    }
+  )
+);
+c.displayName = "PopoverArrow";
+const P = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    M,
+    {
+      ref: t,
+      className: i("typography-body-md-md font-semibold", o),
+      ...r
+    }
+  )
+);
+P.displayName = "PopoverTitle";
+const f = a.forwardRef(({ className: o, ...r }, t) => /* @__PURE__ */ e(
+  j,
+  {
+    ref: t,
+    className: i(
+      "typography-body-sm-md text-overlay-text-muted mt-8",
+      o
+    ),
+    ...r
+  }
+));
+f.displayName = "PopoverDescription";
+const u = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    V,
+    {
+      ref: t,
+      className: i(
+        "absolute right-8 top-8 rounded-surface-ui-small p-4",
+        "text-overlay-text-muted hover:text-overlay-text",
+        "hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        o
+      ),
+      ...r
+    }
+  )
+);
+u.displayName = "PopoverClose";
+const oo = ({
+  children: o,
+  trigger: r,
+  title: t,
+  side: s = "bottom",
+  sideOffset: p = 8,
+  align: w = "center",
+  showArrow: h = !0,
+  showClose: N = !1,
+  open: x,
+  defaultOpen: R,
+  onOpenChange: k,
+  className: T
+}) => /* @__PURE__ */ n(
+  l,
+  {
+    open: x,
+    defaultOpen: R,
+    onOpenChange: k,
+    children: [
+      /* @__PURE__ */ e(d, { children: r }),
+      /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(v, { side: s, sideOffset: p, align: w, children: /* @__PURE__ */ n(m, { className: T, children: [
+        h && /* @__PURE__ */ e(c, {}),
+        N && /* @__PURE__ */ n(u, { children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
+        ] }),
+        t && /* @__PURE__ */ e(P, { children: t }),
+        t ? /* @__PURE__ */ e(f, { children: o }) : o
+      ] }) }) })
+    ]
+  }
+), ro = Object.assign(l, {
+  Root: l,
+  Trigger: d,
+  Portal: y,
+  Backdrop: b,
+  Positioner: v,
+  Popup: m,
+  Arrow: c,
+  Title: P,
+  Description: f,
+  Close: u
+});
+export {
+  oo as Popover,
+  c as PopoverArrow,
+  b as PopoverBackdrop,
+  u as PopoverClose,
+  f as PopoverDescription,
+  ro as PopoverParts,
+  m as PopoverPopup,
+  y as PopoverPortal,
+  v as PopoverPositioner,
+  l as PopoverRoot,
+  P as PopoverTitle,
+  d as PopoverTrigger,
+  O as popoverArrowVariants,
+  F as popoverPopupVariants
+};
+//# sourceMappingURL=popover.js.map