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

package/dist/components/message.cjs

@@ -0,0 +1,60 @@
+"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 cnfast = require("cnfast");
+//#region src/components/message.tsx
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "message-group",
+		className: (0, cnfast.cn)("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+function Message({ className, align = "start", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "message",
+		"data-align": align,
+		className: (0, cnfast.cn)("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "message-avatar",
+		className: (0, cnfast.cn)("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "message-content",
+		className: (0, cnfast.cn)("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "message-header",
+		className: (0, cnfast.cn)("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "message-footer",
+		className: (0, cnfast.cn)("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
+		...props
+	});
+}
+//#endregion
+exports.Message = Message;
+exports.MessageAvatar = MessageAvatar;
+exports.MessageContent = MessageContent;
+exports.MessageFooter = MessageFooter;
+exports.MessageGroup = MessageGroup;
+exports.MessageHeader = MessageHeader;
+
+//# sourceMappingURL=message.cjs.map

package/dist/components/message.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.cjs","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Message({\n  className,\n  align = 'start',\n  ...props\n}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn(\n        'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\n        'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        'flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageGroup,\n  MessageHeader,\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;AAC5D,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,8FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;AAC5E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,6HACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wKACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/components/message.d.cts

@@ -0,0 +1,36 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/components/message.d.ts
+declare function MessageGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function Message({
+  className,
+  align,
+  ...props
+}: React$1.ComponentProps<'div'> & {
+  align?: 'start' | 'end';
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MessageAvatar({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function MessageContent({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function MessageHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function MessageFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+//# sourceMappingURL=message.d.cts.map

package/dist/components/message.d.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/message.d.ts
+declare function MessageGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function Message({
+  className,
+  align,
+  ...props
+}: React$1.ComponentProps<'div'> & {
+  align?: 'start' | 'end';
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MessageAvatar({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function MessageContent({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function MessageHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function MessageFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+//# sourceMappingURL=message.d.ts.map

package/dist/components/message.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/message.tsx
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+function Message({ className, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message",
+		"data-align": align,
+		className: cn("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-avatar",
+		className: cn("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-content",
+		className: cn("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-header",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
+		...props
+	});
+}
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+
+//# sourceMappingURL=message.js.map

package/dist/components/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Message({\n  className,\n  align = 'start',\n  ...props\n}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn(\n        'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\n        'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        'flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageGroup,\n  MessageHeader,\n}\n"],"mappings":";;;;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;AAC5E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6HACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wKACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/components/metering-row.cjs

@@ -0,0 +1,43 @@
+"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 cnfast = require("cnfast");
+//#region src/components/metering-row.tsx
+const MeteringRow = ({ className, tone, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("group flex items-center gap-3", className),
+		"data-tone": tone,
+		...rest
+	});
+};
+const MeteringRowIcon = ({ className, icon, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning", className),
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "text-[18px]",
+			name: icon
+		})
+	});
+};
+const MeteringRowLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("flex-1 text-sm text-gray", className),
+		...rest
+	});
+};
+const MeteringRowValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning", className),
+		...rest
+	});
+};
+//#endregion
+exports.MeteringRow = MeteringRow;
+exports.MeteringRowIcon = MeteringRowIcon;
+exports.MeteringRowLabel = MeteringRowLabel;
+exports.MeteringRowValue = MeteringRowValue;
+
+//# sourceMappingURL=metering-row.cjs.map

package/dist/components/metering-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metering-row.cjs","names":["MaterialSymbol"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <div\n      className={cn('group flex items-center gap-3', className)}\n      data-tone={tone}\n      {...rest}\n    />\n  )\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  return (\n    <span\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[18px]\" name={icon} />\n    </span>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;;AAOA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,UAAU;EACzD,aAAW;EACX,GAAI;EACJ,CAAA;;AAIN,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,4dACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GAAgB,WAAU;GAAc,MAAM;GAAQ,CAAA;EACjD,CAAA;;AAIX,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;AAClC,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAI5E,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;AAClC,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/components/metering-row.d.cts

@@ -0,0 +1,32 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
+import { t as Tone } from "../tones-DjgKOX3s.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/metering-row.d.ts
+declare const MeteringRow: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"div"> & {
+  tone: Tone;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MeteringRowIcon: ({
+  className,
+  icon,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  icon: MaterialSymbolIconName;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MeteringRowLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const MeteringRowValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue };
+//# sourceMappingURL=metering-row.d.cts.map

package/dist/components/metering-row.d.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import { t as Tone } from "../tones-DyCkL71h.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/metering-row.d.ts
+declare const MeteringRow: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"div"> & {
+  tone: Tone;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MeteringRowIcon: ({
+  className,
+  icon,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  icon: MaterialSymbolIconName;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MeteringRowLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const MeteringRowValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue };
+//# sourceMappingURL=metering-row.d.ts.map

package/dist/components/metering-row.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/metering-row.tsx
+const MeteringRow = ({ className, tone, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group flex items-center gap-3", className),
+		"data-tone": tone,
+		...rest
+	});
+};
+const MeteringRowIcon = ({ className, icon, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning", className),
+		...rest,
+		children: /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "text-[18px]",
+			name: icon
+		})
+	});
+};
+const MeteringRowLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex-1 text-sm text-gray", className),
+		...rest
+	});
+};
+const MeteringRowValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning", className),
+		...rest
+	});
+};
+//#endregion
+export { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue };
+
+//# sourceMappingURL=metering-row.js.map

package/dist/components/metering-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <div\n      className={cn('group flex items-center gap-3', className)}\n      data-tone={tone}\n      {...rest}\n    />\n  )\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  return (\n    <span\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[18px]\" name={icon} />\n    </span>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;AAOA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;AACJ,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,UAAU;EACzD,aAAW;EACX,GAAI;EACJ,CAAA;;AAIN,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;AACJ,QACE,oBAAC,QAAD;EACE,WAAW,GACT,4dACA,UACD;EACD,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAM;GAAQ,CAAA;EACjD,CAAA;;AAIX,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAI5E,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,UACD;EACD,GAAI;EACJ,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"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,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}

package/dist/components/money-saved-block.d.cts

@@ -0,0 +1,57 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/money-saved-block.d.ts
+declare const MoneySavedContainer: ({
+  children,
+  ariaLabel
+}: {
+  children: React.ReactNode; /** Override the accessible label for the container. Defaults to `"Money saved today"`. */
+  ariaLabel?: string;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedContent: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedTitle: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedValue: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedDelta: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedGaugeContainer: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedGaugeContent: ({
+  autarkyProgress,
+  autarkyLabel,
+  autarkyCaption,
+  gaugeWidth,
+  gaugeHeight,
+  gaugeArcPath,
+  gaugeStrokeWidth
+}: {
+  autarkyProgress: number;
+  autarkyLabel: string; /** Override the caption shown beneath the gauge. Defaults to `"Autarky"`. */
+  autarkyCaption?: React.ReactNode;
+  gaugeWidth: number;
+  gaugeHeight: number;
+  gaugeArcPath: string;
+  gaugeStrokeWidth: number;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MoneySavedContainer, MoneySavedContent, MoneySavedDelta, MoneySavedGaugeContainer, MoneySavedGaugeContent, MoneySavedTitle, MoneySavedValue };
+//# sourceMappingURL=money-saved-block.d.cts.map

package/dist/components/money-saved-block.d.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/money-saved-block.d.ts
+declare const MoneySavedContainer: ({
+  children,
+  ariaLabel
+}: {
+  children: React.ReactNode; /** Override the accessible label for the container. Defaults to `"Money saved today"`. */
+  ariaLabel?: string;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedContent: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedTitle: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedValue: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedDelta: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedGaugeContainer: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const MoneySavedGaugeContent: ({
+  autarkyProgress,
+  autarkyLabel,
+  autarkyCaption,
+  gaugeWidth,
+  gaugeHeight,
+  gaugeArcPath,
+  gaugeStrokeWidth
+}: {
+  autarkyProgress: number;
+  autarkyLabel: string; /** Override the caption shown beneath the gauge. Defaults to `"Autarky"`. */
+  autarkyCaption?: React.ReactNode;
+  gaugeWidth: number;
+  gaugeHeight: number;
+  gaugeArcPath: string;
+  gaugeStrokeWidth: number;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MoneySavedContainer, MoneySavedContent, MoneySavedDelta, MoneySavedGaugeContainer, MoneySavedGaugeContent, MoneySavedTitle, MoneySavedValue };
+//# sourceMappingURL=money-saved-block.d.ts.map