@thorprovider/blocks 4.0.0 → 4.3.0

package/dist/blocks/designs/order-detail/components/ui.js

@@ -0,0 +1,220 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ui_exports = {};
+__export(ui_exports, {
+  ActionButton: () => ActionButton,
+  CardSection: () => CardSection,
+  Disclosure: () => Disclosure,
+  EmptyLine: () => EmptyLine,
+  Notice: () => Notice,
+  Pill: () => Pill,
+  Row: () => Row,
+  Rows: () => Rows,
+  Surface: () => Surface
+});
+module.exports = __toCommonJS(ui_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_blocks = require("@thorprovider/blocks");
+var import_icons = require("./icons.js");
+const DOT = {
+  neutral: "bg-muted-foreground",
+  info: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive"
+};
+function Pill({
+  label,
+  tone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: (0, import_blocks.cn)(
+        "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: (0, import_blocks.cn)("size-1.5 shrink-0 rounded-full", DOT[tone]) }),
+        label
+      ]
+    }
+  );
+}
+const BUTTON = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "border border-input bg-background text-foreground hover:bg-muted",
+  ghost: "text-foreground hover:bg-muted",
+  destructive: "border border-destructive/40 text-destructive hover:bg-destructive/10"
+};
+function ActionButton({
+  children,
+  onClick,
+  variant = "secondary",
+  className,
+  type = "button",
+  disabled
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type,
+      onClick,
+      disabled,
+      className: (0, import_blocks.cn)(
+        "inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50",
+        BUTTON[variant],
+        className
+      ),
+      children
+    }
+  );
+}
+function Surface({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_blocks.cn)("rounded-xl border bg-card text-card-foreground", className), children });
+}
+function CardSection({
+  id,
+  title,
+  children,
+  className
+}) {
+  const uid = (0, import_react.useId)();
+  const headingId = `${id}-heading-${uid}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      "aria-labelledby": headingId,
+      className: (0, import_blocks.cn)("rounded-xl border bg-card text-card-foreground", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: headingId, className: "text-sm font-semibold", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3", children })
+      ] })
+    }
+  );
+}
+function Disclosure({
+  id,
+  title,
+  description,
+  summary,
+  defaultOpen = true,
+  children,
+  heading
+}) {
+  const [open, setOpen] = useDisclosureState(defaultOpen);
+  (0, import_react.useEffect)(() => setOpen(defaultOpen), [defaultOpen]);
+  const uid = (0, import_react.useId)();
+  const regionId = `${id}-region-${uid}`;
+  const headingId = `${id}-heading-${uid}`;
+  const Heading = heading === "h3" ? "h3" : "h2";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-labelledby": headingId, className: "rounded-xl border bg-card text-card-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { id: headingId, className: "text-sm font-semibold", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: description }) : null,
+        summary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 text-xs text-muted-foreground", children: summary }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((value) => !value),
+          "aria-expanded": open,
+          "aria-controls": regionId,
+          className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-input text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.ChevronDown,
+              {
+                className: (0, import_blocks.cn)("size-4 transition-transform", open ? "rotate-180" : "rotate-0")
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: regionId, hidden: !open, className: "border-t px-4 py-4", children })
+  ] });
+}
+function useDisclosureState(initial) {
+  return (0, import_react.useState)(initial);
+}
+function Rows({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", { className: "space-y-1.5 text-sm", children });
+}
+function Row({
+  label,
+  value,
+  strong,
+  tone,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_blocks.cn)("flex items-baseline justify-between gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: (0, import_blocks.cn)("min-w-0 text-xs text-muted-foreground", tone === "warning" && "text-warning"), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "dd",
+      {
+        className: (0, import_blocks.cn)(
+          "min-w-0 break-words text-right tabular-nums",
+          strong ? "text-base font-semibold" : "text-sm",
+          tone === "warning" ? "text-warning" : "text-foreground"
+        ),
+        children: value
+      }
+    )
+  ] });
+}
+function Notice({
+  children,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      className: (0, import_blocks.cn)(
+        "rounded-lg border px-3 py-2 text-xs",
+        tone === "warning" ? "border-warning/40 bg-warning/10 text-foreground" : "border-border bg-muted/50 text-muted-foreground"
+      ),
+      children
+    }
+  );
+}
+function EmptyLine({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionButton,
+  CardSection,
+  Disclosure,
+  EmptyLine,
+  Notice,
+  Pill,
+  Row,
+  Rows,
+  Surface
+});
+//# sourceMappingURL=ui.js.map

package/dist/blocks/designs/order-detail/components/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-detail/components/ui.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { cn } from '@thorprovider/blocks'\n\nimport type { Money, Tone } from '../contracts'\nimport { ChevronDown } from './icons'\n\nexport type MoneyFormatter = (money: Money) => string\nexport type DateFormatter = (iso: string) => string\n\nconst DOT: Record<Tone, string> = {\n  neutral: 'bg-muted-foreground',\n  info: 'bg-primary',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-destructive',\n}\n\nexport function Pill({\n  label,\n  tone = 'neutral',\n  className,\n}: {\n  label: string\n  tone?: Tone\n  className?: string\n}) {\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground',\n        className,\n      )}\n    >\n      <span aria-hidden=\"true\" className={cn('size-1.5 shrink-0 rounded-full', DOT[tone])} />\n      {label}\n    </span>\n  )\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive'\n\nconst BUTTON: Record<ButtonVariant, string> = {\n  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',\n  secondary: 'border border-input bg-background text-foreground hover:bg-muted',\n  ghost: 'text-foreground hover:bg-muted',\n  destructive: 'border border-destructive/40 text-destructive hover:bg-destructive/10',\n}\n\nexport function ActionButton({\n  children,\n  onClick,\n  variant = 'secondary',\n  className,\n  type = 'button',\n  disabled,\n}: {\n  children: ReactNode\n  onClick?: () => void\n  variant?: ButtonVariant\n  className?: string\n  type?: 'button' | 'submit'\n  disabled?: boolean\n}) {\n  return (\n    <button\n      type={type}\n      onClick={onClick}\n      disabled={disabled}\n      className={cn(\n        'inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50',\n        BUTTON[variant],\n        className,\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport function Surface({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return (\n    <div className={cn('rounded-xl border bg-card text-card-foreground', className)}>{children}</div>\n  )\n}\n\n/** Always-visible card section for the economic summary and addresses. */\nexport function CardSection({\n  id,\n  title,\n  children,\n  className,\n}: {\n  id: string\n  title: string\n  children: ReactNode\n  className?: string\n}) {\n  const uid = useId()\n  const headingId = `${id}-heading-${uid}`\n  return (\n    <section\n      aria-labelledby={headingId}\n      className={cn('rounded-xl border bg-card text-card-foreground', className)}\n    >\n      <div className=\"p-4\">\n        <h2 id={headingId} className=\"text-sm font-semibold\">\n          {title}\n        </h2>\n        <div className=\"mt-3\">{children}</div>\n      </div>\n    </section>\n  )\n}\n\n/**\n * Expandable section. Native button + region keeps keyboard and screen-reader\n * behaviour obvious; the summary is always visible, even when collapsed.\n */\nexport function Disclosure({\n  id,\n  title,\n  description,\n  summary,\n  defaultOpen = true,\n  children,\n  heading,\n}: {\n  id: string\n  title: string\n  description?: string\n  summary?: ReactNode\n  defaultOpen?: boolean\n  children: ReactNode\n  heading?: string\n}) {\n  const [open, setOpen] = useDisclosureState(defaultOpen)\n  useEffect(() => setOpen(defaultOpen), [defaultOpen])\n  const uid = useId()\n  const regionId = `${id}-region-${uid}`\n  const headingId = `${id}-heading-${uid}`\n  const Heading = heading === 'h3' ? 'h3' : 'h2'\n\n  return (\n    <section aria-labelledby={headingId} className=\"rounded-xl border bg-card text-card-foreground\">\n      <div className=\"flex items-start gap-2 p-4\">\n        <div className=\"min-w-0 flex-1\">\n          <Heading id={headingId} className=\"text-sm font-semibold\">\n            {title}\n          </Heading>\n          {description ? (\n            <p className=\"mt-1 text-xs text-muted-foreground\">{description}</p>\n          ) : null}\n          {summary ? <div className=\"mt-2 text-xs text-muted-foreground\">{summary}</div> : null}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setOpen((value) => !value)}\n          aria-expanded={open}\n          aria-controls={regionId}\n          className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-input text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <span className=\"sr-only\">{title}</span>\n          <ChevronDown\n            className={cn('size-4 transition-transform', open ? 'rotate-180' : 'rotate-0')}\n          />\n        </button>\n      </div>\n      <div id={regionId} hidden={!open} className=\"border-t px-4 py-4\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\n// The tiny hook is kept here so the disclosure stays dependency-free and the\n// component files read like plain markup.\nfunction useDisclosureState(initial: boolean) {\n  return useState(initial)\n}\n\nexport function Rows({ children }: { children: ReactNode }) {\n  return <dl className=\"space-y-1.5 text-sm\">{children}</dl>\n}\n\nexport function Row({\n  label,\n  value,\n  strong,\n  tone,\n  className,\n}: {\n  label: string\n  value: ReactNode\n  strong?: boolean\n  tone?: 'muted' | 'warning'\n  className?: string\n}) {\n  return (\n    <div className={cn('flex items-baseline justify-between gap-3', className)}>\n      <dt className={cn('min-w-0 text-xs text-muted-foreground', tone === 'warning' && 'text-warning')}>\n        {label}\n      </dt>\n      <dd\n        className={cn(\n          'min-w-0 break-words text-right tabular-nums',\n          strong ? 'text-base font-semibold' : 'text-sm',\n          tone === 'warning' ? 'text-warning' : 'text-foreground',\n        )}\n      >\n        {value}\n      </dd>\n    </div>\n  )\n}\n\nexport function Notice({\n  children,\n  tone = 'neutral',\n}: {\n  children: ReactNode\n  tone?: 'neutral' | 'warning'\n}) {\n  return (\n    <p\n      className={cn(\n        'rounded-lg border px-3 py-2 text-xs',\n        tone === 'warning'\n          ? 'border-warning/40 bg-warning/10 text-foreground'\n          : 'border-border bg-muted/50 text-muted-foreground',\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport function EmptyLine({ children }: { children: ReactNode }) {\n  return <p className=\"text-xs text-muted-foreground\">{children}</p>\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/order-detail/components/ui.mjs

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { cn } from "@thorprovider/blocks";
+import { ChevronDown } from "./icons.mjs";
+const DOT = {
+  neutral: "bg-muted-foreground",
+  info: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive"
+};
+function Pill({
+  label,
+  tone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-1.5 shrink-0 rounded-full", DOT[tone]) }),
+        label
+      ]
+    }
+  );
+}
+const BUTTON = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "border border-input bg-background text-foreground hover:bg-muted",
+  ghost: "text-foreground hover:bg-muted",
+  destructive: "border border-destructive/40 text-destructive hover:bg-destructive/10"
+};
+function ActionButton({
+  children,
+  onClick,
+  variant = "secondary",
+  className,
+  type = "button",
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      onClick,
+      disabled,
+      className: cn(
+        "inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50",
+        BUTTON[variant],
+        className
+      ),
+      children
+    }
+  );
+}
+function Surface({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card text-card-foreground", className), children });
+}
+function CardSection({
+  id,
+  title,
+  children,
+  className
+}) {
+  const uid = useId();
+  const headingId = `${id}-heading-${uid}`;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-labelledby": headingId,
+      className: cn("rounded-xl border bg-card text-card-foreground", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsx("h2", { id: headingId, className: "text-sm font-semibold", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children })
+      ] })
+    }
+  );
+}
+function Disclosure({
+  id,
+  title,
+  description,
+  summary,
+  defaultOpen = true,
+  children,
+  heading
+}) {
+  const [open, setOpen] = useDisclosureState(defaultOpen);
+  useEffect(() => setOpen(defaultOpen), [defaultOpen]);
+  const uid = useId();
+  const regionId = `${id}-region-${uid}`;
+  const headingId = `${id}-heading-${uid}`;
+  const Heading = heading === "h3" ? "h3" : "h2";
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": headingId, className: "rounded-xl border bg-card text-card-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(Heading, { id: headingId, className: "text-sm font-semibold", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }) : null,
+        summary ? /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: summary }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((value) => !value),
+          "aria-expanded": open,
+          "aria-controls": regionId,
+          className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-input text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: title }),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn("size-4 transition-transform", open ? "rotate-180" : "rotate-0")
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { id: regionId, hidden: !open, className: "border-t px-4 py-4", children })
+  ] });
+}
+function useDisclosureState(initial) {
+  return useState(initial);
+}
+function Rows({ children }) {
+  return /* @__PURE__ */ jsx("dl", { className: "space-y-1.5 text-sm", children });
+}
+function Row({
+  label,
+  value,
+  strong,
+  tone,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-baseline justify-between gap-3", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: cn("min-w-0 text-xs text-muted-foreground", tone === "warning" && "text-warning"), children: label }),
+    /* @__PURE__ */ jsx(
+      "dd",
+      {
+        className: cn(
+          "min-w-0 break-words text-right tabular-nums",
+          strong ? "text-base font-semibold" : "text-sm",
+          tone === "warning" ? "text-warning" : "text-foreground"
+        ),
+        children: value
+      }
+    )
+  ] });
+}
+function Notice({
+  children,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "rounded-lg border px-3 py-2 text-xs",
+        tone === "warning" ? "border-warning/40 bg-warning/10 text-foreground" : "border-border bg-muted/50 text-muted-foreground"
+      ),
+      children
+    }
+  );
+}
+function EmptyLine({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children });
+}
+export {
+  ActionButton,
+  CardSection,
+  Disclosure,
+  EmptyLine,
+  Notice,
+  Pill,
+  Row,
+  Rows,
+  Surface
+};
+//# sourceMappingURL=ui.mjs.map

package/dist/blocks/designs/order-detail/components/ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-detail/components/ui.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { cn } from '@thorprovider/blocks'\n\nimport type { Money, Tone } from '../contracts'\nimport { ChevronDown } from './icons'\n\nexport type MoneyFormatter = (money: Money) => string\nexport type DateFormatter = (iso: string) => string\n\nconst DOT: Record<Tone, string> = {\n  neutral: 'bg-muted-foreground',\n  info: 'bg-primary',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-destructive',\n}\n\nexport function Pill({\n  label,\n  tone = 'neutral',\n  className,\n}: {\n  label: string\n  tone?: Tone\n  className?: string\n}) {\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground',\n        className,\n      )}\n    >\n      <span aria-hidden=\"true\" className={cn('size-1.5 shrink-0 rounded-full', DOT[tone])} />\n      {label}\n    </span>\n  )\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive'\n\nconst BUTTON: Record<ButtonVariant, string> = {\n  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',\n  secondary: 'border border-input bg-background text-foreground hover:bg-muted',\n  ghost: 'text-foreground hover:bg-muted',\n  destructive: 'border border-destructive/40 text-destructive hover:bg-destructive/10',\n}\n\nexport function ActionButton({\n  children,\n  onClick,\n  variant = 'secondary',\n  className,\n  type = 'button',\n  disabled,\n}: {\n  children: ReactNode\n  onClick?: () => void\n  variant?: ButtonVariant\n  className?: string\n  type?: 'button' | 'submit'\n  disabled?: boolean\n}) {\n  return (\n    <button\n      type={type}\n      onClick={onClick}\n      disabled={disabled}\n      className={cn(\n        'inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50',\n        BUTTON[variant],\n        className,\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport function Surface({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return (\n    <div className={cn('rounded-xl border bg-card text-card-foreground', className)}>{children}</div>\n  )\n}\n\n/** Always-visible card section for the economic summary and addresses. */\nexport function CardSection({\n  id,\n  title,\n  children,\n  className,\n}: {\n  id: string\n  title: string\n  children: ReactNode\n  className?: string\n}) {\n  const uid = useId()\n  const headingId = `${id}-heading-${uid}`\n  return (\n    <section\n      aria-labelledby={headingId}\n      className={cn('rounded-xl border bg-card text-card-foreground', className)}\n    >\n      <div className=\"p-4\">\n        <h2 id={headingId} className=\"text-sm font-semibold\">\n          {title}\n        </h2>\n        <div className=\"mt-3\">{children}</div>\n      </div>\n    </section>\n  )\n}\n\n/**\n * Expandable section. Native button + region keeps keyboard and screen-reader\n * behaviour obvious; the summary is always visible, even when collapsed.\n */\nexport function Disclosure({\n  id,\n  title,\n  description,\n  summary,\n  defaultOpen = true,\n  children,\n  heading,\n}: {\n  id: string\n  title: string\n  description?: string\n  summary?: ReactNode\n  defaultOpen?: boolean\n  children: ReactNode\n  heading?: string\n}) {\n  const [open, setOpen] = useDisclosureState(defaultOpen)\n  useEffect(() => setOpen(defaultOpen), [defaultOpen])\n  const uid = useId()\n  const regionId = `${id}-region-${uid}`\n  const headingId = `${id}-heading-${uid}`\n  const Heading = heading === 'h3' ? 'h3' : 'h2'\n\n  return (\n    <section aria-labelledby={headingId} className=\"rounded-xl border bg-card text-card-foreground\">\n      <div className=\"flex items-start gap-2 p-4\">\n        <div className=\"min-w-0 flex-1\">\n          <Heading id={headingId} className=\"text-sm font-semibold\">\n            {title}\n          </Heading>\n          {description ? (\n            <p className=\"mt-1 text-xs text-muted-foreground\">{description}</p>\n          ) : null}\n          {summary ? <div className=\"mt-2 text-xs text-muted-foreground\">{summary}</div> : null}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setOpen((value) => !value)}\n          aria-expanded={open}\n          aria-controls={regionId}\n          className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-input text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <span className=\"sr-only\">{title}</span>\n          <ChevronDown\n            className={cn('size-4 transition-transform', open ? 'rotate-180' : 'rotate-0')}\n          />\n        </button>\n      </div>\n      <div id={regionId} hidden={!open} className=\"border-t px-4 py-4\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\n// The tiny hook is kept here so the disclosure stays dependency-free and the\n// component files read like plain markup.\nfunction useDisclosureState(initial: boolean) {\n  return useState(initial)\n}\n\nexport function Rows({ children }: { children: ReactNode }) {\n  return <dl className=\"space-y-1.5 text-sm\">{children}</dl>\n}\n\nexport function Row({\n  label,\n  value,\n  strong,\n  tone,\n  className,\n}: {\n  label: string\n  value: ReactNode\n  strong?: boolean\n  tone?: 'muted' | 'warning'\n  className?: string\n}) {\n  return (\n    <div className={cn('flex items-baseline justify-between gap-3', className)}>\n      <dt className={cn('min-w-0 text-xs text-muted-foreground', tone === 'warning' && 'text-warning')}>\n        {label}\n      </dt>\n      <dd\n        className={cn(\n          'min-w-0 break-words text-right tabular-nums',\n          strong ? 'text-base font-semibold' : 'text-sm',\n          tone === 'warning' ? 'text-warning' : 'text-foreground',\n        )}\n      >\n        {value}\n      </dd>\n    </div>\n  )\n}\n\nexport function Notice({\n  children,\n  tone = 'neutral',\n}: {\n  children: ReactNode\n  tone?: 'neutral' | 'warning'\n}) {\n  return (\n    <p\n      className={cn(\n        'rounded-lg border px-3 py-2 text-xs',\n        tone === 'warning'\n          ? 'border-warning/40 bg-warning/10 text-foreground'\n          : 'border-border bg-muted/50 text-muted-foreground',\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport function EmptyLine({ children }: { children: ReactNode }) {\n  return <p className=\"text-xs text-muted-foreground\">{children}</p>\n}\n"],"mappings":"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","names":[]}