@extrachill/components 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+## [0.2.0] - 2026-03-25
+
+### Changed
+- Convert all components from JSX to TypeScript with exported prop interfaces
+- Remove @wordpress/components and @wordpress/element peer dependencies — use plain React
+- Add proper npm package config (exports, tsconfig, homeboy.json)
+- Add DataTable, Pagination, SearchBox, Modal, Tabs components
+
+## [0.1.0] - 2026-03-02
+
+### Added
+- Initial release with DataTable, Pagination, SearchBox, Modal components

package/README.md

@@ -0,0 +1,65 @@
+# @extrachill/components
+
+Shared React components for the Extra Chill Platform ecosystem.
+
+## Overview
+
+This package provides reusable UI components used across multiple Extra Chill WordPress plugins, ensuring consistent design and reducing code duplication.
+
+## Components
+
+- **DataTable** - Sortable data table with configurable columns
+- **Pagination** - Page navigation with configurable items per page
+- **SearchBox** - Debounced search input
+- **Modal** - Accessible modal dialog
+- **Tabs** - Controlled tab navigation for React apps and blocks
+
+## Installation
+
+From a plugin within the Extra Chill Platform:
+
+```json
+{
+  "dependencies": {
+    "@extrachill/components": "file:../../extrachill-components"
+  }
+}
+```
+
+## Usage
+
+```jsx
+import { DataTable, Pagination, SearchBox, Modal, Tabs } from '@extrachill/components';
+import '@extrachill/components/styles/components.scss';
+
+function MyComponent() {
+  return (
+    <DataTable
+      columns={[
+        { key: 'name', label: 'Name', sortable: true },
+        { key: 'email', label: 'Email' }
+      ]}
+      data={users}
+      onSort={handleSort}
+    />
+  );
+}
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies (provided by `@wordpress/scripts`):
+
+- `@wordpress/components` ^28.0.0
+- `@wordpress/element` ^6.0.0
+- `react` ^18.0.0
+
+## Used By
+
+- `extrachill-admin-tools` - Network administration tools
+- `extrachill-analytics` - Analytics dashboard
+- `extrachill-studio` - Team collaboration workspace
+
+## License
+
+GPL-2.0+

package/dist/DataTable.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface DataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    label: string;
+    width?: string;
+    render?: (value: unknown, row: T) => ReactNode;
+}
+export interface DataTableProps<T = Record<string, unknown>> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    selectable?: boolean;
+    selectedIds?: Array<string | number>;
+    onSelectChange?: (ids: Array<string | number>) => void;
+    emptyMessage?: string;
+    rowKey?: string;
+}
+export declare function DataTable<T extends Record<string, unknown>>({ columns, data, isLoading, selectable, selectedIds, onSelectChange, emptyMessage, rowKey, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../src/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CAC/C;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1D,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC5D,OAAO,EACP,IAAI,EACJ,SAAiB,EACjB,UAAkB,EAClB,WAAgB,EAChB,cAAyB,EACzB,YAA+B,EAC/B,MAAa,GACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CA+EnB"}

package/dist/DataTable.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DataTable({ columns, data, isLoading = false, selectable = false, selectedIds = [], onSelectChange = () => { }, emptyMessage = 'No data found.', rowKey = 'id', }) {
+    const allSelected = data.length > 0 && selectedIds.length === data.length;
+    const handleSelectAll = (e) => {
+        if (e.target.checked) {
+            onSelectChange(data.map((row) => row[rowKey]));
+        }
+        else {
+            onSelectChange([]);
+        }
+    };
+    const handleSelectRow = (id, checked) => {
+        if (checked) {
+            onSelectChange([...selectedIds, id]);
+        }
+        else {
+            onSelectChange(selectedIds.filter((sid) => sid !== id));
+        }
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "ec-data-table__loading", children: _jsx("span", { children: "Loading..." }) }));
+    }
+    if (data.length === 0) {
+        return (_jsx("div", { className: "ec-data-table__empty", children: _jsx("p", { children: emptyMessage }) }));
+    }
+    return (_jsxs("table", { className: "ec-data-table wp-list-table widefat fixed striped", children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { className: "ec-data-table__check-column", children: _jsx("input", { type: "checkbox", checked: allSelected, onChange: handleSelectAll }) })), columns.map((col) => (_jsx("th", { style: col.width ? { width: col.width } : undefined, children: col.label }, col.key)))] }) }), _jsx("tbody", { children: data.map((row) => (_jsxs("tr", { children: [selectable && (_jsx("td", { className: "ec-data-table__check-column", children: _jsx("input", { type: "checkbox", checked: selectedIds.includes(row[rowKey]), onChange: (e) => handleSelectRow(row[rowKey], e.target.checked) }) })), columns.map((col) => (_jsx("td", { children: col.render ? col.render(row[col.key], row) : row[col.key] }, col.key)))] }, row[rowKey]))) })] }));
+}

package/dist/Modal.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+export interface ModalProps {
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Modal({ title, isOpen, onClose, children, className, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,KAAK,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAc,GACd,EAAE,UAAU,kDAmCZ"}

package/dist/Modal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback } from 'react';
+export function Modal({ title, isOpen, onClose, children, className = '', }) {
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            onClose();
+        }
+    }, [onClose]);
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsxs("div", { className: `ec-modal ${className}`, role: "dialog", "aria-label": title, children: [_jsx("div", { className: "ec-modal__backdrop", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: "ec-modal__content", children: [_jsxs("div", { className: "ec-modal__header", children: [_jsx("h2", { children: title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { className: "ec-modal__body", children: children })] })] }));
+}

package/dist/Pagination.d.ts

@@ -0,0 +1,8 @@
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+}
+export declare function Pagination({ currentPage, totalPages, totalItems, onPageChange, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../src/Pagination.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,UAAU,CAAC,EAC1B,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAY,GACZ,EAAE,eAAe,kDA4BjB"}

package/dist/Pagination.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function Pagination({ currentPage, totalPages, totalItems, onPageChange, }) {
+    if (totalPages <= 1) {
+        return null;
+    }
+    return (_jsxs("div", { className: "ec-pagination", children: [_jsxs("span", { className: "ec-pagination__info", children: ["Page ", currentPage, " of ", totalPages, " (", totalItems, " items)"] }), _jsxs("div", { className: "ec-pagination__buttons", children: [_jsx("button", { type: "button", disabled: currentPage <= 1, onClick: () => onPageChange(currentPage - 1), children: "Previous" }), _jsx("button", { type: "button", disabled: currentPage >= totalPages, onClick: () => onPageChange(currentPage + 1), children: "Next" })] })] }));
+}

package/dist/SearchBox.d.ts

@@ -0,0 +1,8 @@
+export interface SearchBoxProps {
+    value?: string;
+    onSearch: (value: string) => void;
+    placeholder?: string;
+    onClear?: () => void;
+}
+export declare function SearchBox({ value, onSearch, placeholder, onClear, }: SearchBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchBox.d.ts.map

package/dist/SearchBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../src/SearchBox.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACzB,KAAU,EACV,QAAQ,EACR,WAAyB,EACzB,OAAO,GACP,EAAE,cAAc,2CAyChB"}

package/dist/SearchBox.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export function SearchBox({ value = '', onSearch, placeholder = 'Search...', onClear, }) {
+    const [inputValue, setInputValue] = useState(value);
+    const handleSearch = () => {
+        onSearch(inputValue);
+    };
+    const handleClear = () => {
+        setInputValue('');
+        if (onClear) {
+            onClear();
+        }
+        else {
+            onSearch('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    };
+    return (_jsxs("div", { className: "ec-search-box", children: [_jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown }), _jsx("button", { type: "button", onClick: handleSearch, children: "Search" }), inputValue && (_jsx("button", { type: "button", onClick: handleClear, children: "Clear" }))] }));
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,14 @@
+export interface TabItem {
+    id: string;
+    label: string;
+    badge?: number;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    active: string;
+    onChange: (id: string) => void;
+    classPrefix?: string;
+    className?: string;
+}
+export declare function Tabs({ tabs, active, onChange, classPrefix, className, }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,IAAI,CAAC,EACpB,IAAS,EACT,MAAM,EACN,QAAQ,EACR,WAAuB,EACvB,SAAc,GACd,EAAE,SAAS,kDA8BX"}

package/dist/Tabs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Tabs({ tabs = [], active, onChange, classPrefix = 'ec-tabs', className = '', }) {
+    if (tabs.length === 0) {
+        return null;
+    }
+    const rootClass = [`${classPrefix}__tabs`, className].filter(Boolean).join(' ');
+    return (_jsx("div", { className: rootClass, role: "tablist", "aria-orientation": "horizontal", children: tabs.map((tab) => {
+            const isActive = active === tab.id;
+            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, className: `${classPrefix}__tab${isActive ? ' is-active' : ''}`, onClick: () => onChange(tab.id), children: [tab.label, tab.badge != null && tab.badge > 0 && (_jsx("span", { className: `${classPrefix}__tab-badge`, children: tab.badge }))] }, tab.id));
+        }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @extrachill/components
+ *
+ * Shared React components for the Extra Chill Platform.
+ */
+export { DataTable, type DataTableProps, type DataTableColumn } from './DataTable.tsx';
+export { Pagination, type PaginationProps } from './Pagination.tsx';
+export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
+export { Modal, type ModalProps } from './Modal.tsx';
+export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+/**
+ * @extrachill/components
+ *
+ * Shared React components for the Extra Chill Platform.
+ */
+export { DataTable } from "./DataTable.js";
+export { Pagination } from "./Pagination.js";
+export { SearchBox } from "./SearchBox.js";
+export { Modal } from "./Modal.js";
+export { Tabs } from "./Tabs.js";

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@extrachill/components",
+  "version": "0.2.0",
+  "description": "Shared React components for the Extra Chill Platform.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles/components.scss": "./styles/components.scss",
+    "./styles/*": "./styles/*",
+    "./src": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./src/*": {
+      "types": "./src/*.tsx",
+      "default": "./src/*.tsx"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "styles",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist *.tsbuildinfo && tsc",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "extrachill",
+    "react",
+    "components",
+    "wordpress",
+    "design-system"
+  ],
+  "author": "Chris Huber <hello@chubes.net>",
+  "license": "GPL-2.0+",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Extra-Chill/extrachill-components.git"
+  },
+  "homepage": "https://github.com/Extra-Chill/extrachill-components",
+  "bugs": "https://github.com/Extra-Chill/extrachill-components/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/src/DataTable.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react';
+
+export interface DataTableColumn<T = Record<string, unknown>> {
+	key: string;
+	label: string;
+	width?: string;
+	render?: (value: unknown, row: T) => ReactNode;
+}
+
+export interface DataTableProps<T = Record<string, unknown>> {
+	columns: DataTableColumn<T>[];
+	data: T[];
+	isLoading?: boolean;
+	selectable?: boolean;
+	selectedIds?: Array<string | number>;
+	onSelectChange?: (ids: Array<string | number>) => void;
+	emptyMessage?: string;
+	rowKey?: string;
+}
+
+export function DataTable<T extends Record<string, unknown>>({
+	columns,
+	data,
+	isLoading = false,
+	selectable = false,
+	selectedIds = [],
+	onSelectChange = () => {},
+	emptyMessage = 'No data found.',
+	rowKey = 'id',
+}: DataTableProps<T>) {
+	const allSelected = data.length > 0 && selectedIds.length === data.length;
+
+	const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (e.target.checked) {
+			onSelectChange(data.map((row) => row[rowKey] as string | number));
+		} else {
+			onSelectChange([]);
+		}
+	};
+
+	const handleSelectRow = (id: string | number, checked: boolean) => {
+		if (checked) {
+			onSelectChange([...selectedIds, id]);
+		} else {
+			onSelectChange(selectedIds.filter((sid) => sid !== id));
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<div className="ec-data-table__loading">
+				<span>Loading...</span>
+			</div>
+		);
+	}
+
+	if (data.length === 0) {
+		return (
+			<div className="ec-data-table__empty">
+				<p>{emptyMessage}</p>
+			</div>
+		);
+	}
+
+	return (
+		<table className="ec-data-table wp-list-table widefat fixed striped">
+			<thead>
+				<tr>
+					{selectable && (
+						<th className="ec-data-table__check-column">
+							<input
+								type="checkbox"
+								checked={allSelected}
+								onChange={handleSelectAll}
+							/>
+						</th>
+					)}
+					{columns.map((col) => (
+						<th key={col.key} style={col.width ? { width: col.width } : undefined}>
+							{col.label}
+						</th>
+					))}
+				</tr>
+			</thead>
+			<tbody>
+				{data.map((row) => (
+					<tr key={row[rowKey] as string | number}>
+						{selectable && (
+							<td className="ec-data-table__check-column">
+								<input
+									type="checkbox"
+									checked={selectedIds.includes(row[rowKey] as string | number)}
+									onChange={(e) =>
+										handleSelectRow(row[rowKey] as string | number, e.target.checked)
+									}
+								/>
+							</td>
+						)}
+						{columns.map((col) => (
+							<td key={col.key}>
+								{col.render ? col.render(row[col.key], row) : (row[col.key] as ReactNode)}
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}

package/src/Modal.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useCallback, type ReactNode } from 'react';
+
+export interface ModalProps {
+	title: string;
+	isOpen: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	className?: string;
+}
+
+export function Modal({
+	title,
+	isOpen,
+	onClose,
+	children,
+	className = '',
+}: ModalProps) {
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				onClose();
+			}
+		},
+		[onClose]
+	);
+
+	useEffect(() => {
+		if (isOpen) {
+			document.addEventListener('keydown', handleKeyDown);
+			return () => document.removeEventListener('keydown', handleKeyDown);
+		}
+	}, [isOpen, handleKeyDown]);
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return (
+		<div className={`ec-modal ${className}`} role="dialog" aria-label={title}>
+			<div className="ec-modal__backdrop" onClick={onClose} aria-hidden="true" />
+			<div className="ec-modal__content">
+				<div className="ec-modal__header">
+					<h2>{title}</h2>
+					<button type="button" onClick={onClose} aria-label="Close">
+						&times;
+					</button>
+				</div>
+				<div className="ec-modal__body">{children}</div>
+			</div>
+		</div>
+	);
+}

package/src/Pagination.tsx

@@ -0,0 +1,41 @@
+export interface PaginationProps {
+	currentPage: number;
+	totalPages: number;
+	totalItems: number;
+	onPageChange: (page: number) => void;
+}
+
+export function Pagination({
+	currentPage,
+	totalPages,
+	totalItems,
+	onPageChange,
+}: PaginationProps) {
+	if (totalPages <= 1) {
+		return null;
+	}
+
+	return (
+		<div className="ec-pagination">
+			<span className="ec-pagination__info">
+				Page {currentPage} of {totalPages} ({totalItems} items)
+			</span>
+			<div className="ec-pagination__buttons">
+				<button
+					type="button"
+					disabled={currentPage <= 1}
+					onClick={() => onPageChange(currentPage - 1)}
+				>
+					Previous
+				</button>
+				<button
+					type="button"
+					disabled={currentPage >= totalPages}
+					onClick={() => onPageChange(currentPage + 1)}
+				>
+					Next
+				</button>
+			</div>
+		</div>
+	);
+}

package/src/SearchBox.tsx

@@ -0,0 +1,56 @@
+import { useState, type KeyboardEvent } from 'react';
+
+export interface SearchBoxProps {
+	value?: string;
+	onSearch: (value: string) => void;
+	placeholder?: string;
+	onClear?: () => void;
+}
+
+export function SearchBox({
+	value = '',
+	onSearch,
+	placeholder = 'Search...',
+	onClear,
+}: SearchBoxProps) {
+	const [inputValue, setInputValue] = useState(value);
+
+	const handleSearch = () => {
+		onSearch(inputValue);
+	};
+
+	const handleClear = () => {
+		setInputValue('');
+		if (onClear) {
+			onClear();
+		} else {
+			onSearch('');
+		}
+	};
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'Enter') {
+			handleSearch();
+		}
+	};
+
+	return (
+		<div className="ec-search-box">
+			<input
+				type="text"
+				value={inputValue}
+				onChange={(e) => setInputValue(e.target.value)}
+				placeholder={placeholder}
+				onKeyDown={handleKeyDown}
+			/>
+			<button type="button" onClick={handleSearch}>
+				Search
+			</button>
+			{inputValue && (
+				<button type="button" onClick={handleClear}>
+					Clear
+				</button>
+			)}
+		</div>
+	);
+}

package/src/Tabs.tsx

@@ -0,0 +1,51 @@
+export interface TabItem {
+	id: string;
+	label: string;
+	badge?: number;
+}
+
+export interface TabsProps {
+	tabs: TabItem[];
+	active: string;
+	onChange: (id: string) => void;
+	classPrefix?: string;
+	className?: string;
+}
+
+export function Tabs({
+	tabs = [],
+	active,
+	onChange,
+	classPrefix = 'ec-tabs',
+	className = '',
+}: TabsProps) {
+	if (tabs.length === 0) {
+		return null;
+	}
+
+	const rootClass = [`${classPrefix}__tabs`, className].filter(Boolean).join(' ');
+
+	return (
+		<div className={rootClass} role="tablist" aria-orientation="horizontal">
+			{tabs.map((tab) => {
+				const isActive = active === tab.id;
+
+				return (
+					<button
+						key={tab.id}
+						type="button"
+						role="tab"
+						aria-selected={isActive}
+						className={`${classPrefix}__tab${isActive ? ' is-active' : ''}`}
+						onClick={() => onChange(tab.id)}
+					>
+						{tab.label}
+						{tab.badge != null && tab.badge > 0 && (
+							<span className={`${classPrefix}__tab-badge`}>{tab.badge}</span>
+						)}
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/src/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * @extrachill/components
+ *
+ * Shared React components for the Extra Chill Platform.
+ */
+
+export { DataTable, type DataTableProps, type DataTableColumn } from './DataTable.tsx';
+export { Pagination, type PaginationProps } from './Pagination.tsx';
+export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
+export { Modal, type ModalProps } from './Modal.tsx';
+export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';

package/styles/components.scss

@@ -0,0 +1,160 @@
+/**
+ * Shared Component Styles
+ *
+ * Styles for extrachill-components shared across plugins.
+ */
+
+// Data Table
+.ec-data-table {
+	&__loading,
+	&__empty {
+		padding: 40px;
+		text-align: center;
+		background: #f9f9f9;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+
+		.components-spinner {
+			margin-right: 10px;
+		}
+	}
+
+	&__check-column {
+		width: 40px;
+		padding: 8px !important;
+	}
+
+	// Override WP table styles
+	&.wp-list-table {
+		margin-top: 15px;
+
+		th,
+		td {
+			vertical-align: middle;
+		}
+	}
+}
+
+// Pagination
+.ec-pagination {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 15px;
+	padding-top: 15px;
+	border-top: 1px solid #eee;
+
+	&__info {
+		color: #646970;
+		font-size: 13px;
+	}
+
+	&__buttons {
+		display: flex;
+		gap: 8px;
+	}
+}
+
+// Search Box
+.ec-search-box {
+	display: flex;
+	gap: 8px;
+	align-items: flex-end;
+	margin-bottom: 15px;
+
+	.components-text-control {
+		min-width: 300px;
+	}
+}
+
+// Modal overrides
+.ec-modal {
+	.components-modal__content {
+		min-width: 500px;
+	}
+}
+
+// Tabs — default styles for classPrefix="ec-tabs"
+// Consumers with custom classPrefix (e.g. "ec-am") duplicate
+// these rules under their own namespace in their block SCSS.
+.ec-tabs__tabs {
+	display: inline-flex;
+	gap: var(--spacing-sm, 0.5rem);
+	flex-wrap: wrap;
+}
+
+.ec-tabs__tab {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-xs, 0.25rem);
+	border: 1px solid var(--border-color, #ddd);
+	background: var(--background-color, #fff);
+	padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+	border-radius: var(--border-radius-sm, 4px);
+	cursor: pointer;
+	color: var(--text-color, #111);
+	font: inherit;
+	font-size: var(--font-size-base, 1rem);
+	font-weight: 600;
+	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+
+	&:hover {
+		background: var(--card-background, #f1f5f9);
+	}
+
+	&.is-active {
+		border-color: var(--header-background, #1a1a1a);
+		background: var(--header-background, #1a1a1a);
+		color: var(--header-text-color, #fff);
+	}
+}
+
+.ec-tabs__tab-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 6px;
+	border-radius: 10px;
+	background: var(--accent, #53940b);
+	color: var(--background-color, #fff);
+	font-size: var(--font-size-xs, 0.625rem);
+	font-weight: 600;
+
+	.ec-tabs__tab.is-active & {
+		background: var(--background-color, #fff);
+		color: var(--header-background, #1a1a1a);
+	}
+}
+
+// Badges (commonly used with tables)
+.ec-badge {
+	display: inline-block;
+	padding: 3px 8px;
+	border-radius: 3px;
+	font-size: 12px;
+	font-weight: 500;
+
+	&--yes,
+	&--success {
+		background: #d4edda;
+		color: #155724;
+	}
+
+	&--no,
+	&--error {
+		background: #f8d7da;
+		color: #721c24;
+	}
+
+	&--info {
+		background: #cce5ff;
+		color: #004085;
+	}
+
+	&--warning {
+		background: #fff3cd;
+		color: #856404;
+	}
+}