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

package/dist/components/device-card.cjs

@@ -0,0 +1,118 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let cnfast = require("cnfast");
+//#region src/components/device-card.tsx
+const DeviceCard = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex flex-col overflow-hidden rounded-2xl border border-gray bg-(--spark-background)", className),
+	...rest
+});
+const DeviceCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	type: "button",
+	className: (0, cnfast.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__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex w-full items-center gap-3", className),
+	...rest
+});
+const DeviceCardMeters = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex flex-col gap-2 border-t border-gray pt-3", className),
+	...rest
+});
+const iconToneVariants = (0, class_variance_authority.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__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: iconToneVariants({
+		tone,
+		className
+	}),
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+		className: "text-[18px]",
+		name: icon
+	})
+});
+const DeviceCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	...rest
+});
+const DeviceCardTitle = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: (0, cnfast.cn)("truncate text-sm font-bold text-gray", className),
+	...rest
+});
+const stateToneVariants = (0, class_variance_authority.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 = (0, class_variance_authority.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+	className: stateToneVariants({
+		tone,
+		className
+	}),
+	...rest,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: dotToneVariants({ tone }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "truncate",
+		children
+	})]
+});
+const DeviceCardDetail = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: (0, cnfast.cn)("truncate text-xs text-gray-light tabular-nums", className),
+	...rest
+});
+const DeviceCardPower = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: (0, cnfast.cn)("ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums", className),
+	...rest
+});
+const DeviceCardControls = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.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__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.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
+exports.DeviceCard = DeviceCard;
+exports.DeviceCardBody = DeviceCardBody;
+exports.DeviceCardControls = DeviceCardControls;
+exports.DeviceCardDetail = DeviceCardDetail;
+exports.DeviceCardFooter = DeviceCardFooter;
+exports.DeviceCardHeader = DeviceCardHeader;
+exports.DeviceCardIcon = DeviceCardIcon;
+exports.DeviceCardMeters = DeviceCardMeters;
+exports.DeviceCardPower = DeviceCardPower;
+exports.DeviceCardState = DeviceCardState;
+exports.DeviceCardTitle = DeviceCardTitle;
+exports.DeviceCardTitleColumn = DeviceCardTitleColumn;
+
+//# sourceMappingURL=device-card.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"device-card.cjs","names":["MaterialSymbol"],"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":"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"}

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

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

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import { t as Tone } from "../tones-DyCkL71h.js";
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/device-card.d.ts
+declare const DeviceCard: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardBody: ({
+  className,
+  active,
+  ...rest
+}: React$1.ComponentProps<"button"> & {
+  active?: boolean;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardHeader: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardMeters: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardIcon: ({
+  className,
+  icon,
+  tone,
+  ...rest
+}: React$1.ComponentProps<"span"> & {
+  icon: MaterialSymbolIconName;
+  tone?: Tone;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardTitleColumn: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardTitle: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardState: ({
+  className,
+  tone,
+  children,
+  ...rest
+}: React$1.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardDetail: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardPower: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardControls: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const DeviceCardFooter: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => _$react_jsx_runtime0.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,UACD;CACD,GAAI;CACJ,CAAA;AAGJ,MAAM,kBAAkB,EACtB,WACA,QACA,GAAG,WAEH,oBAAC,UAAD;CACE,MAAK;CACL,WAAW,GACT,yLACA,UAAU,uDACV,UACD;CACD,GAAI;CACJ,CAAA;AAGJ,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,kCAAkC,UAAU;CAAE,GAAI;CAAQ,CAAA;AAG/E,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GAAG,iDAAiD,UAAU;CACzE,GAAI;CACJ,CAAA;AAGJ,MAAM,mBAAmB,IACvB,gEACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;EACV,EACF;CACD,iBAAiB,EAAE,MAAM,WAAW;CACrC,CACF;AAED,MAAM,kBAAkB,EACtB,WACA,MACA,MACA,GAAG,WAKH,oBAAC,QAAD;CAAM,WAAW,iBAAiB;EAAE;EAAM;EAAW,CAAC;CAAE,GAAI;WAC1D,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAM;EAAQ,CAAA;CACjD,CAAA;AAGT,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GAAG,wCAAwC,UAAU;CAChE,GAAI;CACJ,CAAA;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GAAG,wCAAwC,UAAU;CAChE,GAAI;CACJ,CAAA;AAGJ,MAAM,oBAAoB,IACxB,wDACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;EACV,EACF;CACD,iBAAiB,EAAE,MAAM,WAAW;CACrC,CACF;AAED,MAAM,kBAAkB,IAAI,kCAAkC;CAC5D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;EACV,EACF;CACD,iBAAiB,EAAE,MAAM,WAAW;CACrC,CAAC;AAEF,MAAM,mBAAmB,EACvB,WACA,MACA,UACA,GAAG,WAEH,qBAAC,QAAD;CAAM,WAAW,kBAAkB;EAAE;EAAM;EAAW,CAAC;CAAE,GAAI;WAA7D,CACE,oBAAC,QAAD,EAAM,WAAW,gBAAgB,EAAE,MAAM,CAAC,EAAI,CAAA,EAC9C,oBAAC,QAAD;EAAM,WAAU;EAAY;EAAgB,CAAA,CACvC;;AAGT,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GAAG,iDAAiD,UAAU;CACzE,GAAI;CACJ,CAAA;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GACT,oFACA,UACD;CACD,GAAI;CACJ,CAAA;AAGJ,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GACT,+EACA,UACD;CACD,GAAI;CACJ,CAAA;AAGJ,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GACT,wHACA,UACD;CACD,GAAI;CACJ,CAAA"}

package/dist/components/dialog.cjs

@@ -0,0 +1,115 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_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;AACtB,QACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,qBAAqB;;AAI/C,SAAS,OAAO,EACd,cACA,GAAG,SACiD;AACpD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,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,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aACP,OACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAKxE,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;AACrD,KAAI,YAAY,MAAM,OACpB,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;EACqB,CAAA;AAI5B,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;GAAY,CAAC,EACrD,yCACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,WAAU;GACV,MAAK;GACL,CAAA;EACoB,CAAA;;AAI5B,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;AACxD,QACE,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAgB,UAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kRACA,UACD;EACD,gBAAa;EACb,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;AACrD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kRAEA,qGACA,+FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,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,sBAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}

package/dist/components/dialog.d.cts

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