@plexui/ui 0.7.36 → 0.7.38

package/dist/es/components/StatCard/StatCard.module.css

@@ -0,0 +1,234 @@
+@layer components {.StatCard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  padding: var(--stat-card-padding);
+  border-radius: var(--stat-card-radius);
+  background: var(--stat-card-background);
+  box-shadow: 0 0 0 1px var(--stat-card-border-color) inset;
+  font-size: var(--stat-card-label-font-size);
+  line-height: var(--font-text-sm-line-height);
+}
+
+  .StatCard:where([data-size="sm"]) {
+    padding: var(--stat-card-sm-padding-block) var(--stat-card-sm-padding-inline);
+  }
+
+    .StatCard:where([data-size="sm"]) .Label {
+      font-size: var(--stat-card-sm-label-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .InfoIcon svg {
+      width: var(--stat-card-sm-info-icon-size);
+      height: var(--stat-card-sm-info-icon-size);
+    }
+
+    .StatCard:where([data-size="sm"]) .Value {
+      font-size: var(--stat-card-sm-value-font-size);
+      line-height: var(--font-heading-md-line-height);
+      letter-spacing: var(--font-heading-md-tracking);
+    }
+
+    .StatCard:where([data-size="sm"]) .Trend {
+      font-size: var(--stat-card-sm-trend-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .ValueRow {
+      margin-block-start: calc(var(--spacing) * 1.5);
+    }
+
+    .StatCard:where([data-size="sm"]) .Footer {
+      margin-block-start: calc(var(--spacing) * 0.5);
+    }
+
+    .StatCard:where([data-size="sm"]) .Description {
+      font-size: var(--stat-card-sm-description-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .TrendLabel {
+      font-size: var(--stat-card-sm-description-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .IconWrapper {
+      border-radius: var(--stat-card-sm-icon-wrapper-radius);
+    }
+
+      .StatCard:where([data-size="sm"]) .IconWrapper svg {
+        width: var(--stat-card-sm-icon-size);
+        height: var(--stat-card-sm-icon-size);
+      }
+
+    .StatCard:where([data-size="sm"]) .Body {
+      gap: calc(var(--spacing) * 2.5);
+    }
+
+  .StatCard:where([data-variant="accent"]) {
+    border-inline-start: var(--stat-card-accent-width) solid
+      var(--stat-card-accent-color, var(--color-background-primary-solid));
+  }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="primary"]) {
+      --stat-card-accent-color: var(--color-background-primary-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="info"]) {
+      --stat-card-accent-color: var(--color-background-info-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="success"]) {
+      --stat-card-accent-color: var(--color-background-success-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="warning"]) {
+      --stat-card-accent-color: var(--color-background-warning-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="danger"]) {
+      --stat-card-accent-color: var(--color-background-danger-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="secondary"]) {
+      --stat-card-accent-color: var(--color-background-secondary-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="discovery"]) {
+      --stat-card-accent-color: var(--color-background-discovery-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="caution"]) {
+      --stat-card-accent-color: var(--color-background-caution-solid);
+    }.Header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing) * 6);
+}.LabelRow {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  min-width: 0;
+}.Label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--stat-card-label-color);
+  font-size: var(--stat-card-label-font-size);
+  line-height: var(--font-text-sm-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.InfoIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  cursor: help;
+}
+
+  .InfoIcon svg {
+    width: var(--stat-card-info-icon-size);
+    height: var(--stat-card-info-icon-size);
+  }.Body {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--spacing) * 3);
+}.Content {
+  flex: 1;
+  min-width: 0;
+}
+
+  .Content .ValueRow {
+    margin-block-start: calc(var(--spacing) * 0.5);
+  }.IconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: stretch;
+  aspect-ratio: 1;
+  border-radius: var(--stat-card-icon-wrapper-radius);
+  background: var(--stat-card-icon-wrapper-background);
+  color: var(--stat-card-icon-color);
+}
+
+  .IconWrapper svg {
+    width: var(--stat-card-icon-size);
+    height: var(--stat-card-icon-size);
+  }.HeaderEnd {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  flex-shrink: 0;
+}.ValueRow {
+  display: flex;
+  align-items: baseline;
+  gap: calc(var(--spacing) * 2);
+  margin-block-start: calc(var(--spacing) * 3);
+}.Value {
+  min-width: 0;
+  color: var(--stat-card-value-color);
+  font-size: var(--stat-card-value-font-size);
+  font-weight: var(--stat-card-value-font-weight);
+  line-height: var(--font-heading-xl-line-height);
+  letter-spacing: var(--font-heading-xl-tracking);
+}.Trend {
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: var(--stat-card-trend-font-size);
+  font-weight: var(--stat-card-trend-font-weight);
+  line-height: var(--font-text-sm-line-height);
+  white-space: nowrap;
+}.TrendPositive {
+  color: var(--stat-card-trend-positive-color);
+}.TrendNegative {
+  color: var(--stat-card-trend-negative-color);
+}.TrendNeutral {
+  color: var(--stat-card-trend-neutral-color);
+}.Footer {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 0.5);
+  margin-block-start: calc(var(--spacing) * 2);
+}.TrendLabel {
+  color: var(--stat-card-description-color);
+  font-size: var(--stat-card-description-font-size);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--font-text-sm-line-height);
+}.Description {
+  color: var(--stat-card-description-color);
+  font-size: var(--stat-card-description-font-size);
+  line-height: var(--font-text-sm-line-height);
+  text-wrap: pretty;
+}.Progress {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  margin-block-start: calc(var(--spacing) * 3);
+}.ProgressTrack {
+  flex: 1;
+  height: var(--stat-card-progress-height);
+  border-radius: var(--stat-card-progress-radius);
+  background: var(--stat-card-progress-background);
+  overflow: hidden;
+}.ProgressBar {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--stat-card-progress-fill);
+}.ProgressLabel {
+  color: var(--stat-card-description-color);
+  font-size: var(--stat-card-description-font-size);
+  line-height: var(--font-text-sm-line-height);
+  white-space: nowrap;
+}.Sparkline {
+  margin-block-start: calc(var(--spacing) * 3);
+  color: var(--color-text-tertiary);
+}
+
+  .Sparkline svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}

