@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.4

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

@@ -0,0 +1,97 @@
+<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>
+
+<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
+    )
+  )
+
+  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies TextareaRenderPropArg)
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  {slot}
+  defaultTag={DEFAULT_TEXTAREA_TAG}
+  name="Textarea"
+  bind:ref
+  bind:value
+/>

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

@@ -0,0 +1,47 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare const DEFAULT_TEXTAREA_TAG: "textarea";
+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;
+}>;
+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>;
+    };
+    slots(): {};
+    bindings(): "ref" | "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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Textarea: $$IsomorphicComponent;
+type Textarea<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = InstanceType<typeof Textarea<TTag>>;
+export default Textarea;

package/dist/textarea/index.d.ts

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

package/dist/textarea/index.js

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