@epilot/spark-ui 0.10.0

package/dist/components/tooltip.cjs

@@ -0,0 +1,85 @@
+"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");
+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 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-red-12 data-[variant=destructive]:text-red-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", "data-[side=bottom]:top-[-8px]", "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", "data-[side=left]:right-[-13px] data-[side=left]:rotate-90", "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90", "data-[variant=default]:text-gray-12", "data-[variant=destructive]:text-red-12"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					fill: "none",
+					height: "10",
+					viewBox: "0 0 20 10",
+					width: "20",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+						fill: "currentColor"
+					})
+				})
+			})]
+		})
+	}) });
+};
+const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
+	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": ariaLabel ?? 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-sm!",
+			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 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-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? 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-sm!\" 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;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,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,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/tooltip.d.cts

@@ -0,0 +1,48 @@
+"use client";
+
+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>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipPortal: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Portal>) => import("react/jsx-runtime").JSX.Element;
+type TooltipProps = React$1.ComponentProps<typeof Tooltip$1.Root>;
+declare const Tooltip: ({
+  ...props
+}: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipTrigger: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Trigger>) => import("react/jsx-runtime").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) => import("react/jsx-runtime").JSX.Element;
+interface InfoTooltipProps {
+  content: string;
+  label: string;
+  'aria-label'?: string;
+}
+declare const InfoTooltip: ({
+  content,
+  label,
+  "aria-label": ariaLabel
+}: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.cts.map

package/dist/components/tooltip.d.ts

@@ -0,0 +1,48 @@
+"use client";
+
+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>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipPortal: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Portal>) => import("react/jsx-runtime").JSX.Element;
+type TooltipProps = React$1.ComponentProps<typeof Tooltip$1.Root>;
+declare const Tooltip: ({
+  ...props
+}: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipTrigger: ({
+  ...props
+}: React$1.ComponentProps<typeof Tooltip$1.Trigger>) => import("react/jsx-runtime").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) => import("react/jsx-runtime").JSX.Element;
+interface InfoTooltipProps {
+  content: string;
+  label: string;
+  'aria-label'?: string;
+}
+declare const InfoTooltip: ({
+  content,
+  label,
+  "aria-label": ariaLabel
+}: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.js

@@ -0,0 +1,77 @@
+"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 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-red-12 data-[variant=destructive]:text-red-1", className),
+			...props,
+			children: [children, !hideArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+				"data-variant": variant,
+				className: cn("z-50", "data-[side=bottom]:top-[-8px]", "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", "data-[side=left]:right-[-13px] data-[side=left]:rotate-90", "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90", "data-[variant=default]:text-gray-12", "data-[variant=destructive]:text-red-12"),
+				children: /* @__PURE__ */ jsx("svg", {
+					fill: "none",
+					height: "10",
+					viewBox: "0 0 20 10",
+					width: "20",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+						fill: "currentColor"
+					})
+				})
+			})]
+		})
+	}) });
+};
+const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			"aria-label": ariaLabel ?? 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-sm!",
+			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 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-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? 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-sm!\" 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;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,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,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/typography.cjs

@@ -0,0 +1,51 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;CAC/B,OAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IACE,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/typography.d.cts

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

package/dist/components/typography.d.ts

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

package/dist/components/typography.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography.tsx
+const PowerValue = ({ "aria-label": ariaLabel = "Live power draw reported by the device", ...props }) => {
+	return /* @__PURE__ */ jsx("h2", {
+		className: "text-3xl font-bold text-gray tabular-nums",
+		"aria-label": ariaLabel,
+		...props
+	});
+};
+const PageTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("h2", {
+		className: cn("text-xl font-bold wrap-break-word", className),
+		...props
+	});
+};
+const SectionTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("h3", {
+		className: cn("text-base font-bold text-gray", className),
+		...props
+	});
+};
+const SectionDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm text-gray-light", className),
+		...props
+	});
+};
+const SectionSubtitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("h4", {
+		className: cn("text-sm font-bold tracking-wider text-gray-light uppercase", className),
+		...props
+	});
+};
+const StateValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-xl font-black tabular-nums", className),
+		...props
+	});
+};
+//#endregion
+export { PageTitle, PowerValue, SectionDescription, SectionSubtitle, SectionTitle, StateValue };
+
+//# sourceMappingURL=typography.js.map

package/dist/components/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","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;CAChC,OACE,oBAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;CACzE,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;CAC5E,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;CAC/B,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;CAChC,OACE,oBAAC,MAAD;EACE,WAAW,GACT,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;CAC5E,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/generate-radix-colors-Bw-RYaV4.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+//#region src/lib/generate-radix-colors.d.ts
+type ArrayOf12<T> = [T, T, T, T, T, T, T, T, T, T, T, T];
+declare const generateRadixColors: ({
+  appearance,
+  ...args
+}: {
+  appearance: "light" | "dark";
+  accent: string;
+  gray: string;
+  background: string;
+}) => {
+  accentScale: ArrayOf12<string>;
+  accentScaleAlpha: ArrayOf12<string>;
+  accentScaleWideGamut: ArrayOf12<string>;
+  accentScaleAlphaWideGamut: ArrayOf12<string>;
+  accentContrast: string;
+  grayScale: ArrayOf12<string>;
+  grayScaleAlpha: ArrayOf12<string>;
+  grayScaleWideGamut: ArrayOf12<string>;
+  grayScaleAlphaWideGamut: ArrayOf12<string>;
+  graySurface: string;
+  graySurfaceWideGamut: string;
+  accentSurface: string;
+  accentSurfaceWideGamut: string;
+  background: string;
+};
+declare function transposeProgressionStart(to: number, arr: number[], curve: [number, number, number, number]): number[];
+declare function transposeProgressionEnd(to: number, arr: number[], curve: [number, number, number, number]): number[];
+//#endregion
+export { transposeProgressionEnd as n, transposeProgressionStart as r, generateRadixColors as t };
+//# sourceMappingURL=generate-radix-colors-Bw-RYaV4.d.cts.map

package/dist/generate-radix-colors-Bw-RYaV4.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+//#region src/lib/generate-radix-colors.d.ts
+type ArrayOf12<T> = [T, T, T, T, T, T, T, T, T, T, T, T];
+declare const generateRadixColors: ({
+  appearance,
+  ...args
+}: {
+  appearance: "light" | "dark";
+  accent: string;
+  gray: string;
+  background: string;
+}) => {
+  accentScale: ArrayOf12<string>;
+  accentScaleAlpha: ArrayOf12<string>;
+  accentScaleWideGamut: ArrayOf12<string>;
+  accentScaleAlphaWideGamut: ArrayOf12<string>;
+  accentContrast: string;
+  grayScale: ArrayOf12<string>;
+  grayScaleAlpha: ArrayOf12<string>;
+  grayScaleWideGamut: ArrayOf12<string>;
+  grayScaleAlphaWideGamut: ArrayOf12<string>;
+  graySurface: string;
+  graySurfaceWideGamut: string;
+  accentSurface: string;
+  accentSurfaceWideGamut: string;
+  background: string;
+};
+declare function transposeProgressionStart(to: number, arr: number[], curve: [number, number, number, number]): number[];
+declare function transposeProgressionEnd(to: number, arr: number[], curve: [number, number, number, number]): number[];
+//#endregion
+export { transposeProgressionEnd as n, transposeProgressionStart as r, generateRadixColors as t };
+//# sourceMappingURL=generate-radix-colors-Bw-RYaV4.d.ts.map