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

package/dist/tabs/TabList.svelte.d.ts

@@ -1,35 +1,12 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_LIST_TAG: "div";
-type ListRenderPropArg = {
+export type ListRenderPropArg = {
     selectedIndex: number;
 };
-type ListPropsWeControl = "aria-orientation" | "role";
-export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LIST_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | ListPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<ListRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: ListRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LIST_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_LIST_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']>;
-}
-declare const TabList: $$IsomorphicComponent;
-type TabList<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = InstanceType<typeof TabList<TTag>>;
+export type TabListOwnProps = {
+    element?: HTMLElement;
+};
+export type TabListProps = Props<typeof DEFAULT_LIST_TAG, ListRenderPropArg, TabListOwnProps>;
+declare const TabList: import("svelte").Component<TabListProps, {}, "element">;
+type TabList = ReturnType<typeof TabList>;
 export default TabList;

package/dist/tabs/TabPanel.svelte

@@ -1,47 +1,47 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
+  export 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 }
-  >
+  export type TabPanelOwnProps = PropsForFeatures<typeof PanelRenderFeatures> & {
+    element?: HTMLElement
+    id?: string
+    tabIndex?: number
+  }
+
+  export type TabPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, TabPanelOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+<script lang="ts">
   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"
+  import { useTabs } from "./context.svelte.js"
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $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")
+  }: TabPanelProps = $props()
+  const context = useTabs("TabPanel")
+  const { selectedIndex, tabs, panels, registerPanel } = $derived(context)
 
-  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
+  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: element })
 
-  onMount(() => actions.registerPanel(panelRef))
+  onMount(() => registerPanel(panelRef))
 
   const mySSRIndex = useStableCollectionIndex("panels")
 
@@ -72,15 +72,15 @@
 </script>
 
 {#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}
-  <Hidden aria-hidden="true" {...ourProps} bind:ref />
+  <Hidden aria-hidden="true" {...ourProps} bind:element />
 {:else}
   <ElementOrComponent
     {ourProps}
     {theirProps}
-    {slot}
+    slots={slot}
     defaultTag={DEFAULT_PANEL_TAG}
     features={PanelRenderFeatures}
     name="TabPanel"
-    bind:ref
+    bind:element
   />
 {/if}

package/dist/tabs/TabPanel.svelte.d.ts

@@ -1,47 +1,17 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_PANEL_TAG: "div";
-type PanelRenderPropArg = {
+export type PanelRenderPropArg = {
     selected: boolean;
     focus: boolean;
 };
-type PanelPropsWeControl = "role" | "aria-labelledby";
 declare const PanelRenderFeatures: number;
-export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
+export type TabPanelOwnProps = PropsForFeatures<typeof PanelRenderFeatures> & {
+    element?: HTMLElement;
     id?: string;
     tabIndex?: number;
-}>;
+};
+export type TabPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, TabPanelOwnProps>;
 import { type PropsForFeatures } from "../utils/render.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "unmount" | "static" | "id" | "tabIndex" | PanelPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<PanelRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: PanelRenderPropArg) => string) | undefined;
-    } : {}) & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    } & {
-        id?: string;
-        tabIndex?: number;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANEL_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_PANEL_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']>;
-}
-declare const TabPanel: $$IsomorphicComponent;
-type TabPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof TabPanel<TTag>>;
+declare const TabPanel: import("svelte").Component<TabPanelProps, {}, "element">;
+type TabPanel = ReturnType<typeof TabPanel>;
 export default TabPanel;

package/dist/tabs/TabPanels.svelte

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

package/dist/tabs/TabPanels.svelte.d.ts

