@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/checkbox/checkbox-root-provider.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseCheckboxReturn } from './use-checkbox.svelte'
+
+  export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseCheckboxReturn
+  }
+  export interface CheckboxRootProviderProps extends Assign<HTMLProps<'label'>, CheckboxRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { CheckboxProvider } from './use-checkbox-context'
+
+  const { value, ...props }: CheckboxRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  CheckboxProvider(value)
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/checkbox/checkbox-root-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseCheckboxReturn } from './use-checkbox.svelte';
+export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseCheckboxReturn;
+}
+export interface CheckboxRootProviderProps extends Assign<HTMLProps<'label'>, CheckboxRootProviderBaseProps> {
+}
+declare const CheckboxRootProvider: import("svelte").Component<CheckboxRootProviderProps, {}, "">;
+type CheckboxRootProvider = ReturnType<typeof CheckboxRootProvider>;
+export default CheckboxRootProvider;

package/dist/components/checkbox/checkbox-root.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseCheckboxProps } from './use-checkbox.svelte'
+
+  export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'> {}
+  export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { CheckboxProvider } from './use-checkbox-context'
+  import { splitCheckboxProps } from './split-checkbox-props.svelte'
+  import { useCheckbox } from './use-checkbox.svelte'
+
+  let { checked = $bindable(), ...props }: CheckboxRootProps = $props()
+  const providedId = $props.id()
+
+  const [useCheckboxProps, localProps] = $derived(splitCheckboxProps(props))
+
+  const resolvedProps = $derived<UseCheckboxProps>({
+    ...useCheckboxProps,
+    id: useCheckboxProps.id ?? providedId,
+    checked,
+    onCheckedChange(details) {
+      useCheckboxProps.onCheckedChange?.(details)
+      checked = details.checked
+    },
+  })
+
+  const checkbox = useCheckbox(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(checkbox().getRootProps(), localProps))
+
+  CheckboxProvider(checkbox)
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/checkbox/checkbox-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseCheckboxProps } from './use-checkbox.svelte';
+export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'> {
+}
+export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {
+}
+declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "checked">;
+type CheckboxRoot = ReturnType<typeof CheckboxRoot>;
+export default CheckboxRoot;

package/dist/components/checkbox/checkbox.anatomy.d.ts

@@ -0,0 +1 @@
+export declare const checkboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"label" | "group" | "root" | "control" | "indicator">;

package/dist/components/checkbox/checkbox.anatomy.js

