@epilot/spark-ui 0.10.0

package/dist/components/period-tabs.js

@@ -0,0 +1,73 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Button } from "./button.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/period-tabs.tsx
+/**
+* Outer container for a period picker — typically wraps a tabs row on top of
+* a date stepper.
+*/
+const PeriodTabs = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col items-center gap-2", className),
+		...rest
+	});
+};
+/**
+* Date stepper row — renders prev / label / next children inline. Pair with
+* any icon button + `PeriodStepperLabel` (or custom content) inside.
+*/
+const PeriodStepper = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 text-gray-light", className),
+		...rest
+	});
+};
+/** Centered label between the stepper buttons. Has a fixed min-width so the
+* stepper doesn't jump as the label text changes length. */
+const PeriodStepperLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("min-w-40 text-center text-sm font-medium text-gray", className),
+		...rest
+	});
+};
+/**
+* Previous-period button — chevron-left icon button with sensible defaults
+* (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
+* styling that matches the next button).
+*/
+const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel = "Previous period", ...rest }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": ariaLabel,
+		className: cn("disabled:text-gray-light/60 disabled:opacity-40", className),
+		size: "icon-small",
+		styleVariant: "ghost",
+		color: "neutral",
+		...rest,
+		children: /* @__PURE__ */ jsx(MaterialSymbol, { name: "chevron_left" })
+	});
+};
+/**
+* Next-period button — chevron-right icon button with sensible defaults
+* (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
+* styling that matches the previous button).
+*/
+const PeriodStepperButtonNext = ({ className, "aria-label": ariaLabel = "Next period", ...rest }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": ariaLabel,
+		className: cn("disabled:text-gray-light/60 disabled:opacity-40", className),
+		size: "icon-small",
+		styleVariant: "ghost",
+		color: "neutral",
+		...rest,
+		children: /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "text-[16px]",
+			name: "chevron_right"
+		})
+	});
+};
+//#endregion
+export { PeriodStepper, PeriodStepperButtonNext, PeriodStepperButtonPrev, PeriodStepperLabel, PeriodTabs };
+
+//# sourceMappingURL=period-tabs.js.map

package/dist/components/period-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"period-tabs.js","names":[],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\n/**\n * Outer container for a period picker — typically wraps a tabs row on top of\n * a date stepper.\n */\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Date stepper row — renders prev / label / next children inline. Pair with\n * any icon button + `PeriodStepperLabel` (or custom content) inside.\n */\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Centered label between the stepper buttons. Has a fixed min-width so the\n * stepper doesn't jump as the label text changes length. */\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Previous-period button — chevron-left icon button with sensible defaults\n * (`styleVariant=\"ghost\"`, `color=\"neutral\"`, `size=\"icon-small\"`, accessible label, and disabled-state\n * styling that matches the next button).\n */\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel = 'Previous period',\n  ...rest\n}: Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children'>) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <MaterialSymbol name=\"chevron_left\" />\n    </Button>\n  )\n}\n\n/**\n * Next-period button — chevron-right icon button with sensible defaults\n * (`styleVariant=\"ghost\"`, `color=\"neutral\"`, `size=\"icon-small\"`, accessible label, and disabled-state\n * styling that matches the previous button).\n */\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel = 'Next period',\n  ...rest\n}: Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children'>) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;;;;;AAQA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;;;AAIA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,mBAC1B,GAAG,WACoE;CACvE,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,gBAAD,EAAgB,MAAK,eAAgB,CAAA;CAC/B,CAAA;AAEZ;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,eAC1B,GAAG,WACoE;CACvE,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAK;EAAiB,CAAA;CACxD,CAAA;AAEZ"}

package/dist/components/pill.cjs

