@insymetri/styleguide 0.1.18 → 0.1.20

package/dist/IIAccordion/IIAccordion.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+
+	type Props = {
+		expanded: boolean
+		onExpandedChange?: (expanded: boolean) => void
+		trigger: Snippet<[{expanded: boolean}]>
+		children: Snippet
+		disabled?: boolean
+		class?: string
+	}
+
+	let {
+		expanded = $bindable(false),
+		onExpandedChange,
+		trigger,
+		children,
+		disabled = false,
+		class: className,
+	}: Props = $props()
+
+	function toggle() {
+		if (disabled) return
+		expanded = !expanded
+		onExpandedChange?.(expanded)
+	}
+</script>
+
+<div class={cn('border border-primary rounded-10 overflow-hidden', className)}>
+	<button
+		type="button"
+		class="flex items-center gap-8 w-full bg-transparent border-none px-16 py-12 cursor-default text-left font-inherit hover:bg-background"
+		style="transition: background-color var(--transition-fast)"
+		onclick={toggle}
+		aria-expanded={expanded}
+		{disabled}
+	>
+		<IIIcon
+			iconName="caret-right"
+			class={cn('w-14 h-14 text-secondary shrink-0 transition-transform duration-fast', expanded && 'rotate-90')}
+		/>
+		<div class="flex-1 min-w-0">
+			{@render trigger({expanded})}
+		</div>
+	</button>
+	{#if expanded}
+		<div class="border-t border-primary">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/IIAccordion/IIAccordion.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    expanded: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    trigger: Snippet<[{
+        expanded: boolean;
+    }]>;
+    children: Snippet;
+    disabled?: boolean;
+    class?: string;
+};
+declare const IIAccordion: import("svelte").Component<Props, {}, "expanded">;
+type IIAccordion = ReturnType<typeof IIAccordion>;
+export default IIAccordion;