@@ -0,0 +1,2 @@
+import { anatomy } from '@zag-js/checkbox';
+export const checkboxAnatomy = anatomy.extendWith('group');

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
+export { default as Context, type CheckboxContextProps as ContextProps } from './checkbox-context.svelte';
+export { default as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control.svelte';
+export { default as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group.svelte';
+export { default as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input.svelte';
+export { default as Indicator, type CheckboxIndicatorBaseProps as IndicatorBaseProps, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator.svelte';
+export { default as Label, type CheckboxLabelBaseProps as LabelBaseProps, type CheckboxLabelProps as LabelProps, } from './checkbox-label.svelte';
+export { default as Root, type CheckboxRootBaseProps as RootBaseProps, type CheckboxRootProps as RootProps, } from './checkbox-root.svelte';
+export { default as RootProvider, type CheckboxRootProviderBaseProps as RootProviderBaseProps, type CheckboxRootProviderProps as RootProviderProps, } from './checkbox-root-provider.svelte';

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,8 @@
+export { default as Context } from './checkbox-context.svelte';
+export { default as Control, } from './checkbox-control.svelte';
+export { default as Group, } from './checkbox-group.svelte';
+export { default as HiddenInput, } from './checkbox-hidden-input.svelte';
+export { default as Indicator, } from './checkbox-indicator.svelte';
+export { default as Label, } from './checkbox-label.svelte';
+export { default as Root, } from './checkbox-root.svelte';
+export { default as RootProvider, } from './checkbox-root-provider.svelte';

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,19 @@
+export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxCheckedState, } from '@zag-js/checkbox';
+export { default as CheckboxContext, type CheckboxContextProps } from './checkbox-context.svelte';
+export { default as CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps, } from './checkbox-control.svelte';
+export { default as CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps } from './checkbox-group.svelte';
+export { default as CheckboxHiddenInput, type CheckboxHiddenInputBaseProps, type CheckboxHiddenInputProps, } from './checkbox-hidden-input.svelte';
+export { default as CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps, } from './checkbox-indicator.svelte';
+export { default as CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps } from './checkbox-label.svelte';
+export { default as CheckboxRootProvider, type CheckboxRootProviderBaseProps, type CheckboxRootProviderProps, } from './checkbox-root-provider.svelte';
+export { default as CheckboxRoot, type CheckboxRootBaseProps, type CheckboxRootProps } from './checkbox-root.svelte';
+export { checkboxAnatomy } from './checkbox.anatomy';
+export { CheckboxProvider, useCheckboxContext } from './use-checkbox-context';
+export type { UseCheckboxContext } from './use-checkbox-context';
+export { CheckboxGroupProvider, useCheckboxGroupContext } from './use-checkbox-group-context';
+export type { UseCheckboxGroupContext } from './use-checkbox-group-context';
+export { useCheckboxGroup } from './use-checkbox-group.svelte';
+export type { UseCheckboxGroupProps, UseCheckboxGroupReturn } from './use-checkbox-group.svelte';
+export { useCheckbox } from './use-checkbox.svelte';
+export type { UseCheckboxProps, UseCheckboxReturn } from './use-checkbox.svelte';
+export * as Checkbox from './checkbox';

package/dist/components/checkbox/index.js

@@ -0,0 +1,14 @@
+export { default as CheckboxContext } from './checkbox-context.svelte';
+export { default as CheckboxControl, } from './checkbox-control.svelte';
+export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as CheckboxHiddenInput, } from './checkbox-hidden-input.svelte';
+export { default as CheckboxIndicator, } from './checkbox-indicator.svelte';
+export { default as CheckboxLabel } from './checkbox-label.svelte';
+export { default as CheckboxRootProvider, } from './checkbox-root-provider.svelte';
+export { default as CheckboxRoot } from './checkbox-root.svelte';
+export { checkboxAnatomy } from './checkbox.anatomy';
+export { CheckboxProvider, useCheckboxContext } from './use-checkbox-context';
+export { CheckboxGroupProvider, useCheckboxGroupContext } from './use-checkbox-group-context';
+export { useCheckboxGroup } from './use-checkbox-group.svelte';
+export { useCheckbox } from './use-checkbox.svelte';
+export * as Checkbox from './checkbox';

package/dist/components/checkbox/split-checkbox-group-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseCheckboxGroupProps } from './use-checkbox-group.svelte';
+export declare const splitCheckboxGroupProps: <T extends UseCheckboxGroupProps>(props: T) => [UseCheckboxGroupProps, Omit<T, "name" | "defaultValue" | "value" | "disabled" | "onValueChange" | "readOnly" | "invalid">];

package/dist/components/checkbox/split-checkbox-group-props.svelte.js

@@ -0,0 +1,3 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export const splitCheckboxGroupProps = (props) => splitFn(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'invalid', 'readOnly', 'name']);

package/dist/components/checkbox/split-checkbox-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseCheckboxProps } from './use-checkbox.svelte';
+export declare const splitCheckboxProps: <T extends UseCheckboxProps>(props: T) => [UseCheckboxProps, Omit<T, "form" | "name" | "value" | "ids" | "disabled" | "id" | "readOnly" | "invalid" | "required" | "checked" | "defaultChecked" | "onCheckedChange">];

package/dist/components/checkbox/split-checkbox-props.svelte.js

@@ -0,0 +1,16 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export const splitCheckboxProps = (props) => splitFn(props, [
+    'checked',
+    'defaultChecked',
+    'disabled',
+    'form',
+    'id',
+    'ids',
+    'invalid',
+    'name',
+    'onCheckedChange',
+    'readOnly',
+    'required',
+    'value',
+]);

