@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/components/page-header.d.cts

@@ -0,0 +1,26 @@
+"use client";
+
+import { ButtonProps } from "./button.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/page-header.d.ts
+declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "color" | "size" | "styleVariant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderTitle: ({
+  className,
+  ...props
+}: React$1.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+type PageHeaderActionsProps = useRender.ComponentProps<'div'>;
+declare const PageHeaderActions: {
+  ({
+    className,
+    render,
+    ...props
+  }: PageHeaderActionsProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+export { PageHeader, PageHeaderActions, type PageHeaderActionsProps, PageHeaderBackButton, PageHeaderTitle };
+//# sourceMappingURL=page-header.d.cts.map

package/dist/components/page-header.d.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { ButtonProps } from "./button.js";
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/page-header.d.ts
+declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "color" | "size" | "styleVariant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderTitle: ({
+  className,
+  ...props
+}: React$1.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+type PageHeaderActionsProps = useRender.ComponentProps<'div'>;
+declare const PageHeaderActions: {
+  ({
+    className,
+    render,
+    ...props
+  }: PageHeaderActionsProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+export { PageHeader, PageHeaderActions, type PageHeaderActionsProps, PageHeaderBackButton, PageHeaderTitle };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/page-header.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Button } from "./button.js";
+import { PageTitle } from "./typography.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";
+//#region src/components/page-header.tsx
+const PageHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("header", {
+	ref,
+	className: cn("grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3", className),
+	...props
+}));
+PageHeader.displayName = "PageHeader";
+const PageHeaderBackButton = React$1.forwardRef(({ children, className, "aria-label": ariaLabel = "Back", ...props }, ref) => /* @__PURE__ */ jsx(Button, {
+	ref,
+	size: "icon-small",
+	styleVariant: "ghost",
+	color: "neutral",
+	type: "button",
+	"aria-label": ariaLabel,
+	className: cn("col-start-1 justify-self-start", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(MaterialSymbol, { name: "chevron_left" })
+}));
+PageHeaderBackButton.displayName = "PageHeaderBackButton";
+const PageHeaderTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(PageTitle, {
+	className: cn("col-start-2 justify-self-center text-center", className),
+	...props
+});
+const PageHeaderActions = ({ className, render, ...props }) => {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: cn("col-start-3 flex size-10 shrink-0 items-center justify-self-end", className) }, props)
+	});
+};
+PageHeaderActions.displayName = "PageHeaderActions";
+//#endregion
+export { PageHeader, PageHeaderActions, PageHeaderBackButton, PageHeaderTitle };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":["React"],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { PageTitle } from './typography'\n\nconst PageHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn(\n      'grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3',\n      className,\n    )}\n    {...props}\n  />\n))\nPageHeader.displayName = 'PageHeader'\n\nconst PageHeaderBackButton = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, 'size' | 'styleVariant' | 'color'>\n>(\n  (\n    { children, className, 'aria-label': ariaLabel = 'Back', ...props },\n    ref,\n  ) => (\n    <Button\n      ref={ref}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={cn('col-start-1 justify-self-start', className)}\n      {...props}\n    >\n      {children ?? <MaterialSymbol name=\"chevron_left\" />}\n    </Button>\n  ),\n)\nPageHeaderBackButton.displayName = 'PageHeaderBackButton'\n\nconst PageHeaderTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h2'>) => (\n  <PageTitle\n    className={cn('col-start-2 justify-self-center text-center', className)}\n    {...props}\n  />\n)\n\ntype PageHeaderActionsProps = useRender.ComponentProps<'div'>\n\nconst PageHeaderActions = ({\n  className,\n  render,\n  ...props\n}: PageHeaderActionsProps) => {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'col-start-3 flex size-10 shrink-0 items-center justify-self-end',\n          className,\n        ),\n      },\n      props,\n    ),\n  })\n}\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nexport { PageHeader, PageHeaderActions, PageHeaderBackButton, PageHeaderTitle }\nexport type { PageHeaderActionsProps }\n"],"mappings":";;;;;;;;;;AAQA,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,UAAD;CACO;CACL,WAAW,GACT,wEACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,WAAW,cAAc;AAEzB,MAAM,uBAAuBA,QAAM,YAK/B,EAAE,UAAU,WAAW,cAAc,YAAY,QAAQ,GAAG,SAC5D,QAEA,oBAAC,QAAD;CACO;CACL,MAAK;CACL,cAAa;CACb,OAAM;CACN,MAAK;CACL,cAAY;CACZ,WAAW,GAAG,kCAAkC,UAAU;CAC1D,GAAI;WAEH,YAAY,oBAAC,gBAAD,EAAgB,MAAK,gBAAiB,CAAA;CAC5C,CAAA,CAEZ;AACD,qBAAqB,cAAc;AAEnC,MAAM,mBAAmB,EACvB,WACA,GAAG,YAEH,oBAAC,WAAD;CACE,WAAW,GAAG,+CAA+C,UAAU;CACvE,GAAI;CACJ,CAAA;AAKJ,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YACyB;AAC5B,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,EACE,WAAW,GACT,mEACA,UACD,EACF,EACD,MACD;EACF,CAAC;;AAEJ,kBAAkB,cAAc"}

