@salmexio/ui 0.1.0

package/dist/primitives/Button/Button.svelte

@@ -0,0 +1,383 @@
+<!--
+  @component Button
+  
+  Win2K × Basquiat - Bold 3D button with neo-expressionist flair.
+  Raw structure, expressive energy, world-class accessibility.
+  
+  @example
+  <Button variant="default" size="md" onclick={() => handleClick()}>
+    Click me
+  </Button>
+  
+  @example
+  <Button variant="primary" disabled>
+    <Icon slot="icon-left" />
+    With Icon
+  </Button>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/cn.js';
+
+	type ButtonSize = 'sm' | 'md' | 'lg';
+	type ButtonVariant = 'default' | 'primary' | 'flat';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+		/** Visual variant of the button */
+		variant?: ButtonVariant;
+		/** Size of the button */
+		size?: ButtonSize;
+		/** Whether the button takes full width */
+		fullWidth?: boolean;
+		/** Icon to display on the left */
+		iconLeft?: Snippet;
+		/** Icon to display on the right */
+		iconRight?: Snippet;
+		/** Whether this is an icon-only button (requires aria-label) */
+		iconOnly?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Button content */
+		children?: Snippet;
+		/** Test ID for e2e testing */
+		testId?: string;
+		/** Keyboard shortcut hint (e.g., "Ctrl+S") */
+		shortcut?: string;
+	}
+
+	let {
+		variant = 'default',
+		size = 'md',
+		fullWidth = false,
+		disabled = false,
+		type = 'button',
+		iconLeft,
+		iconRight,
+		iconOnly = false,
+		class: className = '',
+		children,
+		testId,
+		shortcut,
+		...restProps
+	}: Props = $props();
+
+	const isDisabled = $derived(disabled);
+</script>
+
+<button
+	{type}
+	class={cn(
+		'salmex-btn',
+		`salmex-btn-${variant}`,
+		`salmex-btn-${size}`,
+		iconOnly && 'salmex-btn-icon-only',
+		fullWidth && !iconOnly && 'salmex-btn-full-width',
+		className
+	)}
+	disabled={isDisabled}
+	aria-disabled={isDisabled}
+	data-testid={testId}
+	{...restProps}
+>
+	<span class="salmex-btn-content">
+		{#if iconLeft}
+			<span class="salmex-btn-icon" aria-hidden="true">
+				{@render iconLeft()}
+			</span>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if iconRight}
+			<span class="salmex-btn-icon" aria-hidden="true">
+				{@render iconRight()}
+			</span>
+		{/if}
+
+		{#if shortcut}
+			<span class="salmex-btn-shortcut" aria-label="Keyboard shortcut: {shortcut}">
+				{shortcut}
+			</span>
+		{/if}
+	</span>
+</button>
+
+<style>
+	/* ========================================
+	   BASE BUTTON - Basquiat × Win2K 3D
+	   ======================================== */
+	.salmex-btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--salmex-space-2);
+		font-family: var(--salmex-font-system);
+		font-weight: 700;
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		
+		/* Canvas-like button surface */
+		background: rgb(var(--salmex-button-face));
+		border: none;
+		
+		/* Bold 3D effect - stronger than original Win2K */
+		box-shadow:
+			/* Top-left highlight */
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset 3px 3px 0 rgb(var(--salmex-button-light)),
+			/* Bottom-right shadow */
+			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
+			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
+			/* Outer bold border */
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			/* Flat shadow - Basquiat style */
+			4px 4px 0 rgb(0 0 0 / 0.25);
+		
+		transition: all var(--salmex-transition-fast);
+		text-transform: uppercase;
+		letter-spacing: 0.3px;
+	}
+
+	/* Focus - use global yellow ring (visible in light and dark) */
+	.salmex-btn:focus-visible {
+		outline: none;
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset 3px 3px 0 rgb(var(--salmex-button-light)),
+			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
+			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			4px 4px 0 rgb(0 0 0 / 0.25),
+			0 0 0 2px rgb(var(--salmex-midnight-black)),
+			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	}
+
+	:global([data-theme='dark']) .salmex-btn:focus-visible {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset 3px 3px 0 rgb(var(--salmex-button-light)),
+			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
+			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			4px 4px 0 rgb(0 0 0 / 0.25),
+			0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+
+	/* Hover state - energetic highlight */
+	.salmex-btn:hover:not(:disabled) {
+		background: rgb(var(--salmex-button-light));
+		transform: translateY(-1px);
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset 3px 3px 0 rgb(var(--salmex-button-light)),
+			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
+			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			5px 5px 0 rgb(0 0 0 / 0.3);
+	}
+
+	/* Active (pressed) state - inverted shadow */
+	.salmex-btn:active:not(:disabled) {
+		box-shadow:
+			/* Inverted shadows */
+			inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
+			inset -3px -3px 0 rgb(var(--salmex-button-light)),
+			inset 2px 2px 0 rgb(var(--salmex-button-dark-edge)),
+			inset 3px 3px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			2px 2px 0 rgb(0 0 0 / 0.3);
+		
+		/* Shift down-right for pressed effect */
+		transform: translate(2px, 2px);
+	}
+
+	/* Disabled state */
+	.salmex-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		color: rgb(var(--salmex-text-disabled));
+		filter: grayscale(0.5);
+	}
+
+	/* ========================================
+	   SIZE VARIANTS
+	   ======================================== */
+	.salmex-btn-sm {
+		height: 28px;
+		padding: 0 var(--salmex-space-3);
+		font-size: var(--salmex-font-size-xs);
+	}
+
+	.salmex-btn-md {
+		height: 36px;
+		padding: 0 var(--salmex-space-5);
+		font-size: var(--salmex-font-size-base);
+	}
+
+	.salmex-btn-lg {
+		height: 44px;
+		padding: 0 var(--salmex-space-6);
+		font-size: var(--salmex-font-size-md);
+	}
+
+	/* Icon-only variants */
+	.salmex-btn-icon-only.salmex-btn-sm {
+		width: 28px;
+		padding: 0;
+	}
+
+	.salmex-btn-icon-only.salmex-btn-md {
+		width: 36px;
+		padding: 0;
+	}
+
+	.salmex-btn-icon-only.salmex-btn-lg {
+		width: 44px;
+		padding: 0;
+	}
+
+	/* Full width */
+	.salmex-btn-full-width {
+		width: 100%;
+	}
+
+	/* ========================================
+	   VARIANT STYLES - Neo-Expressionist
+	   ======================================== */
+	
+	/* Default variant - bold canvas */
+	.salmex-btn-default {
+		color: rgb(var(--salmex-text-primary));
+	}
+
+	/* Primary variant - electric blue with yellow accent */
+	.salmex-btn-primary {
+		background: linear-gradient(135deg, 
+			rgb(var(--salmex-electric-blue)), 
+			rgb(var(--salmex-titlebar-bold))
+		);
+		color: rgb(var(--salmex-chalk-white));
+		font-weight: 900;
+		
+		box-shadow:
+			inset 2px 2px 0 rgba(255, 255, 255, 0.3),
+			inset 3px 3px 0 rgba(255, 255, 255, 0.15),
+			inset -2px -2px 0 rgba(0, 0, 0, 0.4),
+			inset -3px -3px 0 rgba(0, 0, 0, 0.2),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			4px 4px 0 rgb(0 0 0 / 0.35);
+	}
+
+	/* Yellow accent underline on primary */
+	.salmex-btn-primary::after {
+		content: '';
+		position: absolute;
+		bottom: 4px;
+		left: 10%;
+		width: 80%;
+		height: 2px;
+		background: rgb(var(--salmex-crown-yellow));
+		opacity: 0.7;
+	}
+
+	.salmex-btn-primary:hover:not(:disabled) {
+		background: linear-gradient(135deg, 
+			rgb(var(--salmex-primary-light)), 
+			rgb(var(--salmex-electric-blue))
+		);
+		transform: translateY(-1px);
+		box-shadow:
+			inset 2px 2px 0 rgba(255, 255, 255, 0.3),
+			inset 3px 3px 0 rgba(255, 255, 255, 0.15),
+			inset -2px -2px 0 rgba(0, 0, 0, 0.4),
+			inset -3px -3px 0 rgba(0, 0, 0, 0.2),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			5px 5px 0 rgb(0 0 0 / 0.4);
+	}
+
+	.salmex-btn-primary:active:not(:disabled) {
+		transform: translate(2px, 2px);
+		box-shadow:
+			inset -2px -2px 0 rgba(255, 255, 255, 0.3),
+			inset -3px -3px 0 rgba(255, 255, 255, 0.15),
+			inset 2px 2px 0 rgba(0, 0, 0, 0.4),
+			inset 3px 3px 0 rgba(0, 0, 0, 0.2),
+			0 0 0 2px rgb(var(--salmex-border-dark)),
+			2px 2px 0 rgb(0 0 0 / 0.3);
+	}
+
+	/* Flat variant - minimal but bold on interaction */
+	.salmex-btn-flat {
+		background: transparent;
+		box-shadow: none;
+		color: rgb(var(--salmex-text-primary));
+		font-weight: 600;
+	}
+
+	.salmex-btn-flat:hover:not(:disabled) {
+		background: rgb(var(--salmex-hover-layer) / 0.15);
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 1px rgb(var(--salmex-border-light));
+		color: rgb(var(--salmex-electric-blue));
+	}
+
+	.salmex-btn-flat:active:not(:disabled) {
+		background: rgb(var(--salmex-button-face));
+		box-shadow:
+			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
+			inset 1px 1px 0 rgb(var(--salmex-button-shadow));
+		transform: translate(1px, 1px);
+	}
+
+	/* ========================================
+	   CONTENT & LAYOUT
+	   ======================================== */
+	.salmex-btn-content {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+		position: relative;
+		z-index: 1;
+	}
+
+	.salmex-btn-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+		line-height: 0;
+	}
+
+	.salmex-btn-shortcut {
+		margin-left: var(--salmex-space-3);
+		font-size: 0.8em;
+		opacity: 0.8;
+		font-family: var(--salmex-font-mono);
+		font-weight: 600;
+		padding: 2px 6px;
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: 2px;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-btn {
+			transition: none;
+		}
+		
+		.salmex-btn:hover:not(:disabled) {
+			transform: none;
+		}
+		
+		.salmex-btn:active:not(:disabled) {
+			transform: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonVariant = 'default' | 'primary' | 'flat';
+interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+    /** Visual variant of the button */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Whether the button takes full width */
+    fullWidth?: boolean;
+    /** Icon to display on the left */
+    iconLeft?: Snippet;
+    /** Icon to display on the right */
+    iconRight?: Snippet;
+    /** Whether this is an icon-only button (requires aria-label) */
+    iconOnly?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Button content */
+    children?: Snippet;
+    /** Test ID for e2e testing */
+    testId?: string;
+    /** Keyboard shortcut hint (e.g., "Ctrl+S") */
+    shortcut?: string;
+}
+/**
+ * Button
+ *
+ * Win2K × Basquiat - Bold 3D button with neo-expressionist flair.
+ * Raw structure, expressive energy, world-class accessibility.
+ *
+ * @example
+ * <Button variant="default" size="md" onclick={() => handleClick()}>
+ *   Click me
+ * </Button>
+ *
+ * @example
+ * <Button variant="primary" disabled>
+ *   <Icon slot="icon-left" />
+ *   With Icon
+ * </Button>
+ */
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpD,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkEF;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/Button/index.d.ts

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

package/dist/primitives/Button/index.d.ts.map

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

package/dist/primitives/Button/index.js

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

package/dist/primitives/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/primitives/index.js

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

package/dist/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
+{@render children()}

package/dist/routes/+layout.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Layout: import("svelte").Component<{
+    children: import("svelte").Snippet;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;
+//# sourceMappingURL=+layout.svelte.d.ts.map

package/dist/routes/+layout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"+layout.svelte.d.ts","sourceRoot":"","sources":["../../src/routes/+layout.svelte.ts"],"names":[],"mappings":"AAWA,QAAA,MAAM,MAAM;cAR2C,OAAO,QAAQ,EAAE,OAAO;UAQ3B,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/routes/+page.svelte

@@ -0,0 +1,6 @@
+<h1>Salmex I/O UI Library</h1>
+
+<p>
+	This is the library package. Run the showcase to see components:
+	<code>pnpm --filter @salmexio/ui-showcase dev</code>
+</p>

package/dist/routes/+page.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Page;
+type Page = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Page: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=+page.svelte.d.ts.map

package/dist/routes/+page.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"+page.svelte.d.ts","sourceRoot":"","sources":["../../src/routes/+page.svelte.js"],"names":[],"mappings":";;;;;;;;AAoBA;;;;mBAAgH;6CATnE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}