@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.5

package/dist/tabs/TabPanel.svelte

@@ -1,49 +1,74 @@
-<script lang="ts" module>const DEFAULT_PANEL_TAG = "div";
-const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_PANEL_TAG = "div" as const
+  type PanelRenderPropArg = {
+    selected: boolean
+    focus: boolean
+  }
+  type PanelPropsWeControl = "role" | "aria-labelledby"
+  const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
+    TTag,
+    PanelRenderPropArg,
+    PanelPropsWeControl,
+    PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
-import { mergeProps, RenderFeatures } from "../utils/render.js";
-import { useActions, useData } from "./TabGroup.svelte";
-import { useStableCollectionIndex } from "../utils/StableCollection.svelte";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import Hidden from "../internal/Hidden.svelte";
-import { onMount } from "svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-tabs-panel-${internalId}`,
-  tabIndex = 0,
-  ...theirProps
-} = $props();
-const data = useData("Tab.Panel");
-const { selectedIndex, tabs, panels } = $derived(data);
-const actions = useActions("Tab.Panel");
-const panelRef = $derived({ current: ref });
-onMount(() => actions.registerPanel(panelRef));
-const mySSRIndex = useStableCollectionIndex("panels");
-const myIndex = $derived.by(() => {
-  const index = tabs.findIndex((panel) => panel === panelRef);
-  return index === -1 ? mySSRIndex : index;
-});
-const selected = $derived(myIndex === selectedIndex);
-const { isFocusVisible: focus, focusProps } = $derived(useFocusRing());
-const slot = $derived({
-  selected,
-  focus
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      id,
-      role: "tabpanel",
-      "aria-labelledby": tabs[myIndex]?.current?.id,
-      tabIndex: selected ? 0 : -1
-    },
-    focusProps
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+  import { useId } from "../hooks/use-id.js"
+  import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import { useActions, useData } from "./TabGroup.svelte"
+  import { useStableCollectionIndex } from "../utils/StableCollection.svelte"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import Hidden from "../internal/Hidden.svelte"
+  import type { MutableRefObject } from "../utils/ref.svelte.js"
+  import { onMount } from "svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  let {
+    ref = $bindable(),
+    id = `headlessui-tabs-panel-${internalId}`,
+    tabIndex = 0,
+    ...theirProps
+  }: { as?: TTag } & TabPanelProps<TTag> = $props()
+  const data = useData("Tab.Panel")
+  const { selectedIndex, tabs, panels } = $derived(data)
+  const actions = useActions("Tab.Panel")
+
+  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
+
+  onMount(() => actions.registerPanel(panelRef))
+
+  const mySSRIndex = useStableCollectionIndex("panels")
+
+  const myIndex = $derived.by(() => {
+    const index = tabs.findIndex((panel) => panel === panelRef)
+    return index === -1 ? mySSRIndex : index
+  })
+
+  const selected = $derived(myIndex === selectedIndex)
+
+  const { isFocusVisible: focus, focusProps } = $derived(useFocusRing())
+  const slot = $derived({
+    selected,
+    focus,
+  } satisfies PanelRenderPropArg)
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "tabpanel",
+        "aria-labelledby": tabs[myIndex]?.current?.id,
+        tabIndex: selected ? 0 : -1,
+      },
+      focusProps
+    )
   )
-);
 </script>
 
 {#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}

package/dist/tabs/TabPanels.svelte

@@ -1,12 +1,23 @@
-<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useData } from "./TabGroup.svelte";
-let DEFAULT_PANELS_TAG = "div";
+<script lang="ts" module>
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import type { ElementType, Props } from "../utils/types.js"
+  import { useData } from "./TabGroup.svelte"
+
+  let DEFAULT_PANELS_TAG = "div" as const
+  type PanelsRenderPropArg = {
+    selectedIndex: number
+  }
+
+  export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">const data = useData("Tab.Panels");
-const { selectedIndex } = $derived(data);
-const slot = $derived({ selectedIndex });
-let { ref = $bindable(), ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">
+  const data = useData("Tab.Panels")
+  const { selectedIndex } = $derived(data)
+
+  const slot = $derived({ selectedIndex } satisfies PanelsRenderPropArg)
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabPanelsProps<TTag> = $props()
 </script>
 
 <ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:ref />

package/dist/textarea/Textarea.svelte

@@ -1,59 +1,89 @@
-<script lang="ts" module>const DEFAULT_TEXTAREA_TAG = "textarea";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG">import { htmlid } from "../utils/id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useProvidedId } from "../internal/id.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = htmlid();
-const providedId = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  value = $bindable(),
-  id = providedId?.value || `headlessui-input-${internalId}`,
-  disabled: theirDisabled = false,
-  autofocus = false,
-  invalid = false,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const ourProps = $derived(
-  mergeProps(
+  const DEFAULT_TEXTAREA_TAG = "textarea" as const
+
+  type TextareaRenderPropArg = {
+    disabled: boolean
+    hover: boolean
+    focus: boolean
+    autofocus: boolean
+    invalid: boolean
+  }
+  type TextareaPropsWeControl = "aria-labelledby" | "aria-describedby"
+
+  export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = Props<
+    TTag,
+    TextareaRenderPropArg,
+    TextareaPropsWeControl,
     {
-      id,
-      "aria-labelledby": labelledBy?.value,
-      "aria-describedby": describedBy?.value,
-      "aria-invalid": invalid ? "" : void 0,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps
+      disabled?: boolean
+      invalid?: boolean
+      autoFocus?: boolean
+    }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG">
+  import { htmlid } from "../utils/id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useProvidedId } from "../internal/id.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = htmlid()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    value = $bindable<PropsOf<TTag>["value"]>(),
+    id = (providedId?.value || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    disabled: theirDisabled = false,
+    autofocus = false as PropsOf<TTag>["autofocus"],
+    invalid = false,
+    ...theirProps
+  }: { as?: TTag } & TextareaProps<TTag> = $props()
+  const disabled = $derived(providedDisabled?.value ?? theirDisabled)
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
   )
-);
-const slot = $derived({ disabled, invalid, hover, focus, autofocus });
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        "aria-labelledby": labelledBy?.value,
+        "aria-describedby": describedBy?.value,
+        "aria-invalid": invalid ? "" : undefined,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies TextareaRenderPropArg)
 </script>
 
 <ElementOrComponent