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

package/dist/components/toast.cjs

@@ -0,0 +1,99 @@
+"use client";
+"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_spinner = require("./spinner.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let sonner = require("sonner");
+let cnfast = require("cnfast");
+//#region src/components/toast.tsx
+const ICONS = Object.fromEntries(Object.entries({
+	success: {
+		name: "check_circle",
+		className: "text-success-light"
+	},
+	info: {
+		name: "info",
+		className: "text-info-light"
+	},
+	warning: {
+		name: "warning",
+		className: "text-warning-light"
+	},
+	error: {
+		name: "cancel",
+		className: "text-error-light"
+	}
+}).map(([type, icon]) => [type, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+	className: (0, cnfast.cn)("inline-flex shrink-0 items-center [--spark-icon-size:16px]", icon.className),
+	name: icon.name
+}, type)]));
+ICONS.loading = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_spinner.Spinner, {
+	"aria-hidden": "true",
+	className: "flex text-gray-11",
+	label: "",
+	role: "presentation",
+	size: "sm"
+});
+const STYLE_VARS = {
+	"--normal-bg": "var(--color-gray-2)",
+	"--normal-text": "var(--color-gray-12)",
+	"--normal-border": "var(--color-gray-a1)",
+	"--border-radius": "var(--radius-lg)",
+	"--gray1": "var(--color-gray-1)",
+	"--gray2": "var(--color-gray-2)",
+	"--gray3": "var(--color-gray-3)",
+	"--gray4": "var(--color-gray-4)",
+	"--gray5": "var(--color-gray-5)",
+	"--gray11": "var(--color-gray-11)",
+	"--gray12": "var(--color-gray-12)",
+	"--toast-close-button-start": "unset",
+	"--toast-close-button-end": "0",
+	"--toast-close-button-transform": "translate(35%, -35%)",
+	"--success-bg": "var(--color-green-2)",
+	"--success-border": "transparent",
+	"--success-text": "var(--color-green-11)",
+	"--info-bg": "var(--color-blue-2)",
+	"--info-border": "transparent",
+	"--info-text": "var(--color-blue-11)",
+	"--warning-bg": "var(--color-orange-2)",
+	"--warning-border": "transparent",
+	"--warning-text": "var(--color-orange-11)",
+	"--error-bg": "var(--color-red-2)",
+	"--error-border": "transparent",
+	"--error-text": "var(--color-red-11)"
+};
+const CLASS_NAMES = {
+	description: "text-gray-11! [[data-rich-colors=true][data-type]_&]:text-inherit!",
+	actionButton: "bg-spark-9! text-spark-contrast! hover:bg-spark-10! rounded-md!",
+	cancelButton: "bg-gray-a3! text-gray-12! hover:bg-gray-a4! rounded-md!"
+};
+const Toaster = ({ className, closeButton = true, icons, richColors = true, style, toastOptions, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, {
+	className: (0, cnfast.cn)("toaster group", className),
+	closeButton,
+	icons: {
+		...ICONS,
+		...icons
+	},
+	richColors,
+	style: {
+		...STYLE_VARS,
+		...style
+	},
+	toastOptions: {
+		...toastOptions,
+		classNames: {
+			...CLASS_NAMES,
+			...toastOptions?.classNames
+		}
+	},
+	...props
+});
+//#endregion
+exports.Toaster = Toaster;
+exports.toast = sonner.toast;
+
+//# sourceMappingURL=toast.cjs.map

package/dist/components/toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.cjs","names":["MaterialSymbol","Spinner","Sonner"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Toaster as Sonner, toast, type ToasterProps } from 'sonner'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Spinner } from './spinner'\n\n// sonner's icon slot is a fixed 16px box that does not scale, so the glyphs\n// are pinned to 16px rather than the usual --spark-scaling formula\nconst TOAST_ICONS: Record<\n  'success' | 'info' | 'warning' | 'error',\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  success: { name: 'check_circle', className: 'text-success-light' },\n  info: { name: 'info', className: 'text-info-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  error: { name: 'cancel', className: 'text-error-light' },\n}\n\nconst ICONS: ToasterProps['icons'] = Object.fromEntries(\n  Object.entries(TOAST_ICONS).map(([type, icon]) => [\n    type,\n    <MaterialSymbol\n      className={cn(\n        'inline-flex shrink-0 items-center [--spark-icon-size:16px]',\n        icon.className,\n      )}\n      key={type}\n      name={icon.name}\n    />,\n  ]),\n)\n// decorative: the toast itself announces the loading message, so the spinner\n// must not add its own status live region; `flex` kills the inline baseline\n// gap that pushes it off-center inside sonner's loader wrapper\nICONS.loading = (\n  <Spinner\n    aria-hidden=\"true\"\n    className=\"flex text-gray-11\"\n    label=\"\"\n    role=\"presentation\"\n    size=\"sm\"\n  />\n)\n\nconst STYLE_VARS = {\n  '--normal-bg': 'var(--color-gray-2)',\n  '--normal-text': 'var(--color-gray-12)',\n  '--normal-border': 'var(--color-gray-a1)',\n  '--border-radius': 'var(--radius-lg)',\n  // sonner's own gray scale (close button, cancel button) — remapped so it\n  // follows the spark theme instead of sonner's hardcoded light-only values\n  '--gray1': 'var(--color-gray-1)',\n  '--gray2': 'var(--color-gray-2)',\n  '--gray3': 'var(--color-gray-3)',\n  '--gray4': 'var(--color-gray-4)',\n  '--gray5': 'var(--color-gray-5)',\n  '--gray11': 'var(--color-gray-11)',\n  '--gray12': 'var(--color-gray-12)',\n  // close button on the top-right corner (sonner defaults to top-left in ltr)\n  '--toast-close-button-start': 'unset',\n  '--toast-close-button-end': '0',\n  '--toast-close-button-transform': 'translate(35%, -35%)',\n  // rich-color palette — opaque radix steps (bg 2, text 11) so floating\n  // toasts don't let page content bleed through the way alpha `-soft`\n  // tokens would; borders off per design\n  '--success-bg': 'var(--color-green-2)',\n  '--success-border': 'transparent',\n  '--success-text': 'var(--color-green-11)',\n  '--info-bg': 'var(--color-blue-2)',\n  '--info-border': 'transparent',\n  '--info-text': 'var(--color-blue-11)',\n  '--warning-bg': 'var(--color-orange-2)',\n  '--warning-border': 'transparent',\n  '--warning-text': 'var(--color-orange-11)',\n  '--error-bg': 'var(--color-red-2)',\n  '--error-border': 'transparent',\n  '--error-text': 'var(--color-red-11)',\n} as React.CSSProperties\n\nconst CLASS_NAMES = {\n  // sonner hardcodes the description color (#3f3f3f) and its styles are\n  // unlayered, so only important utilities win; typed rich toasts restore\n  // the tinted inherit (untyped toasts carry data-rich-colors too, so the\n  // guard needs both attributes)\n  description:\n    'text-gray-11! [[data-rich-colors=true][data-type]_&]:text-inherit!',\n  actionButton:\n    'bg-spark-9! text-spark-contrast! hover:bg-spark-10! rounded-md!',\n  cancelButton: 'bg-gray-a3! text-gray-12! hover:bg-gray-a4! rounded-md!',\n}\n\n// consumer props merge with (not replace) the spark theming — React itself\n// would wholesale-replace object props like `style`\nconst Toaster = ({\n  className,\n  closeButton = true,\n  icons,\n  richColors = true,\n  style,\n  toastOptions,\n  ...props\n}: ToasterProps) => (\n  <Sonner\n    className={cn('toaster group', className)}\n    closeButton={closeButton}\n    icons={{ ...ICONS, ...icons }}\n    richColors={richColors}\n    style={{ ...STYLE_VARS, ...style }}\n    toastOptions={{\n      ...toastOptions,\n      classNames: { ...CLASS_NAMES, ...toastOptions?.classNames },\n    }}\n    {...props}\n  />\n)\n\nexport { Toaster, toast }\nexport type { ToasterProps }\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,QAA+B,OAAO,YAC1C,OAAO,QAAQ;CAPf,SAAS;EAAE,MAAM;EAAgB,WAAW;EAAsB;CAClE,MAAM;EAAE,MAAM;EAAQ,WAAW;EAAmB;CACpD,SAAS;EAAE,MAAM;EAAW,WAAW;EAAsB;CAC7D,OAAO;EAAE,MAAM;EAAU,WAAW;EAAoB;CAI9B,CAAC,CAAC,KAAK,CAAC,MAAM,UAAU,CAChD,MACA,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;CACE,YAAA,GAAA,OAAA,IACE,8DACA,KAAK,UACN;CAED,MAAM,KAAK;CACX,EAFK,KAEL,CACH,CAAC,CACH;AAID,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAACC,2BAAAA,SAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAM;CACN,MAAK;CACL,MAAK;CACL,CAAA;AAGJ,MAAM,aAAa;CACjB,eAAe;CACf,iBAAiB;CACjB,mBAAmB;CACnB,mBAAmB;CAGnB,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,YAAY;CACZ,YAAY;CAEZ,8BAA8B;CAC9B,4BAA4B;CAC5B,kCAAkC;CAIlC,gBAAgB;CAChB,oBAAoB;CACpB,kBAAkB;CAClB,aAAa;CACb,iBAAiB;CACjB,eAAe;CACf,gBAAgB;CAChB,oBAAoB;CACpB,kBAAkB;CAClB,cAAc;CACd,kBAAkB;CAClB,gBAAgB;CACjB;AAED,MAAM,cAAc;CAKlB,aACE;CACF,cACE;CACF,cAAc;CACf;AAID,MAAM,WAAW,EACf,WACA,cAAc,MACd,OACA,aAAa,MACb,OACA,cACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAACC,OAAAA,SAAD;CACE,YAAA,GAAA,OAAA,IAAc,iBAAiB,UAAU;CAC5B;CACb,OAAO;EAAE,GAAG;EAAO,GAAG;EAAO;CACjB;CACZ,OAAO;EAAE,GAAG;EAAY,GAAG;EAAO;CAClC,cAAc;EACZ,GAAG;EACH,YAAY;GAAE,GAAG;GAAa,GAAG,cAAc;GAAY;EAC5D;CACD,GAAI;CACJ,CAAA"}

