@insymetri/styleguide 0.1.32 → 0.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/IICalendar/IICalendar.svelte +6 -61
  2. package/dist/IICalendar/IICalendarGrid.svelte +201 -0
  3. package/dist/IICalendar/IICalendarGrid.svelte.d.ts +14 -0
  4. package/dist/IICalendar/IICalendarStories.svelte +0 -1
  5. package/dist/IIDateInput/IIDateInput.svelte +7 -64
  6. package/dist/IIDropdownMenu/IIDropdownMenu.svelte +4 -1
  7. package/dist/IIDropdownMenu/IIDropdownMenu.svelte.d.ts +1 -0
  8. package/dist/MobileOnboarding/current/CurrentProfileScreen.svelte +3 -3
  9. package/dist/icons.d.ts +1 -0
  10. package/dist/icons.js +1 -0
  11. package/dist/index.d.ts +0 -1
  12. package/dist/index.js +0 -1
  13. package/package.json +1 -1
  14. package/dist/IIDatePicker/IIDatePicker.svelte +0 -117
  15. package/dist/IIDatePicker/IIDatePicker.svelte.d.ts +0 -9
  16. package/dist/IIDatePicker/index.d.ts +0 -1
  17. package/dist/IIDatePicker/index.js +0 -1
package/dist/IICalendar/IICalendar.svelte CHANGED
@@ -1,7 +1,9 @@
1
1
  <script lang="ts">
2
2
  import {Calendar} from 'bits-ui'
3
3
  import type {DateValue} from '@internationalized/date'
4
+ import {today, getLocalTimeZone} from '@internationalized/date'
4
5
  import {cn} from '../utils/cn'
6
+ import IICalendarGrid from './IICalendarGrid.svelte'
5
7
 
6
8
  type Props = {
7
9
  value: DateValue | undefined
@@ -22,12 +24,15 @@
22
24
  disabled = false,
23
25
  class: className,
24
26
  }: Props = $props()
27
+
28
+ let placeholder = $state<DateValue>(today(getLocalTimeZone()))
25
29
  </script>
26
30
 
27
31
  <div class={cn('min-w-280', className)}>
28
32
  <Calendar.Root
29
33
  type="single"
30
34
  bind:value
35
+ bind:placeholder
31
36
  {onValueChange}
32
37
  {minValue}
33
38
  {maxValue}
@@ -35,67 +40,7 @@
35
40
  {disabled}
36
41
  >
