@designa8/vibedesign-stripe-deepseek-85ea 0.2.3 → 0.3.0

package/src/atoms/Panel/preview.tsx

@@ -0,0 +1,196 @@
+import * as React from "react";
+import { Panel } from "./Panel";
+import { Button } from "../Button";
+import { ButtonGroup } from "../ButtonGroup";
+import { Badge } from "../Badge";
+import { Checkbox } from "../Checkbox";
+import { Icon } from "../Icon";
+import { CashFlowChart } from "../CashFlowChart";
+
+const accounts = [
+  {
+    icon: "wallet",
+    name: "Atlas Commerce",
+    kind: "Business account",
+    amount: "$24,800.00",
+    delta: "+6.2%",
+    tone: "success" as const,
+  },
+  {
+    icon: "layers",
+    name: "Nimbus Pay",
+    kind: "Payment account",
+    amount: "$8,420.50",
+    delta: "−2.4%",
+    tone: "error" as const,
+  },
+  {
+    icon: "building",
+    name: "Vertex Bank",
+    kind: "Settlement account",
+    amount: "$102,309.00",
+    delta: "+3.8%",
+    tone: "success" as const,
+  },
+];
+
+const cashFlow = [
+  { label: "Jan", moneyIn: 61000, moneyOut: 42000 },
+  { label: "Feb", moneyIn: 82000, moneyOut: 57000 },
+  { label: "Mar", moneyIn: 74000, moneyOut: 51000 },
+  { label: "Apr", moneyIn: 91000, moneyOut: 63000 },
+  { label: "May", moneyIn: 113000, moneyOut: 71000 },
+  { label: "Jun", moneyIn: 121000, moneyOut: 78000 },
+];
+
+const tasks = [
+  { id: "payouts", label: "Review pending payouts", due: "Today" },
+  { id: "confirm", label: "Confirm new account", due: "Jun 28" },
+  { id: "routing", label: "Update routing rules", due: "Jun 30" },
+];
+
+export default function PanelPreview() {
+  const [range, setRange] = React.useState("3m");
+  const [checked, setChecked] = React.useState<Record<string, boolean>>({
+    payouts: false,
+    confirm: true,
+    routing: false,
+  });
+
+  const done = Object.values(checked).filter(Boolean).length;
+  const open = tasks.length - done;
+
+  return (
+    <div className="w-full max-w-5xl mx-auto p-lg">
+      <div className="grid grid-cols-1 gap-lg lg:grid-cols-2">
+        {/* Header with a caption, a segmented range toggle, and a list body. */}
+        <Panel
+          title="Accounts"
+          meta="3 accounts"
+          actions={
+            <div className="w-40">
+              <ButtonGroup
+                label="Accounts range"
+                size="sm"
+                value={range}
+                onValueChange={setRange}
+                options={[
+                  { value: "1m", label: "1M" },
+                  { value: "3m", label: "3M" },
+                  { value: "1y", label: "1Y" },
+                ]}
+              />
+            </div>
+          }
+        >
+          {accounts.map((account) => (
+            <div
+              key={account.name}
+              className="flex min-w-0 items-center justify-between gap-md rounded-lg border border-hairline bg-canvas px-md py-sm transition-colors duration-150 ease-out hover:border-hairline-strong hover:bg-surface-soft"
+            >
+              <div className="flex min-w-0 items-center gap-md">
+                <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary-subdued text-primary-on-subdued">
+                  <Icon name={account.icon} size={18} />
+                </span>
+                <span className="flex min-w-0 flex-col">
+                  <span className="truncate text-body-md text-ink">
+                    {account.name}
+                  </span>
+                  <span className="truncate text-caption text-muted">
+                    {account.kind}
+                  </span>
+                </span>
+              </div>
+              <span className="flex shrink-0 items-center gap-sm">
+                <span className="text-body-tabular text-ink">
+                  {account.amount}
+                </span>
+                <Badge
+                  variant="soft"
+                  tone={account.tone}
+                  size="sm"
+                  showDot={false}
+                >
+                  {account.delta}
+                </Badge>
+              </span>
+            </div>
+          ))}
+        </Panel>
+
+        {/* Caption on the right, a data body with its own legend. */}
+        <Panel title="Cash flow" meta="Updated 9:41">
+          <CashFlowChart points={cashFlow} />
+        </Panel>
+
+        {/* Live checkbox body — the caption follows the checked count. */}
+        <Panel title="Tasks" meta={`${open} open`}>
+          {tasks.map((task) => (
+            <div
+              key={task.id}
+              className="flex min-w-0 items-center justify-between gap-md rounded-lg border border-hairline bg-canvas px-md py-xs transition-colors duration-150 ease-out hover:border-hairline-strong"
+            >
+              <Checkbox
+                chrome="bare"
+                size="sm"
+                label={task.label}
+                checked={checked[task.id]}
+                onChange={(next) =>
+                  setChecked((prev) => ({ ...prev, [task.id]: next }))
+                }
+              />
+              <Badge variant="soft" tone="neutral" size="sm" showDot={false}>
+                {task.due}
+              </Badge>
+            </div>
+          ))}
+        </Panel>
+
+        {/* Empty body: muted centred copy and one quiet action. */}
+        <Panel title="Insights" headingLevel={3}>
+          <div className="flex flex-col items-center gap-md py-xxl text-center">
+            <span className="flex size-12 items-center justify-center rounded-lg bg-primary-subdued text-primary-on-subdued">
+              <Icon name="chart-column" size={20} />
+            </span>
+            <span className="flex flex-col gap-xs">
+              <span className="text-body-md text-ink">No insights yet</span>
+              <span className="text-caption text-muted">
+                Run an analysis to see trends and opportunities.
+              </span>
+            </span>
+            <Button variant="outline-brand" size="sm">
+              Run analysis
+            </Button>
+          </div>
+        </Panel>
+      </div>
+
+      {/* Error body: the surface stays calm, the callout carries the tone. */}
+      <div className="mt-lg">
+        <Panel title="Data sync" meta="Last attempt 9:41" headingLevel={3}>
+          <div className="flex flex-col items-center gap-md rounded-lg bg-semantic-error-soft p-lg text-center">
+            <span className="flex size-10 items-center justify-center rounded-full bg-canvas text-semantic-error">
+              <Icon name="triangle" size={18} />
+            </span>
+            <span className="flex flex-col gap-xs">
+              <span className="text-body-md text-semantic-error">
+                Couldn&rsquo;t load data
+              </span>
+              <span className="text-caption text-muted">
+                We weren&rsquo;t able to fetch the latest information. Please try
+                again.
+              </span>
+            </span>
+            <Button
+              variant="outline-brand"
+              size="sm"
+              leadingIcon={<Icon name="refresh-cw" size={16} />}
+            >
+              Try again
+            </Button>
+          </div>
+        </Panel>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -58,6 +58,7 @@ export * from "./atoms/NavigationMenuMobile";
 export * from "./atoms/NodeConfigPanel";
 export * from "./atoms/NotificationFeed";
 export * from "./atoms/Pagination";
+export * from "./atoms/Panel";
 export * from "./atoms/PaymentRoutingCanvas";
 export * from "./atoms/PricingTable";
 export * from "./atoms/PricingTableDesktop";