@sprawlify/svelte 0.0.43 → 0.0.45

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

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseFieldProps } from './use-field.svelte'
+
+  export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface FieldRootProps extends Assign<HTMLProps<'div'>, FieldRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { FieldProvider } from './use-field-context'
+  import { useField } from './use-field.svelte'
+
+  let { ref = $bindable(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)
+  }
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} {@attach setNode} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseFieldProps } from './use-field.svelte';
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps<'div'>, RefAttribute {
+}
+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,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FieldSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
+  export interface FieldSelectProps extends Assign<HTMLProps<'select'>, FieldSelectBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFieldContext } from './use-field-context'
+
+  let { ref = $bindable(null), value = $bindable(), multiple, ...props }: FieldSelectProps = $props()
+
+  const field = useFieldContext()
+
+  const nativeSelectProps: HTMLProps<'select'> = $derived({
+    value,
+    multiple,
+    oninput(e) {
+      value = multiple
+        ? Array.from(e.currentTarget.selectedOptions).map((option) => option.value)
+        : e.currentTarget.value
+    },
+  })
+
+  const mergedProps = $derived(mergeProps(field?.().getSelectProps() ?? {}, nativeSelectProps, props))
+</script>
+
+<Sprawlify as="select" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'>, RefAttribute {
+    autoresize?: boolean
+  }
+  export interface FieldTextareaProps extends Assign<HTMLProps<'textarea'>, FieldTextareaBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { autoresizeTextarea } from '@sprawlify/primitives/auto-resize'
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFieldContext } from './use-field-context'
+
+  let { ref = $bindable(null), value = $bindable(), autoresize, ...props }: FieldTextareaProps = $props()
+
+  let textareaRef = $state<HTMLTextAreaElement | null>(null)
+  $effect(() => {
+    if (!autoresize) return
+    return autoresizeTextarea(textareaRef)
+  })
+
+  const field = useFieldContext()
+
+  const nativeTextareaProps: HTMLProps<'textarea'> = $derived({
+    value,
+    oninput(e) {
+      value = e.currentTarget.value
+    },
+    style: autoresize ? 'resize: none' : undefined,
+  })
+
+  const mergedProps = $derived(mergeProps(field?.().getTextareaProps() ?? {}, nativeTextareaProps, props))
+
+  function setNode(node: HTMLTextAreaElement | null) {
+    textareaRef = node
+  }
+</script>
+
+<Sprawlify as="textarea" bind:ref {...mergedProps} {@attach setNode} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'>, RefAttribute {
+    autoresize?: boolean;
+}
+export interface FieldTextareaProps extends Assign<HTMLProps<'textarea'>, FieldTextareaBaseProps> {
+}
+declare const FieldTextarea: import("svelte").Component<FieldTextareaProps, {}, "value" | "ref">;
+type FieldTextarea = ReturnType<typeof FieldTextarea>;
+export default FieldTextarea;

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,41 @@
+import type { HTMLProps } from '../../types';
+import { type MaybeFunction } from '@sprawlify/primitives/utils';
+export interface ElementIds {
+    root?: string;
+    control?: string;
+    label?: string;
+    errorText?: string;
+    helperText?: string;
+}
+export interface UseFieldProps {
+    id?: string;
+    ids?: ElementIds;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    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,134 @@
+import { useEnvironmentContext } from '../../providers';
+import { ariaAttr, dataAttr } from '@sprawlify/primitives/dom-query';
+import { ensureProps, runIfFn } from '@sprawlify/primitives/utils';
+import { onMount } from 'svelte';
+import { useFieldsetContext } from '../fieldset';
+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),
+        'data-required': dataAttr(required),
+        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-anatomy.d.ts

@@ -0,0 +1,2 @@
+export declare const fieldsetAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"legend" | "root" | "errorText" | "helperText">;
+export declare const parts: Record<"legend" | "root" | "errorText" | "helperText", import("@sprawlify/primitives/anatomy").AnatomyPart>;

