@salmexio/ui 0.1.0

package/dist/navigation/Tabs/Tabs.svelte

@@ -0,0 +1,448 @@
+<!--
+  @component Tabs
+  
+  Win2K × Basquiat tabbed interface with 3D beveled tabs.
+  Bold structure, expressive colors, world-class accessibility.
+  
+  @example
+  <Tabs
+    label="Content sections"
+    tabs={[
+      { value: 'one', label: 'First', badge: 3 },
+      { value: 'two', label: 'Second' }
+    ]}
+    value={activeTab}
+    onchange={(v) => setActiveTab(v)}
+  >
+    {#snippet children(activeValue)}
+      {#if activeValue === 'one'} <Content /> {/if}
+    {/snippet}
+  </Tabs>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+
+	type TabsSize = 'sm' | 'md' | 'lg';
+
+	export interface TabOption {
+		/** Unique value for the tab */
+		value: string;
+		/** Display label */
+		label: string;
+		/** Optional icon snippet */
+		icon?: Snippet;
+		/** Optional badge (count or label) */
+		badge?: number | string;
+		/** Whether this tab is disabled */
+		disabled?: boolean;
+	}
+
+	interface Props {
+		/** Unique identifier */
+		id?: string;
+		/** Accessible label for tablist (required for screen readers) */
+		label: string;
+		/** Tab definitions */
+		tabs: TabOption[];
+		/** Currently selected tab value */
+		value?: string;
+		/** Size variant */
+		size?: TabsSize;
+		/** Additional CSS classes */
+		class?: string;
+		/** Change handler */
+		onchange?: (value: string) => void;
+		/** Panel content - receives active tab value */
+		children?: Snippet<[activeValue: string]>;
+		/** Test ID */
+		testId?: string;
+	}
+
+	let {
+		id = `tabs-${Math.random().toString(36).substr(2, 9)}`,
+		label,
+		tabs,
+		value = '',
+		size = 'md',
+		class: className = '',
+		onchange,
+		children,
+		testId
+	}: Props = $props();
+
+	function getTabId(index: number) {
+		return `${id}-tab-${index}`;
+	}
+
+	function getPanelId(index: number) {
+		return `${id}-panel-${index}`;
+	}
+
+	function activateTab(index: number) {
+		const tab = tabs[index];
+		if (!tab || tab.disabled) return;
+		if (value === tab.value) return;
+		onchange?.(tab.value);
+	}
+
+	function handleKeydown(event: KeyboardEvent, currentIndex: number) {
+		let nextIndex = currentIndex;
+
+		if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			nextIndex = currentIndex + 1;
+			if (nextIndex >= tabs.length) nextIndex = 0;
+		} else if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			nextIndex = currentIndex - 1;
+			if (nextIndex < 0) nextIndex = tabs.length - 1;
+		} else if (event.key === 'Home') {
+			event.preventDefault();
+			nextIndex = 0;
+		} else if (event.key === 'End') {
+			event.preventDefault();
+			nextIndex = tabs.length - 1;
+		} else {
+			return;
+		}
+
+		// Skip disabled tabs
+		while (tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
+			nextIndex =
+				event.key === 'ArrowRight' || event.key === 'End' ? nextIndex + 1 : nextIndex - 1;
+			if (nextIndex >= tabs.length) nextIndex = 0;
+			if (nextIndex < 0) nextIndex = tabs.length - 1;
+		}
+
+		if (!tabs[nextIndex]?.disabled) {
+			activateTab(nextIndex);
+			const el = document.getElementById(getTabId(nextIndex));
+			el?.focus();
+		}
+	}
+</script>
+
+<div class={cn('salmex-tabs-root', className)} data-testid={testId} {id}>
+	<div class={cn('salmex-tabs-list', `salmex-tabs-list-${size}`)} role="tablist" aria-label={label}>
+		{#each tabs as tab, index (tab.value)}
+			{@const isSelected = value === tab.value}
+			{@const isDisabled = tab.disabled}
+			<button
+				type="button"
+				id={getTabId(index)}
+				role="tab"
+				tabindex={isSelected ? 0 : -1}
+				aria-selected={isSelected}
+				aria-controls={getPanelId(index)}
+				aria-disabled={isDisabled}
+				disabled={isDisabled}
+				class={cn(
+					'salmex-tab',
+					`salmex-tab-${size}`,
+					isSelected && 'salmex-tab-selected',
+					isDisabled && 'salmex-tab-disabled'
+				)}
+				onclick={() => activateTab(index)}
+				onkeydown={(e) => handleKeydown(e, index)}
+			>
+				{#if tab.icon}
+					<span class="salmex-tab-icon" aria-hidden="true">
+						{@render tab.icon()}
+					</span>
+				{/if}
+				<span class="salmex-tab-label">{tab.label}</span>
+				{#if tab.badge !== undefined && tab.badge !== null && tab.badge !== ''}
+					<span class="salmex-tab-badge" aria-hidden="true">{tab.badge}</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+
+	{#each tabs as tab, index (tab.value)}
+		{@const isSelected = value === tab.value}
+		<div
+			id={getPanelId(index)}
+			role="tabpanel"
+			aria-labelledby={getTabId(index)}
+			hidden={!isSelected}
+			tabindex={0}
+			class={cn('salmex-tabs-panel', !isSelected && 'salmex-tabs-panel-hidden')}
+		>
+			{#if isSelected && children}
+				{@render children(tab.value)}
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	/* ========================================
+	   ROOT
+	   ======================================== */
+	.salmex-tabs-root {
+		display: block;
+		width: 100%;
+		position: relative;
+	}
+
+	/* ========================================
+	   TABLIST - Tabs sit ON the panel edge
+	   ======================================== */
+	.salmex-tabs-list {
+		display: flex;
+		gap: var(--salmex-space-3);
+		padding: var(--salmex-space-2) var(--salmex-space-2) 6px;
+		margin-bottom: -6px;
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+		position: relative;
+		z-index: 2;
+	}
+
+	.salmex-tabs-list-sm {
+		min-height: 52px;
+	}
+
+	.salmex-tabs-list-md {
+		min-height: 58px;
+	}
+
+	.salmex-tabs-list-lg {
+		min-height: 64px;
+	}
+
+	/* ========================================
+	   TAB - Bold 3D Win2K button style matching Button component
+	   ======================================== */
+	.salmex-tab {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+		background: rgb(var(--salmex-button-face));
+		padding: var(--salmex-space-2) var(--salmex-space-4);
+		font-family: var(--salmex-font-system);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.3px;
+		cursor: pointer;
+		white-space: nowrap;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		color: rgb(var(--salmex-text-primary));
+		position: relative;
+		
+		/* Keep consistent height - unselected tabs float higher above */
+		margin-bottom: 0;
+		
+		/* Move all unselected tabs up more */
+		transform: translateY(-8px);
+		
+		/* Simplified 3D - just 2px inset, cleaner look */
+		box-shadow:
+			/* Top-left highlight */
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			/* Bottom-right shadow */
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			/* Flat shadow - Basquiat style */
+			3px 3px 0 rgb(0 0 0 / 0.2);
+		
+		/* Always account for focus border space (transparent when not focused) */
+		outline: 2px dashed transparent;
+		outline-offset: 2px;
+		
+		border-radius: 0;
+		transition: all var(--salmex-transition-fast);
+	}
+
+	.salmex-tab-sm {
+		height: auto;
+		font-size: var(--salmex-font-size-xs);
+		padding: 6px var(--salmex-space-3);
+	}
+
+	.salmex-tab-md {
+		height: auto;
+		font-size: var(--salmex-font-size-sm);
+	}
+
+	.salmex-tab-lg {
+		height: auto;
+		font-size: var(--salmex-font-size-base);
+		padding: var(--salmex-space-3) var(--salmex-space-5);
+	}
+
+	.salmex-tab:hover:not(.salmex-tab-disabled):not(.salmex-tab-selected) {
+		background: rgb(var(--salmex-button-light));
+		transform: translateY(-6px);
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			4px 4px 0 rgb(0 0 0 / 0.25);
+	}
+
+	/* Active (pressed) state - inverted shadow for tactile feedback */
+	.salmex-tab:active:not(.salmex-tab-disabled):not(.salmex-tab-selected) {
+		box-shadow:
+			/* Inverted shadows for pressed effect */
+			inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
+			inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
+			/* Reduced flat shadow */
+			1px 1px 0 rgb(0 0 0 / 0.3);
+		
+		/* Shift down for pressed effect - relative to hover position */
+		transform: translate(1px, -5px);
+	}
+
+	/* Selected tab - merges with panel using transform */
+	.salmex-tab-selected {
+		/* Match panel background */
+		background: rgb(var(--salmex-window-surface));
+		color: rgb(var(--salmex-electric-blue));
+		font-weight: 900;
+		z-index: 3;
+		
+		/* Use transform to move down and merge - extends further into panel */
+		transform: translateY(2px);
+
+		/* No bottom border */
+		border-bottom: none;
+		
+		/* Subtle 3D on sides only - merges at bottom */
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px 0 0 rgb(var(--salmex-button-shadow));
+	}
+
+	/* Dark mode selected - bright blue text with lighter grey shadow */
+	:global([data-theme='dark']) .salmex-tab-selected {
+		color: rgb(var(--salmex-primary-light));
+		text-shadow: 
+			0.5px 0.5px 0 rgb(var(--salmex-border-default)),
+			-0.5px -0.5px 0 rgb(var(--salmex-border-default));
+	}
+
+	/* Focus - yellow ring, visible in light and dark */
+	.salmex-tab:focus-visible {
+		outline: none;
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			3px 3px 0 rgb(0 0 0 / 0.2),
+			0 0 0 2px rgb(var(--salmex-midnight-black)),
+			0 0 0 5px rgb(var(--salmex-crown-yellow));
+		z-index: 10;
+	}
+
+	:global([data-theme='dark']) .salmex-tab:focus-visible {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			3px 3px 0 rgb(0 0 0 / 0.2),
+			0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+
+	.salmex-tab-disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		color: rgb(var(--salmex-text-disabled));
+	}
+
+	.salmex-tab-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		line-height: 0;
+	}
+
+	.salmex-tab-label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.salmex-tab-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 18px;
+		height: 18px;
+		padding: 0 6px;
+		background: rgb(var(--salmex-bg-tertiary));
+		border: 1px solid rgb(var(--salmex-border-default));
+		font-size: 11px;
+		font-weight: 700;
+		color: rgb(var(--salmex-text-secondary));
+		border-radius: 0;
+	}
+
+	.salmex-tab-selected .salmex-tab-badge {
+		background: rgb(var(--salmex-crown-yellow) / 0.2);
+		color: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-electric-blue));
+	}
+
+	:global([data-theme='dark']) .salmex-tab-selected .salmex-tab-badge {
+		background: rgb(var(--salmex-crown-yellow) / 0.3);
+		color: rgb(var(--salmex-crown-yellow));
+		border-color: rgb(var(--salmex-crown-yellow));
+	}
+
+	/* ========================================
+	   TABPANEL - Bold panel matching Button component style
+	   ======================================== */
+	.salmex-tabs-panel {
+		min-height: 0;
+		overflow: auto;
+		padding: var(--salmex-space-6);
+		margin-top: 0;
+		background: rgb(var(--salmex-window-surface));
+		position: relative;
+		z-index: 1;
+		
+		/* Simplified inset 3D effect */
+		box-shadow:
+			/* Inner shadows for depth */
+			inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
+			inset -2px -2px 0 rgb(var(--salmex-button-highlight));
+	}
+
+	.salmex-tabs-panel-hidden {
+		display: none !important;
+	}
+
+	.salmex-tabs-panel:focus {
+		outline: none;
+	}
+
+	/* ========================================
+	   SCROLLBAR STYLING
+	   ======================================== */
+	.salmex-tabs-list::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	.salmex-tabs-list::-webkit-scrollbar-track {
+		background: rgb(var(--salmex-bg-tertiary));
+	}
+
+	.salmex-tabs-list::-webkit-scrollbar-thumb {
+		background: rgb(var(--salmex-button-shadow));
+		border: 1px solid rgb(var(--salmex-border-default));
+	}
+
+	.salmex-tabs-list::-webkit-scrollbar-thumb:hover {
+		background: rgb(var(--salmex-button-dark-edge));
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-tab {
+			transition: none;
+		}
+	}
+</style>

package/dist/navigation/Tabs/Tabs.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+type TabsSize = 'sm' | 'md' | 'lg';
+export interface TabOption {
+    /** Unique value for the tab */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon snippet */
+    icon?: Snippet;
+    /** Optional badge (count or label) */
+    badge?: number | string;
+    /** Whether this tab is disabled */
+    disabled?: boolean;
+}
+interface Props {
+    /** Unique identifier */
+    id?: string;
+    /** Accessible label for tablist (required for screen readers) */
+    label: string;
+    /** Tab definitions */
+    tabs: TabOption[];
+    /** Currently selected tab value */
+    value?: string;
+    /** Size variant */
+    size?: TabsSize;
+    /** Additional CSS classes */
+    class?: string;
+    /** Change handler */
+    onchange?: (value: string) => void;
+    /** Panel content - receives active tab value */
+    children?: Snippet<[activeValue: string]>;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * Tabs
+ *
+ * Win2K × Basquiat tabbed interface with 3D beveled tabs.
+ * Bold structure, expressive colors, world-class accessibility.
+ *
+ * @example
+ * <Tabs
+ *   label="Content sections"
+ *   tabs={[
+ *     { value: 'one', label: 'First', badge: 3 },
+ *     { value: 'two', label: 'Second' }
+ *   ]}
+ *   value={activeTab}
+ *   onchange={(v) => setActiveTab(v)}
+ * >
+ *   {#snippet children(activeValue)}
+ *     {#if activeValue === 'one'} <Content /> {/if}
+ *   {/snippet}
+ * </Tabs>
+ */
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
+//# sourceMappingURL=Tabs.svelte.d.ts.map

package/dist/navigation/Tabs/Tabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,SAAS;IACzB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACd,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA+GF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/navigation/Tabs/index.d.ts

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

package/dist/navigation/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/navigation/Tabs/index.js

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

package/dist/navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { Tabs } from './Tabs/index.js';
+export type { TabOption } from './Tabs/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/navigation/index.js

@@ -0,0 +1 @@
+export { Tabs } from './Tabs/index.js';