package/dist/components/checkbox/use-checkbox-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseCheckboxReturn } from './use-checkbox.svelte';
+export type UseCheckboxContext = UseCheckboxReturn;
+export declare const CheckboxProvider: (context: UseCheckboxContext) => void;
+export declare const useCheckboxContext: () => UseCheckboxContext;

package/dist/components/checkbox/use-checkbox-context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const CHECKBOX_CONTEXT_KEY = Symbol('CheckboxContext');
+export const CheckboxProvider = (context) => {
+    setContext(CHECKBOX_CONTEXT_KEY, context);
+};
+export const useCheckboxContext = () => {
+    const context = getContext(CHECKBOX_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('useCheckboxContext must be used within a CheckboxProvider');
+    }
+    return context;
+};

package/dist/components/checkbox/use-checkbox-group-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte';
+export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
+}
+export declare const CheckboxGroupProvider: (opts: UseCheckboxGroupContext) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext;

package/dist/components/checkbox/use-checkbox-group-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../../utils/create-context';
+export const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
+    name: 'CheckboxGroupContext',
+    strict: false,
+});

package/dist/components/checkbox/use-checkbox-group.svelte.d.ts

@@ -0,0 +1,55 @@
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseCheckboxGroupProps {
+    /**
+     * The initial value of `value` when uncontrolled
+     */
+    defaultValue?: string[];
+    /**
+     * The controlled value of the checkbox group
+     */
+    value?: string[];
+    /**
+     * The name of the input fields in the checkbox group
+     * (Useful for form submission).
+     */
+    name?: string;
+    /**
+     * The callback to call when the value changes
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * If `true`, the checkbox group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the checkbox group is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the checkbox group is invalid
+     */
+    invalid?: boolean;
+}
+export interface CheckboxGroupItemProps {
+    value: string | undefined;
+}
+export type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;
+export declare const useCheckboxGroup: (props?: MaybeFunction<UseCheckboxGroupProps>) => () => {
+    isChecked: (val: string | undefined) => boolean;
+    value: string[];
+    name: string | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    setValue: (newValue: string[]) => void;
+    addValue: (val: string) => void;
+    toggleValue: (val: string) => void;
+    getItemProps: (itemProps: CheckboxGroupItemProps) => {
+        checked: boolean | undefined;
+        onCheckedChange(): void;
+        name: string | undefined;
+        disabled: boolean;
+        readOnly: boolean;
+        invalid: boolean;
+    };
+};

package/dist/components/checkbox/use-checkbox-group.svelte.js

@@ -0,0 +1,59 @@
+import { runIfFn } from '@zag-js/utils';
+import { untrack } from 'svelte';
+export const useCheckboxGroup = (props = {}) => {
+    const resolvedProps = $derived(runIfFn(props) || {});
+    let valueState = $state(untrack(() => resolvedProps.defaultValue) ?? []);
+    const value = $derived(resolvedProps.value !== undefined ? resolvedProps.value : valueState);
+    const interactive = $derived(!(resolvedProps.disabled || resolvedProps.readOnly));
+    const setValue = (newValue) => {
+        if (resolvedProps.value === undefined) {
+            valueState = newValue;
+        }
+        resolvedProps.onValueChange?.(newValue);
+    };
+    const isChecked = (val) => {
+        return value.some((v) => String(v) === String(val));
+    };
+    const toggleValue = (val) => {
+        isChecked(val) ? removeValue(val) : addValue(val);
+    };
+    const addValue = (val) => {
+        if (!interactive)
+            return;
+        if (isChecked(val))
+            return;
+        setValue(value.concat(val));
+    };
+    const removeValue = (val) => {
+        if (!interactive)
+            return;
+        setValue(value.filter((v) => String(v) !== String(val)));
+    };
+    const getItemProps = (itemProps) => {
+        return {
+            checked: itemProps.value != null ? isChecked(itemProps.value) : undefined,
+            onCheckedChange() {
+                if (itemProps.value != null) {
+                    toggleValue(itemProps.value);
+                }
+            },
+            name: resolvedProps.name,
+            disabled: !!resolvedProps.disabled,
+            readOnly: !!resolvedProps.readOnly,
+            invalid: !!resolvedProps.invalid,
+        };
+    };
+    const api = $derived({
+        isChecked,
+        value,
+        name: resolvedProps.name,
+        disabled: !!resolvedProps.disabled,
+        readOnly: !!resolvedProps.readOnly,
+        invalid: !!resolvedProps.invalid,
+        setValue,
+        addValue,
+        toggleValue,
+        getItemProps,
+    });
+    return () => api;
+};

package/dist/components/checkbox/use-checkbox.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import * as checkbox from '@zag-js/checkbox';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseCheckboxProps extends Optional<Omit<checkbox.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseCheckboxReturn extends Accessor<checkbox.Api<PropTypes>> {
+}
+export declare const useCheckbox: (props?: MaybeFunction<UseCheckboxProps>) => UseCheckboxReturn;

package/dist/components/checkbox/use-checkbox.svelte.js

@@ -0,0 +1,33 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as checkbox from '@zag-js/checkbox';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+import { useFieldContext } from '../field';
+import { useCheckboxGroupContext } from './use-checkbox-group-context';
+export const useCheckbox = (props = {}) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const checkboxGroup = useCheckboxGroupContext();
+    const field = useFieldContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        const localProps = mergeProps(resolvedProps, checkboxGroup?.()?.getItemProps({ value: resolvedProps.value }) ?? {});
+        return {
+            ids: {
+                label: field?.()?.ids.label,
+                hiddenInput: field?.()?.ids.control,
+            },
+            dir: locale().dir,
+            disabled: field?.()?.disabled,
+            readOnly: field?.()?.readOnly,
+            invalid: field?.()?.invalid,
+            required: field?.()?.required,
+            getRootNode: env().getRootNode,
+            ...localProps,
+        };
+    });
+    const service = useMachine(checkbox.machine, () => machineProps);
+    const api = $derived(checkbox.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/client-only/client-only.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+
+  export interface ClientOnlyProps {
+    children?: Snippet
+    fallback?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  const props: ClientOnlyProps = $props()
+
+  let isClient = $state(false)
+
+  onMount(() => {
+    isClient = true
+  })
+</script>
+
+{#if isClient}
+  {@render props.children?.()}
+{:else if props.fallback}
+  {@render props.fallback()}
+{/if}

package/dist/components/client-only/client-only.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface ClientOnlyProps {
+    children?: Snippet;
+    fallback?: Snippet;
+}
+declare const ClientOnly: import("svelte").Component<ClientOnlyProps, {}, "">;
+type ClientOnly = ReturnType<typeof ClientOnly>;
+export default ClientOnly;

package/dist/components/client-only/index.d.ts

@@ -0,0 +1 @@
+export { default as ClientOnly, type ClientOnlyProps } from './client-only.svelte';

package/dist/components/client-only/index.js

@@ -0,0 +1 @@
+export { default as ClientOnly } from './client-only.svelte';

package/dist/components/clipboard/clipboard-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseClipboardContext } from './use-clipboard-context'
+
+  export interface ClipboardContextProps {
+    render?: Snippet<[UseClipboardContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useClipboardContext } from './use-clipboard-context'
+
+  const { render }: ClipboardContextProps = $props()
+
+  const context = useClipboardContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/clipboard/clipboard-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseClipboardContext } from './use-clipboard-context';
+export interface ClipboardContextProps {
+    render?: Snippet<[UseClipboardContext]>;
+}
+declare const ClipboardContext: import("svelte").Component<ClipboardContextProps, {}, "">;
+type ClipboardContext = ReturnType<typeof ClipboardContext>;
+export default ClipboardContext;

package/dist/components/clipboard/clipboard-control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ClipboardControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface ClipboardControlProps extends Assign<HTMLProps<'div'>, ClipboardControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useClipboardContext } from './use-clipboard-context'
+
+  const props: ClipboardControlProps = $props()
+
+  const clipboard = useClipboardContext()
+  const mergedProps = $derived(mergeProps(clipboard().getControlProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/clipboard/clipboard-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ClipboardControlBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ClipboardControlProps extends Assign<HTMLProps<'div'>, ClipboardControlBaseProps> {
+}
+declare const ClipboardControl: import("svelte").Component<ClipboardControlProps, {}, "">;
+type ClipboardControl = ReturnType<typeof ClipboardControl>;
+export default ClipboardControl;

package/dist/components/clipboard/clipboard-indicator.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Snippet } from 'svelte'
+
+  export interface ClipboardIndicatorBaseProps extends PolymorphicProps<'div'> {
+    copied?: Snippet
+  }
+  export interface ClipboardIndicatorProps extends Assign<HTMLProps<'div'>, ClipboardIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useClipboardContext } from './use-clipboard-context'
+
+  const { children, copied, ...localProps }: ClipboardIndicatorProps = $props()
+
+  const clipboard = useClipboardContext()
+  const mergedProps = $derived(mergeProps(clipboard().getIndicatorProps({ copied: clipboard().copied }), localProps))
+</script>
+
+<Ark as="div" {...mergedProps}>
+  {#if clipboard().copied && copied}
+    {@render copied()}
+  {:else if children}
+    {@render children()}
+  {/if}
+</Ark>

package/dist/components/clipboard/clipboard-indicator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Snippet } from 'svelte';
+export interface ClipboardIndicatorBaseProps extends PolymorphicProps<'div'> {
+    copied?: Snippet;
+}
+export interface ClipboardIndicatorProps extends Assign<HTMLProps<'div'>, ClipboardIndicatorBaseProps> {
+}
+declare const ClipboardIndicator: import("svelte").Component<ClipboardIndicatorProps, {}, "">;
+type ClipboardIndicator = ReturnType<typeof ClipboardIndicator>;
+export default ClipboardIndicator;

package/dist/components/clipboard/clipboard-input.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ClipboardInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface ClipboardInputProps extends Assign<HTMLProps<'input'>, ClipboardInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useClipboardContext } from './use-clipboard-context'
+
+  const props: ClipboardInputProps = $props()
+
+  const clipboard = useClipboardContext()
+  const mergedProps = $derived(mergeProps(clipboard().getInputProps(), props))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/clipboard/clipboard-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ClipboardInputBaseProps extends PolymorphicProps<'input'> {
+}
+export interface ClipboardInputProps extends Assign<HTMLProps<'input'>, ClipboardInputBaseProps> {
+}
+declare const ClipboardInput: import("svelte").Component<ClipboardInputProps, {}, "">;
+type ClipboardInput = ReturnType<typeof ClipboardInput>;
+export default ClipboardInput;

