@signalflare-ai/ui 0.5.0

package/dist/menubar-C8NzAjfd.js

@@ -0,0 +1,102 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { IconContext } from "@phosphor-icons/react";
+//#region src/components/menubar/use-menu-navigation.ts
+var useMenuNavigation = ({ menuRef, direction = "horizontal" }) => {
+	const activeElementRef = useRef(null);
+	useEffect(() => {
+		if (!menuRef.current) return;
+		const focusableElements = Array.from(menuRef.current.querySelectorAll("a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])"));
+		if (focusableElements.length === 0) return;
+		const handleKeyDown = (e) => {
+			if (!activeElementRef.current) return;
+			const currentIndex = focusableElements.indexOf(activeElementRef.current);
+			let nextIndex = currentIndex;
+			const isHorizontal = direction === "horizontal";
+			const forwardKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+			const backwardKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+			if (e.key === forwardKey) {
+				e.preventDefault();
+				nextIndex = (currentIndex + 1) % focusableElements.length;
+			} else if (e.key === backwardKey) {
+				e.preventDefault();
+				nextIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
+			} else return;
+			const nextElement = focusableElements[nextIndex];
+			activeElementRef.current = nextElement;
+			nextElement.focus();
+		};
+		const addKeyListener = () => document.addEventListener("keydown", handleKeyDown);
+		const removeKeyListener = () => document.removeEventListener("keydown", handleKeyDown);
+		const handleFocusIn = () => {
+			activeElementRef.current = document.activeElement;
+			addKeyListener();
+		};
+		const handleFocusOut = () => {
+			activeElementRef.current = null;
+			removeKeyListener();
+		};
+		menuRef.current.addEventListener("focusin", handleFocusIn);
+		menuRef.current.addEventListener("focusout", handleFocusOut);
+		return () => {
+			menuRef.current?.removeEventListener("focusin", handleFocusIn);
+			menuRef.current?.removeEventListener("focusout", handleFocusOut);
+			removeKeyListener();
+		};
+	}, [menuRef, direction]);
+};
+//#endregion
+//#region src/components/menubar/menubar.tsx
+var MenuOption = ({ icon, id, isActive, onClick, tooltip }) => {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		children: /* @__PURE__ */ jsx("button", {
+			className: cn("focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-sf-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]", { "z-20 bg-sf-base shadow-xs transition-colors": isActive === id }),
+			onClick,
+			children: /* @__PURE__ */ jsx(IconContext.Provider, {
+				value: { size: 18 },
+				children: icon
+			})
+		})
+	});
+};
+/**
+* MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.
+*
+* Each option renders as a `<button>` with a Tooltip. The active option is
+* visually highlighted with an elevated background.
+*
+* @example
+* ```tsx
+* <MenuBar
+*   isActive={0}
+*   options={[
+*     { icon: <ListIcon />, tooltip: "List", onClick: () => {} },
+*     { icon: <GridFourIcon />, tooltip: "Grid", onClick: () => {} },
+*   ]}
+* />
+* ```
+*/
+var MenuBar = ({ className, isActive, options, optionIds = false }) => {
+	const menuRef = useRef(null);
+	useMenuNavigation({
+		menuRef,
+		direction: "horizontal"
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		className: cn("flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors", className),
+		ref: menuRef,
+		children: options.map((option, index) => /* @__PURE__ */ jsx(MenuOption, {
+			...option,
+			isActive,
+			id: optionIds ? option.id : index
+		}, index))
+	});
+};
+//#endregion
+export { useMenuNavigation as n, MenuBar as t };
+
+//# sourceMappingURL=menubar-C8NzAjfd.js.map

