@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/pager-control/index.js

@@ -0,0 +1,267 @@
+"use client";
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/atoms/pager-control/pager-control.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var pagerControlVariants = tv({
+  base: "flex items-center",
+  variants: {
+    size: {
+      // Uses primitive spacing tokens
+      sm: "gap-2",
+      default: "gap-2",
+      lg: "gap-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var dotBaseVariants = tv({
+  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"
+  }
+});
+var PagerControl = React.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    count,
+    activeIndex: controlledIndex,
+    duration = 5e3,
+    autoPlay = true,
+    onChange,
+    pauseOnHover = true,
+    loop = true,
+    ...props
+  }, ref) => {
+    const [internalIndex, setInternalIndex] = React.useState(0);
+    const [isPaused, setIsPaused] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
+    const isControlled = controlledIndex !== void 0;
+    React.useEffect(() => {
+      if (import.meta.env?.DEV) {
+        if (count < 1) {
+          console.warn("PagerControl: count must be at least 1");
+        }
+        if (controlledIndex !== void 0 && controlledIndex >= count) {
+          console.warn(
+            `PagerControl: activeIndex (${controlledIndex}) is out of bounds. Must be less than count (${count}).`
+          );
+        }
+        if (controlledIndex !== void 0 && controlledIndex < 0) {
+          console.warn(
+            `PagerControl: activeIndex (${controlledIndex}) cannot be negative.`
+          );
+        }
+        if (isControlled && onChange === void 0) {
+          console.warn(
+            "PagerControl: controlled mode (activeIndex provided) requires an onChange handler."
+          );
+        }
+      }
+    }, [count, controlledIndex, isControlled, onChange]);
+    const safeActiveIndex = Math.max(0, Math.min(activeIndex, count - 1));
+    const animationFrameRef = React.useRef(null);
+    const startTimeRef = React.useRef(null);
+    const pausedProgressRef = React.useRef(0);
+    const goToNext = React.useCallback(() => {
+      const nextIndex = safeActiveIndex + 1;
+      if (nextIndex >= count) {
+        if (loop) {
+          if (!isControlled) setInternalIndex(0);
+          onChange?.(0);
+        }
+      } else {
+        if (!isControlled) setInternalIndex(nextIndex);
+        onChange?.(nextIndex);
+      }
+    }, [safeActiveIndex, count, loop, isControlled, onChange]);
+    const goToIndex = React.useCallback(
+      (index) => {
+        if (!isControlled) setInternalIndex(index);
+        onChange?.(index);
+        setProgress(0);
+        pausedProgressRef.current = 0;
+        startTimeRef.current = null;
+      },
+      [isControlled, onChange]
+    );
+    React.useEffect(() => {
+      if (!autoPlay || duration <= 0 || isPaused) {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = null;
+        }
+        return;
+      }
+      const animate = (timestamp) => {
+        if (startTimeRef.current === null) {
+          startTimeRef.current = timestamp - pausedProgressRef.current / 100 * duration;
+        }
+        const elapsed = timestamp - startTimeRef.current;
+        const newProgress = Math.min(elapsed / duration * 100, 100);
+        setProgress(newProgress);
+        if (newProgress >= 100) {
+          goToNext();
+          setProgress(0);
+          pausedProgressRef.current = 0;
+          startTimeRef.current = null;
+        } else {
+          animationFrameRef.current = requestAnimationFrame(animate);
+        }
+      };
+      animationFrameRef.current = requestAnimationFrame(animate);
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+      };
+    }, [autoPlay, duration, isPaused, goToNext]);
+    const handleMouseEnter = React.useCallback(() => {
+      if (pauseOnHover) {
+        pausedProgressRef.current = progress;
+        startTimeRef.current = null;
+        setIsPaused(true);
+      }
+    }, [pauseOnHover, progress]);
+    const handleMouseLeave = React.useCallback(() => {
+      if (pauseOnHover) {
+        setIsPaused(false);
+      }
+    }, [pauseOnHover]);
+    React.useEffect(() => {
+      if (isControlled) {
+        setProgress(0);
+        pausedProgressRef.current = 0;
+        startTimeRef.current = null;
+      }
+    }, [isControlled]);
+    const getDotWidth = (isActive) => {
+      if (isActive) {
+        switch (size) {
+          case "sm":
+            return "w-16";
+          case "lg":
+            return "w-36";
+          default:
+            return "w-28";
+        }
+      }
+      switch (size) {
+        case "sm":
+          return "w-6";
+        case "lg":
+          return "w-16";
+        default:
+          return "w-10";
+      }
+    };
+    const getInactiveClasses = () => {
+      if (variant === "ivory") {
+        return "bg-alpha-white-30 hover:bg-alpha-white-60";
+      }
+      return "bg-alpha-black-30 hover:bg-alpha-black-60";
+    };
+    const getActiveTrackClass = () => {
+      if (variant === "ivory") {
+        return "bg-alpha-white-30";
+      }
+      return "bg-alpha-black-30";
+    };
+    const getProgressFillClass = () => {
+      if (variant === "ivory") {
+        return "bg-gray-50";
+      }
+      return "bg-gray-1200";
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": "Page indicators",
+        className: pagerControlVariants({ size, class: className }),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: Array.from({ length: count }, (_, index) => {
+          const isActive = index === safeActiveIndex;
+          if (isActive) {
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": true,
+                "aria-label": `Page ${index + 1} of ${count}, current`,
+                className: cn(
+                  "relative cursor-pointer overflow-hidden rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
+                  dotBaseVariants({ size, variant }),
+                  getDotWidth(true),
+                  getActiveTrackClass()
+                ),
+                onClick: () => goToIndex(index),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute top-0 bottom-0 left-0 h-full rounded-full",
+                      getProgressFillClass()
+                    ),
+                    style: {
+                      width: autoPlay && duration > 0 ? `${progress}%` : "100%"
+                    }
+                  }
+                )
+              },
+              index
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": false,
+              "aria-label": `Go to page ${index + 1} of ${count}`,
+              className: cn(
+                dotBaseVariants({ size, variant }),
+                getDotWidth(false),
+                getInactiveClasses()
+              ),
+              onClick: () => goToIndex(index)
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+PagerControl.displayName = "PagerControl";
+
+export { PagerControl, pagerControlVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/pager-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/atoms/pager-control/pager-control.tsx"],"names":["twMerge"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"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"]}

package/dist/popover/index.d.ts

@@ -0,0 +1,200 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { Popover as Popover$1 } from '@base-ui-components/react/popover';
+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: tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], 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: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface PopoverRootProps extends Popover$1.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Root
+ *
+ * Groups all popover parts. Does not render an element.
+ */
+declare const PopoverRoot: ({ children, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element;
+interface PopoverTriggerProps extends React.ComponentProps<typeof Popover$1.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>>;
+interface PopoverPortalProps extends Popover$1.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Portal
+ *
+ * Renders the popover popup in a portal outside the DOM hierarchy.
+ */
+declare const PopoverPortal: ({ children, ...props }: PopoverPortalProps) => react_jsx_runtime.JSX.Element;
+interface PopoverBackdropProps extends Omit<React.ComponentProps<typeof Popover$1.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>>;
+interface PopoverPositionerProps extends Omit<React.ComponentProps<typeof Popover$1.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>>;
+interface PopoverPopupProps extends Omit<React.ComponentProps<typeof Popover$1.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>>;
+interface PopoverArrowProps extends Omit<React.ComponentProps<typeof Popover$1.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>>;
+interface PopoverTitleProps extends Omit<React.ComponentProps<typeof Popover$1.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Title
+ *
+ * Title element for the popover content.
+ */
+declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+interface PopoverDescriptionProps extends Omit<React.ComponentProps<typeof Popover$1.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Description
+ *
+ * Description element for the popover content.
+ */
+declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface PopoverCloseProps extends Omit<React.ComponentProps<typeof Popover$1.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Close
+ *
+ * Close button for the popover.
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+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) => react_jsx_runtime.JSX.Element;
+declare const PopoverParts: (({ children, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element) & {
+    Root: ({ children, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: PopoverPortalProps) => 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, PopoverArrow, type PopoverArrowProps, PopoverBackdrop, type PopoverBackdropProps, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, PopoverParts, PopoverPopup, type PopoverPopupProps, PopoverPortal, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerProps, type PopoverProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, popoverArrowVariants, popoverPopupVariants };