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

package/dist/button/Button.svelte

@@ -1,61 +1,91 @@
-<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
-</script>
+<script lang="ts" module>
+  import type { Props, ElementType } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  disabled: ownDisabled = false,
-  autofocus = false,
-  type = "button",
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
+  const DEFAULT_BUTTON_TAG = "button" as const
+
+  type ButtonRenderPropArg = {
+    disabled: boolean
+    hover: boolean
+    focus: boolean
+    active: boolean
+    autofocus: boolean
+  }
+  type ButtonPropsWeControl = never
+
+  export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
+    TTag,
+    ButtonRenderPropArg,
+    ButtonPropsWeControl,
+    {
+      disabled?: boolean
+      autofocus?: boolean
+      type?: "button" | "submit" | "reset"
     }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    disabled: ownDisabled = false,
+    autofocus = false,
+    type = "button",
+    ...theirProps
+  }: { as?: TTag } & ButtonProps<TTag> = $props()
+
+  const disabled = $derived(providedDisabled.value || ownDisabled)
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const slot = $derived({
+    disabled,
+    hover,
+    focus,
+    active,
+    autofocus,
   })
-);
-const slot = $derived({
-  disabled,
-  hover,
-  focus,
-  active,
-  autofocus
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      type,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps,
-    pressProps
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        type,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />

package/dist/checkbox/Checkbox.svelte

@@ -1,129 +1,183 @@
-<script lang="ts" module>let DEFAULT_CHECKBOX_TAG = "span";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  let DEFAULT_CHECKBOX_TAG = "span" as const
+  type CheckboxRenderPropArg = {
+    checked: boolean
+    changing: boolean
+    focus: boolean
+    active: boolean
+    hover: boolean
+    autofocus: boolean
+    disabled: boolean
+    indeterminate: boolean
+  }
+  type CheckboxPropsWeControl =
+    | "aria-checked"
+    | "aria-describedby"
+    | "aria-disabled"
+    | "aria-labelledby"
+    | "role"
+    | "tabIndex"
+
+  export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<
+    TTag,
+    CheckboxRenderPropArg,
+    CheckboxPropsWeControl,
+    {
+      id?: string
+      value?: TType
+      disabled?: boolean
+      indeterminate?: boolean
+
+      checked?: boolean
+      defaultChecked?: boolean
+      autofocus?: boolean
+      form?: string
+      name?: string
+      onchange?: (checked: boolean) => void
+    }
+  >
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">import { tick } from "svelte";
-import { attemptSubmit } from "../utils/form.js";
-import { getIdContext, htmlid } from "../utils/id.js";
-import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import FormFields from "../internal/FormFields.svelte";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useControllable } from "../hooks/use-controllable.svelte.js";
-const internalId = htmlid();
-const providedId = getIdContext();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  id = providedId || `headlessui-checkbox-${internalId}`,
-  disabled: ownDisabled = false,
-  autofocus = false,
-  checked: controlledChecked = $bindable(),
-  defaultChecked: _defaultChecked,
-  onchange: controlledOnChange,
-  name,
-  value,
-  form,
-  indeterminate = false,
-  ...theirProps
-} = $props();
-const defaultChecked = _defaultChecked;
-const controllable = useControllable(
-  {
-    get controlledValue() {
-      return controlledChecked;
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">
+  import { tick } from "svelte"
+  import { attemptSubmit } from "../utils/form.js"
+  import { getIdContext, htmlid } from "../utils/id.js"
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import FormFields from "../internal/FormFields.svelte"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useControllable } from "../hooks/use-controllable.svelte.js"
+
+  const internalId = htmlid()
+  const providedId = getIdContext()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    id = providedId || `headlessui-checkbox-${internalId}`,
+    disabled: theirDisabled = false,
+    autofocus = false,
+    checked: controlledChecked = $bindable(),
+    defaultChecked: _defaultChecked,
+    onchange: controlledOnChange,
+    name,
+    value,
+    form,
+    indeterminate = false,
+    ...theirProps
+  }: { as?: TTag } & CheckboxProps<TTag, TType> = $props()
+
+  const defaultChecked = _defaultChecked
+  const controllable = useControllable(
+    {
+      get controlledValue() {
+        return controlledChecked
+      },
+      set controlledValue(checked) {
+        controlledChecked = checked
+      },
     },
-    set controlledValue(checked2) {
-      controlledChecked = checked2;
-    }
-  },
-  controlledOnChange,
-  defaultChecked ?? false
-);
-const { value: checked, onchange } = $derived(controllable);
-const disabled = $derived(providedDisabled.value || ownDisabled);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
+    controlledOnChange,
+    defaultChecked ?? false
+  )
+  const { value: checked, onchange } = $derived(controllable)
+
+  const disabled = $derived(providedDisabled?.value ?? theirDisabled)
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  let changing = $state(false)
+
+  const toggle = () => {
+    changing = true
+    onchange?.(!checked)
+    tick().then(() => {
+      changing = false
+    })
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    if (disabled) return event.preventDefault()
+    event.preventDefault()
+    toggle()
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === " ") {
+      event.preventDefault()
+      toggle()
+    } else if (event.key === "Enter") {
+      if (event.currentTarget) attemptSubmit(event.currentTarget as HTMLElement)
     }
