@extrachill/components 0.2.0 → 0.4.0

package/dist/ActionRow.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface ActionRowProps {
+    children: ReactNode;
+    align?: 'start' | 'between' | 'end';
+    className?: string;
+    classPrefix?: string;
+}
+export declare function ActionRow({ children, align, className, classPrefix, }: ActionRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionRow.d.ts.map

package/dist/ActionRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.d.ts","sourceRoot":"","sources":["../src/ActionRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAE,EAC1B,QAAQ,EACR,KAAe,EACf,SAAc,EACd,WAA6B,GAC7B,EAAE,cAAc,2CAQhB"}

package/dist/ActionRow.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ActionRow({ children, align = 'start', className = '', classPrefix = 'ec-action-row', }) {
+    return (_jsx("div", { className: [classPrefix, `${classPrefix}--${align}`, className].filter(Boolean).join(' '), children: children }));
+}

package/dist/FieldGroup.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface FieldGroupProps {
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactNode;
+    className?: string;
+    classPrefix?: string;
+    htmlFor?: string;
+}
+export declare function FieldGroup({ label, help, error, required, children, className, classPrefix, htmlFor, }: FieldGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldGroup.d.ts.map

package/dist/FieldGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../src/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAE,EAC3B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAO,GACP,EAAE,eAAe,2CAcjB"}

package/dist/FieldGroup.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FieldGroup({ label, help, error, required = false, children, className = '', classPrefix = 'ec-field-group', htmlFor, }) {
+    return (_jsxs("div", { className: [classPrefix, className].filter(Boolean).join(' '), children: [label && (_jsxs("label", { className: `${classPrefix}__label`, htmlFor: htmlFor, children: [label, required && _jsx("span", { className: `${classPrefix}__required`, children: " *" })] })), _jsx("div", { className: `${classPrefix}__control`, children: children }), help && _jsx("div", { className: `${classPrefix}__help`, children: help }), error && _jsx("div", { className: `${classPrefix}__error`, children: error })] }));
+}

package/dist/ImagePreview.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface ImagePreviewProps {
+    src: string;
+    alt?: string;
+    className?: string;
+    classPrefix?: string;
+    overlay?: ReactNode;
+}
+export declare function ImagePreview({ src, alt, className, classPrefix, overlay, }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImagePreview.d.ts.map

package/dist/ImagePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../src/ImagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAE,EAC7B,GAAG,EACH,GAAQ,EACR,SAAc,EACd,WAAgC,EAChC,OAAO,GACP,EAAE,iBAAiB,2CAOnB"}

package/dist/ImagePreview.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ImagePreview({ src, alt = '', className = '', classPrefix = 'ec-image-preview', overlay, }) {
+    return (_jsxs("div", { className: [classPrefix, className].filter(Boolean).join(' '), children: [_jsx("img", { src: src, alt: alt, className: `${classPrefix}__image` }), overlay ? _jsx("div", { className: `${classPrefix}__overlay`, children: overlay }) : null] }));
+}

package/dist/InlineStatus.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface InlineStatusProps {
+    children: ReactNode;
+    tone: 'success' | 'error' | 'warning' | 'info';
+    className?: string;
+    classPrefix?: string;
+}
+export declare function InlineStatus({ children, tone, className, classPrefix, }: InlineStatusProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InlineStatus.d.ts.map

package/dist/InlineStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineStatus.d.ts","sourceRoot":"","sources":["../src/InlineStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAE,EAC7B,QAAQ,EACR,IAAI,EACJ,SAAc,EACd,WAAgC,GAChC,EAAE,iBAAiB,2CAMnB"}

package/dist/InlineStatus.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function InlineStatus({ children, tone, className = '', classPrefix = 'ec-inline-status', }) {
+    return (_jsx("div", { className: [classPrefix, `${classPrefix}--${tone}`, className].filter(Boolean).join(' '), children: children }));
+}

package/dist/MediaField.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface MediaFieldProps {
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+    previewUrl?: string | null;
+    previewAlt?: string;
+    preview?: ReactNode;
+    empty?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    classPrefix?: string;
+}
+export declare function MediaField({ label, help, error, required, htmlFor, previewUrl, previewAlt, preview, empty, actions, children, className, classPrefix, }: MediaFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaField.d.ts.map

package/dist/MediaField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaField.d.ts","sourceRoot":"","sources":["../src/MediaField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAE,EAC3B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,OAAO,EACP,UAAU,EACV,UAAe,EACf,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAc,EACd,WAA8B,GAC9B,EAAE,eAAe,2CAkCjB"}

package/dist/MediaField.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionRow } from "./ActionRow.js";
+import { FieldGroup } from "./FieldGroup.js";
+import { ImagePreview } from "./ImagePreview.js";
+export function MediaField({ label, help, error, required = false, htmlFor, previewUrl, previewAlt = '', preview, empty, actions, children, className = '', classPrefix = 'ec-media-field', }) {
+    const mediaClassName = [classPrefix, className].filter(Boolean).join(' ');
+    const hasMeta = Boolean(label || help || error || required);
+    const previewContent = preview || (previewUrl ? _jsx(ImagePreview, { src: previewUrl, alt: previewAlt }) : null);
+    const body = (_jsxs(_Fragment, { children: [children ? _jsx("div", { className: `${classPrefix}__input`, children: children }) : null, _jsx("div", { className: `${classPrefix}__surface`, children: previewContent ? (_jsx("div", { className: `${classPrefix}__preview`, children: previewContent })) : empty ? (_jsx("div", { className: `${classPrefix}__empty`, children: empty })) : null }), actions ? _jsx(ActionRow, { className: `${classPrefix}__actions`, children: actions }) : null] }));
+    if (hasMeta) {
+        return (_jsx(FieldGroup, { label: label, help: help, error: error, required: required, htmlFor: htmlFor, className: mediaClassName, children: body }));
+    }
+    return _jsx("div", { className: mediaClassName, children: body });
+}

package/dist/Panel.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PanelProps {
+    children: ReactNode;
+    className?: string;
+    classPrefix?: string;
+    compact?: boolean;
+}
+export declare function Panel({ children, className, classPrefix, compact, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,KAAK,CAAE,EACtB,QAAQ,EACR,SAAc,EACd,WAAwB,EACxB,OAAe,GACf,EAAE,UAAU,2CAQZ"}

package/dist/Panel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Panel({ children, className = '', classPrefix = 'ec-panel', compact = false, }) {
+    const panelClass = [
+        classPrefix,
+        compact ? `${classPrefix}--compact` : '',
+        className,
+    ].filter(Boolean).join(' ');
+    return _jsx("div", { className: panelClass, children: children });
+}

package/dist/PanelHeader.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PanelHeaderProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+    classPrefix?: string;
+}
+export declare function PanelHeader({ title, description, actions, className, classPrefix, }: PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PanelHeader.d.ts.map

package/dist/PanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../src/PanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAE,EAC5B,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAA+B,GAC/B,EAAE,gBAAgB,2CAUlB"}

package/dist/PanelHeader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PanelHeader({ title, description, actions, className = '', classPrefix = 'ec-panel-header', }) {
+    return (_jsxs("div", { className: [classPrefix, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: `${classPrefix}__main`, children: [title && _jsx("div", { className: `${classPrefix}__title`, children: title }), description && _jsx("div", { className: `${classPrefix}__description`, children: description })] }), actions && _jsx("div", { className: `${classPrefix}__actions`, children: actions })] }));
+}

package/dist/index.d.ts

@@ -8,4 +8,11 @@ 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';
+export { Panel, type PanelProps } from './Panel.tsx';
+export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
+export { ActionRow, type ActionRowProps } from './ActionRow.tsx';
+export { FieldGroup, type FieldGroupProps } from './FieldGroup.tsx';
+export { InlineStatus, type InlineStatusProps } from './InlineStatus.tsx';
+export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
+export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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;AAChE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -8,3 +8,10 @@ export { Pagination } from "./Pagination.js";
 export { SearchBox } from "./SearchBox.js";
 export { Modal } from "./Modal.js";
 export { Tabs } from "./Tabs.js";
+export { Panel } from "./Panel.js";
+export { PanelHeader } from "./PanelHeader.js";
+export { ActionRow } from "./ActionRow.js";
+export { FieldGroup } from "./FieldGroup.js";
+export { InlineStatus } from "./InlineStatus.js";
+export { ImagePreview } from "./ImagePreview.js";
+export { MediaField } from "./MediaField.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

package/src/ActionRow.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface ActionRowProps {
+	children: ReactNode;
+	align?: 'start' | 'between' | 'end';
+	className?: string;
+	classPrefix?: string;
+}
+
+export function ActionRow( {
+	children,
+	align = 'start',
+	className = '',
+	classPrefix = 'ec-action-row',
+}: ActionRowProps ) {
+	return (
+		<div
+			className={ [ classPrefix, `${ classPrefix }--${ align }`, className ].filter( Boolean ).join( ' ' ) }
+		>
+			{ children }
+		</div>
+	);
+}

package/src/FieldGroup.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+export interface FieldGroupProps {
+	label?: ReactNode;
+	help?: ReactNode;
+	error?: ReactNode;
+	required?: boolean;
+	children: ReactNode;
+	className?: string;
+	classPrefix?: string;
+	htmlFor?: string;
+}
+
+export function FieldGroup( {
+	label,
+	help,
+	error,
+	required = false,
+	children,
+	className = '',
+	classPrefix = 'ec-field-group',
+	htmlFor,
+}: FieldGroupProps ) {
+	return (
+		<div className={ [ classPrefix, className ].filter( Boolean ).join( ' ' ) }>
+			{ label && (
+				<label className={ `${ classPrefix }__label` } htmlFor={ htmlFor }>
+					{ label }
+					{ required && <span className={ `${ classPrefix }__required` }> *</span> }
+				</label>
+			) }
+			<div className={ `${ classPrefix }__control` }>{ children }</div>
+			{ help && <div className={ `${ classPrefix }__help` }>{ help }</div> }
+			{ error && <div className={ `${ classPrefix }__error` }>{ error }</div> }
+		</div>
+	);
+}

package/src/ImagePreview.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface ImagePreviewProps {
+	src: string;
+	alt?: string;
+	className?: string;
+	classPrefix?: string;
+	overlay?: ReactNode;
+}
+
+export function ImagePreview( {
+	src,
+	alt = '',
+	className = '',
+	classPrefix = 'ec-image-preview',
+	overlay,
+}: ImagePreviewProps ) {
+	return (
+		<div className={ [ classPrefix, className ].filter( Boolean ).join( ' ' ) }>
+			<img src={ src } alt={ alt } className={ `${ classPrefix }__image` } />
+			{ overlay ? <div className={ `${ classPrefix }__overlay` }>{ overlay }</div> : null }
+		</div>
+	);
+}

package/src/InlineStatus.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface InlineStatusProps {
+	children: ReactNode;
+	tone: 'success' | 'error' | 'warning' | 'info';
+	className?: string;
+	classPrefix?: string;
+}
+
+export function InlineStatus( {
+	children,
+	tone,
+	className = '',
+	classPrefix = 'ec-inline-status',
+}: InlineStatusProps ) {
+	return (
+		<div className={ [ classPrefix, `${ classPrefix }--${ tone }`, className ].filter( Boolean ).join( ' ' ) }>
+			{ children }
+		</div>
+	);
+}

package/src/MediaField.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { ActionRow } from './ActionRow.tsx';
+import { FieldGroup } from './FieldGroup.tsx';
+import { ImagePreview } from './ImagePreview.tsx';
+
+export interface MediaFieldProps {
+	label?: ReactNode;
+	help?: ReactNode;
+	error?: ReactNode;
+	required?: boolean;
+	htmlFor?: string;
+	previewUrl?: string | null;
+	previewAlt?: string;
+	preview?: ReactNode;
+	empty?: ReactNode;
+	actions?: ReactNode;
+	children?: ReactNode;
+	className?: string;
+	classPrefix?: string;
+}
+
+export function MediaField( {
+	label,
+	help,
+	error,
+	required = false,
+	htmlFor,
+	previewUrl,
+	previewAlt = '',
+	preview,
+	empty,
+	actions,
+	children,
+	className = '',
+	classPrefix = 'ec-media-field',
+}: MediaFieldProps ) {
+	const mediaClassName = [ classPrefix, className ].filter( Boolean ).join( ' ' );
+	const hasMeta = Boolean( label || help || error || required );
+	const previewContent = preview || ( previewUrl ? <ImagePreview src={ previewUrl } alt={ previewAlt } /> : null );
+	const body = (
+		<>
+			{ children ? <div className={ `${ classPrefix }__input` }>{ children }</div> : null }
+			<div className={ `${ classPrefix }__surface` }>
+				{ previewContent ? (
+					<div className={ `${ classPrefix }__preview` }>{ previewContent }</div>
+				) : empty ? (
+					<div className={ `${ classPrefix }__empty` }>{ empty }</div>
+				) : null }
+			</div>
+			{ actions ? <ActionRow className={ `${ classPrefix }__actions` }>{ actions }</ActionRow> : null }
+		</>
+	);
+
+	if ( hasMeta ) {
+		return (
+			<FieldGroup
+				label={ label }
+				help={ help }
+				error={ error }
+				required={ required }
+				htmlFor={ htmlFor }
+				className={ mediaClassName }
+			>
+				{ body }
+			</FieldGroup>
+		);
+	}
+
+	return <div className={ mediaClassName }>{ body }</div>;
+}

package/src/Panel.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface PanelProps {
+	children: ReactNode;
+	className?: string;
+	classPrefix?: string;
+	compact?: boolean;
+}
+
+export function Panel( {
+	children,
+	className = '',
+	classPrefix = 'ec-panel',
+	compact = false,
+}: PanelProps ) {
+	const panelClass = [
+		classPrefix,
+		compact ? `${ classPrefix }--compact` : '',
+		className,
+	].filter( Boolean ).join( ' ' );
+
+	return <div className={ panelClass }>{ children }</div>;
+}

package/src/PanelHeader.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export interface PanelHeaderProps {
+	title?: ReactNode;
+	description?: ReactNode;
+	actions?: ReactNode;
+	className?: string;
+	classPrefix?: string;
+}
+
+export function PanelHeader( {
+	title,
+	description,
+	actions,
+	className = '',
+	classPrefix = 'ec-panel-header',
+}: PanelHeaderProps ) {
+	return (
+		<div className={ [ classPrefix, className ].filter( Boolean ).join( ' ' ) }>
+			<div className={ `${ classPrefix }__main` }>
+				{ title && <div className={ `${ classPrefix }__title` }>{ title }</div> }
+				{ description && <div className={ `${ classPrefix }__description` }>{ description }</div> }
+			</div>
+			{ actions && <div className={ `${ classPrefix }__actions` }>{ actions }</div> }
+		</div>
+	);
+}

package/src/index.tsx

@@ -9,3 +9,10 @@ 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';
+export { Panel, type PanelProps } from './Panel.tsx';
+export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
+export { ActionRow, type ActionRowProps } from './ActionRow.tsx';
+export { FieldGroup, type FieldGroupProps } from './FieldGroup.tsx';
+export { InlineStatus, type InlineStatusProps } from './InlineStatus.tsx';
+export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
+export { MediaField, type MediaFieldProps } from './MediaField.tsx';

package/styles/components.scss

@@ -128,6 +128,191 @@
 	}
 }
 
+// Panel
+.ec-panel {
+	border: 1px solid var(--border-color, #ddd);
+	border-radius: var(--border-radius-lg, 8px);
+	padding: var(--spacing-md, 1rem);
+	background: var(--card-background, #f8f8f8);
+	display: grid;
+	gap: var(--spacing-md, 1rem);
+}
+
+.ec-panel--compact {
+	padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+	border-radius: var(--border-radius-md, 6px);
+}
+
+// Panel Header
+.ec-panel-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--spacing-md, 1rem);
+	flex-wrap: wrap;
+	padding-bottom: var(--spacing-md, 1rem);
+	border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.ec-panel-header__main {
+	display: grid;
+	gap: var(--spacing-xs, 0.25rem);
+}
+
+.ec-panel-header__title {
+	margin: 0;
+	font-family: var(--font-family-heading, inherit);
+	font-weight: 600;
+	color: var(--text-color, #111);
+}
+
+.ec-panel-header__description {
+	color: var(--muted-text, #666);
+	font-size: var(--font-size-sm, 0.875rem);
+}
+
+.ec-panel-header__actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm, 0.5rem);
+	flex-wrap: wrap;
+}
+
+// Action Row
+.ec-action-row {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm, 0.5rem);
+	flex-wrap: wrap;
+}
+
+.ec-action-row--between {
+	justify-content: space-between;
+}
+
+.ec-action-row--end {
+	justify-content: flex-end;
+}
+
+// Field Group
+.ec-field-group {
+	display: grid;
+	gap: var(--spacing-xs, 0.25rem);
+	margin-bottom: var(--spacing-md, 1rem);
+}
+
+.ec-field-group__label {
+	display: block;
+	font-weight: 600;
+	color: var(--text-color, #111);
+	font-size: var(--font-size-sm, 0.875rem);
+}
+
+.ec-field-group__required {
+	color: var(--error-color, #dc3232);
+}
+
+.ec-field-group__control {
+	display: grid;
+	gap: var(--spacing-xs, 0.25rem);
+}
+
+.ec-field-group__help {
+	font-size: var(--font-size-sm, 0.875rem);
+	color: var(--muted-text, #666);
+}
+
+.ec-field-group__error {
+	font-size: var(--font-size-sm, 0.875rem);
+	color: var(--error-color, #dc3232);
+}
+
+// Inline Status
+.ec-inline-status {
+	font-size: var(--font-size-sm, 0.875rem);
+	font-weight: 500;
+}
+
+.ec-inline-status--success {
+	color: var(--success-color, #2e7d32);
+}
+
+.ec-inline-status--error {
+	color: var(--error-color, #dc3232);
+}
+
+.ec-inline-status--warning {
+	color: #856404;
+}
+
+.ec-inline-status--info {
+	color: #004085;
+}
+
+// Image Preview
+.ec-image-preview {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	max-width: 100%;
+	overflow: hidden;
+	border: 1px solid var(--border-color, #ddd);
+	border-radius: var(--border-radius-md, 6px);
+	background: var(--background-color, #fff);
+	padding: var(--spacing-xs, 0.25rem);
+	box-sizing: border-box;
+}
+
+.ec-image-preview__image {
+	display: block;
+	max-width: min(100%, var(--ec-image-preview-max-width, 220px));
+	width: auto;
+	height: auto;
+	border-radius: inherit;
+}
+
+.ec-image-preview__overlay {
+	position: absolute;
+	inset: 0;
+}
+
+// Media Field
+.ec-media-field {
+	display: grid;
+	gap: var(--spacing-sm, 0.5rem);
+}
+
+.ec-media-field__input {
+	display: grid;
+	gap: var(--spacing-xs, 0.25rem);
+}
+
+.ec-media-field__surface {
+	display: grid;
+	gap: var(--spacing-sm, 0.5rem);
+}
+
+.ec-media-field__preview,
+.ec-media-field__empty {
+	display: grid;
+	gap: var(--spacing-sm, 0.5rem);
+	justify-items: start;
+}
+
+.ec-media-field__empty {
+	padding: var(--spacing-md, 1rem);
+	border: 1px dashed var(--border-color, #ddd);
+	border-radius: var(--border-radius-md, 6px);
+	background: var(--background-color, #fff);
+	color: var(--muted-text, #666);
+	font-size: var(--font-size-sm, 0.875rem);
+}
+
+.ec-media-field__actions {
+	margin-top: 0;
+}
+
 // Badges (commonly used with tables)
 .ec-badge {
 	display: inline-block;