@extrachill/components 0.3.0 → 0.4.0

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/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/index.d.ts

@@ -13,4 +13,6 @@ 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;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"}
+{"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

@@ -13,3 +13,5 @@ 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.3.0",
+  "version": "0.4.0",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

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/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/index.tsx

@@ -14,3 +14,5 @@ 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

@@ -249,6 +249,70 @@
 	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;