@polastack/design-system 0.1.30 → 0.1.33

package/dist/index.js

@@ -2495,7 +2495,7 @@ var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b border-[var(--color-border)] transition-colors hover:bg-[var(--color-surface-sunken)] data-[state=selected]:bg-primary-50 dark:data-[state=selected]:bg-primary-950",
+      "border-b border-[var(--color-border)] transition-colors hover:bg-[var(--color-surface-muted)] data-[state=selected]:bg-[var(--color-surface-accent)]",
       className
     ),
     ...props
@@ -2569,14 +2569,15 @@ function DataTablePagination({
       children: [
         /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx31("span", { className: "hidden sm:inline", children: "Rows per page" }),
-          /* @__PURE__ */ jsx31(
-            "select",
+          /* @__PURE__ */ jsxs12(
+            Select,
             {
-              value: pageSize,
-              onChange: (e) => table.setPageSize(Number(e.target.value)),
-              className: "h-8 rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-2 text-sm",
-              "aria-label": "Rows per page",
-              children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx31("option", { value: size, children: size }, size))
+              value: String(pageSize),
+              onValueChange: (value) => table.setPageSize(Number(value)),
+              children: [
+                /* @__PURE__ */ jsx31(SelectTrigger, { className: "h-8 w-[4.5rem]", "aria-label": "Rows per page", children: /* @__PURE__ */ jsx31(SelectValue, {}) }),
+                /* @__PURE__ */ jsx31(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx31(SelectItem, { value: String(size), children: size }, size)) })
+              ]
             }
           )
         ] }),
@@ -2795,6 +2796,10 @@ function DataTable({
         TableRow,
         {
           "data-state": row.getIsSelected() ? "selected" : void 0,
+          ...enableRowSelection && {
+            onClick: () => row.toggleSelected(),
+            className: "cursor-pointer"
+          },
           children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx33(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
         },
         row.id