ui-ingredients 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# UI Ingredients
+
+Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
+
+## Installation
+
+```bash
+npm install ui-ingredients
+```
+
+## Usage
+
+```svelte
+<script>
+  import {Clipboard} from 'ui-ingredients';
+
+  let {data} = $props();
+</script>
+
+<Clipboard.Root value={data.token}>
+  <Clipboard.Label>Token</Clipboard.Label>
+  <Clipboard.Control>
+    <Clipboard.Input />
+    <Clipboard.Trigger>
+      <Clipboard.Indicator copied>
+        <CheckIcon />
+      </Clipboard.Indicator>
+      <Clipboard.Indicator>
+        <CopyIcon />
+      </Clipboard.Indicator>
+    </Clipboard.Trigger>
+  </Clipboard.Control>
+</Clipboard.Root>
+```
+
+## Components
+
+- 🟢 Accordion
+- 🟢 Avatar
+- 🟢 Carousel
+- 🟢 Checkbox
+- 🟢 Clipboard
+- 🟢 Collapsible
+- ⚪ ColorPicker
+- 🟢 Combobox
+- 🟡 DatePicker
+- 🟢 Dialog
+- ⚪ Editable
+- ⚪ FileUpload
+- 🟢 HoverCard
+- 🟡 Menu
+- 🟢 NumberInput
+- 🟢 Pagination
+- 🟢 PinInput
+- 🟢 Popover
+- 🟢 Portal
+- 🟢 Presence
+- 🟢 Progress
+- ⚪ QRCode
+- 🟢 RadioGroup
+- ⚪ RatingGroup
+- 🟢 Select
+- ⚪ SignaturePad
+- 🟢 Slider
+- ⚪ Splitter
+- ⚪ Steps
+- 🟢 Switch
+- 🟢 Tabs
+- 🟡 TagsInput
+- ⚪ Timer
+- 🟢 Toast
+- 🟢 ToggleGroup
+- 🟢 Tooltip

package/dist/accordion/context.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as accordion from '@zag-js/accordion';
+export interface CreateAccordionContextProps extends accordion.Context {
+}
+export interface CreateAccordionContextReturn extends ReturnType<typeof createAccordionContext> {
+}
+export declare function createAccordionContext(props: CreateAccordionContextProps): accordion.Api;
+export declare function setAccordionContext(value: CreateAccordionContextReturn): any;
+export declare function useAccordionContext(): CreateAccordionContextReturn;
+export declare function setAccordionItemContext(value: accordion.ItemProps): void;
+export declare function useAccordionItemContext(): accordion.ItemProps;

package/dist/accordion/context.svelte.js