@@ -0,0 +1,62 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/pill.tsx
+/**
+* Like Badge, but interactive: `onClick` makes the whole pill a button
+* (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.
+* Both are optional -- with neither, it's a static label.
+*/
+const Pill = react.forwardRef(function Pill({ className, children, styleVariant, color, disabled = false, onClick, onRemove, removeLabel, onKeyDown, ...props }, ref) {
+	const clickable = !disabled && onClick !== void 0;
+	const removable = !disabled && onRemove !== void 0;
+	const focusable = clickable || removable;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"aria-disabled": disabled || void 0,
+		"aria-keyshortcuts": removable ? "Delete" : void 0,
+		"data-slot": "pill",
+		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
+		onClick: clickable ? onClick : void 0,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (clickable && (event.key === "Enter" || event.key === " ")) {
+				if (event.key === " ") event.preventDefault();
+				onClick?.(event);
+			}
+			if (removable && (event.key === "Delete" || event.key === "Backspace")) onRemove?.(event);
+		},
+		ref,
+		role: clickable ? "button" : void 0,
+		tabIndex: focusable ? 0 : void 0,
+		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		...props,
+		children: [children, removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: removeLabel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			"data-slot": "pill-remove",
+			onClick: (event) => {
+				event.stopPropagation();
+				onRemove?.(event);
+			},
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+				className: "[--spark-icon-size:14px]",
+				name: "close"
+			})
+		})] }) : null]
+	});
+});
+Pill.displayName = "Pill";
+//#endregion
+exports.Pill = Pill;
+
+//# sourceMappingURL=pill.cjs.map

package/dist/components/pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.cjs","names":["React","accentByColor","MaterialSymbol"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,YAAA,GAAA,OAAA,IACE,0FACA,4FACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/pill.d.cts

@@ -0,0 +1,29 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { SparkAccentColor } from "../lib/accent-colors.cjs";
+import * as React$1 from "react";
+
+//#region src/components/pill.d.ts
+type PillRemoveProps = {
+  onRemove?: undefined;
+  removeLabel?: string;
+} | {
+  /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */onRemove: (event: React$1.SyntheticEvent) => void; /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */
+  removeLabel: string;
+};
+type PillProps = Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'onClick'> & PillRemoveProps & {
+  styleVariant?: SparkStyle;
+  color?: SparkAccentColor;
+  disabled?: boolean;
+  onClick?: (event: React$1.SyntheticEvent<HTMLSpanElement>) => void;
+};
+/**
+ * Like Badge, but interactive: `onClick` makes the whole pill a button
+ * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.
+ * Both are optional -- with neither, it's a static label.
+ */
+declare const Pill: React$1.ForwardRefExoticComponent<PillProps & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Pill, type PillProps };
+//# sourceMappingURL=pill.d.cts.map

package/dist/components/pill.d.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { SparkAccentColor } from "../lib/accent-colors.js";
+import * as React$1 from "react";
+
+//#region src/components/pill.d.ts
+type PillRemoveProps = {
+  onRemove?: undefined;
+  removeLabel?: string;
+} | {
+  /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */onRemove: (event: React$1.SyntheticEvent) => void; /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */
+  removeLabel: string;
+};
+type PillProps = Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'onClick'> & PillRemoveProps & {
+  styleVariant?: SparkStyle;
+  color?: SparkAccentColor;
+  disabled?: boolean;
+  onClick?: (event: React$1.SyntheticEvent<HTMLSpanElement>) => void;
+};
+/**
+ * Like Badge, but interactive: `onClick` makes the whole pill a button
+ * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.
+ * Both are optional -- with neither, it's a static label.
+ */
+declare const Pill: React$1.ForwardRefExoticComponent<PillProps & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Pill, type PillProps };
+//# sourceMappingURL=pill.d.ts.map

package/dist/components/pill.js

@@ -0,0 +1,59 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { accentByColor } from "../lib/accent-colors.js";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pill.tsx
+/**
+* Like Badge, but interactive: `onClick` makes the whole pill a button
+* (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.
+* Both are optional -- with neither, it's a static label.
+*/
+const Pill = React$1.forwardRef(function Pill({ className, children, styleVariant, color, disabled = false, onClick, onRemove, removeLabel, onKeyDown, ...props }, ref) {
+	const clickable = !disabled && onClick !== void 0;
+	const removable = !disabled && onRemove !== void 0;
+	const focusable = clickable || removable;
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-disabled": disabled || void 0,
+		"aria-keyshortcuts": removable ? "Delete" : void 0,
+		"data-slot": "pill",
+		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-accent-color": color ? accentByColor[color] : void 0,
+		onClick: clickable ? onClick : void 0,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (clickable && (event.key === "Enter" || event.key === " ")) {
+				if (event.key === " ") event.preventDefault();
+				onClick?.(event);
+			}
+			if (removable && (event.key === "Delete" || event.key === "Backspace")) onRemove?.(event);
+		},
+		ref,
+		role: clickable ? "button" : void 0,
+		tabIndex: focusable ? 0 : void 0,
+		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		...props,
+		children: [children, removable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: removeLabel
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "pill-remove",
+			onClick: (event) => {
+				event.stopPropagation();
+				onRemove?.(event);
+			},
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none",
+			children: /* @__PURE__ */ jsx(MaterialSymbol, {
+				className: "[--spark-icon-size:14px]",
+				name: "close"
+			})
+		})] }) : null]
+	});
+});
+Pill.displayName = "Pill";
+//#endregion
+export { Pill };
+
+//# sourceMappingURL=pill.js.map

