@extrachill/components 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.4.1] - 2026-03-25
+
+### Changed
+- add shared badge primitive
+
 ## [0.2.0] - 2026-03-25
 
 ### Changed

package/dist/Badge.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface BadgeProps {
+    children: ReactNode;
+    tone?: 'default' | 'muted' | 'success' | 'error' | 'warning' | 'info';
+    variant?: 'solid' | 'outline' | 'subtle';
+    size?: 'sm' | 'md';
+    className?: string;
+    classPrefix?: string;
+}
+export declare function Badge({ children, tone, variant, size, className, classPrefix, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,KAAK,CAAE,EACtB,QAAQ,EACR,IAAgB,EAChB,OAAkB,EAClB,IAAW,EACX,SAAc,EACd,WAAwB,GACxB,EAAE,UAAU,2CAUZ"}

package/dist/Badge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Badge({ children, tone = 'default', variant = 'subtle', size = 'sm', className = '', classPrefix = 'ec-badge', }) {
+    const classes = [
+        classPrefix,
+        `${classPrefix}--${tone}`,
+        `${classPrefix}--${variant}`,
+        `${classPrefix}--${size}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return _jsx("span", { className: classes, children: children });
+}

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,7 @@ 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 { Badge, type BadgeProps } from './Badge.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,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,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,6 @@ export { PanelHeader } from "./PanelHeader.js";
 export { ActionRow } from "./ActionRow.js";
 export { FieldGroup } from "./FieldGroup.js";
 export { InlineStatus } from "./InlineStatus.js";
+export { Badge } from "./Badge.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.1",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

package/src/Badge.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+
+export interface BadgeProps {
+	children: ReactNode;
+	tone?: 'default' | 'muted' | 'success' | 'error' | 'warning' | 'info';
+	variant?: 'solid' | 'outline' | 'subtle';
+	size?: 'sm' | 'md';
+	className?: string;
+	classPrefix?: string;
+}
+
+export function Badge( {
+	children,
+	tone = 'default',
+	variant = 'subtle',
+	size = 'sm',
+	className = '',
+	classPrefix = 'ec-badge',
+}: BadgeProps ) {
+	const classes = [
+		classPrefix,
+		`${ classPrefix }--${ tone }`,
+		`${ classPrefix }--${ variant }`,
+		`${ classPrefix }--${ size }`,
+		className,
+	].filter( Boolean ).join( ' ' );
+
+	return <span className={ classes }>{ children }</span>;
+}

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,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 { Badge, type BadgeProps } from './Badge.tsx';
+export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
+export { MediaField, type MediaFieldProps } from './MediaField.tsx';

package/styles/components.scss

@@ -249,33 +249,197 @@
 	color: #004085;
 }
 
-// Badges (commonly used with tables)
+// 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
 .ec-badge {
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-xs, 0.25rem);
 	padding: 3px 8px;
-	border-radius: 3px;
-	font-size: 12px;
+	border-radius: var(--border-radius-pill, 999px);
+	font-size: var(--font-size-xs, 0.75rem);
 	font-weight: 500;
+	line-height: 1;
+	text-decoration: none;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+}
 
-	&--yes,
-	&--success {
-		background: #d4edda;
-		color: #155724;
-	}
+.ec-badge--sm {
+	padding: 2px 8px;
+}
 
-	&--no,
-	&--error {
-		background: #f8d7da;
-		color: #721c24;
-	}
+.ec-badge--md {
+	padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
+	font-size: var(--font-size-sm, 0.875rem);
+}
 
-	&--info {
-		background: #cce5ff;
-		color: #004085;
-	}
+.ec-badge--default.ec-badge--subtle {
+	background: var(--card-background, #f8f8f8);
+	color: var(--link-color, #1a1a1a);
+	border-color: var(--border-color, #ddd);
+}
 
-	&--warning {
-		background: #fff3cd;
-		color: #856404;
-	}
+.ec-badge--muted.ec-badge--subtle {
+	background: var(--border-color, #ddd);
+	color: var(--muted-text, #666);
+	border-color: var(--border-color, #ddd);
+}
+
+.ec-badge--success.ec-badge--subtle,
+.ec-badge--yes.ec-badge--subtle {
+	background: #d4edda;
+	color: #155724;
+	border-color: #c3e6cb;
+}
+
+.ec-badge--error.ec-badge--subtle,
+.ec-badge--no.ec-badge--subtle {
+	background: #f8d7da;
+	color: #721c24;
+	border-color: #f5c6cb;
+}
+
+.ec-badge--info.ec-badge--subtle {
+	background: #cce5ff;
+	color: #004085;
+	border-color: #b8daff;
+}
+
+.ec-badge--warning.ec-badge--subtle {
+	background: #fff3cd;
+	color: #856404;
+	border-color: #ffeeba;
+}
+
+.ec-badge--default.ec-badge--outline,
+.ec-badge--muted.ec-badge--outline,
+.ec-badge--success.ec-badge--outline,
+.ec-badge--error.ec-badge--outline,
+.ec-badge--warning.ec-badge--outline,
+.ec-badge--info.ec-badge--outline {
+	background: transparent;
+}
+
+.ec-badge--default.ec-badge--outline {
+	color: var(--link-color, #1a1a1a);
+	border-color: var(--border-color, #ddd);
+}
+
+.ec-badge--muted.ec-badge--outline {
+	color: var(--muted-text, #666);
+	border-color: var(--border-color, #ddd);
+}
+
+.ec-badge--success.ec-badge--outline {
+	color: #155724;
+	border-color: #c3e6cb;
+}
+
+.ec-badge--error.ec-badge--outline {
+	color: #721c24;
+	border-color: #f5c6cb;
+}
+
+.ec-badge--warning.ec-badge--outline {
+	color: #856404;
+	border-color: #ffeeba;
+}
+
+.ec-badge--info.ec-badge--outline {
+	color: #004085;
+	border-color: #b8daff;
+}
+
+.ec-badge--default.ec-badge--solid {
+	background: var(--link-color, #1a1a1a);
+	color: var(--button-text-color, #fff);
+}
+
+.ec-badge--muted.ec-badge--solid {
+	background: var(--muted-text, #666);
+	color: var(--background-color, #fff);
+}
+
+.ec-badge--success.ec-badge--solid {
+	background: var(--accent, #53940b);
+	color: var(--background-color, #fff);
+}
+
+.ec-badge--error.ec-badge--solid {
+	background: var(--error-color, #dc3232);
+	color: var(--background-color, #fff);
+}
+
+.ec-badge--warning.ec-badge--solid {
+	background: #f0ad4e;
+	color: #000;
+}
+
+.ec-badge--info.ec-badge--solid {
+	background: #0d6efd;
+	color: #fff;
 }