package/dist/menubar-C8NzAjfd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-C8NzAjfd.js","names":[],"sources":["../src/components/menubar/use-menu-navigation.ts","../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n      )\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const SF_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_MENUBAR_VARIANTS\nexport interface SFMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: SFMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors\"\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  return (\n    <Tooltip content={tooltip}>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-sf-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]\",\n          {\n            \"z-20 bg-sf-base shadow-xs transition-colors\": isActive === id,\n          }\n        )}\n        onClick={onClick}\n      >\n        <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n          {icon}\n        </IconContext.Provider>\n      </button>\n    </Tooltip>\n  );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors\",\n        className\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,EAChC,SACA,YAAY,mBACgB;CAC5B,MAAM,mBAAmB,OAA2B,KAAK;AAEzD,iBAAgB;AACd,MAAI,CAAC,QAAQ,QAAS;EAEtB,MAAM,oBAAoB,MAAM,KAC9B,QAAQ,QAAQ,iBACd,iFACD,CACF;AAED,MAAI,kBAAkB,WAAW,EAAG;EAEpC,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,CAAC,iBAAiB,QAAS;GAE/B,MAAM,eAAe,kBAAkB,QAAQ,iBAAiB,QAAQ;GACxE,IAAI,YAAY;GAEhB,MAAM,eAAe,cAAc;GACnC,MAAM,aAAa,eAAe,eAAe;GACjD,MAAM,cAAc,eAAe,cAAc;AAEjD,OAAI,EAAE,QAAQ,YAAY;AACxB,MAAE,gBAAgB;AAClB,iBAAa,eAAe,KAAK,kBAAkB;cAC1C,EAAE,QAAQ,aAAa;AAChC,MAAE,gBAAgB;AAClB,iBACG,eAAe,IAAI,kBAAkB,UACtC,kBAAkB;SAEpB;GAGF,MAAM,cAAc,kBAAkB;AACtC,oBAAiB,UAAU;AAC3B,eAAY,OAAO;;EAGrB,MAAM,uBACJ,SAAS,iBAAiB,WAAW,cAAc;EACrD,MAAM,0BACJ,SAAS,oBAAoB,WAAW,cAAc;EAExD,MAAM,sBAAsB;AAC1B,oBAAiB,UAAU,SAAS;AACpC,mBAAgB;;EAGlB,MAAM,uBAAuB;AAC3B,oBAAiB,UAAU;AAC3B,sBAAmB;;AAGrB,UAAQ,QAAQ,iBAAiB,WAAW,cAAc;AAC1D,UAAQ,QAAQ,iBAAiB,YAAY,eAAe;AAE5D,eAAa;AACX,WAAQ,SAAS,oBAAoB,WAAW,cAAc;AAC9D,WAAQ,SAAS,oBAAoB,YAAY,eAAe;AAChE,sBAAmB;;IAEpB,CAAC,SAAS,UAAU,CAAC;;;;ACpC1B,IAAM,cAAc,EAClB,MACA,IACA,UACA,SACA,cACqB;AACrB,QACE,oBAAC,SAAD;EAAS,SAAS;YAChB,oBAAC,UAAD;GACE,WAAW,GACT,+QACA,EACE,+CAA+C,aAAa,IAC7D,CACF;GACQ;aAET,oBAAC,YAAY,UAAb;IAAsB,OAAO,EAAE,MAAM,IAAI;cACtC;IACoB,CAAA;GAChB,CAAA;EACD,CAAA;;;;;;;;;;;;;;;;;;;AAgDd,IAAa,WAAW,EACtB,WACA,UACA,SACA,YAAY,YACM;CAClB,MAAM,UAAU,OAA2B,KAAK;AAEhD,mBAAkB;EAAE;EAAS,WAAW;EAAc,CAAC;AAEvD,QACE,oBAAC,OAAD;EACE,WAAW,GACT,sFACA,UACD;EACD,KAAK;YAEJ,QAAQ,KAAK,QAAQ,UACpB,oBAAC,YAAD;GAEE,GAAI;GACM;GACV,IAAI,YAAY,OAAO,KAAK;GAC5B,EAJK,MAIL,CACF;EACE,CAAA"}

package/dist/meter-CpmTenEr.js

@@ -0,0 +1,37 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/meter/meter.tsx
+/**
+* Progress bar showing a measured value within a known range (e.g. quota usage).
+*
+* @example
+* ```tsx
+* <Meter label="Storage" value={65} />
+* ```
+*/
+function Meter$1({ value, customValue, label, showValue = true, className, trackClassName, indicatorClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		value,
+		...props,
+		className: cn("flex w-full flex-col gap-2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ jsx(Meter.Label, {
+				className: "text-xs text-sf-strong",
+				children: label
+			}), customValue ? /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-sf-default tabular-nums",
+				children: customValue
+			}) : /* @__PURE__ */ jsx(Fragment, { children: showValue && /* @__PURE__ */ jsx(Meter.Value, { className: "text-sm font-medium text-sf-default tabular-nums" }) })]
+		}), /* @__PURE__ */ jsx(Meter.Track, {
+			className: cn("relative h-2 w-full overflow-hidden rounded-full bg-sf-fill", trackClassName),
+			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: cn("absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-sf-brand via-sf-brand to-sf-brand transition-[width] duration-300 ease-out", indicatorClassName) })
+		})]
+	});
+}
+//#endregion
+export { Meter$1 as t };
+
+//# sourceMappingURL=meter-CpmTenEr.js.map

package/dist/meter-CpmTenEr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-CpmTenEr.js","names":[],"sources":["../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const SF_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_METER_VARIANTS\nexport interface SFMeterVariantsProps {}\n\nexport function meterVariants(_props: SFMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\"\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, SFMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-sf-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-sf-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-sf-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-sf-fill\",\n          trackClassName\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-sf-brand via-sf-brand to-sf-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAyDA,SAAgB,QAAM,EACpB,OACA,aACA,OACA,YAAY,MACZ,WACA,gBACA,oBACA,GAAG,SACU;AACb,QACE,qBAAC,MAAU,MAAX;EACS;EACP,GAAI;EACJ,WAAW,GAAG,8BAA8B,UAAU;YAHxD,CAKE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAU,OAAX;IAAiB,WAAU;cACxB;IACe,CAAA,EACjB,cACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,GAEP,oBAAA,UAAA,EAAA,UACG,aACC,oBAAC,MAAU,OAAX,EAAiB,WAAU,oDAAqD,CAAA,EAEjF,CAAA,CAED;MACN,oBAAC,MAAU,OAAX;GACE,WAAW,GACT,+DACA,eACD;aAED,oBAAC,MAAU,WAAX,EACE,WAAW,GACT,yIACA,mBACD,EACD,CAAA;GACc,CAAA,CACH"}

package/dist/pagination-C_YqCy8l.js

@@ -0,0 +1,117 @@
+"use client";
+import { t as InputGroup } from "./input-Cn25I4o5.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+//#region src/components/pagination/pagination.tsx
+var SF_PAGINATION_DEFAULT_VARIANTS = { controls: "full" };
+/**
+* Page navigation controls with page count display.
+*
+* @example
+* ```tsx
+* <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />
+* ```
+*/
+function Pagination({ page = 1, perPage, totalCount, setPage, text, controls = SF_PAGINATION_DEFAULT_VARIANTS.controls }) {
+	const [editingPage, setEditingPage] = useState(1);
+	useEffect(() => {
+		setEditingPage(page);
+	}, [page]);
+	const pageShowingRange = useMemo(() => {
+		let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;
+		let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);
+		if (Number.isNaN(lower)) lower = 0;
+		if (Number.isNaN(upper)) upper = 0;
+		return `${lower}-${upper}`;
+	}, [
+		page,
+		perPage,
+		totalCount
+	]);
+	const maxPage = useMemo(() => {
+		return Math.ceil((totalCount ?? 1) / (perPage ?? 1));
+	}, [totalCount, perPage]);
+	const getPaginationText = () => {
+		if (text) return text({
+			page,
+			perPage,
+			totalCount,
+			pageShowingRange
+		});
+		else if (totalCount && totalCount > 0) return `Showing ${pageShowingRange} of ${totalCount}`;
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grow text-sm text-sf-strong",
+			children: getPaginationText()
+		}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(InputGroup, {
+			focusMode: "individual",
+			children: [
+				controls === "full" && /* @__PURE__ */ jsx(InputGroup.Button, {
+					variant: "secondary",
+					"aria-label": "First page",
+					disabled: page <= 1,
+					onClick: () => {
+						setPage(1);
+						setEditingPage(1);
+					},
+					children: /* @__PURE__ */ jsx(CaretDoubleLeftIcon, { size: 16 })
+				}),
+				/* @__PURE__ */ jsx(InputGroup.Button, {
+					variant: "secondary",
+					"aria-label": "Previous page",
+					disabled: page <= 1,
+					onClick: () => {
+						const previousPage = Math.max(page - 1, 1);
+						setPage(previousPage);
+						setEditingPage(previousPage);
+					},
+					children: /* @__PURE__ */ jsx(CaretLeftIcon, { size: 16 })
+				}),
+				controls === "full" && /* @__PURE__ */ jsx(InputGroup.Input, {
+					style: { width: 50 },
+					className: "text-center",
+					"aria-label": "Page number",
+					value: editingPage,
+					onValueChange: (value) => {
+						setEditingPage(Number(value));
+					},
+					onBlur: () => {
+						let number = Math.max(editingPage, 1);
+						number = Math.min(number, maxPage);
+						setPage(number);
+						setEditingPage(number);
+					}
+				}),
+				/* @__PURE__ */ jsx(InputGroup.Button, {
+					variant: "secondary",
+					"aria-label": "Next page",
+					disabled: page === maxPage,
+					onClick: () => {
+						const nextPage = Math.min(page + 1, maxPage);
+						setPage(nextPage);
+						setEditingPage(nextPage);
+					},
+					children: /* @__PURE__ */ jsx(CaretRightIcon, { size: 16 })
+				}),
+				controls === "full" && /* @__PURE__ */ jsx(InputGroup.Button, {
+					variant: "secondary",
+					"aria-label": "Last page",
+					disabled: page === maxPage,
+					onClick: () => {
+						setPage(maxPage);
+						setEditingPage(maxPage);
+					},
+					children: /* @__PURE__ */ jsx(CaretDoubleRightIcon, { size: 16 })
+				})
+			]
+		}) })]
+	});
+}
+//#endregion
+export { Pagination as t };
+
+//# sourceMappingURL=pagination-C_YqCy8l.js.map

