@classic-homes/theme-svelte 1.4.0 → 1.5.1
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.
- package/dist/lib/components/Combobox.svelte +102 -94
- package/dist/lib/components/DataPanel.svelte +8 -1
- package/dist/lib/components/DataPanel.svelte.d.ts +6 -0
- package/dist/lib/components/Dialog.svelte +1 -1
- package/dist/lib/components/DropdownMenu.svelte +2 -2
- package/dist/lib/components/MultiSelect.svelte +4 -4
- package/dist/lib/components/Select.svelte +2 -2
- package/dist/lib/components/Slider.svelte +1 -1
- package/dist/lib/components/media/MediaCarousel.svelte +1 -1
- package/package.json +1 -1
|
@@ -177,9 +177,108 @@
|
|
|
177
177
|
/>
|
|
178
178
|
</div>
|
|
179
179
|
|
|
180
|
+
<!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
|
|
181
|
+
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
182
|
+
<ComboboxPrimitive.Portal>
|
|
183
|
+
<ComboboxPrimitive.Content
|
|
184
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
185
|
+
sideOffset={4}
|
|
186
|
+
collisionPadding={8}
|
|
187
|
+
avoidCollisions={true}
|
|
188
|
+
>
|
|
189
|
+
<div class="p-1 max-h-[300px] overflow-y-auto">
|
|
190
|
+
{#if loading}
|
|
191
|
+
<div class="flex items-center justify-center py-6">
|
|
192
|
+
<Spinner size="sm" />
|
|
193
|
+
<span class="ml-2 text-sm text-muted-foreground">Loading...</span>
|
|
194
|
+
</div>
|
|
195
|
+
{:else if filteredOptions.length === 0}
|
|
196
|
+
<div class="py-6 text-center text-sm text-muted-foreground">
|
|
197
|
+
{emptyMessage}
|
|
198
|
+
</div>
|
|
199
|
+
{:else}
|
|
200
|
+
{#each filteredOptions as option}
|
|
201
|
+
<ComboboxPrimitive.Item
|
|
202
|
+
value={option.value}
|
|
203
|
+
label={option.label}
|
|
204
|
+
disabled={option.disabled}
|
|
205
|
+
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
206
|
+
>
|
|
207
|
+
{#if option.value === value}
|
|
208
|
+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
209
|
+
<svg
|
|
210
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
211
|
+
width="16"
|
|
212
|
+
height="16"
|
|
213
|
+
viewBox="0 0 24 24"
|
|
214
|
+
fill="none"
|
|
215
|
+
stroke="currentColor"
|
|
216
|
+
stroke-width="2"
|
|
217
|
+
stroke-linecap="round"
|
|
218
|
+
stroke-linejoin="round"
|
|
219
|
+
class="h-4 w-4"
|
|
220
|
+
>
|
|
221
|
+
<polyline points="20 6 9 17 4 12" />
|
|
222
|
+
</svg>
|
|
223
|
+
</span>
|
|
224
|
+
{/if}
|
|
225
|
+
{option.label}
|
|
226
|
+
</ComboboxPrimitive.Item>
|
|
227
|
+
{/each}
|
|
228
|
+
{/if}
|
|
229
|
+
</div>
|
|
230
|
+
</ComboboxPrimitive.Content>
|
|
231
|
+
</ComboboxPrimitive.Portal>
|
|
232
|
+
</ComboboxPrimitive.Root>
|
|
233
|
+
|
|
234
|
+
{#if hint && !error}
|
|
235
|
+
<p id={hintId} class="text-sm text-muted-foreground">
|
|
236
|
+
{hint}
|
|
237
|
+
</p>
|
|
238
|
+
{/if}
|
|
239
|
+
|
|
240
|
+
{#if error}
|
|
241
|
+
<p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
|
|
242
|
+
{error}
|
|
243
|
+
</p>
|
|
244
|
+
{/if}
|
|
245
|
+
</div>
|
|
246
|
+
{:else}
|
|
247
|
+
<ComboboxPrimitive.Root
|
|
248
|
+
type="single"
|
|
249
|
+
{disabled}
|
|
250
|
+
{required}
|
|
251
|
+
{name}
|
|
252
|
+
bind:open
|
|
253
|
+
onOpenChange={handleOpenChange}
|
|
254
|
+
onValueChange={handleValueChange}
|
|
255
|
+
{value}
|
|
256
|
+
>
|
|
257
|
+
<div class="relative">
|
|
258
|
+
<ComboboxPrimitive.Input
|
|
259
|
+
id={componentId}
|
|
260
|
+
placeholder={selectedLabel || placeholder}
|
|
261
|
+
oninput={handleSearchInput}
|
|
262
|
+
onfocus={() => (open = true)}
|
|
263
|
+
onclick={() => (open = true)}
|
|
264
|
+
class={cn(
|
|
265
|
+
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
266
|
+
error && 'border-destructive focus:ring-destructive',
|
|
267
|
+
className
|
|
268
|
+
)}
|
|
269
|
+
role="combobox"
|
|
270
|
+
aria-expanded={open}
|
|
271
|
+
aria-invalid={error ? 'true' : undefined}
|
|
272
|
+
aria-describedby={describedBy}
|
|
273
|
+
/>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
|
|
277
|
+
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
278
|
+
<ComboboxPrimitive.Portal>
|
|
180
279
|
<ComboboxPrimitive.Content
|
|
181
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
182
|
-
sideOffset={
|
|
280
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
281
|
+
sideOffset={4}
|
|
183
282
|
collisionPadding={8}
|
|
184
283
|
avoidCollisions={true}
|
|
185
284
|
>
|
|
@@ -225,98 +324,7 @@
|
|
|
225
324
|
{/if}
|
|
226
325
|
</div>
|
|
227
326
|
</ComboboxPrimitive.Content>
|
|
228
|
-
</ComboboxPrimitive.
|
|
229
|
-
|
|
230
|
-
{#if hint && !error}
|
|
231
|
-
<p id={hintId} class="text-sm text-muted-foreground">
|
|
232
|
-
{hint}
|
|
233
|
-
</p>
|
|
234
|
-
{/if}
|
|
235
|
-
|
|
236
|
-
{#if error}
|
|
237
|
-
<p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
|
|
238
|
-
{error}
|
|
239
|
-
</p>
|
|
240
|
-
{/if}
|
|
241
|
-
</div>
|
|
242
|
-
{:else}
|
|
243
|
-
<ComboboxPrimitive.Root
|
|
244
|
-
type="single"
|
|
245
|
-
{disabled}
|
|
246
|
-
{required}
|
|
247
|
-
{name}
|
|
248
|
-
bind:open
|
|
249
|
-
onOpenChange={handleOpenChange}
|
|
250
|
-
onValueChange={handleValueChange}
|
|
251
|
-
{value}
|
|
252
|
-
>
|
|
253
|
-
<div class="relative">
|
|
254
|
-
<ComboboxPrimitive.Input
|
|
255
|
-
id={componentId}
|
|
256
|
-
placeholder={selectedLabel || placeholder}
|
|
257
|
-
oninput={handleSearchInput}
|
|
258
|
-
onfocus={() => (open = true)}
|
|
259
|
-
onclick={() => (open = true)}
|
|
260
|
-
class={cn(
|
|
261
|
-
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
262
|
-
error && 'border-destructive focus:ring-destructive',
|
|
263
|
-
className
|
|
264
|
-
)}
|
|
265
|
-
role="combobox"
|
|
266
|
-
aria-expanded={open}
|
|
267
|
-
aria-invalid={error ? 'true' : undefined}
|
|
268
|
-
aria-describedby={describedBy}
|
|
269
|
-
/>
|
|
270
|
-
</div>
|
|
271
|
-
|
|
272
|
-
<ComboboxPrimitive.Content
|
|
273
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
274
|
-
sideOffset={-1}
|
|
275
|
-
collisionPadding={8}
|
|
276
|
-
avoidCollisions={true}
|
|
277
|
-
>
|
|
278
|
-
<div class="p-1 max-h-[300px] overflow-y-auto">
|
|
279
|
-
{#if loading}
|
|
280
|
-
<div class="flex items-center justify-center py-6">
|
|
281
|
-
<Spinner size="sm" />
|
|
282
|
-
<span class="ml-2 text-sm text-muted-foreground">Loading...</span>
|
|
283
|
-
</div>
|
|
284
|
-
{:else if filteredOptions.length === 0}
|
|
285
|
-
<div class="py-6 text-center text-sm text-muted-foreground">
|
|
286
|
-
{emptyMessage}
|
|
287
|
-
</div>
|
|
288
|
-
{:else}
|
|
289
|
-
{#each filteredOptions as option}
|
|
290
|
-
<ComboboxPrimitive.Item
|
|
291
|
-
value={option.value}
|
|
292
|
-
label={option.label}
|
|
293
|
-
disabled={option.disabled}
|
|
294
|
-
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
295
|
-
>
|
|
296
|
-
{#if option.value === value}
|
|
297
|
-
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
298
|
-
<svg
|
|
299
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
300
|
-
width="16"
|
|
301
|
-
height="16"
|
|
302
|
-
viewBox="0 0 24 24"
|
|
303
|
-
fill="none"
|
|
304
|
-
stroke="currentColor"
|
|
305
|
-
stroke-width="2"
|
|
306
|
-
stroke-linecap="round"
|
|
307
|
-
stroke-linejoin="round"
|
|
308
|
-
class="h-4 w-4"
|
|
309
|
-
>
|
|
310
|
-
<polyline points="20 6 9 17 4 12" />
|
|
311
|
-
</svg>
|
|
312
|
-
</span>
|
|
313
|
-
{/if}
|
|
314
|
-
{option.label}
|
|
315
|
-
</ComboboxPrimitive.Item>
|
|
316
|
-
{/each}
|
|
317
|
-
{/if}
|
|
318
|
-
</div>
|
|
319
|
-
</ComboboxPrimitive.Content>
|
|
327
|
+
</ComboboxPrimitive.Portal>
|
|
320
328
|
</ComboboxPrimitive.Root>
|
|
321
329
|
{/if}
|
|
322
330
|
|
|
@@ -115,6 +115,12 @@
|
|
|
115
115
|
snapThreshold?: number;
|
|
116
116
|
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
117
117
|
detachThreshold?: number;
|
|
118
|
+
/**
|
|
119
|
+
* Viewport width (px) below which the panel uses mobile behaviors
|
|
120
|
+
* (card scrim, focus trap, card drag). Default 640. Pass 768 for apps
|
|
121
|
+
* that switch layouts at md.
|
|
122
|
+
*/
|
|
123
|
+
mobileBreakpoint?: number;
|
|
118
124
|
/** Custom header content (replaces title/subtitle) */
|
|
119
125
|
header?: Snippet;
|
|
120
126
|
/** Custom header actions */
|
|
@@ -154,6 +160,7 @@
|
|
|
154
160
|
persistKey,
|
|
155
161
|
snapThreshold = 20,
|
|
156
162
|
detachThreshold = 40,
|
|
163
|
+
mobileBreakpoint = 640,
|
|
157
164
|
header,
|
|
158
165
|
headerActions,
|
|
159
166
|
footer,
|
|
@@ -242,7 +249,7 @@
|
|
|
242
249
|
let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 768);
|
|
243
250
|
|
|
244
251
|
// Detect mobile
|
|
245
|
-
let isMobile = $derived(viewportWidth <
|
|
252
|
+
let isMobile = $derived(viewportWidth < mobileBreakpoint);
|
|
246
253
|
|
|
247
254
|
// Derived state - use props if provided, otherwise internal state
|
|
248
255
|
const mode = $derived(propMode ?? internalMode);
|
|
@@ -64,6 +64,12 @@ interface Props {
|
|
|
64
64
|
snapThreshold?: number;
|
|
65
65
|
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
66
66
|
detachThreshold?: number;
|
|
67
|
+
/**
|
|
68
|
+
* Viewport width (px) below which the panel uses mobile behaviors
|
|
69
|
+
* (card scrim, focus trap, card drag). Default 640. Pass 768 for apps
|
|
70
|
+
* that switch layouts at md.
|
|
71
|
+
*/
|
|
72
|
+
mobileBreakpoint?: number;
|
|
67
73
|
/** Custom header content (replaces title/subtitle) */
|
|
68
74
|
header?: Snippet;
|
|
69
75
|
/** Custom header actions */
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
{/if}
|
|
118
118
|
{#if showClose}
|
|
119
119
|
<DialogPrimitive.Close
|
|
120
|
-
class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
|
|
120
|
+
class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none relative after:absolute after:-inset-1 after:content-['']"
|
|
121
121
|
aria-label="Close dialog"
|
|
122
122
|
>
|
|
123
123
|
<svg
|
|
@@ -67,11 +67,11 @@
|
|
|
67
67
|
<DropdownMenuPrimitive.Content
|
|
68
68
|
{side}
|
|
69
69
|
{align}
|
|
70
|
-
sideOffset={
|
|
70
|
+
sideOffset={4}
|
|
71
71
|
collisionPadding={8}
|
|
72
72
|
avoidCollisions={true}
|
|
73
73
|
class={cn(
|
|
74
|
-
'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-
|
|
74
|
+
'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
|
75
75
|
className
|
|
76
76
|
)}
|
|
77
77
|
>
|
|
@@ -239,8 +239,8 @@
|
|
|
239
239
|
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
240
240
|
<ComboboxPrimitive.Portal>
|
|
241
241
|
<ComboboxPrimitive.Content
|
|
242
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
243
|
-
sideOffset={
|
|
242
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
243
|
+
sideOffset={4}
|
|
244
244
|
collisionPadding={8}
|
|
245
245
|
avoidCollisions={true}
|
|
246
246
|
>
|
|
@@ -376,8 +376,8 @@
|
|
|
376
376
|
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
377
377
|
<ComboboxPrimitive.Portal>
|
|
378
378
|
<ComboboxPrimitive.Content
|
|
379
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
380
|
-
sideOffset={
|
|
379
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
380
|
+
sideOffset={4}
|
|
381
381
|
collisionPadding={8}
|
|
382
382
|
avoidCollisions={true}
|
|
383
383
|
>
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
|
|
141
141
|
// Common content classes
|
|
142
142
|
const contentClasses =
|
|
143
|
-
'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
143
|
+
'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2';
|
|
144
144
|
|
|
145
145
|
// Common item classes
|
|
146
146
|
const itemClasses =
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
<SelectPrimitive.Portal>
|
|
206
206
|
<SelectPrimitive.Content
|
|
207
207
|
class={contentClasses}
|
|
208
|
-
sideOffset={
|
|
208
|
+
sideOffset={4}
|
|
209
209
|
collisionPadding={8}
|
|
210
210
|
avoidCollisions={true}
|
|
211
211
|
>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
root: 'relative flex w-full touch-none select-none items-center',
|
|
11
11
|
range: 'absolute h-full bg-primary rounded-full',
|
|
12
12
|
thumb:
|
|
13
|
-
|
|
13
|
+
"block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative after:absolute after:left-1/2 after:top-1/2 after:h-11 after:w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:content-['']",
|
|
14
14
|
},
|
|
15
15
|
variants: {
|
|
16
16
|
size: {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
const positionLabel = $derived(`${index + 1} of ${items.length}`);
|
|
88
88
|
|
|
89
89
|
const buttonClass =
|
|
90
|
-
|
|
90
|
+
"inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40 relative after:absolute after:-inset-0.5 after:rounded-full after:content-['']";
|
|
91
91
|
|
|
92
92
|
function goTo(next: number, smooth = true) {
|
|
93
93
|
if (items.length === 0) return;
|