package/dist/components/toast.d.cts

@@ -0,0 +1,18 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ToasterProps, toast } from "sonner";
+
+//#region src/components/toast.d.ts
+declare const Toaster: ({
+  className,
+  closeButton,
+  icons,
+  richColors,
+  style,
+  toastOptions,
+  ...props
+}: ToasterProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Toaster, type ToasterProps, toast };
+//# sourceMappingURL=toast.d.cts.map

package/dist/components/toast.d.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ToasterProps, toast } from "sonner";
+
+//#region src/components/toast.d.ts
+declare const Toaster: ({
+  className,
+  closeButton,
+  icons,
+  richColors,
+  style,
+  toastOptions,
+  ...props
+}: ToasterProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Toaster, type ToasterProps, toast };
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast.js

@@ -0,0 +1,95 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Spinner } from "./spinner.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Toaster as Toaster$1, toast } from "sonner";
+//#region src/components/toast.tsx
+const ICONS = Object.fromEntries(Object.entries({
+	success: {
+		name: "check_circle",
+		className: "text-success-light"
+	},
+	info: {
+		name: "info",
+		className: "text-info-light"
+	},
+	warning: {
+		name: "warning",
+		className: "text-warning-light"
+	},
+	error: {
+		name: "cancel",
+		className: "text-error-light"
+	}
+}).map(([type, icon]) => [type, /* @__PURE__ */ jsx(MaterialSymbol, {
+	className: cn("inline-flex shrink-0 items-center [--spark-icon-size:16px]", icon.className),
+	name: icon.name
+}, type)]));
+ICONS.loading = /* @__PURE__ */ jsx(Spinner, {
+	"aria-hidden": "true",
+	className: "flex text-gray-11",
+	label: "",
+	role: "presentation",
+	size: "sm"
+});
+const STYLE_VARS = {
+	"--normal-bg": "var(--color-gray-2)",
+	"--normal-text": "var(--color-gray-12)",
+	"--normal-border": "var(--color-gray-a1)",
+	"--border-radius": "var(--radius-lg)",
+	"--gray1": "var(--color-gray-1)",
+	"--gray2": "var(--color-gray-2)",
+	"--gray3": "var(--color-gray-3)",
+	"--gray4": "var(--color-gray-4)",
+	"--gray5": "var(--color-gray-5)",
+	"--gray11": "var(--color-gray-11)",
+	"--gray12": "var(--color-gray-12)",
+	"--toast-close-button-start": "unset",
+	"--toast-close-button-end": "0",
+	"--toast-close-button-transform": "translate(35%, -35%)",
+	"--success-bg": "var(--color-green-2)",
+	"--success-border": "transparent",
+	"--success-text": "var(--color-green-11)",
+	"--info-bg": "var(--color-blue-2)",
+	"--info-border": "transparent",
+	"--info-text": "var(--color-blue-11)",
+	"--warning-bg": "var(--color-orange-2)",
+	"--warning-border": "transparent",
+	"--warning-text": "var(--color-orange-11)",
+	"--error-bg": "var(--color-red-2)",
+	"--error-border": "transparent",
+	"--error-text": "var(--color-red-11)"
+};
+const CLASS_NAMES = {
+	description: "text-gray-11! [[data-rich-colors=true][data-type]_&]:text-inherit!",
+	actionButton: "bg-spark-9! text-spark-contrast! hover:bg-spark-10! rounded-md!",
+	cancelButton: "bg-gray-a3! text-gray-12! hover:bg-gray-a4! rounded-md!"
+};
+const Toaster = ({ className, closeButton = true, icons, richColors = true, style, toastOptions, ...props }) => /* @__PURE__ */ jsx(Toaster$1, {
+	className: cn("toaster group", className),
+	closeButton,
+	icons: {
+		...ICONS,
+		...icons
+	},
+	richColors,
+	style: {
+		...STYLE_VARS,
+		...style
+	},
+	toastOptions: {
+		...toastOptions,
+		classNames: {
+			...CLASS_NAMES,
+			...toastOptions?.classNames
+		}
+	},
+	...props
+});
+//#endregion
+export { Toaster, toast };
+
+//# sourceMappingURL=toast.js.map

