@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/components/money-saved-block.js

@@ -0,0 +1,79 @@
+"use client";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { SectionTitle, StateValue } from "./typography.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/money-saved-block.tsx
+const MoneySavedContainer = ({ children, ariaLabel = "Money saved today" }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": ariaLabel,
+		className: "flex items-center justify-between gap-4",
+		children
+	});
+};
+const MoneySavedContent = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1",
+		children
+	});
+};
+const MoneySavedTitle = ({ children }) => {
+	return /* @__PURE__ */ jsx(SectionTitle, { children });
+};
+const MoneySavedValue = ({ children }) => {
+	return /* @__PURE__ */ jsx(StateValue, { children });
+};
+const MoneySavedDelta = ({ children }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-end gap-1 text-sm text-base-success-solid",
+		children: [/* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "rotate-180 text-[14px]",
+			name: "swap_vert"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children
+		})]
+	});
+};
+const MoneySavedGaugeContainer = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative top-2 flex flex-col items-end gap-1",
+		children
+	});
+};
+const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption = "Autarky", gaugeWidth, gaugeHeight, gaugeArcPath, gaugeStrokeWidth }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("svg", {
+			className: "h-[44px] w-[76px]",
+			viewBox: `0 0 ${gaugeWidth} ${gaugeHeight}`,
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: gaugeArcPath,
+				fill: "none",
+				stroke: "var(--gray-a5)",
+				strokeWidth: gaugeStrokeWidth,
+				strokeLinecap: "round",
+				pathLength: 1
+			}), /* @__PURE__ */ jsx("path", {
+				d: gaugeArcPath,
+				fill: "none",
+				stroke: "var(--green-a9)",
+				strokeWidth: gaugeStrokeWidth,
+				strokeLinecap: "round",
+				pathLength: 1,
+				strokeDasharray: `${autarkyProgress} 1`
+			})]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray",
+			children: autarkyLabel
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "mx-auto text-xs text-gray-light",
+			children: autarkyCaption
+		})
+	] });
+};
+//#endregion
+export { MoneySavedContainer, MoneySavedContent, MoneySavedDelta, MoneySavedGaugeContainer, MoneySavedGaugeContent, MoneySavedTitle, MoneySavedValue };
+
+//# sourceMappingURL=money-saved-block.js.map

package/dist/components/money-saved-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-saved-block.js","names":[],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--gray-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,oBAAC,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,oBAAC,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,oBAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,oBAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,oBAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}

package/dist/components/number-flow.cjs

@@ -0,0 +1,44 @@
+"use client";
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+require("../utils/chars.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _number_flow_react = require("@number-flow/react");
+_number_flow_react = require_chunk.__toESM(_number_flow_react);
+//#region src/components/number-flow.tsx
+function subscribeToDocumentLang(onChange) {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["lang"]
+	});
+	return () => observer.disconnect();
+}
+function getDocumentLang() {
+	return typeof document === "undefined" ? void 0 : document.documentElement.lang || void 0;
+}
+function useDocumentLang() {
+	return (0, react.useSyncExternalStore)(subscribeToDocumentLang, getDocumentLang, () => void 0);
+}
+function withTrailingSeparator(suffix) {
+	if (!suffix || /^\s/.test(suffix)) return suffix;
+	return ` ${suffix}`;
+}
+function withLeadingSeparator(prefix) {
+	if (!prefix || /\s$/.test(prefix)) return prefix;
+	return `${prefix} `;
+}
+function NumberFlow({ locales, prefix, suffix, ...props }) {
+	const documentLang = useDocumentLang();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_number_flow_react.default, {
+		locales: locales ?? documentLang,
+		prefix: withLeadingSeparator(prefix),
+		suffix: withTrailingSeparator(suffix),
+		...props
+	});
+}
+//#endregion
+module.exports = NumberFlow;
+
+//# sourceMappingURL=number-flow.cjs.map

