@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.24

package/dist/focus-trap/FocusTrap.svelte.d.ts

@@ -14,11 +14,14 @@ export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "features" | "containers" | "initialFocus" | "initialFocusFallback"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[FocusTrapRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "features" | "containers" | "initialFocus" | "initialFocusFallback"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: FocusTrapRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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: FocusTrapRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: FocusTrapRenderPropArg) => string) | null | undefined;
     } : {}) & {
         initialFocus?: HTMLElement;
         initialFocusFallback?: HTMLElement;

package/dist/hooks/use-disabled.d.ts

@@ -1,3 +1,6 @@
 export declare const useDisabled: () => {
-    readonly value: boolean;
+    readonly current: boolean;
+};
+export declare const provideDisabled: (disabled: () => boolean) => {
+    readonly current: boolean;
 };

package/dist/hooks/use-disabled.js

@@ -1,9 +1,14 @@
-import { getContext } from "svelte";
+import { getContext, setContext } from "svelte";
 export const useDisabled = () => {
-    const context = getContext("DisabledContext");
-    return {
-        get value() {
-            return context?.value ?? false;
+    return getContext("DisabledContext") ?? { current: false };
+};
+export const provideDisabled = (disabled) => {
+    const parentDisabled = useDisabled();
+    const context = {
+        get current() {
+            return disabled() || parentDisabled.current;
         },
     };
+    setContext("DisabledContext", context);
+    return context;
 };

package/dist/input/Input.svelte

@@ -1,59 +1,90 @@
-<script lang="ts" module>const DEFAULT_INPUT_TAG = "input";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">import { htmlid } from "../utils/id.js";
-import { useDisabled } from "../hooks/use-disabled.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";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = htmlid();
-const providedId = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  value = $bindable(),
-  id = providedId || `headlessui-input-${internalId}`,
-  disabled: theirDisabled = false,
-  autofocus = false,
-  invalid = false,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const ourProps = $derived(
-  mergeProps(
+  const DEFAULT_INPUT_TAG = "input" as const
+
+  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,
     {
-      id,
-      "aria-labelledby": labelledBy?.value,
-      "aria-describedby": describedBy?.value,
-      "aria-invalid": invalid ? "" : void 0,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps
+      value?: TValue
+      disabled?: boolean
+      invalid?: boolean
+      autofocus?: boolean
+    }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">
+  import { htmlid } from "../utils/id.js"
+  import { useDisabled } from "../hooks/use-disabled.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"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = htmlid()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    value = $bindable(),
+    id = (providedId || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    disabled: theirDisabled = false,
+    autofocus = false,
+    invalid = false,
+    ...theirProps
+  }: { as?: TTag; value?: TValue } & InputProps<TTag, TValue> = $props()
+  const disabled = $derived(providedDisabled.current || theirDisabled)
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
   )
-);
-const slot = $derived({ disabled, invalid, hover, focus, autofocus });
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        "aria-labelledby": labelledBy?.value,
+        "aria-describedby": describedBy?.value,
+        "aria-invalid": invalid ? "" : undefined,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  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 />

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

@@ -18,11 +18,14 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_INPUT_
     props(): {
         as?: TTag | undefined;
         value?: TValue | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | "value" | InputPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[InputRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "class") | "invalid" | "disabled" | "autofocus" | "value" | InputPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: InputRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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: InputRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: InputRenderPropArg) => string) | null | undefined;
     } : {}) & {
         value?: TValue | undefined;
         disabled?: boolean;

package/dist/internal/FloatingProvider.svelte

@@ -1,12 +1,17 @@
-<script lang="ts" module></script>
-
-<script lang="ts">import { useFloatingProvider } from "./floating-provider.svelte.js";
-const { children, enabled = true } = $props();
-useFloatingProvider({
-  get enabled() {
-    return enabled;
-  }
-});
+<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/FocusSentinel.svelte

@@ -1,11 +1,19 @@
-<script lang="ts">import { onMount } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-let { onfocus } = $props();
-let enabled = $state(true);
-let mounted = $state(false);
-onMount(() => {
-  mounted = true;
-});
+<script lang="ts">
+  import { onMount } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+
+  interface FocusSentinelProps {
+    onfocus: () => boolean
+  }
+
+  let { onfocus }: FocusSentinelProps = $props()
+
+  let enabled = $state(true)
+  let mounted = $state(false)
+
+  onMount(() => {
+    mounted = true
+  })
 </script>
 
 {#if enabled}

package/dist/internal/ForcePortalRoot.svelte

@@ -1,6 +1,10 @@
-<script lang="ts">import { createPortalRoot } from "./portal-force-root.svelte.js";
-let { force, children } = $props();
-createPortalRoot({ force });
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { createPortalRoot } from "./portal-force-root.svelte.js"
+
+  let { force, children }: { force: boolean; children: Snippet } = $props()
+
+  createPortalRoot({ force })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FormFields.svelte

@@ -1,38 +1,51 @@
-<script lang="ts">import { disposables } from "../utils/disposables.js";
-import { objectToFormEntries } from "../utils/form.js";
-import FormResolver from "./FormResolver.svelte";
-import { hoistFormFields } from "./form-fields.svelte.js";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { compact } from "../utils/object.js";
-let {
-  data,
-  form: formId,
-  disabled,
-  onReset,
-  overrides
-} = $props();
-let form = $state(null);
-const d = disposables();
-$effect(() => {
-  if (!onReset) return;
-  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
-    })
+<script lang="ts">
+  import { disposables } from "../utils/disposables.js"
+  import { objectToFormEntries } from "../utils/form.js"
+  import FormResolver from "./FormResolver.svelte"
+  import { hoistFormFields } from "./form-fields.svelte.js"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { compact } from "../utils/object.js"
+
+  let {
+    data,
+    form: formId,
+    disabled,
+    onReset,
+    overrides,
+  }: {
+    data: Record<string, any>
+    overrides?: Record<string, any>
+    form?: string
+    disabled?: boolean
+    onReset?: (e: Event) => void
+  } = $props()
+
+  let form = $state<HTMLFormElement | null>(null)
+  const d = disposables()
+
+  $effect(() => {
+    if (!onReset) return
+    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);
+
+  const hoisted = hoistFormFields(formFields)
 </script>
 
 {#snippet formFields()}

package/dist/internal/FormFieldsProvider.svelte

@@ -1,8 +1,12 @@
-<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 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}

package/dist/internal/FormResolver.svelte

@@ -1,18 +1,23 @@
-<script lang="ts">import { onMount } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-let { setForm, formId } = $props();
-$effect(() => {
-  if (formId) {
-    const resolvedForm = document.getElementById(formId);
-    if (resolvedForm) setForm(resolvedForm);
-  }
-});
-let element = $state();
-onMount(() => {
-  if (!element) return;
-  const resolvedForm = element.closest("form");
-  if (resolvedForm) setForm(resolvedForm);
-});
+<script lang="ts">
+  import { onMount } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+
+  let { setForm, formId }: { setForm: (form: HTMLFormElement) => void; formId?: string } = $props()
+
+  $effect(() => {
+    if (formId) {
+      const resolvedForm = document.getElementById(formId) as HTMLFormElement
+      if (resolvedForm) setForm(resolvedForm)
+    }
+  })
+
+  let element = $state<HTMLElement>()
+
+  onMount(() => {
+    if (!element) return
+    const resolvedForm = element.closest("form")
+    if (resolvedForm) setForm(resolvedForm)
+  })
 </script>
 
 {#if !formId}

package/dist/internal/Hidden.svelte

@@ -1,34 +1,55 @@
-<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { HiddenFeatures } from "./HiddenFeatures.js";
-export * from "./HiddenFeatures.js";
-const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
+<script lang="ts" module>
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import type { ElementType, Props } from "../utils/types.js"
+  import { HiddenFeatures } from "./HiddenFeatures.js"
+
+  export * from "./HiddenFeatures.js"
+
+  const DEFAULT_VISUALLY_HIDDEN_TAG = "span" as const
+
+  type HiddenRenderPropArg = {}
+  type HiddenPropsWeControl = never
+  export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<
+    TTag,
+    HiddenRenderPropArg,
+    HiddenPropsWeControl,
+    { features?: HiddenFeatures }
+  >
 </script>
 
-<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,
-  style: [
-    "position: fixed",
-    "top: 1px",
-    "left: 1px",
-    "width: 1px",
-    "height: 0",
-    "padding: 0",
-    "margin: -1px",
-    "overflow: hidden",
-    "clip: rect(0, 0, 0, 0)",
-    "whiteSpace: nowrap",
-    "borderWidth: 0",
-    ...(features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden && !((features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable) ? ["display: none"] : []
-  ].join("; ")
-};
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">
+  let {
+    ref = $bindable(),
+    value,
+    checked,
+    features = HiddenFeatures.None,
+    ...theirProps
+  }: { as?: TTag } & HiddenProps<TTag> = $props()
+
+  let ourProps = {
+    "aria-hidden":
+      (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable
+        ? true
+        : (theirProps["aria-hidden" as keyof typeof theirProps] ?? undefined),
+    hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : undefined,
+    style: [
+      "position: fixed",
+      "top: 1px",
+      "left: 1px",
+      "width: 1px",
+      "height: 0",
+      "padding: 0",
+      "margin: -1px",
+      "overflow: hidden",
+      "clip: rect(0, 0, 0, 0)",
+      "whiteSpace: nowrap",
+      "borderWidth: 0",
+      ...((features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden &&
+      !((features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable)
+        ? ["display: none"]
+        : []),
+    ].join("; "),
+  }
 </script>
 
 <ElementOrComponent

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

@@ -10,11 +10,14 @@ export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDE
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[HiddenRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: HiddenRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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: HiddenRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: HiddenRenderPropArg) => string) | null | undefined;
     } : {}) & {
         features?: HiddenFeatures;
     };