package/dist/components/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":["Sonner"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Toaster as Sonner, toast, type ToasterProps } from 'sonner'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Spinner } from './spinner'\n\n// sonner's icon slot is a fixed 16px box that does not scale, so the glyphs\n// are pinned to 16px rather than the usual --spark-scaling formula\nconst TOAST_ICONS: Record<\n  'success' | 'info' | 'warning' | 'error',\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  success: { name: 'check_circle', className: 'text-success-light' },\n  info: { name: 'info', className: 'text-info-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  error: { name: 'cancel', className: 'text-error-light' },\n}\n\nconst ICONS: ToasterProps['icons'] = Object.fromEntries(\n  Object.entries(TOAST_ICONS).map(([type, icon]) => [\n    type,\n    <MaterialSymbol\n      className={cn(\n        'inline-flex shrink-0 items-center [--spark-icon-size:16px]',\n        icon.className,\n      )}\n      key={type}\n      name={icon.name}\n    />,\n  ]),\n)\n// decorative: the toast itself announces the loading message, so the spinner\n// must not add its own status live region; `flex` kills the inline baseline\n// gap that pushes it off-center inside sonner's loader wrapper\nICONS.loading = (\n  <Spinner\n    aria-hidden=\"true\"\n    className=\"flex text-gray-11\"\n    label=\"\"\n    role=\"presentation\"\n    size=\"sm\"\n  />\n)\n\nconst STYLE_VARS = {\n  '--normal-bg': 'var(--color-gray-2)',\n  '--normal-text': 'var(--color-gray-12)',\n  '--normal-border': 'var(--color-gray-a1)',\n  '--border-radius': 'var(--radius-lg)',\n  // sonner's own gray scale (close button, cancel button) — remapped so it\n  // follows the spark theme instead of sonner's hardcoded light-only values\n  '--gray1': 'var(--color-gray-1)',\n  '--gray2': 'var(--color-gray-2)',\n  '--gray3': 'var(--color-gray-3)',\n  '--gray4': 'var(--color-gray-4)',\n  '--gray5': 'var(--color-gray-5)',\n  '--gray11': 'var(--color-gray-11)',\n  '--gray12': 'var(--color-gray-12)',\n  // close button on the top-right corner (sonner defaults to top-left in ltr)\n  '--toast-close-button-start': 'unset',\n  '--toast-close-button-end': '0',\n  '--toast-close-button-transform': 'translate(35%, -35%)',\n  // rich-color palette — opaque radix steps (bg 2, text 11) so floating\n  // toasts don't let page content bleed through the way alpha `-soft`\n  // tokens would; borders off per design\n  '--success-bg': 'var(--color-green-2)',\n  '--success-border': 'transparent',\n  '--success-text': 'var(--color-green-11)',\n  '--info-bg': 'var(--color-blue-2)',\n  '--info-border': 'transparent',\n  '--info-text': 'var(--color-blue-11)',\n  '--warning-bg': 'var(--color-orange-2)',\n  '--warning-border': 'transparent',\n  '--warning-text': 'var(--color-orange-11)',\n  '--error-bg': 'var(--color-red-2)',\n  '--error-border': 'transparent',\n  '--error-text': 'var(--color-red-11)',\n} as React.CSSProperties\n\nconst CLASS_NAMES = {\n  // sonner hardcodes the description color (#3f3f3f) and its styles are\n  // unlayered, so only important utilities win; typed rich toasts restore\n  // the tinted inherit (untyped toasts carry data-rich-colors too, so the\n  // guard needs both attributes)\n  description:\n    'text-gray-11! [[data-rich-colors=true][data-type]_&]:text-inherit!',\n  actionButton:\n    'bg-spark-9! text-spark-contrast! hover:bg-spark-10! rounded-md!',\n  cancelButton: 'bg-gray-a3! text-gray-12! hover:bg-gray-a4! rounded-md!',\n}\n\n// consumer props merge with (not replace) the spark theming — React itself\n// would wholesale-replace object props like `style`\nconst Toaster = ({\n  className,\n  closeButton = true,\n  icons,\n  richColors = true,\n  style,\n  toastOptions,\n  ...props\n}: ToasterProps) => (\n  <Sonner\n    className={cn('toaster group', className)}\n    closeButton={closeButton}\n    icons={{ ...ICONS, ...icons }}\n    richColors={richColors}\n    style={{ ...STYLE_VARS, ...style }}\n    toastOptions={{\n      ...toastOptions,\n      classNames: { ...CLASS_NAMES, ...toastOptions?.classNames },\n    }}\n    {...props}\n  />\n)\n\nexport { Toaster, toast }\nexport type { ToasterProps }\n"],"mappings":";;;;;;;;;AAuBA,MAAM,QAA+B,OAAO,YAC1C,OAAO,QAAQ;CAPf,SAAS;EAAE,MAAM;EAAgB,WAAW;EAAsB;CAClE,MAAM;EAAE,MAAM;EAAQ,WAAW;EAAmB;CACpD,SAAS;EAAE,MAAM;EAAW,WAAW;EAAsB;CAC7D,OAAO;EAAE,MAAM;EAAU,WAAW;EAAoB;CAI9B,CAAC,CAAC,KAAK,CAAC,MAAM,UAAU,CAChD,MACA,oBAAC,gBAAD;CACE,WAAW,GACT,8DACA,KAAK,UACN;CAED,MAAM,KAAK;CACX,EAFK,KAEL,CACH,CAAC,CACH;AAID,MAAM,UACJ,oBAAC,SAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAM;CACN,MAAK;CACL,MAAK;CACL,CAAA;AAGJ,MAAM,aAAa;CACjB,eAAe;CACf,iBAAiB;CACjB,mBAAmB;CACnB,mBAAmB;CAGnB,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,YAAY;CACZ,YAAY;CAEZ,8BAA8B;CAC9B,4BAA4B;CAC5B,kCAAkC;CAIlC,gBAAgB;CAChB,oBAAoB;CACpB,kBAAkB;CAClB,aAAa;CACb,iBAAiB;CACjB,eAAe;CACf,gBAAgB;CAChB,oBAAoB;CACpB,kBAAkB;CAClB,cAAc;CACd,kBAAkB;CAClB,gBAAgB;CACjB;AAED,MAAM,cAAc;CAKlB,aACE;CACF,cACE;CACF,cAAc;CACf;AAID,MAAM,WAAW,EACf,WACA,cAAc,MACd,OACA,aAAa,MACb,OACA,cACA,GAAG,YAEH,oBAACA,WAAD;CACE,WAAW,GAAG,iBAAiB,UAAU;CAC5B;CACb,OAAO;EAAE,GAAG;EAAO,GAAG;EAAO;CACjB;CACZ,OAAO;EAAE,GAAG;EAAY,GAAG;EAAO;CAClC,cAAc;EACZ,GAAG;EACH,YAAY;GAAE,GAAG;GAAa,GAAG,cAAc;GAAY;EAC5D;CACD,GAAI;CACJ,CAAA"}