package/dist/components/number-flow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-flow.cjs","names":["BaseNumberFlow"],"sources":["../../src/components/number-flow.tsx"],"sourcesContent":["import BaseNumberFlow, { type NumberFlowProps } from '@number-flow/react'\nimport { useSyncExternalStore } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\n\nfunction subscribeToDocumentLang(onChange: () => void) {\n  if (typeof document === 'undefined') return () => {}\n  const observer = new MutationObserver(onChange)\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['lang'],\n  })\n  return () => observer.disconnect()\n}\n\nfunction getDocumentLang() {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nfunction useDocumentLang() {\n  return useSyncExternalStore(\n    subscribeToDocumentLang,\n    getDocumentLang,\n    () => undefined,\n  )\n}\n\nfunction withTrailingSeparator(suffix?: string) {\n  if (!suffix || /^\\s/.test(suffix)) return suffix\n  return `${NARROW_NBSP}${suffix}`\n}\n\nfunction withLeadingSeparator(prefix?: string) {\n  if (!prefix || /\\s$/.test(prefix)) return prefix\n  return `${prefix}${NARROW_NBSP}`\n}\n\nexport default function NumberFlow({\n  locales,\n  prefix,\n  suffix,\n  ...props\n}: NumberFlowProps) {\n  const documentLang = useDocumentLang()\n  return (\n    <BaseNumberFlow\n      locales={locales ?? documentLang}\n      prefix={withLeadingSeparator(prefix)}\n      suffix={withTrailingSeparator(suffix)}\n      {...props}\n    />\n  )\n}\n\nexport type { Format, NumberFlowProps } from '@number-flow/react'\n"],"mappings":";;;;;;;;AAIA,SAAS,wBAAwB,UAAsB;AACrD,KAAI,OAAO,aAAa,YAAa,cAAa;CAClD,MAAM,WAAW,IAAI,iBAAiB,SAAS;AAC/C,UAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,OAAO;EAC1B,CAAC;AACF,cAAa,SAAS,YAAY;;AAGpC,SAAS,kBAAkB;AACzB,QAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;;AAGvC,SAAS,kBAAkB;AACzB,SAAA,GAAA,MAAA,sBACE,yBACA,uBACM,KAAA,EACP;;AAGH,SAAS,sBAAsB,QAAiB;AAC9C,KAAI,CAAC,UAAU,MAAM,KAAK,OAAO,CAAE,QAAO;AAC1C,QAAO,IAAiB;;AAG1B,SAAS,qBAAqB,QAAiB;AAC7C,KAAI,CAAC,UAAU,MAAM,KAAK,OAAO,CAAE,QAAO;AAC1C,QAAO,GAAG;;AAGZ,SAAwB,WAAW,EACjC,SACA,QACA,QACA,GAAG,SACe;CAClB,MAAM,eAAe,iBAAiB;AACtC,QACE,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,SAAD;EACE,SAAS,WAAW;EACpB,QAAQ,qBAAqB,OAAO;EACpC,QAAQ,sBAAsB,OAAO;EACrC,GAAI;EACJ,CAAA"}

package/dist/components/number-flow.d.cts

@@ -0,0 +1,4 @@
+"use client";
+
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-DMJouddg.cjs";
+export { Format, NumberFlowProps, NumberFlow as default };

package/dist/components/number-flow.d.ts

@@ -0,0 +1,4 @@
+"use client";
+
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-DSbucQ_K.js";
+export { Format, NumberFlowProps, NumberFlow as default };

package/dist/components/number-flow.js

@@ -0,0 +1,42 @@
+"use client";
+import "../utils/chars.js";
+import { useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import BaseNumberFlow from "@number-flow/react";
+//#region src/components/number-flow.tsx
+function subscribeToDocumentLang(onChange) {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["lang"]
+	});
+	return () => observer.disconnect();
+}
+function getDocumentLang() {
+	return typeof document === "undefined" ? void 0 : document.documentElement.lang || void 0;
+}
+function useDocumentLang() {
+	return useSyncExternalStore(subscribeToDocumentLang, getDocumentLang, () => void 0);
+}
+function withTrailingSeparator(suffix) {
+	if (!suffix || /^\s/.test(suffix)) return suffix;
+	return ` ${suffix}`;
+}
+function withLeadingSeparator(prefix) {
+	if (!prefix || /\s$/.test(prefix)) return prefix;
+	return `${prefix} `;
+}
+function NumberFlow({ locales, prefix, suffix, ...props }) {
+	const documentLang = useDocumentLang();
+	return /* @__PURE__ */ jsx(BaseNumberFlow, {
+		locales: locales ?? documentLang,
+		prefix: withLeadingSeparator(prefix),
+		suffix: withTrailingSeparator(suffix),
+		...props
+	});
+}
+//#endregion
+export { NumberFlow as default };
+
+//# sourceMappingURL=number-flow.js.map

