@designa8/vibedesign-stripe-deepseek-2-176b 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-2-176b
 
-Complete design system generated by Atoms Design, version **0.1.0**.
+Complete design system generated by Atoms Design, version **0.1.2**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/styles.css

@@ -387,6 +387,9 @@
   .-top-xs {
     top: calc(var(--spacing-xs) * -1);
   }
+  .-top-xxs {
+    top: calc(var(--spacing-xxs) * -1);
+  }
   .top-0 {
     top: 0;
   }
@@ -408,6 +411,9 @@
   .-right-xs {
     right: calc(var(--spacing-xs) * -1);
   }
+  .-right-xxs {
+    right: calc(var(--spacing-xxs) * -1);
+  }
   .right-0 {
     right: 0;
   }
@@ -929,9 +935,6 @@
   .max-w-dialog {
     max-width: var(--container-dialog);
   }
-  .max-w-drawer {
-    max-width: var(--container-drawer);
-  }
   .max-w-full {
     max-width: 100%;
   }
@@ -953,6 +956,9 @@
   .min-w-0 {
     min-width: 0;
   }
+  .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
   .min-w-xl {
     min-width: var(--spacing-xl);
   }
@@ -1764,6 +1770,9 @@
   .px-xxl {
     padding-inline: var(--spacing-xxl);
   }
+  .px-xxs {
+    padding-inline: var(--spacing-xxs);
+  }
   .py-0 {
     padding-block: 0;
   }
@@ -1830,9 +1839,6 @@
   .pr-md {
     padding-right: var(--spacing-md);
   }
-  .pr-sm {
-    padding-right: var(--spacing-sm);
-  }
   .pr-xl {
     padding-right: var(--spacing-xl);
   }
@@ -3337,6 +3343,16 @@
       padding-left: var(--spacing-xl);
     }
   }
+  .md\:sticky {
+    @media (width >= 768px) {
+      position: sticky;
+    }
+  }
+  .md\:top-0 {
+    @media (width >= 768px) {
+      top: 0;
+    }
+  }
   .md\:col-span-1 {
     @media (width >= 768px) {
       grid-column: span 1 / span 1;
@@ -3377,6 +3393,11 @@
       display: none;
     }
   }
