ui-ingredients 1.3.0 → 1.5.0

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.
@@ -34,7 +34,9 @@
34
34
  let uid = $props.id();
35
35
 
36
36
  let [presenceStrategyProps, datePickerProps] = $derived(
37
- createSplitProps<PresenceStrategyProps>([])(props),
37
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
38
+ props,
39
+ ),
38
40
  );
39
41
 
40
42
  let [createDatePickerProps, localProps] = $derived(
@@ -1 +1 @@
1
- export { floating as anatomy } from '@zag-js/floating-panel';
1
+ export { anatomy } from '@zag-js/floating-panel';
@@ -1 +1 @@
1
- export { floating as anatomy } from '@zag-js/floating-panel';
1
+ export { anatomy } from '@zag-js/floating-panel';
@@ -1,8 +1,8 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
3
 
4
- export interface FloatingPanelRestoreTriggerProps
5
- extends HtmlIngredientProps<'button', HTMLButtonElement> {}
4
+ export interface FloatingPanelControlProps
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
6
  </script>
7
7
 
8
8
  <script lang="ts">
@@ -14,18 +14,18 @@
14
14
  asChild,
15
15
  children,
16
16
  ...props
17
- }: FloatingPanelRestoreTriggerProps = $props();
17
+ }: FloatingPanelControlProps = $props();
18
18
 
19
19
  let floatingPanel = getFloatingPanelContext();
20
20
  let mergedProps = $derived(
21
- mergeProps(floatingPanel.getRestoreTriggerProps(), props),
21
+ mergeProps(floatingPanel.getControlProps(), props),
22
22
  );
23
23
  </script>
24
24
 