package/dist/components/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,WAAW,GACT,0FACA,4FACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/popover.cjs

@@ -0,0 +1,62 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let _base_ui_react_popover = require("@base-ui/react/popover");
+let cnfast = require("cnfast");
+//#region src/components/popover.tsx
+const PopoverAnchorContext = react.createContext(null);
+function Popover(props) {
+	const [anchor, setAnchor] = react.useState(null);
+	const value = react.useMemo(() => ({
+		anchor,
+		setAnchor
+	}), [anchor]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverAnchorContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Root, { ...props })
+	});
+}
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+/** Anchors the popover to this element instead of the trigger. Pass `render` to
+* wrap an existing element (was radix `asChild`). */
+function PopoverAnchor({ render, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		ref: react.useContext(PopoverAnchorContext)?.setAnchor,
+		props: (0, _base_ui_react_merge_props.mergeProps)({ "data-slot": "popover-anchor" }, props)
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, ...props }) {
+	const context = react.useContext(PopoverAnchorContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
+		align,
+		alignOffset,
+		anchor: anchor ?? context?.anchor ?? void 0,
+		className: "isolate z-50",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
+			"data-slot": "popover-content",
+			className: (0, cnfast.cn)("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+			...props
+		})
+	}) });
+}
+//#endregion
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+
+//# sourceMappingURL=popover.cjs.map

package/dist/components/popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  >\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAQA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,QAAQ,UAAU,SAAS,UAAU,KAAA;EACrC,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B"}

package/dist/components/popover.d.cts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+
+//#region src/components/popover.d.ts
+declare function Popover(props: React$1.ComponentProps<typeof Popover$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger(props: React$1.ComponentProps<typeof Popover$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+/** Anchors the popover to this element instead of the trigger. Pass `render` to
+ * wrap an existing element (was radix `asChild`). */
+declare function PopoverAnchor({
+  render,
+  ...props
+}: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'>;
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  side,
+  alignOffset,
+  anchor,
+  ...props
+}: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.cts.map

package/dist/components/popover.d.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+
+//#region src/components/popover.d.ts
+declare function Popover(props: React$1.ComponentProps<typeof Popover$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger(props: React$1.ComponentProps<typeof Popover$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+/** Anchors the popover to this element instead of the trigger. Pass `render` to
+ * wrap an existing element (was radix `asChild`). */
+declare function PopoverAnchor({
+  render,
+  ...props
+}: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'>;
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  side,
+  alignOffset,
+  anchor,
+  ...props
+}: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/popover.tsx
+const PopoverAnchorContext = React$1.createContext(null);
+function Popover(props) {
+	const [anchor, setAnchor] = React$1.useState(null);
+	const value = React$1.useMemo(() => ({
+		anchor,
+		setAnchor
+	}), [anchor]);
+	return /* @__PURE__ */ jsx(PopoverAnchorContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(Popover$1.Root, { ...props })
+	});
+}
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+/** Anchors the popover to this element instead of the trigger. Pass `render` to
+* wrap an existing element (was radix `asChild`). */
+function PopoverAnchor({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: React$1.useContext(PopoverAnchorContext)?.setAnchor,
+		props: mergeProps({ "data-slot": "popover-anchor" }, props)
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, ...props }) {
+	const context = React$1.useContext(PopoverAnchorContext);
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		alignOffset,
+		anchor: anchor ?? context?.anchor ?? void 0,
+		className: "isolate z-50",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+			...props
+		})
+	}) });
+}
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  >\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAQA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,QAAQ,UAAU,SAAS,UAAU,KAAA;EACrC,WAAU;EACJ;EACM;YAEZ,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B"}