@epilot/spark-ui 0.10.0

package/dist/components/onboarding-layout.d.cts

@@ -0,0 +1,44 @@
+"use client";
+
+//#region src/components/onboarding-layout.d.ts
+declare const OnboardingLayout: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Top section: typically wraps the title row, optional description, and a
+ * progress bar.
+ */
+declare const OnboardingLayoutHeader: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/** Text-only group inside the header (title row + description). */
+declare const OnboardingLayoutHeading: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/** Row that holds the title on the left and (optionally) a step badge on the right. */
+declare const OnboardingLayoutTitleRow: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const OnboardingLayoutTitle: ({
+  className,
+  ...rest
+}: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+declare const OnboardingLayoutDescription: ({
+  className,
+  ...rest
+}: React.ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Bottom action row. Use with `justify-between`-aware children — typically a
+ * back action on the left and a cancel/primary action on the right.
+ */
+declare const OnboardingLayoutFooter: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { OnboardingLayout, OnboardingLayoutDescription, OnboardingLayoutFooter, OnboardingLayoutHeader, OnboardingLayoutHeading, OnboardingLayoutTitle, OnboardingLayoutTitleRow };
+//# sourceMappingURL=onboarding-layout.d.cts.map

package/dist/components/onboarding-layout.d.ts

@@ -0,0 +1,44 @@
+"use client";
+
+//#region src/components/onboarding-layout.d.ts
+declare const OnboardingLayout: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Top section: typically wraps the title row, optional description, and a
+ * progress bar.
+ */
+declare const OnboardingLayoutHeader: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/** Text-only group inside the header (title row + description). */
+declare const OnboardingLayoutHeading: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/** Row that holds the title on the left and (optionally) a step badge on the right. */
+declare const OnboardingLayoutTitleRow: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const OnboardingLayoutTitle: ({
+  className,
+  ...rest
+}: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+declare const OnboardingLayoutDescription: ({
+  className,
+  ...rest
+}: React.ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Bottom action row. Use with `justify-between`-aware children — typically a
+ * back action on the left and a cancel/primary action on the right.
+ */
+declare const OnboardingLayoutFooter: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { OnboardingLayout, OnboardingLayoutDescription, OnboardingLayoutFooter, OnboardingLayoutHeader, OnboardingLayoutHeading, OnboardingLayoutTitle, OnboardingLayoutTitleRow };
+//# sourceMappingURL=onboarding-layout.d.ts.map

package/dist/components/onboarding-layout.js

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/onboarding-layout.tsx
+const OnboardingLayout = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*6)]", className),
+		...rest
+	});
+};
+/**
+* Top section: typically wraps the title row, optional description, and a
+* progress bar.
+*/
+const OnboardingLayoutHeader = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*3)] pt-4", className),
+		...rest
+	});
+};
+/** Text-only group inside the header (title row + description). */
+const OnboardingLayoutHeading = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*1)]", className),
+		...rest
+	});
+};
+/** Row that holds the title on the left and (optionally) a step badge on the right. */
+const OnboardingLayoutTitleRow = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-between", className),
+		...rest
+	});
+};
+const OnboardingLayoutTitle = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("h2", {
+		className: cn("text-lg font-bold text-gray", className),
+		...rest
+	});
+};
+const OnboardingLayoutDescription = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm text-gray-light", className),
+		...rest
+	});
+};
+/**
+* Bottom action row. Use with `justify-between`-aware children — typically a
+* back action on the left and a cancel/primary action on the right.
+*/
+const OnboardingLayoutFooter = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-between", className),
+		...rest
+	});
+};
+//#endregion
+export { OnboardingLayout, OnboardingLayoutDescription, OnboardingLayoutFooter, OnboardingLayoutHeader, OnboardingLayoutHeading, OnboardingLayoutTitle, OnboardingLayoutTitleRow };
+
+//# sourceMappingURL=onboarding-layout.js.map

package/dist/components/onboarding-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-layout.js","names":[],"sources":["../../src/components/onboarding-layout.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst OnboardingLayout = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*6)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Top section: typically wraps the title row, optional description, and a\n * progress bar.\n */\nconst OnboardingLayoutHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*3)] pt-4',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** Text-only group inside the header (title row + description). */\nconst OnboardingLayoutHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*1)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** Row that holds the title on the left and (optionally) a step badge on the right. */\nconst OnboardingLayoutTitleRow = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between', className)}\n      {...rest}\n    />\n  )\n}\n\nconst OnboardingLayoutTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'h2'>) => {\n  return (\n    <h2 className={cn('text-lg font-bold text-gray', className)} {...rest} />\n  )\n}\n\nconst OnboardingLayoutDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...rest} />\n}\n\n/**\n * Bottom action row. Use with `justify-between`-aware children — typically a\n * back action on the left and a cancel/primary action on the right.\n */\nconst OnboardingLayoutFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between', className)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  OnboardingLayout,\n  OnboardingLayoutHeader,\n  OnboardingLayoutHeading,\n  OnboardingLayoutTitleRow,\n  OnboardingLayoutTitle,\n  OnboardingLayoutDescription,\n  OnboardingLayoutFooter,\n}\n"],"mappings":";;;;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,4DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,2BAA2B,EAC/B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC6B;CAChC,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE5E;AAEA,MAAM,+BAA+B,EACnC,WACA,GAAG,WAC4B;CAC/B,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;;;;;AAMA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/page-header.cjs