package/dist/components/clipboard/clipboard-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ClipboardLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ClipboardLabelProps extends Assign<HTMLProps<'label'>, ClipboardLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useClipboardContext } from './use-clipboard-context'
+
+  const props: ClipboardLabelProps = $props()
+
+  const clipboard = useClipboardContext()
+  const mergedProps = $derived(mergeProps(clipboard().getLabelProps(), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/clipboard/clipboard-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ClipboardLabelBaseProps extends PolymorphicProps<'label'> {
+}
+export interface ClipboardLabelProps extends Assign<HTMLProps<'label'>, ClipboardLabelBaseProps> {
+}
+declare const ClipboardLabel: import("svelte").Component<ClipboardLabelProps, {}, "">;
+type ClipboardLabel = ReturnType<typeof ClipboardLabel>;
+export default ClipboardLabel;

package/dist/components/clipboard/clipboard-root-provider.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseClipboardReturn } from './use-clipboard.svelte'
+
+  export interface ClipboardRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseClipboardReturn
+  }
+  export interface ClipboardRootProviderProps extends Assign<HTMLProps<'div'>, ClipboardRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { ClipboardProvider } from './use-clipboard-context'
+
+  const { value, ...props }: ClipboardRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  ClipboardProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/clipboard/clipboard-root-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseClipboardReturn } from './use-clipboard.svelte';
+export interface ClipboardRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseClipboardReturn;
+}
+export interface ClipboardRootProviderProps extends Assign<HTMLProps<'div'>, ClipboardRootProviderBaseProps> {
+}
+declare const ClipboardRootProvider: import("svelte").Component<ClipboardRootProviderProps, {}, "">;
+type ClipboardRootProvider = ReturnType<typeof ClipboardRootProvider>;
+export default ClipboardRootProvider;