@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/ui/Badge.svelte

@@ -4,27 +4,41 @@
 	import type { Snippet } from 'svelte';
 	import type { ButtonVariant } from './ButtonVariant.js';
 
-	interface Props {
+	export interface BadgeProps {
+		/** Visual style variant */
 		variant?: ButtonVariant;
+		/** Size of the badge */
+		size?: 'sm' | 'md' | 'lg';
+		/** Shape of the badge */
 		shape?: 'pill' | 'default';
+		/** URL to navigate to (renders as anchor) */
 		href?: string;
+		/** Link target (e.g. '_blank') */
+		target?: string;
+		/** Show loading state */
 		loading?: boolean;
+		/** Disable interactions */
 		disabled?: boolean;
-		onDelete?: () => void;
-		onClick?: () => void;
+		/** Callback when delete button is clicked (shows X button) */
+		ondelete?: () => void;
+		/** Callback when badge is clicked */
+		onclick?: () => void;
+		/** Badge content */
 		children: Snippet;
 	}
 
 	let {
 		variant = 'primary',
+		size = 'md',
 		shape = 'default',
 		href = undefined,
+		target = undefined,
 		loading = false,
 		disabled = false,
-		onDelete = undefined,
-		onClick = undefined,
+		ondelete: onDelete = undefined,
+		onclick: onClick = undefined,
 		children
-	}: Props = $props();
+	}: BadgeProps = $props();
 
 	let isDisabled: boolean = $derived(loading || disabled);
 	let type: 'a' | 'button' | 'div' = $derived(onClick ? 'button' : href ? 'a' : 'div');
@@ -34,11 +48,11 @@
 	);
 </script>
 