+  .md\:h-dvh {
+    @media (width >= 768px) {
+      height: 100dvh;
+    }
+  }
   .md\:w-40 {
     @media (width >= 768px) {
       width: calc(var(--spacing) * 40);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-2-176b",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/DataTable/DataTable.tsx

@@ -1,77 +1,228 @@
 import * as React from "react";
 import { DataTableDesktop } from "../DataTableDesktop";
-import type { PaymentRow } from "../DataTableDesktop";
+import type {
+  DataTableBaseRow,
+  DataTableColumn,
+  DataTableDesktopProps,
+  DataTableFilter,
+  DataTableRange,
+} from "../DataTableDesktop";
 import { DataTableMobile } from "../DataTableMobile";
-import type { MobilePaymentRow } from "../DataTableMobile";
+import type {
+  DataTableMobileRowSpec,
+  DataTableMobileProps,
+} from "../DataTableMobile";
 
 const cn = (...values: Array<string | false | null | undefined>) =>
   values.filter(Boolean).join(" ");
 
-export interface DataTableProps
+/**
+ * The generic table contract. `columns` drives the wide layout and `mobileRow`
+ * drives the stacked one; everything else is shared, so both halves always show
+ * the same filtered, searched, sorted, selected and paginated slice.
+ */
+export interface DataTableProps<T extends DataTableBaseRow = DataTableBaseRow>
   extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "title"> {
-  /**
-   * Ledger lines for the wide layout. The desktop ledger needs the fee and net
-   * split, so it takes the richer row shape.
-   */
-  desktopRows?: PaymentRow[];
-  /**
-   * Ledger lines for the narrow layout. The stacked row shows the payment and
-   * its amount only, so it takes its own lighter row shape.
-   */
-  mobileRows?: MobilePaymentRow[];
-  /** Total payments in the ledger, used by the desktop range caption and pager. */
-  totalCount?: number;
+  /** Column definitions for the wide layout. */
+  columns?: Array<DataTableColumn<T>>;
+  /** Rows to render, in both layouts. */
+  rows?: T[];
+  /** Stable row identity, defaults to `row.id`. */
+  getRowId?: (row: T) => string;
+  /** How one row collapses into the stacked mobile line. */
+  mobileRow?: DataTableMobileRowSpec<T>;
+  /** Filter chips shown above the table. */
+  filters?: DataTableFilter[];
+  filter?: string;
+  defaultFilter?: string;
+  onFilterChange?: (value: string) => void;
+  filterBy?: (row: T, value: string) => boolean;
+  searchPlaceholder?: string;
+  query?: string;
+  onQueryChange?: (value: string) => void;
+  searchBy?: (row: T) => string;
+  /** Date-range presets. The trigger is hidden when omitted. */
+  ranges?: DataTableRange[];
+  range?: string;
+  onRangeChange?: (value: string) => void;
+  /** Replaces the export / contact-sales pair. */
+  toolbar?: React.ReactNode;
+  onRowClick?: (row: T) => void;
+  selectable?: boolean;
+  selectedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  bulkActions?: (ids: string[]) => React.ReactNode;
   /** Rows per page in the wide layout. */
   pageSize?: number;
   /** Rows per page in the narrow layout. */
   mobilePageSize?: number;
-  /** Placeholder copy inside the narrow layout's search pill. */
-  searchPlaceholder?: string;
+  totalCount?: number;
+  itemLabel?: string;
+  emptyTitle?: React.ReactNode;
+  emptyDescription?: React.ReactNode;
+  emptyAction?: React.ReactNode;
+  dense?: boolean;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+
+  /** @deprecated legacy alias for `rows` on the wide layout. */
+  desktopRows?: DataTableDesktopProps["rows"];
+  /** @deprecated legacy alias for `rows` on the narrow layout. */
+  mobileRows?: DataTableMobileProps["rows"];
 }
 
 /**
- * The payments ledger, responsive by breakpoint rather than by JavaScript.
- *
- * It is a thin composition wrapper: both the desktop and the mobile ledger stay
- * mounted in the tree, and only their visibility flips at this system's `md`
- * breakpoint (768px) — `hidden md:block` around the desktop layout, `md:hidden`
- * around the mobile one. No viewport measurement, no hydration mismatch, and no
- * layout reimplementation: each half keeps its own toolbar, rows, and pager.
+ * One responsive table: both halves stay mounted and only their visibility
+ * flips at this system's `md` breakpoint (768px) — `hidden md:block` around the
+ * wide layout, `md:hidden` around the stacked one. No viewport measurement and
+ * no hydration mismatch.
  *
- * Because both halves are always mounted, their local state (search text,
- * filters, page) survives a window resize in either direction.
+ * The wrapper owns the shared state — filter, query, range, selection and page
+ * — so resizing never loses what the reader was looking at, and a hidden half
+ * never paginates or filters differently from the visible one.
  */
-export const DataTable = React.forwardRef<HTMLDivElement, DataTableProps>(
-  (
-    {
-      desktopRows,
-      mobileRows,
-      totalCount,
-      pageSize,
-      mobilePageSize,
-      searchPlaceholder,
-      className,
-      ...rest
-    },
-    ref,
-  ) => (
+function DataTableInner<T extends DataTableBaseRow>(
+  props: DataTableProps<T>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {
+    columns,
+    rows,
+    getRowId,
+    mobileRow,
+    filters,
+    filter,
+    defaultFilter,
+    onFilterChange,
+    filterBy,
+    searchPlaceholder,
+    query,
+    onQueryChange,
+    searchBy,
+    ranges,
+    range,
+    onRangeChange,
+    toolbar,
+    onRowClick,
+    selectable,
+    selectedIds,
+    onSelectionChange,
+    bulkActions,
+    pageSize,
+    mobilePageSize,
+    totalCount,
+    itemLabel,
+    emptyTitle,
+    emptyDescription,
+    emptyAction,
+    dense,
+    title,
+    description,
+    desktopRows,
+    mobileRows,
+    className,
+    ...rest
+  } = props;
+
+  const legacyRows = rows === undefined && desktopRows !== undefined;
+
+  const [innerQuery, setInnerQuery] = React.useState("");
+  const activeQuery = query ?? innerQuery;
+
+  const [innerFilter, setInnerFilter] = React.useState(
+    defaultFilter ?? filters?.[0]?.value ?? "all",
+  );
+  const activeFilter = filter ?? innerFilter;
+
+  const [innerRange, setInnerRange] = React.useState(ranges?.[0]?.value ?? "");
+  const activeRangeValue = range ?? innerRange;
+
+  const [innerSelected, setInnerSelected] = React.useState<string[]>([]);
+  const activeSelected = selectedIds ?? innerSelected;
+
+  const handleQuery = (next: string) => {
+    if (query === undefined) setInnerQuery(next);
+    onQueryChange?.(next);
+  };
+
+  const handleFilter = (next: string) => {
+    if (filter === undefined) setInnerFilter(next);
+    onFilterChange?.(next);
+  };
+
+  const handleRange = (next: string) => {
+    if (range === undefined) setInnerRange(next);
+    onRangeChange?.(next);
+  };
+
+  const handleSelection = (next: string[]) => {
+    if (selectedIds === undefined) setInnerSelected(next);
+    onSelectionChange?.(next);
+  };
+
+  const shared = {
+    getRowId,
+    filters,
+    filter: activeFilter,
+    onFilterChange: handleFilter,
+    filterBy,
+    searchPlaceholder,
+    query: activeQuery,
+    onQueryChange: handleQuery,
+    searchBy,
+    ranges,
+    range: activeRangeValue,
+    onRangeChange: handleRange,
+    toolbar,
+    onRowClick,
+    selectable,
+    selectedIds: activeSelected,
+    onSelectionChange: handleSelection,
+    bulkActions,
+    totalCount,
+    itemLabel,
+    emptyTitle,
+    emptyDescription,
+    emptyAction,
+    dense,
+    title,
+    description,
+  };
+
+  const desktopRowData = legacyRows
+    ? desktopRows
+    : (rows ?? (desktopRows as T[] | undefined));
+
+  const mobileRowData = rows ?? (mobileRows as T[] | undefined);
+
+  return (
     <div ref={ref} className={cn("w-full", className)} {...rest}>
       <div className="hidden w-full md:block">
-        <DataTableDesktop
-          rows={desktopRows}
-          totalCount={totalCount}
+        <DataTableDesktop<T>
+          {...shared}
+          columns={columns}
+          rows={desktopRowData as T[]}
           pageSize={pageSize}
         />
       </div>
       <div className="w-full md:hidden">
-        <DataTableMobile
-          rows={mobileRows}
+        <DataTableMobile<T>
+          {...shared}
+          mobileRow={mobileRow}
+          rows={mobileRowData as T[]}
           pageSize={mobilePageSize}
-          searchPlaceholder={searchPlaceholder}
         />
       </div>
     </div>
-  ),
-);
+  );
+}
+
+type DataTableComponent = <T extends DataTableBaseRow = DataTableBaseRow>(
+  props: DataTableProps<T> & React.RefAttributes<HTMLDivElement>,
+) => React.ReactElement | null;
+
+export const DataTable = React.forwardRef(
+  DataTableInner,
+) as unknown as DataTableComponent;
 
-DataTable.displayName = "DataTable";
+(DataTable as { displayName?: string }).displayName = "DataTable";

package/src/atoms/DataTable/index.ts

@@ -1,2 +1,14 @@
 export { DataTable } from "./DataTable";
 export type { DataTableProps } from "./DataTable";
+export type {
+  DataTableAlign,
+  DataTableBaseRow,
+  DataTableColumn,
+  DataTableFilter,
+  DataTableRange,
+} from "../DataTableDesktop";
+export type {
+  DataTableMobileFilter,
+  DataTableMobileRange,
+  DataTableMobileRowSpec,
+} from "../DataTableMobile";

package/src/atoms/DataTable/preview.tsx

@@ -1,15 +1,226 @@
 import * as React from "react";
+import { Badge } from "../Badge";
+import { Button } from "../Button";
 import { DataTable } from "./DataTable";
+import type { DataTableColumn, DataTableFilter, DataTableRange } from "./DataTable";
 
-/**
- * One full-width instance. Resize the preview frame (or use the host's device
- * toggle) to cross the `md` breakpoint — the wide ledger replaces the stacked
- * one, and each half keeps the state you left it in.
- */
-const Preview = () => (
-  <div className="w-full bg-canvas p-lg">
-    <DataTable />
-  </div>
-);
-
-export default Preview;
+interface Invoice {
+  id: string;
+  customer: string;
+  status: "paid" | "open" | "failed";
+  amount: number;
+  issued: string;
+}
+
+const STATUS_LABEL: Record<Invoice["status"], string> = {
+  paid: "Paid",
+  open: "Open",
+  failed: "Failed",
+};
+
+const CUSTOMERS = [
+  "Northwind Co",
+  "Acme Shop",
+  "Acme Market",
+  "Lumen Studio",
+  "Harbor Freight",
+  "Tidewater Labs",
+  "Rookery Press",
+  "Fielding Group",
+];
+
+const invoices: Invoice[] = Array.from({ length: 160 }, (_, index) => {
+  const status: Invoice["status"] =
+    index % 9 === 0 ? "failed" : index % 4 === 0 ? "open" : "paid";
+  return {
+    id: `inv_${(10480 + index).toString(36).toUpperCase()}`,
+    customer: CUSTOMERS[index % CUSTOMERS.length],
+    status,
+    amount: 120 + ((index * 137) % 8600),
+    issued: `Feb ${((index % 28) + 1).toString().padStart(2, "0")}, 2026`,
+  };
+});
+
+const filters: DataTableFilter[] = [
+  { value: "all", label: "All invoices", count: 160 },
+  { value: "paid", label: "Paid", count: 118 },
+  { value: "open", label: "Open", count: 32 },
+  { value: "failed", label: "Failed", count: 10 },
+];
+
+const ranges: DataTableRange[] = [
+  { value: "30", label: "Last 30 days", detail: "Jan 26 – Feb 24, 2026" },
+  { value: "90", label: "Last 90 days", detail: "Nov 26 – Feb 24, 2026" },
+  { value: "ytd", label: "Year to date", detail: "Jan 1 – Feb 24, 2026" },
+];
+
+const columns: Array<DataTableColumn<Invoice>> = [
+  {
+    id: "id",
+    header: "Invoice",
+    width: "min",
+    render: (row) => (
+      <span className="whitespace-nowrap text-body-sm text-ink">{row.id}</span>
+    ),
+  },
+  {
+    id: "customer",
+    header: "Customer",
+    width: "min",
+    render: (row) => (
+      <span className="whitespace-nowrap text-body-sm text-ink">
+        {row.customer}
+      </span>
+    ),
+  },
+  {
+    id: "status",
+    header: "Status",
+    width: "min",
+    render: (row) =>
+      row.status === "paid" ? (
+        <span className="inline-flex items-center gap-xs whitespace-nowrap text-body-sm text-ink">
+          <span
+            aria-hidden="true"
+            className="size-2 shrink-0 rounded-full bg-primary"
+          />
+          {STATUS_LABEL[row.status]}
+        </span>
+      ) : (
+        <Badge
+          variant="soft"
+          tone={row.status === "failed" ? "error" : "info"}
+          size="sm"
+        >
+          {STATUS_LABEL[row.status]}
+        </Badge>
+      ),
+  },
+  {
+    id: "amount",
+    header: "Amount",
+    align: "right",
+    width: "min",
+    sortable: true,
+    sortValue: (row) => row.amount,
+    render: (row) => (
+      <span className="whitespace-nowrap text-body-tabular text-ink">
+        {`$${row.amount.toLocaleString("en-US", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
+      </span>
+    ),
+  },
+  {
+    id: "issued",
+    header: "Issued",
+    width: "min",
+    render: (row) => (
+      <span className="whitespace-nowrap text-body-sm text-ink">
+        {row.issued}
+      </span>
+    ),
+  },
+];
+
+const mobileRow = {
+  title: (row: Invoice) => row.id,
+  subtitle: (row: Invoice) => (
+    <Badge
+      variant="soft"
+      tone={row.status === "failed" ? "error" : "info"}
+      size="sm"
+      showDot
+    >
+      {STATUS_LABEL[row.status]}
+    </Badge>
+  ),
+  trailing: (row: Invoice) =>
+    `$${row.amount.toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`,
+  meta: (row: Invoice) => `${row.customer} · ${row.issued}`,
+};
+
+export default function Preview() {
+  const [selected, setSelected] = React.useState<string[]>([]);
+  const [filter, setFilter] = React.useState("all");
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <div className="w-full max-w-5xl mx-auto p-lg space-y-lg bg-canvas">
+      <DataTable<Invoice>
+        columns={columns}
+        rows={invoices}
+        filters={filters}
+        filter={filter}
+        onFilterChange={setFilter}
+        filterBy={(row, value) => row.status === value}
+        searchPlaceholder="Search invoices"
+        query={query}
+        onQueryChange={setQuery}
+        searchBy={(row) => `${row.id} ${row.customer}`}
+        ranges={ranges}
+        selectedIds={selected}
+        onSelectionChange={setSelected}
+        pageSize={10}
+        mobilePageSize={4}
+        itemLabel="invoices"
+        dense
+        title="Invoices"
+        description="Every invoice issued this quarter, newest first."
+        toolbar={
+          <>
+            <Button variant="outline-soft" size="md">
+              Export
+            </Button>
+            <Button variant="primary" size="md">
+              New invoice
+            </Button>
+          </>
+        }
+        bulkActions={(ids) => (
+          <>
+            <Button variant="outline-soft" size="md">
+              {`Download ${ids.length}`}
+            </Button>
+            <Button variant="outline-soft" size="md">
+              Archive
+            </Button>
+          </>
+        )}
+        onRowClick={() => undefined}
+        mobileRow={mobileRow}
+        emptyTitle="No invoices match those filters"
+        emptyDescription="Try a different status or clear the search field."
+        emptyAction={
+          <Button
+            variant="outline-soft"
+            size="md"
+            onClick={() => {
+              setFilter("all");
+              setQuery("");
+            }}
+          >
+            Clear filters
+          </Button>
+        }
+      />
+
+      <DataTable<Invoice>
+        columns={columns}
+        rows={invoices.slice(0, 4)}
+        filters={filters.slice(0, 1)}
+        pageSize={5}
+        mobilePageSize={4}
+        itemLabel="invoices"
+        dense
+        title="Compact, no selection"
+        selectable={false}
+        mobileRow={mobileRow}
+      />
+    </div>
+  );
+}