package/dist/pagination-C_YqCy8l.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-C_YqCy8l.js","names":[],"sources":["../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { InputGroup } from \"../input\";\n\n/** Pagination controls variant definitions. */\nexport const SF_PAGINATION_VARIANTS = {\n  controls: {\n    full: {\n      classes: \"\",\n      description:\n        \"Full pagination controls with first, previous, page input, next, and last buttons\",\n    },\n    simple: {\n      classes: \"\",\n      description:\n        \"Simple pagination controls with only previous and next buttons\",\n    },\n  },\n} as const;\n\nexport type SFPaginationControls = keyof typeof SF_PAGINATION_VARIANTS.controls;\n\nexport const SF_PAGINATION_DEFAULT_VARIANTS = {\n  controls: \"full\",\n} as const;\n\nexport interface SFPaginationVariantsProps {\n  controls?: SFPaginationControls;\n}\n\nexport function paginationVariants({\n  controls = SF_PAGINATION_DEFAULT_VARIANTS.controls,\n}: SFPaginationVariantsProps = {}) {\n  return cn(\n    \"flex items-center justify-between gap-2\",\n    SF_PAGINATION_VARIANTS.controls[controls].classes\n  );\n}\n\n/**\n * Pagination component props.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} controls=\"simple\" />\n * ```\n */\nexport interface PaginationProps extends SFPaginationVariantsProps {\n  /** Callback fired when the current page changes. */\n  setPage: (page: number) => void;\n  /**\n   * Current page number (1-indexed).\n   * @default 1\n   */\n  page?: number;\n  /** Number of items displayed per page. */\n  perPage?: number;\n  /** Total number of items across all pages. */\n  totalCount?: number;\n  /** Method to provide custom pagination text  */\n  text?: (props: {\n    page?: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => React.ReactNode;\n}\n\n/**\n * Page navigation controls with page count display.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport function Pagination({\n  page = 1,\n  perPage,\n  totalCount,\n  setPage,\n  text,\n  controls = SF_PAGINATION_DEFAULT_VARIANTS.controls,\n}: PaginationProps) {\n  const [editingPage, setEditingPage] = useState<number>(1);\n\n  // Value of the input as its being modified to display in the input, eventually syncs with `pagination.page`\n  useEffect(() => {\n    setEditingPage(page);\n  }, [page]);\n\n  const pageShowingRange = useMemo(() => {\n    let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n    let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n    if (Number.isNaN(lower)) lower = 0;\n    if (Number.isNaN(upper)) upper = 0;\n\n    return `${lower}-${upper}`;\n  }, [page, perPage, totalCount]);\n\n  const maxPage = useMemo(() => {\n    return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n  }, [totalCount, perPage]);\n\n  const getPaginationText = () => {\n    if (text) {\n      return text({ page, perPage, totalCount, pageShowingRange });\n    } else if (totalCount && totalCount > 0) {\n      return `Showing ${pageShowingRange} of ${totalCount}`;\n    }\n    return null;\n  };\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <div className=\"grow text-sm text-sf-strong\">{getPaginationText()}</div>\n      <div>\n        <InputGroup focusMode=\"individual\">\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"First page\"\n              disabled={page <= 1}\n              onClick={() => {\n                setPage(1);\n                setEditingPage(1);\n              }}\n            >\n              <CaretDoubleLeftIcon size={16} />\n            </InputGroup.Button>\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Previous page\"\n            disabled={page <= 1}\n            onClick={() => {\n              const previousPage = Math.max(page - 1, 1);\n              setPage(previousPage);\n              setEditingPage(previousPage);\n            }}\n          >\n            <CaretLeftIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Input\n              style={{ width: 50 }}\n              className=\"text-center\"\n              aria-label=\"Page number\"\n              value={editingPage}\n              onValueChange={(value: string) => {\n                setEditingPage(Number(value));\n              }}\n              onBlur={() => {\n                let number = Math.max(editingPage, 1);\n                number = Math.min(number, maxPage);\n                setPage(number);\n                setEditingPage(number);\n              }}\n            />\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Next page\"\n            disabled={page === maxPage}\n            onClick={() => {\n              const nextPage = Math.min(page + 1, maxPage);\n              setPage(nextPage);\n              setEditingPage(nextPage);\n            }}\n          >\n            <CaretRightIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"Last page\"\n              disabled={page === maxPage}\n              onClick={() => {\n                setPage(maxPage);\n                setEditingPage(maxPage);\n              }}\n            >\n              <CaretDoubleRightIcon size={16} />\n            </InputGroup.Button>\n          )}\n        </InputGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA6BA,IAAa,iCAAiC,EAC5C,UAAU,QACX;;;;;;;;;AAqDD,SAAgB,WAAW,EACzB,OAAO,GACP,SACA,YACA,SACA,MACA,WAAW,+BAA+B,YACxB;CAClB,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;AAGzD,iBAAgB;AACd,iBAAe,KAAK;IACnB,CAAC,KAAK,CAAC;CAEV,MAAM,mBAAmB,cAAc;EACrC,IAAI,QAAQ,QAAQ,WAAW,MAAM,WAAW,KAAK;EACrD,IAAI,QAAQ,KAAK,IAAI,QAAQ,WAAW,IAAI,cAAc,EAAE;AAE5D,MAAI,OAAO,MAAM,MAAM,CAAE,SAAQ;AACjC,MAAI,OAAO,MAAM,MAAM,CAAE,SAAQ;AAEjC,SAAO,GAAG,MAAM,GAAG;IAClB;EAAC;EAAM;EAAS;EAAW,CAAC;CAE/B,MAAM,UAAU,cAAc;AAC5B,SAAO,KAAK,MAAM,cAAc,MAAM,WAAW,GAAG;IACnD,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,0BAA0B;AAC9B,MAAI,KACF,QAAO,KAAK;GAAE;GAAM;GAAS;GAAY;GAAkB,CAAC;WACnD,cAAc,aAAa,EACpC,QAAO,WAAW,iBAAiB,MAAM;AAE3C,SAAO;;AAGT,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAA+B,mBAAmB;GAAO,CAAA,EACxE,oBAAC,OAAD,EAAA,UACE,qBAAC,YAAD;GAAY,WAAU;aAAtB;IACG,aAAa,UACZ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,QAAQ;KAClB,eAAe;AACb,cAAQ,EAAE;AACV,qBAAe,EAAE;;eAGnB,oBAAC,qBAAD,EAAqB,MAAM,IAAM,CAAA;KACf,CAAA;IAEtB,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,QAAQ;KAClB,eAAe;MACb,MAAM,eAAe,KAAK,IAAI,OAAO,GAAG,EAAE;AAC1C,cAAQ,aAAa;AACrB,qBAAe,aAAa;;eAG9B,oBAAC,eAAD,EAAe,MAAM,IAAM,CAAA;KACT,CAAA;IACnB,aAAa,UACZ,oBAAC,WAAW,OAAZ;KACE,OAAO,EAAE,OAAO,IAAI;KACpB,WAAU;KACV,cAAW;KACX,OAAO;KACP,gBAAgB,UAAkB;AAChC,qBAAe,OAAO,MAAM,CAAC;;KAE/B,cAAc;MACZ,IAAI,SAAS,KAAK,IAAI,aAAa,EAAE;AACrC,eAAS,KAAK,IAAI,QAAQ,QAAQ;AAClC,cAAQ,OAAO;AACf,qBAAe,OAAO;;KAExB,CAAA;IAEJ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,SAAS;KACnB,eAAe;MACb,MAAM,WAAW,KAAK,IAAI,OAAO,GAAG,QAAQ;AAC5C,cAAQ,SAAS;AACjB,qBAAe,SAAS;;eAG1B,oBAAC,gBAAD,EAAgB,MAAM,IAAM,CAAA;KACV,CAAA;IACnB,aAAa,UACZ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,SAAS;KACnB,eAAe;AACb,cAAQ,QAAQ;AAChB,qBAAe,QAAQ;;eAGzB,oBAAC,sBAAD,EAAsB,MAAM,IAAM,CAAA;KAChB,CAAA;IAEX;MACT,CAAA,CACF"}