@@ -0,0 +1,50 @@
+"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_components_button = require("./button.cjs");
+const require_components_typography = require("./typography.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 cnfast = require("cnfast");
+//#region src/components/page-header.tsx
+const PageHeader = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+	ref,
+	className: (0, cnfast.cn)("grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3", className),
+	...props
+}));
+PageHeader.displayName = "PageHeader";
+const PageHeaderBackButton = react.forwardRef(({ children, className, "aria-label": ariaLabel = "Back", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
+	ref,
+	size: "icon-small",
+	styleVariant: "ghost",
+	color: "neutral",
+	type: "button",
+	"aria-label": ariaLabel,
+	className: (0, cnfast.cn)("col-start-1 justify-self-start", className),
+	...props,
+	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, { name: "chevron_left" })
+}));
+PageHeaderBackButton.displayName = "PageHeaderBackButton";
+const PageHeaderTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.PageTitle, {
+	className: (0, cnfast.cn)("col-start-2 justify-self-center text-center", className),
+	...props
+});
+const PageHeaderActions = ({ className, render, ...props }) => {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		props: (0, _base_ui_react_merge_props.mergeProps)({ className: (0, cnfast.cn)("col-start-3 flex size-10 shrink-0 items-center justify-self-end", className) }, props)
+	});
+};
+PageHeaderActions.displayName = "PageHeaderActions";
+//#endregion
+exports.PageHeader = PageHeader;
+exports.PageHeaderActions = PageHeaderActions;
+exports.PageHeaderBackButton = PageHeaderBackButton;
+exports.PageHeaderTitle = PageHeaderTitle;
+
+//# sourceMappingURL=page-header.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.cjs","names":["React","Button","MaterialSymbol","PageTitle"],"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,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,wEACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,WAAW,cAAc;AAEzB,MAAM,uBAAuBA,MAAM,YAK/B,EAAE,UAAU,WAAW,cAAc,YAAY,QAAQ,GAAG,SAC5D,QAEA,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;CACO;CACL,MAAK;CACL,cAAa;CACb,OAAM;CACN,MAAK;CACL,cAAY;CACZ,YAAA,GAAA,OAAA,IAAc,kCAAkC,SAAS;CACzD,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EAAgB,MAAK,eAAgB,CAAA;AAC5C,CAAA,CAEZ;AACA,qBAAqB,cAAc;AAEnC,MAAM,mBAAmB,EACvB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;CACE,YAAA,GAAA,OAAA,IAAc,+CAA+C,SAAS;CACtE,GAAI;AACL,CAAA;AAKH,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YACyB;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE,EACE,YAAA,GAAA,OAAA,IACE,mEACA,SACF,EACF,GACA,KACF;CACF,CAAC;AACH;AACA,kBAAkB,cAAc"}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { ButtonProps } from "./button.cjs";
+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<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderTitle: ({
+  className,
+  ...props
+}: React$1.ComponentProps<"h2">) => import("react/jsx-runtime").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,25 @@
+"use client";
+
+import { ButtonProps } from "./button.js";
+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<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderTitle: ({
+  className,
+  ...props
+}: React$1.ComponentProps<"h2">) => import("react/jsx-runtime").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,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,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,SAAS;CACzD,GAAI;WAEH,YAAY,oBAAC,gBAAD,EAAgB,MAAK,eAAgB,CAAA;AAC5C,CAAA,CAEZ;AACA,qBAAqB,cAAc;AAEnC,MAAM,mBAAmB,EACvB,WACA,GAAG,YAEH,oBAAC,WAAD;CACE,WAAW,GAAG,+CAA+C,SAAS;CACtE,GAAI;AACL,CAAA;AAKH,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YACyB;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,EACE,WAAW,GACT,mEACA,SACF,EACF,GACA,KACF;CACF,CAAC;AACH;AACA,kBAAkB,cAAc"}

package/dist/components/page-spinner.cjs

@@ -0,0 +1,18 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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;CACvD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,SAAD,EAAS,MAAK,KAAM,CAAA,GACnB,SAAS,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA2B;EAAY,CAAA,CAC9D;;AAET"}

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

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

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

@@ -0,0 +1,12 @@
+"use client";
+
+//#region src/components/page-spinner.d.ts
+interface PageSpinnerProps {
+  label?: string;
+}
+declare function PageSpinner({
+  label
+}: PageSpinnerProps): import("react/jsx-runtime").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;CACvD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD,EAAS,MAAK,KAAM,CAAA,GACnB,SAAS,oBAAC,QAAD;GAAM,WAAU;aAA2B;EAAY,CAAA,CAC9D;;AAET"}

package/dist/components/period-tabs.cjs

@@ -0,0 +1,78 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;;;AAIA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,mBAC1B,GAAG,WACoE;CACvE,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EAAgB,MAAK,eAAgB,CAAA;CAC/B,CAAA;AAEZ;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,eAC1B,GAAG,WACoE;CACvE,OACE,iBAAA,GAAA,kBAAA,KAACD,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAc,MAAK;EAAiB,CAAA;CACxD,CAAA;AAEZ"}

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

@@ -0,0 +1,50 @@
+"use client";
+
+import { ButtonProps } from "./button.cjs";
+
+//#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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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,50 @@
+"use client";
+
+import { ButtonProps } from "./button.js";
+
+//#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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").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">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PeriodStepper, PeriodStepperButtonNext, PeriodStepperButtonPrev, PeriodStepperLabel, PeriodTabs };
+//# sourceMappingURL=period-tabs.d.ts.map