@extrachill/components 0.2.0 → 1.0.0

package/package.json

@@ -1,62 +1,50 @@
 {
   "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",
+  "version": "1.0.0",
+  "description": "Shared React components for the Extra Chill Platform",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": "./dist/index.mjs",
+      "require": "./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"
-    }
+    "./styles/components.scss": "./src/styles/components.scss",
+    "./styles/*": "./src/styles/*"
   },
   "files": [
-    "src",
     "dist",
-    "styles",
-    "README.md",
-    "CHANGELOG.md"
+    "src/styles"
   ],
   "scripts": {
-    "build": "rm -rf dist *.tsbuildinfo && tsc",
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external @wordpress/components --external @wordpress/element",
     "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"
-  },
+  "keywords": [
+    "extrachill",
+    "react",
+    "components",
+    "wordpress"
+  ],
   "peerDependencies": {
+    "@wordpress/components": ">=28.0.0",
+    "@wordpress/element": ">=6.0.0",
     "react": ">=18.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
-    "typescript": "^5.7.0"
+    "@wordpress/components": "^28.0.0",
+    "@wordpress/element": "^6.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
   }
 }

package/{styles → src/styles}/components.scss

@@ -74,60 +74,6 @@
 	}
 }
 
-// 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;

package/CHANGELOG.md

@@ -1,14 +0,0 @@
-# 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/dist/DataTable.d.ts

@@ -1,19 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,27 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,19 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-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.map

@@ -1 +0,0 @@
-{"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/src/DataTable.tsx

@@ -1,109 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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>
-	);
-}