@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.32

package/dist/data-interactive/DataInteractive.svelte

@@ -1,34 +1,60 @@
-<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,
+    {}
+  >
 </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

package/dist/data-interactive/DataInteractive.svelte.d.ts

@@ -12,9 +12,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DATA_I
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[{
-            slot: DataInteractiveRenderPropArg;
-            props: Record<string, any>;
+        children?: Snippet<[DataInteractiveRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: DataInteractiveRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/description/Description.svelte

@@ -1,26 +1,36 @@
-<script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
+<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>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { useId } from "../hooks/use-id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useDescriptionContext } from "./context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { untrack } from "svelte";
-const internalId = useId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  id = `headlessui-description-${internalId}`,
-  ...theirProps
-} = $props();
-const { register } = useDescriptionContext();
-$effect(() => {
-  id;
-  return untrack(() => register(id));
-});
-const disabled = $derived(providedDisabled.current || false);
-const slot = $derived({ disabled });
-const ourProps = $derived({ id });
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">
+  import { useId } from "../hooks/use-id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useDescriptionContext } from "./context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { untrack } from "svelte"
+
+  const internalId = useId()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    id = `headlessui-description-${internalId}` as PropsOf<TTag>["id"],
+    ...theirProps
+  }: { as?: TTag } & DescriptionProps<TTag> = $props()
+
+  const { register } = useDescriptionContext()
+  $effect(() => {
+    id
+    return untrack(() => register(id))
+  })
+
+  const disabled = $derived(providedDisabled.current || false)
+  const slot = $derived({ disabled })
+  const ourProps = $derived({ id })
 </script>
 
 <ElementOrComponent

package/dist/description/Description.svelte.d.ts

@@ -6,8 +6,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DESCRI
         as?: TTag | undefined;
     } & (Exclude<keyof PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("svelte").Snippet<[{
-            slot: {};
-            props: Record<string, any>;
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: {}) => string) | null | undefined;
         ref?: HTMLElement;