25
25
  {#if asChild}
26
26
  {@render asChild(mergedProps)}
27
27
  {:else}
28
- <button bind:this={ref} {...mergedProps}>
28
+ <div bind:this={ref} {...mergedProps}>
29
29
  {@render children?.()}
30
- </button>
30
+ </div>
31
31
  {/if}
@@ -0,0 +1,6 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface FloatingPanelControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
+ }
4
+ declare const FloatingPanelControl: import("svelte").Component<FloatingPanelControlProps, {}, "ref">;
5
+ type FloatingPanelControl = ReturnType<typeof FloatingPanelControl>;
6
+ export default FloatingPanelControl;
@@ -0,0 +1,44 @@
1
+ <script lang="ts" module>
2
+ import type {StageTriggerProps} from '@zag-js/floating-panel';
3
+ import type {Assign, HtmlIngredientProps} from '../types.js';
4
+
5
+ export interface FloatingPanelStageTriggerProps
6
+ extends Assign<
7
+ HtmlIngredientProps<'button', HTMLButtonElement>,
8
+ StageTriggerProps
9
+ > {}
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import {createSplitProps} from '../create-split-props.js';
14
+ import {mergeProps} from '../merge-props.js';
15
+ import {getFloatingPanelContext} from './floating-panel-context.svelte.js';
16
+
17
+ let {
18
+ ref = $bindable(null),
19
+ asChild,
20
+ children,
21
+ ...props
22
+ }: FloatingPanelStageTriggerProps = $props();
23
+
24
+ let floatingPanel = getFloatingPanelContext();
25
+
26
+ let [stageTriggerProps, localProps] = $derived(
27
+ createSplitProps<StageTriggerProps>(['stage'])(props),
28
+ );
29
+
30
+ let mergedProps = $derived(
31
+ mergeProps(
32
+ floatingPanel.getStageTriggerProps(stageTriggerProps),
33
+ localProps,
34
+ ),
35
+ );
36
+ </script>
37
+
38
+ {#if asChild}
39
+ {@render asChild(mergedProps)}
40
+ {:else}
41
+ <button bind:this={ref} {...mergedProps}>
42
+ {@render children?.()}
43
+ </button>
44
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { StageTriggerProps } from '@zag-js/floating-panel';
2
+ import type { Assign, HtmlIngredientProps } from '../types.js';
3
+ export interface FloatingPanelStageTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, StageTriggerProps> {
4
+ }
5
+ declare const FloatingPanelStageTrigger: import("svelte").Component<FloatingPanelStageTriggerProps, {}, "ref">;
6
+ type FloatingPanelStageTrigger = ReturnType<typeof FloatingPanelStageTrigger>;
7
+ export default FloatingPanelStageTrigger;
@@ -1,13 +1,12 @@
1
1
  export { default as Body } from './floating-panel-body.svelte';
2
2
  export { default as CloseTrigger } from './floating-panel-close-trigger.svelte';
3
3
  export { default as Content } from './floating-panel-content.svelte';
4
+ export { default as Control } from './floating-panel-control.svelte';
4
5
  export { default as DragTrigger } from './floating-panel-drag-trigger.svelte';
5
6
  export { default as Header } from './floating-panel-header.svelte';
6
- export { default as MaximizeTrigger } from './floating-panel-maximize-trigger.svelte';
7
- export { default as MinimizeTrigger } from './floating-panel-minimize-trigger.svelte';
8
7
  export { default as Positioner } from './floating-panel-positioner.svelte';
9
8
  export { default as ResizeTrigger } from './floating-panel-resize-trigger.svelte';
10
- export { default as RestoreTrigger } from './floating-panel-restore-trigger.svelte';
11
9
  export { default as Root } from './floating-panel-root.svelte';
10
+ export { default as StageTrigger } from './floating-panel-stage-trigger.svelte';
12
11
  export { default as Title } from './floating-panel-title.svelte';
13
- export { default as FloatingPanelTrigger } from './floating-panel-trigger.svelte';
12
+ export { default as Trigger } from './floating-panel-trigger.svelte';
@@ -1,13 +1,12 @@
1
1
  export { default as Body } from './floating-panel-body.svelte';
2
2
  export { default as CloseTrigger } from './floating-panel-close-trigger.svelte';
3
3
  export { default as Content } from './floating-panel-content.svelte';
4
+ export { default as Control } from './floating-panel-control.svelte';
4
5
  export { default as DragTrigger } from './floating-panel-drag-trigger.svelte';
5
6
  export { default as Header } from './floating-panel-header.svelte';
6
- export { default as MaximizeTrigger } from './floating-panel-maximize-trigger.svelte';
7
- export { default as MinimizeTrigger } from './floating-panel-minimize-trigger.svelte';
8
7
  export { default as Positioner } from './floating-panel-positioner.svelte';
9
8
  export { default as ResizeTrigger } from './floating-panel-resize-trigger.svelte';
10
- export { default as RestoreTrigger } from './floating-panel-restore-trigger.svelte';
11
9
  export { default as Root } from './floating-panel-root.svelte';
10
+ export { default as StageTrigger } from './floating-panel-stage-trigger.svelte';
12
11
  export { default as Title } from './floating-panel-title.svelte';
13
- export { default as FloatingPanelTrigger } from './floating-panel-trigger.svelte';
12
+ export { default as Trigger } from './floating-panel-trigger.svelte';
@@ -2,14 +2,13 @@ export * as FloatingPanel from './floating-panel.js';
2
2
  export type { FloatingPanelBodyProps } from './floating-panel-body.svelte';
3
3
  export type { FloatingPanelCloseTriggerProps } from './floating-panel-close-trigger.svelte';
4
4
  export type { FloatingPanelContentProps } from './floating-panel-content.svelte';
5
+ export type { FloatingPanelControlProps } from './floating-panel-control.svelte';
5
6
  export type { FloatingPanelDragTriggerProps } from './floating-panel-drag-trigger.svelte';
6
7
  export type { FloatingPanelHeaderProps } from './floating-panel-header.svelte';
7
- export type { FloatingPanelMaximizeTriggerProps } from './floating-panel-maximize-trigger.svelte';
8
- export type { FloatingPanelMinimizeTriggerProps } from './floating-panel-minimize-trigger.svelte';
9
8
  export type { FloatingPanelPositionerProps } from './floating-panel-positioner.svelte';
10
9
  export type { FloatingPanelResizeTriggerProps } from './floating-panel-resize-trigger.svelte';
11
- export type { FloatingPanelRestoreTriggerProps } from './floating-panel-restore-trigger.svelte';
12
10
  export type { FloatingPanelProps } from './floating-panel-root.svelte';
11
+ export type { FloatingPanelStageTriggerProps } from './floating-panel-stage-trigger.svelte';
13
12
  export type { FloatingPanelTitleProps } from './floating-panel-title.svelte';
14
13
  export type { FloatingPanelTriggerProps } from './floating-panel-trigger.svelte';
15
14
  export { createFloatingPanel, type CreateFloatingPanelProps, type CreateFloatingPanelReturn, } from './create-floating-panel.svelte.js';
@@ -32,6 +32,7 @@
32
32
  let [createToggleGroupProps, localProps] = $derived(
33
33
  createSplitProps<Omit<CreateToggleGroupProps, 'id'>>([
34
34
  'defaultValue',
35
+ 'deselectable',
35
36
  'disabled',
36
37
  'ids',
37
38
  'loopFocus',
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
4
  "license": "MIT",
5
- "version": "1.3.0",
5
+ "version": "1.5.0",
6
6
  "svelte": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
8
8
  "exports": {
@@ -319,81 +319,81 @@
319
319
  "release": "release-it"
320
320
  },
321
321
  "dependencies": {
322
- "@zag-js/accordion": "^1.8.2",
323
- "@zag-js/anatomy": "^1.8.2",
324
- "@zag-js/angle-slider": "^1.8.2",
325
- "@zag-js/auto-resize": "^1.8.2",
326
- "@zag-js/avatar": "^1.8.2",
327
- "@zag-js/carousel": "^1.8.2",
328
- "@zag-js/checkbox": "^1.8.2",
329
- "@zag-js/clipboard": "^1.8.2",
330
- "@zag-js/collapsible": "^1.8.2",
331
- "@zag-js/collection": "^1.8.2",
332
- "@zag-js/color-picker": "^1.8.2",
333
- "@zag-js/combobox": "^1.8.2",
334
- "@zag-js/core": "^1.8.2",
335
- "@zag-js/date-picker": "^1.8.2",
336
- "@zag-js/dialog": "^1.8.2",
337
- "@zag-js/dom-query": "^1.8.2",
338
- "@zag-js/editable": "^1.8.2",
339
- "@zag-js/file-upload": "^1.8.2",
340
- "@zag-js/floating-panel": "^1.8.2",
341
- "@zag-js/focus-trap": "^1.8.2",
342
- "@zag-js/highlight-word": "^1.8.2",
343
- "@zag-js/hover-card": "^1.8.2",
344
- "@zag-js/i18n-utils": "^1.8.2",
345
- "@zag-js/listbox": "^1.8.2",
346
- "@zag-js/menu": "^1.8.2",
347
- "@zag-js/number-input": "^1.8.2",
348
- "@zag-js/pagination": "^1.8.2",
349
- "@zag-js/pin-input": "^1.8.2",
350
- "@zag-js/popover": "^1.8.2",
351
- "@zag-js/presence": "^1.8.2",
352
- "@zag-js/progress": "^1.8.2",
353
- "@zag-js/qr-code": "^1.8.2",
354
- "@zag-js/radio-group": "^1.8.2",
355
- "@zag-js/rating-group": "^1.8.2",
356
- "@zag-js/select": "^1.8.2",
357
- "@zag-js/signature-pad": "^1.8.2",
358
- "@zag-js/slider": "^1.8.2",
359
- "@zag-js/splitter": "^1.8.2",
360
- "@zag-js/steps": "^1.8.2",
361
- "@zag-js/svelte": "^1.8.2",
362
- "@zag-js/switch": "^1.8.2",
363
- "@zag-js/tabs": "^1.8.2",
364
- "@zag-js/tags-input": "^1.8.2",
365
- "@zag-js/time-picker": "^1.8.2",
366
- "@zag-js/timer": "^1.8.2",
367
- "@zag-js/toast": "^1.8.2",
368
- "@zag-js/toggle": "^1.8.2",
369
- "@zag-js/toggle-group": "^1.8.2",
370
- "@zag-js/tooltip": "^1.8.2",
371
- "@zag-js/tour": "^1.8.2",
372
- "@zag-js/tree-view": "^1.8.2",
322
+ "@zag-js/accordion": "^1.11.0",
323
+ "@zag-js/anatomy": "^1.11.0",
324
+ "@zag-js/angle-slider": "^1.11.0",
325
+ "@zag-js/auto-resize": "^1.11.0",
326
+ "@zag-js/avatar": "^1.11.0",
327
+ "@zag-js/carousel": "^1.11.0",
328
+ "@zag-js/checkbox": "^1.11.0",
329
+ "@zag-js/clipboard": "^1.11.0",
330
+ "@zag-js/collapsible": "^1.11.0",
331
+ "@zag-js/collection": "^1.11.0",
332
+ "@zag-js/color-picker": "^1.11.0",
333
+ "@zag-js/combobox": "^1.11.0",
334
+ "@zag-js/core": "^1.11.0",
335
+ "@zag-js/date-picker": "^1.11.0",
336
+ "@zag-js/dialog": "^1.11.0",
337
+ "@zag-js/dom-query": "^1.11.0",
338
+ "@zag-js/editable": "^1.11.0",
339
+ "@zag-js/file-upload": "^1.11.0",
340
+ "@zag-js/floating-panel": "^1.11.0",
341
+ "@zag-js/focus-trap": "^1.11.0",
342
+ "@zag-js/highlight-word": "^1.11.0",
343
+ "@zag-js/hover-card": "^1.11.0",
344
+ "@zag-js/i18n-utils": "^1.11.0",
345
+ "@zag-js/listbox": "^1.11.0",
346
+ "@zag-js/menu": "^1.11.0",
347
+ "@zag-js/number-input": "^1.11.0",
348
+ "@zag-js/pagination": "^1.11.0",
349
+ "@zag-js/pin-input": "^1.11.0",
350
+ "@zag-js/popover": "^1.11.0",
351
+ "@zag-js/presence": "^1.11.0",
352
+ "@zag-js/progress": "^1.11.0",
353
+ "@zag-js/qr-code": "^1.11.0",
354
+ "@zag-js/radio-group": "^1.11.0",
355
+ "@zag-js/rating-group": "^1.11.0",
356
+ "@zag-js/select": "^1.11.0",
357
+ "@zag-js/signature-pad": "^1.11.0",
358
+ "@zag-js/slider": "^1.11.0",
359
+ "@zag-js/splitter": "^1.11.0",
360
+ "@zag-js/steps": "^1.11.0",
361
+ "@zag-js/svelte": "^1.11.0",
362
+ "@zag-js/switch": "^1.11.0",
363
+ "@zag-js/tabs": "^1.11.0",
364
+ "@zag-js/tags-input": "^1.11.0",
365
+ "@zag-js/time-picker": "^1.11.0",
366
+ "@zag-js/timer": "^1.11.0",
367
+ "@zag-js/toast": "^1.11.0",
368
+ "@zag-js/toggle": "^1.11.0",
369
+ "@zag-js/toggle-group": "^1.11.0",
370
+ "@zag-js/tooltip": "^1.11.0",
371
+ "@zag-js/tour": "^1.11.0",
372
+ "@zag-js/tree-view": "^1.11.0",
373
373
  "clsx": "^2.1.1"
374
374
  },
375
375
  "peerDependencies": {
376
376
  "svelte": "^5.20.0"
377
377
  },
378
378
  "devDependencies": {
379
- "@faker-js/faker": "^9.6.0",
379
+ "@faker-js/faker": "^9.7.0",
380
380
  "@sveltejs/adapter-vercel": "^5.7.0",
381
- "@sveltejs/kit": "^2.20.4",
382
- "@sveltejs/package": "^2.3.10",
381
+ "@sveltejs/kit": "^2.20.7",
382
+ "@sveltejs/package": "^2.3.11",
383
383
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
384
384
  "@testing-library/jest-dom": "^6.6.3",
385
385
  "@testing-library/svelte": "^5.2.7",
386
386
  "@testing-library/user-event": "^14.6.1",
387
387
  "@types/jsdom": "^21.1.7",
388
- "jsdom": "^26.0.0",
389
- "publint": "^0.3.10",
390
- "release-it": "^18.1.2",
388
+ "jsdom": "^26.1.0",
389
+ "publint": "^0.3.12",
390
+ "release-it": "^19.0.1",
391
391
  "resize-observer-polyfill": "^1.5.1",
392
- "svelte": "^5.25.7",
393
- "svelte-check": "^4.1.5",
392
+ "svelte": "^5.28.2",
393
+ "svelte-check": "^4.1.6",
394
394
  "typescript": "^5.8.3",
395
- "vite": "^6.2.5",
396
- "vitest": "^3.1.1",
395
+ "vite": "^6.3.3",
396
+ "vitest": "^3.1.2",
397
397
  "vitest-axe": "^1.0.0-pre.3",
398
398
  "vitest-canvas-mock": "^0.3.3"
399
399
  },
@@ -1,31 +0,0 @@
1
- <script lang="ts" module>
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface FloatingPanelMaximizeTriggerProps
5
- extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '../merge-props.js';
10
- import {getFloatingPanelContext} from './floating-panel-context.svelte.js';
11
-
12
- let {
13
- ref = $bindable(null),
14
- asChild,
15
- children,
16
- ...props
17
- }: FloatingPanelMaximizeTriggerProps = $props();
18
-
19
- let floatingPanel = getFloatingPanelContext();
20
- let mergedProps = $derived(
21
- mergeProps(floatingPanel.getMaximizeTriggerProps(), props),
22
- );
23
- </script>
24
-
25
- {#if asChild}
26
- {@render asChild(mergedProps)}
27
- {:else}
28
- <button bind:this={ref} {...mergedProps}>
29
- {@render children?.()}
30
- </button>
31
- {/if}
@@ -1,6 +0,0 @@
1
- import type { HtmlIngredientProps } from '../types.js';
2
- export interface FloatingPanelMaximizeTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
3
- }
4
- declare const FloatingPanelMaximizeTrigger: import("svelte").Component<FloatingPanelMaximizeTriggerProps, {}, "ref">;
5
- type FloatingPanelMaximizeTrigger = ReturnType<typeof FloatingPanelMaximizeTrigger>;
6
- export default FloatingPanelMaximizeTrigger;
@@ -1,31 +0,0 @@
1
- <script lang="ts" module>
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface FloatingPanelMinimizeTriggerProps
5
- extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '../merge-props.js';
10
- import {getFloatingPanelContext} from './floating-panel-context.svelte.js';
11
-
12
- let {
13
- ref = $bindable(null),
14
- asChild,
15
- children,
16
- ...props
17
- }: FloatingPanelMinimizeTriggerProps = $props();
18
-
19
- let floatingPanel = getFloatingPanelContext();
20
- let mergedProps = $derived(
21
- mergeProps(floatingPanel.getMinimizeTriggerProps(), props),
22
- );
23
- </script>
24
-
25
- {#if asChild}
26
- {@render asChild(mergedProps)}
27
- {:else}
28
- <button bind:this={ref} {...mergedProps}>
29
- {@render children?.()}
30
- </button>
31
- {/if}
@@ -1,6 +0,0 @@
1
- import type { HtmlIngredientProps } from '../types.js';
2
- export interface FloatingPanelMinimizeTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
3
- }
4
- declare const FloatingPanelMinimizeTrigger: import("svelte").Component<FloatingPanelMinimizeTriggerProps, {}, "ref">;
5
- type FloatingPanelMinimizeTrigger = ReturnType<typeof FloatingPanelMinimizeTrigger>;
6
- export default FloatingPanelMinimizeTrigger;
@@ -1,6 +0,0 @@
1
- import type { HtmlIngredientProps } from '../types.js';
2
- export interface FloatingPanelRestoreTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
3
- }
4
- declare const FloatingPanelRestoreTrigger: import("svelte").Component<FloatingPanelRestoreTriggerProps, {}, "ref">;
5
- type FloatingPanelRestoreTrigger = ReturnType<typeof FloatingPanelRestoreTrigger>;
6
- export default FloatingPanelRestoreTrigger;