@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.50

package/dist/hooks/use-event-listener.svelte.d.ts

@@ -1,6 +1,6 @@
 export declare function useEventListener<TType extends keyof WindowEventMap>(params: {
     element: HTMLElement | Document | Window | EventTarget | null | undefined;
     type: TType;
-    listener: (event: WindowEventMap[TType]) => any;
+    listener: (event: WindowEventMap[TType]) => unknown;
     options?: boolean | AddEventListenerOptions;
 }): void;

package/dist/hooks/use-event-listener.svelte.js

@@ -1,5 +1,7 @@
 export function useEventListener(params) {
-    let { element = window, type, listener, options } = $derived(params);
+    if (typeof window === "undefined")
+        return;
+    const { element = window, type, listener, options } = $derived(params);
     $effect(() => {
         if (!element)
             return;

package/dist/hooks/use-focus-ring.svelte.js

@@ -2,7 +2,7 @@ import { isFocusVisible, useFocusVisibleListener } from "../utils/focusVisible.s
 export const useFocusRing = (options = {}) => {
     const { autofocus, within } = $derived(options);
     let focused = $state(false);
-    let _isFocusVisible = $state(autofocus || isFocusVisible());
+    let _isFocusVisible = $state((() => autofocus || isFocusVisible())());
     useFocusVisibleListener((isFocusVisible) => {
         _isFocusVisible = isFocusVisible;
     });

package/dist/hooks/use-inert-others.svelte.js

@@ -5,7 +5,7 @@ const originals = new Map();
 const counts = new Map();
 function markInert(element) {
     // Increase count
-    let count = counts.get(element) ?? 0;
+    const count = counts.get(element) ?? 0;
     counts.set(element, count + 1);
     // Already marked as inert, no need to do it again
     if (count !== 0)
@@ -22,7 +22,7 @@ function markInert(element) {
 }
 function markNotInert(element) {
     // Decrease counts
-    let count = counts.get(element) ?? 1; // Should always exist
+    const count = counts.get(element) ?? 1; // Should always exist
     if (count === 1)
         counts.delete(element); // We are the last one, so we can delete the count
     else
@@ -30,7 +30,7 @@ function markNotInert(element) {
     // Not the last one, so we don't restore the original values (yet)
     if (count !== 1)
         return;
-    let original = originals.get(element);
+    const original = originals.get(element);
     if (!original)
         return; // Should never happen
     // Restore original values
@@ -70,7 +70,7 @@ function markNotInert(element) {
 export function useInertOthers(options) {
     const { enabled, elements } = $derived(options);
     const { allowed, disallowed } = $derived(elements ?? {});
-    let isTopLayer = useIsTopLayer({
+    const isTopLayer = useIsTopLayer({
         get enabled() {
             return enabled;
         },
@@ -79,25 +79,25 @@ export function useInertOthers(options) {
     $effect(() => {
         if (!isTopLayer.value)
             return;
-        let d = disposables();
+        const d = disposables();
         // Mark all disallowed elements as inert
-        for (let element of disallowed ?? []) {
+        for (const element of disallowed ?? []) {
             if (!element)
                 continue;
             d.add(markInert(element));
         }
         // Mark all siblings of allowed elements (and parents) as inert
-        let allowedElements = allowed ?? [];
-        for (let element of allowedElements) {
+        const allowedElements = allowed ?? [];
+        for (const element of allowedElements) {
             if (!element)
                 continue;
-            let ownerDocument = getOwnerDocument(element);
+            const ownerDocument = getOwnerDocument(element);
             if (!ownerDocument)
                 continue;
             let parent = element.parentElement;
             while (parent && parent !== ownerDocument.body) {
                 // Mark all siblings as inert
-                for (let node of parent.children) {
+                for (const node of parent.children) {
                     // If the node contains any of the elements we should not mark it as inert
                     // because it would make the elements unreachable.
                     if (node.tagName.toLowerCase() === "svelte:fragment" || allowedElements.some((el) => node.contains(el)))

package/dist/hooks/use-is-top-layer.svelte.js

@@ -44,9 +44,9 @@ let hierarchyStores = new DefaultMap(() => createStore(() => [], {
  */
 export function useIsTopLayer(options) {
     const { enabled, scope } = $derived(options);
-    const hierarchyStore = hierarchyStores.get(scope);
+    const hierarchyStore = $derived(hierarchyStores.get(scope));
     const id = useId();
-    let hierarchy = $state(hierarchyStore.getSnapshot());
+    let hierarchy = $state((() => hierarchyStore.getSnapshot())());
     $effect(() => {
         const unsubscribe = hierarchyStore.subscribe(() => {
             hierarchy = hierarchyStore.getSnapshot();

package/dist/hooks/use-resolve-button-type.svelte.js

@@ -1,4 +1,3 @@
-import { untrack } from "svelte";
 function resolveType(props) {
     if (props.type)
         return props.type;

package/dist/hooks/use-root-containers.svelte.d.ts

@@ -1,8 +1,8 @@
 export { default as MainTreeProvider, useMainTreeNode } from "../internal/MainTreeProvider.svelte";
 export declare function useRootContainers(options?: {
-    defaultContainers?: (HTMLElement | null)[];
+    defaultContainers?: (HTMLElement | undefined | null)[];
     portals?: HTMLElement[];
-    mainTreeNode?: HTMLElement | null;
+    mainTreeNode?: HTMLElement | undefined | null;
 }): {
     readonly resolvedContainers: HTMLElement[];
     contains: (element: HTMLElement) => boolean;

package/dist/hooks/use-root-containers.svelte.js

@@ -6,21 +6,21 @@ export function useRootContainers(options = {}) {
     mainTreeNode, } = $derived(options);
     const ownerDocument = $derived(getOwnerDocument(mainTreeNode));
     const resolvedContainers = $derived.by(() => {
-        let containers = [];
+        const containers = [];
         // Resolve default containers
-        for (let container of defaultContainers) {
-            if (container === null)
+        for (const container of defaultContainers) {
+            if (!container)
                 continue;
             containers.push(container);
         }
         // Resolve portal containers
         if (portals) {
-            for (let portal of portals) {
+            for (const portal of portals) {
                 containers.push(portal);
             }
         }
         // Resolve third party (root) containers
-        for (let container of ownerDocument?.querySelectorAll("html > *, body > *") ?? []) {
+        for (const container of ownerDocument?.querySelectorAll("html > *, body > *") ?? []) {
             if (container === document.body)
                 continue; // Skip `<body>`
             if (container === document.head)

package/dist/hooks/use-tab-direction.svelte.js

@@ -6,7 +6,7 @@ export var Direction;
 })(Direction || (Direction = {}));
 export function useTabDirection() {
     let direction = $state(Direction.Forwards);
-    let enabled = true;
+    const enabled = true;
     useWindowEvent({
         enabled,
         type: "keydown",

package/dist/hooks/use-transition.svelte.js

@@ -37,8 +37,8 @@ export function transitionDataAttributes(data) {
 }
 export function useTransition(options) {
     const { enabled, element, show, events } = $derived(options);
-    let visible = $state(show);
-    let flags = $state(enabled && visible ? TransitionState.Enter | TransitionState.Closed : TransitionState.None);
+    let visible = $state((() => show)());
+    let flags = $state((() => (enabled && visible ? TransitionState.Enter | TransitionState.Closed : TransitionState.None))());
     let inFlight = $state(false);
     let cancelled = $state(false);
     const d = useDisposables();

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from "./close-button/index.js";
 export * from "./data-interactive/index.js";
 export * from "./description/index.js";
 export * from "./dialog/index.js";
+export * from "./disclosure/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./input/index.js";
@@ -11,10 +12,13 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./popover/index.js";
+export * from "./radio-group/index.js";
+export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";
 export * from "./transition/index.js";
+export * from "./utils/index.js";
 export * from "./hooks/use-id.js";
-export * from "./utils/types.js";
-export { mergeProps } from "./utils/render.js";
+export * from "./hooks/use-disabled.js";

package/dist/index.js

@@ -4,6 +4,7 @@ export * from "./close-button/index.js";
 export * from "./data-interactive/index.js";
 export * from "./description/index.js";
 export * from "./dialog/index.js";
+export * from "./disclosure/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./input/index.js";
@@ -11,10 +12,13 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./popover/index.js";
+export * from "./radio-group/index.js";
+export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";
 export * from "./transition/index.js";
+export * from "./utils/index.js";
 export * from "./hooks/use-id.js";
-export * from "./utils/types.js";
-export { mergeProps } from "./utils/render.js";
+export * from "./hooks/use-disabled.js";

package/dist/input/Input.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   const DEFAULT_INPUT_TAG = "input" as const
 
-  type InputRenderPropArg = {
+  export type InputRenderPropArg = {
     disabled: boolean
     hover: boolean
     focus: boolean
@@ -12,24 +13,22 @@
   }
   type InputPropsWeControl = "aria-labelledby" | "aria-describedby"
 
-  export type InputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = Props<
-    TTag,
-    InputRenderPropArg,
-    InputPropsWeControl,
-    {
-      id?: string
-      value?: TValue
-      disabled?: boolean
-      invalid?: boolean
-      autofocus?: boolean
-    }
-  >
+  export type InputOwnProps<TValue = string> = {
+    element?: HTMLElement
+    id?: string
+    value?: TValue
+    disabled?: boolean
+    invalid?: boolean
+    autofocus?: boolean
+  }
+
+  export type InputProps<TValue = string> = Props<typeof DEFAULT_INPUT_TAG, InputRenderPropArg, InputOwnProps<TValue>>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">
+<script lang="ts" generics="TValue = string">
   import { htmlid } from "../utils/id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
-  import { useProvidedId } from "../internal/id.js"
+  import { useProvidedId } from "../utils/id.js"
   import { useLabelledBy } from "../label/context.svelte.js"
   import { useDescribedBy } from "../description/context.svelte.js"
   import { useHover } from "../hooks/use-hover.svelte.js"
@@ -42,15 +41,15 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
+    element = $bindable(),
     value = $bindable(),
-    id = providedId?.value || `headlessui-input-${internalId}`,
+    id = providedId || `headlessui-input-${internalId}`,
     disabled: theirDisabled = false,
     autofocus = false,
     invalid = false,
     ...theirProps
-  }: { as?: TTag; value?: TValue } & InputProps<TTag, TValue> = $props()
-  const disabled = $derived(providedDisabled?.value ?? theirDisabled)
+  }: InputProps<TValue> = $props()
+  const disabled = $derived(providedDisabled.current || theirDisabled)
 
   const labelledBy = useLabelledBy()
   const describedBy = useDescribedBy()
@@ -88,4 +87,12 @@
   const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies InputRenderPropArg)
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_INPUT_TAG} name="Input" bind:ref bind:value />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_INPUT_TAG}
+  name="Input"
+  bind:element
+  bind:value
+/>

package/dist/input/Input.svelte.d.ts

@@ -1,52 +1,35 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_INPUT_TAG: "input";
-type InputRenderPropArg = {
+export type InputRenderPropArg = {
     disabled: boolean;
     hover: boolean;
     focus: boolean;
     autofocus: boolean;
     invalid: boolean;
 };
-type InputPropsWeControl = "aria-labelledby" | "aria-describedby";
-export type InputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = Props<TTag, InputRenderPropArg, InputPropsWeControl, {
+export type InputOwnProps<TValue = string> = {
+    element?: HTMLElement;
     id?: string;
     value?: TValue;
     disabled?: boolean;
     invalid?: boolean;
     autofocus?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> {
-    props(): {
-        as?: TTag | undefined;
-        value?: TValue | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | "value" | "id" | InputPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<InputRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: InputRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        value?: TValue | undefined;
-        disabled?: boolean;
-        invalid?: boolean;
-        autofocus?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+};
+export type InputProps<TValue = string> = Props<typeof DEFAULT_INPUT_TAG, InputRenderPropArg, InputOwnProps<TValue>>;
+declare class __sveltets_Render<TValue = string> {
+    props(): InputProps<TValue>;
+    events(): {};
     slots(): {};
-    bindings(): "ref" | "value";
+    bindings(): "element" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TValue>['props']>, ReturnType<__sveltets_Render<TTag, TValue>['events']>, ReturnType<__sveltets_Render<TTag, TValue>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TValue>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TValue>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TValue>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Input: $$IsomorphicComponent;
-type Input<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = InstanceType<typeof Input<TTag, TValue>>;
+type Input<TValue = string> = InstanceType<typeof Input<TValue>>;
 export default Input;

package/dist/input/index.d.ts

@@ -1 +1 @@
-export { default as Input, type InputProps } from "./Input.svelte";
+export { default as Input, type InputProps, type InputRenderPropArg as InputSlot, type InputOwnProps, } from "./Input.svelte";

package/dist/input/index.js

@@ -1 +1 @@
-export { default as Input } from "./Input.svelte";
+export { default as Input, } from "./Input.svelte";

package/dist/internal/FloatingProvider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { useFloatingProvider } from "./floating-provider.svelte.js"
+
+  const { children, enabled = true }: { children: Snippet; enabled?: boolean } = $props()
+
+  useFloatingProvider({
+    get enabled() {
+      return enabled
+    },
+  })
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/internal/FloatingProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    enabled?: boolean;
+};
+declare const FloatingProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingProvider = ReturnType<typeof FloatingProvider>;
+export default FloatingProvider;

package/dist/internal/FocusSentinel.svelte

@@ -14,40 +14,41 @@
   onMount(() => {
     mounted = true
   })
-</script>
 
-{#if enabled}
-  <Hidden
-    as="button"
-    type="button"
-    features={HiddenFeatures.Focusable}
-    onfocus={(event: FocusEvent) => {
-      event.preventDefault()
-      let frame: ReturnType<typeof requestAnimationFrame>
-
-      let tries = 50
-      function forwardFocus() {
-        // Prevent infinite loops
-        if (tries-- <= 0) {
-          if (frame) cancelAnimationFrame(frame)
-          return
-        }
-
-        // Try to move focus to the correct element. This depends on the implementation
-        // of `onFocus` of course since it would be different for each place we use it in.
-        if (onfocus?.()) {
-          cancelAnimationFrame(frame)
-          if (!mounted) return
-
-          enabled = false
-          return
-        }
-
-        // Retry
-        frame = requestAnimationFrame(forwardFocus)
+  const handleFocus = (event: FocusEvent) => {
+    event.preventDefault()
+    let frame: ReturnType<typeof requestAnimationFrame>
+
+    let tries = 50
+    function forwardFocus() {
+      // Prevent infinite loops
+      if (tries-- <= 0) {
+        if (frame) cancelAnimationFrame(frame)
+        return
+      }
+
+      // Try to move focus to the correct element. This depends on the implementation
+      // of `onFocus` of course since it would be different for each place we use it in.
+      if (onfocus?.()) {
+        cancelAnimationFrame(frame)
+        if (!mounted) return
+
+        enabled = false
+        return
       }
 
+      // Retry
       frame = requestAnimationFrame(forwardFocus)
-    }}
-  />
+    }
+
+    frame = requestAnimationFrame(forwardFocus)
+  }
+</script>
+
+{#if enabled}
+  <Hidden asChild features={HiddenFeatures.Focusable}>
+    {#snippet children({ props })}
+      <button {...props} type="button" onfocus={handleFocus}>&zwnj;</button>
+    {/snippet}
+  </Hidden>
 {/if}

package/dist/internal/FocusSentinel.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FocusSentinel: $$__sveltets_2_IsomorphicComponent<{
+interface FocusSentinelProps {
     onfocus: () => boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FocusSentinel = InstanceType<typeof FocusSentinel>;
+}
+declare const FocusSentinel: import("svelte").Component<FocusSentinelProps, {}, "">;
+type FocusSentinel = ReturnType<typeof FocusSentinel>;
 export default FocusSentinel;

package/dist/internal/ForcePortalRoot.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { Snippet } from "svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ForcePortalRoot: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     force: boolean;
     children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ForcePortalRoot = InstanceType<typeof ForcePortalRoot>;
+};
+declare const ForcePortalRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type ForcePortalRoot = ReturnType<typeof ForcePortalRoot>;
 export default ForcePortalRoot;

package/dist/internal/FormFields.svelte

@@ -2,7 +2,7 @@
   import { disposables } from "../utils/disposables.js"
   import { objectToFormEntries } from "../utils/form.js"
   import FormResolver from "./FormResolver.svelte"
-  import HoistFormFields from "./HoistFormFields.svelte"
+  import { hoistFormFields } from "./form-fields.svelte.js"
   import Hidden, { HiddenFeatures } from "./Hidden.svelte"
   import { compact } from "../utils/object.js"
 
@@ -29,25 +29,30 @@
 
     return d.addEventListener(form, "reset", onReset)
   })
-</script>
 
-<HoistFormFields>
-  <FormResolver setForm={(value) => (form = value)} {formId} />
-  {#each objectToFormEntries(data) as [name, value]}
-    <Hidden
-      features={HiddenFeatures.Hidden}
-      {...compact({
+  const fields = $derived(
+    objectToFormEntries(data).map(([name, value]) =>
+      compact({
         key: name,
         as: "input",
         type: "hidden",
-        hidden: true,
-        readOnly: true,
         form: formId,
         disabled,
         name,
         value,
         ...overrides,
-      })}
-    />
+      })
+    )
+  )
+
+  const hoisted = hoistFormFields(formFields)
+</script>
+
+{#snippet formFields()}
+  <FormResolver setForm={(value) => (form = value)} {formId} />
+  {#each fields as props}
+    <Hidden features={HiddenFeatures.Hidden} {...props} />
   {/each}
-</HoistFormFields>
+{/snippet}
+
+{#if !hoisted}{@render formFields()}{/if}

package/dist/internal/FormFields.svelte.d.ts

@@ -1,24 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FormFields: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     data: Record<string, any>;
     overrides?: Record<string, any>;
     form?: string;
     disabled?: boolean;
     onReset?: (e: Event) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FormFields = InstanceType<typeof FormFields>;
+};
+declare const FormFields: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormFields = ReturnType<typeof FormFields>;
 export default FormFields;

package/dist/internal/FormFieldsProvider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { createFormFieldsContext } from "./form-fields.svelte.js"
+
+  const { children }: { children?: Snippet } = $props()
+
+  const context = createFormFieldsContext()
+  const { fields } = $derived(context)
+</script>
+
+{#if children}{@render children()}{/if}
+<Hidden features={HiddenFeatures.Hidden}>
+  {#each fields as field}
+    {@render field()}
+  {/each}
+</Hidden>