@designa8/vibedesign-stripe-deepseek-2-176b 0.1.1 → 0.2.0

package/README.md

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

package/dist/styles.css

@@ -19,7 +19,6 @@
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
-    --container-6xl: 72rem;
     --font-weight-normal: 400;
     --tracking-wide: 0.025em;
     --radius-xs: 4px;
@@ -162,6 +161,8 @@
     --container-dialog: 420px;
     --container-sidebar: 240px;
     --container-sidebar-rail: 72px;
+    --container-palette: 640px;
+    --container-dialog-md: 560px;
     --grid-template-columns-system: repeat(12, minmax(0, 1fr));
   }
 }
@@ -818,6 +819,9 @@
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-full {
+    max-height: 100%;
+  }
   .min-h-0 {
     min-height: 0;
   }
@@ -926,17 +930,14 @@
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
-  .max-w-6xl {
-    max-width: var(--container-6xl);
-  }
   .max-w-16 {
     max-width: calc(var(--spacing) * 16);
   }
   .max-w-dialog {
     max-width: var(--container-dialog);
   }
-  .max-w-drawer {
-    max-width: var(--container-drawer);
+  .max-w-dialog-md {
+    max-width: var(--container-dialog-md);
   }
   .max-w-full {
     max-width: 100%;
@@ -944,6 +945,9 @@
   .max-w-md {
     max-width: var(--spacing-md);
   }
+  .max-w-palette {
+    max-width: var(--container-palette);
+  }
   .max-w-prose {
     max-width: 65ch;
   }
@@ -1611,6 +1615,12 @@
   .bg-semantic-error-soft {
     background-color: var(--color-semantic-error-soft);
   }
+  .bg-semantic-error\/60 {
+    background-color: color-mix(in srgb, #EA2261 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-semantic-error) 60%, transparent);
+    }
+  }
   .bg-semantic-info-soft {
     background-color: var(--color-semantic-info-soft);
   }
@@ -1842,9 +1852,6 @@
   .pr-md {
     padding-right: var(--spacing-md);
   }
-  .pr-sm {
-    padding-right: var(--spacing-sm);
-  }
   .pr-xl {
     padding-right: var(--spacing-xl);
   }
@@ -2669,6 +2676,16 @@
       }
     }
   }
+  .hover\:bg-semantic-error\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #EA2261 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-semantic-error) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-surface-soft {
     &:hover {
       @media (hover: hover) {
@@ -2739,6 +2756,13 @@
       }
     }
   }
+  .hover\:text-semantic-error {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-semantic-error);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -2793,6 +2817,11 @@
       color: var(--color-primary);
     }
   }
+  .focus-visible\:text-semantic-error {
+    &:focus-visible {
+      color: var(--color-semantic-error);
+    }
+  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2919,6 +2948,11 @@
       border-color: var(--color-primary-active);
     }
   }
+  .active\:border-semantic-error {
+    &:active {
+      border-color: var(--color-semantic-error);
+    }
+  }
   .active\:border-transparent {
     &:active {
       border-color: transparent;
@@ -2950,6 +2984,11 @@
       }
     }
   }
+  .active\:bg-semantic-error {
+    &:active {
+      background-color: var(--color-semantic-error);
+    }
+  }
   .active\:bg-surface-soft {
     &:active {
       background-color: var(--color-surface-soft);
@@ -3045,6 +3084,14 @@
       }
     }
   }
+  .disabled\:bg-semantic-error\/60 {
+    &:disabled {
+      background-color: color-mix(in srgb, #EA2261 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-semantic-error) 60%, transparent);
+      }
+    }
+  }
   .disabled\:bg-surface-soft {
     &:disabled {
       background-color: var(--color-surface-soft);

package/package.json

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

package/src/atoms/Button/Button.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 type ButtonVariant =
   | "primary"
   | "primary-soft"
+  | "danger"
+  | "danger-soft"
   | "secondary"
   | "outline"
   | "outline-soft"
@@ -88,6 +90,21 @@ const variantStyles: Record<ButtonVariant, string> = {
     "focus-visible:bg-canvas focus-visible:text-primary focus-visible:border-primary focus-visible:ring-focus-blue/40",
     "disabled:bg-primary-disabled disabled:text-muted disabled:border-transparent",
   ),
+  /**
+   * The destructive twin of `primary`: the same filled geometry on the error
+   * hue, for the action that removes money, deletes a record, or ends access.
+   * Hover inverts to the error outline exactly like the brand fill, so the
+   * paired footer keeps one press grammar whichever tone the commit wears.
+   */
+  danger: cn(
+    focusRing,
+    "justify-center rounded-xl active:scale-[0.98]",
+    "border-2 bg-semantic-error text-on-primary border-transparent",
+    "hover:bg-canvas hover:text-semantic-error hover:border-semantic-error",
+    "active:bg-semantic-error active:text-on-primary active:border-semantic-error",
+    "focus-visible:bg-canvas focus-visible:text-semantic-error focus-visible:border-semantic-error focus-visible:ring-focus-blue/40",
+    "disabled:bg-primary-disabled disabled:text-muted disabled:border-transparent",
+  ),
   /**
    * The same filled pill at reduced strength: the action is committed and the
    * request is in flight, so the control keeps its size, its label, and the
@@ -102,6 +119,19 @@ const variantStyles: Record<ButtonVariant, string> = {
     "focus-visible:ring-focus-blue/40",
     "disabled:pointer-events-none disabled:border-transparent disabled:bg-primary/60 disabled:text-on-primary",
   ),
+  /**
+   * The dimmed destructive twin, used while a destructive request is in
+   * flight: it holds the pill's size and label, keeps the error hue, and pins
+   * the fill so a working control can never be hovered brighter.
+   */
+  "danger-soft": cn(
+    focusRing,
+    "justify-center rounded-xl active:scale-[0.98]",
+    "border-transparent bg-semantic-error/60 text-on-primary",
+    "hover:bg-semantic-error/60 hover:text-on-primary hover:border-transparent",
+    "focus-visible:ring-focus-blue/40",
+    "disabled:pointer-events-none disabled:border-transparent disabled:bg-semantic-error/60 disabled:text-on-primary",
+  ),
   // Persistent outline treatment.
   secondary: cn(
     focusRing,

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