package/dist/components/tooltip.cjs

@@ -0,0 +1,75 @@
+"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");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
+let cnfast = require("cnfast");
+//#region src/components/tooltip.tsx
+const TooltipProvider = ({ delay = 0, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Provider, {
+		delay,
+		...props
+	});
+};
+const TooltipPortal = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Portal, {
+		"data-slot": "tooltip-portal",
+		...props
+	});
+};
+const Tooltip = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Root, { ...props });
+};
+const TooltipTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+};
+const TooltipContent = ({ className, hideArrow = false, variant = "default", children, align, alignOffset, side, sideOffset = 4, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Positioner, {
+		align,
+		alignOffset,
+		className: "isolate z-50",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tooltip.Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			"data-variant": variant,
+			className: (0, cnfast.cn)("z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", "data-ending-style:opacity-0 data-ending-style:duration-0", "data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1", "data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1", className),
+			...props,
+			children: [children, !hideArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Arrow, {
+				"data-variant": variant,
+				className: (0, cnfast.cn)("z-50 size-2.5 rotate-45 rounded-[2px]", "data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]", "data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12", "data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12")
+			})]
+		})
+	}) });
+};
+const InfoTooltip = ({ content, label }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			"aria-label": `About ${label}`,
+			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			type: "button"
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "text-[14px]!",
+			name: "info"
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+		className: "max-w-xs whitespace-pre-line",
+		children: content
+	})] });
+};
+//#endregion
+exports.InfoTooltip = InfoTooltip;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipPortal = TooltipPortal;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
+
+//# sourceMappingURL=tooltip.cjs.map