package/dist/components/fieldset/fieldset-anatomy.js

@@ -0,0 +1,3 @@
+import { createAnatomy } from '@sprawlify/primitives/anatomy';
+export const fieldsetAnatomy = createAnatomy('fieldset').parts('root', 'errorText', 'helperText', 'legend');
+export const parts = fieldsetAnatomy.build();

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,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FieldsetErrorTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
+  export interface FieldsetErrorTextProps extends Assign<HTMLProps<'span'>, FieldsetErrorTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFieldsetContext } from './use-fieldset-context'
+
+  let { ref = $bindable(null), ...props }: FieldsetErrorTextProps = $props()
+  const fieldset = useFieldsetContext()
+  const mergedProps = $derived(mergeProps(fieldset?.().getErrorTextProps(), props))
+</script>
+
+{#if fieldset?.().invalid}
+  <Sprawlify as="span" bind:ref {...mergedProps} />
+{/if}

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FieldsetErrorTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+}
+export interface FieldsetErrorTextProps extends Assign<HTMLProps<'span'>, FieldsetErrorTextBaseProps> {
+}
+declare const FieldsetErrorText: import("svelte").Component<FieldsetErrorTextProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface FieldsetHelperTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
+  export interface FieldsetHelperTextProps extends Assign<HTMLProps<'span'>, FieldsetHelperTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFieldsetContext } from './use-fieldset-context'
+
+  let { ref = $bindable(null), ...props }: FieldsetHelperTextProps = $props()
+  const fieldset = useFieldsetContext()
+  const mergedProps = $derived(mergeProps(fieldset?.().getHelperTextProps(), props))
+</script>
+
+<Sprawlify as="span" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FieldsetHelperTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+}
+export interface FieldsetHelperTextProps extends Assign<HTMLProps<'span'>, FieldsetHelperTextBaseProps> {
+}
+declare const FieldsetHelperText: import("svelte").Component<FieldsetHelperTextProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {}
+  export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFieldsetContext } from './use-fieldset-context'
+
+  let { ref = $bindable(null), ...props }: FieldsetLegendProps = $props()
+  const fieldset = useFieldsetContext()
+  const mergedProps = $derived(mergeProps(fieldset?.().getLegendProps(), props))
+</script>
+
+<Sprawlify as="legend" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseFieldsetReturn } from './use-fieldset.svelte'
+
+  export interface FieldsetRootProviderBaseProps extends PolymorphicProps<'fieldset'>, RefAttribute {
+    value: UseFieldsetReturn
+  }
+  export interface FieldsetRootProviderProps extends Assign<HTMLProps<'fieldset'>, FieldsetRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { FieldsetProvider } from './use-fieldset-context'
+
+  let { ref = $bindable(null), ...props }: FieldsetRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(props.value().getRootProps(), props))
+
+  FieldsetProvider(props.value)
+</script>
+
+<Sprawlify as="fieldset" bind:ref {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseFieldsetReturn } from './use-fieldset.svelte';
+export interface FieldsetRootProviderBaseProps extends PolymorphicProps<'fieldset'>, RefAttribute {
+    value: UseFieldsetReturn;
+}
+export interface FieldsetRootProviderProps extends Assign<HTMLProps<'fieldset'>, FieldsetRootProviderBaseProps> {
+}
+declare const FieldsetRootProvider: import("svelte").Component<FieldsetRootProviderProps, {}, "ref">;
+type FieldsetRootProvider = ReturnType<typeof FieldsetRootProvider>;
+export default FieldsetRootProvider;

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

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseFieldsetProps } from './use-fieldset.svelte'
+
+  export interface FieldsetRootBaseProps extends UseFieldsetProps, PolymorphicProps<'fieldset'>, RefAttribute {}
+  export interface FieldsetRootProps extends Assign<HTMLProps<'fieldset'>, FieldsetRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { FieldsetProvider } from './use-fieldset-context'
+  import { useFieldset } from './use-fieldset.svelte'
+
+  let { ref = $bindable(null), ...props }: FieldsetRootProps = $props()
+
+  const [useFieldsetProps, localProps] = $derived(
+    createSplitProps<UseFieldsetProps>()(props, ['id', 'disabled', 'invalid']),
+  )
+
+  const providedId = $props.id()
+
+  const machineProps = $derived.by<UseFieldsetProps>(() => {
+    return {
+      ...useFieldsetProps,
+      id: useFieldsetProps.id ?? providedId,
+    }
+  })
+
+  const fieldset = useFieldset(() => machineProps)
+  const mergedProps = $derived(mergeProps(fieldset().getRootProps(), localProps))
+
+  FieldsetProvider(fieldset)
+
+  function setNode(node: HTMLFieldSetElement | null) {
+    fieldset().setRootRef(node)
+  }
+</script>
+
+<Sprawlify as="fieldset" bind:ref {...mergedProps} {@attach setNode} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseFieldsetProps } from './use-fieldset.svelte';
+export interface FieldsetRootBaseProps extends UseFieldsetProps, PolymorphicProps<'fieldset'>, RefAttribute {
+}
+export interface FieldsetRootProps extends Assign<HTMLProps<'fieldset'>, FieldsetRootBaseProps> {
+}
+declare const FieldsetRoot: import("svelte").Component<FieldsetRootProps, {}, "ref">;
+type FieldsetRoot = ReturnType<typeof FieldsetRoot>;
+export default FieldsetRoot;

