@insymetri/styleguide 0.1.0

package/dist/IIActionGroup/IIActionGroup.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	type Props = {
+		children?: import('svelte').Snippet
+	}
+
+	let {children}: Props = $props()
+</script>
+
+<div class="flex gap-8">
+	{@render children?.()}
+</div>

package/dist/IIActionGroup/IIActionGroup.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    children?: import('svelte').Snippet;
+};
+declare const IIActionGroup: import("svelte").Component<Props, {}, "">;
+type IIActionGroup = ReturnType<typeof IIActionGroup>;
+export default IIActionGroup;

package/dist/IIActionGroup/index.d.ts

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

package/dist/IIActionGroup/index.js

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

package/dist/IIAsyncState/IIAsyncState.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+
+	type Props = {
+		data: unknown
+		isLoading: boolean
+		isError?: boolean
+		error?: Error | null
+		loadingMessage?: string
+		errorMessage?: string
+		notFoundTitle?: string
+		notFoundMessage?: string
+		skeleton?: Snippet
+		children: Snippet<[data: NonNullable<typeof data>]>
+	}
+
+	let {
+		data,
+		isLoading,
+		isError = false,
+		error = null,
+		loadingMessage = 'Loading...',
+		errorMessage,
+		notFoundTitle = 'Not Found',
+		notFoundMessage = 'The requested resource could not be found.',
+		skeleton,
+		children,
+	}: Props = $props()
+</script>
+
+{#if isLoading}
+	{#if skeleton}
+		{@render skeleton()}
+	{:else}
+		<div class="p-32 text-center bg-surface border border-primary rounded-10">
+			<p class="text-secondary m-0">{loadingMessage}</p>
+		</div>
+	{/if}
+{:else if isError}
+	<div class="p-32 text-center bg-surface border border-primary rounded-10">
+		<p class="text-error m-0">{errorMessage ?? error?.message ?? 'An error occurred'}</p>
+	</div>
+{:else if !data}
+	<div class="p-32 text-center bg-surface border border-primary rounded-10">
+		<h3 class="text-h3 text-body m-0 mb-8">{notFoundTitle}</h3>
+		<p class="text-secondary m-0">{notFoundMessage}</p>
+	</div>
+{:else}
+	{@render children(data)}
+{/if}

package/dist/IIAsyncState/IIAsyncState.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+declare const IIAsyncState: import("svelte").Component<{
+    data: unknown;
+    isLoading: boolean;
+    isError?: boolean;
+    error?: Error | null;
+    loadingMessage?: string;
+    errorMessage?: string;
+    notFoundTitle?: string;
+    notFoundMessage?: string;
+    skeleton?: Snippet;
+    children: Snippet<[data: NonNullable<unknown>]>;
+}, {}, "">;
+type IIAsyncState = ReturnType<typeof IIAsyncState>;
+export default IIAsyncState;

package/dist/IIAsyncState/index.d.ts

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

package/dist/IIAsyncState/index.js

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

package/dist/IIAuditTrail/IIAuditTrail.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type {Component} from 'svelte'
+	import {cn} from '../utils/cn'
+	import {
+		IconPayment,
+		IconDescription,
+		IconAssignment,
+		IconUpdate,
+		IconCall,
+		IconChat,
+		IconMail,
+		IconLogin,
+		IconPerson,
+		IconSms,
+		IconAdd,
+		IconUser,
+		IconCalendar,
+		IconCircle,
+	} from '../icons'
+
+	import type {Severity, AuditEvent, AuditFilter} from './IIAuditTrail.types'
+
+	type Props = {
+		events: AuditEvent[]
+		filters: AuditFilter[]
+		loading?: boolean
+		error?: string | null
+		emptyMessage?: string
+		maxHeight?: string
+	}
+
+	let {events, filters, loading = false, error = null, emptyMessage = 'No activity found', maxHeight}: Props = $props()
+
+	let activeFilter = $state('all')
+
+	const categoryIcons: Record<string, Component> = {
+		payment: IconPayment,
+		document: IconDescription,
+		loan: IconDescription,
+		application: IconAssignment,
+		task: IconAssignment,
+		contact: IconPerson,
+		phone: IconCall,
+		call: IconCall,
+		communication: IconChat,
+		login: IconLogin,
+		email: IconMail,
+		sms: IconSms,
+		created: IconAdd,
+		status: IconUpdate,
+		assignment: IconUser,
+		priority: IconCircle,
+		description: IconDescription,
+		deadline: IconCalendar,
+	}
+
+	function getCategoryIcon(category: string): Component {
+		return categoryIcons[category] || IconUpdate
+	}
+
+	const categorySeverity: Record<string, Severity> = {
+		payment: 'critical',
+		status: 'important',
+		created: 'standard',
+		assignment: 'standard',
+		application: 'standard',
+		loan: 'standard',
+		communication: 'standard',
+		phone: 'standard',
+		email: 'standard',
+		sms: 'standard',
+		contact: 'standard',
+	}
+
+	function getDefaultSeverity(category: string): Severity {
+		return categorySeverity[category] || 'routine'
+	}
+
+	function resolveSeverity(event: AuditEvent): Severity {
+		return event.severity || getDefaultSeverity(event.category)
+	}
+
+	function formatTimestamp(ts: string): string {
+		const date = new Date(ts)
+		return date.toLocaleString('en-US', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit',
+			hour12: true,
+		})
+	}
+
+	const severityClasses: Record<string, {border: string; indicator: string}> = {
+		critical: {border: 'border-l-error', indicator: 'bg-error'},
+		important: {border: 'border-l-warning', indicator: 'bg-warning'},
+		standard: {border: 'border-l-info', indicator: 'bg-info'},
+		routine: {border: 'border-l-gray-400', indicator: 'bg-gray-400'},
+	}
+
+	const filteredEvents = $derived(activeFilter === 'all' ? events : events.filter(e => e.category === activeFilter))
+</script>
+
+{#if filters.length > 0}
+	<div class="flex gap-8 flex-wrap mb-16">
+		{#each filters as f (f.value)}
+			<button
+				class={cn(
+					'flex items-center gap-4 px-12 py-8 rounded-full text-small-emphasis cursor-default',
+					activeFilter === f.value
+						? 'bg-gray-100 text-body border border-strong'
+						: 'bg-surface text-secondary border border-primary hover:bg-gray-100 hover:border-strong'
+				)}
+				onclick={() => (activeFilter = f.value)}
+			>
+				{f.label}
+			</button>
+		{/each}
+	</div>
+{/if}
+
+{#if loading}
+	<div class="px-24 py-24 text-center text-secondary text-small">Loading history...</div>
+{:else if error}
+	<div class="px-24 py-24 text-center text-error text-small">{error}</div>
+{:else if events.length === 0}
+	<div class="px-24 py-24 text-center text-secondary text-small">{emptyMessage}</div>
+{:else}
+	<div class={cn('flex flex-col', maxHeight && 'overflow-y-auto')} style:max-height={maxHeight}>
+		{#each filteredEvents as event (event.id)}
+			{@const EventIcon = getCategoryIcon(event.category)}
+			<div
+				class={cn(
+					'flex gap-12 p-12 border-l-3 border-l-transparent transition-all duration-fast hover:bg-gray-50 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-primary',
+					severityClasses[resolveSeverity(event)]?.border
+				)}
+			>
+				<div class={cn('w-8 h-8 rounded-full shrink-0 mt-8', severityClasses[resolveSeverity(event)]?.indicator)}></div>
+				<div class="flex-1">
+					<div class="flex justify-between items-start mb-4">
+						<div class="flex gap-8 items-start">
+							<span class="text-secondary flex">
+								<EventIcon class="w-20 h-20" />
+							</span>
+							<div class="flex-1">
+								<div class="text-small-emphasis text-body mb-4">{event.description}</div>
+								<div class="flex items-center gap-4 text-tiny text-tertiary">
+									<span>{formatTimestamp(event.timestamp)}</span>
+									<span class="text-muted">•</span>
+									<span class="font-medium">{event.actor}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+					{#if event.details}
+						<div class="mt-8 ml-20 p-8 bg-gray-50 rounded-4 text-tiny text-secondary">
+							{event.details}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<div class="px-24 py-24 text-center text-secondary text-small">{emptyMessage}</div>
+		{/each}
+	</div>
+{/if}

package/dist/IIAuditTrail/IIAuditTrail.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+import type { AuditEvent, AuditFilter } from './IIAuditTrail.types';
+type Props = {
+    events: AuditEvent[];
+    filters: AuditFilter[];
+    loading?: boolean;
+    error?: string | null;
+    emptyMessage?: string;
+    maxHeight?: string;
+};
+declare const IIAuditTrail: Component<Props, {}, "">;
+type IIAuditTrail = ReturnType<typeof IIAuditTrail>;
+export default IIAuditTrail;

package/dist/IIAuditTrail/IIAuditTrail.types.d.ts

@@ -0,0 +1,14 @@
+export type Severity = 'critical' | 'important' | 'standard' | 'routine';
+export type AuditEvent = {
+    id: string;
+    description: string;
+    details?: string | null;
+    timestamp: string;
+    actor: string;
+    severity?: Severity;
+    category: string;
+};
+export type AuditFilter = {
+    value: string;
+    label: string;
+};

package/dist/IIAuditTrail/IIAuditTrail.types.js

@@ -0,0 +1 @@
+export {};

package/dist/IIAuditTrail/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IIAuditTrail } from './IIAuditTrail.svelte';
+export type { AuditEvent, AuditFilter, Severity } from './IIAuditTrail.types';

package/dist/IIAuditTrail/index.js

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

package/dist/IIBadge/IIBadge.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+
+	import {cn} from '../utils/cn'
+
+	import type {BadgeVariant} from './IIBadge.types'
+
+	type Props = {
+		variant?: BadgeVariant
+		size?: 'sm' | 'md'
+		children?: Snippet
+		class?: string
+	}
+
+	let {variant = 'grey', size = 'md', children, class: className}: Props = $props()
+
+	const variantClasses: Record<string, string> = {
+		grey: 'bg-badge-grey text-badge-grey',
+		blue: 'bg-badge-blue text-badge-blue',
+		red: 'bg-badge-red text-badge-red',
+		purple: 'bg-badge-purple text-badge-purple',
+		green: 'bg-badge-green text-badge-green',
+		orange: 'bg-badge-orange text-badge-orange',
+		cyan: 'bg-badge-cyan text-badge-cyan',
+		pink: 'bg-badge-pink text-badge-pink',
+		teal: 'bg-badge-teal text-badge-teal',
+		amber: 'bg-badge-amber text-badge-amber',
+		yellow: 'bg-badge-yellow text-badge-yellow',
+	}
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'px-8 py-4 text-tiny',
+		md: 'px-12 py-4 text-tiny',
+	}
+</script>
+
+<span
+	class={cn(
+		'inline-flex items-center rounded-4 font-medium whitespace-nowrap',
+		sizeClasses[size],
+		variantClasses[variant],
+		className
+	)}
+>
+	{@render children?.()}
+</span>

package/dist/IIBadge/IIBadge.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { BadgeVariant } from './IIBadge.types';
+type Props = {
+    variant?: BadgeVariant;
+    size?: 'sm' | 'md';
+    children?: Snippet;
+    class?: string;
+};
+declare const IIBadge: import("svelte").Component<Props, {}, "">;
+type IIBadge = ReturnType<typeof IIBadge>;
+export default IIBadge;

package/dist/IIBadge/IIBadge.types.d.ts

@@ -0,0 +1 @@
+export type BadgeVariant = 'grey' | 'blue' | 'red' | 'purple' | 'green' | 'orange' | 'cyan' | 'pink' | 'teal' | 'amber' | 'yellow';

package/dist/IIBadge/IIBadge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/IIBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IIBadge } from './IIBadge.svelte';
+export type { BadgeVariant } from './IIBadge.types';

package/dist/IIBadge/index.js

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

package/dist/IIButton/IIButton.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import type {HTMLButtonAttributes, HTMLAnchorAttributes} from 'svelte/elements'
+	import {cn} from '../utils/cn'
+
+	type BaseProps = {
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success'
+		size?: 'sm' | 'md' | 'lg'
+		iconOnly?: boolean
+		loading?: boolean
+		disabled?: boolean
+		children?: Snippet
+		class?: string
+		ref?: HTMLButtonElement | HTMLAnchorElement
+	}
+
+	type ButtonProps = BaseProps & Omit<HTMLButtonAttributes, 'disabled'> & {href?: never}
+	type AnchorProps = BaseProps & HTMLAnchorAttributes & {href: string; type?: never}
+
+	type Props = ButtonProps | AnchorProps
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		iconOnly = false,
+		loading = false,
+		disabled = false,
+		children,
+		class: className,
+		href,
+		ref = $bindable(),
+		...restProps
+	}: Props = $props()
+
+	const isDisabled = $derived(disabled || loading)
+
+	const baseClasses = $derived(
+		cn(
+			'inline-flex items-center justify-center rounded-6 cursor-default transition-all duration-fast no-underline disabled:cursor-not-allowed motion-reduce:transition-none',
+			!iconOnly && 'gap-8 whitespace-nowrap'
+		)
+	)
+
+	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: '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',
+	} as const
+
+	const sizeClasses = {
+		sm: 'py-4 px-8 text-tiny-emphasis h-20',
+		md: 'py-6 px-16 text-small h-28',
+		lg: 'py-10 px-24 text-large h-36',
+	} as const
+
+	const iconOnlySizeClasses = {
+		sm: 'w-24 h-24 p-0 text-small',
+		md: 'w-32 h-32 p-0 text-default',
+		lg: 'w-40 h-40 p-0 text-large',
+	} as const
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		{href}
+		class={cn(
+			baseClasses,
+			variantClasses[variant],
+			iconOnly ? iconOnlySizeClasses[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?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		disabled={isDisabled}
+		class={cn(
+			baseClasses,
+			variantClasses[variant],
+			iconOnly ? iconOnlySizeClasses[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?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+type BaseProps = {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
+    size?: 'sm' | 'md' | 'lg';
+    iconOnly?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLButtonElement | HTMLAnchorElement;
+};
+type ButtonProps = BaseProps & Omit<HTMLButtonAttributes, 'disabled'> & {
+    href?: never;
+};
+type AnchorProps = BaseProps & HTMLAnchorAttributes & {
+    href: string;
+    type?: never;
+};
+type Props = ButtonProps | AnchorProps;
+declare const IIButton: import("svelte").Component<Props, {}, "ref">;
+type IIButton = ReturnType<typeof IIButton>;
+export default IIButton;

package/dist/IIButton/index.d.ts

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

package/dist/IIButton/index.js

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

package/dist/IICheckbox/IICheckbox.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {Checkbox} from 'bits-ui'
+	import {IconCheck} from '../icons'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		checked: boolean
+		onCheckedChange?: (checked: boolean) => void
+		label?: string
+		children?: Snippet
+		disabled?: boolean
+		name?: string
+		value?: string
+		size?: 'sm' | 'md'
+		class?: string
+		[key: string]: unknown
+	}
+
+	let {
+		checked = $bindable(),
+		onCheckedChange,
+		label,
+		children,
+		disabled = false,
+		name,
+		value,
+		size = 'md',
+		class: className,
+		...restProps
+	}: Props = $props()
+</script>
+
+<label class={cn('flex items-center gap-8', className)}>
+	<Checkbox.Root
+		class="peer [all:unset] cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+		{checked}
+		{onCheckedChange}
+		{disabled}
+		{name}
+		{value}
+		{...restProps}
+	>
+		<div
+			class={cn(
+				'flex items-center justify-center border-2 rounded-4 transition-all duration-fast motion-reduce:transition-none',
+				size === 'sm' ? 'w-16 h-16' : 'w-18 h-18',
+				checked ? 'bg-primary border-primary' : 'border-strong bg-surface',
+				disabled && 'opacity-50'
+			)}
+		>
+			{#if checked}
+				<IconCheck class={size === 'sm' ? 'w-12 h-12 text-white' : 'w-14 h-14 text-white'} />
+			{/if}
+		</div>
+	</Checkbox.Root>
+	{#if label}
+		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}
+			>{label}</span
+		>
+	{:else if children}
+		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}>
+			{@render children()}
+		</span>
+	{/if}
+</label>

package/dist/IICheckbox/IICheckbox.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: string;
+    children?: Snippet;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    size?: 'sm' | 'md';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const IICheckbox: import("svelte").Component<Props, {}, "checked">;
+type IICheckbox = ReturnType<typeof IICheckbox>;
+export default IICheckbox;

package/dist/IICheckbox/index.d.ts

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

package/dist/IICheckbox/index.js

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

package/dist/IICheckboxList/IICheckboxList.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	type Props = {
+		maxHeight?: string
+		children?: import('svelte').Snippet
+	}
+
+	let {maxHeight = '300px', children}: Props = $props()
+</script>
+
+<div
+	class="flex flex-col gap-8 overflow-y-auto p-8 border border-primary rounded-4 bg-background"
+	style:max-height={maxHeight}
+>
+	{@render children?.()}
+</div>

package/dist/IICheckboxList/IICheckboxList.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    maxHeight?: string;
+    children?: import('svelte').Snippet;
+};
+declare const IICheckboxList: import("svelte").Component<Props, {}, "">;
+type IICheckboxList = ReturnType<typeof IICheckboxList>;
+export default IICheckboxList;

package/dist/IICheckboxList/index.d.ts

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

package/dist/IICheckboxList/index.js

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