@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

package/dist/dialog/DialogPanel.svelte

@@ -1,53 +1,30 @@
-<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"
-
-  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";
+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 />

package/dist/field/Field.svelte

@@ -1,52 +1,30 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  let DEFAULT_FIELD_TAG = "div" as const
-
-  type FieldRenderPropArg = {}
-  type FieldPropsWeControl = never
-
-  export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<
-    TTag,
-    FieldRenderPropArg,
-    FieldPropsWeControl,
-    {
-      disabled?: boolean
-    }
-  >
+<script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">
-  import { provideDisabled } from "../hooks/use-disabled.js"
-  import { createIdContext } from "../utils/id.js"
-  import { nanoid } from "nanoid"
-  import { useLabels } from "../label/context.svelte.js"
-  import { useDescriptions } from "../description/context.svelte.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import FormFieldsProvider from "../internal/FormFieldsProvider.svelte"
-
-  let {
-    ref = $bindable(),
-    disabled: ownDisabled = false,
-    children,
-    ...theirProps
-  }: { as?: TTag } & FieldProps<TTag> = $props()
-
-  const inputId = `headlessui-control-${nanoid(8)}`
-  createIdContext(inputId)
-
-  useLabels()
-  useDescriptions()
-
-  const disabledContext = provideDisabled(() => ownDisabled)
-  const { current: disabled } = $derived(disabledContext)
-
-  const slot = $derived({ disabled })
-
-  const ourProps = $derived({
-    disabled: disabled || undefined,
-    "aria-disabled": disabled || undefined,
-  })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { provideDisabled } from "../hooks/use-disabled.js";
+import { createIdContext } from "../utils/id.js";
+import { nanoid } from "nanoid";
+import { useLabels } from "../label/context.svelte.js";
+import { useDescriptions } from "../description/context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import FormFieldsProvider from "../internal/FormFieldsProvider.svelte";
+let {
+  ref = $bindable(),
+  disabled: ownDisabled = false,
+  children,
+  ...theirProps
+} = $props();
+const inputId = `headlessui-control-${nanoid(8)}`;
+createIdContext(inputId);
+useLabels();
+useDescriptions();
+const disabledContext = provideDisabled(() => ownDisabled);
+const { current: disabled } = $derived(disabledContext);
+const slot = $derived({ disabled });
+const ourProps = $derived({
+  disabled: disabled || void 0,
+  "aria-disabled": disabled || void 0
+});
 </script>
 
 {#snippet wrapper(args: Parameters<Exclude<typeof children, undefined>>[0])}

package/dist/fieldset/Fieldset.svelte

@@ -1,55 +1,34 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  let DEFAULT_FIELDSET_TAG = "fieldset" as const
-
-  type FieldsetRenderPropArg = {}
-  type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role"
-
-  export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<
-    TTag,
-    FieldsetRenderPropArg,
-    FieldsetPropsWeControl,
-    {
-      disabled?: boolean
-    }
-  >
+<script lang="ts" module>let DEFAULT_FIELDSET_TAG = "fieldset";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">
-  import { setContext } from "svelte"
-  import { useDisabled } from "../hooks/use-disabled.js"
-  import { useLabels } from "../label/context.svelte.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  let {
-    ref = $bindable(),
-    disabled: ownDisabled = false,
-    ...theirProps
-  }: { as?: TTag } & FieldsetProps<TTag> = $props()
-
-  const providedDisabled = useDisabled()
-  const disabled = $derived(providedDisabled.current || ownDisabled)
-
-  setContext("DisabledContext", {
-    get value() {
-      return disabled
-    },
-  })
-
-  const labelledBy = useLabels()
-  const slot = $derived({ disabled })
-  const ourProps = $derived(
-    (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset"
-      ? {
-          "aria-labelledby": labelledBy.value,
-          disabled: disabled || undefined,
-        }
-      : {
-          role: "group",
-          "aria-labelledby": labelledBy.value,
-          "aria-disabled": disabled || undefined,
-        }
-  )
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">import { setContext } from "svelte";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { useLabels } from "../label/context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let {
+  ref = $bindable(),
+  disabled: ownDisabled = false,
+  ...theirProps
+} = $props();
+const providedDisabled = useDisabled();
+const disabled = $derived(providedDisabled.current || ownDisabled);
+setContext("DisabledContext", {
+  get value() {
+    return disabled;
+  }
+});
+const labelledBy = useLabels();
+const slot = $derived({ disabled });
+const ourProps = $derived(
+  (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset" ? {
+    "aria-labelledby": labelledBy.value,
+    disabled: disabled || void 0
+  } : {
+    role: "group",
+    "aria-labelledby": labelledBy.value,
+    "aria-disabled": disabled || void 0
+  }
+);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:ref />