package/dist/components/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/components/tooltip.d.cts

@@ -0,0 +1,47 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+
+//#region src/components/tooltip.d.ts
+declare const TooltipProvider: ({
+  delay,
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Provider>) => _$react_jsx_runtime0.JSX.Element;
+declare const TooltipPortal: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Portal>) => _$react_jsx_runtime0.JSX.Element;
+type TooltipProps = React$1.ComponentProps<typeof Tooltip$1.Root>;
+declare const Tooltip: ({
+  ...props
+}: TooltipProps) => _$react_jsx_runtime0.JSX.Element;
+declare const TooltipTrigger: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Trigger>) => _$react_jsx_runtime0.JSX.Element;
+type TooltipContentProps = React$1.ComponentProps<typeof Tooltip$1.Popup> & Pick<Tooltip$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+  hideArrow?: boolean;
+  variant?: 'default' | 'destructive';
+};
+declare const TooltipContent: ({
+  className,
+  hideArrow,
+  variant,
+  children,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  ...props
+}: TooltipContentProps) => _$react_jsx_runtime0.JSX.Element;
+interface InfoTooltipProps {
+  content: string;
+  label: string;
+}
+declare const InfoTooltip: ({
+  content,
+  label
+}: InfoTooltipProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.cts.map

package/dist/components/tooltip.d.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+
+//#region src/components/tooltip.d.ts
+declare const TooltipProvider: ({
+  delay,
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Provider>) => _$react_jsx_runtime0.JSX.Element;
+declare const TooltipPortal: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Portal>) => _$react_jsx_runtime0.JSX.Element;
+type TooltipProps = React$1.ComponentProps<typeof Tooltip$1.Root>;
+declare const Tooltip: ({
+  ...props
+}: TooltipProps) => _$react_jsx_runtime0.JSX.Element;
+declare const TooltipTrigger: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Trigger>) => _$react_jsx_runtime0.JSX.Element;
+type TooltipContentProps = React$1.ComponentProps<typeof Tooltip$1.Popup> & Pick<Tooltip$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+  hideArrow?: boolean;
+  variant?: 'default' | 'destructive';
+};
+declare const TooltipContent: ({
+  className,
+  hideArrow,
+  variant,
+  children,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  ...props
+}: TooltipContentProps) => _$react_jsx_runtime0.JSX.Element;
+interface InfoTooltipProps {
+  content: string;
+  label: string;
+}
+declare const InfoTooltip: ({
+  content,
+  label
+}: InfoTooltipProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/tooltip.tsx
+const TooltipProvider = ({ delay = 0, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		delay,
+		...props
+	});
+};
+const TooltipPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
+		"data-slot": "tooltip-portal",
+		...props
+	});
+};
+const Tooltip = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props });
+};
+const TooltipTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+};
+const TooltipContent = ({ className, hideArrow = false, variant = "default", children, align, alignOffset, side, sideOffset = 4, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		align,
+		alignOffset,
+		className: "isolate z-50",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
+			"data-slot": "tooltip-content",
+			"data-variant": variant,
+			className: cn("z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", "data-ending-style:opacity-0 data-ending-style:duration-0", "data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1", "data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1", className),
+			...props,
+			children: [children, !hideArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+				"data-variant": variant,
+				className: cn("z-50 size-2.5 rotate-45 rounded-[2px]", "data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]", "data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12", "data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12")
+			})]
+		})
+	}) });
+};
+const InfoTooltip = ({ content, label }) => {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			"aria-label": `About ${label}`,
+			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			type: "button"
+		}),
+		children: /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "text-[14px]!",
+			name: "info"
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		className: "max-w-xs whitespace-pre-line",
+		children: content
+	})] });
+};
+//#endregion
+export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/components/typography.cjs