-<div class="badge-container {variant} shape-{shape} {onDelete ? 'badge-with-button' : ''} ">
+<div class="badge-container {variant} shape-{shape} size-{size} {onDelete ? 'badge-with-button' : ''} ">
 	{#if type == 'a' && !disabled}
-		<a class={elClass} {href}> {@render children?.()}</a>
+		<a class={elClass} {href} {target}> {@render children?.()}</a>
 	{:else if type == 'button'}
-		<button class={elClass} disabled={isDisabled}> {@render children?.()}</button>
+		<button class={elClass} disabled={isDisabled} onclick={onClick}> {@render children?.()}</button>
 	{:else}
 		<div class={elClass}>
 			{@render children?.()}
@@ -46,7 +60,7 @@
 	{/if}
 	{#if onDelete}
 		<button class="badge-button {variant}" disabled={isDisabled} onclick={onDelete}>
-			<Icon size="14px" svg={iconX} />
+			<Icon size={size === 'sm' ? '12px' : size === 'lg' ? '16px' : '14px'} svg={iconX} />
 		</button>
 	{/if}
 </div>
@@ -54,20 +68,20 @@
 <style>
 	.badge-container {
 		display: flex;
-		border-radius: var(--pui-radius-lg);
+		border-radius: 6px;
 		border: var(--badge-border, 0);
 	}
 
 	.badge {
-		font-size: var(--pui-font-size-base);
-		line-height: var(--pui-line-height-tight);
-		letter-spacing: var(--pui-letter-spacing-wide);
+		font-size: 0.875rem;
+		line-height: 1.125rem;
+		letter-spacing: 0.05rem;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		text-decoration: none;
-		padding: var(--pui-spacing-1);
-		border-radius: var(--pui-radius-lg);
+		padding: 0.25rem;
+		border-radius: 6px;
 	}
 
 	button.badge,
@@ -76,22 +90,22 @@
 	}
 
 	.badge-with-button .badge {
-		padding-right: var(--pui-spacing-1_5);
+		padding-right: 6px;
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 
 	.badge-button {
-		border-radius: var(--pui-radius-lg);
+		border-radius: 6px;
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
-		border-left: 1px solid var(--badge-border-color, var(--pui-color-black));
+		border-left: 1px solid var(--badge-border-color, black);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		cursor: pointer;
 		border-right: var(--badge-border, 0);
-		padding: var(--pui-spacing-1);
+		padding: 4px;
 	}
 
 	button {
@@ -101,213 +115,185 @@
 	button.badge-button:active,
 	button.badge:active:not(:disabled),
 	a.badge:active:not(:disabled) {
-		transform: translateY(1px);
+		transform: translateY(calc(0.0625rem * 1));
 	}
 
 	a {
 		color: var(--badge-text-color) !important;
 	}
 
-	.secondary {
-		--badge-bg-color: var(--pui-color-secondary);
-		--badge-text-color: var(--pui-color-primary);
-		--badge-hover-bg-color: var(--pui-color-accent);
-		--badge-border-color: var(--pui-color-secondary-dark);
-		--badge-outline-color: var(--pui-color-accent);
+	.accent,
+	.pistachio {
+		--badge-bg-color: var(--ui-accent);
+		--badge-text-color: var(--ui-primary);
+		--badge-hover-bg-color: var(--ui-tertiary);
+		--badge-border-color: var(--ui-accent-dark);
+		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.secondary :global(.loader) {
-		color: var(--pui-color-primary);
+	.accent :global(.loader),
+	.pistachio :global(.loader) {
+		color: var(--ui-primary);
 	}
 
-	.primary {
-		--badge-bg-color: var(--pui-color-primary);
-		--badge-text-color: var(--pui-color-white);
-		--badge-hover-bg-color: var(--pui-color-secondary-dark);
-		--badge-border-color: var(--pui-color-accent-dark);
-		--badge-outline-color: var(--pui-color-secondary-dark);
+	.primary,
+	.midnight {
+		--badge-bg-color: var(--ui-primary);
+		--badge-text-color: #fff;
+		--badge-hover-bg-color: var(--ui-accent-dark);
+		--badge-border-color: var(--ui-tertiary-dark);
+		--badge-outline-color: var(--ui-accent-dark);
 	}
 
-	.primary :global(.loader) {
-		color: var(--pui-color-secondary);
+	.primary :global(.loader),
+	.midnight :global(.loader) {
+		color: var(--ui-accent);
 	}
 
 	.white {
-		--badge-bg-color: var(--pui-color-white);
-		--badge-text-color: var(--pui-color-primary);
-		--badge-hover-bg-color: var(--pui-color-accent);
-		--badge-border-color: var(--pui-color-gray-200);
-		--badge-outline-color: var(--pui-color-accent);
+		--badge-bg-color: white;
+		--badge-text-color: var(--ui-primary);
+		--badge-hover-bg-color: var(--ui-tertiary);
+		--badge-border-color: #eee;
+		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.muted {
-		--badge-bg-color: var(--pui-input-bg);
-		--badge-border: 1px solid var(--pui-border-default);
-		--badge-border-color: var(--pui-border-default);
-		--badge-hover-bg-color: var(--pui-border-default);
-		--badge-outline-color: var(--pui-text-primary);
+	.secondary {
+		--badge-bg-color: var(--input-bg);
+		--badge-border: 1px solid var(--border-color);
+		--badge-border-color: var(--border-color);
+		--badge-hover-bg-color: var(--border-color);
+		--badge-outline-color: var(--text-color);
 	}
 
-	.muted-selected {
-		--badge-bg-color: var(--pui-accent-color);
-		--badge-border: 1px solid var(--pui-accent-color);
-		--badge-border-color: var(--pui-accent-color);
-		--badge-text-color: var(--pui-color-white);
+	.secondary-selected {
+		--badge-bg-color: var(--accent-color);
+		--badge-border: 1px solid var(--accent-color);
+		--badge-border-color: var(--accent-color);
+		--badge-text-color: white;
+	}
+
+	.shaded {
+		--badge-bg-color: var(--border-color);
+		--badge-border: 1px solid var(--border-color);
+		--badge-border-color: var(--border-color);
+		--badge-hover-bg-color: var(--input-bg);
+		--badge-outline-color: var(--text-color);
 	}
 
 	.danger {
-		--badge-text-color: var(--pui-color-white);
-		--badge-bg-color: var(--pui-color-danger);
-		--badge-hover-bg-color: var(--pui-color-danger-hover);
-		--badge-outline-color: var(--pui-color-accent);
-		--badge-border-color: var(--pui-color-danger-hover);
+		--badge-text-color: white;
+		--badge-bg-color: var(--danger-bg);
+		--badge-hover-bg-color: var(--danger-bg-hover);
+		--badge-outline-color: var(--ui-tertiary);
+		--badge-border-color: var(--danger-bg-hover);
 	}
 
 	.danger :global(.loader) {
-		color: var(--pui-color-white);
+		color: white;
 	}
 
 	.auto-outline {
-		--badge-text-color: var(--pui-color-primary);
+		--badge-text-color: var(--ui-primary);
 		--badge-bg-color: initial;
-		--badge-border: 1px solid var(--pui-color-primary);
-		--badge-border-color: var(--pui-color-primary);
-		--badge-hover-bg-color: var(--pui-color-secondary-dark);
-		--badge-hover-border: 1px solid var(--pui-color-secondary-dark);
-		--badge-outline-color: var(--pui-color-secondary-dark);
+		--badge-border: 1px solid var(--ui-primary);
+		--badge-border-color: var(--ui-primary);
+		--badge-hover-bg-color: var(--ui-accent-dark);
+		--badge-hover-border: 1px solid var(--ui-accent-dark);
+		--badge-outline-color: var(--ui-accent-dark);
 	}
 
 	:global(.dark) .auto-outline {
-		--badge-text-color: var(--pui-color-secondary);
+		--badge-text-color: var(--ui-accent);
 		--badge-bg-color: initial;
-		--badge-border: 1px solid var(--pui-color-secondary);
-		--badge-border-color: var(--pui-color-secondary);
-		--badge-hover-bg-color: var(--pui-color-accent);
-		--badge-hover-border: 1px solid var(--pui-color-accent);
-		--badge-outline-color: var(--pui-color-accent);
+		--badge-border: 1px solid var(--ui-accent);
+		--badge-border-color: var(--ui-accent);
+		--badge-hover-bg-color: var(--ui-tertiary);
+		--badge-hover-border: 1px solid var(--ui-tertiary);
+		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.secondary-outline {
-		--badge-text-color: var(--pui-color-secondary);
+	.accent-outline,
+	.pistachio-outline {
+		--badge-text-color: var(--ui-accent);
 		--badge-bg-color: initial;
-		--badge-border: 1px solid var(--pui-color-secondary);
-		--badge-border-color: var(--pui-color-secondary);
-		--badge-hover-bg-color: var(--pui-color-accent);
-		--badge-hover-border: 1px solid var(--pui-color-accent);
-		--badge-outline-color: var(--pui-color-accent);
+		--badge-border: 1px solid var(--ui-accent);
+		--badge-border-color: var(--ui-accent);
+		--badge-hover-bg-color: var(--ui-tertiary);
+		--badge-hover-border: 1px solid var(--ui-tertiary);
+		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.primary-outline {
-		--badge-text-color: var(--pui-color-primary);
+	.primary-outline,
+	.midnight-outline {
+		--badge-text-color: var(--ui-primary);
 		--badge-bg-color: initial;
-		--badge-border: 1px solid var(--pui-color-primary);
-		--badge-border-color: var(--pui-color-primary);
-		--badge-hover-bg-color: var(--pui-color-secondary-dark);
-		--badge-hover-border: 1px solid var(--pui-color-secondary-dark);
-		--badge-outline-color: var(--pui-color-secondary-dark);
+		--badge-border: 1px solid var(--ui-primary);
+		--badge-border-color: var(--ui-primary);
+		--badge-hover-bg-color: var(--ui-accent-dark);
+		--badge-hover-border: 1px solid var(--ui-accent-dark);
+		--badge-outline-color: var(--ui-accent-dark);
 	}
 
-	.accent {
-		--badge-text-color: var(--pui-color-black);
-		--badge-bg-color: var(--pui-color-accent);
-		--badge-hover-bg-color: var(--pui-color-accent-dark);
-		--badge-outline-color: var(--pui-color-accent);
-		--badge-border-color: var(--pui-color-accent-dark);
-	}
-
-	.success {
-		--badge-text-color: var(--pui-color-white);
-		--badge-bg-color: var(--pui-color-success);
-		--badge-hover-bg-color: var(--pui-color-success-hover);
-		--badge-outline-color: var(--pui-color-success);
-		--badge-border-color: var(--pui-color-success-hover);
-	}
-
-	.success :global(.loader) {
-		color: var(--pui-color-white);
-	}
-
-	.success-subtle {
-		--badge-text-color: var(--pui-color-success);
-		--badge-bg-color: var(--pui-color-success-subtle);
-		--badge-hover-bg-color: var(--pui-color-success-subtle-dark);
-		--badge-outline-color: var(--pui-color-success);
-		--badge-border-color: var(--pui-color-success);
-	}
-
-	.warning {
-		--badge-text-color: var(--pui-color-black);
-		--badge-bg-color: var(--pui-color-warning);
-		--badge-hover-bg-color: var(--pui-color-warning-hover);
-		--badge-outline-color: var(--pui-color-warning);
-		--badge-border-color: var(--pui-color-warning-hover);
-	}
-
-	.warning :global(.loader) {
-		color: var(--pui-color-black);
-	}
-
-	.warning-subtle {
-		--badge-text-color: var(--pui-color-warning-dark);
-		--badge-bg-color: var(--pui-color-warning-subtle);
-		--badge-hover-bg-color: var(--pui-color-warning-subtle-dark);
-		--badge-outline-color: var(--pui-color-warning);
-		--badge-border-color: var(--pui-color-warning);
+	.tertiary,
+	.turquoise {
+		--badge-text-color: black;
+		--badge-bg-color: var(--ui-tertiary);
+		--badge-hover-bg-color: var(--ui-tertiary-dark);
+		--badge-outline-color: var(--ui-tertiary);
+		--badge-border-color: var(--ui-tertiary-dark);
 	}
 
 	button,
 	a,
 	div {
-		border-color: var(--badge-border-color, var(--pui-color-primary));
+		border-color: var(--badge-border-color, var(--ui-primary));
 		transition:
-			color var(--pui-transition-fast) var(--pui-ease-in-out),
-			background-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			border-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			box-shadow var(--pui-transition-fast) var(--pui-ease-in-out);
+			color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out;
 
 		color: var(--badge-text-color);
 		background-color: var(--badge-bg-color);
 	}
 
 	button:hover:not(:disabled),
-	a:hover:not(:disabled, div) {
+	a:hover:not(:disabled) {
 		background-color: var(--badge-hover-bg-color, var(--badge-bg-color));
+	}
+
+	.badge-container:has(button, a):hover:not(:has(:disabled)) {
 		border: var(--badge-hover-border, var(--badge-border, 0));
 	}
 
 	button:focus-visible,
 	a:focus-visible {
-		outline: solid var(--pui-focus-ring-width) var(--badge-outline-color, var(--pui-color-secondary-dark));
-		outline-offset: var(--pui-focus-ring-offset);
+		outline: solid 0.125rem var(--badge-outline-color, var(--ui-accent-dark));
+		outline-offset: 0.125rem;
 	}
 
 	:global(.dark) {
-		.muted {
-			--badge-hover-bg-color: var(--pui-color-dark-300);
+		.secondary {
+			--badge-hover-bg-color: #333333;
 		}
 
-		.muted-subtle {
-			--badge-hover-bg-color: var(--pui-color-dark-300);
+		.secondary-subtle {
+			--badge-hover-bg-color: #333333;
 		}
 
-		.muted-selected {
-			--badge-text-color: var(--pui-color-primary);
+		.secondary-selected {
+			--badge-text-color: var(--ui-primary);
 		}
 
-		.auto-subtle {
-			--badge-text-color: var(--pui-color-white);
-			--badge-hover-bg-color: var(--pui-color-primary);
-			--badge-outline-color: var(--pui-color-secondary);
+		.shaded {
+			--badge-hover-bg-color: #1a1a1a;
 		}
 
-		.success-subtle {
-			--badge-bg-color: var(--pui-color-success-subtle-dark);
-			--badge-hover-bg-color: rgba(55, 178, 77, 0.3);
-		}
-
-		.warning-subtle {
-			--badge-bg-color: var(--pui-color-warning-subtle-dark);
-			--badge-hover-bg-color: rgba(252, 196, 25, 0.3);
+		.auto-subtle {
+			--badge-text-color: white;
+			--badge-hover-bg-color: var(--ui-primary);
+			--badge-outline-color: var(--ui-accent);
 		}
 	}
 
@@ -316,14 +302,37 @@
 	}
 
 	.shape-pill {
-		border-radius: var(--pui-radius-full);
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
+		border-radius: 9999px;
+	}
+
+	.shape-pill > .badge {
+		border-radius: 9999px;
 	}
 
 	.shape-pill .badge {
 		border: none;
-		padding: 0;
-		padding-right: var(--pui-spacing-1);
+		padding: 0.25rem 0.5rem;
+	}
+
+	.shape-pill.badge-with-button .badge {
+		padding-right: 0.25rem;
+	}
+
+	.size-sm .badge {
+		font-size: 0.75rem;
+		line-height: 1rem;
+	}
+
+	.size-sm .badge-button {
+		padding: 2px;
+	}
+
+	.size-lg .badge {
+		font-size: 1rem;
+	}
+
+	.size-lg .badge-button {
+		padding: 6px;
 	}
 
 </style>

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

@@ -1,15 +1,27 @@
 import type { Snippet } from 'svelte';
 import type { ButtonVariant } from './ButtonVariant.js';
-interface Props {
+export interface BadgeProps {
+    /** Visual style variant */
     variant?: ButtonVariant;
+    /** Size of the badge */
+    size?: 'sm' | 'md' | 'lg';
+    /** Shape of the badge */
     shape?: 'pill' | 'default';
+    /** URL to navigate to (renders as anchor) */
     href?: string;
+    /** Link target (e.g. '_blank') */
+    target?: string;
+    /** Show loading state */
     loading?: boolean;
+    /** Disable interactions */
     disabled?: boolean;
-    onDelete?: () => void;
-    onClick?: () => void;
+    /** Callback when delete button is clicked (shows X button) */
+    ondelete?: () => void;
+    /** Callback when badge is clicked */
+    onclick?: () => void;
+    /** Badge content */
     children: Snippet;
 }
-declare const Badge: import("svelte").Component<Props, {}, "">;
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;