ui-ingredients 0.0.42 → 0.0.44

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. package/README.md +3 -0
  2. package/dist/file-upload/create-file-upload.svelte.js +1 -0
  3. package/dist/file-upload/root.svelte +1 -0
  4. package/dist/floating-panel/body.svelte +24 -0
  5. package/dist/floating-panel/body.svelte.d.ts +18 -0
  6. package/dist/floating-panel/close-trigger.svelte +27 -0
  7. package/dist/floating-panel/close-trigger.svelte.d.ts +18 -0
  8. package/dist/floating-panel/content.svelte +36 -0
  9. package/dist/floating-panel/content.svelte.d.ts +18 -0
  10. package/dist/floating-panel/context.svelte.d.ts +2 -0
  11. package/dist/floating-panel/context.svelte.js +2 -0
  12. package/dist/floating-panel/create-floating-panel.svelte.d.ts +7 -0
  13. package/dist/floating-panel/create-floating-panel.svelte.js +19 -0
  14. package/dist/floating-panel/drag-trigger.svelte +27 -0
  15. package/dist/floating-panel/drag-trigger.svelte.d.ts +18 -0
  16. package/dist/floating-panel/floating-panel.d.ts +13 -0
  17. package/dist/floating-panel/floating-panel.js +13 -0
  18. package/dist/floating-panel/header.svelte +25 -0
  19. package/dist/floating-panel/header.svelte.d.ts +18 -0
  20. package/dist/floating-panel/index.d.ts +16 -0
  21. package/dist/floating-panel/index.js +3 -0
  22. package/dist/floating-panel/maximize-trigger.svelte +28 -0
  23. package/dist/floating-panel/maximize-trigger.svelte.d.ts +18 -0
  24. package/dist/floating-panel/minimize-trigger.svelte +28 -0
  25. package/dist/floating-panel/minimize-trigger.svelte.d.ts +18 -0
  26. package/dist/floating-panel/positioner.svelte +35 -0
  27. package/dist/floating-panel/positioner.svelte.d.ts +18 -0
  28. package/dist/floating-panel/resize-trigger.svelte +36 -0
  29. package/dist/floating-panel/resize-trigger.svelte.d.ts +18 -0
  30. package/dist/floating-panel/restore-trigger.svelte +28 -0
  31. package/dist/floating-panel/restore-trigger.svelte.d.ts +18 -0
  32. package/dist/floating-panel/root.svelte +50 -0
  33. package/dist/floating-panel/root.svelte.d.ts +18 -0
  34. package/dist/floating-panel/title.svelte +25 -0
  35. package/dist/floating-panel/title.svelte.d.ts +18 -0
  36. package/dist/floating-panel/trigger.svelte +27 -0
  37. package/dist/floating-panel/trigger.svelte.d.ts +18 -0
  38. package/dist/index.d.ts +2 -0
  39. package/dist/index.js +2 -0
  40. package/dist/is-object.d.ts +2 -0
  41. package/dist/is-object.js +4 -0
  42. package/dist/merge-props.js +1 -4
  43. package/dist/portal/root.svelte +32 -32
  44. package/dist/presence/root.svelte +5 -1
  45. package/dist/switch/control.svelte +24 -24
  46. package/dist/switch/hidden-input.svelte +23 -23
  47. package/dist/switch/label.svelte +24 -24
  48. package/dist/switch/root.svelte +54 -54
  49. package/dist/switch/thumb.svelte +24 -24
  50. package/dist/toast/actor.svelte +19 -19
  51. package/dist/toast/toaster.svelte +39 -39
  52. package/dist/tour/arrow-tip.svelte +24 -0
  53. package/dist/tour/arrow-tip.svelte.d.ts +18 -0
  54. package/dist/tour/arrow.svelte +24 -0
  55. package/dist/tour/arrow.svelte.d.ts +18 -0
  56. package/dist/tour/close-trigger.svelte +25 -0
  57. package/dist/tour/close-trigger.svelte.d.ts +18 -0
  58. package/dist/tour/content.svelte +30 -0
  59. package/dist/tour/content.svelte.d.ts +18 -0
  60. package/dist/tour/context.svelte.d.ts +2 -0
  61. package/dist/tour/context.svelte.js +3 -0
  62. package/dist/tour/create-tour.svelte.d.ts +7 -0
  63. package/dist/tour/create-tour.svelte.js +19 -0
  64. package/dist/tour/description.svelte +24 -0
  65. package/dist/tour/description.svelte.d.ts +18 -0
  66. package/dist/tour/index.d.ts +17 -0
  67. package/dist/tour/index.js +3 -0
  68. package/dist/tour/next-trigger.svelte +24 -0
  69. package/dist/tour/next-trigger.svelte.d.ts +18 -0
  70. package/dist/tour/overlay.svelte +43 -0
  71. package/dist/tour/overlay.svelte.d.ts +18 -0
  72. package/dist/tour/positioner.svelte +30 -0
  73. package/dist/tour/positioner.svelte.d.ts +18 -0
  74. package/dist/tour/prev-trigger.svelte +24 -0
  75. package/dist/tour/prev-trigger.svelte.d.ts +18 -0
  76. package/dist/tour/progress-text.svelte +28 -0
  77. package/dist/tour/progress-text.svelte.d.ts +18 -0
  78. package/dist/tour/root.svelte +52 -0
  79. package/dist/tour/root.svelte.d.ts +18 -0
  80. package/dist/tour/skip-trigger.svelte +24 -0
  81. package/dist/tour/skip-trigger.svelte.d.ts +18 -0
  82. package/dist/tour/spotlight.svelte +24 -0
  83. package/dist/tour/spotlight.svelte.d.ts +18 -0
  84. package/dist/tour/title.svelte +24 -0
  85. package/dist/tour/title.svelte.d.ts +18 -0
  86. package/dist/tour/tour.d.ts +14 -0
  87. package/dist/tour/tour.js +14 -0
  88. package/dist/types.d.ts +10 -16
  89. package/package.json +46 -46
  90. package/dist/floating-panel/.gitkeep +0 -0
  91. package/dist/tour/.gitkeep +0 -0