@@ -0,0 +1,20 @@
+import * as accordion from '@zag-js/accordion';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createAccordionContext(props) {
+    const [state, send] = useMachine(accordion.machine(props));
+    const api = $derived(reflect(() => accordion.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setAccordionContext(value) {
+    return setContext('Accordion', reflect(() => value));
+}
+export function useAccordionContext() {
+    return getContext('Accordion');
+}
+export function setAccordionItemContext(value) {
+    setContext('AccordionItem', reflect(() => value));
+}
+export function useAccordionItemContext() {
+    return getContext('AccordionItem');
+}

package/dist/accordion/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ItemContent, type AccordionItemContentProps } from './item-content.svelte';
+export { default as ItemIndicator, type AccordionIndicatorProps } from './item-indicator.svelte';
+export { default as ItemTrigger, type AccordionItemTriggerProps } from './item-trigger.svelte';
+export { default as Item, type AccordionItemProps } from './item.svelte';
+export { default as Root, type AccordionProps } from './root.svelte';

package/dist/accordion/index.js

@@ -0,0 +1,5 @@
+export { default as ItemContent } from './item-content.svelte';
+export { default as ItemIndicator } from './item-indicator.svelte';
+export { default as ItemTrigger } from './item-trigger.svelte';
+export { default as Item } from './item.svelte';
+export { default as Root } from './root.svelte';

package/dist/accordion/item-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useAccordionContext, useAccordionItemContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useAccordionContext();
+let itemContext = useAccordionItemContext();
+let attrs = $derived(mergeProps(props, context.getItemContentProps(itemContext)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/accordion/item-content.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface AccordionItemContentProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ItemContent: $$__sveltets_2_IsomorphicComponent<AccordionItemContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemContent = InstanceType<typeof ItemContent>;
+export default ItemContent;

package/dist/accordion/item-indicator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useAccordionContext, useAccordionItemContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useAccordionContext();
+let itemContext = useAccordionItemContext();
+let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemContext)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/accordion/item-indicator.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface AccordionIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ItemIndicator: $$__sveltets_2_IsomorphicComponent<AccordionIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemIndicator = InstanceType<typeof ItemIndicator>;
+export default ItemIndicator;

package/dist/accordion/item-trigger.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useAccordionContext, useAccordionItemContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useAccordionContext();
+let itemContext = useAccordionItemContext();
+let attrs = $derived(mergeProps(props, context.getItemTriggerProps(itemContext)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/accordion/item-trigger.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface AccordionItemTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ItemTrigger: $$__sveltets_2_IsomorphicComponent<AccordionItemTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemTrigger = InstanceType<typeof ItemTrigger>;
+export default ItemTrigger;

package/dist/accordion/item.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { setAccordionItemContext, useAccordionContext } from "./context.svelte.js";
+let { value, disabled, children, ...props } = $props();
+let context = useAccordionContext();
+let attrs = $derived(
+  mergeProps(
+    props,
+    context.getItemProps({
+      value,
+      disabled
+    })
+  )
+);
+setAccordionItemContext({
+  value,
+  disabled
+});
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/accordion/item.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Assign } from '../types.js';
+import type { ItemProps } from '@zag-js/accordion';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface AccordionItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Item: $$__sveltets_2_IsomorphicComponent<AccordionItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Item = InstanceType<typeof Item>;
+export default Item;

package/dist/accordion/root.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { nanoid } from "nanoid/non-secure";
+import { createAccordionContext, setAccordionContext } from "./context.svelte.js";
+let {
+  id = nanoid(),
+  ids,
+  dir,
+  value,
+  disabled,
+  multiple,
+  orientation,
+  collapsible,
+  onFocusChange,
+  onValueChange,
+  getRootNode,
+  children,
+  ...props
+} = $props();
+let context = createAccordionContext({
+  id,
+  ids,
+  dir,
+  value: $state.snapshot(value),
+  multiple,
+  disabled,
+  collapsible,
+  orientation,
+  onFocusChange,
+  onValueChange,
+  getRootNode
+});
+let attrs = $derived(mergeProps(props, context.getRootProps()));
+setAccordionContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/accordion/root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { CreateAccordionContextProps, CreateAccordionContextReturn } from './context.svelte.js';
+export interface AccordionProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateAccordionContextProps>> {
+    children?: Snippet<[CreateAccordionContextReturn]>;
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<AccordionProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/avatar/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import * as avatar from '@zag-js/avatar';
+export interface CreateAvatarContextProps extends avatar.Context {
+}
+export interface CreateAvatarContextReturn extends ReturnType<typeof createAvatarContext> {
+}
+export declare function createAvatarContext(props: CreateAvatarContextProps): any;
+export declare function setAvatarContext(value: CreateAvatarContextReturn): void;
+export declare function useAvatarContext(): CreateAvatarContextReturn;

package/dist/avatar/context.svelte.js

@@ -0,0 +1,14 @@
+import * as avatar from '@zag-js/avatar';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createAvatarContext(props) {
+    const [state, send] = useMachine(avatar.machine(props));
+    const api = $derived(reflect(() => avatar.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setAvatarContext(value) {
+    setContext('Avatar', value);
+}
+export function useAvatarContext() {
+    return getContext('Avatar');
+}

package/dist/avatar/fallback.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useAvatarContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useAvatarContext();
+let attrs = $derived(mergeProps(props, context.getFallbackProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/avatar/fallback.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface AvatarFallbackProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Fallback: $$__sveltets_2_IsomorphicComponent<AvatarFallbackProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Fallback = InstanceType<typeof Fallback>;
+export default Fallback;

package/dist/avatar/image.svelte

@@ -0,0 +1,10 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useAvatarContext } from "./context.svelte.js";
+let { ...props } = $props();
+let context = useAvatarContext();
+let attrs = $derived(mergeProps(props, context.getImageProps()));
+</script>
+
+<img {...attrs} />

package/dist/avatar/image.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface AvatarImageProps extends Assign<SvelteHTMLElements['img'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Image: $$__sveltets_2_IsomorphicComponent<AvatarImageProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Image = InstanceType<typeof Image>;
+export default Image;

package/dist/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Fallback, type AvatarFallbackProps } from './fallback.svelte';
+export { default as Image, type AvatarImageProps } from './image.svelte';
+export { default as Root, type AvatarProps } from './root.svelte';

package/dist/avatar/index.js

@@ -0,0 +1,3 @@
+export { default as Fallback } from './fallback.svelte';
+export { default as Image } from './image.svelte';
+export { default as Root } from './root.svelte';

package/dist/avatar/root.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" context="module">import {} from "./context.svelte.js";
+</script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { nanoid } from "nanoid/non-secure";
+import { createAvatarContext, setAvatarContext } from "./context.svelte.js";
+let {
+  id = nanoid(),
+  ids,
+  dir,
+  getRootNode,
+  onStatusChange,
+  children,
+  ...props
+} = $props();
+let context = createAvatarContext({
+  id,
+  ids,
+  dir,
+  getRootNode,
+  onStatusChange
+});
+let attrs = $derived(mergeProps(props, context.getRootProps()));
+setAvatarContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/avatar/root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type CreateAvatarContextProps, type CreateAvatarContextReturn } from './context.svelte.js';
+export interface AvatarProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateAvatarContextProps>> {
+    children?: Snippet<[CreateAvatarContextReturn]>;
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<AvatarProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/carousel/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import * as carousel from '@zag-js/carousel';
+export interface CreateCarouselContextProps extends carousel.Context {
+}
+export interface CreateCarouselContextReturn extends ReturnType<typeof createCarouselContext> {
+}
+export declare function createCarouselContext(props: CreateCarouselContextProps): any;
+export declare function setCarouselContext(value: CreateCarouselContextReturn): void;
+export declare function useCarouselContext(): CreateCarouselContextReturn;

package/dist/carousel/context.svelte.js

@@ -0,0 +1,14 @@
+import * as carousel from '@zag-js/carousel';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createCarouselContext(props) {
+    const [state, send] = useMachine(carousel.machine(props));
+    const api = $derived(reflect(() => carousel.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setCarouselContext(value) {
+    setContext('Carousel', value);
+}
+export function useCarouselContext() {
+    return getContext('Carousel');
+}

package/dist/carousel/index.d.ts

@@ -0,0 +1,8 @@
+export { default as IndicatorGroup, type CarouselIndicatorGroupProps, } from './indicator-group.svelte';
+export { default as Indicator, type CarouselIndicatorProps } from './indicator.svelte';
+export { default as ItemGroup, type CarouselItemGroupProps } from './item-group.svelte';
+export { default as Item, type CarouselItemProps } from './item.svelte';
+export { default as NextTrigger, type CarouselNextTriggerProps } from './next-trigger.svelte';
+export { default as PrevTrigger, type CarouselPrevTriggerProps } from './prev-trigger.svelte';
+export { default as Root, type CarouselProps } from './root.svelte';
+export { default as Viewport, type CarouselViewportProps } from './viewport.svelte';

package/dist/carousel/index.js

@@ -0,0 +1,8 @@
+export { default as IndicatorGroup, } from './indicator-group.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as ItemGroup } from './item-group.svelte';
+export { default as Item } from './item.svelte';
+export { default as NextTrigger } from './next-trigger.svelte';
+export { default as PrevTrigger } from './prev-trigger.svelte';
+export { default as Root } from './root.svelte';
+export { default as Viewport } from './viewport.svelte';

package/dist/carousel/indicator-group.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useCarouselContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useCarouselContext();
+let attrs = $derived(mergeProps(props, context.getIndicatorGroupProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/carousel/indicator-group.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface CarouselIndicatorGroupProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IndicatorGroup: $$__sveltets_2_IsomorphicComponent<CarouselIndicatorGroupProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type IndicatorGroup = InstanceType<typeof IndicatorGroup>;
+export default IndicatorGroup;

package/dist/carousel/indicator.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useCarouselContext } from "./context.svelte.js";
+let { index, readOnly, children, ...props } = $props();
+let context = useCarouselContext();
+let attrs = $derived(
+  mergeProps(
+    props,
+    context.getIndicatorProps({
+      index,
+      readOnly
+    })
+  )
+);
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/carousel/indicator.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Assign } from '../types.js';
+import type { IndicatorProps } from '@zag-js/carousel';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface CarouselIndicatorProps extends Assign<SvelteHTMLElements['button'], IndicatorProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Indicator: $$__sveltets_2_IsomorphicComponent<CarouselIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Indicator = InstanceType<typeof Indicator>;
+export default Indicator;