@paroicms/react-ui 0.5.4 → 0.5.6

package/dist/DataTable.d.ts

@@ -1,12 +1,22 @@
 import "../styles/DataTable.css";
-import { type ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
+export interface DataTableColumn<T = unknown> {
+    field?: keyof T & string;
+    header?: string;
+    body?: (rowData: T) => ReactNode;
+    style?: CSSProperties;
+    sortable?: boolean;
+    thClassName?: string;
+    tdClassName?: string;
+}
 export interface DataTableProps<T> {
     value: T[];
     dataKey: keyof T & string;
+    columns: DataTableColumn<T>[];
     size?: "small" | "normal";
     loading?: boolean;
-    children: ReactNode;
     className?: string;
+    tableClassName?: string;
     emptyMessage?: string;
     paginator?: boolean;
     rows?: number;
@@ -27,4 +37,4 @@ export interface DataTableProps<T> {
     rowClassName?: (row: T) => string | undefined;
     totalLabel?: string;
 }
-export declare function DataTable<T extends object>({ value, dataKey, size, loading, children, className, emptyMessage, paginator, rows, totalRecords, first, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T extends object>({ value, dataKey, columns, size, loading, className, tableClassName, emptyMessage, paginator, rows, totalRecords, first, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/DataTable.js

@@ -2,17 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/DataTable.css";
 import { clsx } from "clsx";
 import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsUpDown } from "lucide-react";
-import { Children, isValidElement } from "react";
 import { Select } from "./Select.js";
 import { Spinner } from "./Spinner.js";
-export function DataTable({ value, dataKey, size, loading, children, className, emptyMessage = "No data available", paginator, rows = 10, totalRecords, first = 0, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }) {
-    // Extract column definitions from children
-    const columns = [];
-    Children.forEach(children, (child) => {
-        if (isValidElement(child) && child.props) {
-            columns.push(child.props);
-        }
-    });
+export function DataTable({ value, dataKey, columns, size, loading, className, tableClassName, emptyMessage = "No data available", paginator, rows = 10, totalRecords, first = 0, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }) {
     const total = totalRecords ?? value.length;
     const pageCount = Math.ceil(total / rows);
     const currentPage = Math.floor(first / rows) + 1;
@@ -22,5 +14,5 @@ export function DataTable({ value, dataKey, size, loading, children, className,
         const newOrder = sortField === field && sortOrder === 1 ? -1 : 1;
         onSort({ field, order: newOrder });
     };
-    return (_jsxs("div", { className: clsx("PaDataTable-wrapper", loading && "loading"), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable", size, className), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable"), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.bodyClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 1 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
+    return (_jsxs("div", { className: clsx("PaDataTable", { loading }, className), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable-table", size, tableClassName), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable", col.thClassName), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.tdClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 1 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
 }

package/dist/index.d.ts

@@ -17,7 +17,6 @@ export * from "./Alert.js";
 export * from "./Badge.js";
 export * from "./Card.js";
 export * from "./Chip.js";
-export * from "./Column.js";
 export * from "./DataTable.js";
 export * from "./Breadcrumb.js";
 export * from "./MenuItem.js";

package/dist/index.js

@@ -20,7 +20,6 @@ export * from "./Alert.js";
 export * from "./Badge.js";
 export * from "./Card.js";
 export * from "./Chip.js";
-export * from "./Column.js";
 export * from "./DataTable.js";
 // Navigation
 export * from "./Breadcrumb.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",

package/styles/Button.css

@@ -13,12 +13,17 @@
   font-weight: var(--font-medium);
   line-height: 1;
   white-space: nowrap;
-  text-decoration: none;
   cursor: pointer;
   border: none;
   border-radius: var(--radius);
   transition: all var(--transition);
 
+  &,
+  &:visited,
+  &:hover {
+    text-decoration: none;
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;

package/styles/DataTable.css

@@ -2,6 +2,14 @@
    Data Table
    ======================================== */
 .PaDataTable {
+  position: relative;
+
+  &.loading {
+    min-height: 100px;
+  }
+}
+
+.PaDataTable-table {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -17,6 +25,7 @@
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
+  vertical-align: middle;
   color: var(--color-text-muted);
   text-align: left;
   text-transform: uppercase;
@@ -81,15 +90,6 @@
   white-space: nowrap;
 }
 
-/* DataTable Wrapper & Loading */
-.PaDataTable-wrapper {
-  position: relative;
-
-  &.loading {
-    min-height: 100px;
-  }
-}
-
 .PaDataTable-overlay {
   position: absolute;
   inset: 0;

package/styles/Dialog.css

@@ -82,7 +82,7 @@
 }
 
 .PaDialog-content {
-  flex: 1;
+  flex: 1 1 auto; /* Safari: use content-based flex-basis instead of 0 */
   padding: var(--space-5);
   overflow-y: auto;
 }

package/styles/InputText.css

@@ -60,6 +60,7 @@
 .PaTextField-iconWrapper {
   position: relative;
   display: flex;
+  align-self: flex-start;
 
   .PaTextInput {
     padding-left: var(--space-10);

package/styles/PasswordInput.css

@@ -10,6 +10,7 @@
 .PaPasswordInput-inputWrapper {
   position: relative;
   display: flex;
+  align-self: flex-start;
 
   &.error .PaPasswordInput-input {
     border-color: var(--color-danger);

package/styles/Select.css

@@ -13,6 +13,8 @@
 
 .PaSelectField-wrapper {
   position: relative;
+  display: flex;
+  align-self: flex-start;
 }
 
 ._paForm select,

package/styles/theme/field.css

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
+  width: 100%;
 
   &:not(:last-child) {
     margin-bottom: var(--space-4);

package/styles/theme/index.css

@@ -12,5 +12,5 @@
 @import "./tokens.css" layer(tokens);
 @import "./base.css" layer(base);
 @import "./common.css" layer(common);
-@import "./margins.css";
+@import "./utilities.css";
 @import "./field.css";

package/styles/theme/{margins.css → utilities.css}

@@ -1,119 +1,146 @@
+.PaButtonBar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &.alignRight {
+    justify-content: end;
+  }
+
+  &.spaceBetween {
+    justify-content: space-between;
+    width: 100%;
+
+    @media (max-width: 400px) {
+      justify-content: center;
+    }
+  }
+}
+
+.PaFullW {
+  width: 100% !important;
+}
+
+.PaFullH {
+  height: 100% !important;
+}
+
 /* ========================================
    Margin Utilities
    ======================================== */
 
 /* Margin Top */
-.Mt1 {
+.PaMt1 {
   margin-top: var(--space-1);
 }
-.Mt2 {
+.PaMt2 {
   margin-top: var(--space-2);
 }
-.Mt3 {
+.PaMt3 {
   margin-top: var(--space-3);
 }
-.Mt4 {
+.PaMt4 {
   margin-top: var(--space-4);
 }
-.Mt5 {
+.PaMt5 {
   margin-top: var(--space-5);
 }
-.Mt6 {
+.PaMt6 {
   margin-top: var(--space-6);
 }
-.Mt8 {
+.PaMt8 {
   margin-top: var(--space-8);
 }
-.Mt10 {
+.PaMt10 {
   margin-top: var(--space-10);
 }
-.Mt12 {
+.PaMt12 {
   margin-top: var(--space-12);
 }
 
 /* Margin Bottom */
-.Mb1 {
+.PaMb1 {
   margin-bottom: var(--space-1);
 }
-.Mb2 {
+.PaMb2 {
   margin-bottom: var(--space-2);
 }
-.Mb3 {
+.PaMb3 {
   margin-bottom: var(--space-3);
 }
-.Mb4 {
+.PaMb4 {
   margin-bottom: var(--space-4);
 }
-.Mb5 {
+.PaMb5 {
   margin-bottom: var(--space-5);
 }
-.Mb6 {
+.PaMb6 {
   margin-bottom: var(--space-6);
 }
-.Mb8 {
+.PaMb8 {
   margin-bottom: var(--space-8);
 }
-.Mb10 {
+.PaMb10 {
   margin-bottom: var(--space-10);
 }
-.Mb12 {
+.PaMb12 {
   margin-bottom: var(--space-12);
 }
 
 /* Margin Left */
-.Ml1 {
+.PaMl1 {
   margin-left: var(--space-1);
 }
-.Ml2 {
+.PaMl2 {
   margin-left: var(--space-2);
 }
-.Ml3 {
+.PaMl3 {
   margin-left: var(--space-3);
 }
-.Ml4 {
+.PaMl4 {
   margin-left: var(--space-4);
 }
-.Ml5 {
+.PaMl5 {
   margin-left: var(--space-5);
 }
-.Ml6 {
+.PaMl6 {
   margin-left: var(--space-6);
 }
-.Ml8 {
+.PaMl8 {
   margin-left: var(--space-8);
 }
-.Ml10 {
+.PaMl10 {
   margin-left: var(--space-10);
 }
-.Ml12 {
+.PaMl12 {
   margin-left: var(--space-12);
 }
 
 /* Margin Right */
-.Mr1 {
+.PaMr1 {
   margin-right: var(--space-1);
 }
-.Mr2 {
+.PaMr2 {
   margin-right: var(--space-2);
 }
-.Mr3 {
+.PaMr3 {
   margin-right: var(--space-3);
 }
-.Mr4 {
+.PaMr4 {
   margin-right: var(--space-4);
 }
-.Mr5 {
+.PaMr5 {
   margin-right: var(--space-5);
 }
-.Mr6 {
+.PaMr6 {
   margin-right: var(--space-6);
 }
-.Mr8 {
+.PaMr8 {
   margin-right: var(--space-8);
 }
-.Mr10 {
+.PaMr10 {
   margin-right: var(--space-10);
 }
-.Mr12 {
+.PaMr12 {
   margin-right: var(--space-12);
 }

package/dist/Column.d.ts

@@ -1,14 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-export interface ColumnProps<T = unknown> {
-    field?: keyof T & string;
-    header?: string;
-    body?: (rowData: T) => ReactNode;
-    style?: CSSProperties;
-    sortable?: boolean;
-    bodyClassName?: string;
-}
-/**
- * Render-less component for column definition.
- * Used for configuration only - does not render anything.
- */
-export declare function Column<T>(_props: ColumnProps<T>): null;

package/dist/Column.js

@@ -1,7 +0,0 @@
-/**
- * Render-less component for column definition.
- * Used for configuration only - does not render anything.
- */
-export function Column(_props) {
-    return null;
-}