package/dist/es/components/StatCard/index.js

@@ -0,0 +1,2 @@
+export { StatCard } from "./StatCard";
+//# sourceMappingURL=index.js.map

package/dist/es/components/StatCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/StatCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA","sourcesContent":["export { StatCard, type StatCardProps } from \"./StatCard\"\n"]}

package/dist/es/components/Table/Table.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import s from "./Table.module.css";
+export const Table = ({ className, ...props }) => (_jsx("div", { className: s.TableWrapper, children: _jsx("table", { className: clsx(s.Table, className), ...props }) }));
+export const TableHeader = ({ className, ...props }) => (_jsx("thead", { className: clsx(s.TableHeader, className), ...props }));
+export const TableBody = ({ className, ...props }) => (_jsx("tbody", { className: clsx(s.TableBody, className), ...props }));
+export const TableFooter = ({ className, ...props }) => (_jsx("tfoot", { className: clsx(s.TableFooter, className), ...props }));
+export const TableRow = ({ className, ...props }) => (_jsx("tr", { className: clsx(s.TableRow, className), ...props }));
+export const TableHead = ({ className, ...props }) => (_jsx("th", { className: clsx(s.TableHead, className), ...props }));
+export const TableCell = ({ className, ...props }) => (_jsx("td", { className: clsx(s.TableCell, className), ...props }));
+export const TableCaption = ({ className, ...props }) => (_jsx("caption", { className: clsx(s.TableCaption, className), ...props }));
+//# sourceMappingURL=Table.js.map

