@insymetri/styleguide 0.1.12 → 0.1.14

package/dist/IIButton/IIButton.svelte

@@ -37,7 +37,7 @@
 	const isDisabled = $derived(disabled || loading)
 
 	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'
+		'inline-flex items-center justify-center gap-8 whitespace-nowrap rounded-10 cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed'
 
 	const variantClasses = {
 		primary:

package/dist/IICalendar/IICalendar.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import {Calendar} from 'bits-ui'
+	import type {DateValue} from '@internationalized/date'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		value: DateValue | undefined
+		onValueChange?: (value: DateValue | undefined) => void
+		minValue?: DateValue
+		maxValue?: DateValue
+		isDateDisabled?: (date: DateValue) => boolean
+		disabled?: boolean
+		class?: string
+	}
+
+	let {
+		value = $bindable(),
+		onValueChange,
+		minValue,
+		maxValue,
+		isDateDisabled,
+		disabled = false,
+		class: className,
+	}: Props = $props()
+</script>
+
+<div class={cn('min-w-280', className)}>
+	<Calendar.Root
+		type="single"
+		bind:value
+		{onValueChange}
+		{minValue}
+		{maxValue}
+		{isDateDisabled}
+		{disabled}
+	>
+		{#snippet children({months, weekdays})}
+			<div class="flex items-center justify-between gap-16 mb-12">
+				<Calendar.MonthSelect aria-label="Select month" monthFormat="long">
+					{#snippet child({props, monthItems, selectedMonthItem})}
+						<select
+							{...props}
+							class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none flex-1"
+							style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right center"
+						>
+							{#each monthItems as month (month.value)}
+								<option value={month.value} selected={month.value === selectedMonthItem.value}>
+									{month.label}
+								</option>
+							{/each}
+						</select>
+					{/snippet}
+				</Calendar.MonthSelect>
+				<Calendar.YearSelect aria-label="Select year">
+					{#snippet child({props, yearItems, selectedYearItem})}
+						<select
+							{...props}
+							class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none"
+							style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right center"
+						>
+							{#each yearItems as year (year.value)}
+								<option value={year.value} selected={year.value === selectedYearItem.value}>
+									{year.label}
+								</option>
+							{/each}
+						</select>
+					{/snippet}
+				</Calendar.YearSelect>
+			</div>
+
+			{#each months as month (month.value.toString())}
+				<Calendar.Grid class="w-full border-collapse">
+					<Calendar.GridHead>
+						<Calendar.GridRow class="flex w-full">
+							{#each weekdays as day, i (`day-${i}`)}
+								<Calendar.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
+									{day.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates, weekIndex (weekIndex)}
+							<Calendar.GridRow class="flex w-full">
+								{#each weekDates as date (date.toString())}
+									<Calendar.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
+										<Calendar.Day
+											class="[all:unset] flex items-center justify-center w-full h-full rounded-4 text-small text-body cursor-default transition-all duration-fast hover:bg-gray-100 data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[today]:border data-[today]:border-primary data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-30 motion-reduce:transition-none"
+										>
+											{date.day}
+										</Calendar.Day>
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		{/snippet}
+	</Calendar.Root>
+</div>

package/dist/IICalendar/IICalendar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DateValue } from '@internationalized/date';
+type Props = {
+    value: DateValue | undefined;
+    onValueChange?: (value: DateValue | undefined) => void;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    disabled?: boolean;
+    class?: string;
+};
+declare const IICalendar: import("svelte").Component<Props, {}, "value">;
+type IICalendar = ReturnType<typeof IICalendar>;
+export default IICalendar;

package/dist/IICalendar/IICalendarStories.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import IICalendar from './IICalendar.svelte'
+	import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date'
+
+	let basicValue = $state<import('@internationalized/date').DateValue | undefined>(undefined)
+	let presetValue = $state<import('@internationalized/date').DateValue | undefined>(new CalendarDate(2026, 3, 17))
+	let constrainedValue = $state<import('@internationalized/date').DateValue | undefined>(undefined)
+
+	const todayDate = today(getLocalTimeZone())
+	const minDate = todayDate
+	const maxDate = todayDate.add({months: 3})
+
+	function isWeekend(date: import('@internationalized/date').DateValue) {
+		const dayOfWeek = date.toDate(getLocalTimeZone()).getDay()
+		return dayOfWeek === 0 || dayOfWeek === 6
+	}
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Basic -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Basic Calendar</h2>
+		<p class="text-small text-secondary mb-12">Standalone calendar with no constraints.</p>
+		<div class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 inline-block">
+			<IICalendar bind:value={basicValue} />
+		</div>
+		{#if basicValue}
+			<p class="text-small text-secondary mt-8">Selected: {basicValue.toString()}</p>
+		{/if}
+	</section>
+
+	<!-- With Preset Value -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Preset Value</h2>
+		<p class="text-small text-secondary mb-12">Calendar initialized to March 17, 2026.</p>
+		<div class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 inline-block">
+			<IICalendar bind:value={presetValue} />
+		</div>
+	</section>
+
+	<!-- Constrained Range -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Date Constraints</h2>
+		<p class="text-small text-secondary mb-12">Only allows dates from today to 3 months ahead, weekdays only.</p>
+		<div class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 inline-block">
+			<IICalendar bind:value={constrainedValue} minValue={minDate} maxValue={maxDate} isDateDisabled={isWeekend} />
+		</div>
+		{#if constrainedValue}
+			<p class="text-small text-secondary mt-8">Selected: {constrainedValue.toString()}</p>
+		{/if}
+	</section>
+
+	<!-- Disabled -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>
+		<div class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 inline-block">
+			<IICalendar value={new CalendarDate(2026, 3, 17)} disabled />
+		</div>
+	</section>
+</div>

package/dist/IICalendar/IICalendarStories.svelte.d.ts

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

package/dist/IICalendar/index.d.ts

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

package/dist/IICalendar/index.js

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

package/dist/IICombobox/IICombobox.svelte

@@ -11,11 +11,17 @@
 		disabled?: boolean
 	}
 
+	type Group<T> = {
+		heading: string
+		items: T[]
+	}
+
 	type Props<T> = {
 		items: T[]
 		value?: string
 		placeholder?: string
 		disabled?: boolean
+		loading?: boolean
 		onSelect?: (item: T) => void
 		// Function to extract value from item (required for custom types)
 		getItemValue: (item: T) => string
@@ -27,6 +33,8 @@
 		renderItem?: Snippet<[item: T, selected: boolean]>
 		// Content shown inside dropdown when there are no items (e.g. loading/no results)
 		emptyContent?: Snippet
+		// Grouped items (alternative to flat items)
+		groups?: Group<T>[]
 		// CSS classes
 		class?: string
 		contentClass?: string
@@ -37,12 +45,14 @@
 		value = $bindable(''),
 		placeholder = 'Select...',
 		disabled = false,
+		loading = false,
 		onSelect,
 		getItemValue,
 		getItemDisabled,
 		filterFn,
 		renderItem,
 		emptyContent,
+		groups,
 		class: className,
 		contentClass,
 	}: Props<T> = $props()
@@ -50,6 +60,9 @@
 	let inputValue = $state('')
 	let open = $state(false)
 
+	// When groups provided, derive flat items from groups
+	const allItems = $derived(groups ? groups.flatMap(g => g.items) : items)
+
 	// Default filter for simple items
 	function defaultFilter(items: T[], inputValue: string): T[] {
 		if (!inputValue) return items
@@ -65,16 +78,29 @@
 	}
 
 	const filteredItems = $derived.by(() => {
-		if (filterFn) {
-			return filterFn(items, inputValue)
+		const filter = filterFn ?? defaultFilter
+		if (groups) {
+			return filter(allItems, inputValue)
 		}
-		return defaultFilter(items, inputValue)
+		return filter(items, inputValue)
+	})
+
+	// For grouped rendering, filter each group's items
+	const filteredGroups = $derived.by(() => {
+		if (!groups) return undefined
+		const filter = filterFn ?? defaultFilter
+		return groups
+			.map(g => ({
+				...g,
+				items: filter(g.items, inputValue),
+			}))
+			.filter(g => g.items.length > 0)
 	})
 
 	function handleValueChange(newValue: string | undefined) {
 		value = newValue || ''
 		if (newValue && onSelect) {
-			const selectedItem = items.find(item => getItemValue(item) === newValue)
+			const selectedItem = allItems.find(item => getItemValue(item) === newValue)
 			if (selectedItem) {
 				onSelect(selectedItem)
 			}
@@ -98,6 +124,31 @@
 	}
 </script>
 
+{#snippet comboboxItem(item: T, i: number)}
+	<Combobox.Item
+		value={getItemValue(item)}
+		label=""
+		disabled={getItemDisabled?.(item) ?? false}
+		class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none"
+	>
+		{#snippet children({selected})}
+			{#if renderItem}
+				{@render renderItem(item, selected)}
+			{:else if isSimpleItem(item)}
+				<span class="flex-1">{item.label}</span>
+				{#if selected}
+					<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
+				{/if}
+			{:else}
+				<span class="flex-1">{getItemValue(item)}</span>
+				{#if selected}
+					<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
+				{/if}
+			{/if}
+		{/snippet}
+	</Combobox.Item>
+{/snippet}
+
 <div class={cn('block w-full', className)}>
 	<Combobox.Root
 		type="single"
@@ -114,7 +165,7 @@
 			class="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-10 transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-input-bg-disabled motion-reduce:transition-none"
 		/>
 		<Combobox.Portal>
-			{#if filteredItems.length > 0 || emptyContent}
+			{#if filteredItems.length > 0 || emptyContent || loading}
 				<Combobox.Content
 					class={cn(
 						'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 max-h-300 overflow-y-auto z-16',
@@ -124,33 +175,28 @@
 					sideOffset={2}
 					align="start"
 				>
-					{#each filteredItems as item, i (i + '-' + getItemValue(item))}
-						<Combobox.Item
-							value={getItemValue(item)}
-							label=""
-							disabled={getItemDisabled?.(item) ?? false}
-							class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none"
-						>
-							{#snippet children({selected})}
-								{#if renderItem}
-									{@render renderItem(item, selected)}
-								{:else if isSimpleItem(item)}
-									<span class="flex-1">{item.label}</span>
-									{#if selected}
-										<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
-									{/if}
-								{:else}
-									<span class="flex-1">{getItemValue(item)}</span>
-									{#if selected}
-										<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
-									{/if}
-								{/if}
-							{/snippet}
-						</Combobox.Item>
-					{/each}
+					{#if filteredGroups}
+						{#each filteredGroups as group, gi (gi)}
+							<div class="text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none">
+								{group.heading}
+							</div>
+							{#each group.items as item, i (i + '-' + getItemValue(item))}
+								{@render comboboxItem(item, i)}
+							{/each}
+						{/each}
+					{:else}
+						{#each filteredItems as item, i (i + '-' + getItemValue(item))}
+							{@render comboboxItem(item, i)}
+						{/each}
+					{/if}
 					{#if filteredItems.length === 0 && emptyContent}
 						{@render emptyContent()}
 					{/if}
+					{#if loading}
+						<div class="flex items-center justify-center py-8">
+							<span class="w-16 h-16 border-2 border-current border-r-transparent rounded-full animate-spin text-secondary"></span>
+						</div>
+					{/if}
 				</Combobox.Content>
 			{/if}
 		</Combobox.Portal>

package/dist/IICombobox/IICombobox.svelte.d.ts

@@ -1,15 +1,21 @@
 import type { Snippet } from 'svelte';
+type Group<T> = {
+    heading: string;
+    items: T[];
+};
 type Props<T> = {
     items: T[];
     value?: string;
     placeholder?: string;
     disabled?: boolean;
+    loading?: boolean;
     onSelect?: (item: T) => void;
     getItemValue: (item: T) => string;
     getItemDisabled?: (item: T) => boolean;
     filterFn?: (items: T[], inputValue: string) => T[];
     renderItem?: Snippet<[item: T, selected: boolean]>;
     emptyContent?: Snippet;
+    groups?: Group<T>[];
     class?: string;
     contentClass?: string;
 };

package/dist/IICombobox/IIComboboxStories.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import IICombobox from './IICombobox.svelte'
+
+	type SimpleItem = {
+		label: string
+		value: string
+		disabled?: boolean
+	}
+
+	const getItemValue = (item: SimpleItem) => item.value
+
+	let groupedValue = $state('')
+	let loadingValue = $state('')
+	let loading = $state(false)
+
+	const teamGroups = [
+		{
+			heading: 'Engineering',
+			items: [
+				{label: 'Alice Chen', value: 'alice'},
+				{label: 'Bob Smith', value: 'bob'},
+				{label: 'Carol Wu', value: 'carol'},
+			],
+		},
+		{
+			heading: 'Design',
+			items: [
+				{label: 'Diana Patel', value: 'diana'},
+				{label: 'Evan Kim', value: 'evan'},
+			],
+		},
+		{
+			heading: 'Product',
+			items: [
+				{label: 'Frank Lee', value: 'frank'},
+				{label: 'Grace Ng', value: 'grace'},
+			],
+		},
+	]
+
+	const asyncItems: SimpleItem[] = [
+		{label: 'California', value: 'CA'},
+		{label: 'New York', value: 'NY'},
+		{label: 'Texas', value: 'TX'},
+		{label: 'Florida', value: 'FL'},
+	]
+
+	function simulateLoading() {
+		loading = true
+		setTimeout(() => {
+			loading = false
+		}, 2000)
+	}
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Grouped Items -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Grouped Items</h2>
+		<p class="text-small text-secondary mb-12">Items organized by team with group headings. Groups with no matching items are hidden during filtering.</p>
+		<div class="w-280">
+			<IICombobox
+				items={[]}
+				groups={teamGroups}
+				bind:value={groupedValue}
+				placeholder="Search team members..."
+				{getItemValue}
+			/>
+		</div>
+		{#if groupedValue}
+			<p class="text-small text-secondary mt-8">Selected: {groupedValue}</p>
+		{/if}
+	</section>
+
+	<!-- Loading State -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Loading State</h2>
+		<p class="text-small text-secondary mb-12">Shows a spinner at the bottom of the dropdown while loading. Click "Simulate Load" then open the combobox.</p>
+		<div class="flex items-center gap-12">
+			<div class="w-280">
+				<IICombobox
+					items={asyncItems}
+					bind:value={loadingValue}
+					placeholder="Select a state..."
+					{getItemValue}
+					{loading}
+				/>
+			</div>
+			<button
+				class="px-12 py-5 rounded-10 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
+				onclick={simulateLoading}
+			>
+				Simulate Load
+			</button>
+		</div>
+	</section>
+</div>

package/dist/IICombobox/IIComboboxStories.svelte.d.ts

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

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type {Snippet} from 'svelte'
 	import {DropdownMenu} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
@@ -6,6 +7,8 @@
 	type Item = {
 		label: string
 		value: string
+		icon?: Snippet
+		disabled?: boolean
 	}
 
 	type Props = {
@@ -15,6 +18,8 @@
 		disabled?: boolean
 		onSelect?: (value: string) => void
 		matchTriggerWidth?: boolean
+		renderItem?: Snippet<[item: Item, selected: boolean]>
+		renderSelected?: Snippet<[item: Item]>
 		class?: string
 	}
 
@@ -25,6 +30,8 @@
 		disabled = false,
 		onSelect,
 		matchTriggerWidth = false,
+		renderItem,
+		renderSelected,
 		class: className,
 	}: Props = $props()
 
@@ -32,7 +39,8 @@
 	let triggerEl = $state<HTMLElement | null>(null)
 	let triggerWidth = $state<number | undefined>(undefined)
 
-	const selectedLabel = $derived(items.find(i => i.value === value)?.label ?? placeholder)
+	const selectedItem = $derived(items.find(i => i.value === value))
+	const selectedLabel = $derived(selectedItem?.label ?? placeholder)
 
 	function handleSelect(item: Item) {
 		value = item.value
@@ -57,7 +65,11 @@
 			className
 		)}
 	>
-		<span class="text-small">{selectedLabel}</span>
+		{#if renderSelected && selectedItem}
+			{@render renderSelected(selectedItem)}
+		{:else}
+			<span class="text-small">{selectedLabel}</span>
+		{/if}
 		<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Portal>
@@ -72,15 +84,27 @@
 					<div {...props}>
 						{#each items as item (item.value)}
 							<DropdownMenu.Item
+								disabled={item.disabled}
 								class={cn(
-									'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover',
+									'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
 									value === item.value && 'text-dropdown-item-selected'
 								)}
 								onSelect={() => handleSelect(item)}
 							>
-								<span>{item.label}</span>
-								{#if value === item.value}
-									<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+								{#if renderItem}
+									{@render renderItem(item, value === item.value)}
+								{:else}
+									<span class="flex items-center gap-8">
+										{#if item.icon}
+											<span class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
+												{@render item.icon()}
+											</span>
+										{/if}
+										{item.label}
+									</span>
+									{#if value === item.value}
+										<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+									{/if}
 								{/if}
 							</DropdownMenu.Item>
 						{/each}

package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 type Item = {
     label: string;
     value: string;
+    icon?: Snippet;
+    disabled?: boolean;
 };
 type Props = {
     items: Item[];
@@ -9,6 +12,8 @@ type Props = {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     matchTriggerWidth?: boolean;
+    renderItem?: Snippet<[item: Item, selected: boolean]>;
+    renderSelected?: Snippet<[item: Item]>;
     class?: string;
 };
 declare const IIDropdownInput: import("svelte").Component<Props, {}, "value">;