@@ -1,34 +1,12 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANELS_TAG: "div";
-type PanelsRenderPropArg = {
+export type PanelsRenderPropArg = {
     selectedIndex: number;
 };
-export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<PanelsRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: PanelsRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANELS_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_PANELS_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']>;
-}
-declare const TabPanels: $$IsomorphicComponent;
-type TabPanels<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = InstanceType<typeof TabPanels<TTag>>;
+export type TabPanelsOwnProps = {
+    element?: HTMLElement;
+};
+export type TabPanelsProps = Props<typeof DEFAULT_PANELS_TAG, PanelsRenderPropArg, TabPanelsOwnProps>;
+declare const TabPanels: import("svelte").Component<TabPanelsProps, {}, "element">;
+type TabPanels = ReturnType<typeof TabPanels>;
 export default TabPanels;

package/dist/tabs/context.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+export declare enum Direction {
+    Forwards = 0,
+    Backwards = 1
+}
+export declare enum Ordering {
+    Less = -1,
+    Equal = 0,
+    Greater = 1
+}
+export type TabsContext = {
+    info: {
+        isControlled: boolean;
+    };
+    selectedIndex: number;
+    orientation: "horizontal" | "vertical";
+    activation: "manual" | "auto";
+    tabs: MutableRefObject<HTMLElement | undefined>[];
+    panels: MutableRefObject<HTMLElement | undefined>[];
+    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void;
+    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void;
+    change: (index: number) => void;
+};
+export declare function useTabs(component: string): TabsContext;
+export declare const createTabContext: (props: {
+    vertical: boolean;
+    manual: boolean;
+    selectedIndex: number | undefined;
+    defaultIndex: number;
+    change: (index: number) => void;
+}) => TabsContext;

package/dist/tabs/context.svelte.js

@@ -0,0 +1,134 @@
+import { sortByDomNode } from "../utils/focus-management.js";
+import { match } from "../utils/match.js";
+import { getContext, setContext } from "svelte";
+export var Direction;
+(function (Direction) {
+    Direction[Direction["Forwards"] = 0] = "Forwards";
+    Direction[Direction["Backwards"] = 1] = "Backwards";
+})(Direction || (Direction = {}));
+export var Ordering;
+(function (Ordering) {
+    Ordering[Ordering["Less"] = -1] = "Less";
+    Ordering[Ordering["Equal"] = 0] = "Equal";
+    Ordering[Ordering["Greater"] = 1] = "Greater";
+})(Ordering || (Ordering = {}));
+export function useTabs(component) {
+    const context = getContext("TabsContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <TabGroup /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useTabs);
+        throw err;
+    }
+    return context;
+}
+export const createTabContext = (props) => {
+    let _selectedIndex = $state($state.snapshot(props.selectedIndex ?? props.defaultIndex));
+    let tabs = $state.raw([]);
+    let panels = $state.raw([]);
+    const isControlled = $derived(props.selectedIndex !== undefined);
+    const context = {
+        info: {
+            get isControlled() {
+                return isControlled;
+            },
+        },
+        get orientation() {
+            return props.vertical ? "vertical" : "horizontal";
+        },
+        get activation() {
+            return props.manual ? "manual" : "auto";
+        },
+        get selectedIndex() {
+            return _selectedIndex;
+        },
+        set selectedIndex(index) {
+            if (index === _selectedIndex)
+                return;
+            tabs = sortByDomNode(tabs, (tab) => tab.current ?? null);
+            panels = sortByDomNode(panels, (panel) => panel.current ?? null);
+            const focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"));
+            if (
+            // Underflow
+            index < 0 ||
+                // Overflow
+                index > tabs.length - 1) {
+                const direction = match(Math.sign(index - _selectedIndex), {
+                    [Ordering.Less]: () => Direction.Backwards,
+                    [Ordering.Equal]: () => {
+                        return match(Math.sign(index), {
+                            [Ordering.Less]: () => Direction.Forwards,
+                            [Ordering.Equal]: () => Direction.Forwards,
+                            [Ordering.Greater]: () => Direction.Backwards,
+                        });
+                    },
+                    [Ordering.Greater]: () => Direction.Forwards,
+                });
+                // If there are no focusable tabs then.
+                // We won't change the selected index
+                // because it's likely the user is
+                // lazy loading tabs and there's
+                // nothing to focus on yet
+                if (focusableTabs.length === 0)
+                    return;
+                const nextSelectedIndex = match(direction, {
+                    [Direction.Forwards]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
+                    [Direction.Backwards]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1]),
+                });
+                if (nextSelectedIndex !== -1)
+                    _selectedIndex = nextSelectedIndex;
+                return;
+            }
+            // Middle
+            const before = tabs.slice(0, index);
+            const after = tabs.slice(index);
+            const next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab));
+            if (!next)
+                return;
+            let selectedIndex = tabs.findIndex((tab) => tab === next) ?? _selectedIndex;
+            if (selectedIndex === -1)
+                selectedIndex = _selectedIndex;
+            if (selectedIndex !== _selectedIndex)
+                _selectedIndex = selectedIndex;
+        },
+        get tabs() {
+            return tabs;
+        },
+        get panels() {
+            return panels;
+        },
+        registerTab(tab) {
+            const unregisterTab = (tab) => {
+                tabs = tabs.filter((_tab) => _tab !== tab);
+            };
+            if (tabs.some((_tab) => _tab === tab))
+                return () => unregisterTab(tab);
+            tabs = sortByDomNode([...tabs, tab], (tab) => tab.current ?? null);
+            const activeTab = tabs[_selectedIndex];
+            // When the component is uncontrolled, then we want to maintain the actively
+            // selected tab even if new tabs are inserted or removed before the active
+            // tab.
+            //
+            // When the component is controlled, then we don't want to do this and
+            // instead we want to select the tab based on the `selectedIndex` prop.
+            if (isControlled) {
+                const selectedIndex = tabs.findIndex((tab) => tab === activeTab);
+                if (selectedIndex !== _selectedIndex)
+                    _selectedIndex = selectedIndex;
+            }
+            return () => unregisterTab(tab);
+        },
+        registerPanel(panel) {
+            const unregisterPanel = (panel) => {
+                panels = panels.filter((_panel) => _panel !== panel);
+            };
+            if (!panels.some((_panel) => _panel === panel)) {
+                panels = sortByDomNode([...panels, panel], (panel) => panel.current ?? null);
+            }
+            return () => unregisterPanel(panel);
+        },
+        change: props.change,
+    };
+    setContext("TabsContext", context);
+    return context;
+};

