@insymetri/styleguide 0.1.9 → 0.1.10

package/dist/IIAlert/IIAlert.svelte

@@ -51,7 +51,7 @@
 		)}
 		role="alert"
 	>
-		<IIIcon icon={config.icon} class={cn('size-20 shrink-0 mt-1', config.text)} />
+		<IIIcon iconName={config.icon} class={cn('size-20 shrink-0 mt-1', config.text)} />
 		<div class="flex-auto min-w-0">
 			{#if title}
 				<p class={cn('text-small-emphasis m-0', config.text)}>{title}</p>
@@ -67,7 +67,7 @@
 				onclick={handleDismiss}
 				aria-label="Dismiss"
 			>
-				<IIIcon icon="x" class="size-16" />
+				<IIIcon iconName="x" class="size-16" />
 			</button>
 		{/if}
 	</div>

package/dist/IIAuditTrail/IIAuditTrail.svelte

@@ -126,7 +126,7 @@
 					<div class="flex justify-between items-start mb-4">
 						<div class="flex gap-8 items-start">
 							<span class="text-secondary flex">
-								<IIIcon icon={iconName} class="w-20 h-20" />
+								<IIIcon iconName={iconName} class="w-20 h-20" />
 							</span>
 							<div class="flex-1">
 								<div class="text-small-emphasis text-body mb-4">{event.description}</div>

package/dist/IIButton/IIButton.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
 	import type {HTMLButtonAttributes, HTMLAnchorAttributes} from 'svelte/elements'
+	import type {IconName} from '../icons'
+	import IIIcon from '../IIIcon/IIIcon.svelte'
 	import {cn} from '../utils/cn'
 
 	type BaseProps = {
 		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
 		size?: 'sm' | 'md' | 'lg'
-		iconOnly?: boolean
+		iconName?: IconName
 		loading?: boolean
 		disabled?: boolean
 		children?: Snippet
@@ -22,7 +24,7 @@
 	let {
 		variant = 'primary',
 		size = 'md',
-		iconOnly = false,
+		iconName,
 		loading = false,
 		disabled = false,
 		children,
@@ -34,20 +36,16 @@
 
 	const isDisabled = $derived(disabled || loading)
 
-	const baseClasses = $derived(
-		cn(
-			'inline-flex items-center justify-center rounded-6 cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed',
-			!iconOnly && 'gap-8 whitespace-nowrap'
-		)
-	)
+	const baseClasses =
+		'inline-flex items-center justify-center gap-8 whitespace-nowrap rounded-6 cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed'
 
 	const variantClasses = {
-		primary: 'bg-primary text-inverse border-0 hover:bg-primary-hover disabled:bg-disabled',
-		secondary: 'bg-surface text-gray-700 border border-strong hover:bg-gray-70 disabled:opacity-50',
-		ghost: 'text-secondary border-0 hover:bg-button-ghost-hover disabled:opacity-50',
-		danger: 'bg-error text-inverse border-0 hover:bg-error-hover disabled:bg-disabled',
-		success: 'bg-success text-inverse border-0 hover:bg-success-hover disabled:bg-disabled',
-		accent: 'bg-accent text-on-accent border-0 hover:bg-accent-hover disabled:bg-disabled',
+		primary: 'bg-button-primary text-button-primary border-0 hover:bg-button-primary-hover disabled:bg-button-primary-disabled',
+		secondary: 'bg-button-secondary text-button-secondary border border-button-secondary hover:text-button-secondary-hover hover:border-button-secondary-hover disabled:opacity-50',
+		ghost: 'text-button-ghost border-0 hover:bg-button-ghost-hover hover:text-button-ghost-hover disabled:opacity-50',
+		danger: 'bg-button-danger text-button-danger border-0 hover:bg-button-danger-hover disabled:bg-button-danger-disabled',
+		success: 'bg-button-success text-button-success border-0 hover:bg-button-success-hover disabled:bg-button-success-disabled',
+		accent: 'bg-button-accent text-button-accent border-0 hover:bg-button-accent-hover disabled:bg-button-accent-disabled',
 	} as const
 
 	const sizeClasses = {
@@ -56,13 +54,24 @@
 		lg: 'py-10 px-16 text-large h-32',
 	} as const
 
-	const iconOnlySizeClasses = {
-		sm: 'w-24 h-24 p-0 text-small',
-		md: 'w-28 h-28 p-0 text-default',
-		lg: 'w-32 h-32 p-0 text-large',
+	const iconSizeClasses = {
+		sm: 'w-12 h-12',
+		md: 'w-14 h-14',
+		lg: 'w-16 h-16',
 	} as const
 </script>
 
+{#snippet iconContent()}
+	{#if loading}
+		<span
+			class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
+		></span>
+	{:else if iconName}
+		<IIIcon iconName={iconName} class={iconSizeClasses[size]} />
+	{/if}
+	{@render children?.()}
+{/snippet}
+
 {#if href}
 	<a
 		bind:this={ref}
@@ -70,17 +79,12 @@
 		class={cn(
 			baseClasses,
 			variantClasses[variant],
-			iconOnly ? iconOnlySizeClasses[size] : sizeClasses[size],
+			sizeClasses[size],
 			className
 		)}
 		{...restProps as HTMLAnchorAttributes}
 	>
-		{#if loading}
-			<span
-				class="w-[1em] h-[1em] border-2 border-current border-r-transparent rounded-full animate-spin motion-reduce:animate-none"
-			></span>
-		{/if}
-		{@render children?.()}
+		{@render iconContent()}
 	</a>
 {:else}
 	<button
@@ -89,16 +93,11 @@
 		class={cn(
 			baseClasses,
 			variantClasses[variant],
-			iconOnly ? iconOnlySizeClasses[size] : sizeClasses[size],
+			sizeClasses[size],
 			className
 		)}
 		{...restProps as HTMLButtonAttributes}
 	>
-		{#if loading}
-			<span
-				class="w-[1em] h-[1em] border-2 border-current border-r-transparent rounded-full animate-spin motion-reduce:animate-none"
-			></span>
-		{/if}
-		{@render children?.()}
+		{@render iconContent()}
 	</button>
 {/if}

package/dist/IIButton/IIButton.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+import type { IconName } from '../icons';
 type BaseProps = {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent';
     size?: 'sm' | 'md' | 'lg';
-    iconOnly?: boolean;
+    iconName?: IconName;
     loading?: boolean;
     disabled?: boolean;
     children?: Snippet;

package/dist/IIButton/IIButtonStories.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import IIButton from './IIButton.svelte'
-	import IIIcon from '../IIIcon/IIIcon.svelte'
 
 	const variants = ['primary', 'secondary', 'ghost', 'danger', 'success', 'accent'] as const
 	const sizes = ['sm', 'md', 'lg'] as const
@@ -39,52 +38,22 @@
 		<h2 class="text-default-emphasis text-primary mb-8">With Icon</h2>
 		<div class="flex items-center gap-8 flex-wrap">
 			{#each variants as variant}
-				<IIButton {variant}>
-					<IIIcon icon="plus" />
-					{variant}
-				</IIButton>
+				<IIButton {variant} iconName="plus">{variant}</IIButton>
 			{/each}
 		</div>
 		<div class="flex items-center gap-8 flex-wrap mt-8">
-			<IIButton variant="primary" size="sm"><IIIcon icon="magnifying-glass" />Search</IIButton>
-			<IIButton variant="primary" size="md"><IIIcon icon="upload-simple" />Upload</IIButton>
-			<IIButton variant="primary" size="lg"><IIIcon icon="paper-plane-tilt" />Send</IIButton>
+			<IIButton variant="primary" size="sm" iconName="magnifying-glass">Search</IIButton>
+			<IIButton variant="primary" size="md" iconName="upload-simple">Upload</IIButton>
+			<IIButton variant="primary" size="lg" iconName="paper-plane-tilt">Send</IIButton>
 		</div>
 		<div class="flex items-center gap-8 flex-wrap mt-8">
-			<IIButton variant="danger"><IIIcon icon="trash" />Delete</IIButton>
-			<IIButton variant="success"><IIIcon icon="check" />Confirm</IIButton>
-			<IIButton variant="secondary"><IIIcon icon="pencil-simple" />Edit</IIButton>
-			<IIButton variant="ghost"><IIIcon icon="gear" />Settings</IIButton>
+			<IIButton variant="danger" iconName="trash">Delete</IIButton>
+			<IIButton variant="success" iconName="check">Confirm</IIButton>
+			<IIButton variant="secondary" iconName="pencil-simple">Edit</IIButton>
+			<IIButton variant="ghost" iconName="gear">Settings</IIButton>
 		</div>
 	</section>
 
-	<!-- Icon Only -->
-	<section>
-		<h2 class="text-default-emphasis text-primary mb-8">Icon Only</h2>
-		<table class="border-collapse">
-			<thead>
-				<tr>
-					<th class="text-left text-tiny text-secondary pr-16 pb-8"></th>
-					{#each sizes as size}
-						<th class="text-left text-tiny text-secondary px-8 pb-8">{size}</th>
-					{/each}
-				</tr>
-			</thead>
-			<tbody>
-				{#each variants as variant}
-					<tr>
-						<td class="text-tiny text-secondary pr-16 py-8 align-middle">{variant}</td>
-						{#each sizes as size}
-							<td class="px-8 py-8">
-								<IIButton {variant} {size} iconOnly><IIIcon icon="plus" /></IIButton>
-							</td>
-						{/each}
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</section>
-
 	<!-- Disabled -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>

package/dist/IICheckbox/IICheckbox.svelte

@@ -50,7 +50,7 @@
 			)}
 		>
 			{#if checked}
-				<IIIcon icon="check" class={size === 'sm' ? 'w-12 h-12 text-white' : 'w-14 h-14 text-white'} />
+				<IIIcon iconName="check" class={size === 'sm' ? 'w-12 h-12 text-white' : 'w-14 h-14 text-white'} />
 			{/if}
 		</div>
 	</Checkbox.Root>

package/dist/IICombobox/IICombobox.svelte

@@ -137,12 +137,12 @@
 								{:else if isSimpleItem(item)}
 									<span class="flex-1">{item.label}</span>
 									{#if selected}
-										<IIIcon icon="check" class="w-18 h-18 shrink-0 ml-auto" />
+										<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
 									{/if}
 								{:else}
 									<span class="flex-1">{getItemValue(item)}</span>
 									{#if selected}
-										<IIIcon icon="check" class="w-18 h-18 shrink-0 ml-auto" />
+										<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
 									{/if}
 								{/if}
 							{/snippet}

package/dist/IIDatePicker/IIDatePicker.svelte

@@ -32,7 +32,7 @@
 				<DatePicker.Trigger
 					class="[all:unset] flex items-center justify-center p-4 ml-auto rounded-4 cursor-default text-secondary transition-all duration-fast hover:bg-gray-100 hover:text-body [&_svg]:w-11 [&_svg]:h-11 motion-reduce:transition-none"
 				>
-					<IIIcon icon="calendar" />
+					<IIIcon iconName="calendar" />
 				</DatePicker.Trigger>
 			{/snippet}
 		</DatePicker.Input>

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -61,7 +61,7 @@
 		<span class={cn('text-small', value !== undefined ? 'text-input-text' : 'text-input-placeholder')}
 			>{selectedLabel}</span
 		>
-		<IIIcon icon="caret-down" class="w-14 h-14 text-secondary shrink-0" />
+		<IIIcon iconName="caret-down" class="w-14 h-14 text-secondary shrink-0" />
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Portal>
 		<DropdownMenu.Content
@@ -86,7 +86,7 @@
 							>
 								<span>{item.label}</span>
 								{#if value === item.value}
-									<IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
+									<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -38,7 +38,7 @@
 		{#if children}
 			{@render children()}
 		{:else}
-			<IIIcon icon="dots-three-vertical" />
+			<IIIcon iconName="dots-three-vertical" />
 		{/if}
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Portal>

package/dist/IIEditableBadges/IIEditableBadges.svelte

@@ -81,7 +81,7 @@
 					>
 						<span class="flex-1 text-left">{item.label}</span>
 						{#if isSelected}
-							<IIIcon icon="check" class="w-11 h-11 text-accent ml-8 shrink-0" />
+							<IIIcon iconName="check" class="w-11 h-11 text-accent ml-8 shrink-0" />
 						{/if}
 					</button>
 				{/each}

package/dist/IIFilterChip/IIFilterChip.svelte

@@ -42,6 +42,6 @@
 		onclick={onRemove}
 		aria-label="Remove filter"
 	>
-		<IIIcon icon="x" />
+		<IIIcon iconName="x" />
 	</button>
 </span>

package/dist/IIIcon/IIIcon.svelte

@@ -2,12 +2,12 @@
 	import {icons, type IconName} from '../icons'
 
 	interface Props {
-		icon: IconName
+		iconName: IconName
 		class?: string
 		[key: string]: unknown
 	}
 
-	let {icon, class: className = '', ...rest}: Props = $props()
+	let {iconName, class: className = '', ...rest}: Props = $props()
 </script>
 
 <svg
@@ -19,5 +19,5 @@
 	class={className}
 	{...rest}
 >
-	{@html icons[icon]}
+	{@html icons[iconName]}
 </svg>

package/dist/IIIcon/IIIcon.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type IconName } from '../icons';
 interface Props {
-    icon: IconName;
+    iconName: IconName;
     class?: string;
     [key: string]: unknown;
 }

package/dist/IIIconButton/IIIconButton.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type {HTMLButtonAttributes} from 'svelte/elements'
+	import type {IconName} from '../icons'
+	import IIIcon from '../IIIcon/IIIcon.svelte'
+	import {cn} from '../utils/cn'
+
+	type Props = Omit<HTMLButtonAttributes, 'disabled'> & {
+		iconName: IconName
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
+		size?: 'sm' | 'md' | 'lg'
+		loading?: boolean
+		disabled?: boolean
+		class?: string
+		ref?: HTMLButtonElement
+	}
+
+	let {
+		iconName,
+		variant = 'ghost',
+		size = 'md',
+		loading = false,
+		disabled = false,
+		class: className,
+		ref = $bindable(),
+		...restProps
+	}: Props = $props()
+
+	const isDisabled = $derived(disabled || loading)
+
+	const baseClasses =
+		'inline-flex items-center justify-center rounded-6 cursor-default transition-colors duration-base ease-in-out disabled:cursor-not-allowed'
+
+	const variantClasses = {
+		primary:
+			'bg-button-primary text-button-primary border-0 hover:bg-button-primary-hover disabled:bg-button-primary-disabled',
+		secondary:
+			'bg-button-secondary text-button-secondary border border-button-secondary hover:text-button-secondary-hover hover:border-button-secondary-hover disabled:opacity-50',
+		ghost: 'text-button-ghost border-0 hover:bg-button-ghost-hover hover:text-button-ghost-hover disabled:opacity-50',
+		danger:
+			'bg-button-danger text-button-danger border-0 hover:bg-button-danger-hover disabled:bg-button-danger-disabled',
+		success:
+			'bg-button-success text-button-success border-0 hover:bg-button-success-hover disabled:bg-button-success-disabled',
+		accent:
+			'bg-button-accent text-button-accent border-0 hover:bg-button-accent-hover disabled:bg-button-accent-disabled',
+	} as const
+
+	const sizeClasses = {
+		sm: 'w-24 h-24 p-0',
+		md: 'w-28 h-28 p-0',
+		lg: 'w-32 h-32 p-0',
+	} as const
+
+	const iconSizeClasses = {
+		sm: 'w-12 h-12',
+		md: 'w-14 h-14',
+		lg: 'w-16 h-16',
+	} as const
+</script>
+
+<button
+	bind:this={ref}
+	disabled={isDisabled}
+	class={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
+	{...restProps}
+>
+	{#if loading}
+		<span
+			class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
+		></span>
+	{:else}
+		<IIIcon {iconName} class={iconSizeClasses[size]} />
+	{/if}
+</button>

package/dist/IIIconButton/IIIconButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { IconName } from '../icons';
+type Props = Omit<HTMLButtonAttributes, 'disabled'> & {
+    iconName: IconName;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    disabled?: boolean;
+    class?: string;
+    ref?: HTMLButtonElement;
+};
+declare const IIIconButton: import("svelte").Component<Props, {}, "ref">;
+type IIIconButton = ReturnType<typeof IIIconButton>;
+export default IIIconButton;

package/dist/IIIconButton/IIIconButtonStories.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import IIIconButton from './IIIconButton.svelte'
+
+	const variants = ['primary', 'secondary', 'ghost', 'danger', 'success', 'accent'] as const
+	const sizes = ['sm', 'md', 'lg'] as const
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Variants × Sizes matrix -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Variants × Sizes</h2>
+		<table class="border-collapse">
+			<thead>
+				<tr>
+					<th class="text-left text-tiny text-secondary pr-16 pb-8"></th>
+					{#each sizes as size}
+						<th class="text-left text-tiny text-secondary px-8 pb-8">{size}</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each variants as variant}
+					<tr>
+						<td class="text-tiny text-secondary pr-16 py-8 align-middle">{variant}</td>
+						{#each sizes as size}
+							<td class="px-8 py-8">
+								<IIIconButton iconName="plus" {variant} {size} />
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</section>
+
+	<!-- Different Icons -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Common Icons</h2>
+		<div class="flex items-center gap-8">
+			<IIIconButton iconName="plus" variant="ghost" />
+			<IIIconButton iconName="x" variant="ghost" />
+			<IIIconButton iconName="pencil-simple" variant="ghost" />
+			<IIIconButton iconName="trash" variant="ghost" />
+			<IIIconButton iconName="magnifying-glass" variant="ghost" />
+			<IIIconButton iconName="gear" variant="ghost" />
+			<IIIconButton iconName="dots-three-vertical" variant="ghost" />
+			<IIIconButton iconName="funnel" variant="ghost" />
+			<IIIconButton iconName="sort-ascending" variant="ghost" />
+		</div>
+	</section>
+
+	<!-- Disabled -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>
+		<div class="flex items-center gap-8">
+			{#each variants as variant}
+				<IIIconButton iconName="plus" {variant} disabled />
+			{/each}
+		</div>
+	</section>
+
+	<!-- Loading -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Loading</h2>
+		<div class="flex items-center gap-8">
+			{#each variants as variant}
+				<IIIconButton iconName="plus" {variant} loading />
+			{/each}
+		</div>
+	</section>
+</div>

package/dist/IIIconButton/IIIconButtonStories.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const IIIconButtonStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIIconButtonStories = InstanceType<typeof IIIconButtonStories>;
+export default IIIconButtonStories;

package/dist/IIIconButton/index.d.ts

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

package/dist/IIIconButton/index.js

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

package/dist/IIModal/IIModal.svelte

@@ -59,7 +59,7 @@
 					<Dialog.Close
 						class="[all:unset] cursor-default flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body motion-reduce:transition-none"
 					>
-						<IIIcon icon="x" class="size-20" />
+						<IIIcon iconName="x" class="size-20" />
 					</Dialog.Close>
 				{/if}
 			</div>

package/dist/IIOverflowActions/IIOverflowActions.svelte

@@ -69,7 +69,7 @@
 			<DropdownMenu.Trigger
 				class="[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none"
 			>
-				<IIIcon icon="dots-three-vertical" />
+				<IIIcon iconName="dots-three-vertical" />
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
 				class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"

package/dist/IIStepper/IIStepper.svelte

@@ -51,7 +51,7 @@
 				)}
 			>
 				{#if isCompleted}
-					<IIIcon icon="check" class="size-14" />
+					<IIIcon iconName="check" class="size-14" />
 				{:else}
 					{i + 1}
 				{/if}

package/dist/IITabs/IITabs.svelte

@@ -72,7 +72,7 @@
 					class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-10 bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
 				>
 					<span class="text-small-emphasis text-body">{activeLabel}</span>
-					<IIIcon icon="caret-down" class="w-14 h-14 text-secondary shrink-0" />
+					<IIIcon iconName="caret-down" class="w-14 h-14 text-secondary shrink-0" />
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content
 					class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"
@@ -90,7 +90,7 @@
 						>
 							<span>{tab.label}</span>
 							{#if value === tab.value}
-								<IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
+								<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
 							{/if}
 						</DropdownMenu.Item>
 					{/each}

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { IIEmptyState } from './IIEmptyState';
 export { IIFilterChip } from './IIFilterChip';
 export { IIFormField } from './IIFormField';
 export { IIIcon } from './IIIcon';
+export { IIIconButton } from './IIIconButton';
 export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIOverflowActions } from './IIOverflowActions';

package/dist/index.js

@@ -19,6 +19,7 @@ export { IIEmptyState } from './IIEmptyState';
 export { IIFilterChip } from './IIFilterChip';
 export { IIFormField } from './IIFormField';
 export { IIIcon } from './IIIcon';
+export { IIIconButton } from './IIIconButton';
 export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIOverflowActions } from './IIOverflowActions';

package/dist/style/colors.css

@@ -82,8 +82,47 @@
 	--color-dropdown-item-text: var(--ii-text-primary);
 	--color-dropdown-item-text-selected: var(--ii-text-primary);
 
-	/* Buttons */
-	--ii-button-ghost-hover: #eef0f3;
+	/* Buttons — primary */
+	--color-button-primary-bg: var(--ii-primary);
+	--color-button-primary-bg-hover: var(--ii-primary-hover);
+	--color-button-primary-bg-disabled: var(--ii-border-strong);
+	--color-button-primary-text: var(--ii-text-inverse);
+	--color-button-primary-text-disabled: var(--ii-text-tertiary);
+
+	/* Buttons — secondary */
+	--color-button-secondary-bg: var(--ii-surface);
+	--color-button-secondary-text: #4b5563;
+	--color-button-secondary-text-hover: #1f2937;
+	--color-button-secondary-text-disabled: var(--ii-text-tertiary);
+	--color-button-secondary-border: var(--ii-border);
+	--color-button-secondary-border-hover: var(--ii-border-strong);
+
+	/* Buttons — ghost */
+	--color-button-ghost-bg-hover: #eef0f3;
+	--color-button-ghost-text: #6b7280;
+	--color-button-ghost-text-hover: #111827;
+	--color-button-ghost-text-disabled: var(--ii-text-tertiary);
+
+	/* Buttons — danger */
+	--color-button-danger-bg: var(--ii-error);
+	--color-button-danger-bg-hover: var(--ii-error-text);
+	--color-button-danger-bg-disabled: var(--ii-border-strong);
+	--color-button-danger-text: var(--ii-text-inverse);
+	--color-button-danger-text-disabled: var(--ii-text-tertiary);
+
+	/* Buttons — success */
+	--color-button-success-bg: var(--ii-success);
+	--color-button-success-bg-hover: var(--ii-success-text);
+	--color-button-success-bg-disabled: var(--ii-border-strong);
+	--color-button-success-text: var(--ii-text-inverse);
+	--color-button-success-text-disabled: var(--ii-text-tertiary);
+
+	/* Buttons — accent */
+	--color-button-accent-bg: var(--ii-accent);
+	--color-button-accent-bg-hover: var(--ii-accent-hover);
+	--color-button-accent-bg-disabled: var(--ii-border-strong);
+	--color-button-accent-text: var(--ii-text-on-accent);
+	--color-button-accent-text-disabled: var(--ii-text-tertiary);
 
 	/* Badge variants */
 	--ii-badge-grey-bg: rgba(107, 114, 128, 0.1);

package/dist/style/tailwind/colors.d.ts

@@ -60,7 +60,20 @@ export declare const backgroundColor: {
     'dropdown-bg': string;
     'dropdown-item-hover': string;
     'dropdown-item-selected': string;
+    'button-primary': string;
+    'button-primary-hover': string;
+    'button-primary-disabled': string;
+    'button-secondary': string;
     'button-ghost-hover': string;
+    'button-danger': string;
+    'button-danger-hover': string;
+    'button-danger-disabled': string;
+    'button-success': string;
+    'button-success-hover': string;
+    'button-success-disabled': string;
+    'button-accent': string;
+    'button-accent-hover': string;
+    'button-accent-disabled': string;
     overlay: string;
     'overlay-light': string;
     'overlay-heavy': string;
@@ -117,6 +130,20 @@ export declare const textColor: {
     'muted-strong': string;
     accent: string;
     'accent-hover': string;
+    'button-primary': string;
+    'button-primary-disabled': string;
+    'button-secondary': string;
+    'button-secondary-hover': string;
+    'button-secondary-disabled': string;
+    'button-ghost': string;
+    'button-ghost-hover': string;
+    'button-ghost-disabled': string;
+    'button-danger': string;
+    'button-danger-disabled': string;
+    'button-success': string;
+    'button-success-disabled': string;
+    'button-accent': string;
+    'button-accent-disabled': string;
     success: string;
     'success-dark': string;
     'success-dark-alt': string;
@@ -165,6 +192,8 @@ export declare const borderColor: {
     primary: string;
     strong: string;
     subtle: string;
+    'button-secondary': string;
+    'button-secondary-hover': string;
     'input-border': string;
     'input-border-hover': string;
     'input-border-active': string;

package/dist/style/tailwind/colors.js

@@ -90,7 +90,20 @@ export const backgroundColor = {
     'dropdown-item-hover': 'var(--color-dropdown-item-bg-hover)',
     'dropdown-item-selected': 'var(--color-dropdown-item-bg-selected)',
     // Button
-    'button-ghost-hover': 'var(--ii-button-ghost-hover)',
+    'button-primary': 'var(--color-button-primary-bg)',
+    'button-primary-hover': 'var(--color-button-primary-bg-hover)',
+    'button-primary-disabled': 'var(--color-button-primary-bg-disabled)',
+    'button-secondary': 'var(--color-button-secondary-bg)',
+    'button-ghost-hover': 'var(--color-button-ghost-bg-hover)',
+    'button-danger': 'var(--color-button-danger-bg)',
+    'button-danger-hover': 'var(--color-button-danger-bg-hover)',
+    'button-danger-disabled': 'var(--color-button-danger-bg-disabled)',
+    'button-success': 'var(--color-button-success-bg)',
+    'button-success-hover': 'var(--color-button-success-bg-hover)',
+    'button-success-disabled': 'var(--color-button-success-bg-disabled)',
+    'button-accent': 'var(--color-button-accent-bg)',
+    'button-accent-hover': 'var(--color-button-accent-bg-hover)',
+    'button-accent-disabled': 'var(--color-button-accent-bg-disabled)',
     // Overlay
     overlay: 'var(--ii-overlay)',
     'overlay-light': 'var(--ii-overlay-light)',
@@ -146,6 +159,21 @@ export const textColor = {
     // Brand on text (canonical names for new code)
     accent: 'var(--ii-text-primary)',
     'accent-hover': 'var(--ii-primary-hover)',
+    // Button
+    'button-primary': 'var(--color-button-primary-text)',
+    'button-primary-disabled': 'var(--color-button-primary-text-disabled)',
+    'button-secondary': 'var(--color-button-secondary-text)',
+    'button-secondary-hover': 'var(--color-button-secondary-text-hover)',
+    'button-secondary-disabled': 'var(--color-button-secondary-text-disabled)',
+    'button-ghost': 'var(--color-button-ghost-text)',
+    'button-ghost-hover': 'var(--color-button-ghost-text-hover)',
+    'button-ghost-disabled': 'var(--color-button-ghost-text-disabled)',
+    'button-danger': 'var(--color-button-danger-text)',
+    'button-danger-disabled': 'var(--color-button-danger-text-disabled)',
+    'button-success': 'var(--color-button-success-text)',
+    'button-success-disabled': 'var(--color-button-success-text-disabled)',
+    'button-accent': 'var(--color-button-accent-text)',
+    'button-accent-disabled': 'var(--color-button-accent-text-disabled)',
     // Semantic
     success: 'var(--ii-success-text)',
     'success-dark': 'var(--ii-success-dark)',
@@ -189,6 +217,9 @@ export const borderColor = {
     primary: 'var(--ii-border)',
     strong: 'var(--ii-border-strong)',
     subtle: 'var(--ii-border-subtle)',
+    // Button
+    'button-secondary': 'var(--color-button-secondary-border)',
+    'button-secondary-hover': 'var(--color-button-secondary-border-hover)',
     // Input
     'input-border': 'var(--color-input-border)',
     'input-border-hover': 'var(--color-input-border-hover)',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.9",
+	"version": "0.1.10",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {