@extrachill/components 0.4.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/index.d.ts

@@ -13,6 +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;AAC1E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,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,5 +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.4.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/index.tsx

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

@@ -313,33 +313,133 @@
 	margin-top: 0;
 }
 
-// Badges (commonly used with tables)
+// 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;
 }