package/dist/popover-BRQZ2b6z.js

@@ -0,0 +1,147 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover.tsx
+/** Popover side variant definitions mapping positions to their Tailwind classes. */
+var SF_POPOVER_VARIANTS = { side: {
+	top: {
+		classes: "",
+		description: "Popover appears above the trigger"
+	},
+	bottom: {
+		classes: "",
+		description: "Popover appears below the trigger"
+	},
+	left: {
+		classes: "",
+		description: "Popover appears to the left of the trigger"
+	},
+	right: {
+		classes: "",
+		description: "Popover appears to the right of the trigger"
+	}
+} };
+var SF_POPOVER_DEFAULT_VARIANTS = { side: "bottom" };
+function PopoverRoot({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		...props,
+		children
+	});
+}
+PopoverRoot.displayName = "Popover";
+function PopoverTrigger({ children, className, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		className,
+		render: asChild ? children : void 0,
+		...props,
+		children: asChild ? void 0 : children
+	});
+}
+PopoverTrigger.displayName = "Popover.Trigger";
+function PopoverContent({ children, side = SF_POPOVER_DEFAULT_VARIANTS.side, align = "center", sideOffset = 8, alignOffset = 0, className }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			className: cn("flex origin-(--transform-origin) flex-col rounded-lg bg-sf-elevated px-4 py-3 text-sm text-sf-default", "shadow-lg shadow-sf-tip-shadow outline outline-sf-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", "sf-popover-popup", className),
+			children: [/* @__PURE__ */ jsx(Popover.Arrow, {
+				className: cn("flex", "data-[side=bottom]:-top-2", "data-[side=left]:right-[-13px] data-[side=left]:rotate-90", "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90", "data-[side=top]:-bottom-2 data-[side=top]:rotate-180"),
+				children: /* @__PURE__ */ jsx(ArrowSvg, {})
+			}), children]
+		})
+	}) });
+}
+PopoverContent.displayName = "Popover.Content";
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		className: cn("m-0 text-base leading-6 font-medium", className),
+		...props
+	});
+}
+PopoverTitle.displayName = "Popover.Title";
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		className: cn("m-0 text-base leading-6 text-sf-subtle", className),
+		...props
+	});
+}
+PopoverDescription.displayName = "Popover.Description";
+function PopoverClose({ children, className, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		className,
+		render: asChild ? children : void 0,
+		...props,
+		children: asChild ? void 0 : children
+	});
+}
+PopoverClose.displayName = "Popover.Close";
+/**
+* Arrow SVG with three paths for proper border rendering in both light and dark modes.
+* This approach matches Base UI's popover/tooltip implementation.
+*
+* The three paths are:
+* 1. ArrowFill - The main arrow body, matches popover background
+* 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)
+* 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)
+*
+* This is necessary because the outer and inner stroke paths have different geometries,
+* and using both ensures the arrow border aligns perfectly with the popover's outline
+* in both color modes.
+*
+* @see https://base-ui.com/react/components/popover
+*/
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("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-sf-elevated"
+			}),
+			/* @__PURE__ */ jsx("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-sf-tip-shadow"
+			}),
+			/* @__PURE__ */ jsx("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-sf-tip-stroke"
+			})
+		]
+	});
+}
+/**
+* Popover component for displaying accessible popup content anchored to a trigger.
+*
+* @example
+* ```tsx
+* <Popover>
+*   <Popover.Trigger asChild>
+*     <Button>Open</Button>
+*   </Popover.Trigger>
+*   <Popover.Content>
+*     <Popover.Title>Notifications</Popover.Title>
+*     <Popover.Description>You are all caught up!</Popover.Description>
+*   </Popover.Content>
+* </Popover>
+* ```
+*
+* @see https://base-ui.com/react/components/popover
+*/
+var Popover$1 = Object.assign(PopoverRoot, {
+	Trigger: PopoverTrigger,
+	Content: PopoverContent,
+	Title: PopoverTitle,
+	Description: PopoverDescription,
+	Close: PopoverClose
+});
+//#endregion
+export { PopoverRoot as a, SF_POPOVER_DEFAULT_VARIANTS as c, PopoverDescription as i, SF_POPOVER_VARIANTS as l, PopoverClose as n, PopoverTitle as o, PopoverContent as r, PopoverTrigger as s, Popover$1 as t };
+
+//# sourceMappingURL=popover-BRQZ2b6z.js.map

