ui-ingredients 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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';
|