@synthaxai/ui 1.0.0

package/dist/primitives/Badge/Badge.svelte

@@ -0,0 +1,365 @@
+<!--
+  @component Badge
+  
+  A status badge component for displaying statuses, labels, and counts.
+  Supports semantic status variants for healthcare workflows.
+  
+  @example
+  <Badge status="success">Active</Badge>
+  
+  @example
+  <Badge status="warning" size="lg">
+    <Icon slot="icon" />
+    Pending Review
+  </Badge>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+	import type { Status } from '../../types/index.js';
+
+	type BadgeSize = 'sm' | 'md' | 'lg';
+	type BadgeVariant = Status | 'primary' | 'outline';
+
+	interface Props {
+		/** Status/variant of the badge */
+		status?: BadgeVariant;
+		/** Size of the badge */
+		size?: BadgeSize;
+		/** Whether to render as a pill (fully rounded) */
+		pill?: boolean;
+		/** Whether this badge represents a dot indicator (no text) */
+		dot?: boolean;
+		/** Icon to display */
+		icon?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+		/** Badge content */
+		children?: Snippet;
+	}
+
+	let {
+		status = 'neutral',
+		size = 'md',
+		pill = false,
+		dot = false,
+		icon,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+{#if dot}
+	<span 
+		class={cn('badge-dot', `badge-dot-${size}`, `badge-${status}`, className)} 
+		role="status" 
+		aria-label={status}
+	>
+		<span class="sr-only">{status}</span>
+	</span>
+{:else}
+	<span 
+		class={cn('badge', `badge-${size}`, `badge-${status}`, pill && 'badge-pill', className)} 
+		role="status"
+	>
+		{#if icon}
+			<span class="badge-icon" aria-hidden="true">
+				{@render icon()}
+			</span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+{/if}
+
+<style>
+	/* ========================================
+	   BASE BADGE STYLES
+	   ======================================== */
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-weight: 500;
+		border-radius: 0.25rem;
+		transition: all 0.15s ease;
+		white-space: nowrap;
+	}
+
+	.badge-pill {
+		border-radius: 9999px;
+	}
+
+	.badge-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+	}
+
+	/* Screen reader only */
+	.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;
+	}
+
+	/* ========================================
+	   SIZE VARIANTS
+	   ======================================== */
+	.badge-sm {
+		padding: 0.125rem 0.375rem;
+		font-size: 0.6875rem;
+	}
+
+	.badge-md {
+		padding: 0.1875rem 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.badge-lg {
+		padding: 0.25rem 0.625rem;
+		font-size: 0.8125rem;
+	}
+
+	/* ========================================
+	   DOT INDICATOR STYLES
+	   ======================================== */
+	.badge-dot {
+		display: inline-block;
+		border-radius: 9999px;
+	}
+
+	.badge-dot-sm {
+		width: 0.375rem;
+		height: 0.375rem;
+	}
+
+	.badge-dot-md {
+		width: 0.5rem;
+		height: 0.5rem;
+	}
+
+	.badge-dot-lg {
+		width: 0.625rem;
+		height: 0.625rem;
+	}
+
+	/* ========================================
+	   NEUTRAL VARIANT
+	   ======================================== */
+	.badge-neutral {
+		background: var(--ui-bg-tertiary);
+		color: var(--ui-text-secondary);
+		border: 1px solid var(--ui-border-default);
+	}
+
+	.badge-dot.badge-neutral {
+		background: var(--ui-text-tertiary);
+		border: none;
+	}
+
+	/* ========================================
+	   PRIMARY VARIANT
+	   ======================================== */
+	.badge-primary {
+		background: rgb(var(--ui-color-primary) / 0.1);
+		color: rgb(var(--ui-color-primary));
+		border: 1px solid rgb(var(--ui-color-primary) / 0.2);
+	}
+
+	.badge-dot.badge-primary {
+		background: rgb(var(--ui-color-primary));
+		border: none;
+	}
+
+	/* Dark mode */
+	:global([data-theme='dark']) .badge-primary {
+		background: rgb(var(--ui-color-primary-light) / 0.15);
+		color: rgb(var(--ui-color-primary-light));
+		border-color: rgb(var(--ui-color-primary-light) / 0.25);
+	}
+
+	:global([data-theme='dark']) .badge-dot.badge-primary {
+		background: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .badge-primary {
+			background: rgb(var(--ui-color-primary-light) / 0.15);
+			color: rgb(var(--ui-color-primary-light));
+			border-color: rgb(var(--ui-color-primary-light) / 0.25);
+		}
+
+		:global(:root:not([data-theme='light'])) .badge-dot.badge-primary {
+			background: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* ========================================
+	   SUCCESS VARIANT
+	   ======================================== */
+	.badge-success {
+		background: rgb(var(--ui-color-success) / 0.1);
+		color: rgb(var(--ui-color-success));
+		border: 1px solid rgb(var(--ui-color-success) / 0.2);
+	}
+
+	.badge-dot.badge-success {
+		background: rgb(var(--ui-color-success));
+		border: none;
+	}
+
+	/* Dark mode */
+	:global([data-theme='dark']) .badge-success {
+		background: rgb(var(--ui-color-success-light) / 0.15);
+		color: rgb(var(--ui-color-success-light));
+		border-color: rgb(var(--ui-color-success-light) / 0.25);
+	}
+
+	:global([data-theme='dark']) .badge-dot.badge-success {
+		background: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .badge-success {
+			background: rgb(var(--ui-color-success-light) / 0.15);
+			color: rgb(var(--ui-color-success-light));
+			border-color: rgb(var(--ui-color-success-light) / 0.25);
+		}
+
+		:global(:root:not([data-theme='light'])) .badge-dot.badge-success {
+			background: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	/* ========================================
+	   WARNING VARIANT
+	   ======================================== */
+	.badge-warning {
+		background: rgb(var(--ui-color-warning) / 0.1);
+		color: rgb(var(--ui-color-warning));
+		border: 1px solid rgb(var(--ui-color-warning) / 0.2);
+	}
+
+	.badge-dot.badge-warning {
+		background: rgb(var(--ui-color-warning));
+		border: none;
+	}
+
+	/* Dark mode */
+	:global([data-theme='dark']) .badge-warning {
+		background: rgb(var(--ui-color-warning-light) / 0.15);
+		color: rgb(var(--ui-color-warning-light));
+		border-color: rgb(var(--ui-color-warning-light) / 0.25);
+	}
+
+	:global([data-theme='dark']) .badge-dot.badge-warning {
+		background: rgb(var(--ui-color-warning-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .badge-warning {
+			background: rgb(var(--ui-color-warning-light) / 0.15);
+			color: rgb(var(--ui-color-warning-light));
+			border-color: rgb(var(--ui-color-warning-light) / 0.25);
+		}
+
+		:global(:root:not([data-theme='light'])) .badge-dot.badge-warning {
+			background: rgb(var(--ui-color-warning-light));
+		}
+	}
+
+	/* ========================================
+	   ERROR VARIANT
+	   ======================================== */
+	.badge-error {
+		background: rgb(var(--ui-color-error) / 0.1);
+		color: rgb(var(--ui-color-error));
+		border: 1px solid rgb(var(--ui-color-error) / 0.2);
+	}
+
+	.badge-dot.badge-error {
+		background: rgb(var(--ui-color-error));
+		border: none;
+	}
+
+	/* Dark mode */
+	:global([data-theme='dark']) .badge-error {
+		background: rgb(var(--ui-color-error-light) / 0.15);
+		color: rgb(var(--ui-color-error-light));
+		border-color: rgb(var(--ui-color-error-light) / 0.25);
+	}
+
+	:global([data-theme='dark']) .badge-dot.badge-error {
+		background: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .badge-error {
+			background: rgb(var(--ui-color-error-light) / 0.15);
+			color: rgb(var(--ui-color-error-light));
+			border-color: rgb(var(--ui-color-error-light) / 0.25);
+		}
+
+		:global(:root:not([data-theme='light'])) .badge-dot.badge-error {
+			background: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	/* ========================================
+	   INFO VARIANT
+	   ======================================== */
+	.badge-info {
+		background: rgb(var(--ui-color-info) / 0.1);
+		color: rgb(var(--ui-color-info));
+		border: 1px solid rgb(var(--ui-color-info) / 0.2);
+	}
+
+	.badge-dot.badge-info {
+		background: rgb(var(--ui-color-info));
+		border: none;
+	}
+
+	/* Dark mode */
+	:global([data-theme='dark']) .badge-info {
+		background: rgb(var(--ui-color-info-light) / 0.15);
+		color: rgb(var(--ui-color-info-light));
+		border-color: rgb(var(--ui-color-info-light) / 0.25);
+	}
+
+	:global([data-theme='dark']) .badge-dot.badge-info {
+		background: rgb(var(--ui-color-info-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .badge-info {
+			background: rgb(var(--ui-color-info-light) / 0.15);
+			color: rgb(var(--ui-color-info-light));
+			border-color: rgb(var(--ui-color-info-light) / 0.25);
+		}
+
+		:global(:root:not([data-theme='light'])) .badge-dot.badge-info {
+			background: rgb(var(--ui-color-info-light));
+		}
+	}
+
+	/* ========================================
+	   OUTLINE VARIANT
+	   ======================================== */
+	.badge-outline {
+		background: transparent;
+		color: var(--ui-text-secondary);
+		border: 1px solid var(--ui-border-default);
+	}
+
+	.badge-dot.badge-outline {
+		background: var(--ui-text-tertiary);
+		border: none;
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { Status } from '../../types/index.js';
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeVariant = Status | 'primary' | 'outline';
+interface Props {
+    /** Status/variant of the badge */
+    status?: BadgeVariant;
+    /** Size of the badge */
+    size?: BadgeSize;
+    /** Whether to render as a pill (fully rounded) */
+    pill?: boolean;
+    /** Whether this badge represents a dot indicator (no text) */
+    dot?: boolean;
+    /** Icon to display */
+    icon?: Snippet;
+    /** Additional CSS classes */
+    class?: string;
+    /** Badge content */
+    children?: Snippet;
+}
+/**
+ * Badge
+ *
+ * A status badge component for displaying statuses, labels, and counts.
+ * Supports semantic status variants for healthcare workflows.
+ *
+ * @example
+ * <Badge status="success">Active</Badge>
+ *
+ * @example
+ * <Badge status="warning" size="lg">
+ *   <Icon slot="icon" />
+ *   Pending Review
+ * </Badge>
+ */
+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;AAEtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGlD,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEnD,UAAU,KAAK;IACd,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wBAAwB;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA0CF;;;;;;;;;;;;;;GAcG;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';