package/dist/components/number-flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-flow.js","names":[],"sources":["../../src/components/number-flow.tsx"],"sourcesContent":["import BaseNumberFlow, { type NumberFlowProps } from '@number-flow/react'\nimport { useSyncExternalStore } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\n\nfunction subscribeToDocumentLang(onChange: () => void) {\n  if (typeof document === 'undefined') return () => {}\n  const observer = new MutationObserver(onChange)\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['lang'],\n  })\n  return () => observer.disconnect()\n}\n\nfunction getDocumentLang() {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nfunction useDocumentLang() {\n  return useSyncExternalStore(\n    subscribeToDocumentLang,\n    getDocumentLang,\n    () => undefined,\n  )\n}\n\nfunction withTrailingSeparator(suffix?: string) {\n  if (!suffix || /^\\s/.test(suffix)) return suffix\n  return `${NARROW_NBSP}${suffix}`\n}\n\nfunction withLeadingSeparator(prefix?: string) {\n  if (!prefix || /\\s$/.test(prefix)) return prefix\n  return `${prefix}${NARROW_NBSP}`\n}\n\nexport default function NumberFlow({\n  locales,\n  prefix,\n  suffix,\n  ...props\n}: NumberFlowProps) {\n  const documentLang = useDocumentLang()\n  return (\n    <BaseNumberFlow\n      locales={locales ?? documentLang}\n      prefix={withLeadingSeparator(prefix)}\n      suffix={withTrailingSeparator(suffix)}\n      {...props}\n    />\n  )\n}\n\nexport type { Format, NumberFlowProps } from '@number-flow/react'\n"],"mappings":";;;;;;AAIA,SAAS,wBAAwB,UAAsB;AACrD,KAAI,OAAO,aAAa,YAAa,cAAa;CAClD,MAAM,WAAW,IAAI,iBAAiB,SAAS;AAC/C,UAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,OAAO;EAC1B,CAAC;AACF,cAAa,SAAS,YAAY;;AAGpC,SAAS,kBAAkB;AACzB,QAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;;AAGvC,SAAS,kBAAkB;AACzB,QAAO,qBACL,yBACA,uBACM,KAAA,EACP;;AAGH,SAAS,sBAAsB,QAAiB;AAC9C,KAAI,CAAC,UAAU,MAAM,KAAK,OAAO,CAAE,QAAO;AAC1C,QAAO,IAAiB;;AAG1B,SAAS,qBAAqB,QAAiB;AAC7C,KAAI,CAAC,UAAU,MAAM,KAAK,OAAO,CAAE,QAAO;AAC1C,QAAO,GAAG;;AAGZ,SAAwB,WAAW,EACjC,SACA,QACA,QACA,GAAG,SACe;CAClB,MAAM,eAAe,iBAAiB;AACtC,QACE,oBAAC,gBAAD;EACE,SAAS,WAAW;EACpB,QAAQ,qBAAqB,OAAO;EACpC,QAAQ,sBAAsB,OAAO;EACrC,GAAI;EACJ,CAAA"}

package/dist/components/on-off-button.cjs

@@ -0,0 +1,36 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/components/on-off-button.tsx
+function OnOffButton({ disabled, isOn, onClick, className }) {
+	const handleClick = (event) => {
+		event.stopPropagation();
+		onClick();
+	};
+	const onOfButtonClassName = (0, class_variance_authority.cva)("focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60", { variants: { isOn: {
+		true: "bg-base-success-soft text-success hover:bg-base-success-soft/80",
+		false: "border border-gray text-gray-light hover:bg-base-gray-soft"
+	} } });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": isOn ? "Turn off" : "Turn on",
+		"aria-pressed": isOn,
+		className: onOfButtonClassName({
+			isOn,
+			className
+		}),
+		disabled,
+		onClick: handleClick,
+		type: "button",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "block text-[16px]! leading-none",
+			name: "power_settings_new"
+		})
+	});
+}
+//#endregion
+exports.OnOffButton = OnOffButton;
+
+//# sourceMappingURL=on-off-button.cjs.map

