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

package/dist/tabs/TabPanel.svelte

@@ -1,74 +1,49 @@
-<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 lang="ts" module>const DEFAULT_PANEL_TAG = "div";
+const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<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 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>
 
 {#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}

package/dist/tabs/TabPanels.svelte

@@ -1,23 +1,12 @@
-<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 lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useData } from "./TabGroup.svelte";
+let DEFAULT_PANELS_TAG = "div";
 </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 } satisfies PanelsRenderPropArg)
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabPanelsProps<TTag> = $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 });
+let { ref = $bindable(), ...theirProps } = $props();
 </script>
 
 <ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:ref />

package/dist/textarea/Textarea.svelte

@@ -1,90 +1,59 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  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, TValue = string> = Props<
-    TTag,
-    TextareaRenderPropArg,
-    TextareaPropsWeControl,
-    {
-      value?: TValue
-      disabled?: boolean
-      invalid?: boolean
-      autofocus?: boolean
-    }
-  >
+<script lang="ts" module>const DEFAULT_TEXTAREA_TAG = "textarea";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string">
-  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}`) as PropsOf<TTag>["id"],
-    disabled: theirDisabled = false,
-    autofocus = false as PropsOf<TTag>["autofocus"],
-    invalid = false,
-    ...theirProps
-  }: { as?: TTag; value?: TValue } & TextareaProps<TTag, TValue> = $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(
-      {
-        id,
-        "aria-labelledby": labelledBy?.value,
-        "aria-describedby": describedBy?.value,
-        "aria-invalid": invalid ? "" : undefined,
-        disabled: disabled || undefined,
-        autofocus,
-      },
-      focusProps,
-      hoverProps
-    )
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string">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(
+    {
+      id,
+      "aria-labelledby": labelledBy?.value,
+      "aria-describedby": describedBy?.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps
   )
-
-  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies TextareaRenderPropArg)
+);
+const slot = $derived({ disabled, invalid, hover, focus, autofocus });
 </script>
 
 <ElementOrComponent