@insymetri/styleguide 0.1.4 → 0.1.6

package/dist/IIAlert/IIAlert.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+	import type {IconName} from '../icons'
+
+	type Variant = 'error' | 'warning' | 'success' | 'info'
+
+	type Props = {
+		variant?: Variant
+		title?: string
+		children: Snippet
+		dismissible?: boolean
+		onDismiss?: () => void
+		class?: string
+	}
+
+	let {
+		variant = 'info',
+		title,
+		children,
+		dismissible = false,
+		onDismiss,
+		class: className,
+	}: Props = $props()
+
+	let dismissed = $state(false)
+
+	const variantConfig: Record<Variant, {bg: string; border: string; text: string; icon: IconName}> = {
+		error: {bg: 'bg-error-bg', border: 'border-error', text: 'text-error', icon: 'warning-circle'},
+		warning: {bg: 'bg-warning-bg', border: 'border-warning', text: 'text-warning', icon: 'warning'},
+		success: {bg: 'bg-success-bg', border: 'border-success', text: 'text-success', icon: 'check-circle'},
+		info: {bg: 'bg-info-bg', border: 'border-info', text: 'text-info', icon: 'info'},
+	}
+
+	const config = $derived(variantConfig[variant])
+
+	function handleDismiss() {
+		dismissed = true
+		onDismiss?.()
+	}
+</script>
+
+{#if !dismissed}
+	<div
+		class={cn(
+			'flex gap-12 p-12 rounded-8 border',
+			config.bg,
+			config.border,
+			className
+		)}
+		role="alert"
+	>
+		<IIIcon icon={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>
+			{/if}
+			<div class={cn('text-small text-body', title && 'mt-4')}>
+				{@render children()}
+			</div>
+		</div>
+		{#if dismissible}
+			<button
+				type="button"
+				class="shrink-0 p-4 rounded-4 text-secondary hover:bg-hover-overlay transition-colors duration-fast cursor-default"
+				onclick={handleDismiss}
+				aria-label="Dismiss"
+			>
+				<IIIcon icon="x" class="size-16" />
+			</button>
+		{/if}
+	</div>
+{/if}

package/dist/IIAlert/IIAlert.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Variant = 'error' | 'warning' | 'success' | 'info';
+type Props = {
+    variant?: Variant;
+    title?: string;
+    children: Snippet;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    class?: string;
+};
+declare const IIAlert: import("svelte").Component<Props, {}, "">;
+type IIAlert = ReturnType<typeof IIAlert>;
+export default IIAlert;

package/dist/IIAlert/index.d.ts

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

package/dist/IIAlert/index.js

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

package/dist/IIButton/IIButton.svelte

@@ -4,7 +4,7 @@
 	import {cn} from '../utils/cn'
 
 	type BaseProps = {
-		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success'
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
 		size?: 'sm' | 'md' | 'lg'
 		iconOnly?: boolean
 		loading?: boolean
@@ -47,6 +47,7 @@
 		ghost: 'bg-transparent 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',
 	} as const
 
 	const sizeClasses = {

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

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

package/dist/IICard/IICard.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		variant?: 'default' | 'outlined' | 'elevated'
+		padding?: 'none' | 'sm' | 'md' | 'lg'
+		hoverable?: boolean
+		children: Snippet
+		header?: Snippet
+		footer?: Snippet
+		class?: string
+	}
+
+	let {
+		variant = 'default',
+		padding = 'md',
+		hoverable = false,
+		children,
+		header,
+		footer,
+		class: className,
+	}: Props = $props()
+
+	const variantClasses = {
+		default: 'bg-surface border border-primary',
+		outlined: 'bg-transparent border border-strong',
+		elevated: 'bg-surface shadow-card',
+	} as const
+
+	const paddingClasses = {
+		none: '',
+		sm: 'p-12',
+		md: 'p-16',
+		lg: 'p-24',
+	} as const
+</script>
+
+<div
+	class={cn(
+		'rounded-12',
+		variantClasses[variant],
+		hoverable && 'transition-shadow duration-fast hover:shadow-card-hover cursor-default',
+		className
+	)}
+>
+	{#if header}
+		<div class={cn('border-b border-primary', paddingClasses[padding])}>
+			{@render header()}
+		</div>
+	{/if}
+	<div class={paddingClasses[padding]}>
+		{@render children()}
+	</div>
+	{#if footer}
+		<div class={cn('border-t border-primary', paddingClasses[padding])}>
+			{@render footer()}
+		</div>
+	{/if}
+</div>

package/dist/IICard/IICard.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    variant?: 'default' | 'outlined' | 'elevated';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    class?: string;
+};
+declare const IICard: import("svelte").Component<Props, {}, "">;
+type IICard = ReturnType<typeof IICard>;
+export default IICard;

package/dist/IICard/index.d.ts

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

package/dist/IICard/index.js

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

package/dist/IIInput/IIInput.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+	import type {Snippet} from 'svelte'
 	import type {HTMLInputAttributes} from 'svelte/elements'
 	import {cn} from '../utils/cn'
 
-	type Props = HTMLInputAttributes & {
+	type Props = Omit<HTMLInputAttributes, 'prefix'> & {
 		label?: string
 		errorMessage?: string
 		helperText?: string
@@ -12,6 +13,8 @@
 		value?: string | number
 		ref?: HTMLInputElement
 		class?: string
+		prefix?: Snippet
+		suffix?: Snippet
 	}
 
 	let {
@@ -24,10 +27,13 @@
 		value = $bindable(),
 		ref = $bindable(),
 		class: className,
+		prefix,
+		suffix,
 		...restProps
 	}: Props = $props()
 
 	const showError = $derived(error || !!errorMessage)
+	const hasAddons = $derived(!!prefix || !!suffix)
 	let shouldShake = $state(false)
 	let prevShowError = $state(false)
 
@@ -49,18 +55,48 @@
 			{label}
 		</label>
 	{/if}
-	<input
-		bind:this={ref}
-		bind:value
-		{type}
-		{disabled}
-		class={cn(
-			'py-6 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-10 transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
-			showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
-			shouldShake && 'animate-shake'
-		)}
-		{...restProps}
-	/>
+	{#if hasAddons}
+		<div
+			class={cn(
+				'flex items-center bg-input-bg border border-input-border rounded-10 transition-all duration-fast hover:border-input-border-hover focus-within:border-input-border-hover motion-reduce:transition-none',
+				showError && 'border-input-border-error focus-within:border-input-border-error',
+				shouldShake && 'animate-shake',
+				disabled && 'bg-input-bg-disabled cursor-not-allowed'
+			)}
+		>
+			{#if prefix}
+				<span class="flex items-center pl-12 text-secondary shrink-0">
+					{@render prefix()}
+				</span>
+			{/if}
+			<input
+				bind:this={ref}
+				bind:value
+				{type}
+				{disabled}
+				class="py-6 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-transparent border-0 outline-none w-full box-border placeholder:text-input-placeholder disabled:text-input-text-disabled disabled:cursor-not-allowed"
+				{...restProps}
+			/>
+			{#if suffix}
+				<span class="flex items-center pr-12 text-secondary shrink-0">
+					{@render suffix()}
+				</span>
+			{/if}
+		</div>
+	{:else}
+		<input
+			bind:this={ref}
+			bind:value
+			{type}
+			{disabled}
+			class={cn(
+				'py-6 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-10 transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
+				showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
+				shouldShake && 'animate-shake'
+			)}
+			{...restProps}
+		/>
+	{/if}
 	{#if showError && errorMessage}
 		<span class="text-tiny text-error">{errorMessage}</span>
 	{:else if helperText}

package/dist/IIInput/IIInput.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = HTMLInputAttributes & {
+type Props = Omit<HTMLInputAttributes, 'prefix'> & {
     label?: string;
     errorMessage?: string;
     helperText?: string;
@@ -9,6 +10,8 @@ type Props = HTMLInputAttributes & {
     value?: string | number;
     ref?: HTMLInputElement;
     class?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
 };
 declare const IIInput: import("svelte").Component<Props, {}, "value" | "ref">;
 type IIInput = ReturnType<typeof IIInput>;

package/dist/IISpinner/IISpinner.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		size?: 'sm' | 'md' | 'lg'
+		class?: string
+	}
+
+	let {size = 'md', class: className}: Props = $props()
+
+	const sizeClasses = {
+		sm: 'w-16 h-16 border-2',
+		md: 'w-24 h-24 border-2',
+		lg: 'w-36 h-36 border-3',
+	} as const
+</script>
+
+<span
+	class={cn(
+		'inline-block rounded-full border-primary border-r-transparent animate-spin motion-reduce:animate-none',
+		sizeClasses[size],
+		className
+	)}
+	role="status"
+	aria-label="Loading"
+></span>

package/dist/IISpinner/IISpinner.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const IISpinner: import("svelte").Component<Props, {}, "">;
+type IISpinner = ReturnType<typeof IISpinner>;
+export default IISpinner;

package/dist/IISpinner/index.d.ts

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

package/dist/IISpinner/index.js

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

package/dist/IIStepper/IIStepper.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+
+	type Step = {
+		label: string
+		description?: string
+	}
+
+	type Props = {
+		steps: Step[]
+		currentStep: number
+		onStepClick?: (index: number) => void
+		class?: string
+	}
+
+	let {steps, currentStep, onStepClick, class: className}: Props = $props()
+</script>
+
+<nav class={cn('flex items-center w-full', className)} aria-label="Progress">
+	{#each steps as step, i}
+		{@const isCompleted = i < currentStep}
+		{@const isActive = i === currentStep}
+		{@const isClickable = !!onStepClick && (isCompleted || isActive)}
+
+		{#if i > 0}
+			<div
+				class={cn(
+					'flex-auto h-[2px] mx-8',
+					isCompleted ? 'bg-primary' : 'bg-muted'
+				)}
+			></div>
+		{/if}
+
+		<button
+			type="button"
+			class={cn(
+				'flex items-center gap-8 shrink-0',
+				isClickable ? 'cursor-default' : 'cursor-default pointer-events-none'
+			)}
+			disabled={!isClickable}
+			onclick={() => onStepClick?.(i)}
+			aria-current={isActive ? 'step' : undefined}
+		>
+			<span
+				class={cn(
+					'flex items-center justify-center w-28 h-28 rounded-full text-tiny-emphasis transition-colors duration-fast',
+					isCompleted && 'bg-primary text-inverse',
+					isActive && 'bg-primary text-inverse',
+					!isCompleted && !isActive && 'bg-muted text-secondary'
+				)}
+			>
+				{#if isCompleted}
+					<IIIcon icon="check" class="size-14" />
+				{:else}
+					{i + 1}
+				{/if}
+			</span>
+			<span
+				class={cn(
+					'text-small hidden sm:block',
+					isActive && 'text-body font-medium',
+					isCompleted && 'text-body',
+					!isCompleted && !isActive && 'text-secondary'
+				)}
+			>
+				{step.label}
+			</span>
+		</button>
+	{/each}
+</nav>

package/dist/IIStepper/IIStepper.svelte.d.ts

@@ -0,0 +1,13 @@
+type Step = {
+    label: string;
+    description?: string;
+};
+type Props = {
+    steps: Step[];
+    currentStep: number;
+    onStepClick?: (index: number) => void;
+    class?: string;
+};
+declare const IIStepper: import("svelte").Component<Props, {}, "">;
+type IIStepper = ReturnType<typeof IIStepper>;
+export default IIStepper;

package/dist/IIStepper/index.d.ts

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

package/dist/IIStepper/index.js

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

package/dist/icons.d.ts

@@ -66,6 +66,7 @@ export declare const icons: {
     readonly 'dots-three-vertical': "<path fill=\"currentColor\" d=\"M140 128a12 12 0 1 1-12-12a12 12 0 0 1 12 12m-12-56a12 12 0 1 0-12-12a12 12 0 0 0 12 12m0 112a12 12 0 1 0 12 12a12 12 0 0 0-12-12\"/>";
     readonly trash: "<path fill=\"currentColor\" d=\"M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0\"/>";
     readonly circle: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88\"/>";
+    readonly info: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-40a8 8 0 0 1 0-16a8 8 0 0 1 8 8v40a8 8 0 0 1 8 8M116 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"/>";
     readonly 'warning-circle': "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12\"/>";
     readonly warning: "<path fill=\"currentColor\" d=\"M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12\"/>";
     readonly gavel: "<path fill=\"currentColor\" d=\"m243.32 116.69l-16-16a16 16 0 0 0-20.84-1.53l-49.64-49.64a16 16 0 0 0-1.52-20.84l-16-16a16 16 0 0 0-22.63 0l-64 64a16 16 0 0 0 0 22.63l16 16a16 16 0 0 0 20.83 1.52l7.17 7.17l-65.38 65.38a25 25 0 0 0 35.32 35.32L132 159.32l7.17 7.16a16 16 0 0 0 1.52 20.84l16 16a16 16 0 0 0 22.63 0l64-64a16 16 0 0 0 0-22.63M80 104L64 88l64-64l16 16ZM55.32 213.38a9 9 0 0 1-12.69 0a9 9 0 0 1 0-12.68L108 135.32L120.69 148ZM101 105.66L145.66 61L195 110.34L150.35 155ZM168 192l-16-16l4-4l56-56l4-4l16 16Z\"/>";

package/dist/icons.js

@@ -74,6 +74,7 @@ export const icons = {
     'trash': `<path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0"/>`,
     'circle': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88"/>`,
     // Status & Feedback
+    'info': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-40a8 8 0 0 1 0-16a8 8 0 0 1 8 8v40a8 8 0 0 1 8 8M116 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/>`,
     'warning-circle': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/>`,
     'warning': `<path fill="currentColor" d="M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/>`,
     // Legal & Auth

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { IIActionGroup } from './IIActionGroup';
+export { IIAlert } from './IIAlert';
 export { IIAsyncState } from './IIAsyncState';
 export { IIAuditTrail } from './IIAuditTrail';
 export { IIBadge } from './IIBadge';
 export { IIButton } from './IIButton';
+export { IICard } from './IICard';
 export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
@@ -18,7 +20,9 @@ export { IIIcon } from './IIIcon';
 export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIOverflowActions } from './IIOverflowActions';
+export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';
+export { IIStepper } from './IIStepper';
 export { IISwitch } from './IISwitch';
 export { IITable } from './IITable';
 export { IITableSkeleton } from './IITableSkeleton';
@@ -33,3 +37,4 @@ export { toast } from './toast';
 export { cn } from './utils/cn';
 export { icons } from './icons';
 export type { IconName } from './icons';
+export { preset, twPreset } from './style';

package/dist/index.js

@@ -1,10 +1,12 @@
 // @insymetri/styleguide
 // Components
 export { IIActionGroup } from './IIActionGroup';
+export { IIAlert } from './IIAlert';
 export { IIAsyncState } from './IIAsyncState';
 export { IIAuditTrail } from './IIAuditTrail';
 export { IIBadge } from './IIBadge';
 export { IIButton } from './IIButton';
+export { IICard } from './IICard';
 export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
@@ -20,7 +22,9 @@ export { IIIcon } from './IIIcon';
 export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIOverflowActions } from './IIOverflowActions';
+export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';
+export { IIStepper } from './IIStepper';
 export { IISwitch } from './IISwitch';
 export { IITable } from './IITable';
 export { IITableSkeleton } from './IITableSkeleton';
@@ -34,3 +38,5 @@ export { toast } from './toast';
 export { cn } from './utils/cn';
 // Icons
 export { icons } from './icons';
+// Style
+export { preset, twPreset } from './style';

package/dist/style/colors.css

@@ -5,6 +5,11 @@
 	/* Brand */
 	--ii-primary: #1173d4;
 	--ii-primary-hover: #0f5bb6;
+	--ii-accent: #ee7034;
+	--ii-accent-hover: #d4632e;
+	--ii-secondary: #0891b2;
+	--ii-text-on-primary: #ffffff;
+	--ii-text-on-accent: #ffffff;
 
 	/* Grayscale */
 	--ii-gray-50: #f9fafb;

package/dist/style/index.d.ts

@@ -1 +1 @@
-export { default as preset } from './tailwind/preset';
+export { default as preset, default as twPreset } from './tailwind/preset';

package/dist/style/index.js

@@ -1 +1 @@
-export { default as preset } from './tailwind/preset';
+export { default as preset, default as twPreset } from './tailwind/preset';

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

@@ -1,6 +1,9 @@
 export declare const backgroundColor: {
     primary: string;
     'primary-hover': string;
+    accent: string;
+    'accent-hover': string;
+    secondary: string;
     'primary-2': string;
     'primary-5': string;
     'primary-8': string;
@@ -107,6 +110,8 @@ export declare const textColor: {
     secondary: string;
     tertiary: string;
     inverse: string;
+    'on-primary': string;
+    'on-accent': string;
     surface: string;
     muted: string;
     'muted-strong': string;

package/dist/style/tailwind/colors.js

@@ -23,6 +23,9 @@ export const backgroundColor = {
     // Brand
     primary: 'var(--ii-primary)',
     'primary-hover': 'var(--ii-primary-hover)',
+    accent: 'var(--ii-accent)',
+    'accent-hover': 'var(--ii-accent-hover)',
+    secondary: 'var(--ii-secondary)',
     'primary-2': 'var(--ii-primary-2)',
     'primary-5': 'var(--ii-primary-5)',
     'primary-8': 'var(--ii-primary-8)',
@@ -135,6 +138,8 @@ export const textColor = {
     secondary: 'var(--ii-text-secondary)',
     tertiary: 'var(--ii-text-tertiary)',
     inverse: 'var(--ii-text-inverse)',
+    'on-primary': 'var(--ii-text-on-primary)',
+    'on-accent': 'var(--ii-text-on-accent)',
     surface: 'var(--ii-surface)', // white text on dark backgrounds
     muted: 'var(--ii-border)', // very light gray (decorative separators, bullets)
     'muted-strong': 'var(--ii-border-strong)', // slightly darker muted text

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {
@@ -21,6 +21,7 @@
 			"types": "./dist/style/index.d.ts",
 			"default": "./dist/style/index.js"
 		},
+		"./global.css": "./dist/style/global.css",
 		"./style/*.css": "./dist/style/*.css",
 		"./icons": {
 			"types": "./dist/icons.d.ts",