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.
- package/README.md +3 -0
- package/dist/file-upload/create-file-upload.svelte.js +1 -0
- package/dist/file-upload/root.svelte +1 -0
- package/dist/floating-panel/body.svelte +24 -0
- package/dist/floating-panel/body.svelte.d.ts +18 -0
- package/dist/floating-panel/close-trigger.svelte +27 -0
- package/dist/floating-panel/close-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/content.svelte +36 -0
- package/dist/floating-panel/content.svelte.d.ts +18 -0
- package/dist/floating-panel/context.svelte.d.ts +2 -0
- package/dist/floating-panel/context.svelte.js +2 -0
- package/dist/floating-panel/create-floating-panel.svelte.d.ts +7 -0
- package/dist/floating-panel/create-floating-panel.svelte.js +19 -0
- package/dist/floating-panel/drag-trigger.svelte +27 -0
- package/dist/floating-panel/drag-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/floating-panel.d.ts +13 -0
- package/dist/floating-panel/floating-panel.js +13 -0
- package/dist/floating-panel/header.svelte +25 -0
- package/dist/floating-panel/header.svelte.d.ts +18 -0
- package/dist/floating-panel/index.d.ts +16 -0
- package/dist/floating-panel/index.js +3 -0
- package/dist/floating-panel/maximize-trigger.svelte +28 -0
- package/dist/floating-panel/maximize-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/minimize-trigger.svelte +28 -0
- package/dist/floating-panel/minimize-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/positioner.svelte +35 -0
- package/dist/floating-panel/positioner.svelte.d.ts +18 -0
- package/dist/floating-panel/resize-trigger.svelte +36 -0
- package/dist/floating-panel/resize-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/restore-trigger.svelte +28 -0
- package/dist/floating-panel/restore-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/root.svelte +50 -0
- package/dist/floating-panel/root.svelte.d.ts +18 -0
- package/dist/floating-panel/title.svelte +25 -0
- package/dist/floating-panel/title.svelte.d.ts +18 -0
- package/dist/floating-panel/trigger.svelte +27 -0
- package/dist/floating-panel/trigger.svelte.d.ts +18 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/is-object.d.ts +2 -0
- package/dist/is-object.js +4 -0
- package/dist/merge-props.js +1 -4
- package/dist/portal/root.svelte +32 -32
- package/dist/presence/root.svelte +5 -1
- package/dist/switch/control.svelte +24 -24
- package/dist/switch/hidden-input.svelte +23 -23
- package/dist/switch/label.svelte +24 -24
- package/dist/switch/root.svelte +54 -54
- package/dist/switch/thumb.svelte +24 -24
- package/dist/toast/actor.svelte +19 -19
- package/dist/toast/toaster.svelte +39 -39
- package/dist/tour/arrow-tip.svelte +24 -0
- package/dist/tour/arrow-tip.svelte.d.ts +18 -0
- package/dist/tour/arrow.svelte +24 -0
- package/dist/tour/arrow.svelte.d.ts +18 -0
- package/dist/tour/close-trigger.svelte +25 -0
- package/dist/tour/close-trigger.svelte.d.ts +18 -0
- package/dist/tour/content.svelte +30 -0
- package/dist/tour/content.svelte.d.ts +18 -0
- package/dist/tour/context.svelte.d.ts +2 -0
- package/dist/tour/context.svelte.js +3 -0
- package/dist/tour/create-tour.svelte.d.ts +7 -0
- package/dist/tour/create-tour.svelte.js +19 -0
- package/dist/tour/description.svelte +24 -0
- package/dist/tour/description.svelte.d.ts +18 -0
- package/dist/tour/index.d.ts +17 -0
- package/dist/tour/index.js +3 -0
- package/dist/tour/next-trigger.svelte +24 -0
- package/dist/tour/next-trigger.svelte.d.ts +18 -0
- package/dist/tour/overlay.svelte +43 -0
- package/dist/tour/overlay.svelte.d.ts +18 -0
- package/dist/tour/positioner.svelte +30 -0
- package/dist/tour/positioner.svelte.d.ts +18 -0
- package/dist/tour/prev-trigger.svelte +24 -0
- package/dist/tour/prev-trigger.svelte.d.ts +18 -0
- package/dist/tour/progress-text.svelte +28 -0
- package/dist/tour/progress-text.svelte.d.ts +18 -0
- package/dist/tour/root.svelte +52 -0
- package/dist/tour/root.svelte.d.ts +18 -0
- package/dist/tour/skip-trigger.svelte +24 -0
- package/dist/tour/skip-trigger.svelte.d.ts +18 -0
- package/dist/tour/spotlight.svelte +24 -0
- package/dist/tour/spotlight.svelte.d.ts +18 -0
- package/dist/tour/title.svelte +24 -0
- package/dist/tour/title.svelte.d.ts +18 -0
- package/dist/tour/tour.d.ts +14 -0
- package/dist/tour/tour.js +14 -0
- package/dist/types.d.ts +10 -16
- package/package.json +46 -46
- package/dist/floating-panel/.gitkeep +0 -0
- 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
|
|
@@ -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,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,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;
|