@epilot/spark-ui 0.10.0

package/dist/components/device-card.d.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import { Tone } from "../lib/tones.js";
+import * as React$1 from "react";
+
+//#region src/components/device-card.d.ts
+declare const DeviceCard: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardBody: ({
+  className,
+  active,
+  ...rest
+}: React$1.ComponentProps<"button"> & {
+  active?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardHeader: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardMeters: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardIcon: ({
+  className,
+  icon,
+  tone,
+  ...rest
+}: React$1.ComponentProps<"span"> & {
+  icon: MaterialSymbolIconName;
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardTitleColumn: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardTitle: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardState: ({
+  className,
+  tone,
+  children,
+  ...rest
+}: React$1.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardDetail: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardPower: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardControls: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardFooter: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DeviceCard, DeviceCardBody, DeviceCardControls, DeviceCardDetail, DeviceCardFooter, DeviceCardHeader, DeviceCardIcon, DeviceCardMeters, DeviceCardPower, DeviceCardState, DeviceCardTitle, DeviceCardTitleColumn };
+//# sourceMappingURL=device-card.d.ts.map

package/dist/components/device-card.js

@@ -0,0 +1,104 @@
+"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 { cva } from "class-variance-authority";
+//#region src/components/device-card.tsx
+const DeviceCard = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col overflow-hidden rounded-2xl border border-gray bg-(--spark-background)", className),
+	...rest
+});
+const DeviceCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	className: cn("flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", active && "bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%", className),
+	...rest
+});
+const DeviceCardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex w-full items-center gap-3", className),
+	...rest
+});
+const DeviceCardMeters = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 border-t border-gray pt-3", className),
+	...rest
+});
+const iconToneVariants = cva("flex size-11 shrink-0 items-center justify-center rounded-xl", {
+	variants: { tone: {
+		success: "bg-base-success-soft text-success",
+		warning: "bg-base-warning-soft text-warning",
+		error: "bg-base-error-soft text-error",
+		accent: "bg-base-accent-soft text-accent",
+		neutral: "bg-base-gray-soft text-gray"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const DeviceCardIcon = ({ className, icon, tone, ...rest }) => /* @__PURE__ */ jsx("span", {
+	className: iconToneVariants({
+		tone,
+		className
+	}),
+	...rest,
+	children: /* @__PURE__ */ jsx(MaterialSymbol, {
+		className: "text-[18px]",
+		name: icon
+	})
+});
+const DeviceCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	...rest
+});
+const DeviceCardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
+	className: cn("truncate text-sm font-bold text-gray", className),
+	...rest
+});
+const stateToneVariants = cva("inline-flex items-center gap-1.5 text-xs font-medium", {
+	variants: { tone: {
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		accent: "text-accent",
+		neutral: "text-gray-light"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const dotToneVariants = cva("size-1.5 shrink-0 rounded-full", {
+	variants: { tone: {
+		success: "bg-base-success-solid",
+		warning: "bg-base-warning-solid",
+		error: "bg-base-error-solid",
+		accent: "bg-base-accent-solid",
+		neutral: "bg-base-gray-solid"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const DeviceCardState = ({ className, tone, children, ...rest }) => /* @__PURE__ */ jsxs("span", {
+	className: stateToneVariants({
+		tone,
+		className
+	}),
+	...rest,
+	children: [/* @__PURE__ */ jsx("span", { className: dotToneVariants({ tone }) }), /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children
+	})]
+});
+const DeviceCardDetail = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
+	className: cn("truncate text-xs text-gray-light tabular-nums", className),
+	...rest
+});
+const DeviceCardPower = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
+	className: cn("ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums", className),
+	...rest
+});
+const DeviceCardControls = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3", className),
+	...rest
+});
+const DeviceCardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light", className),
+	...rest
+});
+//#endregion
+export { DeviceCard, DeviceCardBody, DeviceCardControls, DeviceCardDetail, DeviceCardFooter, DeviceCardHeader, DeviceCardIcon, DeviceCardMeters, DeviceCardPower, DeviceCardState, DeviceCardTitle, DeviceCardTitleColumn };
+
+//# sourceMappingURL=device-card.js.map

