@pzerelles/headlessui-svelte 2.1.2-next.6 → 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,89 +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> = Props<
-    TTag,
-    TextareaRenderPropArg,
-    TextareaPropsWeControl,
-    {
-      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">
-  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 { 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

package/dist/textarea/Textarea.svelte.d.ts

@@ -8,20 +8,23 @@ type TextareaRenderPropArg = {
     invalid: boolean;
 };
 type TextareaPropsWeControl = "aria-labelledby" | "aria-describedby";
-export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = Props<TTag, TextareaRenderPropArg, TextareaPropsWeControl, {
+export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> = Props<TTag, TextareaRenderPropArg, TextareaPropsWeControl, {
+    value?: TValue;
     disabled?: boolean;
     invalid?: boolean;
     autofocus?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> {
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | TextareaPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        value?: TValue | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | "value" | TextareaPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("../utils/types.js").Children<TextareaRenderPropArg> | undefined;
         ref?: HTMLElement;
     } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
         class?: PropsOf<TTag>["class"] | ((bag: TextareaRenderPropArg) => string) | undefined;
     } : {}) & {
+        value?: TValue | undefined;
         disabled?: boolean;
         invalid?: boolean;
         autofocus?: boolean;
@@ -34,14 +37,14 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TEXTAR
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TEXTAREA_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_TEXTAREA_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TValue>['props']>, ReturnType<__sveltets_Render<TTag, TValue>['events']>, ReturnType<__sveltets_Render<TTag, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TTag, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TValue>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag, TValue>['events']>;
+    }): ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const Textarea: $$IsomorphicComponent;
-type Textarea<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = InstanceType<typeof Textarea<TTag>>;
+type Textarea<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> = InstanceType<typeof Textarea<TTag, TValue>>;
 export default Textarea;