@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/editable/editable-edit-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface EditableEditTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface EditableEditTriggerProps extends Assign<HTMLProps<'button'>, EditableEditTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useEditableContext } from './use-editable-context'
+
+  const props: EditableEditTriggerProps = $props()
+
+  const editable = useEditableContext()
+  const mergedProps = $derived(mergeProps(editable().getEditTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} /> 

package/dist/components/editable/editable-edit-trigger.svelte.d.ts

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

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

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

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

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

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

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

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

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

package/dist/components/editable/editable-preview.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface EditablePreviewBaseProps extends PolymorphicProps<'span'> {}
+  export interface EditablePreviewProps extends Assign<HTMLProps<'span'>, EditablePreviewBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useEditableContext } from './use-editable-context'
+
+  const props: EditablePreviewProps = $props()
+
+  const editable = useEditableContext()
+  const mergedProps = $derived(mergeProps(editable().getPreviewProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps}>
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    {editable().valueText}
+  {/if}
+</Ark>

package/dist/components/editable/editable-preview.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps } from '../../types'
+  import type { UseEditableProps } from './use-editable.svelte'
+
+  export interface EditableRootBaseProps extends UseEditableProps {}
+  export interface EditableRootProps extends Assign<HTMLProps<'div'>, EditableRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { splitEditableProps } from './editable-split-props'
+  import { EditableProvider } from './use-editable-context'
+  import { useEditable } from './use-editable.svelte'
+
+  let { value = $bindable(), ...props }: EditableRootProps = $props()
+
+  const providedId = $props.id()
+
+  const [useEditableProps, localProps] = splitEditableProps(props)
+
+  const machineProps = $derived.by<UseEditableProps>(() => {
+    return {
+      ...useEditableProps,
+      id: useEditableProps.id ?? providedId,
+      value,
+      onValueChange(details) {
+        useEditableProps.onValueChange?.(details)
+        value = details.value
+      },
+    }
+  })
+
+  const editable = useEditable(() => machineProps)
+  const mergedProps = $derived(mergeProps(editable().getRootProps(), localProps))
+
+  EditableProvider(editable)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps } from '../../types';
+import type { UseEditableProps } from './use-editable.svelte';
+export interface EditableRootBaseProps extends UseEditableProps {
+}
+export interface EditableRootProps extends Assign<HTMLProps<'div'>, EditableRootBaseProps> {
+}
+declare const EditableRoot: import("svelte").Component<EditableRootProps, {}, "value">;
+type EditableRoot = ReturnType<typeof EditableRoot>;
+export default EditableRoot;

package/dist/components/editable/editable-split-props.d.ts

@@ -0,0 +1,2 @@
+import type { UseEditableProps } from './use-editable.svelte';
+export declare function splitEditableProps<T extends UseEditableProps>(props: T): [UseEditableProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "placeholder" | "onValueChange" | "translations" | "readOnly" | "invalid" | "required" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "edit" | "defaultEdit" | "onEditChange" | "maxLength" | "onValueRevert" | "onValueCommit">];

package/dist/components/editable/editable-split-props.js

@@ -0,0 +1,33 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export function splitEditableProps(props) {
+    return splitFn(props, [
+        'activationMode',
+        'autoResize',
+        'defaultEdit',
+        'defaultValue',
+        'disabled',
+        'edit',
+        'finalFocusEl',
+        'form',
+        'id',
+        'ids',
+        'invalid',
+        'maxLength',
+        'name',
+        'onEditChange',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onPointerDownOutside',
+        'onValueChange',
+        'onValueCommit',
+        'onValueRevert',
+        'placeholder',
+        'readOnly',
+        'required',
+        'selectOnFocus',
+        'submitMode',
+        'translations',
+        'value',
+    ]);
+}