-  })
-);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-let changing = $state(false);
-const toggle = () => {
-  changing = true;
-  onchange?.(!checked);
-  tick().then(() => {
-    changing = false;
-  });
-};
-const handleClick = (event) => {
-  if (disabled) return event.preventDefault();
-  event.preventDefault();
-  toggle();
-};
-const handleKeyUp = (event) => {
-  if (event.key === " ") {
-    event.preventDefault();
-    toggle();
-  } else if (event.key === "Enter") {
-    if (event.currentTarget) attemptSubmit(event.currentTarget);
   }
-};
-const handleKeyPress = (event) => event.preventDefault();
-const slot = $derived({
-  checked,
-  changing,
-  focus,
-  active,
-  hover,
-  autofocus: autofocus ?? false,
-  disabled,
-  indeterminate
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      id,
-      role: "checkbox",
-      "aria-checked": indeterminate ? "mixed" : checked ? true : false,
-      "aria-labelledby": labelledBy.value,
-      "aria-describedby": describedBy.value,
-      "aria-disabled": disabled ? true : void 0,
-      tabindex: disabled ? void 0 : 0,
-      onkeyup: disabled ? void 0 : handleKeyUp,
-      onkeypress: disabled ? void 0 : handleKeyPress,
-      onclick: disabled ? void 0 : handleClick
-    },
-    focusProps,
-    hoverProps,
-    pressProps
+
+  const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
+
+  const slot = $derived({
+    checked,
+    changing,
+    focus,
+    active,
+    hover,
+    autofocus: autofocus ?? false,
+    disabled,
+    indeterminate,
+  })
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "checkbox",
+        "aria-checked": indeterminate ? ("mixed" as "mixed") : checked ? true : false,
+        "aria-labelledby": labelledBy.value,
+        "aria-describedby": describedBy.value,
+        "aria-disabled": disabled ? true : undefined,
+        tabindex: disabled ? undefined : 0,
+        onkeyup: disabled ? undefined : handleKeyUp,
+        onkeypress: disabled ? undefined : handleKeyPress,
+        onclick: disabled ? undefined : handleClick,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
-const reset = $derived(() => {
-  if (defaultChecked === void 0) return;
-  return onchange?.(defaultChecked);
-});
+
+  const reset = $derived(() => {
+    if (defaultChecked === undefined) return
+    return onchange?.(defaultChecked)
+  })
 </script>
 
 {#if name}

package/dist/close-button/CloseButton.svelte

@@ -1,11 +1,17 @@
-<script lang="ts" module>import Button, {} from "../button/Button.svelte";
-import { useClose } from "../internal/close-provider.js";
-let DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>
+  import Button, { type ButtonProps } from "../button/Button.svelte"
+  import { useClose } from "../internal/close-provider.js"
+  import type { ElementType } from "../utils/types.js"
+
+  let DEFAULT_BUTTON_TAG = "button" as const
+
+  export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const closeContext = useClose();
-const close = $derived(closeContext?.close);
-let { ...props } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+  const closeContext = useClose()
+  const close = $derived(closeContext?.close)
+  let { ...props }: { as?: TTag } & CloseButtonProps<TTag> = $props()
 </script>
 
 <Button onclick={close} {...props} />

package/dist/combobox/Combobox.svelte

@@ -1,6 +1,53 @@
-<script lang="ts" module>const DEFAULT_COMBOBOX_TAG = "svelte:fragment";
+<script lang="ts" module>
+  import type { ElementType, EnsureArray, Props } from "../utils/types.js"
+  import type { ByComparator } from "../hooks/use-by-comparator.js"
+
+  const DEFAULT_COMBOBOX_TAG = "svelte:fragment" as const
+  type ComboboxRenderPropArg<TValue, TActive = TValue> = {
+    open: boolean
+    disabled: boolean
+    activeIndex: number | null
+    activeOption: TActive | null
+    value: TValue
+  }
+
+  export type CheckboxProps<
+    TValue,
+    TMultiple extends boolean | undefined,
+    TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG,
+  > = Props<
+    TTag,
+    ComboboxRenderPropArg<NoInfer<TValue>>,
+    "value" | "defaultValue" | "multiple" | "onChange" | "by",
+    {
+      value?: TMultiple extends true ? EnsureArray<TValue> : TValue
+      defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>
+
+      onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void
+      by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>
+
+      /** @deprecated The `<Combobox />` is now nullable default */
+      nullable?: boolean
+
+      multiple?: TMultiple
+      disabled?: boolean
+      form?: string
+      name?: string
+      immediate?: boolean
+      virtual?: {
+        options: NoInfer<TValue>[]
+        disabled?: (value: NoInfer<TValue>) => boolean
+      } | null
+
+      onclose?(): void
+
+      __demoMode?: boolean
+    }
+  >
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG">import { useDisabled } from "../hooks/use-disabled.js";
-const providedDisabled = useDisabled();
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG">
+  import { useDisabled } from "../hooks/use-disabled.js"
+
+  const providedDisabled = useDisabled()
 </script>

package/dist/data-interactive/DataInteractive.svelte

@@ -1,34 +1,62 @@
-<script lang="ts" module>import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const DEFAULT_DATA_INTERACTIVE_TAG = "svelte:fragment";
+<script lang="ts" module>
+  import type { Props, ElementType } from "../utils/types.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import type { Snippet } from "svelte"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const DEFAULT_DATA_INTERACTIVE_TAG = "svelte:fragment" as const
+
+  type DataInteractiveRenderPropArg = {
+    hover: boolean
+    focus: boolean
+    active: boolean
+  }
+  type DataInteractivePropsWeControl = never
+
+  export type DataInteractiveProps<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = Props<
+    TTag,
+    DataInteractiveRenderPropArg,
+    DataInteractivePropsWeControl,
+    {}
+  >
+
+  export type DataInteractiveChildren = Snippet<[DataInteractiveRenderPropArg]>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG">let { ref = $bindable(), ...theirProps } = $props();
-const disabled = false;
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(useFocusRing());
-const slot = $derived({
-  hover,
-  focus,
-  active
-});
-const ourProps = $derived(mergeProps(focusProps, hoverProps, pressProps));
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG">
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & DataInteractiveProps<TTag> = $props()
+
+  // Ideally we can use a `disabled` prop, but that would depend on the props of the child element
+  // and we don't have access to that in this component.
+
+  const disabled = false
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { isFocusVisible: focus, focusProps } = $derived(useFocusRing())
+
+  const slot = $derived({
+    hover,
+    focus,
+    active,
+  } satisfies DataInteractiveRenderPropArg)
+
+  const ourProps = $derived(mergeProps(focusProps, hoverProps, pressProps))
 </script>
 
 <ElementOrComponent