package/dist/components/device-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-card.js","names":[],"sources":["../../src/components/device-card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst DeviceCard = ({ className, ...rest }: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex flex-col overflow-hidden rounded-2xl border border-gray bg-(--spark-background)',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardBody = ({\n  className,\n  active,\n  ...rest\n}: React.ComponentProps<'button'> & { active?: boolean }) => (\n  <button\n    type=\"button\"\n    className={cn(\n      'flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n      active && 'bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('flex w-full items-center gap-3', className)} {...rest} />\n)\n\nconst DeviceCardMeters = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex flex-col gap-2 border-t border-gray pt-3', className)}\n    {...rest}\n  />\n)\n\nconst iconToneVariants = cva(\n  'flex size-11 shrink-0 items-center justify-center rounded-xl',\n  {\n    variants: {\n      tone: {\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        error: 'bg-base-error-soft text-error',\n        accent: 'bg-base-accent-soft text-accent',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst DeviceCardIcon = ({\n  className,\n  icon,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n  tone?: Tone\n}) => (\n  <span className={iconToneVariants({ tone, className })} {...rest}>\n    <MaterialSymbol className=\"text-[18px]\" name={icon} />\n  </span>\n)\n\nconst DeviceCardTitleColumn = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...rest}\n  />\n)\n\nconst DeviceCardTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-sm font-bold text-gray', className)}\n    {...rest}\n  />\n)\n\nconst stateToneVariants = cva(\n  'inline-flex items-center gap-1.5 text-xs font-medium',\n  {\n    variants: {\n      tone: {\n        success: 'text-success',\n        warning: 'text-warning',\n        error: 'text-error',\n        accent: 'text-accent',\n        neutral: 'text-gray-light',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst dotToneVariants = cva('size-1.5 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      success: 'bg-base-success-solid',\n      warning: 'bg-base-warning-solid',\n      error: 'bg-base-error-solid',\n      accent: 'bg-base-accent-solid',\n      neutral: 'bg-base-gray-solid',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst DeviceCardState = ({\n  className,\n  tone,\n  children,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => (\n  <span className={stateToneVariants({ tone, className })} {...rest}>\n    <span className={dotToneVariants({ tone })} />\n    <span className=\"truncate\">{children}</span>\n  </span>\n)\n\nconst DeviceCardDetail = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-xs text-gray-light tabular-nums', className)}\n    {...rest}\n  />\n)\n\nconst DeviceCardPower = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn(\n      'ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardControls = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nexport {\n  DeviceCard,\n  DeviceCardBody,\n  DeviceCardControls,\n  DeviceCardDetail,\n  DeviceCardFooter,\n  DeviceCardHeader,\n  DeviceCardIcon,\n  DeviceCardMeters,\n  DeviceCardPower,\n  DeviceCardState,\n  DeviceCardTitle,\n  DeviceCardTitleColumn,\n}\n"],"mappings":";;;;;;;AASA,MAAM,cAAc,EAAE,WAAW,GAAG,WAClC,oBAAC,OAAD;CACE,WAAW,GACT,wFACA,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,kBAAkB,EACtB,WACA,QACA,GAAG,WAEH,oBAAC,UAAD;CACE,MAAK;CACL,WAAW,GACT,yLACA,UAAU,uDACV,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,kCAAkC,SAAS;CAAG,GAAI;AAAO,CAAA;AAG9E,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;AACL,CAAA;AAGH,MAAM,mBAAmB,IACvB,gEACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAEA,MAAM,kBAAkB,EACtB,WACA,MACA,MACA,GAAG,WAKH,oBAAC,QAAD;CAAM,WAAW,iBAAiB;EAAE;EAAM;CAAU,CAAC;CAAG,GAAI;WAC1D,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAM;CAAO,CAAA;AACjD,CAAA;AAGR,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA;AAGH,MAAM,mBAAmB,EACvB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA;AAGH,MAAM,oBAAoB,IACxB,wDACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAEA,MAAM,kBAAkB,IAAI,kCAAkC;CAC5D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,UACA,GAAG,WAEH,qBAAC,QAAD;CAAM,WAAW,kBAAkB;EAAE;EAAM;CAAU,CAAC;CAAG,GAAI;WAA7D,CACE,oBAAC,QAAD,EAAM,WAAW,gBAAgB,EAAE,KAAK,CAAC,EAAI,CAAA,GAC7C,oBAAC,QAAD;EAAM,WAAU;EAAY;CAAe,CAAA,CACvC;;AAGR,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;AACL,CAAA;AAGH,MAAM,mBAAmB,EACvB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GACT,oFACA,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GACT,+EACA,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GACT,wHACA,SACF;CACA,GAAI;AACL,CAAA"}

package/dist/components/dialog.cjs

@@ -0,0 +1,115 @@
+"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 _base_ui_react_dialog = require("@base-ui/react/dialog");
+let cnfast = require("cnfast");
+//#region src/components/dialog.tsx
+function isBackdropPress(event) {
+	const target = event?.target;
+	return target instanceof HTMLElement && (target.dataset.overlay === "true" || target.hasAttribute("data-base-ui-inert"));
+}
+function Dialog({ onOpenChange, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, {
+		...props,
+		onOpenChange: (open, eventDetails) => {
+			if (!open && eventDetails.reason === "outside-press" && !isBackdropPress(eventDetails.event)) {
+				eventDetails.cancel();
+				return;
+			}
+			onOpenChange?.(open, eventDetails);
+		}
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ className, children, ...props }) {
+	if (children || props.render) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+		"data-slot": "dialog-close",
+		className,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+		"data-slot": "dialog-close",
+		className: (0, cnfast.cn)(require_components_button.buttonVariants({
+			size: "icon",
+			variant: "tertiary"
+		}), "absolute top-2.5 right-3 rounded-full", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]",
+			name: "close"
+		})
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: (0, cnfast.cn)("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none", className),
+		"data-overlay": "true",
+		...props
+	});
+}
+function DialogContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: (0, cnfast.cn)("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2", "data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0", className),
+		...props
+	});
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "dialog-header",
+		className: (0, cnfast.cn)("flex flex-col gap-1", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "dialog-footer",
+		className: (0, cnfast.cn)("flex flex-col-reverse gap-4 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: (0, cnfast.cn)("text-lg font-bold text-gray", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: (0, cnfast.cn)("text-sm text-gray-light", className),
+		...props
+	});
+}
+//#endregion
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+
+//# sourceMappingURL=dialog.cjs.map