package/dist/popover-BRQZ2b6z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-BRQZ2b6z.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverBase } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Popover side variant definitions mapping positions to their Tailwind classes. */\nexport const SF_POPOVER_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Popover appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Popover appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Popover appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Popover appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const SF_POPOVER_DEFAULT_VARIANTS = {\n  side: \"bottom\",\n} as const;\n\n// Derived types from SF_POPOVER_VARIANTS\nexport type SFPopoverSide = keyof typeof SF_POPOVER_VARIANTS.side;\n\nexport interface SFPopoverVariantsProps {\n  /**\n   * Which side of the trigger the popover appears on.\n   * - `\"top\"` — Above the trigger\n   * - `\"bottom\"` — Below the trigger\n   * - `\"left\"` — Left of the trigger\n   * - `\"right\"` — Right of the trigger\n   * @default \"bottom\"\n   */\n  side?: SFPopoverSide;\n}\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\ntype BasePopoverRootProps = ComponentPropsWithoutRef<typeof PopoverBase.Root>;\n\nexport type PopoverRootProps = BasePopoverRootProps;\n\nfunction PopoverRoot({ children, ...props }: PopoverRootProps) {\n  return <PopoverBase.Root {...props}>{children}</PopoverBase.Root>;\n}\n\nPopoverRoot.displayName = \"Popover\";\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\ntype BasePopoverTriggerProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Trigger\n>;\n\nexport type PopoverTriggerProps = BasePopoverTriggerProps & {\n  /** When true, the trigger element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverTrigger({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverTriggerProps) {\n  return (\n    <PopoverBase.Trigger\n      className={className}\n      render={\n        asChild ? (children as BasePopoverTriggerProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Trigger>\n  );\n}\n\nPopoverTrigger.displayName = \"Popover.Trigger\";\n\n// ============================================================================\n// Popover Content\n// ============================================================================\n\n/** Alignment options for popover positioning */\ntype PopoverAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Popover content panel props.\n *\n * @example\n * ```tsx\n * <Popover.Content side=\"top\" align=\"start\" sideOffset={12}>\n *   <p>Popover body</p>\n * </Popover.Content>\n * ```\n */\nexport type PopoverContentProps = SFPopoverVariantsProps & {\n  /**\n   * How to align the popover relative to the trigger.\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Distance between the trigger and the popover in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /**\n   * Additional offset along the alignment axis in pixels.\n   * @default 0\n   */\n  alignOffset?: number;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content to render inside the popover. */\n  children?: ReactNode;\n};\n\nfunction PopoverContent({\n  children,\n  side = SF_POPOVER_DEFAULT_VARIANTS.side,\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  className,\n}: PopoverContentProps) {\n  return (\n    <PopoverBase.Portal>\n      <PopoverBase.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverBase.Popup\n          className={cn(\n            \"flex origin-(--transform-origin) flex-col rounded-lg bg-sf-elevated px-4 py-3 text-sm text-sf-default\",\n            \"shadow-lg shadow-sf-tip-shadow outline outline-sf-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            \"sf-popover-popup\",\n            className\n          )}\n        >\n          <PopoverBase.Arrow\n            className={cn(\n              \"flex\",\n              \"data-[side=bottom]:-top-2\",\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-2 data-[side=top]:rotate-180\"\n            )}\n          >\n            <ArrowSvg />\n          </PopoverBase.Arrow>\n          {children}\n        </PopoverBase.Popup>\n      </PopoverBase.Positioner>\n    </PopoverBase.Portal>\n  );\n}\n\nPopoverContent.displayName = \"Popover.Content\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\ntype BasePopoverTitleProps = ComponentPropsWithoutRef<typeof PopoverBase.Title>;\n\nexport type PopoverTitleProps = BasePopoverTitleProps;\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <PopoverBase.Title\n      className={cn(\"m-0 text-base leading-6 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverTitle.displayName = \"Popover.Title\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\ntype BasePopoverDescriptionProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Description\n>;\n\nexport type PopoverDescriptionProps = BasePopoverDescriptionProps;\n\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <PopoverBase.Description\n      className={cn(\"m-0 text-base leading-6 text-sf-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverDescription.displayName = \"Popover.Description\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\ntype BasePopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverBase.Close>;\n\nexport type PopoverCloseProps = BasePopoverCloseProps & {\n  /** When true, the close element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverClose({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverCloseProps) {\n  return (\n    <PopoverBase.Close\n      className={className}\n      render={\n        asChild ? (children as BasePopoverCloseProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Close>\n  );\n}\n\nPopoverClose.displayName = \"Popover.Close\";\n\n// ============================================================================\n// Arrow SVG\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 popover/tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches popover 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 popover's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/popover\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-sf-elevated\"\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-sf-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-sf-tip-stroke\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Popover component for displaying accessible popup content anchored to a trigger.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <Popover.Trigger asChild>\n *     <Button>Open</Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <Popover.Title>Notifications</Popover.Title>\n *     <Popover.Description>You are all caught up!</Popover.Description>\n *   </Popover.Content>\n * </Popover>\n * ```\n *\n * @see https://base-ui.com/react/components/popover\n */\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\n// Export sub-components for direct access and type inference\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n};\n"],"mappings":";;;;;;AAMA,IAAa,sBAAsB,EACjC,MAAM;CACJ,KAAK;EACH,SAAS;EACT,aAAa;EACd;CACD,QAAQ;EACN,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,8BAA8B,EACzC,MAAM,UACP;AAyBD,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;AAC7D,QAAO,oBAAC,QAAY,MAAb;EAAkB,GAAI;EAAQ;EAA4B,CAAA;;AAGnE,YAAY,cAAc;AAe1B,SAAS,eAAe,EACtB,UACA,WACA,SACA,GAAG,SACmB;AACtB,QACE,oBAAC,QAAY,SAAb;EACa;EACX,QACE,UAAW,WAAiD,KAAA;EAE9D,GAAI;YAEH,UAAU,KAAA,IAAY;EACH,CAAA;;AAI1B,eAAe,cAAc;AAyC7B,SAAS,eAAe,EACtB,UACA,OAAO,4BAA4B,MACnC,QAAQ,UACR,aAAa,GACb,cAAc,GACd,aACsB;AACtB,QACE,oBAAC,QAAY,QAAb,EAAA,UACE,oBAAC,QAAY,YAAb;EACS;EACM;EACP;EACM;YAEZ,qBAAC,QAAY,OAAb;GACE,WAAW,GACT,yGACA,0DACA,qDACA,8DACA,0DACA,2BACA,oBACA,UACD;aAVH,CAYE,oBAAC,QAAY,OAAb;IACE,WAAW,GACT,QACA,6BACA,6DACA,+DACA,uDACD;cAED,oBAAC,UAAD,EAAY,CAAA;IACM,CAAA,EACnB,SACiB;;EACG,CAAA,EACN,CAAA;;AAIzB,eAAe,cAAc;AAU7B,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,QAAY,OAAb;EACE,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,aAAa,cAAc;AAY3B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAAC,QAAY,aAAb;EACE,WAAW,GAAG,0CAA0C,UAAU;EAClE,GAAI;EACJ,CAAA;;AAIN,mBAAmB,cAAc;AAajC,SAAS,aAAa,EACpB,UACA,WACA,SACA,GAAG,SACiB;AACpB,QACE,oBAAC,QAAY,OAAb;EACa;EACX,QACE,UAAW,WAA+C,KAAA;EAE5D,GAAI;YAEH,UAAU,KAAA,IAAY;EACL,CAAA;;AAIxB,aAAa,cAAc;;;;;;;;;;;;;;;;AAqB3B,SAAS,SAAS,OAAoC;AACpD,QACE,qBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,GAAI;YAAhE;GACE,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACF,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACF,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACE;;;;;;;;;;;;;;;;;;;;;AA0BV,IAAa,YAAU,OAAO,OAAO,aAAa;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACR,CAAC"}

