@salmexio/ui 0.4.0 → 1.1.0

package/README.md

@@ -1,7 +1,56 @@
 # @salmexio/ui
 
-Experimental Svelte 5 UI component library. Use at your own risk.
+INFRARED component library for Salmex I/O products. Built with Svelte 5 and TypeScript.
 
-**Install:** `pnpm add @salmexio/ui` or `npm i @salmexio/ui`
+## Install
 
-UNLICENSED.
+```bash
+pnpm add @salmexio/ui
+```
+
+## Usage
+
+```svelte
+<script>
+  import { Button, TextInput, Card } from '@salmexio/ui';
+  import '@salmexio/ui/styles';
+</script>
+
+<Card>
+  <TextInput label="Name" placeholder="Enter your name" />
+  <Button variant="primary">Submit</Button>
+</Card>
+```
+
+## Components
+
+| Category | Components |
+|---|---|
+| **Primitives** | Button, Badge, Tooltip |
+| **Layout** | Card, Container |
+| **Forms** | TextInput, Textarea, Checkbox, Select, Slider, Toggle |
+| **Feedback** | Alert, Spinner, Toast, ProgressBar, Skeleton |
+| **Navigation** | Tabs, CommandPalette |
+| **Dialogs** | Modal, ContextMenu |
+
+## Exports
+
+- `@salmexio/ui` — All components
+- `@salmexio/ui/styles` — Design tokens CSS
+- `@salmexio/ui/primitives` — Primitive components only
+- `@salmexio/ui/navigation` — Navigation components only
+- `@salmexio/ui/utils` — Utilities (cn)
+
+## Development
+
+```bash
+pnpm dev          # Watch mode
+pnpm build        # Build for production
+pnpm test         # Run tests
+pnpm check        # Type check
+pnpm lint         # Lint code
+```
+
+## License
+
+UNLICENSED — (c) 2026 Salmen Hichri

package/dist/dialogs/ContextMenu/ContextMenu.svelte

@@ -1,7 +1,7 @@
 <!--
   @component ContextMenu
 
-  Win2K × Basquiat — Right-click context menu with raised panel, keyboard navigation,
+  INFRARED — Right-click context menu with glass panel, keyboard navigation,
   separators, section headers, submenus, and keyboard shortcut hints.
 
   @example
@@ -19,12 +19,14 @@
   </div>
 -->
 <script lang="ts" module>
+import type { Snippet } from 'svelte';
+
 export interface MenuItem {
 	type: 'item';
 	label: string;
 	shortcut?: string;
 	disabled?: boolean;
-	icon?: string;
+	icon?: Snippet;
 	action?: () => void;
 	children?: MenuItemOrSeparator[];
 }