37
42
  {#snippet children({months, weekdays})}
38
- <div class="flex items-center justify-between gap-16 mb-12">
39
- <Calendar.MonthSelect aria-label="Select month" monthFormat="long">
40
- {#snippet child({props, monthItems, selectedMonthItem})}
41
- <select
42
- {...props}
43
- 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"
44
- 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"
45
- >
46
- {#each monthItems as month (month.value)}
47
- <option value={month.value} selected={month.value === selectedMonthItem.value}>
48
- {month.label}
49
- </option>
50
- {/each}
51
- </select>
52
- {/snippet}
53
- </Calendar.MonthSelect>
54
- <Calendar.YearSelect aria-label="Select year">
55
- {#snippet child({props, yearItems, selectedYearItem})}
56
- <select
57
- {...props}
58
- class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none"
59
- 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"
60
- >
61
- {#each yearItems as year (year.value)}
62
- <option value={year.value} selected={year.value === selectedYearItem.value}>
63
- {year.label}
64
- </option>
65
- {/each}
66
- </select>
67
- {/snippet}
68
- </Calendar.YearSelect>
69
- </div>
70
-
71
- {#each months as month (month.value.toString())}
72
- <Calendar.Grid class="w-full border-collapse">
73
- <Calendar.GridHead>
74
- <Calendar.GridRow class="flex w-full">
75
- {#each weekdays as day, i (`day-${i}`)}
76
- <Calendar.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
77
- {day.slice(0, 2)}
78
- </Calendar.HeadCell>
79
- {/each}
80
- </Calendar.GridRow>
81
- </Calendar.GridHead>
82
- <Calendar.GridBody>
83
- {#each month.weeks as weekDates, weekIndex (weekIndex)}
84
- <Calendar.GridRow class="flex w-full">
85
- {#each weekDates as date (date.toString())}
86
- <Calendar.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
87
- <Calendar.Day
88
- 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"
89
- >
90
- {date.day}
91
- </Calendar.Day>
92
- </Calendar.Cell>
93
- {/each}
94
- </Calendar.GridRow>
95
- {/each}
96
- </Calendar.GridBody>
97
- </Calendar.Grid>
98
- {/each}
43
+ <IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
99
44
  {/snippet}
100
45
  </Calendar.Root>
101
46
  </div>
package/dist/IICalendar/IICalendarGrid.svelte ADDED
@@ -0,0 +1,201 @@
1
+ <script lang="ts">
2
+ import {Calendar} from 'bits-ui'
3
+ import type {DateValue} from '@internationalized/date'
4
+ import {CalendarDate} from '@internationalized/date'
5
+ import {IIIconButton} from '../IIIconButton'
6
+
7
+ type Month = {
8
+ value: DateValue
9
+ weeks: DateValue[][]
10
+ }
11
+
12
+ type Props = {
13
+ months: Month[]
14
+ weekdays: string[]
15
+ placeholder: DateValue
16
+ onNavigate: (date: DateValue) => void
17
+ }
18
+
19
+ let {months, weekdays, placeholder, onNavigate}: Props = $props()
20
+
21
+ type View = 'day' | 'month' | 'year'
22
+ let view = $state<View>('day')
23
+
24
+ const monthNames = [
25
+ 'January', 'February', 'March', 'April', 'May', 'June',
26
+ 'July', 'August', 'September', 'October', 'November', 'December',
27
+ ]
28
+ const monthNamesShort = [
29
+ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
30
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
31
+ ]
32
+
33
+ const displayedYear = $derived(placeholder.year)
34
+ const displayedMonth = $derived(placeholder.month)
35
+
36
+ const decadeStart = $derived(Math.floor(displayedYear / 10) * 10 - 1)
37
+ const decadeYears = $derived(Array.from({length: 12}, (_, i) => decadeStart + i))
38
+
39
+ function selectMonth(month: number) {
40
+ onNavigate(new CalendarDate(displayedYear, month, 1))
41
+ view = 'day'
42
+ }
43
+
44
+ function selectYear(year: number) {
45
+ onNavigate(new CalendarDate(year, displayedMonth, 1))
46
+ view = 'month'
47
+ }
48
+
49
+ function prevMonth() {
50
+ const m = displayedMonth === 1 ? 12 : displayedMonth - 1
51
+ const y = displayedMonth === 1 ? displayedYear - 1 : displayedYear
52
+ onNavigate(new CalendarDate(y, m, 1))
53
+ }
54
+
55
+ function nextMonth() {
56
+ const m = displayedMonth === 12 ? 1 : displayedMonth + 1
57
+ const y = displayedMonth === 12 ? displayedYear + 1 : displayedYear
58
+ onNavigate(new CalendarDate(y, m, 1))
59
+ }
60
+
61
+ function prevYear() {
62
+ onNavigate(new CalendarDate(displayedYear - 1, displayedMonth, 1))
63
+ }
64
+
65
+ function nextYear() {
66
+ onNavigate(new CalendarDate(displayedYear + 1, displayedMonth, 1))
67
+ }
68
+
69
+ function prevDecade() {
70
+ onNavigate(new CalendarDate(displayedYear - 10, displayedMonth, 1))
71
+ }
72
+
73
+ function nextDecade() {
74
+ onNavigate(new CalendarDate(displayedYear + 10, displayedMonth, 1))
75
+ }
76
+
77
+ const headerLabel = $derived(
78
+ view === 'day'
79
+ ? `${monthNames[displayedMonth - 1]} ${displayedYear}`
80
+ : view === 'month'
81
+ ? `${displayedYear}`
82
+ : `${decadeStart + 1} – ${decadeStart + 10}`
83
+ )
84
+
85
+ function onHeaderClick() {
86
+ if (view === 'day') view = 'month'
87
+ else if (view === 'month') view = 'year'
88
+ }
89
+
90
+ function onPrev() {
91
+ if (view === 'day') prevMonth()
92
+ else if (view === 'month') prevYear()
93
+ else prevDecade()
94
+ }
95
+
96
+ function onNext() {
97
+ if (view === 'day') nextMonth()
98
+ else if (view === 'month') nextYear()
99
+ else nextDecade()
100
+ }
101
+
102
+ const currentYear = new Date().getFullYear()
103
+ const currentMonth = new Date().getMonth() + 1
104
+ </script>
105
+
106
+ <!-- Header -->
107
+ <div class="flex items-center justify-between mb-8 px-3">
108
+ {#if view === 'day'}
109
+ <Calendar.PrevButton>
110
+ {#snippet child({props})}
111
+ <IIIconButton {...props} iconName="caret-left" variant="ghost" size="sm" />
112
+ {/snippet}
113
+ </Calendar.PrevButton>
114
+ {:else}
115
+ <IIIconButton iconName="caret-left" variant="ghost" size="sm" onclick={onPrev} />
116
+ {/if}
117
+
118
+ {#if view !== 'year'}
119
+ <button
120
+ type="button"
121
+ class="py-4 px-8 rounded-control text-small-emphasis text-body cursor-default transition-colors duration-fast hover:bg-button-ghost-hover"
122
+ onclick={onHeaderClick}
123
+ >
124
+ {headerLabel}
125
+ </button>
126
+ {:else}
127
+ <span class="py-4 px-8 text-small-emphasis text-body">
128
+ {headerLabel}
129
+ </span>
130
+ {/if}
131
+
132
+ {#if view === 'day'}
133
+ <Calendar.NextButton>
134
+ {#snippet child({props})}
135
+ <IIIconButton {...props} iconName="caret-right" variant="ghost" size="sm" />
136
+ {/snippet}
137
+ </Calendar.NextButton>
138
+ {:else}
139
+ <IIIconButton iconName="caret-right" variant="ghost" size="sm" onclick={onNext} />
140
+ {/if}
141
+ </div>
142
+
143
+ <!-- Day view -->
144
+ {#if view === 'day'}
145
+ {#each months as month (month.value.toString())}
146
+ <Calendar.Grid class="w-full border-collapse">
147
+ <Calendar.GridHead>
148
+ <Calendar.GridRow class="flex w-full">
149
+ {#each weekdays as day, i (`day-${i}`)}
150
+ <Calendar.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary py-4 uppercase">
151
+ {day.slice(0, 2)}
152
+ </Calendar.HeadCell>
153
+ {/each}
154
+ </Calendar.GridRow>
155
+ </Calendar.GridHead>
156
+ <Calendar.GridBody>
157
+ {#each month.weeks as weekDates, weekIndex (weekIndex)}
158
+ <Calendar.GridRow class="flex w-full">
159
+ {#each weekDates as date (date.toString())}
160
+ <Calendar.Cell {date} month={month.value} class="flex-1 p-3">
161
+ <Calendar.Day
162
+ 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"
163
+ >
164
+ {date.day}
165
+ </Calendar.Day>
166
+ </Calendar.Cell>
167
+ {/each}
168
+ </Calendar.GridRow>
169
+ {/each}
170
+ </Calendar.GridBody>
171
+ </Calendar.Grid>
172
+ {/each}
173
+
174
+ <!-- Month view -->
175
+ {:else if view === 'month'}
176
+ <div class="grid grid-cols-3 gap-4 p-3">
177
+ {#each monthNamesShort as name, i (i)}
178
+ <button
179
+ type="button"
180
+ 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)]' : ''}"
181
+ onclick={() => selectMonth(i + 1)}
182
+ >
183
+ {name}
184
+ </button>
185
+ {/each}
186
+ </div>
187
+
188
+ <!-- Year view -->
189
+ {:else}
190
+ <div class="grid grid-cols-3 gap-4 p-3">
191
+ {#each decadeYears as year (year)}
192
+ <button
193
+ type="button"
194
+ 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' : ''}"
195
+ onclick={() => selectYear(year)}
196
+ >
197
+ {year}
198
+ </button>
199
+ {/each}
200
+ </div>
201
+ {/if}
package/dist/IICalendar/IICalendarGrid.svelte.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { DateValue } from '@internationalized/date';
2
+ type Month = {
3
+ value: DateValue;
4
+ weeks: DateValue[][];
5
+ };
6
+ type Props = {
7
+ months: Month[];
8
+ weekdays: string[];
9
+ placeholder: DateValue;
10
+ onNavigate: (date: DateValue) => void;
11
+ };
12
+ declare const IICalendarGrid: import("svelte").Component<Props, {}, "">;
13
+ type IICalendarGrid = ReturnType<typeof IICalendarGrid>;
14
+ export default IICalendarGrid;
package/dist/IICalendar/IICalendarStories.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  let basicValue = $state<import('@internationalized/date').DateValue | undefined>(undefined)
6
6
  let presetValue = $state<import('@internationalized/date').DateValue | undefined>(new CalendarDate(2026, 3, 17))
7
7
  let constrainedValue = $state<import('@internationalized/date').DateValue | undefined>(undefined)
8
-
9
8
  const todayDate = today(getLocalTimeZone())
10
9
  const minDate = todayDate
11
10
  const maxDate = todayDate.add({months: 3})
package/dist/IIDateInput/IIDateInput.svelte CHANGED
@@ -1,10 +1,11 @@
1
1
  <script lang="ts">
2
2
  import {DatePicker} from 'bits-ui'
3
3
  import type {DateValue} from '@internationalized/date'
4
- import {IIIcon} from '../IIIcon'
4
+ import {today, getLocalTimeZone} from '@internationalized/date'
5
5
  import {IIIconButton} from '../IIIconButton'
6
6
  import {cn} from '../utils/cn'
7
7
  import {useDensity} from '../density'
8
+ import IICalendarGrid from '../IICalendar/IICalendarGrid.svelte'
8
9
 
9
10
  type Props = {
10
11
  value: DateValue | undefined
@@ -38,10 +39,12 @@
38
39
  } as const
39
40
 
40
41
  const showError = $derived(error || !!errorMessage)
42
+
43
+ let placeholder = $state<DateValue>(today(getLocalTimeZone()))
41
44
  </script>
42
45
 
43
46
  <div class={cn('flex flex-col gap-4', className)}>
44
- <DatePicker.Root bind:value {onValueChange} {disabled}>
47
+ <DatePicker.Root bind:value bind:placeholder {onValueChange} {disabled}>
45
48
  {#if label}
46
49
  <DatePicker.Label class="text-small-emphasis text-secondary">{label}</DatePicker.Label>
47
50
  {/if}
@@ -62,7 +65,7 @@
62
65
  {segValue}
63
66
  </DatePicker.Segment>
64
67
  {/each}
65
- <DatePicker.Trigger asChild>
68
+ <DatePicker.Trigger>
66
69
  {#snippet child({props})}
67
70
  <IIIconButton {...props} iconName="calendar" variant="ghost" size="sm" disabled={disabled} />
68
71
  {/snippet}
@@ -72,67 +75,7 @@
72
75
  <DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
73
76
  <DatePicker.Calendar>
74
77
  {#snippet children({months, weekdays})}
75
- <div class="flex items-center justify-between gap-16 mb-12">
76
- <DatePicker.MonthSelect aria-label="Select month" monthFormat="long">
77
- {#snippet child({props, monthItems, selectedMonthItem})}
78
- <select
79
- {...props}
80
- 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"
81
- 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"
82
- >
83
- {#each monthItems as month (month.value)}
84
- <option value={month.value} selected={month.value === selectedMonthItem.value}>
85
- {month.label}
86
- </option>
87
- {/each}
88
- </select>
89
- {/snippet}
90
- </DatePicker.MonthSelect>
91
- <DatePicker.YearSelect aria-label="Select year">
92
- {#snippet child({props, yearItems, selectedYearItem})}
93
- <select
94
- {...props}
95
- class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none"
96
- 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"
97
- >
98
- {#each yearItems as year (year.value)}
99
- <option value={year.value} selected={year.value === selectedYearItem.value}>
100
- {year.label}
101
- </option>
102
- {/each}
103
- </select>
104
- {/snippet}
105
- </DatePicker.YearSelect>
106
- </div>
107
-
108
- {#each months as month (month.value.toString())}
109
- <DatePicker.Grid class="w-full border-collapse">
110
- <DatePicker.GridHead>
111
- <DatePicker.GridRow class="flex w-full">
112
- {#each weekdays as day, i (`day-${i}`)}
113
- <DatePicker.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
114
- {day.slice(0, 2)}
115
- </DatePicker.HeadCell>
116
- {/each}
117
- </DatePicker.GridRow>
118
- </DatePicker.GridHead>
119
- <DatePicker.GridBody>
120
- {#each month.weeks as weekDates, weekIndex (weekIndex)}
121
- <DatePicker.GridRow class="flex w-full">
122
- {#each weekDates as date (date.toString())}
123
- <DatePicker.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
124
- <DatePicker.Day
125
- 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"
126
- >
127
- {date.day}
128
- </DatePicker.Day>
129
- </DatePicker.Cell>
130
- {/each}
131
- </DatePicker.GridRow>
132
- {/each}
133
- </DatePicker.GridBody>
134
- </DatePicker.Grid>
135
- {/each}
78
+ <IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
136
79
  {/snippet}
137
80
  </DatePicker.Calendar>
138
81
  </DatePicker.Content>
package/dist/IIDropdownMenu/IIDropdownMenu.svelte CHANGED
@@ -32,6 +32,7 @@
32
32
  renderItem?: Snippet<[Item]>
33
33
  side?: 'top' | 'right' | 'bottom' | 'left'
34
34
  align?: 'start' | 'center' | 'end'
35
+ collisionPadding?: number
35
36
  triggerClass?: string
36
37
  class?: string
37
38
  }
@@ -44,6 +45,7 @@
44
45
  renderItem,
45
46
  side = 'bottom',
46
47
  align = 'end',
48
+ collisionPadding = 8,
47
49
  triggerClass,
48
50
  class: className,
49
51
  }: Props = $props()
@@ -113,8 +115,9 @@
113
115
  <DropdownMenu.Content
114
116
  {side}
115
117
  {align}
118
+ {collisionPadding}
116
119
  class={cn(
117
- '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',
120
+ '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',
118
121
  className
119
122
  )}
120
123
  >
package/dist/IIDropdownMenu/IIDropdownMenu.svelte.d.ts CHANGED
@@ -23,6 +23,7 @@ type Props = {
23
23
  renderItem?: Snippet<[Item]>;
24
24
  side?: 'top' | 'right' | 'bottom' | 'left';
25
25
  align?: 'start' | 'center' | 'end';
26
+ collisionPadding?: number;
26
27
  triggerClass?: string;
27
28
  class?: string;
28
29
  };
package/dist/MobileOnboarding/current/CurrentProfileScreen.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
  import IIInput from '../../IIInput/IIInput.svelte'
4
4
  import IIButton from '../../IIButton/IIButton.svelte'
5
5
  import IIDropdownInput from '../../IIDropdownInput/IIDropdownInput.svelte'
6
- import IIDatePicker from '../../IIDatePicker/IIDatePicker.svelte'
6
+ import IIDateInput from '../../IIDateInput/IIDateInput.svelte'
7
7
 
8
8
  type Props = {onContinue?: () => void}
9
9
  let {onContinue}: Props = $props()
@@ -15,6 +15,7 @@
15
15
  let city = $state('')
16
16
  let selectedState = $state<string | undefined>(undefined)
17
17
  let zip = $state('')
18
+ let dob = $state<import('@internationalized/date').DateValue | undefined>(undefined)
18
19
  let transactionalSms = $state(false)
19
20
  let promotionalSms = $state(false)
20
21
 
@@ -46,8 +47,7 @@
46
47
  <IIInput type="text" id="lastName" label="Last Name" bind:value={lastName} />
47
48
  </div>
48
49
  <div class="flex flex-col">
49
- <span class="text-small-emphasis text-body mb-4">Date of Birth</span>
50
- <IIDatePicker />
50
+ <IIDateInput bind:value={dob} label="Date of Birth" />
51
51
  </div>
52
52
  </div>
53
53
  </div>
package/dist/icons.d.ts CHANGED
@@ -42,6 +42,7 @@ export declare const icons: {
42
42
  readonly 'file-text': "<path fill=\"currentColor\" d=\"m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48zm-32-80a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8\"/>";
43
43
  readonly article: "<path fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 160H40V56h176zM184 96a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8\"/>";
44
44
  readonly 'clipboard-text': "<path fill=\"currentColor\" d=\"M168 152a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m-8-40H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16m56-64v168a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h36.26a47.92 47.92 0 0 1 71.48 0H200a16 16 0 0 1 16 16M96 64h64a32 32 0 0 0-64 0m104-16h-26.75A47.9 47.9 0 0 1 176 64v8a8 8 0 0 1-8 8H88a8 8 0 0 1-8-8v-8a47.9 47.9 0 0 1 2.75-16H56v168h144Z\"/>";
45
+ readonly link: "<path fill=\"currentColor\" d=\"M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z\"/>";
45
46
  readonly 'upload-simple': "<path fill=\"currentColor\" d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 77.66L120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32\"/>";
46
47
  readonly 'note-pencil': "<path fill=\"currentColor\" d=\"m229.66 58.34l-32-32a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 88 128v32a8 8 0 0 0 8 8h32a8 8 0 0 0 5.66-2.34l96-96a8 8 0 0 0 0-11.32M124.69 152H104v-20.69l64-64L188.69 88ZM200 76.69L179.31 56L192 43.31L212.69 64ZM224 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v160h160v-80a8 8 0 0 1 16 0\"/>";
47
48
  readonly 'pencil-simple': "<path fill=\"currentColor\" d=\"m227.31 73.37l-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120ZM192 108.68L147.31 64l24-24L216 84.68Z\"/>";
package/dist/icons.js CHANGED
@@ -46,6 +46,7 @@ export const icons = {
46
46
  'file-text': `<path fill="currentColor" d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48zm-32-80a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8"/>`,
47
47
  article: `<path fill="currentColor" d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 160H40V56h176zM184 96a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8"/>`,
48
48
  'clipboard-text': `<path fill="currentColor" d="M168 152a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m-8-40H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16m56-64v168a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h36.26a47.92 47.92 0 0 1 71.48 0H200a16 16 0 0 1 16 16M96 64h64a32 32 0 0 0-64 0m104-16h-26.75A47.9 47.9 0 0 1 176 64v8a8 8 0 0 1-8 8H88a8 8 0 0 1-8-8v-8a47.9 47.9 0 0 1 2.75-16H56v168h144Z"/>`,
49
+ link: `<path fill="currentColor" d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"/>`,
49
50
  'upload-simple': `<path fill="currentColor" d="M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 77.66L120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32"/>`,
50
51
  'note-pencil': `<path fill="currentColor" d="m229.66 58.34l-32-32a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 88 128v32a8 8 0 0 0 8 8h32a8 8 0 0 0 5.66-2.34l96-96a8 8 0 0 0 0-11.32M124.69 152H104v-20.69l64-64L188.69 88ZM200 76.69L179.31 56L192 43.31L212.69 64ZM224 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v160h160v-80a8 8 0 0 1 16 0"/>`,
51
52
  'pencil-simple': `<path fill="currentColor" d="m227.31 73.37l-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120ZM192 108.68L147.31 64l24-24L216 84.68Z"/>`,
package/dist/index.d.ts CHANGED
@@ -14,7 +14,6 @@ export { IICheckbox } from './IICheckbox';
14
14
  export { IICheckboxList } from './IICheckboxList';
15
15
  export { IICombobox } from './IICombobox';
16
16
  export { IIDateInput } from './IIDateInput';
17
- export { IIDatePicker } from './IIDatePicker';
18
17
  export { IIDropdownInput } from './IIDropdownInput';
19
18
  export { IIDropdownMenu } from './IIDropdownMenu';
20
19
  export { IIEditableBadges } from './IIEditableBadges';
package/dist/index.js CHANGED
@@ -18,7 +18,6 @@ export { IICheckbox } from './IICheckbox';
18
18
  export { IICheckboxList } from './IICheckboxList';
19
19
  export { IICombobox } from './IICombobox';
20
20
  export { IIDateInput } from './IIDateInput';
21
- export { IIDatePicker } from './IIDatePicker';
22
21
  export { IIDropdownInput } from './IIDropdownInput';
23
22
  export { IIDropdownMenu } from './IIDropdownMenu';
24
23
  export { IIEditableBadges } from './IIEditableBadges';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.32",
3
+ "version": "0.1.34",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {
package/dist/IIDatePicker/IIDatePicker.svelte DELETED
@@ -1,117 +0,0 @@
1
- <script lang="ts">
2
- import {DatePicker} from 'bits-ui'
3
- import type {DateValue} from '@internationalized/date'
4
- import {IIIcon} from '../IIIcon'
5
- import {useDensity} from '../density'
6
-
7
- type Props = {
8
- value: DateValue | undefined
9
- label?: string
10
- onValueChange?: (value: DateValue | undefined) => void
11
- }
12
-
13
- let {value = $bindable(), label, onValueChange}: Props = $props()
14
-
15
- const density = useDensity()
16
-
17
- const densityClasses = {
18
- compact: 'rounded-control text-tiny',
19
- default: 'rounded-control text-small',
20
- comfortable: 'rounded-control text-small',
21
- mobile: 'rounded-control text-default',
22
- } as const
23
- </script>
24
-
25
- <DatePicker.Root bind:value {onValueChange}>
26
- {#if label}
27
- <DatePicker.Label class="text-small-emphasis text-gray-700 mb-8 block">{label}</DatePicker.Label>
28
- {/if}
29
- <div class="relative">
30
- <DatePicker.Input
31
- 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`}
32
- >
33
- {#snippet children({segments})}
34
- {#each segments as { part, value: segValue }, i (`${part}-${i}`)}
35
- <DatePicker.Segment
36
- {part}
37
- 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"
38
- >
39
- {segValue}
40
- </DatePicker.Segment>
41
- {/each}
42
- <DatePicker.Trigger
43
- 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"
44
- >
45
- <IIIcon iconName="calendar" />
46
- </DatePicker.Trigger>
47
- {/snippet}
48
- </DatePicker.Input>
49
- </div>
50
- <DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
51
- <DatePicker.Calendar>
52
- {#snippet children({months, weekdays})}
53
- <div class="flex items-center justify-between gap-16 mb-12">
54
- <DatePicker.MonthSelect aria-label="Select month" monthFormat="long">
55
- {#snippet child({props, monthItems, selectedMonthItem})}
56
- <select
57
- {...props}
58
- 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"
59
- 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"
60
- >
61
- {#each monthItems as month (month.value)}
62
- <option value={month.value} selected={month.value === selectedMonthItem.value}>
63
- {month.label}
64
- </option>
65
- {/each}
66
- </select>
67
- {/snippet}
68
- </DatePicker.MonthSelect>
69
- <DatePicker.YearSelect aria-label="Select year">
70
- {#snippet child({props, yearItems, selectedYearItem})}
71
- <select
72
- {...props}
73
- class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none"
74
- 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"
75
- >
76
- {#each yearItems as year (year.value)}
77
- <option value={year.value} selected={year.value === selectedYearItem.value}>
78
- {year.label}
79
- </option>
80
- {/each}
81
- </select>
82
- {/snippet}
83
- </DatePicker.YearSelect>
84
- </div>
85
-
86
- {#each months as month (month.value.toString())}
87
- <DatePicker.Grid class="w-full border-collapse">
88
- <DatePicker.GridHead>
89
- <DatePicker.GridRow class="flex w-full">
90
- {#each weekdays as day, i (`day-${i}`)}
91
- <DatePicker.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
92
- {day.slice(0, 2)}
93
- </DatePicker.HeadCell>
94
- {/each}
95
- </DatePicker.GridRow>
96
- </DatePicker.GridHead>
97
- <DatePicker.GridBody>
98
- {#each month.weeks as weekDates, weekIndex (weekIndex)}
99
- <DatePicker.GridRow class="flex w-full">
100
- {#each weekDates as date (date.toString())}
101
- <DatePicker.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
102
- <DatePicker.Day
103
- 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"
104
- >
105
- {date.day}
106
- </DatePicker.Day>
107
- </DatePicker.Cell>
108
- {/each}
109
- </DatePicker.GridRow>
110
- {/each}
111
- </DatePicker.GridBody>
112
- </DatePicker.Grid>
113
- {/each}
114
- {/snippet}
115
- </DatePicker.Calendar>
116
- </DatePicker.Content>
117
- </DatePicker.Root>
package/dist/IIDatePicker/IIDatePicker.svelte.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import type { DateValue } from '@internationalized/date';
2
- type Props = {
3
- value: DateValue | undefined;
4
- label?: string;
5
- onValueChange?: (value: DateValue | undefined) => void;
6
- };
7
- declare const IIDatePicker: import("svelte").Component<Props, {}, "value">;
8
- type IIDatePicker = ReturnType<typeof IIDatePicker>;
9
- export default IIDatePicker;
package/dist/IIDatePicker/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { default as IIDatePicker } from './IIDatePicker.svelte';
package/dist/IIDatePicker/index.js DELETED
@@ -1 +0,0 @@
1
- export { default as IIDatePicker } from './IIDatePicker.svelte';