@salmexio/ui 0.1.0 → 0.2.0

package/dist/feedback/Spinner/Spinner.svelte

@@ -6,62 +6,62 @@
   role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
 -->
 <script lang="ts">
-	import { cn } from '../../utils/cn.js';
-
-	type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	type SpinnerVariant = 'primary' | 'secondary' | 'white';
-	type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
-
-	interface Props {
-		size?: SpinnerSize;
-		variant?: SpinnerVariant;
-		style?: SpinnerStyle;
-		label?: string;
-		showLabel?: boolean;
-		delay?: number;
-		overlay?: boolean;
-		class?: string;
-		id?: string;
+import { cn } from '../../utils/cn.js';
+
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerVariant = 'primary' | 'secondary' | 'white';
+type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
+
+interface Props {
+	size?: SpinnerSize;
+	variant?: SpinnerVariant;
+	style?: SpinnerStyle;
+	label?: string;
+	showLabel?: boolean;
+	delay?: number;
+	overlay?: boolean;
+	class?: string;
+	id?: string;
+}
+
+let {
+	size = 'md',
+	variant = 'primary',
+	style = 'ring',
+	label = 'Loading...',
+	showLabel = false,
+	delay = 0,
+	overlay = false,
+	class: className = '',
+	id
+}: Props = $props();
+
+let isVisible = $state(false);
+
+$effect(() => {
+	if (delay === 0) {
+		isVisible = true;
+		return;
 	}
-
-	let {
-		size = 'md',
-		variant = 'primary',
-		style = 'ring',
-		label = 'Loading...',
-		showLabel = false,
-		delay = 0,
-		overlay = false,
-		class: className = '',
-		id
-	}: Props = $props();
-
-	let isVisible = $state(false);
-
-	$effect(() => {
-		if (delay === 0) {
-			isVisible = true;
-			return;
-		}
-		isVisible = false;
-		const t = setTimeout(() => {
-			isVisible = true;
-		}, delay);
-		return () => clearTimeout(t);
-	});
-
-	const sizeConfig: Record<
-		SpinnerSize,
-		{ dimension: number; stroke: number; fontSize: string; dotSize: number }
-	> = {
-		xs: { dimension: 16, stroke: 2.5, fontSize: 'var(--salmex-font-size-xs)', dotSize: 4 },
-		sm: { dimension: 20, stroke: 3, fontSize: 'var(--salmex-font-size-sm)', dotSize: 5 },
-		md: { dimension: 28, stroke: 4, fontSize: 'var(--salmex-font-size-sm)', dotSize: 6 },
-		lg: { dimension: 40, stroke: 5, fontSize: 'var(--salmex-font-size-base)', dotSize: 8 },
-		xl: { dimension: 56, stroke: 6, fontSize: 'var(--salmex-font-size-md)', dotSize: 10 }
-	};
-
-	const config = $derived(sizeConfig[size]);
+	isVisible = false;
+	const t = setTimeout(() => {
+		isVisible = true;
+	}, delay);
+	return () => clearTimeout(t);
+});
+
+const sizeConfig: Record<
+	SpinnerSize,
+	{ dimension: number; stroke: number; fontSize: string; dotSize: number }
+> = {
+	xs: { dimension: 16, stroke: 2.5, fontSize: 'var(--salmex-font-size-xs)', dotSize: 4 },
+	sm: { dimension: 20, stroke: 3, fontSize: 'var(--salmex-font-size-sm)', dotSize: 5 },
+	md: { dimension: 28, stroke: 4, fontSize: 'var(--salmex-font-size-sm)', dotSize: 6 },
+	lg: { dimension: 40, stroke: 5, fontSize: 'var(--salmex-font-size-base)', dotSize: 8 },
+	xl: { dimension: 56, stroke: 6, fontSize: 'var(--salmex-font-size-md)', dotSize: 10 }
+};
+
+const config = $derived(sizeConfig[size]);
 </script>
 
 {#if isVisible}

package/dist/feedback/Spinner/Spinner.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACxD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2GF;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACxD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2GD;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/forms/Checkbox/Checkbox.svelte

@@ -0,0 +1,328 @@
+<!--
+  @component Checkbox
+
+  Win2K × Basquiat — 3D checkbox with bold borders, crown yellow check.
+  Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
+  Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { generateId } from '../../utils/keyboard.js';
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	id?: string;
+	name?: string;
+	value?: string;
+	label: string;
+	checked?: boolean;
+	description?: string;
+	required?: boolean;
+	disabled?: boolean;
+	error?: string;
+	indeterminate?: boolean;
+	size?: CheckboxSize;
+	hideLabel?: boolean;
+	class?: string;
+	onchange?: (event: Event) => void;
+	testId?: string;
+	validateOnMount?: boolean;
+}
+
+let {
+	id = generateId('checkbox'),
+	name,
+	value,
+	label,
+	checked = $bindable(false),
+	description = '',
+	required = false,
+	disabled = false,
+	error = '',
+	indeterminate = false,
+	size = 'md',
+	hideLabel = false,
+	class: className = '',
+	onchange,
+	testId,
+	validateOnMount = false
+}: Props = $props();
+
+let inputElement = $state<HTMLInputElement | undefined>(undefined);
+let hasInteracted = $state(false);
+
+$effect(() => {
+	const el = inputElement;
+	if (el) el.indeterminate = indeterminate;
+});
+
+const showChecked = $derived(checked && !indeterminate);
+const shouldValidate = $derived(hasInteracted || validateOnMount);
+const showError = $derived(shouldValidate && !!error);
+const errorId = $derived(`${id}-error`);
+const descriptionId = $derived(`${id}-description`);
+const ariaDescribedBy = $derived(
+	[showError && errorId, description && descriptionId].filter(Boolean).join(' ') || undefined
+);
+
+function handleChange(e: Event) {
+	hasInteracted = true;
+	onchange?.(e);
+}
+</script>
+
+<div
+	class={cn(
+		'salmex-checkbox',
+		`salmex-checkbox-${size}`,
+		disabled && 'salmex-checkbox-disabled',
+		className
+	)}
+>
+	<label for={id} class="salmex-checkbox-label">
+		<input
+			bind:this={inputElement}
+			{id}
+			{name}
+			{value}
+			type="checkbox"
+			bind:checked
+			{disabled}
+			{required}
+			aria-invalid={showError}
+			aria-describedby={ariaDescribedBy}
+			class="salmex-checkbox-input"
+			data-testid={testId}
+			onchange={handleChange}
+		/>
+		<span
+			class={cn(
+				'salmex-checkbox-box',
+				(checked || indeterminate) && 'salmex-checkbox-box-checked',
+				indeterminate && 'salmex-checkbox-box-indeterminate',
+				showError && 'salmex-checkbox-box-error'
+			)}
+			aria-hidden="true"
+		>
+			{#if showChecked}
+				<svg class="salmex-checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<polyline points="20 6 9 17 4 12" />
+				</svg>
+			{:else if indeterminate}
+				<svg class="salmex-checkbox-icon salmex-checkbox-icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true">
+					<line x1="5" y1="12" x2="19" y2="12" />
+				</svg>
+			{/if}
+		</span>
+		<span class="salmex-checkbox-content" class:salmex-sr-only={hideLabel}>
+			<span class="salmex-checkbox-text">
+				{label}
+				{#if required}
+					<span class="salmex-checkbox-required" aria-hidden="true">*</span>
+				{/if}
+			</span>
+			{#if description && !hideLabel}
+				<span id={descriptionId} class="salmex-checkbox-description">{description}</span>
+			{/if}
+		</span>
+	</label>
+	{#if showError}
+		<p id={errorId} class="salmex-checkbox-error" role="alert">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.salmex-checkbox {
+		display: flex;
+		flex-direction: column;
+		gap: var(--salmex-space-1);
+	}
+
+	.salmex-checkbox-disabled {
+		opacity: 0.6;
+	}
+
+	.salmex-checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+		cursor: pointer;
+		user-select: none;
+		font-family: var(--salmex-font-system);
+	}
+
+	.salmex-checkbox-label:has(.salmex-checkbox-description) {
+		align-items: flex-start;
+	}
+
+	.salmex-checkbox-label:has(.salmex-checkbox-description) .salmex-checkbox-box {
+		margin-top: 2px;
+	}
+
+	.salmex-checkbox-disabled .salmex-checkbox-label {
+		cursor: not-allowed;
+	}
+
+	/* Visually hidden, not display:none — keeps focus and semantics */
+	.salmex-checkbox-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* Win2K × Basquiat — 3D box */
+	.salmex-checkbox-box {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgb(var(--salmex-button-face));
+		border: 2px solid rgb(var(--salmex-button-dark-edge));
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow));
+		transition: background var(--salmex-transition-fast), border-color var(--salmex-transition-fast),
+			box-shadow var(--salmex-transition-fast);
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	.salmex-checkbox-sm .salmex-checkbox-box {
+		width: 16px;
+		height: 16px;
+	}
+
+	.salmex-checkbox-md .salmex-checkbox-box {
+		width: 20px;
+		height: 20px;
+	}
+
+	.salmex-checkbox-lg .salmex-checkbox-box {
+		width: 24px;
+		height: 24px;
+	}
+
+	.salmex-checkbox-icon {
+		width: 100%;
+		height: 100%;
+		padding: 2px;
+	}
+
+	.salmex-checkbox-icon-minus {
+		padding: 3px 4px;
+	}
+
+	/* Checked — electric blue fill, crown accent */
+	.salmex-checkbox-box-checked {
+		background: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-button-dark-edge));
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-border-dark));
+	}
+
+	:global([data-theme='dark']) .salmex-checkbox-box-checked {
+		background: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-button-dark-edge));
+	}
+
+	/* Indeterminate — same as checked, minus icon */
+	.salmex-checkbox-box-indeterminate {
+		background: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-button-dark-edge));
+	}
+
+	.salmex-checkbox-label:hover .salmex-checkbox-box:not(.salmex-checkbox-box-checked):not(.salmex-checkbox-box-indeterminate) {
+		border-color: rgb(var(--salmex-electric-blue));
+	}
+
+	/* Focus — crown yellow ring (design system) */
+	.salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-midnight-black)),
+			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	}
+
+	:global([data-theme='dark']) .salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+
+	/* High contrast / forced colors: solid outline so focus is visible (APG) */
+	@media (forced-colors: active) {
+		.salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+			outline: 2px solid CanvasText;
+			outline-offset: 2px;
+		}
+	}
+
+	.salmex-checkbox-box-error {
+		border-color: rgb(var(--salmex-street-red));
+	}
+
+	:global([data-theme='dark']) .salmex-checkbox-box-error {
+		border-color: rgb(var(--salmex-street-red));
+	}
+
+	.salmex-checkbox-content {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.salmex-checkbox-text {
+		font-size: var(--salmex-font-size-sm);
+		font-weight: 600;
+		color: rgb(var(--salmex-text-primary));
+	}
+
+	.salmex-checkbox-required {
+		color: rgb(var(--salmex-street-red));
+		margin-left: 2px;
+	}
+
+	.salmex-checkbox-description {
+		font-size: var(--salmex-font-size-xs);
+		color: rgb(var(--salmex-text-secondary));
+	}
+
+	.salmex-checkbox-error {
+		font-size: var(--salmex-font-size-xs);
+		font-weight: 600;
+		color: rgb(var(--salmex-street-red));
+		margin: 0 0 0 calc(20px + var(--salmex-space-2));
+	}
+
+	.salmex-checkbox-lg .salmex-checkbox-error {
+		margin-left: calc(24px + var(--salmex-space-2));
+	}
+
+	.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;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-checkbox-box {
+			transition: none;
+		}
+	}
+</style>

package/dist/forms/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,30 @@
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    label: string;
+    checked?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+    hideLabel?: boolean;
+    class?: string;
+    onchange?: (event: Event) => void;
+    testId?: string;
+    validateOnMount?: boolean;
+}
+/**
+ * Checkbox
+ *
+ * Win2K × Basquiat — 3D checkbox with bold borders, crown yellow check.
+ * Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
+ * Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
+ */
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/forms/Checkbox/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAOA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,KAAK;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA+FD;;;;;;GAMG;AACH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/forms/Checkbox/index.d.ts

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

package/dist/forms/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/forms/Checkbox/index.js

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