@@ -259,7 +261,7 @@ onMount(() => {
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
 	<div
 		bind:this={menuEl}
-		class={cn('salmex-ctx', className)}
+		class={cn('sx-context', className)}
 		style="left: {posX}px; top: {posY}px;"
 		role="menu"
 		tabindex="-1"
@@ -268,16 +270,16 @@ onMount(() => {
 	>
 		{#each items as item, i}
 			{#if item.type === 'separator'}
-				<div class="salmex-ctx-separator" role="separator"></div>
+				<div class="sx-context-separator" role="separator"></div>
 			{:else if item.type === 'group'}
-				<div class="salmex-ctx-group-label">{item.label}</div>
+				<div class="sx-context-group-label">{item.label}</div>
 				{#each item.items as groupItem}
 					{#if groupItem.type === 'item'}
 						<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
 						<div
 							class={cn(
-								'salmex-ctx-item',
-								groupItem.disabled && 'salmex-ctx-item-disabled'
+								'sx-context-item',
+								groupItem.disabled && 'sx-context-item-disabled'
 							)}
 							role="menuitem"
 							tabindex="-1"
@@ -287,26 +289,26 @@ onMount(() => {
 							onmouseenter={() => { if (!groupItem.disabled) { activeIndex = -1; openSubmenuIndex = -1; } }}
 						>
 							{#if groupItem.icon}
-								<span class="salmex-ctx-icon" aria-hidden="true">{groupItem.icon}</span>
+								<span class="sx-context-icon" aria-hidden="true">{@render groupItem.icon()}</span>
 							{:else}
-								<span class="salmex-ctx-icon-spacer"></span>
+								<span class="sx-context-icon-spacer"></span>
 							{/if}
-							<span class="salmex-ctx-label">{groupItem.label}</span>
+							<span class="sx-context-label">{groupItem.label}</span>
 							{#if groupItem.shortcut}
-								<span class="salmex-ctx-shortcut">{groupItem.shortcut}</span>
+								<span class="sx-context-shortcut">{groupItem.shortcut}</span>
 							{/if}
 						</div>
 					{:else if groupItem.type === 'separator'}
-						<div class="salmex-ctx-separator" role="separator"></div>
+						<div class="sx-context-separator" role="separator"></div>
 					{/if}
 				{/each}
 			{:else if item.type === 'item'}
 				<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
 				<div
 					class={cn(
-						'salmex-ctx-item',
-						i === activeIndex && 'salmex-ctx-item-active',
-						item.disabled && 'salmex-ctx-item-disabled'
+						'sx-context-item',
+						i === activeIndex && 'sx-context-item-active',
+						item.disabled && 'sx-context-item-disabled'
 					)}
 					role="menuitem"
 					tabindex="-1"
@@ -317,35 +319,35 @@ onMount(() => {
 					onkeydown={handleKeydown}
 				>
 					{#if item.icon}
-						<span class="salmex-ctx-icon" aria-hidden="true">{item.icon}</span>
+						<span class="sx-context-icon" aria-hidden="true">{@render item.icon()}</span>
 					{:else}
-						<span class="salmex-ctx-icon-spacer"></span>
+						<span class="sx-context-icon-spacer"></span>
 					{/if}
-					<span class="salmex-ctx-label">{item.label}</span>
+					<span class="sx-context-label">{item.label}</span>
 					{#if item.children?.length}
-						<span class="salmex-ctx-submenu-arrow" aria-hidden="true">&#9654;</span>
+						<span class="sx-context-submenu-arrow" aria-hidden="true">&#9654;</span>
 					{:else if item.shortcut}
-						<span class="salmex-ctx-shortcut">{item.shortcut}</span>
+						<span class="sx-context-shortcut">{item.shortcut}</span>
 					{/if}
 				</div>
 
 				<!-- Submenu -->
 				{#if openSubmenuIndex === i && item.children?.length}
 					<div
-						class="salmex-ctx salmex-ctx-submenu"
+						class="sx-context sx-context-submenu"
 						style="left: {submenuPosX}px; top: {submenuPosY}px;"
 						role="menu"
 					>
 						{#each item.children as subItem, si}
 							{#if subItem.type === 'separator'}
-								<div class="salmex-ctx-separator" role="separator"></div>
+								<div class="sx-context-separator" role="separator"></div>
 							{:else if subItem.type === 'item'}
 								<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
 								<div
 									class={cn(
-										'salmex-ctx-item',
-										si === submenuActiveIndex && 'salmex-ctx-item-active',
-										subItem.disabled && 'salmex-ctx-item-disabled'
+										'sx-context-item',
+										si === submenuActiveIndex && 'sx-context-item-active',
+										subItem.disabled && 'sx-context-item-disabled'
 									)}
 									role="menuitem"
 									tabindex="-1"
@@ -355,13 +357,13 @@ onMount(() => {
 									onkeydown={handleKeydown}
 								>
 									{#if subItem.icon}
-										<span class="salmex-ctx-icon" aria-hidden="true">{subItem.icon}</span>
+										<span class="sx-context-icon" aria-hidden="true">{@render subItem.icon()}</span>
 									{:else}
-										<span class="salmex-ctx-icon-spacer"></span>
+										<span class="sx-context-icon-spacer"></span>
 									{/if}
-									<span class="salmex-ctx-label">{subItem.label}</span>
+									<span class="sx-context-label">{subItem.label}</span>
 									{#if subItem.shortcut}
-										<span class="salmex-ctx-shortcut">{subItem.shortcut}</span>
+										<span class="sx-context-shortcut">{subItem.shortcut}</span>
 									{/if}
 								</div>
 							{/if}
@@ -375,82 +377,83 @@ onMount(() => {
 
 <style>
 	/* ========================================
-	   MENU PANEL — Raised, bold shadow
+	   MENU PANEL
 	   ======================================== */
-	.salmex-ctx {
+	.sx-context {
 		position: fixed;
-		z-index: var(--salmex-z-popover);
+		z-index: var(--sx-z-popover, 1060);
 		min-width: 180px;
 		max-width: 320px;
-		background: rgb(var(--salmex-bg-primary));
-		border: 2px solid rgb(var(--salmex-border-dark));
-		border-radius: var(--salmex-radius-md);
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			4px 4px 2px rgb(0 0 0 / 0.3);
-		padding: var(--salmex-space-1) 0;
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		box-shadow: var(--sx-shadow-lg);
+		backdrop-filter: var(--sx-glass-blur);
+		padding: var(--sx-space-1) 0;
 		outline: none;
-		font-family: var(--salmex-font-system);
-	}
-
-	:global([data-theme='dark']) .salmex-ctx {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			4px 4px 2px rgb(0 0 0 / 0.6);
 	}
 
 	/* ========================================
 	   SUBMENU — Positioned relative to parent
 	   ======================================== */
-	.salmex-ctx-submenu {
+	.sx-context-submenu {
 		position: absolute;
 	}
 
 	/* ========================================
 	   MENU ITEM
 	   ======================================== */
-	.salmex-ctx-item {
+	.sx-context-item {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-2);
-		padding: var(--salmex-space-2) var(--salmex-space-4);
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 600;
-		color: rgb(var(--salmex-text-primary));
+		gap: var(--sx-space-2);
+		padding: var(--sx-space-2) var(--sx-space-3);
+		margin: 0 var(--sx-space-1);
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text);
 		cursor: pointer;
 		user-select: none;
 		white-space: nowrap;
-		transition: background var(--salmex-transition-fast);
+		border-radius: var(--sx-radius-sm);
+		transition:
+			background var(--sx-transition-fast),
+			color var(--sx-transition-fast);
 	}
 
-	.salmex-ctx-item-active {
-		background: rgb(var(--salmex-electric-blue));
-		color: rgb(var(--salmex-chalk-white));
+	.sx-context-item-active {
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
 	}
 
-	:global([data-theme='dark']) .salmex-ctx-item-active {
-		background: rgb(var(--salmex-primary-light));
-		color: rgb(var(--salmex-midnight-black));
+	.sx-context-item-disabled {
+		color: var(--sx-color-text-disabled);
+		cursor: not-allowed;
 	}
 
-	.salmex-ctx-item-disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
+	.sx-context-item-disabled:hover,
+	.sx-context-item-disabled.sx-context-item-active {
+		background: transparent;
+		color: var(--sx-color-text-disabled);
 	}
 
 	/* ========================================
 	   ICON
 	   ======================================== */
-	.salmex-ctx-icon {
+	.sx-context-icon {
 		flex-shrink: 0;
 		width: 16px;
-		text-align: center;
-		font-size: 14px;
+		height: 16px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-context-item-active .sx-context-icon {
+		color: var(--sx-color-primary);
 	}
 
-	.salmex-ctx-icon-spacer {
+	.sx-context-icon-spacer {
 		flex-shrink: 0;
 		width: 16px;
 	}
@@ -458,55 +461,55 @@ onMount(() => {
 	/* ========================================
 	   LABEL & SHORTCUT
 	   ======================================== */
-	.salmex-ctx-label {
+	.sx-context-label {
 		flex: 1;
 	}
 
-	.salmex-ctx-shortcut {
-		margin-left: var(--salmex-space-6);
-		font-size: var(--salmex-font-size-xs);
-		font-family: var(--salmex-font-mono);
-		font-weight: 600;
-		opacity: 0.6;
+	.sx-context-shortcut {
+		margin-left: var(--sx-space-6);
+		font-size: var(--sx-text-xs);
+		font-family: var(--sx-font-mono);
+		color: var(--sx-color-text-disabled);
 		text-align: right;
 	}
 
-	.salmex-ctx-item-active .salmex-ctx-shortcut {
-		opacity: 0.85;
+	.sx-context-item-active .sx-context-shortcut {
+		color: var(--sx-color-primary);
+		opacity: 0.7;
 	}
 
 	/* ========================================
 	   SUBMENU ARROW
 	   ======================================== */
-	.salmex-ctx-submenu-arrow {
-		margin-left: var(--salmex-space-4);
+	.sx-context-submenu-arrow {
+		margin-left: var(--sx-space-4);
 		font-size: 8px;
-		opacity: 0.7;
+		color: var(--sx-color-text-disabled);
 	}
 
-	.salmex-ctx-item-active .salmex-ctx-submenu-arrow {
-		opacity: 1;
+	.sx-context-item-active .sx-context-submenu-arrow {
+		color: var(--sx-color-primary);
 	}
 
 	/* ========================================
 	   SEPARATOR
 	   ======================================== */
-	.salmex-ctx-separator {
+	.sx-context-separator {
 		height: 0;
-		margin: var(--salmex-space-1) var(--salmex-space-2);
-		border-top: 1px solid rgb(var(--salmex-button-shadow));
-		border-bottom: 1px solid rgb(var(--salmex-button-highlight));
+		margin: var(--sx-space-1) var(--sx-space-2);
+		border-top: 1px solid var(--sx-color-border);
 	}
 
 	/* ========================================
 	   GROUP LABEL
 	   ======================================== */
-	.salmex-ctx-group-label {
-		padding: var(--salmex-space-2) var(--salmex-space-4) var(--salmex-space-1);
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 700;
-		letter-spacing: 0.4px;
-		color: rgb(var(--salmex-text-secondary));
+	.sx-context-group-label {
+		padding: var(--sx-space-2) var(--sx-space-3) var(--sx-space-1);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--sx-color-text-disabled);
 		user-select: none;
 	}
 
@@ -514,7 +517,7 @@ onMount(() => {
 	   REDUCED MOTION
 	   ======================================== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-ctx-item {
+		.sx-context-item {
 			transition: none;
 		}
 	}

package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts

@@ -1,9 +1,10 @@
+import type { Snippet } from 'svelte';
 export interface MenuItem {
     type: 'item';
     label: string;
     shortcut?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: Snippet;
     action?: () => void;
     children?: MenuItemOrSeparator[];
 }
@@ -27,7 +28,7 @@ interface Props {
 /**
  * ContextMenu
  *
- * Win2K × Basquiat — Right-click context menu with raised panel, keyboard navigation,
+ * INFRARED — Right-click context menu with glass panel, keyboard navigation,
  * separators, section headers, submenus, and keyboard shortcut hints.
  *
  * @example

package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/dialogs/ContextMenu/ContextMenu.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,QAAQ;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,WAAW,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAQvE,UAAU,KAAK;IACd,iBAAiB;IACjB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsSD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,WAAW;cA5RC,MAAM,KAAK,MAAM;;MA4RsB,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/dialogs/ContextMenu/ContextMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,QAAQ;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,WAAW,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAQvE,UAAU,KAAK;IACd,iBAAiB;IACjB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsSD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,WAAW;cA5RC,MAAM,KAAK,MAAM;;MA4RsB,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}