@ark-ui/svelte 0.4.0 → 5.0.0-0

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

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

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

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

package/dist/components/field/field-required-indicator.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Snippet } from 'svelte'
+
+  export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps<'span'> {
+    fallback?: Snippet
+  }
+  export interface FieldRequiredIndicatorProps extends Assign<HTMLProps<'span'>, FieldRequiredIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useFieldContext } from './use-field-context'
+
+  const props: FieldRequiredIndicatorProps = $props()
+  const field = useFieldContext()
+  const mergedProps = $derived(mergeProps(field?.().getRequiredIndicatorProps() ?? {}, props))
+</script>
+
+{#if field?.().required}
+  <Ark as="span" {...mergedProps}>
+    {#if props.children}
+      {@render props.children?.()}
+    {:else}
+      *
+    {/if}
+  </Ark>
+{:else}
+  {@render props.fallback?.()}
+{/if}

package/dist/components/field/field-required-indicator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Snippet } from 'svelte';
+export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps<'span'> {
+    fallback?: Snippet;
+}
+export interface FieldRequiredIndicatorProps extends Assign<HTMLProps<'span'>, FieldRequiredIndicatorBaseProps> {
+}
+declare const FieldRequiredIndicator: import("svelte").Component<FieldRequiredIndicatorProps, {}, "">;
+type FieldRequiredIndicator = ReturnType<typeof FieldRequiredIndicator>;
+export default FieldRequiredIndicator;

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

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

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

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

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

@@ -0,0 +1,44 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseFieldProps } from './use-field.svelte'
+
+  export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'> {
+    ref?: Element | null
+  }
+  export interface FieldRootProps extends Assign<HTMLProps<'div'>, FieldRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { FieldProvider } from './use-field-context'
+  import { useField } from './use-field.svelte'
+
+  let { ref = $bindable<Element | null>(null), ...props }: FieldRootProps = $props()
+
+  const [useFieldProps, localProps] = $derived(
+    createSplitProps<UseFieldProps>()(props, ['id', 'ids', 'disabled', 'invalid', 'readOnly', 'required']),
+  )
+
+  const providedId = $props.id()
+
+  const machineProps = $derived.by(() => {
+    return {
+      ...useFieldProps,
+      id: useFieldProps.id ?? providedId,
+    }
+  })
+
+  const field = useField(() => machineProps)
+  const mergedProps = $derived(mergeProps(field().getRootProps(), localProps))
+
+  FieldProvider(field)
+
+  function setNode(node: Element | null) {
+    field().setRootRef(node)
+    ref = node
+  }
+</script>
+
+<Ark as="div" {...mergedProps} {@attach setNode} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseFieldProps } from './use-field.svelte';
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'> {
+    ref?: Element | null;
+}
+export interface FieldRootProps extends Assign<HTMLProps<'div'>, FieldRootBaseProps> {
+}
+declare const FieldRoot: import("svelte").Component<FieldRootProps, {}, "ref">;
+type FieldRoot = ReturnType<typeof FieldRoot>;
+export default FieldRoot;

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

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

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

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

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

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {
+    /**
+     * Whether the textarea should autoresize
+     * @default false
+     */
+    autoresize?: boolean
+  }
+  export interface FieldTextareaProps extends Assign<HTMLProps<'textarea'>, FieldTextareaBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { autoresizeTextarea } from '@zag-js/auto-resize'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useFieldContext } from './use-field-context'
+
+  let textareaRef = $state<HTMLTextAreaElement | null>(null)
+
+  const { autoresize, ...props }: FieldTextareaProps = $props()
+
+  const field = useFieldContext()
+  const mergedProps = $derived(
+    mergeProps(field?.().getTextareaProps() ?? {}, { style: { resize: autoresize ? 'none' : undefined } }, props),
+  )
+
+  $effect(() => {
+    if (!autoresize) return
+    return autoresizeTextarea(textareaRef)
+  })
+</script>
+
+<Ark as="textarea" {...mergedProps} bind:ref={textareaRef} />

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

@@ -0,0 +1,13 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {
+    /**
+     * Whether the textarea should autoresize
+     * @default false
+     */
+    autoresize?: boolean;
+}
+export interface FieldTextareaProps extends Assign<HTMLProps<'textarea'>, FieldTextareaBaseProps> {
+}
+declare const FieldTextarea: import("svelte").Component<FieldTextareaProps, {}, "">;
+type FieldTextarea = ReturnType<typeof FieldTextarea>;
+export default FieldTextarea;

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

@@ -0,0 +1,2 @@
+export declare const fieldAnatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">;
+export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", import("@zag-js/anatomy").AnatomyPart>;

package/dist/components/field/field.anatomy.js

@@ -0,0 +1,3 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const fieldAnatomy = createAnatomy('field').parts('root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea', 'requiredIndicator');
+export const parts = fieldAnatomy.build();

package/dist/components/field/field.d.ts