package/dist/components/page-spinner.cjs

@@ -0,0 +1,19 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_components_spinner = require("./spinner.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/page-spinner.tsx
+function PageSpinner({ label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center justify-center gap-3 py-12",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_spinner.Spinner, { size: "lg" }), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-sm text-gray-light",
+			children: label
+		})]
+	});
+}
+//#endregion
+exports.PageSpinner = PageSpinner;
+
+//# sourceMappingURL=page-spinner.cjs.map

package/dist/components/page-spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-spinner.cjs","names":["Spinner"],"sources":["../../src/components/page-spinner.tsx"],"sourcesContent":["import { Spinner } from './spinner'\n\ninterface PageSpinnerProps {\n  label?: string\n}\n\nexport function PageSpinner({ label }: PageSpinnerProps) {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-3 py-12\">\n      <Spinner size=\"lg\" />\n      {label && <span className=\"text-sm text-gray-light\">{label}</span>}\n    </div>\n  )\n}\n\nexport type { PageSpinnerProps }\n"],"mappings":";;;;;;AAMA,SAAgB,YAAY,EAAE,SAA2B;AACvD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,SAAD,EAAS,MAAK,MAAO,CAAA,EACpB,SAAS,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA2B;GAAa,CAAA,CAC9D"}

package/dist/components/page-spinner.d.cts

@@ -0,0 +1,14 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/page-spinner.d.ts
+interface PageSpinnerProps {
+  label?: string;
+}
+declare function PageSpinner({
+  label
+}: PageSpinnerProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageSpinner, type PageSpinnerProps };
+//# sourceMappingURL=page-spinner.d.cts.map

package/dist/components/page-spinner.d.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/page-spinner.d.ts
+interface PageSpinnerProps {
+  label?: string;
+}
+declare function PageSpinner({
+  label
+}: PageSpinnerProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageSpinner, type PageSpinnerProps };
+//# sourceMappingURL=page-spinner.d.ts.map

package/dist/components/page-spinner.js

@@ -0,0 +1,17 @@
+"use client";
+import { Spinner } from "./spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/page-spinner.tsx
+function PageSpinner({ label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-3 py-12",
+		children: [/* @__PURE__ */ jsx(Spinner, { size: "lg" }), label && /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-gray-light",
+			children: label
+		})]
+	});
+}
+//#endregion
+export { PageSpinner };
+
+//# sourceMappingURL=page-spinner.js.map

package/dist/components/page-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-spinner.js","names":[],"sources":["../../src/components/page-spinner.tsx"],"sourcesContent":["import { Spinner } from './spinner'\n\ninterface PageSpinnerProps {\n  label?: string\n}\n\nexport function PageSpinner({ label }: PageSpinnerProps) {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-3 py-12\">\n      <Spinner size=\"lg\" />\n      {label && <span className=\"text-sm text-gray-light\">{label}</span>}\n    </div>\n  )\n}\n\nexport type { PageSpinnerProps }\n"],"mappings":";;;;AAMA,SAAgB,YAAY,EAAE,SAA2B;AACvD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD,EAAS,MAAK,MAAO,CAAA,EACpB,SAAS,oBAAC,QAAD;GAAM,WAAU;aAA2B;GAAa,CAAA,CAC9D"}

package/dist/components/period-tabs.cjs