package/dist/IIAccordion/IIAccordionStories.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import IIAccordion from './IIAccordion.svelte'
+
+	let basicExpanded = $state(false)
+	let tier1Expanded = $state(true)
+	let tier2Expanded = $state(false)
+	let tier3Expanded = $state(false)
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Basic -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Basic</h2>
+		<p class="text-small text-secondary mb-12">Click to expand and collapse content.</p>
+		<div class="max-w-500">
+			<IIAccordion bind:expanded={basicExpanded}>
+				{#snippet trigger({expanded})}
+					<span class="text-small font-semibold text-body">Section Title</span>
+				{/snippet}
+				<div class="p-16">
+					<p class="text-small text-secondary m-0">
+						This is the expandable content area. It can contain any content — forms, lists, details, etc.
+					</p>
+				</div>
+			</IIAccordion>
+		</div>
+	</section>
+
+	<!-- Tier List Example -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Tier List (Real-world Example)</h2>
+		<p class="text-small text-secondary mb-12">Multiple accordions used as expandable tier rows.</p>
+		<div class="max-w-600 flex flex-col gap-4">
+			<IIAccordion bind:expanded={tier1Expanded}>
+				{#snippet trigger()}
+					<div class="flex items-center gap-12">
+						<span class="font-semibold text-body text-default">Standard</span>
+						<span class="text-small text-secondary">8.99%</span>
+						<span class="text-small text-secondary">36 mo</span>
+						<span class="text-small text-secondary">$1,000 – $25,000</span>
+					</div>
+				{/snippet}
+				<div class="p-16 bg-background">
+					<p class="text-small text-secondary m-0">Tier configuration form goes here.</p>
+				</div>
+			</IIAccordion>
+
+			<IIAccordion bind:expanded={tier2Expanded}>
+				{#snippet trigger()}
+					<div class="flex items-center gap-12">
+						<span class="font-semibold text-body text-default">Premium</span>
+						<span class="text-small text-secondary">6.49%</span>
+						<span class="text-small text-secondary">48 mo</span>
+						<span class="text-small text-secondary">$10,000 – $50,000</span>
+					</div>
+				{/snippet}
+				<div class="p-16 bg-background">
+					<p class="text-small text-secondary m-0">Tier configuration form goes here.</p>
+				</div>
+			</IIAccordion>
+
+			<IIAccordion bind:expanded={tier3Expanded}>
+				{#snippet trigger()}
+					<div class="flex items-center gap-12">
+						<span class="font-semibold text-body text-default">Economy</span>
+						<span class="text-small text-secondary">12.99%</span>
+						<span class="text-small text-secondary">24 mo</span>
+						<span class="text-small text-secondary">$500 – $10,000</span>
+					</div>
+				{/snippet}
+				<div class="p-16 bg-background">
+					<p class="text-small text-secondary m-0">Tier configuration form goes here.</p>
+				</div>
+			</IIAccordion>
+		</div>
+	</section>
+
+	<!-- Disabled -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>
+		<div class="max-w-500">
+			<IIAccordion expanded={false} disabled>
+				{#snippet trigger()}
+					<span class="text-small font-semibold text-body">Disabled Section</span>
+				{/snippet}
+				<div class="p-16">
+					<p class="text-small text-secondary m-0">This content won't be reachable.</p>
+				</div>
+			</IIAccordion>
+		</div>
+	</section>
+</div>

package/dist/IIAccordion/IIAccordionStories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IIAccordionStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIAccordionStories = ReturnType<typeof IIAccordionStories>;
+export default IIAccordionStories;

package/dist/IIAccordion/index.d.ts

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

package/dist/IIAccordion/index.js

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

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+
+	type Item = {
+		label: string
+		value: string
+		variant?: 'default' | 'danger'
+	}
+
+	type Props = {
+		items: Item[]
+		value: string
+		onValueChange?: (value: string) => void
+		size?: 'sm' | 'md'
+		class?: string
+	}
+
+	let {items, value = $bindable(), onValueChange, size = 'sm', class: className}: Props = $props()
+
+	const sizeClasses = {
+		sm: 'px-12 py-4 text-small',
+		md: 'px-16 py-6 text-default',
+	} as const
+
+	function select(v: string) {
+		value = v
+		onValueChange?.(v)
+	}
+
+	function getActiveClass(item: Item): string {
+		if (item.variant === 'danger') return 'bg-error text-inverse'
+		return 'bg-primary text-inverse'
+	}
+</script>
+
+<div class={cn('inline-flex border border-primary rounded-control overflow-hidden', className)} role="group">
+	{#each items as item (item.value)}
+		{@const isActive = value === item.value}
+		<button
+			type="button"
+			class={cn(
+				'border-none font-medium cursor-default whitespace-nowrap text-center not-first:border-l not-first:border-primary',
+				sizeClasses[size],
+				isActive ? getActiveClass(item) : 'bg-surface text-secondary hover:bg-background'
+			)}
+			style="transition: all var(--transition-fast)"
+			aria-pressed={isActive}
+			onclick={() => select(item.value)}
+		>
+			{item.label}
+		</button>
+	{/each}
+</div>

package/dist/IISegmentedControl/IISegmentedControl.svelte.d.ts

@@ -0,0 +1,15 @@
+type Item = {
+    label: string;
+    value: string;
+    variant?: 'default' | 'danger';
+};
+type Props = {
+    items: Item[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    class?: string;
+};
+declare const IISegmentedControl: import("svelte").Component<Props, {}, "value">;
+type IISegmentedControl = ReturnType<typeof IISegmentedControl>;
+export default IISegmentedControl;

package/dist/IISegmentedControl/IISegmentedControlStories.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import IISegmentedControl from './IISegmentedControl.svelte'
+
+	let mode = $state('allow')
+	let editorTab = $state('edit')
+	let size = $state('monthly')
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Basic -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Basic</h2>
+		<p class="text-small text-secondary mb-12">Two-option segmented control for mode switching.</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Allow list', value: 'allow'},
+				{label: 'Block list', value: 'block'},
+			]}
+			bind:value={mode}
+		/>
+		<p class="text-small text-secondary mt-8">Selected: {mode}</p>
+	</section>
+
+	<!-- With danger variant -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Danger Variant</h2>
+		<p class="text-small text-secondary mb-12">Items can use a danger variant for the active state.</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Allow list', value: 'allow'},
+				{label: 'Block list', value: 'block', variant: 'danger'},
+			]}
+			bind:value={mode}
+		/>
+	</section>
+
+	<!-- Editor tabs -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Editor Tabs</h2>
+		<p class="text-small text-secondary mb-12">Used as an Edit/Preview mode switcher.</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Edit', value: 'edit'},
+				{label: 'Preview', value: 'preview'},
+			]}
+			bind:value={editorTab}
+		/>
+		<p class="text-small text-secondary mt-8">Mode: {editorTab}</p>
+	</section>
+
+	<!-- Three options -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Three Options</h2>
+		<p class="text-small text-secondary mb-12">Supports more than two segments.</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Monthly', value: 'monthly'},
+				{label: 'Quarterly', value: 'quarterly'},
+				{label: 'Annual', value: 'annual'},
+			]}
+			bind:value={size}
+		/>
+	</section>
+
+	<!-- Sizes -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Sizes</h2>
+		<div class="flex items-center gap-16">
+			<div class="flex flex-col items-start gap-4">
+				<span class="text-tiny text-secondary">sm (default)</span>
+				<IISegmentedControl
+					size="sm"
+					items={[
+						{label: 'On', value: 'on'},
+						{label: 'Off', value: 'off'},
+					]}
+					value="on"
+				/>
+			</div>
+			<div class="flex flex-col items-start gap-4">
+				<span class="text-tiny text-secondary">md</span>
+				<IISegmentedControl
+					size="md"
+					items={[
+						{label: 'On', value: 'on'},
+						{label: 'Off', value: 'off'},
+					]}
+					value="on"
+				/>
+			</div>
+		</div>
+	</section>
+</div>