@@ -0,0 +1,10 @@
+export { default as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root.svelte';
+export { default as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider.svelte';
+export { default as Context, type FieldContextProps as ContextProps } from './field-context.svelte';
+export { default as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label.svelte';
+export { default as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input.svelte';
+export { default as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea.svelte';
+export { default as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select.svelte';
+export { default as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text.svelte';
+export { default as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text.svelte';
+export { default as RequiredIndicator, type FieldRequiredIndicatorProps as RequiredIndicatorProps, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, } from './field-required-indicator.svelte';

package/dist/components/field/field.js

@@ -0,0 +1,10 @@
+export { default as Root, } from './field-root.svelte';
+export { default as RootProvider, } from './field-root-provider.svelte';
+export { default as Context } from './field-context.svelte';
+export { default as Label, } from './field-label.svelte';
+export { default as Input, } from './field-input.svelte';
+export { default as Textarea, } from './field-textarea.svelte';
+export { default as Select, } from './field-select.svelte';
+export { default as HelperText, } from './field-helper-text.svelte';
+export { default as ErrorText, } from './field-error-text.svelte';
+export { default as RequiredIndicator, } from './field-required-indicator.svelte';

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

@@ -0,0 +1,14 @@
+export { default as FieldContext, type FieldContextProps } from './field-context.svelte';
+export { default as FieldErrorText, type FieldErrorTextBaseProps, type FieldErrorTextProps, } from './field-error-text.svelte';
+export { default as FieldHelperText, type FieldHelperTextBaseProps, type FieldHelperTextProps, } from './field-helper-text.svelte';
+export { default as FieldInput, type FieldInputBaseProps, type FieldInputProps } from './field-input.svelte';
+export { default as FieldLabel, type FieldLabelBaseProps, type FieldLabelProps } from './field-label.svelte';
+export { default as FieldRequiredIndicator, type FieldRequiredIndicatorBaseProps, type FieldRequiredIndicatorProps, } from './field-required-indicator.svelte';
+export { default as FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider.svelte';
+export { default as FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field-root.svelte';
+export { default as FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select.svelte';
+export { default as FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps } from './field-textarea.svelte';
+export { fieldAnatomy } from './field.anatomy';
+export { useFieldContext, type UseFieldContext } from './use-field-context';
+export { useField, type UseFieldProps, type UseFieldReturn } from './use-field.svelte';
+export * as Field from './field';

package/dist/components/field/index.js

@@ -0,0 +1,14 @@
+export { default as FieldContext } from './field-context.svelte';
+export { default as FieldErrorText, } from './field-error-text.svelte';
+export { default as FieldHelperText, } from './field-helper-text.svelte';
+export { default as FieldInput } from './field-input.svelte';
+export { default as FieldLabel } from './field-label.svelte';
+export { default as FieldRequiredIndicator, } from './field-required-indicator.svelte';
+export { default as FieldRootProvider, } from './field-root-provider.svelte';
+export { default as FieldRoot } from './field-root.svelte';
+export { default as FieldSelect } from './field-select.svelte';
+export { default as FieldTextarea } from './field-textarea.svelte';
+export { fieldAnatomy } from './field.anatomy';
+export { useFieldContext } from './use-field-context';
+export { useField } from './use-field.svelte';
+export * as Field from './field';

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

@@ -0,0 +1,4 @@
+import type { UseFieldReturn } from './use-field.svelte';
+export interface UseFieldContext extends UseFieldReturn {
+}
+export declare const FieldProvider: (opts: UseFieldContext | undefined) => void, useFieldContext: (fallback?: UseFieldContext | undefined) => UseFieldContext | undefined;

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

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

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

@@ -0,0 +1,59 @@
+import type { HTMLProps } from '../../types';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface ElementIds {
+    root?: string;
+    control?: string;
+    label?: string;
+    errorText?: string;
+    helperText?: string;
+}
+export interface UseFieldProps {
+    /**
+     * The id of the field.
+     */
+    id?: string;
+    /**
+     * The ids of the field parts.
+     */
+    ids?: ElementIds;
+    /**
+     * Indicates whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Indicates whether the field is read-only.
+     */
+    readOnly?: boolean;
+}
+export type UseFieldReturn = ReturnType<typeof useField>;
+export declare const useField: (inProps?: MaybeFunction<UseFieldProps>) => () => {
+    setRootRef: (el: Element | null) => void;
+    ariaDescribedby: string | undefined;
+    ids: {
+        root: string;
+        control: string;
+        label: string;
+        errorText: string;
+        helperText: string;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    getRootProps: () => HTMLProps<"div">;
+    getLabelProps: () => HTMLProps<"label">;
+    getInputProps: () => HTMLProps<"input">;
+    getTextareaProps: () => HTMLProps<"textarea">;
+    getSelectProps: () => HTMLProps<"select">;
+    getHelperTextProps: () => HTMLProps<"span">;
+    getErrorTextProps: () => HTMLProps<"span">;
+    getRequiredIndicatorProps: () => HTMLProps<"span">;
+};

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

@@ -0,0 +1,133 @@
+import { useEnvironmentContext } from '../../providers';
+import { ariaAttr, dataAttr } from '@zag-js/dom-query';
+import { ensureProps, runIfFn } from '@zag-js/utils';
+import { onMount } from 'svelte';
+import { useFieldsetContext } from '../fieldset/use-fieldset-context';
+import { parts } from './field.anatomy';
+export const useField = (inProps = {}) => {
+    const fieldset = useFieldsetContext();
+    const env = useEnvironmentContext();
+    const props = $derived.by(() => {
+        const resolvedProps = runIfFn(inProps);
+        ensureProps(resolvedProps, ['id']);
+        return resolvedProps;
+    });
+    const id = $derived(props.id);
+    const ids = $derived(props.ids);
+    const disabled = $derived(props.disabled ?? Boolean(fieldset?.().disabled));
+    const invalid = $derived(props.invalid ?? false);
+    const readOnly = $derived(props.readOnly ?? false);
+    const required = $derived(props.required ?? false);
+    let hasErrorText = $state(false);
+    let hasHelperText = $state(false);
+    let rootRef = $state(null);
+    const setRootRef = (el) => {
+        rootRef = el;
+    };
+    const rootId = $derived(ids?.root ?? `field::${id}`);
+    const controlId = $derived(ids?.control ?? `field::${id}::control`);
+    const errorTextId = $derived(ids?.errorText ?? `field::${id}::error-text`);
+    const helperTextId = $derived(ids?.helperText ?? `field::${id}::helper-text`);
+    const labelId = $derived(ids?.label ?? `field::${id}::label`);
+    const checkTextElements = () => {
+        if (!rootRef)
+            return;
+        const docOrShadowRoot = env().getRootNode();
+        hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+        hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
+    };
+    onMount(() => {
+        checkTextElements();
+        if (rootRef) {
+            const win = env().getWindow();
+            const observer = new win.MutationObserver(checkTextElements);
+            observer.observe(rootRef, { childList: true, subtree: true });
+            return () => observer.disconnect();
+        }
+    });
+    const labelIds = $derived(() => {
+        const ids = [];
+        if (hasErrorText && invalid)
+            ids.push(errorTextId);
+        if (hasHelperText)
+            ids.push(helperTextId);
+        return ids.join(' ') || undefined;
+    });
+    const getRootProps = () => ({
+        ...parts.root.attrs,
+        id: rootId,
+        role: 'group',
+        'data-disabled': dataAttr(disabled),
+        'data-invalid': dataAttr(invalid),
+        'data-readonly': dataAttr(readOnly),
+    });
+    const getLabelProps = () => ({
+        ...parts.label.attrs,
+        id: labelId,
+        'data-disabled': dataAttr(disabled),
+        'data-invalid': dataAttr(invalid),
+        'data-readonly': dataAttr(readOnly),
+        for: controlId,
+    });
+    const getControlProps = () => ({
+        'aria-describedby': labelIds(),
+        'aria-invalid': ariaAttr(invalid),
+        'data-invalid': dataAttr(invalid),
+        'data-required': dataAttr(required),
+        'data-readonly': dataAttr(readOnly),
+        id: controlId,
+        required,
+        disabled,
+        readOnly,
+    });
+    const getInputProps = () => ({
+        ...getControlProps(),
+        ...parts.input.attrs,
+    });
+    const getTextareaProps = () => ({
+        ...getControlProps(),
+        ...parts.textarea.attrs,
+    });
+    const getSelectProps = () => ({
+        ...getControlProps(),
+        ...parts.select.attrs,
+    });
+    const getHelperTextProps = () => ({
+        id: helperTextId,
+        ...parts.helperText.attrs,
+        'data-disabled': dataAttr(disabled),
+    });
+    const getErrorTextProps = () => ({
+        id: errorTextId,
+        ...parts.errorText.attrs,
+        'aria-live': 'polite',
+    });
+    const getRequiredIndicatorProps = () => ({
+        'aria-hidden': true,
+        ...parts.requiredIndicator.attrs,
+    });
+    const api = $derived({
+        setRootRef,
+        ariaDescribedby: labelIds(),
+        ids: {
+            root: rootId,
+            control: controlId,
+            label: labelId,
+            errorText: errorTextId,
+            helperText: helperTextId,
+        },
+        disabled,
+        invalid,
+        readOnly,
+        required,
+        getRootProps,
+        getLabelProps,
+        getInputProps,
+        getTextareaProps,
+        getSelectProps,
+        getHelperTextProps,
+        getErrorTextProps,
+        getRequiredIndicatorProps,
+    });
+    return () => api;
+};

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/fieldset/fieldset-legend.svelte

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

package/dist/components/fieldset/fieldset-legend.svelte.d.ts

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