package/dist/es/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,CAAC,MAAM,oBAAoB,CAAA;AAGlC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE,CAAC,CAC5D,cAAK,SAAS,EAAE,CAAC,CAAC,YAAY,YAC5B,gBAAO,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,GACrD,CACP,CAAA;AAGD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAAC,CACxE,gBAAO,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAChE,CAAA;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE,CAAC,CACpE,gBAAO,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC9D,CAAA;AAGD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAAC,CACxE,gBAAO,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAChE,CAAA;AAGD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAAC,CAClE,aAAI,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC1D,CAAA;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE,CAAC,CACpE,aAAI,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC3D,CAAA;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE,CAAC,CACpE,aAAI,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC3D,CAAA;AAGD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAqB,EAAE,EAAE,CAAC,CAC1E,kBAAS,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentPropsWithRef } from \"react\"\nimport s from \"./Table.module.css\"\n\nexport type TableProps = ComponentPropsWithRef<\"table\">\nexport const Table = ({ className, ...props }: TableProps) => (\n  <div className={s.TableWrapper}>\n    <table className={clsx(s.Table, className)} {...props} />\n  </div>\n)\n\nexport type TableHeaderProps = ComponentPropsWithRef<\"thead\">\nexport const TableHeader = ({ className, ...props }: TableHeaderProps) => (\n  <thead className={clsx(s.TableHeader, className)} {...props} />\n)\n\nexport type TableBodyProps = ComponentPropsWithRef<\"tbody\">\nexport const TableBody = ({ className, ...props }: TableBodyProps) => (\n  <tbody className={clsx(s.TableBody, className)} {...props} />\n)\n\nexport type TableFooterProps = ComponentPropsWithRef<\"tfoot\">\nexport const TableFooter = ({ className, ...props }: TableFooterProps) => (\n  <tfoot className={clsx(s.TableFooter, className)} {...props} />\n)\n\nexport type TableRowProps = ComponentPropsWithRef<\"tr\">\nexport const TableRow = ({ className, ...props }: TableRowProps) => (\n  <tr className={clsx(s.TableRow, className)} {...props} />\n)\n\nexport type TableHeadProps = ComponentPropsWithRef<\"th\">\nexport const TableHead = ({ className, ...props }: TableHeadProps) => (\n  <th className={clsx(s.TableHead, className)} {...props} />\n)\n\nexport type TableCellProps = ComponentPropsWithRef<\"td\">\nexport const TableCell = ({ className, ...props }: TableCellProps) => (\n  <td className={clsx(s.TableCell, className)} {...props} />\n)\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">\nexport const TableCaption = ({ className, ...props }: TableCaptionProps) => (\n  <caption className={clsx(s.TableCaption, className)} {...props} />\n)\n"]}

package/dist/es/components/Table/Table.module.css

@@ -0,0 +1,55 @@
+@layer components {.TableWrapper {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}.Table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--table-cell-font-size);
+  line-height: var(--table-cell-line-height);
+  color: var(--table-cell-color);
+  text-align: left;
+}.TableHeader {
+  background: var(--table-header-background);
+}
+
+  .TableHeader :where(.TableRow) {
+    border-bottom: 1px solid var(--table-border-color);
+  }.TableHead {
+  height: var(--control-size-md);
+  padding: var(--table-cell-padding);
+  font-weight: var(--table-header-font-weight);
+  color: var(--table-header-color);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+  .TableBody :where(.TableRow) {
+    border-bottom: 1px solid var(--table-border-color);
+    transition: background-color 0.1s ease;
+  }
+
+    .TableBody :where(.TableRow):last-child {
+      border-bottom: none;
+    }
+
+    .TableBody :where(.TableRow):hover {
+      background-color: var(--table-row-hover-background);
+    }.TableRow {}.TableCell {
+  padding: var(--table-cell-padding);
+  vertical-align: middle;
+}.TableFooter {
+  border-top: 1px solid var(--table-border-color);
+  background: var(--table-footer-background);
+  font-weight: var(--table-footer-font-weight);
+}
+
+  .TableFooter :where(.TableRow:last-child) {
+    border-bottom: none;
+  }.TableCaption {
+  padding: var(--table-cell-padding);
+  font-size: var(--table-caption-font-size);
+  color: var(--table-caption-color);
+  caption-side: bottom;
+  text-align: left;
+}
+}

package/dist/es/components/Table/index.js

@@ -0,0 +1,2 @@
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from "./Table";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAS,EACT,YAAY,GASb,MAAM,SAAS,CAAA","sourcesContent":["export {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableHead,\n  TableCell,\n  TableCaption,\n  type TableProps,\n  type TableHeaderProps,\n  type TableBodyProps,\n  type TableFooterProps,\n  type TableRowProps,\n  type TableHeadProps,\n  type TableCellProps,\n  type TableCaptionProps,\n} from \"./Table\"\n"]}

