@salmexio/ui 0.1.0

package/dist/primitives/Badge/Badge.svelte

@@ -0,0 +1,351 @@
+<!--
+  @component Badge
+
+  Win2K × Basquiat — Status badge for labels, counts, and states.
+  Bold borders, high contrast, role="status" for screen readers.
+
+  @example
+  <Badge status="success">Active</Badge>
+  <Badge status="warning" size="lg" dot />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+
+	type BadgeSize = 'sm' | 'md' | 'lg';
+	type BadgeStatus =
+		| 'neutral'
+		| 'primary'
+		| 'success'
+		| 'warning'
+		| 'error'
+		| 'info'
+		| 'outline';
+
+	interface Props {
+		/** Semantic status / variant */
+		status?: BadgeStatus;
+		/** Size */
+		size?: BadgeSize;
+		/** Pill shape (fully rounded) — we use minimal radius by default */
+		pill?: boolean;
+		/** Dot-only indicator (no text), use with aria-label for a11y */
+		dot?: boolean;
+		/** Optional icon before label */
+		icon?: Snippet;
+		/** Additional class names */
+		class?: string;
+		/** Badge content (ignored when dot) */
+		children?: Snippet;
+		/** Accessible label when dot (required when dot for a11y) */
+		'aria-label'?: string;
+	}
+
+	let {
+		status = 'neutral',
+		size = 'md',
+		pill = false,
+		dot = false,
+		icon,
+		class: className = '',
+		children,
+		'aria-label': ariaLabel
+	}: Props = $props();
+</script>
+
+{#if dot}
+	<span
+		class={cn(
+			'salmex-badge',
+			'salmex-badge-dot',
+			`salmex-badge-dot-${size}`,
+			`salmex-badge-${status}`,
+			className
+		)}
+		role="status"
+		aria-label={ariaLabel ?? status}
+	>
+		<span class="salmex-sr-only">{ariaLabel ?? status}</span>
+	</span>
+	{:else}
+	<span
+		class={cn(
+			'salmex-badge',
+			`salmex-badge-${size}`,
+			`salmex-badge-${status}`,
+			pill && 'salmex-badge-pill',
+			status === 'primary' && 'salmex-badge-has-accent',
+			className
+		)}
+		role="status"
+	>
+		{#if icon}
+			<span class="salmex-badge-icon" aria-hidden="true">
+				{@render icon()}
+			</span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+{/if}
+
+<style>
+	/* Base — philosophy at small scale: flat shadow, bold border, no heavy bevel */
+	.salmex-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--salmex-space-1);
+		font-family: var(--salmex-font-system);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.4px;
+		white-space: nowrap;
+		transition: box-shadow var(--salmex-transition-fast);
+		border: 2px solid transparent;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-pill {
+		border-radius: 9999px;
+	}
+
+	/* Stay sharp — minimal radius, Basquiat style */
+	.salmex-badge:not(.salmex-badge-pill) {
+		border-radius: var(--salmex-radius-none);
+	}
+
+	.salmex-badge-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+		line-height: 0;
+	}
+
+	.salmex-badge-has-accent {
+		position: relative;
+	}
+
+	.salmex-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* Sizes */
+	.salmex-badge-sm {
+		padding: 2px var(--salmex-space-2);
+		font-size: var(--salmex-font-size-xs);
+	}
+
+	.salmex-badge-md {
+		padding: 4px var(--salmex-space-3);
+		font-size: var(--salmex-font-size-xs);
+	}
+
+	.salmex-badge-lg {
+		padding: 6px var(--salmex-space-4);
+		font-size: var(--salmex-font-size-sm);
+	}
+
+	/* Dot */
+	.salmex-badge-dot {
+		padding: 0;
+		border-radius: 50%;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-dot-sm {
+		width: 8px;
+		height: 8px;
+	}
+
+	.salmex-badge-dot-md {
+		width: 10px;
+		height: 10px;
+	}
+
+	.salmex-badge-dot-lg {
+		width: 12px;
+		height: 12px;
+	}
+
+	/* Neutral — canvas/button face */
+	.salmex-badge-neutral {
+		background: rgb(var(--salmex-button-face));
+		color: rgb(var(--salmex-text-primary));
+		border-color: rgb(var(--salmex-border-dark));
+	}
+
+	.salmex-badge-dot.salmex-badge-neutral {
+		background: rgb(var(--salmex-text-secondary));
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	/* Primary — electric blue + thin crown yellow accent */
+	.salmex-badge-primary {
+		background: rgb(var(--salmex-electric-blue) / 0.18);
+		color: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-electric-blue));
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-primary::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 12%;
+		width: 76%;
+		height: 1px;
+		background: rgb(var(--salmex-crown-yellow));
+		opacity: 0.85;
+	}
+
+	.salmex-badge-dot.salmex-badge-primary {
+		background: rgb(var(--salmex-electric-blue));
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	:global([data-theme='dark']) .salmex-badge-primary {
+		background: rgb(var(--salmex-primary-light) / 0.25);
+		color: rgb(var(--salmex-primary-light));
+		border-color: rgb(var(--salmex-primary-light));
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	:global([data-theme='dark']) .salmex-badge-primary::after {
+		background: rgb(var(--salmex-crown-yellow));
+		opacity: 0.9;
+	}
+
+	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-primary {
+		background: rgb(var(--salmex-primary-light));
+	}
+
+	/* Success — deep green, flat */
+	.salmex-badge-success {
+		background: rgb(30 115 65 / 0.2);
+		color: rgb(25 95 55);
+		border-color: rgb(25 95 55);
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-dot.salmex-badge-success {
+		background: rgb(25 95 55);
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	:global([data-theme='dark']) .salmex-badge-success {
+		background: rgb(var(--salmex-urban-green) / 0.2);
+		color: rgb(var(--salmex-urban-green));
+		border-color: rgb(var(--salmex-urban-green));
+	}
+
+	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-success {
+		background: rgb(var(--salmex-urban-green));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .salmex-badge-success {
+			background: rgb(var(--salmex-urban-green) / 0.2);
+			color: rgb(var(--salmex-urban-green));
+			border-color: rgb(var(--salmex-urban-green));
+		}
+
+		:global(:root:not([data-theme='light'])) .salmex-badge-dot.salmex-badge-success {
+			background: rgb(var(--salmex-urban-green));
+		}
+	}
+
+	/* Warning — deep amber, flat */
+	.salmex-badge-warning {
+		background: rgb(185 95 15 / 0.22);
+		color: rgb(145 75 10);
+		border-color: rgb(145 75 10);
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-dot.salmex-badge-warning {
+		background: rgb(145 75 10);
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	:global([data-theme='dark']) .salmex-badge-warning {
+		background: rgb(var(--salmex-spray-orange) / 0.2);
+		color: rgb(var(--salmex-spray-orange));
+		border-color: rgb(var(--salmex-spray-orange));
+	}
+
+	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-warning {
+		background: rgb(var(--salmex-spray-orange));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .salmex-badge-warning {
+			background: rgb(var(--salmex-spray-orange) / 0.2);
+			color: rgb(var(--salmex-spray-orange));
+			border-color: rgb(var(--salmex-spray-orange));
+		}
+
+		:global(:root:not([data-theme='light'])) .salmex-badge-dot.salmex-badge-warning {
+			background: rgb(var(--salmex-spray-orange));
+		}
+	}
+
+	/* Error — street red, flat */
+	.salmex-badge-error {
+		background: rgb(var(--salmex-street-red) / 0.18);
+		color: rgb(var(--salmex-street-red));
+		border-color: rgb(var(--salmex-street-red));
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-dot.salmex-badge-error {
+		background: rgb(var(--salmex-street-red));
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	/* Info — electric blue, flat */
+	.salmex-badge-info {
+		background: rgb(var(--salmex-info) / 0.18);
+		color: rgb(var(--salmex-info));
+		border-color: rgb(var(--salmex-info));
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-dot.salmex-badge-info {
+		background: rgb(var(--salmex-info));
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	/* Outline — transparent, bold border, no inset (flat) */
+	.salmex-badge-outline {
+		background: rgb(var(--salmex-button-face) / 0.5);
+		color: rgb(var(--salmex-text-primary));
+		border-color: rgb(var(--salmex-border-dark));
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	.salmex-badge-dot.salmex-badge-outline {
+		background: rgb(var(--salmex-border-default));
+		border: none;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-badge {
+			transition: none;
+		}
+	}
+</style>

package/dist/primitives/Badge/Badge.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeStatus = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
+interface Props {
+    /** Semantic status / variant */
+    status?: BadgeStatus;
+    /** Size */
+    size?: BadgeSize;
+    /** Pill shape (fully rounded) — we use minimal radius by default */
+    pill?: boolean;
+    /** Dot-only indicator (no text), use with aria-label for a11y */
+    dot?: boolean;
+    /** Optional icon before label */
+    icon?: Snippet;
+    /** Additional class names */
+    class?: string;
+    /** Badge content (ignored when dot) */
+    children?: Snippet;
+    /** Accessible label when dot (required when dot for a11y) */
+    'aria-label'?: string;
+}
+/**
+ * Badge
+ *
+ * Win2K × Basquiat — Status badge for labels, counts, and states.
+ * Bold borders, high contrast, role="status" for screen readers.
+ *
+ * @example
+ * <Badge status="success">Active</Badge>
+ * <Badge status="warning" size="lg" dot />
+ */
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/primitives/Badge/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GACb,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,CAAC;AAEb,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAuDF;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/primitives/Badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.svelte';