@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.8

package/dist/description/Description.svelte

@@ -1,37 +1,26 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  let DEFAULT_DESCRIPTION_TAG = "p" as const
-
-  export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>
+<script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">
-  import { htmlid } from "../utils/id.js"
-  import { stateFromSlot } from "../utils/state.js"
-  import { useDisabled } from "../hooks/use-disabled.js"
-  import { onMount } from "svelte"
-  import { useDescriptionContext } from "./context.svelte.js"
-
-  const internalId = htmlid()
-  const providedDisabled = useDisabled()
-
-  let {
-    as,
-    id = `headlessui-description-${internalId}` as PropsOf<TTag>["id"],
-    children,
-    ...theirProps
-  }: { as?: TTag } & DescriptionProps<TTag> = $props()
-
-  const context = useDescriptionContext()
-
-  onMount(() => {
-    context.register(id)
-  })
-
-  const disabled = $derived(providedDisabled.value || false)
-  const slot = $derived({ disabled })
-  const ourProps = $derived({ id, ...stateFromSlot(slot) })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { htmlid } from "../utils/id.js";
+import { stateFromSlot } from "../utils/state.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { onMount } from "svelte";
+import { useDescriptionContext } from "./context.svelte.js";
+const internalId = htmlid();
+const providedDisabled = useDisabled();
+let {
+  as,
+  id = `headlessui-description-${internalId}`,
+  children,
+  ...theirProps
+} = $props();
+const context = useDescriptionContext();
+onMount(() => {
+  context.register(id);
+});
+const disabled = $derived(providedDisabled.value || false);
+const slot = $derived({ disabled });
+const ourProps = $derived({ id, ...stateFromSlot(slot) });
 </script>
 
 <svelte:element this={as ?? DEFAULT_DESCRIPTION_TAG} {...ourProps} {...theirProps}>

package/dist/dialog/Dialog.svelte

@@ -1,74 +1,39 @@
-<script lang="ts" module>
-  import { MainTreeProvider } from "../hooks/use-root-containers.svelte.js"
-  import { useOpenClosed } from "../internal/open-closed.js"
-  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-  import type { ElementType, Props } from "../utils/types.js"
-  import { getContext, type Component, type Snippet } from "svelte"
-  import InternalDialog from "./InternalDialog.svelte"
-  import Transition from "../transition/Transition.svelte"
-
-  export const DEFAULT_DIALOG_TAG = "div" as const
-  export type DialogRenderPropArg = {
-    open: boolean
-  }
-  type DialogPropsWeControl = "aria-describedby" | "aria-labelledby" | "aria-modal"
-
-  export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
-
-  export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<
-    TTag,
-    DialogRenderPropArg,
-    DialogPropsWeControl,
-    PropsForFeatures<typeof DialogRenderFeatures> & {
-      id?: string
-      open?: boolean
-      onclose(value: boolean): void
-      initialFocus?: HTMLElement
-      role?: "dialog" | "alertdialog"
-      autofocus?: boolean
-      transition?: boolean
-      __demoMode?: boolean
-    }
-  >
-
-  export type DialogChildren = Snippet<[DialogRenderPropArg]>
+<script lang="ts" module>import { MainTreeProvider } from "../hooks/use-root-containers.svelte.js";
+import { useOpenClosed } from "../internal/open-closed.js";
+import { RenderFeatures } from "../utils/render.js";
+import { getContext } from "svelte";
+import InternalDialog from "./InternalDialog.svelte";
+import Transition from "../transition/Transition.svelte";
+export const DEFAULT_DIALOG_TAG = "div";
+export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">
-  let { ref = $bindable(), transition = false, open, ...rest }: { as?: TTag } & DialogProps<TTag> = $props()
-
-  // Validations
-  const usesOpenClosedState = useOpenClosed()
-  const hasOpen = $derived(open !== undefined || usesOpenClosedState)
-  const hasOnClose = $derived(rest.hasOwnProperty("onclose"))
-
-  $effect(() => {
-    if (!hasOpen && !hasOnClose) {
-      throw new Error(`You have to provide an \`open\` and an \`onclose\` prop to the \`Dialog\` component.`)
-    }
-
-    if (!hasOpen) {
-      throw new Error(`You provided an \`onclose\` prop to the \`Dialog\`, but forgot an \`open\` prop.`)
-    }
-
-    if (!hasOnClose) {
-      throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but forgot an \`onclose\` prop.`)
-    }
-
-    if (!usesOpenClosedState && typeof open !== "boolean") {
-      throw new Error(
-        `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
-      )
-    }
-
-    if (typeof rest.onclose !== "function") {
-      throw new Error(
-        `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${rest.onclose}`
-      )
-    }
-  })
-
-  const DialogComponent = InternalDialog as Component<DialogProps<TTag>, any>
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">let { ref = $bindable(), transition = false, open, ...rest } = $props();
+const usesOpenClosedState = useOpenClosed();
+const hasOpen = $derived(open !== void 0 || usesOpenClosedState);
+const hasOnClose = $derived(rest.hasOwnProperty("onclose"));
+$effect(() => {
+  if (!hasOpen && !hasOnClose) {
+    throw new Error(`You have to provide an \`open\` and an \`onclose\` prop to the \`Dialog\` component.`);
+  }
+  if (!hasOpen) {
+    throw new Error(`You provided an \`onclose\` prop to the \`Dialog\`, but forgot an \`open\` prop.`);
+  }
+  if (!hasOnClose) {
+    throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but forgot an \`onclose\` prop.`);
+  }
+  if (!usesOpenClosedState && typeof open !== "boolean") {
+    throw new Error(
+      `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
+    );
+  }
+  if (typeof rest.onclose !== "function") {
+    throw new Error(
+      `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${rest.onclose}`
+    );
+  }
+});
+const DialogComponent = InternalDialog;
 </script>
 
 {#if (open !== undefined || transition) && !rest.static}

package/dist/dialog/DialogBackdrop.svelte

@@ -1,34 +1,17 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  let DEFAULT_BACKDROP_TAG = "div" as const
-  type BackdropRenderPropArg = {
-    open: boolean
-  }
-
-  export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
-    TTag,
-    BackdropRenderPropArg,
-    never,
-    { transition?: boolean }
-  >
+<script lang="ts" module>let DEFAULT_BACKDROP_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
-  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"
-
-  let { ref = $bindable(), transition = false, ...theirProps }: { as?: TTag } & DialogBackdropProps<TTag> = $props()
-  const _state = useDialogContext("Dialog.Panel")
-  const { dialogState, unmount } = $derived(_state)
-
-  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies BackdropRenderPropArg)
-
-  const ourProps = mergeProps({
-    "aria-hidden": true,
-  })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">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";
+let { ref = $bindable(), transition = false, ...theirProps } = $props();
+const _state = useDialogContext("Dialog.Panel");
+const { dialogState, unmount } = $derived(_state);
+const slot = $derived({ open: dialogState === DialogStates.Open });
+const ourProps = mergeProps({
+  "aria-hidden": true
+});
 </script>
 
 {#if transition}

package/dist/dialog/DialogPanel.svelte

@@ -1,54 +1,31 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  let DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
-    open: boolean
-  }
-
-  export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
-    PanelRenderPropArg,
-    never,
-    {
-      id?: string
-      transition?: boolean
-    }
-  >
+<script lang="ts" module>let DEFAULT_PANEL_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
-  import { useId } from "../hooks/use-id.js"
-  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(),
-    id = `headlessui-dialog-panel-${internalId}`,
-    transition = false,
-    ...theirProps
-  }: { as?: TTag } & DialogPanelProps<TTag> = $props()
-  const _state = useDialogContext("Dialog.Panel")
-  const { dialogState, unmount } = $derived(_state)
-
-  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies PanelRenderPropArg)
-
-  // Prevent the click events inside the Dialog.Panel from bubbling through the React Tree which
-  // could submit wrapping <form> elements even if we portalled the Dialog.
-  const handleClick = (event: MouseEvent) => {
-    event.stopPropagation()
-  }
-
-  const ourProps = $derived(
-    mergeProps({
-      id,
-      onclick: handleClick,
-    })
-  )
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
+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(),
+  id = `headlessui-dialog-panel-${internalId}`,
+  transition = false,
+  ...theirProps
+} = $props();
+const _state = useDialogContext("Dialog.Panel");
+const { dialogState, unmount } = $derived(_state);
+const slot = $derived({ open: dialogState === DialogStates.Open });
+const handleClick = (event) => {
+  event.stopPropagation();
+};
+const ourProps = $derived(
+  mergeProps({
+    id,
+    onclick: handleClick
+  })
+);
 </script>
 
 {#if transition}

package/dist/dialog/DialogTitle.svelte

@@ -1,44 +1,29 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  let DEFAULT_TITLE_TAG = "h2" as const
-  type TitleRenderPropArg = {
-    open: boolean
-  }
-
-  export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>
-
-  //
+<script lang="ts" module>let DEFAULT_TITLE_TAG = "h2";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TITLE_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { DialogStates, useDialogContext } from "./context.svelte.js"
-  import { onMount } from "svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { mergeProps } from "../utils/render.js"
-
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-dialog-title-${internalId}` as PropsOf<TTag>[string],
-    ...theirProps
-  }: { as?: TTag } & DialogTitleProps<TTag> = $props()
-  const _state = useDialogContext("Dialog.Panel")
-  const { dialogState, setTitleId } = $derived(_state)
-
-  onMount(() => {
-    setTitleId(id)
-    return () => setTitleId(null)
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TITLE_TAG">import { useId } from "../hooks/use-id.js";
+import { DialogStates, useDialogContext } from "./context.svelte.js";
+import { onMount } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { mergeProps } from "../utils/render.js";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-dialog-title-${internalId}`,
+  ...theirProps
+} = $props();
+const _state = useDialogContext("Dialog.Panel");
+const { dialogState, setTitleId } = $derived(_state);
+onMount(() => {
+  setTitleId(id);
+  return () => setTitleId(null);
+});
+const slot = $derived({ open: dialogState === DialogStates.Open });
+const ourProps = $derived(
+  mergeProps({
+    id
   })
-
-  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies TitleRenderPropArg)
-
-  const ourProps = $derived(
-    mergeProps({
-      id,
-    })
-  )
+);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_TITLE_TAG} name="DialogTitle" bind:ref />