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

package/dist/styles.css

@@ -3804,6 +3804,11 @@
       width: calc(var(--spacing) * 64);
     }
   }
+  .lg\:grid-cols-2 {
+    @media (width >= 1024px) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 1024px) {
       grid-template-columns: repeat(4, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-85ea",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -324,6 +324,11 @@
         "kind": "Molecule",
         "description": null
       },
+      {
+        "name": "Panel",
+        "kind": "Molecule",
+        "description": null
+      },
       {
         "name": "PaymentRoutingCanvas",
         "kind": "Organism",

package/src/atoms/Icon/icons.data.ts

@@ -94,6 +94,7 @@ export const ICON_REGISTRY = {
   "euro": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M4 10h12" }, { tag: "path", d: "M4 14h9" }, { tag: "path", d: "M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2" }] },
   "square": { viewBox: "0 0 24 24", nodes: [{ tag: "rect", width: "18", height: "18", x: "3", y: "3", rx: "2" }] },
   "eye-off": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, { tag: "path", d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, { tag: "path", d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, { tag: "path", d: "m2 2 20 20" }] },
+  "chart-column": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M3 3v16a2 2 0 0 0 2 2h16" }, { tag: "path", d: "M18 17V9" }, { tag: "path", d: "M13 17V5" }, { tag: "path", d: "M8 17v-3" }] },
 } as const;
 
 export type IconName = keyof typeof ICON_REGISTRY;

package/src/atoms/Panel/Panel.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+
+const cn = (...values: Array<string | false | null | undefined>) =>
+  values.filter(Boolean).join(" ");
+
+export interface PanelProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** The panel's heading. Rendered as an `<h2>` by default. */
+  title: React.ReactNode;
+  /**
+   * Right-aligned caption in the header — a quiet count or timestamp such as
+   * "3 accounts" or "Updated 9:41". Never emphasised, never a badge.
+   */
+  meta?: React.ReactNode;
+  /**
+   * Controls pinned to the right of the header, after the meta caption — a
+   * segmented range toggle, an icon button, a link. The panel adds no chrome
+   * around them.
+   */
+  actions?: React.ReactNode;
+  /**
+   * Heading rank, so the panel nests correctly under the page's `<h1>`.
+   * `2` renders `<h2>` (default), `3` renders `<h3>`.
+   */
+  headingLevel?: 2 | 3;
+  /** Panel body. Laid out as a column with a `md` gap between children. */
+  children?: React.ReactNode;
+}
+
+/**
+ * A titled section surface: one calm card that carries a heading, an optional
+ * right-aligned caption, an optional actions slot, and a body the caller fills
+ * with rows, charts, or tasks.
+ *
+ * The surface owns the only stroke (one hairline), the radius, and the soft card
+ * shadow, and it clips whatever the caller drops inside so a full-bleed child
+ * cannot poke through the corners. It is a container, not a control: no hover
+ * lift, no press scale, no focus ring, no cursor change — every interactive
+ * affordance belongs to a child that can actually be pressed.
+ *
+ * Every colour, radius, spacing step, and type role is a token utility, so the
+ * whole surface repaints under `[data-theme="dark"]`.
+ */
+export const Panel = React.forwardRef<HTMLElement, PanelProps>(
+  (
+    {
+      title,
+      meta,
+      actions,
+      headingLevel = 2,
+      id,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const baseId = id ?? generatedId;
+    const titleId = `${baseId}-title`;
+    const Heading = (headingLevel === 3 ? "h3" : "h2") as "h2" | "h3";
+    const hasTrailing = Boolean(meta) || Boolean(actions);
+
+    return (
+      <section
+        ref={ref}
+        id={id}
+        aria-labelledby={titleId}
+        className={cn(
+          "w-full min-w-0 overflow-hidden rounded-xl border border-hairline",
+          "bg-surface p-xl shadow-card",
+          className,
+        )}
+        {...rest}
+      >
+        <div className="mb-lg flex min-w-0 flex-wrap items-center justify-between gap-x-md gap-y-sm">
+          <Heading
+            id={titleId}
+            className="min-w-0 truncate text-heading-sm text-ink"
+          >
+            {title}
+          </Heading>
+
+          {hasTrailing ? (
+            <div className="ml-auto flex shrink-0 items-center gap-md">
+              {meta ? (
+                <span className="whitespace-nowrap text-caption text-muted">
+                  {meta}
+                </span>
+              ) : null}
+              {actions}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex min-w-0 flex-col gap-md">{children}</div>
+      </section>
+    );
+  },
+);
+
+Panel.displayName = "Panel";

package/src/atoms/Panel/index.ts

@@ -0,0 +1,2 @@
+export { Panel } from "./Panel";
+export type { PanelProps } from "./Panel";

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";