package/dist/tabs/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Tab, type TabProps } from "./Tab.svelte";
-export { default as TabGroup, type TabGroupProps } from "./TabGroup.svelte";
-export { default as TabList, type TabListProps } from "./TabList.svelte";
-export { default as TabPanel, type TabPanelProps } from "./TabPanel.svelte";
-export { default as TabPanels, type TabPanelsProps } from "./TabPanels.svelte";
+export { default as Tab, type TabProps, type TabRenderPropArg as TabSlot, type TabOwnProps } from "./Tab.svelte";
+export { default as TabGroup, type TabGroupProps, type TabsRenderPropArg as TabGroupSlot, type TabGroupOwnProps, } from "./TabGroup.svelte";
+export { default as TabList, type TabListProps, type ListRenderPropArg as TabListSlot, type TabListOwnProps, } from "./TabList.svelte";
+export { default as TabPanel, type TabPanelProps, type PanelRenderPropArg as TabPanelSlot, type TabPanelOwnProps, } from "./TabPanel.svelte";
+export { default as TabPanels, type TabPanelsProps, type PanelsRenderPropArg as TabPanelsSlot, } from "./TabPanels.svelte";

package/dist/tabs/index.js

@@ -1,5 +1,5 @@
 export { default as Tab } from "./Tab.svelte";
-export { default as TabGroup } from "./TabGroup.svelte";
-export { default as TabList } from "./TabList.svelte";
-export { default as TabPanel } from "./TabPanel.svelte";
-export { default as TabPanels } from "./TabPanels.svelte";
+export { default as TabGroup, } from "./TabGroup.svelte";
+export { default as TabList, } from "./TabList.svelte";
+export { default as TabPanel, } from "./TabPanel.svelte";
+export { default as TabPanels, } from "./TabPanels.svelte";