package/dist/components/fieldset/fieldset.d.ts

@@ -0,0 +1,6 @@
+export { default as Root, type FieldsetRootProps } from './fieldset-root.svelte';
+export { default as RootProvider, type FieldsetRootProviderProps } from './fieldset-root-provider.svelte';
+export { default as Context, type FieldsetContextProps } from './fieldset-context.svelte';
+export { default as Legend, type FieldsetLegendProps } from './fieldset-legend.svelte';
+export { default as HelperText, type FieldsetHelperTextProps } from './fieldset-helper-text.svelte';
+export { default as ErrorText, type FieldsetErrorTextProps } from './fieldset-error-text.svelte';

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,6 @@
+export { default as Root } from './fieldset-root.svelte';
+export { default as RootProvider } from './fieldset-root-provider.svelte';
+export { default as Context } from './fieldset-context.svelte';
+export { default as Legend } from './fieldset-legend.svelte';
+export { default as HelperText } from './fieldset-helper-text.svelte';
+export { default as ErrorText } from './fieldset-error-text.svelte';

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

@@ -0,0 +1,10 @@
+export { default as FieldsetContext, type FieldsetContextProps } from './fieldset-context.svelte';
+export { default as FieldsetErrorText, type FieldsetErrorTextBaseProps, type FieldsetErrorTextProps, } from './fieldset-error-text.svelte';
+export { default as FieldsetHelperText, type FieldsetHelperTextBaseProps, type FieldsetHelperTextProps, } from './fieldset-helper-text.svelte';
+export { default as FieldsetLegend, type FieldsetLegendBaseProps, type FieldsetLegendProps, } from './fieldset-legend.svelte';
+export { default as FieldsetRootProvider, type FieldsetRootProviderBaseProps, type FieldsetRootProviderProps, } from './fieldset-root-provider.svelte';
+export { default as FieldsetRoot, type FieldsetRootBaseProps, type FieldsetRootProps } from './fieldset-root.svelte';
+export { fieldsetAnatomy } from './fieldset-anatomy';
+export { useFieldsetContext, type UseFieldsetContext } from './use-fieldset-context';
+export { useFieldset, type UseFieldsetProps, type UseFieldsetReturn } from './use-fieldset.svelte';
+export * as Fieldset from './fieldset';