@@ -0,0 +1,79 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_button = require("./button.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.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__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
+		"aria-label": ariaLabel,
+		className: (0, cnfast.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
+		size: "icon-small",
+		styleVariant: "ghost",
+		color: "neutral",
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.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__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
+		"aria-label": ariaLabel,
+		className: (0, cnfast.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
+		size: "icon-small",
+		styleVariant: "ghost",
+		color: "neutral",
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "text-[16px]",
+			name: "chevron_right"
+		})
+	});
+};
+//#endregion
+exports.PeriodStepper = PeriodStepper;
+exports.PeriodStepperButtonNext = PeriodStepperButtonNext;
+exports.PeriodStepperButtonPrev = PeriodStepperButtonPrev;
+exports.PeriodStepperLabel = PeriodStepperLabel;
+exports.PeriodTabs = PeriodTabs;
+
+//# sourceMappingURL=period-tabs.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"period-tabs.cjs","names":["Button","MaterialSymbol"],"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;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,oCAAoC,UAAU;EAC5D,GAAI;EACJ,CAAA;;;;;;AAQN,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;;;AAMN,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;AAClC,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;;;;;;AASN,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,mBAC1B,GAAG,WACoE;AACvE,QACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,UACD;EACD,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EAAgB,MAAK,gBAAiB,CAAA;EAC/B,CAAA;;;;;;;AASb,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,eAC1B,GAAG,WACoE;AACvE,QACE,iBAAA,GAAA,kBAAA,KAACD,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,UACD;EACD,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAc,MAAK;GAAkB,CAAA;EACxD,CAAA"}

package/dist/components/period-tabs.d.cts

@@ -0,0 +1,51 @@
+"use client";
+
+import { ButtonProps } from "./button.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/period-tabs.d.ts
+/**
+ * Outer container for a period picker — typically wraps a tabs row on top of
+ * a date stepper.
+ */
+declare const PeriodTabs: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Date stepper row — renders prev / label / next children inline. Pair with
+ * any icon button + `PeriodStepperLabel` (or custom content) inside.
+ */
+declare const PeriodStepper: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/** Centered label between the stepper buttons. Has a fixed min-width so the
+ * stepper doesn't jump as the label text changes length. */
+declare const PeriodStepperLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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).
+ */
+declare const PeriodStepperButtonPrev: ({
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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).
+ */
+declare const PeriodStepperButtonNext: ({
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PeriodStepper, PeriodStepperButtonNext, PeriodStepperButtonPrev, PeriodStepperLabel, PeriodTabs };
+//# sourceMappingURL=period-tabs.d.cts.map

package/dist/components/period-tabs.d.ts

@@ -0,0 +1,51 @@
+"use client";
+
+import { ButtonProps } from "./button.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/period-tabs.d.ts
+/**
+ * Outer container for a period picker — typically wraps a tabs row on top of
+ * a date stepper.
+ */
+declare const PeriodTabs: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Date stepper row — renders prev / label / next children inline. Pair with
+ * any icon button + `PeriodStepperLabel` (or custom content) inside.
+ */
+declare const PeriodStepper: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/** Centered label between the stepper buttons. Has a fixed min-width so the
+ * stepper doesn't jump as the label text changes length. */
+declare const PeriodStepperLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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).
+ */
+declare const PeriodStepperButtonPrev: ({
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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).
+ */
+declare const PeriodStepperButtonNext: ({
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PeriodStepper, PeriodStepperButtonNext, PeriodStepperButtonPrev, PeriodStepperLabel, PeriodTabs };
+//# sourceMappingURL=period-tabs.d.ts.map

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;AAC1E,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,oCAAoC,UAAU;EAC5D,GAAI;EACJ,CAAA;;;;;;AAQN,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;AAC7E,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;;;AAMN,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EACE,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;;;;;;AASN,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,mBAC1B,GAAG,WACoE;AACvE,QACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,UACD;EACD,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,gBAAD,EAAgB,MAAK,gBAAiB,CAAA;EAC/B,CAAA;;;;;;;AASb,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,eAC1B,GAAG,WACoE;AACvE,QACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,UACD;EACD,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAK;GAAkB,CAAA;EACxD,CAAA"}

package/dist/components/popover.cjs

@@ -0,0 +1,62 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.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,KAAK;AAEf,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,KAAK;CACpE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;EAAW,GAAG,CAAC,OAAO,CAAC;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;EACN,CAAA;;AAIpC,SAAS,eACP,OACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;;;AAK5E,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;AAE5E,SAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,qBAInB,EAAE;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,kBAAkB,EACjC,MACD;EACF,CAAC;;AASJ,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,qBAAqB;AACtD,QACE,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,UACD;GACD,GAAI;GACJ,CAAA;EAC0B,CAAA,EACN,CAAA"}

package/dist/components/popover.d.cts

@@ -0,0 +1,29 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+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>): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverTrigger(props: React$1.ComponentProps<typeof Popover$1.Trigger>): _$react_jsx_runtime0.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): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.cts.map

package/dist/components/popover.d.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+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>): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverTrigger(props: React$1.ComponentProps<typeof Popover$1.Trigger>): _$react_jsx_runtime0.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): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.ts.map