package/dist/primitives/accordion.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/accordion";

package/dist/primitives/alert-dialog.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/alert-dialog";

package/dist/primitives/autocomplete.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/autocomplete";

package/dist/primitives/avatar.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/avatar";

package/dist/primitives/button.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/button";

package/dist/primitives/checkbox-group.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/checkbox-group";

package/dist/primitives/checkbox.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/checkbox";

package/dist/primitives/collapsible.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/collapsible";

package/dist/primitives/combobox.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/combobox";

package/dist/primitives/context-menu.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/context-menu";

package/dist/primitives/csp-provider.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/csp-provider";

package/dist/primitives/dialog.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/dialog";

package/dist/primitives/direction-provider.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/direction-provider";

package/dist/primitives/drawer.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/drawer";

package/dist/primitives/field.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/field";

package/dist/primitives/fieldset.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/fieldset";

package/dist/primitives/form.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/form";

package/dist/primitives/input.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/input";

package/dist/primitives/menu.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/menu";

package/dist/primitives/menubar.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/menubar";

package/dist/primitives/meter.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/meter";

package/dist/primitives/navigation-menu.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/navigation-menu";

package/dist/primitives/number-field.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/number-field";

package/dist/primitives/popover.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/popover";

package/dist/primitives/preview-card.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/preview-card";

package/dist/primitives/progress.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/progress";

package/dist/primitives/radio-group.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/radio-group";

package/dist/primitives/radio.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/radio";

package/dist/primitives/scroll-area.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/scroll-area";

package/dist/primitives/select.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/select";

package/dist/primitives/separator.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/separator";

package/dist/primitives/slider.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/slider";

package/dist/primitives/switch.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/switch";

package/dist/primitives/tabs.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/tabs";

package/dist/primitives/toast.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/toast";