package/dist/IISegmentedControl/IISegmentedControlStories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IISegmentedControlStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IISegmentedControlStories = ReturnType<typeof IISegmentedControlStories>;
+export default IISegmentedControlStories;

package/dist/IISegmentedControl/index.d.ts

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

package/dist/IISegmentedControl/index.js

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

package/dist/IIStepper/IIStepper.svelte

@@ -11,15 +11,24 @@
 		steps: Step[]
 		currentStep: number
 		onStepClick?: (index: number) => void
+		completedSteps?: number[] | Set<number>
 		class?: string
 	}
 
-	let {steps, currentStep, onStepClick, class: className}: Props = $props()
+	let {steps, currentStep, onStepClick, completedSteps, class: className}: Props = $props()
+
+	function isStepCompleted(index: number): boolean {
+		if (completedSteps) {
+			if (completedSteps instanceof Set) return completedSteps.has(index)
+			return completedSteps.includes(index)
+		}
+		return index < currentStep
+	}
 </script>
 
 <nav class={cn('flex items-center w-full', className)} aria-label="Progress">
 	{#each steps as step, i}
-		{@const isCompleted = i < currentStep}
+		{@const isCompleted = isStepCompleted(i)}
 		{@const isActive = i === currentStep}
 		{@const isClickable = !!onStepClick && (isCompleted || isActive)}
 

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

@@ -6,6 +6,7 @@ type Props = {
     steps: Step[];
     currentStep: number;
     onStepClick?: (index: number) => void;
+    completedSteps?: number[] | Set<number>;
     class?: string;
 };
 declare const IIStepper: import("svelte").Component<Props, {}, "">;

package/dist/IIStepper/IIStepperStories.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import IIStepper from './IIStepper.svelte'
+
+	const steps = [
+		{label: 'Product Info'},
+		{label: 'Tiers'},
+		{label: 'Eligibility'},
+		{label: 'Agreement'},
+		{label: 'Review'},
+	]
+
+	let linearStep = $state(2)
+	let nonLinearStep = $state(1)
+	let visitedSteps = $state(new Set([0, 1, 3]))
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Linear (default) -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Linear Stepper (Default)</h2>
+		<p class="text-small text-secondary mb-12">Steps before the current step are automatically marked as completed.</p>
+		<div class="max-w-600">
+			<IIStepper
+				{steps}
+				currentStep={linearStep}
+				onStepClick={i => (linearStep = i)}
+			/>
+		</div>
+		<p class="text-small text-secondary mt-8">Current step: {linearStep}</p>
+	</section>
+
+	<!-- Non-linear with completedSteps -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Non-Linear with completedSteps</h2>
+		<p class="text-small text-secondary mb-12">
+			Uses <code class="font-mono text-primary">completedSteps</code> prop to mark specific steps as visited,
+			regardless of order. Steps 1, 2, and 4 are marked completed while currently on step 2.
+		</p>
+		<div class="max-w-600">
+			<IIStepper
+				{steps}
+				currentStep={nonLinearStep}
+				completedSteps={visitedSteps}
+				onStepClick={i => {
+					visitedSteps.add(nonLinearStep)
+					nonLinearStep = i
+					visitedSteps = visitedSteps
+				}}
+			/>
+		</div>
+		<p class="text-small text-secondary mt-8">
+			Current: {nonLinearStep} | Completed: {[...visitedSteps].sort().join(', ')}
+		</p>
+	</section>
+
+	<!-- With descriptions -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Descriptions</h2>
+		<div class="max-w-600">
+			<IIStepper
+				steps={[
+					{label: 'Details', description: 'Basic info'},
+					{label: 'Config', description: 'Settings'},
+					{label: 'Review', description: 'Confirm'},
+				]}
+				currentStep={1}
+			/>
+		</div>
+	</section>
+
+	<!-- No click handler (read-only) -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Read-Only</h2>
+		<p class="text-small text-secondary mb-12">Without onStepClick, steps are not interactive.</p>
+		<div class="max-w-600">
+			<IIStepper
+				{steps}
+				currentStep={3}
+			/>
+		</div>
+	</section>
+</div>

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

@@ -0,0 +1,3 @@
+declare const IIStepperStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIStepperStories = ReturnType<typeof IIStepperStories>;
+export default IIStepperStories;

package/dist/IITextarea/IITextarea.svelte

@@ -65,7 +65,7 @@
 		{disabled}
 		{rows}
 		class={cn(
-			'py-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-control transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary focus:border-primary focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
+			'py-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-[10px] transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary focus:border-primary focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
 			showError && 'border-error focus:border-error focus:ring-error'
 		)}
 		oninput={handleInput}

package/dist/IIViewFilterChip/IIViewFilterChip.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <span
-	class="inline-flex items-center gap-4 px-8 py-4 bg-gray-100 border border-gray-200 rounded-full text-tiny text-secondary cursor-default"
+	class="inline-flex items-center gap-4 px-8 h-24 bg-gray-100 border border-gray-200 rounded-full text-tiny text-secondary cursor-default"
 >
 	<span class="flex items-center gap-4">
 		<span class="font-medium">{fieldLabel}</span>

package/dist/Icons/Icons.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import {icons, type IconName} from '../icons'
+	import IIIcon from '../IIIcon/IIIcon.svelte'
+
+	const iconNames = Object.keys(icons) as IconName[]
+
+	let search = $state('')
+
+	const filtered = $derived(
+		search ? iconNames.filter(name => name.toLowerCase().includes(search.toLowerCase())) : iconNames
+	)
+</script>
+
+<div class="flex flex-col gap-24 p-24 text-body">
+	<section>
+		<h2 class="text-h2 mb-8">Icons</h2>
+		<p class="text-small text-secondary mb-16">
+			{iconNames.length} Phosphor Regular icons. Click a name to copy it.
+		</p>
+		<input
+			type="search"
+			placeholder="Search icons..."
+			bind:value={search}
+			class="py-5 px-12 text-small bg-surface border border-strong rounded-control w-full max-w-300 outline-none focus:border-primary"
+			style="margin-bottom: 32px;"
+		/>
+		<div
+			style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px;"
+		>
+			{#each filtered as name (name)}
+				<button
+					class="flex flex-col items-center gap-8 p-12 rounded-8 bg-surface-raised border border-subtle cursor-default transition-all duration-fast hover:shadow-card hover:border-strong"
+					onclick={() => navigator.clipboard.writeText(name)}
+					title="Copy '{name}'"
+				>
+					<IIIcon iconName={name} class="w-24 h-24 text-body" />
+					<span class="text-tiny text-secondary font-mono truncate w-full text-center">{name}</span>
+				</button>
+			{/each}
+		</div>
+		{#if filtered.length === 0}
+			<p class="text-small text-tertiary text-center py-32">No icons match "{search}"</p>
+		{/if}
+	</section>
+</div>

package/dist/Icons/Icons.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Icons: import("svelte").Component<Record<string, never>, {}, "">;
+type Icons = ReturnType<typeof Icons>;
+export default Icons;

package/dist/Icons/index.d.ts

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

package/dist/Icons/index.js

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { IIAccordion } from './IIAccordion';
 export { IIActionGroup } from './IIActionGroup';
 export { IIAlert } from './IIAlert';
 export { IIAsyncState } from './IIAsyncState';
@@ -25,6 +26,7 @@ export { IIMultiSelect } from './IIMultiSelect';
 export { IIOverflowActions } from './IIOverflowActions';
 export { IIPillTabs } from './IIPillTabs';
 export { IIPopover } from './IIPopover';
+export { IISegmentedControl } from './IISegmentedControl';
 export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';
 export { IIStepper } from './IIStepper';

package/dist/index.js

@@ -1,5 +1,6 @@
 // @insymetri/styleguide
 // Components
+export { IIAccordion } from './IIAccordion';
 export { IIActionGroup } from './IIActionGroup';
 export { IIAlert } from './IIAlert';
 export { IIAsyncState } from './IIAsyncState';
@@ -27,6 +28,7 @@ export { IIMultiSelect } from './IIMultiSelect';
 export { IIOverflowActions } from './IIOverflowActions';
 export { IIPillTabs } from './IIPillTabs';
 export { IIPopover } from './IIPopover';
+export { IISegmentedControl } from './IISegmentedControl';
 export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';
 export { IIStepper } from './IIStepper';

package/package.json

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