@insymetri/styleguide 0.1.52 → 0.1.54

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.
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import type {Snippet} from 'svelte'
3
+ import {fly} from 'svelte/transition'
3
4
  import type {VirtualElement} from '@floating-ui/dom'
4
5
  import {cn} from '../utils/cn'
5
6
  import {IIIcon} from '../IIIcon'
@@ -287,6 +288,7 @@
287
288
  data-menu-content
288
289
  class={cn(menuStyles.content, className)}
289
290
  onkeydown={handleMenuKeydown}
291
+ transition:fly={{y: -4, duration: 150}}
290
292
  >
291
293
  {@render menuEntries(items)}
292
294
  </div>
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import {DatePicker} from 'bits-ui'
3
+ import {fly} from 'svelte/transition'
3
4
  import type {DateValue} from '@internationalized/date'
4
5
  import {today, getLocalTimeZone} from '@internationalized/date'
5
6
  import {IIIconButton} from '../IIIconButton'
@@ -100,12 +101,24 @@
100
101
  </DatePicker.Trigger>
101
102
  {/snippet}
102
103
  </DatePicker.Input>
103
- <DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
104
- <DatePicker.Calendar>
105
- {#snippet children({months, weekdays})}
106
- <IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
107
- {/snippet}
108
- </DatePicker.Calendar>
104
+ <DatePicker.Content forceMount sideOffset={8}>
105
+ {#snippet child({props, wrapperProps, open})}
106
+ {#if open}
107
+ <div {...wrapperProps}>
108
+ <div
109
+ {...props}
110
+ class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280"
111
+ transition:fly={{y: -4, duration: 150}}
112
+ >
113
+ <DatePicker.Calendar>
114
+ {#snippet children({months, weekdays})}
115
+ <IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
116
+ {/snippet}
117
+ </DatePicker.Calendar>
118
+ </div>
119
+ </div>
120
+ {/if}
121
+ {/snippet}
109
122
  </DatePicker.Content>
110
123
  </DatePicker.Root>
111
124
  {#if showError && errorMessage}
@@ -264,7 +264,7 @@
264
264
  data-menu-content
265
265
  class="min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none"
266
266
  onkeydown={handleListKeydown}
267
- transition:fly={{y: 4, duration: 150}}
267
+ transition:fly={{y: -4, duration: 150}}
268
268
  >
269
269
  {#if searchable}
270
270
  <MenuSearchInput
@@ -316,7 +316,7 @@
316
316
  data-menu-content
317
317
  class={cn(menuStyles.content, className)}
318
318
  onkeydown={handleMenuKeydown}
319
- transition:fly={{y: 4, duration: 150}}
319
+ transition:fly={{y: -4, duration: 150}}
320
320
  >
321
321
  {#if searchable}
322
322
  <MenuSearchInput
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.52",
3
+ "version": "0.1.54",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {