@pzerelles/headlessui-svelte 2.1.2-next.7 → 2.1.2-next.9

package/dist/button/Button.svelte

@@ -1,91 +1,61 @@
-<script lang="ts" module>
-  import type { Props, ElementType } from "../utils/types.js"
-
-  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 lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
 </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,
+<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 ourProps = $derived(
-    mergeProps(
-      {
-        type,
-        disabled: disabled || undefined,
-        autofocus,
-      },
-      focusProps,
-      hoverProps,
-      pressProps
-    )
+);
+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 ourProps = $derived(
+  mergeProps(
+    {
+      type,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
   )
+);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />

package/dist/checkbox/Checkbox.svelte

@@ -1,183 +1,129 @@
-<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 lang="ts" module>let DEFAULT_CHECKBOX_TAG = "span";
 </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: 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
-      },
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">import { tick } from "svelte";
+import { attemptSubmit } from "../utils/form.js";
+import { useProvidedId, 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 = useProvidedId();
+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
+} = $props();
+const defaultChecked = _defaultChecked;
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledChecked;
     },
-    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)
+    set controlledValue(checked2) {
+      controlledChecked = checked2;
+    }
+  },
+  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 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 === undefined) return
-    return onchange?.(defaultChecked)
+);
+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) => {
+  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 reset = $derived(() => {
+  if (defaultChecked === void 0) return;
+  return onchange?.(defaultChecked);
+});
 </script>
 
 {#if name}

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
 declare let DEFAULT_CHECKBOX_TAG: "span";
 type CheckboxRenderPropArg = {
     checked: boolean;
@@ -12,7 +12,6 @@ type CheckboxRenderPropArg = {
 };
 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;
@@ -26,13 +25,12 @@ 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 import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "id" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (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) & {
         children?: import("../utils/types.js").Children<CheckboxRenderPropArg> | 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: CheckboxRenderPropArg) => string) | undefined;
+    } & (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: CheckboxRenderPropArg) => string) | undefined;
     } : {}) & {
-        id?: string;
         value?: TType | undefined;
         disabled?: boolean;
         indeterminate?: boolean;

package/dist/close-button/CloseButton.svelte

@@ -1,17 +1,11 @@
-<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 lang="ts" module>import Button, {} from "../button/Button.svelte";
+import { useClose } from "../internal/close-provider.js";
+let DEFAULT_BUTTON_TAG = "button";
 </script>
 
-<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 lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const closeContext = useClose();
+const close = $derived(closeContext?.close);
+let { ...props } = $props();
 </script>
 
 <Button onclick={close} {...props} />

package/dist/combobox/Combobox.svelte

@@ -1,53 +1,6 @@
-<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 lang="ts" module>const DEFAULT_COMBOBOX_TAG = "svelte:fragment";
 </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,62 +1,34 @@
-<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 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>
 
-<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 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>
 
 <ElementOrComponent