@pzerelles/headlessui-svelte 2.1.2-next.14 → 2.1.2-next.15

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -25,7 +25,7 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
 declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("../utils/types.js").Children<CheckboxRenderPropArg> | undefined;
         ref?: HTMLElement;
     } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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) ? {

package/dist/dialog/DialogPanel.svelte

@@ -6,7 +6,6 @@ import { DialogStates, useDialogContext } from "./context.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 import { mergeProps } from "../utils/render.js";
 import TransitionChild from "../transition/TransitionChild.svelte";
-import { onMount } from "svelte";
 let internalId = useId();
 let {
   ref = $bindable(),

package/dist/field/Field.svelte

@@ -8,7 +8,13 @@ import { setContext } from "svelte";
 import { useLabels } from "../label/context.svelte.js";
 import { useDescriptions } from "../description/context.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps } = $props();
+import FormFieldsProvider from "../internal/FormFieldsProvider.svelte";
+let {
+  ref = $bindable(),
+  disabled: ownDisabled = false,
+  children: theirChildren,
+  ...theirProps
+} = $props();
 const inputId = `headlessui-control-${nanoid(8)}`;
 createIdContext(inputId);
 useLabels();
@@ -27,4 +33,17 @@ const ourProps = $derived({
 });
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />
+{#snippet children(slot: FieldRenderPropArg, props: Record<string, any>)}
+  <FormFieldsProvider>
+    {#if theirChildren}{@render theirChildren(slot, props)}{/if}
+  </FormFieldsProvider>
+{/snippet}
+
+<ElementOrComponent
+  {ourProps}
+  theirProps={{ ...theirProps, children }}
+  {slot}
+  defaultTag={DEFAULT_FIELD_TAG}
+  name="Field"
+  bind:ref
+/>

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";

package/dist/index.js

@@ -11,6 +11,7 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";

package/dist/internal/FormFields.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">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";
 let {
@@ -18,25 +18,28 @@ $effect(() => {
   if (!form) return;
   return d.addEventListener(form, "reset", onReset);
 });
+const fields = $derived(
+  objectToFormEntries(data).map(
+    ([name, value]) => compact({
+      key: name,
+      as: "input",
+      type: "hidden",
+      form: formId,
+      disabled,
+      name,
+      value,
+      ...overrides
+    })
+  )
+);
+const hoisted = hoistFormFields(formFields);
 </script>
 
-<HoistFormFields>
+{#snippet formFields()}
   <FormResolver setForm={(value) => (form = value)} {formId} />
-  {#each objectToFormEntries(data) as [name, value]}
-    <Hidden
-      features={HiddenFeatures.Hidden}
-      {...compact({
-        key: name,
-        as: "input",
-        type: "hidden",
-        hidden: true,
-        readOnly: true,
-        form: formId,
-        disabled,
-        name,
-        value,
-        ...overrides,
-      })}
-    />
+  {#each fields as props}
+    <Hidden features={HiddenFeatures.Hidden} {...props} />
   {/each}
-</HoistFormFields>
+{/snippet}
+
+{#if !hoisted}{@render formFields()}{/if}

package/dist/internal/FormFieldsProvider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import Hidden, { HiddenFeatures } from "./Hidden.svelte";
+import { createFormFieldsContext } from "./form-fields.svelte.js";
+const { children } = $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>

package/dist/internal/{HoistFormFields.svelte.d.ts → FormFieldsProvider.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { type Snippet } from "svelte";
+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;
@@ -12,10 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HoistFormFields: $$__sveltets_2_IsomorphicComponent<{
-    children: Snippet;
+declare const FormFieldsProvider: $$__sveltets_2_IsomorphicComponent<{
+    children?: Snippet;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
-type HoistFormFields = InstanceType<typeof HoistFormFields>;
-export default HoistFormFields;
+type FormFieldsProvider = InstanceType<typeof FormFieldsProvider>;
+export default FormFieldsProvider;

package/dist/internal/Hidden.svelte

@@ -4,7 +4,13 @@ export * from "./HiddenFeatures.js";
 const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let { ref = $bindable(), features = HiddenFeatures.None, ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let {
+  ref = $bindable(),
+  value,
+  checked,
+  features = HiddenFeatures.None,
+  ...theirProps
+} = $props();
 let ourProps = {
   "aria-hidden": (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable ? true : theirProps["aria-hidden"] ?? void 0,
   hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : void 0,
@@ -25,4 +31,12 @@ let ourProps = {
 };
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG}
+  name="Hidden"
+  bind:ref
+  {value}
+  {checked}
+/>

package/dist/internal/form-fields.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+export type FormFieldsContext = {
+    registerField: (field: Snippet) => () => void;
+};
+export declare const createFormFieldsContext: () => {
+    registerField: (field: Snippet) => () => boolean;
+    readonly fields: SvelteSet<Snippet<[]>>;
+};
+export declare const hoistFormFields: (fields: Snippet) => false | undefined;

package/dist/internal/form-fields.svelte.js

@@ -0,0 +1,22 @@
+import { getContext, setContext } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+export const createFormFieldsContext = () => {
+    const fields = new SvelteSet();
+    const context = {
+        registerField: (field) => {
+            fields.add(field);
+            return () => fields.delete(field);
+        },
+        get fields() {
+            return fields;
+        },
+    };
+    setContext("FormFieldsContext", context);
+    return context;
+};
+export const hoistFormFields = (fields) => {
+    const context = getContext("FormFieldsContext");
+    if (!context)
+        return false;
+    $effect(() => context.registerField(fields));
+};

package/dist/listbox/Listbox.svelte.d.ts

@@ -26,7 +26,7 @@ export * from "./context.svelte.js";
 declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "name" | "value" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "value" | "name" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by"> 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<ListboxRenderPropArg<TType>> | 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) ? {

package/dist/select/Select.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>let DEFAULT_SELECT_TAG = "select";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECT_TAG">import { useId } from "../hooks/use-id.js";
+import { useProvidedId } from "../utils/id.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+const providedId = useProvidedId();
+const providedDisabled = useDisabled();
+let {
+  ref = $bindable(),
+  id = providedId || `headlessui-select-${internalId}`,
+  disabled: theirDisabled = false,
+  invalid = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const labelledBy = useLabelledBy();
+const describedBy = useDescribedBy();
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const ourProps = $derived(
+  mergeProps(
+    {
+      id,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+);
+const slot = $derived({
+  disabled,
+  invalid,
+  hover,
+  focus,
+  active,
+  autofocus
+});
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SELECT_TAG} name="Select" bind:ref />

package/dist/select/Select.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare let DEFAULT_SELECT_TAG: "select";
+type SelectRenderPropArg = {
+    disabled: boolean;
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    autofocus: boolean;
+    invalid: boolean;
+};
+type SelectPropsWeControl = "aria-labelledby" | "aria-describedby";
+export type SelectProps<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = Props<TTag, SelectRenderPropArg, SelectPropsWeControl, {
+    disabled?: boolean;
+    invalid?: boolean;
+    autofocus?: boolean;
+}>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | SelectPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<SelectRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: SelectRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean;
+        invalid?: boolean;
+        autofocus?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
+    } & ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = InstanceType<typeof Select<TTag>>;
+export default Select;

package/dist/select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select, type SelectProps } from "./Select.svelte";

package/dist/select/index.js

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

package/dist/switch/Switch.svelte.d.ts

@@ -24,7 +24,7 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("../utils/types.js").Children<SwitchRenderPropArg> | undefined;
         ref?: HTMLElement;
     } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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) ? {

package/dist/utils/ElementOrComponent.svelte

@@ -23,4 +23,4 @@ const hiddenProps = $derived(
 );
 </script>
 
-{#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} {name} bind:ref bind:value bind:checked />{/if}
+{#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} bind:ref bind:value bind:checked />{/if}

package/dist/utils/Generic.svelte

@@ -2,7 +2,6 @@
 let {
   slot = {},
   tag,
-  name,
   ref = $bindable(),
   value = $bindable(),
   checked = $bindable(),

package/dist/utils/Generic.svelte.d.ts

@@ -4,7 +4,6 @@ declare class __sveltets_Render<TTag extends keyof SvelteHTMLProps, TSlot, TValu
         as?: TTag | undefined;
         slot: TSlot;
         tag: ElementType;
-        name: string;
         ref?: HTMLElement;
         value?: TValue | undefined;
         checked?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.14",
+  "version": "2.1.2-next.15",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/dist/internal/HoistFormFields.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">import { getContext } from "svelte";
-import Portal from "./Portal.svelte";
-let { children } = $props();
-const formFieldsContext = getContext("FormFieldsContext");
-</script>
-
-{#if !formFieldsContext}
-  {@render children()}
-{:else if formFieldsContext.target}
-  <Portal target={formFieldsContext.target}>{@render children()}</Portal>
-{/if}