package/dist/components/editable/editable-submit-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface EditableSubmitTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface EditableSubmitTriggerProps extends Assign<HTMLProps<'button'>, EditableSubmitTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useEditableContext } from './use-editable-context'
+
+  const props: EditableSubmitTriggerProps = $props()
+
+  const editable = useEditableContext()
+  const mergedProps = $derived(mergeProps(editable().getSubmitTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} /> 

package/dist/components/editable/editable-submit-trigger.svelte.d.ts

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

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

@@ -0,0 +1 @@
+export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/components/editable/editable.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/components/editable/editable.d.ts

@@ -0,0 +1,12 @@
+export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export { default as Area, type EditableAreaBaseProps as AreaBaseProps, type EditableAreaProps as AreaProps, } from './editable-area.svelte';
+export { default as CancelTrigger, type EditableCancelTriggerBaseProps as CancelTriggerBaseProps, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger.svelte';
+export { default as Context, type EditableContextProps as ContextProps } from './editable-context.svelte';
+export { default as Control, type EditableControlBaseProps as ControlBaseProps, type EditableControlProps as ControlProps, } from './editable-control.svelte';
+export { default as EditTrigger, type EditableEditTriggerBaseProps as EditTriggerBaseProps, type EditableEditTriggerProps as EditTriggerProps, } from './editable-edit-trigger.svelte';
+export { default as Input, type EditableInputBaseProps as InputBaseProps, type EditableInputProps as InputProps, } from './editable-input.svelte';
+export { default as Label, type EditableLabelBaseProps as LabelBaseProps, type EditableLabelProps as LabelProps, } from './editable-label.svelte';
+export { default as Preview, type EditablePreviewBaseProps as PreviewBaseProps, type EditablePreviewProps as PreviewProps, } from './editable-preview.svelte';
+export { default as Root, type EditableRootBaseProps as RootBaseProps, type EditableRootProps as RootProps, } from './editable-root.svelte';
+export { default as RootProvider, type EditableRootProviderBaseProps as RootProviderBaseProps, type EditableRootProviderProps as RootProviderProps, } from './editable-root-provider.svelte';
+export { default as SubmitTrigger, type EditableSubmitTriggerBaseProps as SubmitTriggerBaseProps, type EditableSubmitTriggerProps as SubmitTriggerProps, } from './editable-submit-trigger.svelte';

package/dist/components/editable/editable.js

@@ -0,0 +1,11 @@
+export { default as Area, } from './editable-area.svelte';
+export { default as CancelTrigger, } from './editable-cancel-trigger.svelte';
+export { default as Context } from './editable-context.svelte';
+export { default as Control, } from './editable-control.svelte';
+export { default as EditTrigger, } from './editable-edit-trigger.svelte';
+export { default as Input, } from './editable-input.svelte';
+export { default as Label, } from './editable-label.svelte';
+export { default as Preview, } from './editable-preview.svelte';
+export { default as Root, } from './editable-root.svelte';
+export { default as RootProvider, } from './editable-root-provider.svelte';
+export { default as SubmitTrigger, } from './editable-submit-trigger.svelte';

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

@@ -0,0 +1,18 @@
+export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export { default as EditableArea, type EditableAreaBaseProps, type EditableAreaProps } from './editable-area.svelte';
+export { default as EditableCancelTrigger, type EditableCancelTriggerBaseProps, type EditableCancelTriggerProps, } from './editable-cancel-trigger.svelte';
+export { default as EditableContext, type EditableContextProps } from './editable-context.svelte';
+export { default as EditableControl, type EditableControlBaseProps, type EditableControlProps, } from './editable-control.svelte';
+export { default as EditableEditTrigger, type EditableEditTriggerBaseProps, type EditableEditTriggerProps, } from './editable-edit-trigger.svelte';
+export { default as EditableInput, type EditableInputBaseProps, type EditableInputProps } from './editable-input.svelte';
+export { default as EditableLabel, type EditableLabelBaseProps, type EditableLabelProps } from './editable-label.svelte';
+export { default as EditablePreview, type EditablePreviewBaseProps, type EditablePreviewProps, } from './editable-preview.svelte';
+export { default as EditableRoot, type EditableRootBaseProps, type EditableRootProps } from './editable-root.svelte';
+export { default as EditableRootProvider, type EditableRootProviderBaseProps, type EditableRootProviderProps, } from './editable-root-provider.svelte';
+export { default as EditableSubmitTrigger, type EditableSubmitTriggerBaseProps, type EditableSubmitTriggerProps, } from './editable-submit-trigger.svelte';
+export { editableAnatomy } from './editable.anatomy';
+export { useEditableContext } from './use-editable-context';
+export type { UseEditableContext } from './use-editable-context';
+export { useEditable } from './use-editable.svelte';
+export type { UseEditableProps, UseEditableReturn } from './use-editable.svelte';
+export * as Editable from './editable';

package/dist/components/editable/index.js

@@ -0,0 +1,15 @@
+export { default as EditableArea } from './editable-area.svelte';
+export { default as EditableCancelTrigger, } from './editable-cancel-trigger.svelte';
+export { default as EditableContext } from './editable-context.svelte';
+export { default as EditableControl, } from './editable-control.svelte';
+export { default as EditableEditTrigger, } from './editable-edit-trigger.svelte';
+export { default as EditableInput } from './editable-input.svelte';
+export { default as EditableLabel } from './editable-label.svelte';
+export { default as EditablePreview, } from './editable-preview.svelte';
+export { default as EditableRoot } from './editable-root.svelte';
+export { default as EditableRootProvider, } from './editable-root-provider.svelte';
+export { default as EditableSubmitTrigger, } from './editable-submit-trigger.svelte';
+export { editableAnatomy } from './editable.anatomy';
+export { useEditableContext } from './use-editable-context';
+export { useEditable } from './use-editable.svelte';
+export * as Editable from './editable';

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

@@ -0,0 +1,4 @@
+import type { UseEditableReturn } from './use-editable.svelte';
+export interface UseEditableContext extends UseEditableReturn {
+}
+export declare const EditableProvider: (opts: UseEditableContext) => void, useEditableContext: (fallback?: UseEditableContext | undefined) => UseEditableContext;

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

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [EditableProvider, useEditableContext] = createContext({
+    name: 'EditableContext',
+});

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

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

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

@@ -0,0 +1,30 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as editable from '@zag-js/editable';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+import { useFieldContext } from '../field';
+export const useEditable = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props) || {};
+        return {
+            getRootNode: env().getRootNode,
+            dir: locale().dir,
+            ids: {
+                label: field?.()?.ids.label,
+                input: field?.()?.ids.control,
+            },
+            disabled: field?.()?.disabled,
+            invalid: field?.()?.invalid,
+            readOnly: field?.()?.readOnly,
+            required: field?.()?.required,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(editable.machine, () => machineProps);
+    const api = $derived(editable.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/factory/factory.svelte

@@ -3,26 +3,27 @@
   import { isVoidHTMLTag, isVoidSVGTag } from '../../utils/tags'
   import { mergeProps } from '@zag-js/svelte'
   import type { SvelteHTMLElements } from 'svelte/elements'
-  import SvgElement from './svg-element.svelte'
+  import Svg from './svg-factory.svelte'
 
   type Props = HTMLProps<T> &
     PolymorphicProps<T> & {
       as: T
+      ref?: Element | null
     }
 
-  const { asChild = false, children, render, as, ...rest }: Props = $props()
+  let { asChild, children, as, ref = $bindable<Element | null>(null), ...rest }: Props = $props()
 
   const propsFn: PropsFn<T> = (props) => mergeProps(rest, props ?? {})
 </script>
 
 {#if asChild}
-  {@render render?.(propsFn)}
+  {@render asChild?.(propsFn)}
 {:else if isVoidSVGTag(as)}
-  <SvgElement {as} {...rest} />
+  <Svg {as} {...rest} bind:ref />
 {:else if isVoidHTMLTag(as)}
-  <svelte:element this={as} {...rest} />
+  <svelte:element this={as} {...rest} bind:this={ref} />
 {:else}
-  <svelte:element this={as} {...rest}>
+  <svelte:element this={as} {...rest} bind:this={ref}>
     {@render children?.()}
   </svelte:element>
 {/if}

package/dist/components/factory/factory.svelte.d.ts

@@ -3,10 +3,11 @@ import type { SvelteHTMLElements } from 'svelte/elements';
 declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
     props(): HTMLProps<T> & PolymorphicProps<T> & {
         as: T;
+        ref?: Element | null;
     };
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/factory/{svg-element.svelte → svg-factory.svelte}

@@ -7,9 +7,10 @@
   type Props = HTMLProps<T> &
     PolymorphicProps<T> & {
       as: T
+      ref?: Element | null
     }
 
-  const { as, ...props }: Props = $props()
+  let { as, ref = $bindable<Element | null>(null), ...props }: Props = $props()
 </script>
 
-<svelte:element this={as} {...props} />
+<svelte:element this={as} {...props} bind:this={ref} />

package/dist/components/factory/{svg-element.svelte.d.ts → svg-factory.svelte.d.ts}

@@ -3,10 +3,11 @@ import type { SvelteHTMLElements } from 'svelte/elements';
 declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
     props(): HTMLProps<T> & PolymorphicProps<T> & {
         as: T;
+        ref?: Element | null;
     };
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
@@ -16,6 +17,6 @@ interface $$IsomorphicComponent {
     <T extends keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const SvgElement: $$IsomorphicComponent;
-type SvgElement<T extends keyof SvelteHTMLElements> = InstanceType<typeof SvgElement<T>>;
-export default SvgElement;
+declare const SvgFactory: $$IsomorphicComponent;
+type SvgFactory<T extends keyof SvelteHTMLElements> = InstanceType<typeof SvgFactory<T>>;
+export default SvgFactory;

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseFieldReturn } from './use-field.svelte'
+
+  export interface FieldContextProps {
+    render: Snippet<[UseFieldReturn]>
+  }
+</script>
+
+<script lang="ts">
+  import { useFieldContext } from './use-field-context'
+
+  const props: FieldContextProps = $props()
+  const field = useFieldContext()
+</script>
+
+{#if field}
+  {@render props.render(field)}
+{/if}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseFieldReturn } from './use-field.svelte';
+export interface FieldContextProps {
+    render: Snippet<[UseFieldReturn]>;
+}
+declare const FieldContext: import("svelte").Component<FieldContextProps, {}, "">;
+type FieldContext = ReturnType<typeof FieldContext>;
+export default FieldContext;

package/dist/components/field/field-error-text.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface FieldErrorTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface FieldErrorTextProps extends Assign<HTMLProps<'span'>, FieldErrorTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useFieldContext } from './use-field-context'
+
+  const props: FieldErrorTextProps = $props()
+  const field = useFieldContext()
+  const mergedProps = $derived(mergeProps(field?.().getErrorTextProps() ?? {}, props))
+</script>
+
+{#if field?.().invalid}
+  <Ark as="span" {...mergedProps} />
+{/if}

package/dist/components/field/field-error-text.svelte.d.ts

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

package/dist/components/field/field-helper-text.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface FieldHelperTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface FieldHelperTextProps extends Assign<HTMLProps<'span'>, FieldHelperTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useFieldContext } from './use-field-context'
+
+  const props: FieldHelperTextProps = $props()
+  const field = useFieldContext()
+  const mergedProps = $derived(mergeProps(field?.().getHelperTextProps() ?? {}, props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/field/field-helper-text.svelte.d.ts

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

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

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

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

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