package/dist/components/dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.cjs","names":["DialogPrimitive","buttonVariants","MaterialSymbol"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n  const target = event?.target\n  return (\n    target instanceof HTMLElement &&\n    (target.dataset.overlay === 'true' ||\n      target.hasAttribute('data-base-ui-inert'))\n  )\n}\n\nfunction Dialog({\n  onOpenChange,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return (\n    <DialogPrimitive.Root\n      {...props}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          !open &&\n          eventDetails.reason === 'outside-press' &&\n          !isBackdropPress(eventDetails.event)\n        ) {\n          eventDetails.cancel()\n          return\n        }\n        onOpenChange?.(open, eventDetails)\n      }}\n    />\n  )\n}\n\nfunction DialogTrigger(\n  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n  props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"dialog-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol\n        className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\"\n        name=\"close\"\n      />\n    </DialogPrimitive.Close>\n  )\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n  return (\n    <DialogPrimitive.Popup\n      data-slot=\"dialog-content\"\n      className={cn(\n        'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACoB,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAgB,UAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/dialog.d.cts

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React$1 from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+
+//#region src/components/dialog.d.ts
+declare function Dialog({
+  onOpenChange,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger(props: React$1.ComponentProps<typeof Dialog$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal(props: React$1.ComponentProps<typeof Dialog$1.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Backdrop>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Popup>): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Description>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.d.cts.map

package/dist/components/dialog.d.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React$1 from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+
+//#region src/components/dialog.d.ts
+declare function Dialog({
+  onOpenChange,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger(props: React$1.ComponentProps<typeof Dialog$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal(props: React$1.ComponentProps<typeof Dialog$1.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Backdrop>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Popup>): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Description>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { buttonVariants } from "./button.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.tsx
+function isBackdropPress(event) {
+	const target = event?.target;
+	return target instanceof HTMLElement && (target.dataset.overlay === "true" || target.hasAttribute("data-base-ui-inert"));
+}
+function Dialog({ onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		...props,
+		onOpenChange: (open, eventDetails) => {
+			if (!open && eventDetails.reason === "outside-press" && !isBackdropPress(eventDetails.event)) {
+				eventDetails.cancel();
+				return;
+			}
+			onOpenChange?.(open, eventDetails);
+		}
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ className, children, ...props }) {
+	if (children || props.render) return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		className,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		className: cn(buttonVariants({
+			size: "icon",
+			variant: "tertiary"
+		}), "absolute top-2.5 right-3 rounded-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]",
+			name: "close"
+		})
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none", className),
+		"data-overlay": "true",
+		...props
+	});
+}
+function DialogContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Popup, {
+		"data-slot": "dialog-content",
+		className: cn("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2", "data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0", className),
+		...props
+	});
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-1", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-4 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-lg font-bold text-gray", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-sm text-gray-light", className),
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n  const target = event?.target\n  return (\n    target instanceof HTMLElement &&\n    (target.dataset.overlay === 'true' ||\n      target.hasAttribute('data-base-ui-inert'))\n  )\n}\n\nfunction Dialog({\n  onOpenChange,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return (\n    <DialogPrimitive.Root\n      {...props}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          !open &&\n          eventDetails.reason === 'outside-press' &&\n          !isBackdropPress(eventDetails.event)\n        ) {\n          eventDetails.cancel()\n          return\n        }\n        onOpenChange?.(open, eventDetails)\n      }}\n    />\n  )\n}\n\nfunction DialogTrigger(\n  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n  props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"dialog-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol\n        className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\"\n        name=\"close\"\n      />\n    </DialogPrimitive.Close>\n  )\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n  return (\n    <DialogPrimitive.Popup\n      data-slot=\"dialog-content\"\n      className={cn(\n        'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,oBAACA,SAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACoB,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/donut-chart.cjs

@@ -0,0 +1,70 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/donut-chart.tsx
+const RADIUS = 66;
+const STROKE = 14;
+const SIZE = 180;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function DonutChart({ centerLabel, centerSub, segments }) {
+	const total = segments.reduce((sum, seg) => sum + seg.value, 0);
+	let offset = 0;
+	const arcs = segments.map((seg) => {
+		const dash = total > 0 ? seg.value / total * CIRCUMFERENCE : 0;
+		const arc = {
+			color: seg.color,
+			dash,
+			gap: CIRCUMFERENCE - dash,
+			offset
+		};
+		offset += dash;
+		return arc;
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: SIZE,
+		height: SIZE,
+		viewBox: `0 0 ${SIZE} ${SIZE}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: SIZE / 2,
+				cy: SIZE / 2,
+				r: RADIUS,
+				fill: "none",
+				stroke: "var(--neutral-a3)",
+				strokeWidth: STROKE
+			}),
+			arcs.map((arc, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: SIZE / 2,
+				cy: SIZE / 2,
+				r: RADIUS,
+				fill: "none",
+				stroke: arc.color,
+				strokeWidth: STROKE,
+				strokeDasharray: `${arc.dash} ${arc.gap}`,
+				strokeDashoffset: CIRCUMFERENCE / 4 - arc.offset,
+				strokeLinecap: "butt"
+			}, i)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: SIZE / 2,
+				y: SIZE / 2 - 5,
+				textAnchor: "middle",
+				fontSize: 20,
+				fontWeight: 700,
+				fill: "var(--neutral-12)",
+				children: centerLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: SIZE / 2,
+				y: 104,
+				textAnchor: "middle",
+				fontSize: 12,
+				fill: "var(--neutral-a11)",
+				children: centerSub
+			})
+		]
+	});
+}
+//#endregion
+exports.DonutChart = DonutChart;
+
+//# sourceMappingURL=donut-chart.cjs.map

package/dist/components/donut-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.cjs","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--neutral-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--neutral-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--neutral-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,CAAC;CAE9D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;EACF;EACA,UAAU;EACV,OAAO;CACT,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;GACd,CAAA;GACA,KAAK,KAAK,KAAK,MACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;GACf,GAVM,CAUN,CACF;GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;GACG,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG;IACH,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;GACG,CAAA;EACH;;AAET"}

package/dist/components/donut-chart.d.cts

@@ -0,0 +1,20 @@
+"use client";
+
+//#region src/components/donut-chart.d.ts
+interface DonutSegment {
+  value: number;
+  color: string;
+}
+interface DonutChartProps {
+  segments: DonutSegment[];
+  centerLabel: string;
+  centerSub: string;
+}
+declare function DonutChart({
+  centerLabel,
+  centerSub,
+  segments
+}: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DonutChart };
+//# sourceMappingURL=donut-chart.d.cts.map

package/dist/components/donut-chart.d.ts

@@ -0,0 +1,20 @@
+"use client";
+
+//#region src/components/donut-chart.d.ts
+interface DonutSegment {
+  value: number;
+  color: string;
+}
+interface DonutChartProps {
+  segments: DonutSegment[];
+  centerLabel: string;
+  centerSub: string;
+}
+declare function DonutChart({
+  centerLabel,
+  centerSub,
+  segments
+}: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DonutChart };
+//# sourceMappingURL=donut-chart.d.ts.map