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

package/dist/data-interactive/DataInteractive.svelte

@@ -1,41 +1,53 @@
-<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 { PropsAsChild } from "../utils/types.js"
+  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" as const
+
+  type DataInteractiveRenderPropArg = {
+    hover: boolean
+    focus: boolean
+    active: boolean
+  }
+
+  export type DataInteractiveProps = PropsAsChild<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">
+  let { ...theirProps }: DataInteractiveProps = $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
-  {ourProps}
-  {theirProps}
-  {slot}
-  defaultTag={DEFAULT_DATA_INTERACTIVE_TAG}
-  name="DataInteractive"
-  bind:ref
-/>
+<ElementOrComponent {ourProps} {theirProps} {slot} name="DataInteractive" />

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

@@ -1,36 +1,13 @@
-import type { Props, ElementType } from "../utils/types.js";
-import type { Snippet } from "svelte";
-declare const DEFAULT_DATA_INTERACTIVE_TAG: "svelte:fragment";
+import type { PropsAsChild } from "../utils/types.js";
 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, {}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> {
-    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>;
-        }]> | undefined;
-        class?: string | ((bag: DataInteractiveRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DataInteractive: $$IsomorphicComponent;
-type DataInteractive<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = InstanceType<typeof DataInteractive<TTag>>;
+export type DataInteractiveProps = PropsAsChild<DataInteractiveRenderPropArg>;
+declare const DataInteractive: import("svelte").Component<{
+    children?: import("svelte").Snippet<[DataInteractiveRenderPropArg & {
+        props?: Record<string, any>;
+    }]> | undefined;
+}, {}, "">;
 export default DataInteractive;

package/dist/description/Description.svelte

@@ -1,26 +1,39 @@
-<script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_DESCRIPTION_TAG = "p" as const
+
+  export type DescriptionProps = Props<
+    typeof DEFAULT_DESCRIPTION_TAG,
+    {},
+    {
+      id?: string
+      element?: HTMLElement
+    }
+  >
 </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">
+  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 { element = $bindable(), id = `headlessui-description-${internalId}`, ...theirProps }: DescriptionProps = $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
@@ -29,5 +42,5 @@ const ourProps = $derived({ id });
   slots={slot}
   defaultTag={DEFAULT_DESCRIPTION_TAG}
   name="Description"
-  bind:ref
+  bind:element
 />

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

@@ -1,29 +1,8 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-declare let DEFAULT_DESCRIPTION_TAG: "p";
-export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> {
-    props(): {
-        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>;
-        }]> | undefined;
-        class?: string | ((bag: {}) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Description: $$IsomorphicComponent;
-type Description<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = InstanceType<typeof Description<TTag>>;
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_DESCRIPTION_TAG: "p";
+export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, {
+    id?: string;
+    element?: HTMLElement;
+}>;
+declare const Description: import("svelte").Component<DescriptionProps, {}, "element">;
 export default Description;