package/dist/components/on-off-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-off-button.cjs","names":["MaterialSymbol"],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"power_settings_new\"\n      />\n    </button>\n  )\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;AAC5D,QAAM,iBAAiB;AACvB,WAAS;;CAGX,MAAM,uBAAA,GAAA,yBAAA,KACJ,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;EACR,EACF,EACF,CACF;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;GAAW,CAAC;EACzC;EACV,SAAS;EACT,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GACE,WAAU;GACV,MAAK;GACL,CAAA;EACK,CAAA"}

package/dist/components/on-off-button.d.cts

@@ -0,0 +1,20 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/on-off-button.d.ts
+interface OnOffButtonProps {
+  isOn: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+declare function OnOffButton({
+  disabled,
+  isOn,
+  onClick,
+  className
+}: OnOffButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OnOffButton };
+//# sourceMappingURL=on-off-button.d.cts.map

package/dist/components/on-off-button.d.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/on-off-button.d.ts
+interface OnOffButtonProps {
+  isOn: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+declare function OnOffButton({
+  disabled,
+  isOn,
+  onClick,
+  className
+}: OnOffButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OnOffButton };
+//# sourceMappingURL=on-off-button.d.ts.map

package/dist/components/on-off-button.js

@@ -0,0 +1,34 @@
+"use client";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/on-off-button.tsx
+function OnOffButton({ disabled, isOn, onClick, className }) {
+	const handleClick = (event) => {
+		event.stopPropagation();
+		onClick();
+	};
+	const onOfButtonClassName = cva("focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60", { variants: { isOn: {
+		true: "bg-base-success-soft text-success hover:bg-base-success-soft/80",
+		false: "border border-gray text-gray-light hover:bg-base-gray-soft"
+	} } });
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isOn ? "Turn off" : "Turn on",
+		"aria-pressed": isOn,
+		className: onOfButtonClassName({
+			isOn,
+			className
+		}),
+		disabled,
+		onClick: handleClick,
+		type: "button",
+		children: /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "block text-[16px]! leading-none",
+			name: "power_settings_new"
+		})
+	});
+}
+//#endregion
+export { OnOffButton };
+
+//# sourceMappingURL=on-off-button.js.map

package/dist/components/on-off-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-off-button.js","names":[],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"power_settings_new\"\n      />\n    </button>\n  )\n}\n"],"mappings":";;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;AAC5D,QAAM,iBAAiB;AACvB,WAAS;;CAGX,MAAM,sBAAsB,IAC1B,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;EACR,EACF,EACF,CACF;AAED,QACE,oBAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;GAAW,CAAC;EACzC;EACV,SAAS;EACT,MAAK;YAEL,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;GACL,CAAA;EACK,CAAA"}

package/dist/components/onboarding-layout.cjs

@@ -0,0 +1,68 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/onboarding-layout.tsx
+const OnboardingLayout = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col gap-6", className),
+		...rest
+	});
+};
+/**
+* Top section: typically wraps the title row, optional description, and a
+* progress bar.
+*/
+const OnboardingLayoutHeader = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col gap-3 pt-4", className),
+		...rest
+	});
+};
+/** Text-only group inside the header (title row + description). */
+const OnboardingLayoutHeading = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col 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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-between", className),
+		...rest
+	});
+};
+const OnboardingLayoutTitle = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		className: (0, cnfast.cn)("text-lg font-bold text-gray", className),
+		...rest
+	});
+};
+const OnboardingLayoutDescription = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: (0, cnfast.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-between", className),
+		...rest
+	});
+};
+//#endregion
+exports.OnboardingLayout = OnboardingLayout;
+exports.OnboardingLayoutDescription = OnboardingLayoutDescription;
+exports.OnboardingLayoutFooter = OnboardingLayoutFooter;
+exports.OnboardingLayoutHeader = OnboardingLayoutHeader;
+exports.OnboardingLayoutHeading = OnboardingLayoutHeading;
+exports.OnboardingLayoutTitle = OnboardingLayoutTitle;
+exports.OnboardingLayoutTitleRow = OnboardingLayoutTitleRow;
+
+//# sourceMappingURL=onboarding-layout.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-layout.cjs","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 <div className={cn('flex flex-col gap-6', className)} {...rest} />\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 <div className={cn('flex flex-col gap-3 pt-4', className)} {...rest} />\n}\n\n/** Text-only group inside the header (title row + description). */\nconst OnboardingLayoutHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-1', className)} {...rest} />\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;AACjC,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;EAAE,GAAI;EAAQ,CAAA;;;;;;AAO3E,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;AACjC,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,4BAA4B,UAAU;EAAE,GAAI;EAAQ,CAAA;;;AAIhF,MAAM,2BAA2B,EAC/B,WACA,GAAG,WAC8B;AACjC,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;EAAE,GAAI;EAAQ,CAAA;;;AAI3E,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;AACjC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC6B;AAChC,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,+BAA+B,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAI7E,MAAM,+BAA+B,EACnC,WACA,GAAG,WAC4B;AAC/B,QAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EAAE,GAAI;EAAQ,CAAA;;;;;;AAO7E,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;AACjC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA"}

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

