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

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;AACtB,QACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,qBAAqB;;AAI/C,SAAS,OAAO,EACd,cACA,GAAG,SACiD;AACpD,QACE,oBAACA,SAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;AACpC,OACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,MAAM,EACpC;AACA,iBAAa,QAAQ;AACrB;;AAEF,kBAAe,MAAM,aAAa;;EAEpC,CAAA;;AAIN,SAAS,cACP,OACA;AACA,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aACP,OACA;AACA,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAKxE,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;AACrD,KAAI,YAAY,MAAM,OACpB,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;EACqB,CAAA;AAI5B,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;GAAY,CAAC,EACrD,yCACA,UACD;EACD,GAAI;YAEJ,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;GACL,CAAA;EACoB,CAAA;;AAI5B,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;AACxD,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,kRACA,UACD;EACD,gBAAa;EACb,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,kRAEA,qGACA,+FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}

package/dist/components/donut-chart.cjs

@@ -0,0 +1,71 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+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(--gray-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(--gray-12)",
+				children: centerLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: SIZE / 2,
+				y: SIZE / 2 + 14,
+				textAnchor: "middle",
+				fontSize: 12,
+				fill: "var(--gray-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(--gray-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(--gray-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(--gray-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,EAAE;CAE/D,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;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,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;IACb,CAAA;GACD,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;IACd,EAVK,EAUL,CACF;GACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}

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

@@ -0,0 +1,22 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#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): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DonutChart };
+//# sourceMappingURL=donut-chart.d.cts.map

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

@@ -0,0 +1,22 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#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): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DonutChart };
+//# sourceMappingURL=donut-chart.d.ts.map

package/dist/components/donut-chart.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "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__ */ jsxs("svg", {
+		width: SIZE,
+		height: SIZE,
+		viewBox: `0 0 ${SIZE} ${SIZE}`,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: SIZE / 2,
+				cy: SIZE / 2,
+				r: RADIUS,
+				fill: "none",
+				stroke: "var(--gray-a3)",
+				strokeWidth: STROKE
+			}),
+			arcs.map((arc, i) => /* @__PURE__ */ 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__ */ jsx("text", {
+				x: SIZE / 2,
+				y: SIZE / 2 - 5,
+				textAnchor: "middle",
+				fontSize: 20,
+				fontWeight: 700,
+				fill: "var(--gray-12)",
+				children: centerLabel
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: SIZE / 2,
+				y: SIZE / 2 + 14,
+				textAnchor: "middle",
+				fontSize: 12,
+				fill: "var(--gray-a11)",
+				children: centerSub
+			})
+		]
+	});
+}
+//#endregion
+export { DonutChart };
+
+//# sourceMappingURL=donut-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.js","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(--gray-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(--gray-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(--gray-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,EAAE;CAE/D,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;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,qBAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,oBAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,oBAAC,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;IACd,EAVK,EAUL,CACF;GACF,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}

package/dist/components/drawer.cjs

@@ -0,0 +1,95 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let vaul = require("vaul");
+let cnfast = require("cnfast");
+//#region src/components/drawer.tsx
+function Drawer({ shouldScaleBackground = true, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Root, {
+		"data-slot": "drawer",
+		shouldScaleBackground,
+		...props
+	});
+}
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+function DrawerClose(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Overlay, {
+		"data-slot": "drawer-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) supports-backdrop-filter:backdrop-blur-xs", className),
+		"data-overlay": "true",
+		...props
+	});
+}
+const onInteractOutsideHandler = (event) => {
+	if (!(event.target.dataset.overlay === "true")) event.preventDefault();
+};
+function DrawerContent({ className, pillClassName, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Content, {
+		"data-slot": "drawer-content",
+		className: (0, cnfast.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl", "data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm", "data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
+		onInteractOutside: onInteractOutsideHandler,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, cnfast.cn)("mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block", pillClassName) }), children]
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "drawer-header",
+		className: (0, cnfast.cn)("flex flex-col gap-1 px-6 py-3", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "drawer-footer",
+		className: (0, cnfast.cn)("mt-auto flex flex-col gap-2 text-gray", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: (0, cnfast.cn)("text-lg font-bold text-gray", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: (0, cnfast.cn)("text-sm text-gray-light", className),
+		...props
+	});
+}
+//#endregion
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
+
+//# sourceMappingURL=drawer.cjs.map

package/dist/components/drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.cjs","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\nimport { cn } from '../utils/cn'\n\nfunction Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      shouldScaleBackground={shouldScaleBackground}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger(\n  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,\n) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal(\n  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose(\n  props: React.ComponentProps<typeof DrawerPrimitive.Close>,\n) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-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) supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface DrawerContentProps extends React.ComponentProps<\n  typeof DrawerPrimitive.Content\n> {\n  pillClassName?: string\n}\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our drawers contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nfunction DrawerContent({\n  className,\n  pillClassName,\n  children,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Content\n      data-slot=\"drawer-content\"\n      className={cn(\n        'group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray',\n        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl',\n        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl',\n        'data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm',\n        'data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n        className,\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block',\n          pillClassName,\n        )}\n      />\n      {children}\n    </DrawerPrimitive.Content>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-1 px-6 py-3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\nexport type { DrawerContentProps }\n"],"mappings":";;;;;;;;;AAIA,SAAS,OAAO,EACd,wBAAwB,MACxB,GAAG,SACiD;AACpD,QACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,MAAjB;EACE,aAAU;EACa;EACvB,GAAI;EACJ,CAAA;;AAIN,SAAS,cACP,OACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aACP,OACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YACP,OACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0JACA,UACD;EACD,gBAAa;EACb,GAAI;EACJ,CAAA;;AAUN,MAAM,4BAA4B,UAAuB;AAOvD,KAAI,EANW,MAAM,OACI,QAAQ,YAAY,QAK7B,OAAM,gBAAgB;;AAGxC,SAAS,cAAc,EACrB,WACA,eACA,UACA,GAAG,SACkB;AACrB,QACE,iBAAA,GAAA,kBAAA,MAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4EACA,2QACA,+OACA,gWACA,wWACA,UACD;EACD,mBAAmB;EACnB,GAAI;YAXN,CAaE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EACE,YAAA,GAAA,OAAA,IACE,2IACA,cACD,EACD,CAAA,EACD,SACuB;;;AAI9B,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}

package/dist/components/drawer.d.cts

@@ -0,0 +1,46 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Drawer as Drawer$1 } from "vaul";
+
+//#region src/components/drawer.d.ts
+declare function Drawer({
+  shouldScaleBackground,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerTrigger(props: React$1.ComponentProps<typeof Drawer$1.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerPortal(props: React$1.ComponentProps<typeof Drawer$1.Portal>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerClose(props: React$1.ComponentProps<typeof Drawer$1.Close>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerOverlay({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Overlay>): _$react_jsx_runtime0.JSX.Element;
+interface DrawerContentProps extends React$1.ComponentProps<typeof Drawer$1.Content> {
+  pillClassName?: string;
+}
+declare function DrawerContent({
+  className,
+  pillClassName,
+  children,
+  ...props
+}: DrawerContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Title>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Description>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+//# sourceMappingURL=drawer.d.cts.map

package/dist/components/drawer.d.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Drawer as Drawer$1 } from "vaul";
+
+//#region src/components/drawer.d.ts
+declare function Drawer({
+  shouldScaleBackground,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerTrigger(props: React$1.ComponentProps<typeof Drawer$1.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerPortal(props: React$1.ComponentProps<typeof Drawer$1.Portal>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerClose(props: React$1.ComponentProps<typeof Drawer$1.Close>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerOverlay({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Overlay>): _$react_jsx_runtime0.JSX.Element;
+interface DrawerContentProps extends React$1.ComponentProps<typeof Drawer$1.Content> {
+  pillClassName?: string;
+}
+declare function DrawerContent({
+  className,
+  pillClassName,
+  children,
+  ...props
+}: DrawerContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Title>): _$react_jsx_runtime0.JSX.Element;
+declare function DrawerDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Drawer$1.Description>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer as Drawer$1 } from "vaul";
+//#region src/components/drawer.tsx
+function Drawer({ shouldScaleBackground = true, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Root, {
+		"data-slot": "drawer",
+		shouldScaleBackground,
+		...props
+	});
+}
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal(props) {
+	return /* @__PURE__ */ jsx(Drawer$1.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+		"data-slot": "drawer-overlay",
+		className: cn("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) supports-backdrop-filter:backdrop-blur-xs", className),
+		"data-overlay": "true",
+		...props
+	});
+}
+const onInteractOutsideHandler = (event) => {
+	if (!(event.target.dataset.overlay === "true")) event.preventDefault();
+};
+function DrawerContent({ className, pillClassName, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Drawer$1.Content, {
+		"data-slot": "drawer-content",
+		className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl", "data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm", "data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
+		onInteractOutside: onInteractOutsideHandler,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block", pillClassName) }), children]
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn("flex flex-col gap-1 px-6 py-3", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex flex-col gap-2 text-gray", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Title, {
+		"data-slot": "drawer-title",
+		className: cn("text-lg font-bold text-gray", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-sm text-gray-light", className),
+		...props
+	});
+}
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\nimport { cn } from '../utils/cn'\n\nfunction Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      shouldScaleBackground={shouldScaleBackground}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger(\n  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,\n) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal(\n  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose(\n  props: React.ComponentProps<typeof DrawerPrimitive.Close>,\n) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-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) supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface DrawerContentProps extends React.ComponentProps<\n  typeof DrawerPrimitive.Content\n> {\n  pillClassName?: string\n}\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our drawers contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nfunction DrawerContent({\n  className,\n  pillClassName,\n  children,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Content\n      data-slot=\"drawer-content\"\n      className={cn(\n        'group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray',\n        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl',\n        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl',\n        'data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm',\n        'data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n        className,\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block',\n          pillClassName,\n        )}\n      />\n      {children}\n    </DrawerPrimitive.Content>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-1 px-6 py-3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\nexport type { DrawerContentProps }\n"],"mappings":";;;;;;AAIA,SAAS,OAAO,EACd,wBAAwB,MACxB,GAAG,SACiD;AACpD,QACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACa;EACvB,GAAI;EACJ,CAAA;;AAIN,SAAS,cACP,OACA;AACA,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aACP,OACA;AACA,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YACP,OACA;AACA,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,0JACA,UACD;EACD,gBAAa;EACb,GAAI;EACJ,CAAA;;AAUN,MAAM,4BAA4B,UAAuB;AAOvD,KAAI,EANW,MAAM,OACI,QAAQ,YAAY,QAK7B,OAAM,gBAAgB;;AAGxC,SAAS,cAAc,EACrB,WACA,eACA,UACA,GAAG,SACkB;AACrB,QACE,qBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4EACA,2QACA,+OACA,gWACA,wWACA,UACD;EACD,mBAAmB;EACnB,GAAI;YAXN,CAaE,oBAAC,OAAD,EACE,WAAW,GACT,2IACA,cACD,EACD,CAAA,EACD,SACuB;;;AAI9B,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}