ui-ingredients 0.16.0 → 0.17.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -2
- package/dist/accordion/index.d.ts +2 -1
- package/dist/accordion/index.js +2 -1
- package/dist/alert/index.d.ts +2 -1
- package/dist/alert/index.js +2 -1
- package/dist/alert-dialog/index.d.ts +2 -1
- package/dist/alert-dialog/index.js +2 -1
- package/dist/anatomy.d.ts +1 -0
- package/dist/anatomy.js +1 -0
- package/dist/angle-slider/angle-slider-anatomy.d.ts +1 -0
- package/dist/angle-slider/angle-slider-anatomy.js +1 -0
- package/dist/angle-slider/angle-slider-context.svelte.d.ts +2 -0
- package/dist/angle-slider/angle-slider-context.svelte.js +2 -0
- package/dist/angle-slider/angle-slider-control.svelte +29 -0
- package/dist/angle-slider/angle-slider-control.svelte.d.ts +21 -0
- package/dist/angle-slider/angle-slider-hidden-input.svelte +28 -0
- package/dist/angle-slider/angle-slider-hidden-input.svelte.d.ts +21 -0
- package/dist/angle-slider/angle-slider-label.svelte +29 -0
- package/dist/angle-slider/angle-slider-label.svelte.d.ts +21 -0
- package/dist/angle-slider/angle-slider-marker-group.svelte +31 -0
- package/dist/angle-slider/angle-slider-marker-group.svelte.d.ts +21 -0
- package/dist/angle-slider/angle-slider-marker.svelte +38 -0
- package/dist/angle-slider/angle-slider-marker.svelte.d.ts +22 -0
- package/dist/angle-slider/angle-slider-root.svelte +59 -0
- package/dist/angle-slider/angle-slider-root.svelte.d.ts +22 -0
- package/dist/angle-slider/angle-slider-thumb.svelte +29 -0
- package/dist/angle-slider/angle-slider-thumb.svelte.d.ts +21 -0
- package/dist/angle-slider/angle-slider-value-text.svelte +35 -0
- package/dist/angle-slider/angle-slider-value-text.svelte.d.ts +21 -0
- package/dist/angle-slider/angle-slider.d.ts +8 -0
- package/dist/angle-slider/angle-slider.js +8 -0
- package/dist/angle-slider/create-angle-slider.svelte.d.ts +7 -0
- package/dist/angle-slider/create-angle-slider.svelte.js +18 -0
- package/dist/angle-slider/index.d.ts +12 -0
- package/dist/angle-slider/index.js +4 -0
- package/dist/avatar/index.d.ts +2 -2
- package/dist/avatar/index.js +2 -2
- package/dist/breadcrumbs/index.d.ts +2 -1
- package/dist/breadcrumbs/index.js +2 -1
- package/dist/carousel/index.d.ts +2 -1
- package/dist/carousel/index.js +2 -1
- package/dist/checkbox/index.d.ts +2 -1
- package/dist/checkbox/index.js +2 -1
- package/dist/clipboard/clipboard-indicator.svelte +40 -40
- package/dist/clipboard/index.d.ts +2 -1
- package/dist/clipboard/index.js +2 -1
- package/dist/collapsible/index.d.ts +2 -1
- package/dist/collapsible/index.js +2 -1
- package/dist/color-picker/index.d.ts +2 -1
- package/dist/color-picker/index.js +2 -1
- package/dist/combobox/index.d.ts +2 -1
- package/dist/combobox/index.js +2 -1
- package/dist/date-picker/index.d.ts +2 -1
- package/dist/date-picker/index.js +2 -1
- package/dist/dialog/index.d.ts +2 -1
- package/dist/dialog/index.js +2 -1
- package/dist/drawer/index.d.ts +3 -2
- package/dist/drawer/index.js +2 -1
- package/dist/editable/index.d.ts +2 -1
- package/dist/editable/index.js +2 -1
- package/dist/environment-provider/index.d.ts +1 -1
- package/dist/environment-provider/index.js +1 -1
- package/dist/field/index.d.ts +2 -1
- package/dist/field/index.js +2 -1
- package/dist/file-upload/index.d.ts +2 -1
- package/dist/file-upload/index.js +2 -1
- package/dist/floating-panel/index.d.ts +2 -1
- package/dist/floating-panel/index.js +2 -1
- package/dist/hover-card/index.d.ts +2 -1
- package/dist/hover-card/index.js +2 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/locale-provider/index.d.ts +1 -1
- package/dist/locale-provider/index.js +1 -1
- package/dist/menu/index.d.ts +2 -1
- package/dist/menu/index.js +2 -1
- package/dist/number-input/index.d.ts +2 -1
- package/dist/number-input/index.js +2 -1
- package/dist/pagination/index.d.ts +2 -1
- package/dist/pagination/index.js +2 -1
- package/dist/pin-input/index.d.ts +2 -1
- package/dist/pin-input/index.js +2 -1
- package/dist/popover/index.d.ts +2 -1
- package/dist/popover/index.js +2 -1
- package/dist/presence/index.d.ts +1 -1
- package/dist/presence/index.js +1 -1
- package/dist/progress/index.d.ts +2 -1
- package/dist/progress/index.js +2 -1
- package/dist/qr-code/index.d.ts +2 -1
- package/dist/qr-code/index.js +2 -1
- package/dist/radio-group/index.d.ts +2 -1
- package/dist/radio-group/index.js +2 -1
- package/dist/rating-group/index.d.ts +2 -1
- package/dist/rating-group/index.js +2 -1
- package/dist/segment-group/index.d.ts +2 -1
- package/dist/segment-group/index.js +2 -1
- package/dist/select/index.d.ts +2 -1
- package/dist/select/index.js +2 -1
- package/dist/signature-pad/index.d.ts +2 -1
- package/dist/signature-pad/index.js +2 -1
- package/dist/slider/index.d.ts +2 -1
- package/dist/slider/index.js +2 -1
- package/dist/splitter/index.d.ts +2 -1
- package/dist/splitter/index.js +2 -1
- package/dist/steps/index.d.ts +2 -1
- package/dist/steps/index.js +2 -1
- package/dist/switch/index.d.ts +2 -1
- package/dist/switch/index.js +2 -1
- package/dist/tabs/index.d.ts +2 -1
- package/dist/tabs/index.js +2 -1
- package/dist/tags-input/index.d.ts +2 -1
- package/dist/tags-input/index.js +2 -1
- package/dist/time-picker/index.d.ts +2 -1
- package/dist/time-picker/index.js +2 -1
- package/dist/timer/index.d.ts +2 -1
- package/dist/timer/index.js +2 -1
- package/dist/toast/index.d.ts +2 -1
- package/dist/toast/index.js +2 -1
- package/dist/toggle/index.d.ts +2 -0
- package/dist/toggle/index.js +2 -0
- package/dist/toggle-group/index.d.ts +2 -1
- package/dist/toggle-group/index.js +2 -1
- package/dist/tooltip/index.d.ts +2 -1
- package/dist/tooltip/index.js +2 -1
- package/dist/tour/index.d.ts +2 -2
- package/dist/tour/index.js +2 -1
- package/dist/tree-view/index.d.ts +2 -1
- package/dist/tree-view/index.js +2 -1
- package/package.json +404 -403
package/README.md
CHANGED
@@ -38,11 +38,11 @@ npm install ui-ingredients
|
|
38
38
|
</Dialog.Root>
|
39
39
|
```
|
40
40
|
|
41
|
-
##
|
41
|
+
## Inspiration
|
42
42
|
|
43
43
|
- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
|
44
44
|
- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
|
45
45
|
|
46
46
|
## Documentation
|
47
47
|
|
48
|
-
Browse
|
48
|
+
Browse the [documentation](https://ui-ingredients.vercel.app/) for more information on how to use UI Ingredients
|
@@ -5,4 +5,5 @@ export type { AccordionItemTriggerProps } from './accordion-item-trigger.svelte'
|
|
5
5
|
export type { AccordionItemProps } from './accordion-item.svelte';
|
6
6
|
export type { AccordionProps } from './accordion-root.svelte';
|
7
7
|
export { anatomy as accordionAnatomy } from './accordion-anatomy.js';
|
8
|
-
export { getAccordionContext } from './accordion-context.svelte.js';
|
8
|
+
export { getAccordionContext, setAccordionContext, } from './accordion-context.svelte.js';
|
9
|
+
export { createAccordion, type CreateAccordionProps, type CreateAccordionReturn, } from './create-accordion.svelte.js';
|
package/dist/accordion/index.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
1
|
export * as Accordion from './accordion.js';
|
2
2
|
export { anatomy as accordionAnatomy } from './accordion-anatomy.js';
|
3
|
-
export { getAccordionContext } from './accordion-context.svelte.js';
|
3
|
+
export { getAccordionContext, setAccordionContext, } from './accordion-context.svelte.js';
|
4
|
+
export { createAccordion, } from './create-accordion.svelte.js';
|
package/dist/alert/index.d.ts
CHANGED
@@ -4,4 +4,5 @@ export type { AlertIndicatorProps } from './alert-indicator.svelte';
|
|
4
4
|
export type { AlertProps } from './alert-root.svelte';
|
5
5
|
export type { AlertTitleProps } from './alert-title.svelte';
|
6
6
|
export { anatomy as alertAnatomy } from './alert-anatomy.js';
|
7
|
-
export { getAlertContext } from './alert-context.js';
|
7
|
+
export { getAlertContext, setAlertContext } from './alert-context.js';
|
8
|
+
export { createAlert, type CreateAlertReturn } from './create-alert.svelte.js';
|
package/dist/alert/index.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
1
|
export * as Alert from './alert.js';
|
2
2
|
export { anatomy as alertAnatomy } from './alert-anatomy.js';
|
3
|
-
export { getAlertContext } from './alert-context.js';
|
3
|
+
export { getAlertContext, setAlertContext } from './alert-context.js';
|
4
|
+
export { createAlert } from './create-alert.svelte.js';
|
@@ -8,4 +8,5 @@ export type { AlertDialogProps } from './alert-dialog-root.svelte';
|
|
8
8
|
export type { AlertDialogTitleProps } from './alert-dialog-title.svelte';
|
9
9
|
export type { AlertDialogTriggerProps } from './alert-dialog-trigger.svelte';
|
10
10
|
export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
|
11
|
-
export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
|
11
|
+
export { getAlertDialogContext, setAlertDialogContext, } from './alert-dialog-context.svelte.js';
|
12
|
+
export { createAlertDialog, type CreateAlertDialogProps, type CreateAlertDialogReturn, } from './create-alert-dialog.svelte.js';
|
@@ -1,3 +1,4 @@
|
|
1
1
|
export * as AlertDialog from './alert-dialog.js';
|
2
2
|
export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
|
3
|
-
export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
|
3
|
+
export { getAlertDialogContext, setAlertDialogContext, } from './alert-dialog-context.svelte.js';
|
4
|
+
export { createAlertDialog, } from './create-alert-dialog.svelte.js';
|
package/dist/anatomy.d.ts
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
export { anatomy as accordionAnatomy } from './accordion/accordion-anatomy.js';
|
2
2
|
export { anatomy as alertDialogAnatomy } from './alert-dialog/alert-dialog-anatomy.js';
|
3
3
|
export { anatomy as alertAnatomy } from './alert/alert-anatomy.js';
|
4
|
+
export { anatomy as angleSliderAnatomy } from './angle-slider/angle-slider-anatomy.js';
|
4
5
|
export { anatomy as avatarAnatomy } from './avatar/avatar-anatomy.js';
|
5
6
|
export { anatomy as breadcrumbsAnatomy } from './breadcrumbs/breadcrumbs-anatomy.js';
|
6
7
|
export { anatomy as carouselAnatomy } from './carousel/carousel-anatomy.js';
|
package/dist/anatomy.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
export { anatomy as accordionAnatomy } from './accordion/accordion-anatomy.js';
|
2
2
|
export { anatomy as alertDialogAnatomy } from './alert-dialog/alert-dialog-anatomy.js';
|
3
3
|
export { anatomy as alertAnatomy } from './alert/alert-anatomy.js';
|
4
|
+
export { anatomy as angleSliderAnatomy } from './angle-slider/angle-slider-anatomy.js';
|
4
5
|
export { anatomy as avatarAnatomy } from './avatar/avatar-anatomy.js';
|
5
6
|
export { anatomy as breadcrumbsAnatomy } from './breadcrumbs/breadcrumbs-anatomy.js';
|
6
7
|
export { anatomy as carouselAnatomy } from './carousel/carousel-anatomy.js';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { anatomy } from '@zag-js/angle-slider';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { anatomy } from '@zag-js/angle-slider';
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AngleSliderControlProps
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AngleSliderControlProps = $props();
|
18
|
+
|
19
|
+
let angleSlider = getAngleSliderContext();
|
20
|
+
let mergedProps = $derived(mergeProps(angleSlider.getControlProps(), props));
|
21
|
+
</script>
|
22
|
+
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<div {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</div>
|
29
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AngleSliderControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
|
+
}
|
4
|
+
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> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const AngleSliderControl: $$__sveltets_2_IsomorphicComponent<AngleSliderControlProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AngleSliderControl = InstanceType<typeof AngleSliderControl>;
|
21
|
+
export default AngleSliderControl;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AngleSliderHiddenInputProps
|
5
|
+
extends HtmlIngredientProps<'input', HTMLInputElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
...props
|
16
|
+
}: AngleSliderHiddenInputProps = $props();
|
17
|
+
|
18
|
+
let angleSlider = getAngleSliderContext();
|
19
|
+
let mergedProps = $derived(
|
20
|
+
mergeProps(angleSlider.getHiddenInputProps(), props),
|
21
|
+
);
|
22
|
+
</script>
|
23
|
+
|
24
|
+
{#if asChild}
|
25
|
+
{@render asChild(mergedProps)}
|
26
|
+
{:else}
|
27
|
+
<input {...mergedProps} />
|
28
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AngleSliderHiddenInputProps extends HtmlIngredientProps<'input', HTMLInputElement> {
|
3
|
+
}
|
4
|
+
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> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const AngleSliderHiddenInput: $$__sveltets_2_IsomorphicComponent<AngleSliderHiddenInputProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AngleSliderHiddenInput = InstanceType<typeof AngleSliderHiddenInput>;
|
21
|
+
export default AngleSliderHiddenInput;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AngleSliderLabelProps
|
5
|
+
extends HtmlIngredientProps<'label', HTMLLabelElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AngleSliderLabelProps = $props();
|
18
|
+
|
19
|
+
let angleSlider = getAngleSliderContext();
|
20
|
+
let mergedProps = $derived(mergeProps(angleSlider.getLabelProps(), props));
|
21
|
+
</script>
|
22
|
+
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<label {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</label>
|
29
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AngleSliderLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
|
3
|
+
}
|
4
|
+
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> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const AngleSliderLabel: $$__sveltets_2_IsomorphicComponent<AngleSliderLabelProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AngleSliderLabel = InstanceType<typeof AngleSliderLabel>;
|
21
|
+
export default AngleSliderLabel;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AngleSliderMarkerGroupProps
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AngleSliderMarkerGroupProps = $props();
|
18
|
+
|
19
|
+
let angleSlider = getAngleSliderContext();
|
20
|
+
let mergedProps = $derived(
|
21
|
+
mergeProps(angleSlider.getMarkerGroupProps(), props),
|
22
|
+
);
|
23
|
+
</script>
|
24
|
+
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<div {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</div>
|
31
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AngleSliderMarkerGroupProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
|
+
}
|
4
|
+
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> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const AngleSliderMarkerGroup: $$__sveltets_2_IsomorphicComponent<AngleSliderMarkerGroupProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AngleSliderMarkerGroup = InstanceType<typeof AngleSliderMarkerGroup>;
|
21
|
+
export default AngleSliderMarkerGroup;
|
@@ -0,0 +1,38 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {MarkerProps} from '@zag-js/angle-slider';
|
4
|
+
|
5
|
+
export interface AngleSliderMarkerProps
|
6
|
+
extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, MarkerProps> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {createSplitProps} from '@zag-js/utils';
|
12
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
13
|
+
|
14
|
+
let {
|
15
|
+
ref = $bindable(null),
|
16
|
+
asChild,
|
17
|
+
children,
|
18
|
+
...props
|
19
|
+
}: AngleSliderMarkerProps = $props();
|
20
|
+
|
21
|
+
let [markerProps, localProps] = $derived(
|
22
|
+
createSplitProps<MarkerProps>(['value'])(props),
|
23
|
+
);
|
24
|
+
|
25
|
+
let angleSlider = getAngleSliderContext();
|
26
|
+
|
27
|
+
let mergedProps = $derived(
|
28
|
+
mergeProps(angleSlider.getMarkerProps(markerProps), localProps),
|
29
|
+
);
|
30
|
+
</script>
|
31
|
+
|
32
|
+
{#if asChild}
|
33
|
+
{@render asChild(mergedProps)}
|
34
|
+
{:else}
|
35
|
+
<div {...mergedProps}>
|
36
|
+
{@render children?.()}
|
37
|
+
</div>
|
38
|
+
{/if}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
+
import type { MarkerProps } from '@zag-js/angle-slider';
|
3
|
+
export interface AngleSliderMarkerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, MarkerProps> {
|
4
|
+
}
|
5
|
+
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> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const AngleSliderMarker: $$__sveltets_2_IsomorphicComponent<AngleSliderMarkerProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "ref">;
|
21
|
+
type AngleSliderMarker = InstanceType<typeof AngleSliderMarker>;
|
22
|
+
export default AngleSliderMarker;
|
@@ -0,0 +1,59 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import {
|
4
|
+
type CreateAngleSliderProps,
|
5
|
+
type CreateAngleSliderReturn,
|
6
|
+
} from './create-angle-slider.svelte.js';
|
7
|
+
|
8
|
+
export interface AngleSliderProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>,
|
11
|
+
CreateAngleSliderProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {mergeProps} from '../merge-props.js';
|
17
|
+
import {reflect} from '@zag-js/svelte';
|
18
|
+
import {createSplitProps} from '@zag-js/utils';
|
19
|
+
import {setAngleSliderContext} from './angle-slider-context.svelte.js';
|
20
|
+
import {createAngleSlider} from './create-angle-slider.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: AngleSliderProps = $props();
|
28
|
+
|
29
|
+
let [createAngleSliderProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateAngleSliderProps>([
|
31
|
+
'id',
|
32
|
+
'ids',
|
33
|
+
'name',
|
34
|
+
'step',
|
35
|
+
'value',
|
36
|
+
'invalid',
|
37
|
+
'disabled',
|
38
|
+
'readOnly',
|
39
|
+
'onValueChange',
|
40
|
+
'onValueChangeEnd',
|
41
|
+
])(props),
|
42
|
+
);
|
43
|
+
|
44
|
+
let angleSlider = createAngleSlider(reflect(() => createAngleSliderProps));
|
45
|
+
|
46
|
+
let mergedProps = $derived(
|
47
|
+
mergeProps(angleSlider.getRootProps(), localProps),
|
48
|
+
);
|
49
|
+
|
50
|
+
setAngleSliderContext(angleSlider);
|
51
|
+
</script>
|
52
|
+
|
53
|
+
{#if asChild}
|
54
|
+
{@render asChild(mergedProps, angleSlider)}
|
55
|
+
{:else}
|
56
|
+
<div bind:this={ref} {...mergedProps}>
|
57
|
+
{@render children?.(angleSlider)}
|
58
|
+
</div>
|
59
|
+
{/if}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
+
import { type CreateAngleSliderProps, type CreateAngleSliderReturn } from './create-angle-slider.svelte.js';
|
3
|
+
export interface AngleSliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>, CreateAngleSliderProps> {
|
4
|
+
}
|
5
|
+
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> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const AngleSliderRoot: $$__sveltets_2_IsomorphicComponent<AngleSliderProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "ref">;
|
21
|
+
type AngleSliderRoot = InstanceType<typeof AngleSliderRoot>;
|
22
|
+
export default AngleSliderRoot;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AngleSliderThumbProps
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AngleSliderThumbProps = $props();
|
18
|
+
|
19
|
+
let angleSlider = getAngleSliderContext();
|
20
|
+
let mergedProps = $derived(mergeProps(angleSlider.getThumbProps(), props));
|
21
|
+
</script>
|
22
|
+
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<div {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</div>
|
29
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AngleSliderThumbProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
|
+
}
|
4
|
+
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> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const AngleSliderThumb: $$__sveltets_2_IsomorphicComponent<AngleSliderThumbProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AngleSliderThumb = InstanceType<typeof AngleSliderThumb>;
|
21
|
+
export default AngleSliderThumb;
|
@@ -0,0 +1,35 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AngleSliderValueTextProps
|
5
|
+
extends HtmlIngredientProps<'span', HTMLSpanElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAngleSliderContext} from './angle-slider-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AngleSliderValueTextProps = $props();
|
18
|
+
|
19
|
+
let angleSlider = getAngleSliderContext();
|
20
|
+
let mergedProps = $derived(
|
21
|
+
mergeProps(angleSlider.getValueTextProps(), props),
|
22
|
+
);
|
23
|
+
</script>
|
24
|
+
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<span {...mergedProps}>
|
29
|
+
{#if children}
|
30
|
+
{@render children()}
|
31
|
+
{:else}
|
32
|
+
{angleSlider.valueAsDegree}
|
33
|
+
{/if}
|
34
|
+
</span>
|
35
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AngleSliderValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
|
3
|
+
}
|
4
|
+
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> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const AngleSliderValueText: $$__sveltets_2_IsomorphicComponent<AngleSliderValueTextProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AngleSliderValueText = InstanceType<typeof AngleSliderValueText>;
|
21
|
+
export default AngleSliderValueText;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export { default as Control } from './angle-slider-control.svelte';
|
2
|
+
export { default as HiddenInput } from './angle-slider-hidden-input.svelte';
|
3
|
+
export { default as SliderLabel } from './angle-slider-label.svelte';
|
4
|
+
export { default as MarkerGroup } from './angle-slider-marker-group.svelte';
|
5
|
+
export { default as Marker } from './angle-slider-marker.svelte';
|
6
|
+
export { default as Root } from './angle-slider-root.svelte';
|
7
|
+
export { default as Thumb } from './angle-slider-thumb.svelte';
|
8
|
+
export { default as ValueText } from './angle-slider-value-text.svelte';
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export { default as Control } from './angle-slider-control.svelte';
|
2
|
+
export { default as HiddenInput } from './angle-slider-hidden-input.svelte';
|
3
|
+
export { default as SliderLabel } from './angle-slider-label.svelte';
|
4
|
+
export { default as MarkerGroup } from './angle-slider-marker-group.svelte';
|
5
|
+
export { default as Marker } from './angle-slider-marker.svelte';
|
6
|
+
export { default as Root } from './angle-slider-root.svelte';
|
7
|
+
export { default as Thumb } from './angle-slider-thumb.svelte';
|
8
|
+
export { default as ValueText } from './angle-slider-value-text.svelte';
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as angleSlider from '@zag-js/angle-slider';
|
2
|
+
export interface CreateAngleSliderProps extends Omit<angleSlider.Context, 'id' | 'dir' | 'getRootNode'> {
|
3
|
+
id?: string;
|
4
|
+
}
|
5
|
+
export interface CreateAngleSliderReturn extends angleSlider.Api {
|
6
|
+
}
|
7
|
+
export declare function createAngleSlider(props: CreateAngleSliderProps): CreateAngleSliderReturn;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { createUniqueId } from '../create-unique-id.js';
|
2
|
+
import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
|
3
|
+
import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
|
4
|
+
import * as angleSlider from '@zag-js/angle-slider';
|
5
|
+
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
6
|
+
export function createAngleSlider(props) {
|
7
|
+
const locale = getLocaleContext();
|
8
|
+
const environment = getEnvironmentContext();
|
9
|
+
const id = createUniqueId();
|
10
|
+
const context = reflect(() => ({
|
11
|
+
id,
|
12
|
+
dir: locale?.dir,
|
13
|
+
getRootNode: environment?.getRootNode,
|
14
|
+
...props,
|
15
|
+
}));
|
16
|
+
const [state, send] = useMachine(angleSlider.machine(context), { context });
|
17
|
+
return reflect(() => angleSlider.connect(state, send, normalizeProps));
|
18
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
export * as AngleSlider from './angle-slider.js';
|
2
|
+
export type { AngleSliderControlProps } from './angle-slider-control.svelte';
|
3
|
+
export type { AngleSliderHiddenInputProps } from './angle-slider-hidden-input.svelte';
|
4
|
+
export type { AngleSliderLabelProps } from './angle-slider-label.svelte';
|
5
|
+
export type { AngleSliderMarkerGroupProps } from './angle-slider-marker-group.svelte';
|
6
|
+
export type { AngleSliderMarkerProps } from './angle-slider-marker.svelte';
|
7
|
+
export type { AngleSliderProps } from './angle-slider-root.svelte';
|
8
|
+
export type { AngleSliderThumbProps } from './angle-slider-thumb.svelte';
|
9
|
+
export type { AngleSliderValueTextProps } from './angle-slider-value-text.svelte';
|
10
|
+
export { anatomy as angleSliderAnatomy } from './angle-slider-anatomy.js';
|
11
|
+
export { getAngleSliderContext, setAngleSliderContext, } from './angle-slider-context.svelte.js';
|
12
|
+
export { createAngleSlider, type CreateAngleSliderProps, type CreateAngleSliderReturn, } from './create-angle-slider.svelte.js';
|
@@ -0,0 +1,4 @@
|
|
1
|
+
export * as AngleSlider from './angle-slider.js';
|
2
|
+
export { anatomy as angleSliderAnatomy } from './angle-slider-anatomy.js';
|
3
|
+
export { getAngleSliderContext, setAngleSliderContext, } from './angle-slider-context.svelte.js';
|
4
|
+
export { createAngleSlider, } from './create-angle-slider.svelte.js';
|
package/dist/avatar/index.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
export * from './avatar-anatomy.js';
|
2
1
|
export * as Avatar from './avatar.js';
|
3
2
|
export type { AvatarFallbackProps } from './avatar-fallback.svelte';
|
4
3
|
export type { AvatarImageProps } from './avatar-image.svelte';
|
5
4
|
export type { AvatarProps } from './avatar-root.svelte';
|
6
5
|
export { anatomy as avatarAnatomy } from './avatar-anatomy.js';
|
7
|
-
export { getAvatarContext } from './avatar-context.svelte.js';
|
6
|
+
export { getAvatarContext, setAvatarContext } from './avatar-context.svelte.js';
|
7
|
+
export { createAvatar, type CreateAvatarProps, type CreateAvatarReturn, } from './create-avatar.svelte.js';
|