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

package/dist/styles.css

@@ -3461,6 +3461,11 @@
       width: calc(var(--spacing) * 64);
     }
   }
+  .sm\:w-80 {
+    @media (width >= 640px) {
+      width: calc(var(--spacing) * 80);
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 640px) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3799,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.3",
+  "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/DataTable/DataTable.tsx

@@ -38,6 +38,12 @@ export interface DataTableProps<T extends DataTableBaseRow = DataTableBaseRow>
   onFilterChange?: (value: string) => void;
   filterBy?: (row: T, value: string) => boolean;
   searchPlaceholder?: string;
+  /**
+   * Renders the built-in search field in both layouts. Defaults to true. Set
+   * it to false when the page already owns a global search bar: `query` and
+   * `searchBy` keep filtering exactly the same, only the field is left out.
+   */
+  searchable?: boolean;
   query?: string;
   onQueryChange?: (value: string) => void;
   searchBy?: (row: T) => string;
@@ -96,6 +102,7 @@ function DataTableInner<T extends DataTableBaseRow>(
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable,
     query,
     onQueryChange,
     searchBy,
@@ -167,6 +174,7 @@ function DataTableInner<T extends DataTableBaseRow>(
     onFilterChange: handleFilter,
     filterBy,
     searchPlaceholder,
+    searchable,
     query: activeQuery,
     onQueryChange: handleQuery,
     searchBy,

package/src/atoms/DataTable/preview.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { Badge } from "../Badge";
 import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { Input } from "../Input";
 import { DataTable } from "./DataTable";
 import type { DataTableColumn, DataTableFilter, DataTableRange } from "./DataTable";
 
@@ -148,6 +150,7 @@ export default function Preview() {
   const [selected, setSelected] = React.useState<string[]>([]);
   const [filter, setFilter] = React.useState("all");
   const [query, setQuery] = React.useState("");
+  const [pageQuery, setPageQuery] = React.useState("");
 
   return (
     <div className="w-full max-w-5xl mx-auto p-lg space-y-lg bg-canvas">
@@ -221,6 +224,46 @@ export default function Preview() {
         selectable={false}
         mobileRow={mobileRow}
       />
+
+      <div className="flex w-full flex-col gap-md">
+        <div className="flex w-full flex-col gap-xs">
+          <p className="text-body-lg text-ink">Page-level search</p>
+          <p className="text-body-sm text-muted">
+            The table renders no field of its own, but the controlled query
+            still filters both layouts.
+          </p>
+        </div>
+
+        <div className="w-full sm:w-80">
+          <Input
+            size="md"
+            type="search"
+            value={pageQuery}
+            onChange={(event) => setPageQuery(event.target.value)}
+            ariaLabel="Search all invoices"
+            placeholder="Search all invoices"
+            leading={<Icon name="search" size={16} strokeWidth={2} tone="default" />}
+          />
+        </div>
+
+        <DataTable<Invoice>
+          columns={columns}
+          rows={invoices}
+          searchable={false}
+          query={pageQuery}
+          onQueryChange={setPageQuery}
+          searchBy={(row) => `${row.id} ${row.customer}`}
+          filters={filters.slice(0, 1)}
+          pageSize={5}
+          mobilePageSize={4}
+          itemLabel="invoices"
+          dense
+          selectable={false}
+          mobileRow={mobileRow}
+          emptyTitle="Nothing matches that search"
+          emptyDescription="Try a customer name or an invoice number."
+        />
+      </div>
     </div>
   );
 }

package/src/atoms/DataTableDesktop/DataTableDesktop.tsx

@@ -226,6 +226,12 @@ export interface DataTableDesktopProps<
   /** Row predicate for the active filter. `"all"` always shows everything. */
   filterBy?: (row: T, value: string) => boolean;
   searchPlaceholder?: string;
+  /**
+   * Renders the built-in search field. Defaults to true. Set it to false when
+   * the page already owns a global search bar: `query` and `searchBy` keep
+   * filtering exactly the same, only the field is left out.
+   */
+  searchable?: boolean;
   /** Controlled search text. */
   query?: string;
   onQueryChange?: (value: string) => void;
@@ -277,6 +283,7 @@ function DataTableDesktopInner<T extends DataTableBaseRow>(
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -505,6 +512,10 @@ function DataTableDesktopInner<T extends DataTableBaseRow>(
 
   const rangeTriggerLabel = activeRange?.detail ?? activeRange?.label ?? "";
 
+  /** The tool row is only worth its vertical space when it holds something. */
+  const showToolRow =
+    searchable || activeFilters.length > 0 || Boolean(activeRange) || Boolean(toolbar);
+
   return (
     <div
       ref={ref}
@@ -526,89 +537,93 @@ function DataTableDesktopInner<T extends DataTableBaseRow>(
           </div>
         ) : null}
 
-        <div className="flex flex-wrap items-center gap-sm">
-          <div className="w-full shrink-0 sm:w-64">
-            <Input
-              size="md"
-              type="search"
-              value={activeQuery}
-              onChange={(event) => applyQuery(event.target.value)}
-              ariaLabel={searchPlaceholder ?? "Search table"}
-              placeholder={searchPlaceholder ?? "Search"}
-              leading={
-                <Icon name="search" size={16} strokeWidth={2} tone="default" />
-              }
-            />
-          </div>
-
-          {activeFilters.length > 0 ? (
-            <div className="flex flex-wrap items-center gap-xs">
-              {activeFilters.map((item) => (
-                <Chip
-                  key={item.value}
-                  appearance="outline"
+        {showToolRow ? (
+          <div className="flex flex-wrap items-center gap-sm">
+            {searchable ? (
+              <div className="w-full shrink-0 sm:w-64">
+                <Input
                   size="md"
-                  selected={activeFilter === item.value}
-                  onClick={() => applyFilter(item.value)}
-                >
-                  {item.label}
-                  {typeof item.count === "number" ? (
-                    <span className="ml-xs text-muted-soft">{item.count}</span>
-                  ) : null}
-                </Chip>
-              ))}
-            </div>
-          ) : null}
+                  type="search"
+                  value={activeQuery}
+                  onChange={(event) => applyQuery(event.target.value)}
+                  ariaLabel={searchPlaceholder ?? "Search table"}
+                  placeholder={searchPlaceholder ?? "Search"}
+                  leading={
+                    <Icon name="search" size={16} strokeWidth={2} tone="default" />
+                  }
+                />
+              </div>
+            ) : null}
 
-          {activeRange ? (
-            <div className="relative shrink-0">
-              <Button
-                ref={triggerRef}
-                variant="field-soft"
-                size="field"
-                className="w-auto"
-                aria-expanded={rangeOpen}
-                aria-controls={panelId}
-                aria-haspopup="menu"
-                aria-label={`Date range: ${rangeTriggerLabel}`}
-                onClick={() => {
-                  placePanel();
-                  setRangeOpen((value) => !value);
-                }}
-                leadingIcon={
-                  <Icon
-                    name="calendar"
-                    size={16}
-                    strokeWidth={1.75}
-                    tone="default"
-                  />
-                }
-                trailingIcon={
-                  <Icon
-                    name="chevron-down"
-                    size={16}
-                    strokeWidth={2}
-                    tone="muted"
-                    className={cn(
-                      "transition-transform duration-200 ease-out",
-                      rangeOpen && "rotate-180",
-                    )}
-                  />
-                }
-              >
-                <span className="whitespace-nowrap text-body-sm text-ink">
-                  {rangeTriggerLabel}
-                </span>
-              </Button>
-            </div>
-          ) : null}
+            {activeFilters.length > 0 ? (
+              <div className="flex flex-wrap items-center gap-xs">
+                {activeFilters.map((item) => (
+                  <Chip
+                    key={item.value}
+                    appearance="outline"
+                    size="md"
+                    selected={activeFilter === item.value}
+                    onClick={() => applyFilter(item.value)}
+                  >
+                    {item.label}
+                    {typeof item.count === "number" ? (
+                      <span className="ml-xs text-muted-soft">{item.count}</span>
+                    ) : null}
+                  </Chip>
+                ))}
+              </div>
+            ) : null}
 
-          {toolbar ? (
-            <div className="ml-auto flex shrink-0 items-center gap-xs">
-              {toolbar}
-            </div>
-          ) : null}
-        </div>
+            {activeRange ? (
+              <div className="relative shrink-0">
+                <Button
+                  ref={triggerRef}
+                  variant="field-soft"
+                  size="field"
+                  className="w-auto"
+                  aria-expanded={rangeOpen}
+                  aria-controls={panelId}
+                  aria-haspopup="menu"
+                  aria-label={`Date range: ${rangeTriggerLabel}`}
+                  onClick={() => {
+                    placePanel();
+                    setRangeOpen((value) => !value);
+                  }}
+                  leadingIcon={
+                    <Icon
+                      name="calendar"
+                      size={16}
+                      strokeWidth={1.75}
+                      tone="default"
+                    />
+                  }
+                  trailingIcon={
+                    <Icon
+                      name="chevron-down"
+                      size={16}
+                      strokeWidth={2}
+                      tone="muted"
+                      className={cn(
+                        "transition-transform duration-200 ease-out",
+                        rangeOpen && "rotate-180",
+                      )}
+                    />
+                  }
+                >
+                  <span className="whitespace-nowrap text-body-sm text-ink">
+                    {rangeTriggerLabel}
+                  </span>
+                </Button>
+              </div>
+            ) : null}
+
+            {toolbar ? (
+              <div className="ml-auto flex shrink-0 items-center gap-xs">
+                {toolbar}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
       </div>
 
       {activeRange && typeof document !== "undefined"

package/src/atoms/DataTableMobile/DataTableMobile.tsx

@@ -121,6 +121,12 @@ export interface DataTableMobileProps<
   onFilterChange?: (value: string) => void;
   filterBy?: (row: T, value: string) => boolean;
   searchPlaceholder?: string;
+  /**
+   * Renders the built-in search field. Defaults to true. Set it to false when
+   * the page already owns a global search bar: `query` and `searchBy` keep
+   * filtering exactly the same, only the field is left out.
+   */
+  searchable?: boolean;
   query?: string;
   onQueryChange?: (value: string) => void;
   searchBy?: (row: T) => string;
@@ -310,6 +316,7 @@ function DataTableMobileInner<T extends DataTableMobileBaseRow>(
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -441,6 +448,13 @@ function DataTableMobileInner<T extends DataTableMobileBaseRow>(
   const trailingText = activeSpec?.trailing;
   const metaText = activeSpec?.meta;
 
+  const hasRanges = Boolean(ranges && ranges.length > 0);
+
+  /** Nothing to show above the list means no header block, and no dead space. */
+  const hasHeader = Boolean(
+    title || description || searchable || activeFilters.length > 0 || hasRanges || toolbar,
+  );
+
   return (
     <div
       ref={ref}
@@ -450,77 +464,83 @@ function DataTableMobileInner<T extends DataTableMobileBaseRow>(
       )}
       {...rest}
     >
-      <div className="flex w-full flex-col gap-base px-lg pt-lg pb-base">
-        {title || description ? (
-          <div className="flex flex-col gap-xs">
-            {title ? <p className="text-body-lg text-ink">{title}</p> : null}
-            {description ? (
-              <p className="text-body-sm text-muted">{description}</p>
-            ) : null}
-          </div>
-        ) : null}
-
-        <div
-          className={cn(
-            "flex min-h-12 w-full items-center gap-sm rounded-xl border px-base",
-            "border-hairline bg-canvas",
-            "transition duration-150 ease-out",
-            "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
-          )}
-        >
-          <Input
-            chrome="embedded"
-            type="search"
-            value={activeQuery}
-            onChange={(event) => applyQuery(event.target.value)}
-            placeholder={searchPlaceholder ?? "Search"}
-            ariaLabel={searchPlaceholder ?? "Search table"}
-            autoComplete="off"
-            className="flex-1"
-            inputClassName="[&::-webkit-search-cancel-button]:appearance-none"
-            leading={
-              <Icon name="search" size={18} strokeWidth={2} tone="default" />
-            }
-          />
+      {hasHeader ? (
+        <div className="flex w-full flex-col gap-base px-lg pt-lg pb-base">
+          {title || description ? (
+            <div className="flex flex-col gap-xs">
+              {title ? <p className="text-body-lg text-ink">{title}</p> : null}
+              {description ? (
+                <p className="text-body-sm text-muted">{description}</p>
+              ) : null}
+            </div>
+          ) : null}
+
+          {searchable ? (
+            <div
+              className={cn(
+                "flex min-h-12 w-full items-center gap-sm rounded-xl border px-base",
+                "border-hairline bg-canvas",
+                "transition duration-150 ease-out",
+                "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+              )}
+            >
+              <Input
+                chrome="embedded"
+                type="search"
+                value={activeQuery}
+                onChange={(event) => applyQuery(event.target.value)}
+                placeholder={searchPlaceholder ?? "Search"}
+                ariaLabel={searchPlaceholder ?? "Search table"}
+                autoComplete="off"
+                className="flex-1"
+                inputClassName="[&::-webkit-search-cancel-button]:appearance-none"
+                leading={
+                  <Icon name="search" size={18} strokeWidth={2} tone="default" />
+                }
+              />
+            </div>
+          ) : null}
+
+          {activeFilters.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-xs">
+              {activeFilters.map((item) => (
+                <Chip
+                  key={item.value}
+                  appearance="outline"
+                  size="md"
+                  selected={activeFilter === item.value}
+                  onClick={() => applyFilter(item.value)}
+                >
+                  {item.label}
+                  {typeof item.count === "number" ? (
+                    <span className="ml-xs text-muted-soft">{item.count}</span>
+                  ) : null}
+                </Chip>
+              ))}
+            </div>
+          ) : null}
+
+          {hasRanges && ranges ? (
+            <div className="flex flex-wrap items-center gap-base">
+              <FilterPill
+                menuLabel="Date range"
+                options={ranges.map((item) => ({
+                  value: item.value,
+                  label: item.detail
+                    ? `${item.label} · ${item.detail}`
+                    : item.label,
+                }))}
+                value={activeRange?.value ?? ranges[0].value}
+                onValueChange={applyRange}
+              />
+            </div>
+          ) : null}
+
+          {toolbar ? (
+            <div className="flex flex-wrap items-center gap-xs">{toolbar}</div>
+          ) : null}
         </div>
-
-        {activeFilters.length > 0 ? (
-          <div className="flex flex-wrap items-center gap-xs">
-            {activeFilters.map((item) => (
-              <Chip
-                key={item.value}
-                appearance="outline"
-                size="md"
-                selected={activeFilter === item.value}
-                onClick={() => applyFilter(item.value)}
-              >
-                {item.label}
-                {typeof item.count === "number" ? (
-                  <span className="ml-xs text-muted-soft">{item.count}</span>
-                ) : null}
-              </Chip>
-            ))}
-          </div>
-        ) : null}
-
-        {ranges && ranges.length > 0 ? (
-          <div className="flex flex-wrap items-center gap-base">
-            <FilterPill
-              menuLabel="Date range"
-              options={ranges.map((item) => ({
-                value: item.value,
-                label: item.detail ? `${item.label} · ${item.detail}` : item.label,
-              }))}
-              value={activeRange?.value ?? ranges[0].value}
-              onValueChange={applyRange}
-            />
-          </div>
-        ) : null}
-
-        {toolbar ? (
-          <div className="flex flex-wrap items-center gap-xs">{toolbar}</div>
-        ) : null}
-      </div>
+      ) : null}
 
       {bulkActions && selected.length > 0 ? (
         <div className="flex flex-wrap items-center gap-sm border-t border-hairline bg-surface-soft px-lg py-sm">

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