@epilot/spark-ui 0.10.0

package/dist/components/message-scroller.cjs

@@ -0,0 +1,73 @@
+"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");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
+let cnfast = require("cnfast");
+//#region src/components/message-scroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Root, {
+		"data-slot": "message-scroller",
+		className: (0, cnfast.cn)("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+		...props
+	});
+}
+function MessageScrollerViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: (0, cnfast.cn)("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar", className),
+		...props
+	});
+}
+function MessageScrollerContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Content, {
+		"data-slot": "message-scroller-content",
+		className: (0, cnfast.cn)("flex h-max min-h-full flex-col gap-8", className),
+		...props
+	});
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: (0, cnfast.cn)("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		...props
+	});
+}
+function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		direction,
+		className: (0, cnfast.cn)("absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2", className),
+		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
+			styleVariant,
+			color,
+			size
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, { name: direction === "end" ? "arrow_downward" : "arrow_upward" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+//#endregion
+exports.MessageScroller = MessageScroller;
+exports.MessageScrollerButton = MessageScrollerButton;
+exports.MessageScrollerContent = MessageScrollerContent;
+exports.MessageScrollerItem = MessageScrollerItem;
+exports.MessageScrollerProvider = MessageScrollerProvider;
+exports.MessageScrollerViewport = MessageScrollerViewport;
+exports.useMessageScroller = _shadcn_react_message_scroller.useMessageScroller;
+exports.useMessageScrollerScrollable = _shadcn_react_message_scroller.useMessageScrollerScrollable;
+exports.useMessageScrollerVisibility = _shadcn_react_message_scroller.useMessageScrollerVisibility;
+
+//# sourceMappingURL=message-scroller.cjs.map

package/dist/components/message-scroller.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.cjs","names":["MessageScrollerPrimitive","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n  return (\n    <MessageScrollerPrimitive.Item\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,wBACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;AACxD;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,+KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message-scroller.d.cts

@@ -0,0 +1,38 @@
+"use client";
+
+import { ButtonProps } from "./button.cjs";
+import * as React$1 from "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+
+//#region src/components/message-scroller.d.ts
+declare function MessageScrollerProvider(props: React$1.ComponentProps<typeof MessageScroller$1.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScroller({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerViewport({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Viewport>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerContent({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Content>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerItem({
+  className,
+  scrollAnchor,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Item>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerButton({
+  direction,
+  className,
+  children,
+  render,
+  styleVariant,
+  color,
+  size,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Button> & Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
+//# sourceMappingURL=message-scroller.d.cts.map

package/dist/components/message-scroller.d.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { ButtonProps } from "./button.js";
+import * as React$1 from "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+
+//#region src/components/message-scroller.d.ts
+declare function MessageScrollerProvider(props: React$1.ComponentProps<typeof MessageScroller$1.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScroller({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerViewport({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Viewport>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerContent({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Content>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerItem({
+  className,
+  scrollAnchor,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Item>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerButton({
+  direction,
+  className,
+  children,
+  render,
+  styleVariant,
+  color,
+  size,
+  ...props
+}: React$1.ComponentProps<typeof MessageScroller$1.Button> & Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
+//# sourceMappingURL=message-scroller.d.ts.map

package/dist/components/message-scroller.js

@@ -0,0 +1,62 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Button } from "./button.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/message-scroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
+		"data-slot": "message-scroller",
+		className: cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+		...props
+	});
+}
+function MessageScrollerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: cn("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar", className),
+		...props
+	});
+}
+function MessageScrollerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Content, {
+		"data-slot": "message-scroller-content",
+		className: cn("flex h-max min-h-full flex-col gap-8", className),
+		...props
+	});
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		...props
+	});
+}
+function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		direction,
+		className: cn("absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2", className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			styleVariant,
+			color,
+			size
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MaterialSymbol, { name: direction === "end" ? "arrow_downward" : "arrow_upward" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
+
+//# sourceMappingURL=message-scroller.js.map

package/dist/components/message-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.js","names":["MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n  return (\n    <MessageScrollerPrimitive.Item\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;AAWA,SAAS,wBACP,OACA;CACA,OAAO,oBAACA,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;AACxD;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,+KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message.cjs

@@ -0,0 +1,60 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let 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;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/message.d.cts

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

package/dist/components/message.d.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/message.d.ts
+declare function MessageGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Message({
+  className,
+  align,
+  ...props
+}: React$1.ComponentProps<'div'> & {
+  align?: 'start' | 'end';
+}): import("react/jsx-runtime").JSX.Element;
+declare function MessageAvatar({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function MessageContent({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function MessageHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function MessageFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").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;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;CAC5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/metering-row.cjs

@@ -0,0 +1,42 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,aAAW;EACX,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,4dACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GAAgB,WAAU;GAAc,MAAM;EAAO,CAAA;CACjD,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

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

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import { Tone } from "../lib/tones.js";
+
+//#region src/components/metering-row.d.ts
+declare const MeteringRow: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"div"> & {
+  tone: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MeteringRowIcon: ({
+  className,
+  icon,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  icon: MaterialSymbolIconName;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MeteringRowLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const MeteringRowValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").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;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,SAAS;EACxD,aAAW;EACX,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,QAAD;EACE,WAAW,GACT,4dACA,SACF;EACA,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAM;EAAO,CAAA;CACjD,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}