package/dist/textarea/Textarea.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_TEXTAREA_TAG = "textarea" as const
 
-  type TextareaRenderPropArg = {
+  export type TextareaRenderPropArg = {
     disabled: boolean
     hover: boolean
     focus: boolean
@@ -12,22 +12,26 @@
   }
   type TextareaPropsWeControl = "aria-labelledby" | "aria-describedby"
 
-  export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = Props<
-    TTag,
+  export type TextareaOwnProps<TValue = string> = {
+    element?: HTMLElement
+    id?: string
+    value?: TValue
+    disabled?: boolean
+    invalid?: boolean
+    autofocus?: boolean
+  }
+
+  export type TextareaProps<TValue = string> = Props<
+    typeof DEFAULT_TEXTAREA_TAG,
     TextareaRenderPropArg,
-    TextareaPropsWeControl,
-    {
-      disabled?: boolean
-      invalid?: boolean
-      autoFocus?: boolean
-    }
+    TextareaOwnProps<TValue>
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG">
+<script lang="ts" generics="TValue = string">
   import { htmlid } from "../utils/id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
-  import { useProvidedId } from "../internal/id.js"
+  import { useProvidedId } from "../utils/id.js"
   import { useLabelledBy } from "../label/context.svelte.js"
   import { useDescribedBy } from "../description/context.svelte.js"
   import { useHover } from "../hooks/use-hover.svelte.js"
@@ -40,15 +44,15 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
-    value = $bindable<PropsOf<TTag>["value"]>(),
-    id = (providedId?.value || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    element = $bindable(),
+    value = $bindable(),
+    id = providedId || `headlessui-input-${internalId}`,
     disabled: theirDisabled = false,
-    autofocus = false as PropsOf<TTag>["autofocus"],
+    autofocus = false,
     invalid = false,
     ...theirProps
-  }: { as?: TTag } & TextareaProps<TTag> = $props()
-  const disabled = $derived(providedDisabled?.value ?? theirDisabled)
+  }: TextareaProps<TValue> = $props()
+  const disabled = $derived(providedDisabled.current || theirDisabled)
 
   const labelledBy = useLabelledBy()
   const describedBy = useDescribedBy()
@@ -89,9 +93,9 @@
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_TEXTAREA_TAG}
   name="Textarea"
-  bind:ref
+  bind:element
   bind:value
 />

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

@@ -1,47 +1,35 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_TEXTAREA_TAG: "textarea";
-type TextareaRenderPropArg = {
+export 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, {
+export type TextareaOwnProps<TValue = string> = {
+    element?: HTMLElement;
+    id?: string;
+    value?: TValue;
     disabled?: boolean;
     invalid?: boolean;
-    autoFocus?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | TextareaPropsWeControl | "autoFocus"> 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;
-    } : {}) & {
-        disabled?: boolean;
-        invalid?: boolean;
-        autoFocus?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    autofocus?: boolean;
+};
+export type TextareaProps<TValue = string> = Props<typeof DEFAULT_TEXTAREA_TAG, TextareaRenderPropArg, TextareaOwnProps<TValue>>;
+declare class __sveltets_Render<TValue = string> {
+    props(): TextareaProps<TValue>;
+    events(): {};
     slots(): {};
-    bindings(): "ref" | "value";
+    bindings(): "element" | "value";
     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']>;
+    new <TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Textarea: $$IsomorphicComponent;
-type Textarea<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = InstanceType<typeof Textarea<TTag>>;
+type Textarea<TValue = string> = InstanceType<typeof Textarea<TValue>>;
 export default Textarea;

package/dist/textarea/index.d.ts

@@ -1 +1 @@
-export { default as Textarea, type TextareaProps } from "./Textarea.svelte";
+export { default as Textarea, type TextareaProps, type TextareaRenderPropArg as TextareaSlot, type TextareaOwnProps, } from "./Textarea.svelte";

package/dist/textarea/index.js

@@ -1 +1 @@
-export { default as Textarea } from "./Textarea.svelte";
+export { default as Textarea, } from "./Textarea.svelte";