@insymetri/styleguide 0.1.31 → 0.1.33

package/dist/IICalendar/IICalendar.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import {Calendar} from 'bits-ui'
 	import type {DateValue} from '@internationalized/date'
+	import {today, getLocalTimeZone} from '@internationalized/date'
 	import {cn} from '../utils/cn'
+	import IICalendarGrid from './IICalendarGrid.svelte'
 
 	type Props = {
 		value: DateValue | undefined
@@ -22,12 +24,15 @@
 		disabled = false,
 		class: className,
 	}: Props = $props()
+
+	let placeholder = $state<DateValue>(today(getLocalTimeZone()))
 </script>
 
 <div class={cn('min-w-280', className)}>
 	<Calendar.Root
 		type="single"
 		bind:value
+		bind:placeholder
 		{onValueChange}
 		{minValue}
 		{maxValue}
@@ -35,67 +40,7 @@
 		{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}
+			<IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
 		{/snippet}
 	</Calendar.Root>
 </div>

package/dist/IICalendar/IICalendarGrid.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import {Calendar} from 'bits-ui'
+	import type {DateValue} from '@internationalized/date'
+	import {CalendarDate} from '@internationalized/date'
+	import {IIIconButton} from '../IIIconButton'
+
+	type Month = {
+		value: DateValue
+		weeks: DateValue[][]
+	}
+
+	type Props = {
+		months: Month[]
+		weekdays: string[]
+		placeholder: DateValue
+		onNavigate: (date: DateValue) => void
+	}
+
+	let {months, weekdays, placeholder, onNavigate}: Props = $props()
+
+	type View = 'day' | 'month' | 'year'
+	let view = $state<View>('day')
+
+	const monthNames = [
+		'January', 'February', 'March', 'April', 'May', 'June',
+		'July', 'August', 'September', 'October', 'November', 'December',
+	]
+	const monthNamesShort = [
+		'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+		'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+	]
+
+	const displayedYear = $derived(placeholder.year)
+	const displayedMonth = $derived(placeholder.month)
+
+	const decadeStart = $derived(Math.floor(displayedYear / 10) * 10 - 1)
+	const decadeYears = $derived(Array.from({length: 12}, (_, i) => decadeStart + i))
+
+	function selectMonth(month: number) {
+		onNavigate(new CalendarDate(displayedYear, month, 1))
+		view = 'day'
+	}
+
+	function selectYear(year: number) {
+		onNavigate(new CalendarDate(year, displayedMonth, 1))
+		view = 'month'
+	}
+
+	function prevMonth() {
+		const m = displayedMonth === 1 ? 12 : displayedMonth - 1
+		const y = displayedMonth === 1 ? displayedYear - 1 : displayedYear
+		onNavigate(new CalendarDate(y, m, 1))
+	}
+
+	function nextMonth() {
+		const m = displayedMonth === 12 ? 1 : displayedMonth + 1
+		const y = displayedMonth === 12 ? displayedYear + 1 : displayedYear
+		onNavigate(new CalendarDate(y, m, 1))
+	}
+
+	function prevYear() {
+		onNavigate(new CalendarDate(displayedYear - 1, displayedMonth, 1))
+	}
+
+	function nextYear() {
+		onNavigate(new CalendarDate(displayedYear + 1, displayedMonth, 1))
+	}
+
+	function prevDecade() {
+		onNavigate(new CalendarDate(displayedYear - 10, displayedMonth, 1))
+	}
+
+	function nextDecade() {
+		onNavigate(new CalendarDate(displayedYear + 10, displayedMonth, 1))
+	}
+
+	const headerLabel = $derived(
+		view === 'day'
+			? `${monthNames[displayedMonth - 1]} ${displayedYear}`
+			: view === 'month'
+				? `${displayedYear}`
+				: `${decadeStart + 1} – ${decadeStart + 10}`
+	)
+
+	function onHeaderClick() {
+		if (view === 'day') view = 'month'
+		else if (view === 'month') view = 'year'
+	}
+
+	function onPrev() {
+		if (view === 'day') prevMonth()
+		else if (view === 'month') prevYear()
+		else prevDecade()
+	}
+
+	function onNext() {
+		if (view === 'day') nextMonth()
+		else if (view === 'month') nextYear()
+		else nextDecade()
+	}
+
+	const currentYear = new Date().getFullYear()
+	const currentMonth = new Date().getMonth() + 1
+</script>
+
+<!-- Header -->
+<div class="flex items-center justify-between mb-8 px-3">
+	{#if view === 'day'}
+		<Calendar.PrevButton>
+			{#snippet child({props})}
+				<IIIconButton {...props} iconName="caret-left" variant="ghost" size="sm" />
+			{/snippet}
+		</Calendar.PrevButton>
+	{:else}
+		<IIIconButton iconName="caret-left" variant="ghost" size="sm" onclick={onPrev} />
+	{/if}
+
+	{#if view !== 'year'}
+		<button
+			type="button"
+			class="py-4 px-8 rounded-control text-small-emphasis text-body cursor-default transition-colors duration-fast hover:bg-button-ghost-hover"
+			onclick={onHeaderClick}
+		>
+			{headerLabel}
+		</button>
+	{:else}
+		<span class="py-4 px-8 text-small-emphasis text-body">
+			{headerLabel}
+		</span>
+	{/if}
+
+	{#if view === 'day'}
+		<Calendar.NextButton>
+			{#snippet child({props})}
+				<IIIconButton {...props} iconName="caret-right" variant="ghost" size="sm" />
+			{/snippet}
+		</Calendar.NextButton>
+	{:else}
+		<IIIconButton iconName="caret-right" variant="ghost" size="sm" onclick={onNext} />
+	{/if}
+</div>
+
+<!-- Day view -->
+{#if view === 'day'}
+	{#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 py-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 p-3">
+								<Calendar.Day
+									class="flex items-center justify-center aspect-square w-full rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[selected]:hover:bg-primary data-[today]:shadow-[inset_0_0_0_1px_var(--ii-gray-300)] data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[outside-month]:pointer-events-none data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-30 data-[disabled]:pointer-events-none focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none"
+								>
+									{date.day}
+								</Calendar.Day>
+							</Calendar.Cell>
+						{/each}
+					</Calendar.GridRow>
+				{/each}
+			</Calendar.GridBody>
+		</Calendar.Grid>
+	{/each}
+
+<!-- Month view -->
+{:else if view === 'month'}
+	<div class="grid grid-cols-3 gap-4 p-3">
+		{#each monthNamesShort as name, i (i)}
+			<button
+				type="button"
+				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {i + 1 === displayedMonth ? 'bg-primary text-inverse font-semibold hover:bg-primary' : ''} {i + 1 === currentMonth && displayedYear === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''}"
+				onclick={() => selectMonth(i + 1)}
+			>
+				{name}
+			</button>
+		{/each}
+	</div>
+
+<!-- Year view -->
+{:else}
+	<div class="grid grid-cols-3 gap-4 p-3">
+		{#each decadeYears as year (year)}
+			<button
+				type="button"
+				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {year === displayedYear ? 'bg-primary text-inverse font-semibold hover:bg-primary' : ''} {year === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''} {year === decadeStart || year === decadeStart + 11 ? 'text-tertiary opacity-50' : ''}"
+				onclick={() => selectYear(year)}
+			>
+				{year}
+			</button>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { DateValue } from '@internationalized/date';
+type Month = {
+    value: DateValue;
+    weeks: DateValue[][];
+};
+type Props = {
+    months: Month[];
+    weekdays: string[];
+    placeholder: DateValue;
+    onNavigate: (date: DateValue) => void;
+};
+declare const IICalendarGrid: import("svelte").Component<Props, {}, "">;
+type IICalendarGrid = ReturnType<typeof IICalendarGrid>;
+export default IICalendarGrid;

package/dist/IICalendar/IICalendarStories.svelte

@@ -5,7 +5,6 @@
 	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})

package/dist/IIDateInput/IIDateInput.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import {DatePicker} from 'bits-ui'
 	import type {DateValue} from '@internationalized/date'
-	import {IIIcon} from '../IIIcon'
+	import {today, getLocalTimeZone} from '@internationalized/date'
 	import {IIIconButton} from '../IIIconButton'
 	import {cn} from '../utils/cn'
 	import {useDensity} from '../density'
+	import IICalendarGrid from '../IICalendar/IICalendarGrid.svelte'
 
 	type Props = {
 		value: DateValue | undefined
@@ -38,10 +39,12 @@
 	} as const
 
 	const showError = $derived(error || !!errorMessage)
+
+	let placeholder = $state<DateValue>(today(getLocalTimeZone()))
 </script>
 
 <div class={cn('flex flex-col gap-4', className)}>
-	<DatePicker.Root bind:value {onValueChange} {disabled}>
+	<DatePicker.Root bind:value bind:placeholder {onValueChange} {disabled}>
 		{#if label}
 			<DatePicker.Label class="text-small-emphasis text-secondary">{label}</DatePicker.Label>
 		{/if}
@@ -62,7 +65,7 @@
 						{segValue}
 					</DatePicker.Segment>
 				{/each}
-				<DatePicker.Trigger asChild>
+				<DatePicker.Trigger>
 					{#snippet child({props})}
 						<IIIconButton {...props} iconName="calendar" variant="ghost" size="sm" disabled={disabled} />
 					{/snippet}
@@ -72,67 +75,7 @@
 		<DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
 			<DatePicker.Calendar>
 				{#snippet children({months, weekdays})}
-					<div class="flex items-center justify-between gap-16 mb-12">
-						<DatePicker.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}
-						</DatePicker.MonthSelect>
-						<DatePicker.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}
-						</DatePicker.YearSelect>
-					</div>
-
-					{#each months as month (month.value.toString())}
-						<DatePicker.Grid class="w-full border-collapse">
-							<DatePicker.GridHead>
-								<DatePicker.GridRow class="flex w-full">
-									{#each weekdays as day, i (`day-${i}`)}
-										<DatePicker.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
-											{day.slice(0, 2)}
-										</DatePicker.HeadCell>
-									{/each}
-								</DatePicker.GridRow>
-							</DatePicker.GridHead>
-							<DatePicker.GridBody>
-								{#each month.weeks as weekDates, weekIndex (weekIndex)}
-									<DatePicker.GridRow class="flex w-full">
-										{#each weekDates as date (date.toString())}
-											<DatePicker.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
-												<DatePicker.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}
-												</DatePicker.Day>
-											</DatePicker.Cell>
-										{/each}
-									</DatePicker.GridRow>
-								{/each}
-							</DatePicker.GridBody>
-						</DatePicker.Grid>
-					{/each}
+					<IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
 				{/snippet}
 			</DatePicker.Calendar>
 		</DatePicker.Content>

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -32,6 +32,7 @@
 		renderItem?: Snippet<[Item]>
 		side?: 'top' | 'right' | 'bottom' | 'left'
 		align?: 'start' | 'center' | 'end'
+		collisionPadding?: number
 		triggerClass?: string
 		class?: string
 	}
@@ -44,6 +45,7 @@
 		renderItem,
 		side = 'bottom',
 		align = 'end',
+		collisionPadding = 8,
 		triggerClass,
 		class: className,
 	}: Props = $props()
@@ -113,8 +115,9 @@
 		<DropdownMenu.Content
 			{side}
 			{align}
+			{collisionPadding}
 			class={cn(
-				'min-w-48 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 animate-slide-in motion-reduce:animate-none',
+				'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 animate-slide-in motion-reduce:animate-none',
 				className
 			)}
 		>

package/dist/IIDropdownMenu/IIDropdownMenu.svelte.d.ts

@@ -23,6 +23,7 @@ type Props = {
     renderItem?: Snippet<[Item]>;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
+    collisionPadding?: number;
     triggerClass?: string;
     class?: string;
 };

package/dist/MobileOnboarding/current/CurrentProfileScreen.svelte

@@ -3,7 +3,7 @@
 	import IIInput from '../../IIInput/IIInput.svelte'
 	import IIButton from '../../IIButton/IIButton.svelte'
 	import IIDropdownInput from '../../IIDropdownInput/IIDropdownInput.svelte'
-	import IIDatePicker from '../../IIDatePicker/IIDatePicker.svelte'
+	import IIDateInput from '../../IIDateInput/IIDateInput.svelte'
 
 	type Props = {onContinue?: () => void}
 	let {onContinue}: Props = $props()
@@ -15,6 +15,7 @@
 	let city = $state('')
 	let selectedState = $state<string | undefined>(undefined)
 	let zip = $state('')
+	let dob = $state<import('@internationalized/date').DateValue | undefined>(undefined)
 	let transactionalSms = $state(false)
 	let promotionalSms = $state(false)
 
@@ -46,8 +47,7 @@
 						<IIInput type="text" id="lastName" label="Last Name" bind:value={lastName} />
 					</div>
 					<div class="flex flex-col">
-						<span class="text-small-emphasis text-body mb-4">Date of Birth</span>
-						<IIDatePicker />
+						<IIDateInput bind:value={dob} label="Date of Birth" />
 					</div>
 				</div>
 			</div>

package/dist/icons.d.ts

@@ -56,6 +56,7 @@ export declare const icons: {
     readonly 'clock-countdown': "<path fill=\"currentColor\" d=\"M232 136.66A104.12 104.12 0 1 1 119.34 24a8 8 0 0 1 1.32 16A88.12 88.12 0 1 0 216 135.34a8 8 0 0 1 16 1.32M120 72v56a8 8 0 0 0 8 8h56a8 8 0 0 0 0-16h-48V72a8 8 0 0 0-16 0m40-24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m36 24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m24 36a12 12 0 1 0-12-12a12 12 0 0 0 12 12\"/>";
     readonly 'clock-clockwise': "<path fill=\"currentColor\" d=\"M136 80v43.47l36.12 21.67a8 8 0 0 1-8.24 13.72l-40-24A8 8 0 0 1 120 128V80a8 8 0 0 1 16 0m88-24a8 8 0 0 0-8 8v18c-6.35-7.36-12.83-14.45-20.12-21.83a96 96 0 1 0-2 137.7a8 8 0 0 0-11-11.64a80 80 0 1 1 1.66-114.83c8.14 8.24 15.27 16.18 22.46 24.6h-23a8 8 0 0 0 0 16h40a8 8 0 0 0 8-8V64a8 8 0 0 0-8-8\"/>";
     readonly 'arrows-clockwise': "<path fill=\"currentColor\" d=\"M224 48v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h28.69l-14.63-14.63a79.56 79.56 0 0 0-56.13-23.43h-.45a79.52 79.52 0 0 0-55.89 22.77a8 8 0 0 1-11.18-11.44a96 96 0 0 1 135 .79L208 76.69V48a8 8 0 0 1 16 0m-37.59 135.29a80 80 0 0 1-112.47-.66L59.31 168H88a8 8 0 0 0 0-16H40a8 8 0 0 0-8 8v48a8 8 0 0 0 16 0v-28.69l14.63 14.63A95.43 95.43 0 0 0 130 222.06h.53a95.36 95.36 0 0 0 67.07-27.33a8 8 0 0 0-11.18-11.44Z\"/>";
+    readonly 'floppy-disk': "<path fill=\"currentColor\" d=\"M219.31,72,184,36.69A15.86,15.86,0,0,0,172.69,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V83.31A15.86,15.86,0,0,0,219.31,72ZM168,208H88V152h80Zm40,0H184V152a16,16,0,0,0-16-16H88a16,16,0,0,0-16,16v56H48V48H172.69L208,83.31ZM160,72a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h56A8,8,0,0,1,160,72Z\"/>";
     readonly 'squares-four': "<path fill=\"currentColor\" d=\"M104 40H56a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 64H56V56h48zm96-64h-48a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 64h-48V56h48zm-96 32H56a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64H56v-48h48zm96-64h-48a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-48v-48h48z\"/>";
     readonly 'chart-line': "<path fill=\"currentColor\" d=\"M232 208a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V48a8 8 0 0 1 16 0v94.37L90.73 98a8 8 0 0 1 10.07-.38l58.81 44.11L218.73 90a8 8 0 1 1 10.54 12l-64 56a8 8 0 0 1-10.07.38l-58.81-44.09L40 163.63V200h184a8 8 0 0 1 8 8\"/>";
     readonly 'chart-line-up': "<path fill=\"currentColor\" d=\"M232 208a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V48a8 8 0 0 1 16 0v108.69l50.34-50.35a8 8 0 0 1 11.32 0L128 132.69L180.69 80H160a8 8 0 0 1 0-16h40a8 8 0 0 1 8 8v40a8 8 0 0 1-16 0V91.31l-58.34 58.35a8 8 0 0 1-11.32 0L96 123.31l-56 56V200h184a8 8 0 0 1 8 8\"/>";

package/dist/icons.js

@@ -62,6 +62,8 @@ export const icons = {
     'clock-countdown': `<path fill="currentColor" d="M232 136.66A104.12 104.12 0 1 1 119.34 24a8 8 0 0 1 1.32 16A88.12 88.12 0 1 0 216 135.34a8 8 0 0 1 16 1.32M120 72v56a8 8 0 0 0 8 8h56a8 8 0 0 0 0-16h-48V72a8 8 0 0 0-16 0m40-24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m36 24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m24 36a12 12 0 1 0-12-12a12 12 0 0 0 12 12"/>`,
     'clock-clockwise': `<path fill="currentColor" d="M136 80v43.47l36.12 21.67a8 8 0 0 1-8.24 13.72l-40-24A8 8 0 0 1 120 128V80a8 8 0 0 1 16 0m88-24a8 8 0 0 0-8 8v18c-6.35-7.36-12.83-14.45-20.12-21.83a96 96 0 1 0-2 137.7a8 8 0 0 0-11-11.64a80 80 0 1 1 1.66-114.83c8.14 8.24 15.27 16.18 22.46 24.6h-23a8 8 0 0 0 0 16h40a8 8 0 0 0 8-8V64a8 8 0 0 0-8-8"/>`,
     'arrows-clockwise': `<path fill="currentColor" d="M224 48v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h28.69l-14.63-14.63a79.56 79.56 0 0 0-56.13-23.43h-.45a79.52 79.52 0 0 0-55.89 22.77a8 8 0 0 1-11.18-11.44a96 96 0 0 1 135 .79L208 76.69V48a8 8 0 0 1 16 0m-37.59 135.29a80 80 0 0 1-112.47-.66L59.31 168H88a8 8 0 0 0 0-16H40a8 8 0 0 0-8 8v48a8 8 0 0 0 16 0v-28.69l14.63 14.63A95.43 95.43 0 0 0 130 222.06h.53a95.36 95.36 0 0 0 67.07-27.33a8 8 0 0 0-11.18-11.44Z"/>`,
+    // Files & Storage
+    'floppy-disk': `<path fill="currentColor" d="M219.31,72,184,36.69A15.86,15.86,0,0,0,172.69,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V83.31A15.86,15.86,0,0,0,219.31,72ZM168,208H88V152h80Zm40,0H184V152a16,16,0,0,0-16-16H88a16,16,0,0,0-16,16v56H48V48H172.69L208,83.31ZM160,72a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h56A8,8,0,0,1,160,72Z"/>`,
     // UI Elements
     'squares-four': `<path fill="currentColor" d="M104 40H56a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 64H56V56h48zm96-64h-48a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 64h-48V56h48zm-96 32H56a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64H56v-48h48zm96-64h-48a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-48v-48h48z"/>`,
     'chart-line': `<path fill="currentColor" d="M232 208a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V48a8 8 0 0 1 16 0v94.37L90.73 98a8 8 0 0 1 10.07-.38l58.81 44.11L218.73 90a8 8 0 1 1 10.54 12l-64 56a8 8 0 0 1-10.07.38l-58.81-44.09L40 163.63V200h184a8 8 0 0 1 8 8"/>`,

package/dist/index.d.ts

@@ -14,7 +14,6 @@ export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
 export { IIDateInput } from './IIDateInput';
-export { IIDatePicker } from './IIDatePicker';
 export { IIDropdownInput } from './IIDropdownInput';
 export { IIDropdownMenu } from './IIDropdownMenu';
 export { IIEditableBadges } from './IIEditableBadges';

package/dist/index.js

@@ -18,7 +18,6 @@ export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
 export { IIDateInput } from './IIDateInput';
-export { IIDatePicker } from './IIDatePicker';
 export { IIDropdownInput } from './IIDropdownInput';
 export { IIDropdownMenu } from './IIDropdownMenu';
 export { IIEditableBadges } from './IIEditableBadges';

package/package.json

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

package/dist/IIDatePicker/IIDatePicker.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-	import {DatePicker} from 'bits-ui'
-	import type {DateValue} from '@internationalized/date'
-	import {IIIcon} from '../IIIcon'
-	import {useDensity} from '../density'
-
-	type Props = {
-		value: DateValue | undefined
-		label?: string
-		onValueChange?: (value: DateValue | undefined) => void
-	}
-
-	let {value = $bindable(), label, onValueChange}: Props = $props()
-
-	const density = useDensity()
-
-	const densityClasses = {
-		compact: 'rounded-control text-tiny',
-		default: 'rounded-control text-small',
-		comfortable: 'rounded-control text-small',
-		mobile: 'rounded-control text-default',
-	} as const
-</script>
-
-<DatePicker.Root bind:value {onValueChange}>
-	{#if label}
-		<DatePicker.Label class="text-small-emphasis text-gray-700 mb-8 block">{label}</DatePicker.Label>
-	{/if}
-	<div class="relative">
-		<DatePicker.Input
-			class={`flex items-center gap-4 py-5 px-12 border border-strong bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary ${densityClasses[density.value]} text-gray-800`}
-		>
-			{#snippet children({segments})}
-				{#each segments as { part, value: segValue }, i (`${part}-${i}`)}
-					<DatePicker.Segment
-						{part}
-						class="py-4 min-w-[2ch] text-center outline-none cursor-text rounded-4 transition-all duration-fast focus:bg-primary focus:text-inverse data-[placeholder]:text-tertiary motion-reduce:transition-none"
-					>
-						{segValue}
-					</DatePicker.Segment>
-				{/each}
-				<DatePicker.Trigger
-					class="[all:unset] flex items-center justify-center p-4 ml-auto rounded-4 cursor-default text-secondary transition-all duration-fast hover:bg-gray-100 hover:text-body [&_svg]:w-11 [&_svg]:h-11 motion-reduce:transition-none"
-				>
-					<IIIcon iconName="calendar" />
-				</DatePicker.Trigger>
-			{/snippet}
-		</DatePicker.Input>
-	</div>
-	<DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
-		<DatePicker.Calendar>
-			{#snippet children({months, weekdays})}
-				<div class="flex items-center justify-between gap-16 mb-12">
-					<DatePicker.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}
-					</DatePicker.MonthSelect>
-					<DatePicker.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}
-					</DatePicker.YearSelect>
-				</div>
-
-				{#each months as month (month.value.toString())}
-					<DatePicker.Grid class="w-full border-collapse">
-						<DatePicker.GridHead>
-							<DatePicker.GridRow class="flex w-full">
-								{#each weekdays as day, i (`day-${i}`)}
-									<DatePicker.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
-										{day.slice(0, 2)}
-									</DatePicker.HeadCell>
-								{/each}
-							</DatePicker.GridRow>
-						</DatePicker.GridHead>
-						<DatePicker.GridBody>
-							{#each month.weeks as weekDates, weekIndex (weekIndex)}
-								<DatePicker.GridRow class="flex w-full">
-									{#each weekDates as date (date.toString())}
-										<DatePicker.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
-											<DatePicker.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}
-											</DatePicker.Day>
-										</DatePicker.Cell>
-									{/each}
-								</DatePicker.GridRow>
-							{/each}
-						</DatePicker.GridBody>
-					</DatePicker.Grid>
-				{/each}
-			{/snippet}
-		</DatePicker.Calendar>
-	</DatePicker.Content>
-</DatePicker.Root>

package/dist/IIDatePicker/IIDatePicker.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { DateValue } from '@internationalized/date';
-type Props = {
-    value: DateValue | undefined;
-    label?: string;
-    onValueChange?: (value: DateValue | undefined) => void;
-};
-declare const IIDatePicker: import("svelte").Component<Props, {}, "value">;
-type IIDatePicker = ReturnType<typeof IIDatePicker>;
-export default IIDatePicker;

package/dist/IIDatePicker/index.d.ts

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

package/dist/IIDatePicker/index.js

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