@@ -0,0 +1,52 @@
+"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/typography.tsx
+const PowerValue = ({ "aria-label": ariaLabel = "Live power draw reported by the device", ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		className: "text-3xl font-bold text-gray tabular-nums",
+		"aria-label": ariaLabel,
+		...props
+	});
+};
+const PageTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		className: (0, cnfast.cn)("text-xl font-bold wrap-break-word", className),
+		...props
+	});
+};
+const SectionTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		className: (0, cnfast.cn)("text-base font-bold text-gray", className),
+		...props
+	});
+};
+const SectionDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: (0, cnfast.cn)("text-sm text-gray-light", className),
+		...props
+	});
+};
+const SectionSubtitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+		className: (0, cnfast.cn)("text-sm font-bold tracking-wider text-gray-light uppercase", className),
+		...props
+	});
+};
+const StateValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("text-xl font-black tabular-nums", className),
+		...props
+	});
+};
+//#endregion
+exports.PageTitle = PageTitle;
+exports.PowerValue = PowerValue;
+exports.SectionDescription = SectionDescription;
+exports.SectionSubtitle = SectionSubtitle;
+exports.SectionTitle = SectionTitle;
+exports.StateValue = StateValue;
+
+//# sourceMappingURL=typography.cjs.map

package/dist/components/typography.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.cjs","names":[],"sources":["../../src/components/typography.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst PowerValue = ({\n  'aria-label': ariaLabel = 'Live power draw reported by the device',\n  ...props\n}: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className=\"text-3xl font-bold text-gray tabular-nums\"\n      aria-label={ariaLabel}\n      {...props}\n    />\n  )\n}\n\nconst PageTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className={cn('text-xl font-bold wrap-break-word', className)}\n      {...props}\n    />\n  )\n}\n\nconst SectionTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h3 className={cn('text-base font-bold text-gray', className)} {...props} />\n  )\n}\n\nconst SectionDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...props} />\n}\n\nconst SectionSubtitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h3'>) => {\n  return (\n    <h4\n      className={cn(\n        'text-sm font-bold tracking-wider text-gray-light uppercase',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst StateValue = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xl font-black tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PowerValue,\n  PageTitle,\n  SectionTitle,\n  SectionDescription,\n  SectionSubtitle,\n  StateValue,\n}\n"],"mappings":";;;;;;AAEA,MAAM,cAAc,EAClB,cAAc,YAAY,0CAC1B,GAAG,YAC6B;AAChC,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;EACJ,CAAA;;AAIN,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;AACzE,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;AAC5E,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,iCAAiC,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIhF,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;AAC/B,QAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EAAE,GAAI;EAAS,CAAA;;AAG9E,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;AAChC,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IACE,8DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;AAC5E,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA"}

package/dist/components/typography.d.cts

@@ -0,0 +1,32 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/typography.d.ts
+declare const PowerValue: ({
+  "aria-label": ariaLabel,
+  ...props
+}: React.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+declare const PageTitle: ({
+  className,
+  ...props
+}: React.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+declare const SectionTitle: ({
+  className,
+  ...props
+}: React.ComponentProps<"h2">) => _$react_jsx_runtime0.JSX.Element;
+declare const SectionDescription: ({
+  className,
+  ...props
+}: React.ComponentProps<"p">) => _$react_jsx_runtime0.JSX.Element;
+declare const SectionSubtitle: ({
+  className,
+  ...props
+}: React.ComponentProps<"h3">) => _$react_jsx_runtime0.JSX.Element;
+declare const StateValue: ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageTitle, PowerValue, SectionDescription, SectionSubtitle, SectionTitle, StateValue };
+//# sourceMappingURL=typography.d.cts.map