@@ -0,0 +1,46 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/onboarding-layout.d.ts
+declare const OnboardingLayout: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Top section: typically wraps the title row, optional description, and a
+ * progress bar.
+ */
+declare const OnboardingLayoutHeader: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/** Text-only group inside the header (title row + description). */
+declare const OnboardingLayoutHeading: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.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">) => _$react_jsx_runtime0.JSX.Element;
+declare const OnboardingLayoutTitle: ({
+  className,
+  ...rest
+}: React.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+declare const OnboardingLayoutDescription: ({
+  className,
+  ...rest
+}: React.ComponentProps<"p">) => _$react_jsx_runtime0.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">) => _$react_jsx_runtime0.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,46 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/onboarding-layout.d.ts
+declare const OnboardingLayout: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Top section: typically wraps the title row, optional description, and a
+ * progress bar.
+ */
+declare const OnboardingLayoutHeader: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+/** Text-only group inside the header (title row + description). */
+declare const OnboardingLayoutHeading: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.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">) => _$react_jsx_runtime0.JSX.Element;
+declare const OnboardingLayoutTitle: ({
+  className,
+  ...rest
+}: React.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+declare const OnboardingLayoutDescription: ({
+  className,
+  ...rest
+}: React.ComponentProps<"p">) => _$react_jsx_runtime0.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">) => _$react_jsx_runtime0.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-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-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-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 <div className={cn('flex flex-col gap-6', className)} {...rest} />\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 <div className={cn('flex flex-col gap-3 pt-4', className)} {...rest} />\n}\n\n/** Text-only group inside the header (title row + description). */\nconst OnboardingLayoutHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-1', className)} {...rest} />\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;AACjC,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAQ,CAAA;;;;;;AAO3E,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;AACjC,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,4BAA4B,UAAU;EAAE,GAAI;EAAQ,CAAA;;;AAIhF,MAAM,2BAA2B,EAC/B,WACA,GAAG,WAC8B;AACjC,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAQ,CAAA;;;AAI3E,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;AACjC,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC6B;AAChC,QACE,oBAAC,MAAD;EAAI,WAAW,GAAG,+BAA+B,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAI7E,MAAM,+BAA+B,EACnC,WACA,GAAG,WAC4B;AAC/B,QAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,2BAA2B,UAAU;EAAE,GAAI;EAAQ,CAAA;;;;;;AAO7E,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;AACjC,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA"}

package/dist/components/page-header.cjs

@@ -0,0 +1,50 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.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,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,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,UAAU;CAC1D,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EAAgB,MAAK,gBAAiB,CAAA;CAC5C,CAAA,CAEZ;AACD,qBAAqB,cAAc;AAEnC,MAAM,mBAAmB,EACvB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;CACE,YAAA,GAAA,OAAA,IAAc,+CAA+C,UAAU;CACvE,GAAI;CACJ,CAAA;AAKJ,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YACyB;AAC5B,SAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE,EACE,YAAA,GAAA,OAAA,IACE,mEACA,UACD,EACF,EACD,MACD;EACF,CAAC;;AAEJ,kBAAkB,cAAc"}