@insymetri/styleguide 0.1.0

package/dist/IIEditableText/IIEditableText.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		value: string
+		displayValue?: string
+		onSave: (newValue: string) => Promise<void>
+		multiline?: boolean
+		placeholder?: string
+		disabled?: boolean
+		maxLength?: number
+	}
+
+	let {value, displayValue, onSave, multiline = false, placeholder = '', disabled = false, maxLength}: Props = $props()
+
+	let isEditing = $state(false)
+	let isSaving = $state(false)
+	let editValue = $state(value)
+	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement | null>(null)
+	let hasError = $state(false)
+
+	function startEditing() {
+		if (disabled || isSaving) return
+		editValue = value
+		isEditing = true
+		hasError = false
+		// Focus after DOM updates
+		setTimeout(() => {
+			inputElement?.focus()
+			inputElement?.select()
+		}, 0)
+	}
+
+	function cancelEditing() {
+		isEditing = false
+		editValue = value
+		hasError = false
+	}
+
+	async function saveEditing() {
+		const trimmedValue = editValue.trim()
+
+		// Don't save if unchanged or empty
+		if (trimmedValue === value) {
+			cancelEditing()
+			return
+		}
+
+		if (!trimmedValue) {
+			hasError = true
+			return
+		}
+
+		try {
+			isSaving = true
+			hasError = false
+			await onSave(trimmedValue)
+			isEditing = false
+		} catch {
+			hasError = true
+		} finally {
+			isSaving = false
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault()
+			cancelEditing()
+		} else if (e.key === 'Enter' && !multiline) {
+			e.preventDefault()
+			saveEditing()
+		} else if (e.key === 'Enter' && multiline && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault()
+			saveEditing()
+		}
+	}
+
+	function handleBlur() {
+		// Small delay to allow click events to process first
+		setTimeout(() => {
+			if (isEditing && !isSaving) {
+				saveEditing()
+			}
+		}, 150)
+	}
+</script>
+
+{#if isEditing}
+	<div class="relative w-full">
+		{#if multiline}
+			<textarea
+				bind:this={inputElement}
+				bind:value={editValue}
+				onkeydown={handleKeydown}
+				onblur={handleBlur}
+				disabled={isSaving}
+				{placeholder}
+				maxlength={maxLength}
+				class={cn(
+					'w-full p-8 border border-primary rounded-4 text-small font-inherit text-body bg-background transition-all duration-fast focus:outline-none focus:border-primary resize-y min-h-60',
+					hasError && 'border-error',
+					isSaving && 'opacity-70 cursor-wait'
+				)}
+				rows={3}
+			></textarea>
+		{:else}
+			<input
+				type="text"
+				bind:this={inputElement}
+				bind:value={editValue}
+				onkeydown={handleKeydown}
+				onblur={handleBlur}
+				disabled={isSaving}
+				{placeholder}
+				maxlength={maxLength}
+				class={cn(
+					'w-full p-8 border border-primary rounded-4 text-small font-inherit text-body bg-background transition-all duration-fast focus:outline-none focus:border-primary',
+					hasError && 'border-error',
+					isSaving && 'opacity-70 cursor-wait'
+				)}
+			/>
+		{/if}
+		{#if hasError}
+			<span class="block mt-4 text-tiny text-error">Value cannot be empty</span>
+		{/if}
+		{#if isSaving}
+			<span class="block mt-4 text-tiny text-secondary italic">Saving...</span>
+		{/if}
+	</div>
+{:else}
+	<button
+		type="button"
+		class={cn(
+			'[all:unset] cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
+			disabled && 'cursor-not-allowed opacity-60'
+		)}
+		onclick={startEditing}
+		{disabled}
+	>
+		{displayValue || value || placeholder}
+	</button>
+{/if}

package/dist/IIEditableText/IIEditableText.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    value: string;
+    displayValue?: string;
+    onSave: (newValue: string) => Promise<void>;
+    multiline?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    maxLength?: number;
+};
+declare const IIEditableText: import("svelte").Component<Props, {}, "">;
+type IIEditableText = ReturnType<typeof IIEditableText>;
+export default IIEditableText;

package/dist/IIEditableText/index.d.ts

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

package/dist/IIEditableText/index.js

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

package/dist/IIEmptyState/IIEmptyState.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+
+	type Props = {
+		icon?: Snippet
+		title: string
+		subtitle?: string
+	}
+
+	let {icon, title, subtitle}: Props = $props()
+</script>
+
+{#if icon}
+	<div class="p-32 text-center">
+		<div class="flex flex-col items-center gap-12">
+			<div class="w-12 h-12 text-tertiary opacity-50 flex items-center justify-center">
+				{@render icon()}
+			</div>
+			<p class="text-small-emphasis text-secondary m-0">{title}</p>
+			{#if subtitle}
+				<p class="text-tiny text-tertiary m-0">{subtitle}</p>
+			{/if}
+		</div>
+	</div>
+{:else}
+	<div class="p-32 text-center text-secondary text-small">
+		{title}
+	</div>
+{/if}

package/dist/IIEmptyState/IIEmptyState.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    icon?: Snippet;
+    title: string;
+    subtitle?: string;
+};
+declare const IIEmptyState: import("svelte").Component<Props, {}, "">;
+type IIEmptyState = ReturnType<typeof IIEmptyState>;
+export default IIEmptyState;

package/dist/IIEmptyState/index.d.ts

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

package/dist/IIEmptyState/index.js

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

package/dist/IIFilterChip/IIFilterChip.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import {IconClose} from '../icons'
+
+	type Props = {
+		fieldLabel: string
+		operator: string
+		value: string
+		onRemove: () => void
+	}
+
+	let {fieldLabel, operator, value, onRemove}: Props = $props()
+
+	const operatorDisplay = $derived.by(() => {
+		const map: Record<string, string> = {
+			'=': 'is',
+			'!=': 'is not',
+			'<': '<',
+			'>': '>',
+			'<=': '<=',
+			'>=': '>=',
+			IN: 'in',
+			'NOT IN': 'not in',
+			IS: 'is',
+			'IS NOT': 'is not',
+			IS_EMPTY: 'is empty',
+			IS_NOT_EMPTY: 'is not empty',
+		}
+		return map[operator] || operator
+	})
+</script>
+
+<span
+	class="inline-flex items-center gap-4 px-8 py-4 bg-filter-bg border border-filter-border rounded-full text-tiny text-filter-text"
+>
+	<span class="flex items-center gap-4">
+		<span class="font-medium">{fieldLabel}</span>
+		<span class="text-filter-operator">{operatorDisplay}</span>
+		<span class="font-semibold">{value || 'NULL'}</span>
+	</span>
+	<button
+		class="flex items-center justify-center w-16 h-16 p-0 bg-filter-remove border-0 rounded-full cursor-default transition-all duration-fast hover:bg-filter-remove-hover [&_svg]:w-10 [&_svg]:h-10 [&_svg]:text-filter-remove-icon"
+		onclick={onRemove}
+		aria-label="Remove filter"
+	>
+		<IconClose />
+	</button>
+</span>

package/dist/IIFilterChip/IIFilterChip.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    fieldLabel: string;
+    operator: string;
+    value: string;
+    onRemove: () => void;
+};
+declare const IIFilterChip: import("svelte").Component<Props, {}, "">;
+type IIFilterChip = ReturnType<typeof IIFilterChip>;
+export default IIFilterChip;

package/dist/IIFilterChip/index.d.ts

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

package/dist/IIFilterChip/index.js

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

package/dist/IIFormField/IIFormField.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+
+	type Props = {
+		label?: string
+		id?: string
+		children: Snippet
+	}
+
+	let {label, id, children}: Props = $props()
+</script>
+
+<div class="mb-16 last:mb-0">
+	{#if label}
+		<label class="block text-small-emphasis text-body mb-8" for={id}>{label}</label>
+	{/if}
+	{@render children()}
+</div>

package/dist/IIFormField/IIFormField.svelte.d.ts

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

package/dist/IIFormField/index.d.ts

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

package/dist/IIFormField/index.js

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

package/dist/IIInput/IIInput.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type {HTMLInputAttributes} from 'svelte/elements'
+	import {cn} from '../utils/cn'
+
+	type Props = HTMLInputAttributes & {
+		label?: string
+		errorMessage?: string
+		helperText?: string
+		error?: boolean
+		disabled?: boolean
+		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
+		value?: string | number
+		ref?: HTMLInputElement
+		class?: string
+	}
+
+	let {
+		label,
+		errorMessage,
+		helperText,
+		error = false,
+		disabled = false,
+		type = 'text',
+		value = $bindable(),
+		ref = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props()
+
+	const showError = $derived(error || !!errorMessage)
+	let shouldShake = $state(false)
+	let prevShowError = $state(false)
+
+	$effect(() => {
+		if (showError && !prevShowError) {
+			shouldShake = true
+			const timer = setTimeout(() => {
+				shouldShake = false
+			}, 400)
+			return () => clearTimeout(timer)
+		}
+		prevShowError = showError
+	})
+</script>
+
+<div class={cn('flex flex-col gap-4', className)}>
+	{#if label}
+		<label for={restProps.id} class="text-small-emphasis text-body">
+			{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 showError && errorMessage}
+		<span class="text-tiny text-error">{errorMessage}</span>
+	{:else if helperText}
+		<span class="text-tiny text-secondary">{helperText}</span>
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = HTMLInputAttributes & {
+    label?: string;
+    errorMessage?: string;
+    helperText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+    value?: string | number;
+    ref?: HTMLInputElement;
+    class?: string;
+};
+declare const IIInput: import("svelte").Component<Props, {}, "value" | "ref">;
+type IIInput = ReturnType<typeof IIInput>;
+export default IIInput;

package/dist/IIInput/index.d.ts

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

package/dist/IIInput/index.js

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

package/dist/IIModal/IIModal.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {Dialog} from 'bits-ui'
+	import {IconClose} from '../icons'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		open: boolean
+		title: string
+		onOpenChange?: (open: boolean) => void
+		children: Snippet
+		description?: Snippet
+		footer?: Snippet
+		showCloseButton?: boolean
+		size?: 'sm' | 'md' | 'lg'
+		class?: string
+	}
+
+	let {
+		open = $bindable(),
+		title,
+		onOpenChange,
+		children,
+		description,
+		footer,
+		showCloseButton = true,
+		size = 'md',
+		class: className,
+	}: Props = $props()
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen
+		onOpenChange?.(newOpen)
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="fixed inset-0 bg-overlay z-14 animate-fade-in motion-reduce:animate-none" />
+		<Dialog.Content
+			class={cn(
+				'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface rounded-12 shadow-modal w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 animate-modal-in motion-reduce:animate-none',
+				size === 'sm' && 'max-w-400',
+				size === 'md' && 'max-w-500',
+				size === 'lg' && 'max-w-700',
+				className
+			)}
+		>
+			<div class="flex items-center justify-between p-16 border-b border-primary shrink-0">
+				<div>
+					<Dialog.Title class="text-h4 text-body m-0">{title}</Dialog.Title>
+					{#if description}
+						<Dialog.Description class="text-small text-secondary mt-4">
+							{@render description()}
+						</Dialog.Description>
+					{/if}
+				</div>
+				{#if showCloseButton}
+					<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"
+					>
+						<IconClose class="size-20" />
+					</Dialog.Close>
+				{/if}
+			</div>
+			<div class="p-16 flex-auto min-h-0 overflow-y-auto">
+				{@render children()}
+			</div>
+			{#if footer}
+				<div class="flex items-center justify-end gap-12 p-16 border-t border-primary shrink-0">
+					{@render footer()}
+				</div>
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/dist/IIModal/IIModal.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    open: boolean;
+    title: string;
+    onOpenChange?: (open: boolean) => void;
+    children: Snippet;
+    description?: Snippet;
+    footer?: Snippet;
+    showCloseButton?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const IIModal: import("svelte").Component<Props, {}, "open">;
+type IIModal = ReturnType<typeof IIModal>;
+export default IIModal;

package/dist/IIModal/index.d.ts

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

package/dist/IIModal/index.js

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

package/dist/IIOverflowActions/IIOverflowActions.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {DropdownMenu} from 'bits-ui'
+	import {IIButton} from '../IIButton'
+	import {cn} from '../utils/cn'
+	import {IconMoreVert} from '../icons'
+
+	type Action = {
+		label: string
+		onclick: () => void
+		disabled?: boolean
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success'
+		icon?: Snippet
+	}
+
+	type Props = {
+		actions: Action[]
+		size?: 'sm' | 'md' | 'lg'
+		class?: string
+	}
+
+	let {actions, size = 'md', class: className}: Props = $props()
+
+	let wrapperEl = $state<HTMLElement | null>(null)
+	let overflowing = $state(false)
+	let kebabOpen = $state(false)
+
+	// Plain variable (not reactive) so it doesn't re-trigger the effect
+	let buttonsNaturalWidth = 0
+
+	$effect(() => {
+		if (!wrapperEl) return
+
+		// On first render, buttons are visible — capture their natural width
+		if (buttonsNaturalWidth === 0) {
+			const inlineEl = wrapperEl.querySelector('.ii-overflow-inline') as HTMLElement | null
+			if (inlineEl) {
+				buttonsNaturalWidth = inlineEl.scrollWidth
+			}
+		}
+
+		if (buttonsNaturalWidth === 0) return
+
+		const BUFFER = 32
+		const HYSTERESIS = 16
+
+		function check() {
+			if (!wrapperEl) return
+			const width = wrapperEl.clientWidth
+			if (overflowing) {
+				// Require extra room before switching back to buttons
+				overflowing = width < buttonsNaturalWidth + BUFFER + HYSTERESIS
+			} else {
+				// Collapse early so buttons never visibly clip
+				overflowing = width < buttonsNaturalWidth + BUFFER
+			}
+		}
+
+		check()
+		const observer = new ResizeObserver(check)
+		observer.observe(wrapperEl)
+		return () => observer.disconnect()
+	})
+</script>
+
+<div class={cn('flex items-center justify-end flex-1 min-w-0 overflow-hidden', className)} bind:this={wrapperEl}>
+	{#if overflowing}
+		<DropdownMenu.Root bind:open={kebabOpen}>
+			<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"
+			>
+				<IconMoreVert />
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content
+				class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"
+				side="bottom"
+				align="end"
+			>
+				{#each actions as action (action.label)}
+					<DropdownMenu.Item
+						disabled={action.disabled}
+						class="flex items-center gap-8 px-12 py-8 rounded-4 text-small-emphasis text-body cursor-default outline-none transition-all duration-fast hover:bg-background data-[highlighted]:bg-background data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none"
+						onSelect={action.onclick}
+					>
+						<span>{action.label}</span>
+					</DropdownMenu.Item>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	{:else}
+		<div class="flex gap-8 items-center shrink-0">
+			{#each actions as action (action.label)}
+				<IIButton variant={action.variant ?? 'primary'} {size} onclick={action.onclick} disabled={action.disabled}>
+					{#if action.icon}
+						<span class="inline-flex items-center w-16 h-16 [&_svg]:w-full [&_svg]:h-full">
+							{@render action.icon()}
+						</span>
+					{/if}
+					{action.label}
+				</IIButton>
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/IIOverflowActions/IIOverflowActions.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Action = {
+    label: string;
+    onclick: () => void;
+    disabled?: boolean;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
+    icon?: Snippet;
+};
+type Props = {
+    actions: Action[];
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const IIOverflowActions: import("svelte").Component<Props, {}, "">;
+type IIOverflowActions = ReturnType<typeof IIOverflowActions>;
+export default IIOverflowActions;

package/dist/IIOverflowActions/index.d.ts

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

package/dist/IIOverflowActions/index.js

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

package/dist/IIStatusBadge/IIStatusBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+
+	type RiskLevel = 'current' | 'attention' | 'at-risk'
+
+	type Props = {
+		level: RiskLevel
+		label: string
+		tooltip?: string
+	}
+
+	let {level, label, tooltip}: Props = $props()
+
+	const levelClasses: Record<string, string> = {
+		current: 'bg-success-bg text-success',
+		attention: 'bg-warning-bg text-warning',
+		'at-risk': 'bg-error-bg text-error',
+	}
+</script>
+
+<span
+	class={cn(
+		'inline-flex items-center px-12 py-4 rounded-full text-tiny-strong whitespace-nowrap transition-all duration-base motion-reduce:transition-none',
+		levelClasses[level]
+	)}
+	title={tooltip}
+>
+	{label}
+</span>

package/dist/IIStatusBadge/IIStatusBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+type RiskLevel = 'current' | 'attention' | 'at-risk';
+type Props = {
+    level: RiskLevel;
+    label: string;
+    tooltip?: string;
+};
+declare const IIStatusBadge: import("svelte").Component<Props, {}, "">;
+type IIStatusBadge = ReturnType<typeof IIStatusBadge>;
+export default IIStatusBadge;

package/dist/IIStatusBadge/index.d.ts

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