package/dist/es/styles/variables-components.css

@@ -390,6 +390,67 @@
     --sidebar-card-shadow-hover: var(--shadow-400), var(--shadow-hairline);
     --sidebar-card-active-scale: 0.98;
 
+    /* =============================================
+      StatCard
+    ============================================= */
+    --stat-card-padding: calc(var(--spacing) * 5);
+    --stat-card-radius: var(--radius-xl);
+    /* spacing is per-section: mt-3 (12px) label→value, mt-2 (8px) value→footer */
+    --stat-card-background: var(--color-surface);
+    --stat-card-border-color: var(--color-border);
+    --stat-card-label-font-size: var(--font-text-sm-size);
+    --stat-card-label-color: var(--color-text-secondary);
+    --stat-card-value-font-size: var(--font-heading-xl-size);
+    --stat-card-value-font-weight: var(--font-weight-semibold);
+    --stat-card-value-color: var(--color-text);
+    --stat-card-description-font-size: var(--font-text-sm-size);
+    --stat-card-description-color: var(--color-text-tertiary);
+    --stat-card-trend-font-size: var(--font-text-sm-size);
+    --stat-card-trend-font-weight: var(--font-weight-semibold);
+    --stat-card-trend-positive-color: var(--color-text-success-soft);
+    --stat-card-trend-negative-color: var(--color-text-danger-soft);
+    --stat-card-trend-neutral-color: var(--color-text-tertiary);
+    --stat-card-progress-height: 4px;
+    --stat-card-progress-radius: var(--radius-full);
+    --stat-card-progress-fill: var(--color-background-primary-solid);
+    --stat-card-icon-size: 24px;
+    --stat-card-icon-color: var(--color-text-primary);
+    /* label line-height (20) + gap spacing(0.5) (2) + value line-height (38) = 60 */
+    --stat-card-icon-wrapper-size: 60px;
+    --stat-card-icon-wrapper-radius: var(--radius-md);
+    --stat-card-icon-wrapper-background: var(--color-background-primary-soft-alpha);
+    --stat-card-accent-width: 3px;
+    --stat-card-info-icon-size: 16px;
+
+    /* sm size overrides */
+    --stat-card-sm-padding-block: calc(var(--spacing) * 3);
+    --stat-card-sm-padding-inline: calc(var(--spacing) * 4);
+    --stat-card-sm-label-font-size: var(--font-text-xs-size);
+    --stat-card-sm-value-font-size: var(--font-heading-md-size);
+    --stat-card-sm-trend-font-size: var(--font-text-xs-size);
+    --stat-card-sm-description-font-size: var(--font-text-xs-size);
+    --stat-card-sm-icon-size: 20px;
+    /* label line-height (18) + gap spacing(0.5) (2) + value line-height (26) = 46 */
+    --stat-card-sm-icon-wrapper-size: 46px;
+    --stat-card-sm-icon-wrapper-radius: var(--radius-sm);
+    --stat-card-sm-info-icon-size: 14px;
+
+    /* =============================================
+      Table
+    ============================================= */
+    --table-border-color: var(--color-border);
+    --table-header-background: transparent;
+    --table-header-font-weight: var(--font-weight-medium);
+    --table-header-color: var(--color-text-secondary);
+    --table-cell-padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    --table-cell-font-size: var(--font-text-sm-size);
+    --table-cell-line-height: var(--font-text-sm-line-height);
+    --table-cell-color: var(--color-text);
+    --table-footer-background: transparent;
+    --table-footer-font-weight: var(--font-weight-medium);
+    --table-caption-font-size: var(--font-text-sm-size);
+    --table-caption-color: var(--color-text-tertiary);
+
     /* =============================================
       Skeleton
     ============================================= */
@@ -428,6 +489,8 @@
     --sidebar-menu-text: var(--gray-750);
     --sidebar-mobile-backdrop-color: rgb(0 0 0 / 15%);
     --sidebar-footer-shadow: 0 -2px 10px rgb(0 0 0 / 6%);
+    --stat-card-progress-background: var(--alpha-08);
+    --table-row-hover-background: var(--alpha-02);
     --skeleton-background: var(--alpha-08);
   }
   :where([data-theme="dark"]) {
@@ -463,6 +526,8 @@
     --sidebar-menu-text: var(--gray-850);
     --sidebar-mobile-backdrop-color: rgb(0 0 0 / 35%);
     --sidebar-footer-shadow: 0 -2px 10px rgb(0 0 0 / 35%);
+    --stat-card-progress-background: var(--alpha-12);
+    --table-row-hover-background: var(--alpha-04);
     --skeleton-background: var(--alpha-12);
   }
 }

package/dist/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,45 @@
+import { type ColumnDef, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table";
+import { type ReactNode } from "react";
+export type DataTableProps<TData> = {
+    /** Column definitions following TanStack Table v8 ColumnDef API */
+    columns: ColumnDef<TData, unknown>[];
+    /** Data array to display */
+    data: TData[];
+    /** External search/filter string (controlled) */
+    globalFilter?: string;
+    /** Callback when global filter changes */
+    onGlobalFilterChange?: (value: string) => void;
+    /** Click handler for rows */
+    onRowClick?: (row: TData) => void;
+    /** Number of rows per page. Set to 0 or Infinity to disable pagination.
+     * @default 10
+     */
+    pageSize?: number;
+    /** Initial sorting state */
+    initialSorting?: SortingState;
+    /** Controlled column visibility */
+    columnVisibility?: VisibilityState;
+    /** Callback when column visibility changes */
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    /** Enable row selection checkboxes
+     * @default false
+     */
+    enableRowSelection?: boolean;
+    /** Controlled row selection state */
+    rowSelection?: RowSelectionState;
+    /** Callback when row selection changes */
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Custom row ID accessor */
+    getRowId?: (row: TData) => string;
+    /** Message shown when there are no rows
+     * @default "No results."
+     */
+    emptyMessage?: ReactNode;
+    /** Class applied to the outermost wrapper */
+    className?: string;
+    /** Whether to show pagination controls. Auto-hidden when all rows fit.
+     * @default true
+     */
+    showPagination?: boolean;
+};
+export declare const DataTable: <TData>({ columns, data, globalFilter, onGlobalFilterChange, onRowClick, pageSize, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection, rowSelection, onRowSelectionChange, getRowId, emptyMessage, className, showPagination, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/DataTableColumnHeader.d.ts

@@ -0,0 +1,7 @@
+import { type Column } from "@tanstack/react-table";
+export type DataTableColumnHeaderProps<TData, TValue> = {
+    column: Column<TData, TValue>;
+    title: string;
+    className?: string;
+};
+export declare const DataTableColumnHeader: <TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/DataTablePagination.d.ts

@@ -0,0 +1,5 @@
+import { type Table } from "@tanstack/react-table";
+export type DataTablePaginationProps<TData> = {
+    table: Table<TData>;
+};
+export declare const DataTablePagination: <TData>({ table }: DataTablePaginationProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/index.d.ts

@@ -0,0 +1,4 @@
+export { DataTable, type DataTableProps } from "./DataTable";
+export { DataTablePagination, type DataTablePaginationProps } from "./DataTablePagination";
+export { DataTableColumnHeader, type DataTableColumnHeaderProps } from "./DataTableColumnHeader";
+export type { ColumnDef, RowSelectionState, SortingState, VisibilityState, } from "@tanstack/react-table";

package/dist/types/components/Icon/index.d.ts

@@ -222,6 +222,7 @@ export { default as FileUpload } from "./svg/FileUpload";
 export { default as FileVideo } from "./svg/FileVideo";
 export { default as FileZip } from "./svg/FileZip";
 export { default as Filter } from "./svg/Filter";
+export { default as Fingerprint } from "./svg/Fingerprint";
 export { default as Flag } from "./svg/Flag";
 export { default as Flask } from "./svg/Flask";
 export { default as FlaskFilled } from "./svg/FlaskFilled";

package/dist/types/components/Icon/svg/Fingerprint.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const Fingerprint: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Fingerprint;

package/dist/types/components/StatCard/StatCard.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode, type Ref } from "react";
+export type StatCardProps = {
+    /** Label describing the metric */
+    label: string;
+    /** The primary metric value (e.g. "1,234" or "$50K") */
+    value: ReactNode;
+    /** Optional description or subtitle below the value */
+    description?: string;
+    /** Trend indicator with percentage change */
+    trend?: {
+        /** The percentage change value (e.g. 12.5 for +12.5%) */
+        value: number;
+        /** Optional label for the trend (e.g. "vs last month") */
+        label?: string;
+    };
+    /** When true, a positive trend is bad (red) and negative is good (green). Use for metrics like "Error Rate" or "Avg Completion Time". */
+    invertTrend?: boolean;
+    /** Icon displayed on the left side with a soft background */
+    icon?: ReactNode;
+    /** Optional ReactNode for a sparkline/chart rendered at the bottom */
+    sparkline?: ReactNode;
+    /** Progress value from 0 to 100. Shows a progress bar at the bottom. */
+    progress?: number;
+    /** Label displayed next to the progress bar */
+    progressLabel?: string;
+    /** Tooltip text — renders an (i) icon next to the label with a tooltip on hover */
+    tooltip?: string;
+    /**
+     * Where the trend indicator is positioned
+     * - `"value"` — next to the value (default)
+     * - `"header"` — right-aligned in the header row
+     * @default "value"
+     */
+    trendPosition?: "value" | "header";
+    /**
+     * Visual style of the trend indicator
+     * - `"text"` — plain colored text (default)
+     * - `"badge"` — wrapped in a Badge component
+     * @default "text"
+     */
+    trendVariant?: "text" | "badge";
+    /**
+     * Size of the card
+     * - `"default"` — standard dashboard card
+     * - `"sm"` — compact card for dense layouts
+     * @default "default"
+     */
+    size?: "default" | "sm";
+    /**
+     * Visual variant of the card
+     * @default "default"
+     */
+    variant?: "default" | "accent";
+    /**
+     * Accent border color for the "accent" variant
+     * @default "primary"
+     */
+    accentColor?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "discovery" | "caution";
+    /** Class applied to the card container */
+    className?: string;
+    /** Ref applied to the card container */
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const StatCard: ({ label, value, description, trend, invertTrend, icon, sparkline, progress, progressLabel, tooltip, trendPosition, trendVariant, size, variant, accentColor, className, ref, ...restProps }: StatCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/StatCard/index.d.ts

@@ -0,0 +1 @@
+export { StatCard, type StatCardProps } from "./StatCard";

package/dist/types/components/Table/Table.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef } from "react";
+export type TableProps = ComponentPropsWithRef<"table">;
+export declare const Table: ({ className, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export type TableHeaderProps = ComponentPropsWithRef<"thead">;
+export declare const TableHeader: ({ className, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type TableBodyProps = ComponentPropsWithRef<"tbody">;
+export declare const TableBody: ({ className, ...props }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type TableFooterProps = ComponentPropsWithRef<"tfoot">;
+export declare const TableFooter: ({ className, ...props }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
+export type TableRowProps = ComponentPropsWithRef<"tr">;
+export declare const TableRow: ({ className, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export type TableHeadProps = ComponentPropsWithRef<"th">;
+export declare const TableHead: ({ className, ...props }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export type TableCellProps = ComponentPropsWithRef<"td">;
+export declare const TableCell: ({ className, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export type TableCaptionProps = ComponentPropsWithRef<"caption">;
+export declare const TableCaption: ({ className, ...props }: TableCaptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1 @@
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, type TableProps, type TableHeaderProps, type TableBodyProps, type TableFooterProps, type TableRowProps, type TableHeadProps, type TableCellProps, type TableCaptionProps, } from "./Table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.36",
+  "version": "0.7.38",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",
@@ -79,6 +79,7 @@
     "tailwindcss": "^4.0.10"
   },
   "dependencies": {
+    "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "lodash": "4.17.21",
     "luxon": "3.7.1",