@extrachill/components 0.2.0 → 0.3.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/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/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,9 @@ 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';
 //# 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"}

package/dist/index.js

@@ -8,3 +8,8 @@ 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/components",
-  "version": "0.2.0",
+  "version": "0.3.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/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/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,8 @@ 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';

package/styles/components.scss

@@ -128,6 +128,127 @@
 	}
 }
 
+// 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;
+}
+
 // Badges (commonly used with tables)
 .ec-badge {
 	display: inline-block;