package/README.md CHANGED
@@ -52,6 +52,7 @@ npm install ui-ingredients
52
52
  - [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
53
53
  - [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
54
54
  - [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
55
+ - [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
55
56
  - [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
56
57
  - [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
57
58
  - [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
@@ -59,6 +60,7 @@ npm install ui-ingredients
59
60
  - [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
60
61
  - [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
61
62
  - [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
63
+ - [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
62
64
  - [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
63
65
  - [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
64
66
  - [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
@@ -78,6 +80,7 @@ npm install ui-ingredients
78
80
  - [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
79
81
  - [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
80
82
  - [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
83
+ - [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
81
84
  - [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
82
85
  - [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
83
86
 
@@ -14,6 +14,7 @@ export function createFileUpload(props) {
14
14
  label: field?.ids.label,
15
15
  hiddenInput: field?.ids.control,
16
16
  },
17
+ invalid: field?.invalid,
17
18
  disabled: field?.disabled,
18
19
  required: field?.required,
19
20
  ...props,
@@ -29,6 +29,7 @@
29
29
  'accept',
30
30
  'locale',
31
31
  'capture',
32
+ 'invalid',
32
33
  'required',
33
34
  'disabled',
34
35
  'validate',
@@ -0,0 +1,24 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelBodyProps extends HtmlIngredientProps<'div'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '../merge-props.js';
9
+ import {getFloatingPanelContext} from './context.svelte.js';
10
+
11
+ let {asChild, children, ...props}: FloatingPanelBodyProps = $props();
12
+
13
+ let floatingPanel = getFloatingPanelContext();
14
+
15
+ let mergedProps = $derived(mergeProps(props, floatingPanel.getBodyProps()));
16
+ </script>
17
+
18
+ {#if asChild}
19
+ {@render asChild(mergedProps)}
20
+ {:else}
21
+ <div {...mergedProps}>
22
+ {@render children?.()}
23
+ </div>
24
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Body: $$__sveltets_2_IsomorphicComponent<FloatingPanelBodyProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Body = InstanceType<typeof Body>;
18
+ export default Body;
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelCloseTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFloatingPanelContext} from './context.svelte.js';
11
+
12
+ let {asChild, children, ...props}: FloatingPanelCloseTriggerProps = $props();
13
+
14
+ let floatingPanel = getFloatingPanelContext();
15
+
16
+ let mergedProps = $derived(
17
+ mergeProps(props, floatingPanel.getCloseTriggerProps()),
18
+ );
19
+ </script>
20
+
21
+ {#if asChild}
22
+ {@render asChild(mergedProps)}
23
+ {:else}
24
+ <button type="button" {...mergedProps}>
25
+ {@render children?.()}
26
+ </button>
27
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const CloseTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelCloseTriggerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type CloseTrigger = InstanceType<typeof CloseTrigger>;
18
+ export default CloseTrigger;
@@ -0,0 +1,36 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
4
+
5
+ export interface FloatingPanelContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {getPresenceContext} from '../presence/context.svelte.js';
12
+ import {getFloatingPanelContext} from './context.svelte.js';
13
+
14
+ let {asChild, children, ...props}: FloatingPanelContentProps = $props();
15
+
16
+ let floatingPanel = getFloatingPanelContext();
17
+ let presence = getPresenceContext();
18
+
19
+ let mergedProps = $derived(
20
+ mergeProps(
21
+ props,
22
+ floatingPanel.getContentProps(),
23
+ presence.getPresenceProps(),
24
+ ),
25
+ );
26
+ </script>
27
+
28
+ {#if presence.mounted}
29
+ {#if asChild}
30
+ {@render asChild(presence.ref, mergedProps)}
31
+ {:else}
32
+ <div use:presence.ref {...mergedProps}>
33
+ {@render children?.()}
34
+ </div>
35
+ {/if}
36
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Content: $$__sveltets_2_IsomorphicComponent<FloatingPanelContentProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Content = InstanceType<typeof Content>;
18
+ export default Content;
@@ -0,0 +1,2 @@
1
+ import type { CreateFloatingPanelReturn } from './create-floating-panel.svelte.js';
2
+ export declare const getFloatingPanelContext: () => CreateFloatingPanelReturn, setFloatingPanelContext: (context: CreateFloatingPanelReturn | (() => CreateFloatingPanelReturn)) => void;
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../create-context.svelte.js';
2
+ export const [getFloatingPanelContext, setFloatingPanelContext] = createContext('FloatingPanel');
@@ -0,0 +1,7 @@
1
+ import * as floatingPanel from '@zag-js/floating-panel';
2
+ export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'id' | 'dir' | 'getRootNode'> {
3
+ id?: string | null;
4
+ }
5
+ export interface CreateFloatingPanelReturn extends floatingPanel.Api<any> {
6
+ }
7
+ export declare function createFloatingPanel(props: CreateFloatingPanelProps): CreateFloatingPanelReturn;
@@ -0,0 +1,19 @@
1
+ import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
2
+ import { getLocaleContext } from '../locale-provider/context.svelte.js';
3
+ import * as floatingPanel from '@zag-js/floating-panel';
4
+ import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
+ import { uid } from 'uid';
6
+ export function createFloatingPanel(props) {
7
+ const locale = getLocaleContext();
8
+ const environment = getEnvironmentContext();
9
+ const id = uid();
10
+ const context = $derived(reflect(() => ({
11
+ ...props,
12
+ id: props.id ?? id,
13
+ dir: locale?.dir,
14
+ getRootNode: environment?.getRootNode,
15
+ })));
16
+ const [state, send] = useMachine(floatingPanel.machine(context), { context });
17
+ const api = $derived(reflect(() => floatingPanel.connect(state, send, normalizeProps)));
18
+ return api;
19
+ }
@@ -0,0 +1,27 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelDragTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFloatingPanelContext} from './context.svelte.js';
11
+
12
+ let {asChild, children, ...props}: FloatingPanelDragTriggerProps = $props();
13
+
14
+ let floatingPanel = getFloatingPanelContext();
15
+
16
+ let mergedProps = $derived(
17
+ mergeProps(props, floatingPanel.getDragTriggerProps()),
18
+ );
19
+ </script>
20
+
21
+ {#if asChild}
22
+ {@render asChild(mergedProps)}
23
+ {:else}
24
+ <button type="button" {...mergedProps}>
25
+ {@render children?.()}
26
+ </button>
27
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const DragTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelDragTriggerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type DragTrigger = InstanceType<typeof DragTrigger>;
18
+ export default DragTrigger;
@@ -0,0 +1,13 @@
1
+ export { default as Body } from './body.svelte';
2
+ export { default as CloseTrigger } from './close-trigger.svelte';
3
+ export { default as Content } from './content.svelte';
4
+ export { default as DragTrigger } from './drag-trigger.svelte';
5
+ export { default as Header } from './header.svelte';
6
+ export { default as MaximizeTrigger } from './maximize-trigger.svelte';
7
+ export { default as MinimizeTrigger } from './minimize-trigger.svelte';
8
+ export { default as Positioner } from './positioner.svelte';
9
+ export { default as ResizeTrigger } from './resize-trigger.svelte';
10
+ export { default as RestoreTrigger } from './restore-trigger.svelte';
11
+ export { default as Root } from './root.svelte';
12
+ export { default as Title } from './title.svelte';
13
+ export { default as Trigger } from './trigger.svelte';
@@ -0,0 +1,13 @@
1
+ export { default as Body } from './body.svelte';
2
+ export { default as CloseTrigger } from './close-trigger.svelte';
3
+ export { default as Content } from './content.svelte';
4
+ export { default as DragTrigger } from './drag-trigger.svelte';
5
+ export { default as Header } from './header.svelte';
6
+ export { default as MaximizeTrigger } from './maximize-trigger.svelte';
7
+ export { default as MinimizeTrigger } from './minimize-trigger.svelte';
8
+ export { default as Positioner } from './positioner.svelte';
9
+ export { default as ResizeTrigger } from './resize-trigger.svelte';
10
+ export { default as RestoreTrigger } from './restore-trigger.svelte';
11
+ export { default as Root } from './root.svelte';
12
+ export { default as Title } from './title.svelte';
13
+ export { default as Trigger } from './trigger.svelte';
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelHeaderProps
5
+ extends HtmlIngredientProps<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFloatingPanelContext} from './context.svelte.js';
11
+
12
+ let {asChild, children, ...props}: FloatingPanelHeaderProps = $props();
13
+
14
+ let floatingPanel = getFloatingPanelContext();
15
+
16
+ let mergedProps = $derived(mergeProps(props, floatingPanel.getHeaderProps()));
17
+ </script>
18
+
19
+ {#if asChild}
20
+ {@render asChild(mergedProps)}
21
+ {:else}
22
+ <div {...mergedProps}>
23
+ {@render children?.()}
24
+ </div>
25
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Header: $$__sveltets_2_IsomorphicComponent<FloatingPanelHeaderProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Header = InstanceType<typeof Header>;
18
+ export default Header;
@@ -0,0 +1,16 @@
1
+ export * as FloatingPanel from './floating-panel.js';
2
+ export type { FloatingPanelBodyProps } from './body.svelte';
3
+ export type { FloatingPanelCloseTriggerProps } from './close-trigger.svelte';
4
+ export type { FloatingPanelContentProps } from './content.svelte';
5
+ export type { FloatingPanelDragTriggerProps } from './drag-trigger.svelte';
6
+ export type { FloatingPanelHeaderProps } from './header.svelte';
7
+ export type { FloatingPanelMaximizeTriggerProps } from './maximize-trigger.svelte';
8
+ export type { FloatingPanelMinimizeTriggerProps } from './minimize-trigger.svelte';
9
+ export type { FloatingPanelPositionerProps } from './positioner.svelte';
10
+ export type { FloatingPanelResizeTriggerProps } from './resize-trigger.svelte';
11
+ export type { FloatingPanelRestoreTriggerProps } from './restore-trigger.svelte';
12
+ export type { FloatingPanelProps } from './root.svelte';
13
+ export type { FloatingPanelTitleProps } from './title.svelte';
14
+ export type { FloatingPanelTriggerProps } from './trigger.svelte';
15
+ export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
16
+ export { getFloatingPanelContext } from './context.svelte.js';
@@ -0,0 +1,3 @@
1
+ export * as FloatingPanel from './floating-panel.js';
2
+ export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
3
+ export { getFloatingPanelContext } from './context.svelte.js';
@@ -0,0 +1,28 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelMaximizeTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFloatingPanelContext} from './context.svelte.js';
11
+
12
+ let {asChild, children, ...props}: FloatingPanelMaximizeTriggerProps =
13
+ $props();
14
+
15
+ let floatingPanel = getFloatingPanelContext();
16
+
17
+ let mergedProps = $derived(
18
+ mergeProps(props, floatingPanel.getMaximizeTriggerProps()),
19
+ );
20
+ </script>
21
+
22
+ {#if asChild}
23
+ {@render asChild(mergedProps)}
24
+ {:else}
25
+ <button type="button" {...mergedProps}>
26
+ {@render children?.()}
27
+ </button>
28
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const MaximizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelMaximizeTriggerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type MaximizeTrigger = InstanceType<typeof MaximizeTrigger>;
18
+ export default MaximizeTrigger;
@@ -0,0 +1,28 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelMinimizeTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFloatingPanelContext} from './context.svelte.js';
11
+
12
+ let {asChild, children, ...props}: FloatingPanelMinimizeTriggerProps =
13
+ $props();
14
+
15
+ let floatingPanel = getFloatingPanelContext();
16
+
17
+ let mergedProps = $derived(
18
+ mergeProps(props, floatingPanel.getMinimizeTriggerProps()),
19
+ );
20
+ </script>
21
+
22
+ {#if asChild}
23
+ {@render asChild(mergedProps)}
24
+ {:else}
25
+ <button type="button" {...mergedProps}>
26
+ {@render children?.()}
27
+ </button>
28
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const MinimizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelMinimizeTriggerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type MinimizeTrigger = InstanceType<typeof MinimizeTrigger>;
18
+ export default MinimizeTrigger;
@@ -0,0 +1,35 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelPositionerProps
5
+ extends HtmlIngredientProps<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getPresenceContext} from '../presence/context.svelte.js';
11
+ import {getFloatingPanelContext} from './context.svelte.js';
12
+
13
+ let {asChild, children, ...props}: FloatingPanelPositionerProps = $props();
14
+
15
+ let floatingPanel = getFloatingPanelContext();
16
+ let presence = getPresenceContext();
17
+
18
+ let mergedProps = $derived(
19
+ mergeProps(
20
+ props,
21
+ floatingPanel.getPositionerProps(),
22
+ presence.getPresenceProps(),
23
+ ),
24
+ );
25
+ </script>
26
+
27
+ {#if presence.mounted}
28
+ {#if asChild}
29
+ {@render asChild(mergedProps)}
30
+ {:else}
31
+ <div {...mergedProps}>
32
+ {@render children?.()}
33
+ </div>
34
+ {/if}
35
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const Positioner: $$__sveltets_2_IsomorphicComponent<FloatingPanelPositionerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type Positioner = InstanceType<typeof Positioner>;
18
+ export default Positioner;
@@ -0,0 +1,36 @@
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {ResizeTriggerProps} from '@zag-js/floating-panel';
4
+
5
+ export interface FloatingPanelResizeTriggerProps
6
+ extends Assign<HtmlIngredientProps<'button'>, ResizeTriggerProps> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {createSplitProps} from '@zag-js/utils';
12
+ import {getFloatingPanelContext} from './context.svelte.js';
13
+
14
+ let {asChild, children, ...props}: FloatingPanelResizeTriggerProps = $props();
15
+
16
+ let floatingPanel = getFloatingPanelContext();
17
+
18
+ let [resizeTriggerProps, otherProps] = $derived(
19
+ createSplitProps<ResizeTriggerProps>([])(props),
20
+ );
21
+
22
+ let mergedProps = $derived(
23
+ mergeProps(
24
+ otherProps,
25
+ floatingPanel.getResizeTriggerProps(resizeTriggerProps),
26
+ ),
27
+ );
28
+ </script>
29
+
30
+ {#if asChild}
31
+ {@render asChild(mergedProps)}
32
+ {:else}
33
+ <button type="button" {...mergedProps}>
34
+ {@render children?.()}
35
+ </button>
36
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const ResizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelResizeTriggerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type ResizeTrigger = InstanceType<typeof ResizeTrigger>;
18
+ export default ResizeTrigger;
@@ -0,0 +1,28 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FloatingPanelRestoreTriggerProps
5
+ extends HtmlIngredientProps<'button'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFloatingPanelContext} from './context.svelte.js';
11
+
12
+ let {asChild, children, ...props}: FloatingPanelRestoreTriggerProps =
13
+ $props();
14
+
15
+ let floatingPanel = getFloatingPanelContext();
16
+
17
+ let mergedProps = $derived(
18
+ mergeProps(props, floatingPanel.getRestoreTriggerProps()),
19
+ );
20
+ </script>
21
+
22
+ {#if asChild}
23
+ {@render asChild(mergedProps)}
24
+ {:else}
25
+ <button type="button" {...mergedProps}>
26
+ {@render children?.()}
27
+ </button>
28
+ {/if}
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const RestoreTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelRestoreTriggerProps, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, "">;
17
+ type RestoreTrigger = InstanceType<typeof RestoreTrigger>;
18
+ export default RestoreTrigger;