@pzerelles/headlessui-svelte 2.1.2-next.39 → 2.1.2-next.40

package/dist/radio-group/RadioGroup.svelte

@@ -0,0 +1,223 @@
+<script lang="ts" module>
+  import { useByComparator, type ByComparator } from "../hooks/use-by-comparator.js"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_RADIO_GROUP_TAG = "div" as const
+
+  export type RadioGroupRenderPropArg<TType> = {
+    value: TType
+  }
+
+  export type RadioGroupOwnProps<TType = string> = {
+    element?: HTMLElement
+    value?: TType
+    defaultValue?: TType
+    onchange?(value: TType): void
+    by?: ByComparator<TType>
+    disabled?: boolean
+    form?: string
+    name?: string
+  }
+
+  export type RadioGroupProps<TType = string> = Props<
+    typeof DEFAULT_RADIO_GROUP_TAG,
+    RadioGroupRenderPropArg<TType>,
+    RadioGroupOwnProps<TType>
+  >
+</script>
+
+<script lang="ts" generics="TType = string">
+  import { createState, type RadioGroupActionsContext, type RadioGroupDataContext } from "./contest.svelte.js"
+  import { useId } from "../hooks/use-id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useControllable } from "../hooks/use-controllable.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { attemptSubmit } from "../utils/form.js"
+  import { Focus, focusIn, FocusResult } from "../utils/focus-management.js"
+  import { setContext } from "svelte"
+  import FormFields from "../internal/FormFields.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  const providedDisabled = useDisabled()
+  let {
+    element = $bindable(),
+    id = `headlessui-radiogroup-${internalId}`,
+    value: controlledValue,
+    form,
+    name,
+    onchange: controlledOnChange,
+    by,
+    disabled: theirDisabled = false,
+    defaultValue,
+    ...theirProps
+  }: RadioGroupProps<TType> = $props()
+
+  const compare = useByComparator(by)
+  let _state = createState<TType>()
+  const options = $derived(_state.options)
+
+  const disabled = $derived(providedDisabled.current ?? theirDisabled)
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const controllable = useControllable<any>(
+    {
+      get controlledValue() {
+        return controlledValue
+      },
+      set controlledValue(value) {
+        controlledValue = value
+      },
+    },
+    controlledOnChange,
+    defaultValue
+  )
+  const { value, onchange } = $derived(controllable)
+
+  const firstOption = $derived(
+    options.find((option) => {
+      if (option.propsRef.disabled) return false
+      return true
+    })
+  )
+  const containsCheckedOption = $derived(options.some((option) => compare(option.propsRef.value as TType, value)))
+
+  const triggerChange = (nextValue: TType) => {
+    if (disabled) return false
+    if (compare(nextValue, value)) return false
+    let nextOption = options.find((option) => compare(option.propsRef.value as TType, nextValue))?.propsRef
+    if (nextOption?.disabled) return false
+
+    onchange?.(nextValue)
+
+    return true
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    console.log("handleKeyDown", event, element)
+    let container = element
+    if (!container) return
+
+    let ownerDocument = getOwnerDocument(container)
+
+    let all = options
+      .filter((option) => option.propsRef.disabled === false)
+      .map((radio) => radio.element) as HTMLElement[]
+
+    switch (event.key) {
+      case "Enter":
+        attemptSubmit(event.currentTarget as HTMLElement)
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        {
+          event.preventDefault()
+          event.stopPropagation()
+
+          let result = focusIn(all, Focus.Previous | Focus.WrapAround)
+
+          if (result === FocusResult.Success) {
+            let activeOption = options.find((option) => option.element === ownerDocument?.activeElement)
+            if (activeOption) triggerChange(activeOption.propsRef.value)
+          }
+        }
+        break
+
+      case "ArrowRight":
+      case "ArrowDown":
+        {
+          event.preventDefault()
+          event.stopPropagation()
+
+          let result = focusIn(all, Focus.Next | Focus.WrapAround)
+
+          if (result === FocusResult.Success) {
+            let activeOption = options.find((option) => option.element === ownerDocument?.activeElement)
+            if (activeOption) triggerChange(activeOption.propsRef.value)
+          }
+        }
+        break
+
+      case " ":
+        {
+          event.preventDefault()
+          event.stopPropagation()
+
+          let activeOption = options.find((option) => option.element === ownerDocument?.activeElement)
+          if (activeOption) triggerChange(activeOption.propsRef.value)
+        }
+        break
+    }
+  }
+
+  const dataContext: RadioGroupDataContext = {
+    get value() {
+      return value
+    },
+    get firstOption() {
+      return firstOption
+    },
+    get containsCheckedOption() {
+      return containsCheckedOption
+    },
+    get disabled() {
+      return disabled
+    },
+    get compare() {
+      return compare
+    },
+    get options() {
+      return options
+    },
+  }
+  setContext("RadioGroupDataContext", dataContext)
+
+  const actionContext: RadioGroupActionsContext<TType> = {
+    registerOption(option) {
+      _state.registerOption(option)
+      return () => {
+        _state.unregisterOption(option.id)
+      }
+    },
+    change: triggerChange,
+  }
+  setContext("RadioGroupActionsContext", actionContext)
+
+  const ourProps = $derived({
+    id,
+    role: "radiogroup",
+    "aria-labelledby": labelledBy.value,
+    "aria-describedby": describedBy.value,
+    onkeydown: handleKeyDown,
+  })
+
+  const slot = $derived({
+    value,
+  } satisfies RadioGroupRenderPropArg<TType>)
+
+  const reset = () => {
+    if (defaultValue === undefined) return
+    return triggerChange(defaultValue)
+  }
+</script>
+
+{#if name}
+  <FormFields
+    {disabled}
+    data={{ [name]: value || "on" }}
+    overrides={{ type: "radio", checked: value != null && value !== undefined }}
+    {form}
+    onReset={reset}
+  />
+{/if}
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  {slot}
+  defaultTag={DEFAULT_RADIO_GROUP_TAG}
+  bind:element
+  name="RadioGroup"
+/>

package/dist/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type ByComparator } from "../hooks/use-by-comparator.js";
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_RADIO_GROUP_TAG: "div";
+export type RadioGroupRenderPropArg<TType> = {
+    value: TType;
+};
+export type RadioGroupOwnProps<TType = string> = {
+    element?: HTMLElement;
+    value?: TType;
+    defaultValue?: TType;
+    onchange?(value: TType): void;
+    by?: ByComparator<TType>;
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+};
+export type RadioGroupProps<TType = string> = Props<typeof DEFAULT_RADIO_GROUP_TAG, RadioGroupRenderPropArg<TType>, RadioGroupOwnProps<TType>>;
+declare class __sveltets_Render<TType = string> {
+    props(): RadioGroupProps<TType>;
+    events(): {};
+    slots(): {};
+    bindings(): "element";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TType = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType = string>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioGroup: $$IsomorphicComponent;
+type RadioGroup<TType = string> = InstanceType<typeof RadioGroup<TType>>;
+export default RadioGroup;

package/dist/radio-group/RadioOption.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_OPTION_TAG = "div" as const
+
+  export type RadioOptionRenderPropArg = {
+    checked: boolean
+    /** @deprecated use `focus` instead */
+    active: boolean
+    hover: boolean
+    focus: boolean
+    autofocus: boolean
+    disabled: boolean
+  }
+
+  export type RadioOptionOwnProps<TType> = {
+    element?: HTMLElement
+    value: TType
+    disabled?: boolean
+    autofocus?: boolean
+  }
+
+  export type RadioOptionProps<TType> = Props<
+    typeof DEFAULT_OPTION_TAG,
+    RadioOptionRenderPropArg,
+    RadioOptionOwnProps<TType>
+  >
+</script>
+
+<script lang="ts" generics="TType = ComponentProps<typeof RadioGroup>['value']">
+  import { default as RadioGroup } from "./RadioGroup.svelte"
+  import { useActions, useData } from "./contest.svelte.js"
+  import { useId } from "../hooks/use-id.js"
+  import { useLabels } from "../label/context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+  import { onMount, type ComponentProps } from "svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+
+  const data = useData("RadioOption")
+  const actions = useActions<TType>("RadioOption")
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id: theirId,
+    value,
+    disabled: theirDisabled = false,
+    autofocus = false,
+    ...theirProps
+  }: RadioOptionProps<TType> = $props()
+  const id = $derived(theirId || `headlessui-radiogroup-option-${internalId}`)
+  const disabled = $derived(data.disabled || theirDisabled)
+
+  const labelledby = useLabels()
+  const describedby = useDescriptions()
+
+  const propsRef = {
+    get value() {
+      return value
+    },
+    get disabled() {
+      return disabled
+    },
+  }
+
+  onMount(() => {
+    return actions.registerOption({
+      id,
+      get element() {
+        return element
+      },
+      get propsRef() {
+        return propsRef
+      },
+    })
+  })
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    if (!actions.change(value)) return
+    element?.focus()
+  }
+
+  const isFirstOption = $derived(data.firstOption?.id === id)
+
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const checked = $derived(data.compare(data.value as TType, value))
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "radio",
+        "aria-checked": checked ? "true" : "false",
+        "aria-labelledby": labelledby.value,
+        "aria-describedby": describedby.value,
+        "aria-disabled": disabled ? true : undefined,
+        tabIndex: (() => {
+          if (disabled) return -1
+          if (checked) return 0
+          if (!data.containsCheckedOption && isFirstOption) return 0
+          return -1
+        })(),
+        onclick: disabled ? undefined : handleClick,
+        autofocus,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  const slot = $derived({
+    checked,
+    disabled,
+    active: focus,
+    hover,
+    focus,
+    autofocus,
+  } satisfies RadioOptionRenderPropArg)
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} bind:element name="RadioOption" />

package/dist/radio-group/RadioOption.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_OPTION_TAG: "div";
+export type RadioOptionRenderPropArg = {
+    checked: boolean;
+    /** @deprecated use `focus` instead */
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
+    disabled: boolean;
+};
+export type RadioOptionOwnProps<TType> = {
+    element?: HTMLElement;
+    value: TType;
+    disabled?: boolean;
+    autofocus?: boolean;
+};
+export type RadioOptionProps<TType> = Props<typeof DEFAULT_OPTION_TAG, RadioOptionRenderPropArg, RadioOptionOwnProps<TType>>;
+import { default as RadioGroup } from "./RadioGroup.svelte";
+import { type ComponentProps } from "svelte";
+declare class __sveltets_Render<TType = ComponentProps<typeof RadioGroup>['value']> {
+    props(): RadioOptionProps<TType>;
+    events(): {};
+    slots(): {};
+    bindings(): "element";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TType = ComponentProps<typeof RadioGroup>['value']>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType = ComponentProps<typeof RadioGroup>['value']>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioOption: $$IsomorphicComponent;
+type RadioOption<TType = ComponentProps<typeof RadioGroup>['value']> = InstanceType<typeof RadioOption<TType>>;
+export default RadioOption;

package/dist/radio-group/contest.svelte.d.ts

@@ -0,0 +1,30 @@
+interface Option<T = unknown> {
+    id: string;
+    element?: HTMLElement;
+    propsRef: {
+        value: T;
+        disabled: boolean;
+    };
+}
+export interface StateDefinition<T = unknown> {
+    options: Option<T>[];
+}
+export type RadioGroupDataContext = {
+    value: unknown;
+    firstOption?: Option;
+    containsCheckedOption: boolean;
+    disabled: boolean;
+    compare(a: unknown, z: unknown): boolean;
+} & StateDefinition;
+export declare function useData(component: string): RadioGroupDataContext;
+export type RadioGroupActionsContext<T> = {
+    registerOption(option: Option<T>): () => void;
+    change(value: T): boolean;
+};
+export declare function useActions<T>(component: string): RadioGroupActionsContext<T>;
+export declare function createState<T>(): {
+    readonly options: Option<T>[];
+    registerOption(option: Option<T>): void;
+    unregisterOption(id: string): void;
+};
+export {};

package/dist/radio-group/contest.svelte.js

@@ -0,0 +1,40 @@
+import { sortByDomNode } from "../utils/focus-management.js";
+import { getContext } from "svelte";
+export function useData(component) {
+    const context = getContext("RadioGroupDataContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <RadioGroup /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useData);
+        throw err;
+    }
+    return context;
+}
+export function useActions(component) {
+    const context = getContext("RadioGroupActionsContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <RadioGroup /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useActions);
+        throw err;
+    }
+    return context;
+}
+export function createState() {
+    let options = $state([]);
+    return {
+        get options() {
+            return options;
+        },
+        registerOption(option) {
+            const nextOptions = [...options, option];
+            options = sortByDomNode(nextOptions, (option) => option.element ?? null);
+        },
+        unregisterOption(id) {
+            let idx = options.findIndex((radio) => radio.id === id);
+            if (idx === -1)
+                return;
+            options.splice(idx, 1);
+        },
+    };
+}

package/dist/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Radio, type RadioProps, type RadioRenderPropArg as RadioSlot, type RadioOwnProps, } from "./Radio.svelte";
+export { default as RadioGroup, type RadioGroupProps, type RadioGroupRenderPropArg as RadioGroupSlot, type RadioGroupOwnProps, } from "./RadioGroup.svelte";
+export { default as RadioOption, type RadioOptionProps, type RadioOptionRenderPropArg as RadioOptionSlot, type RadioOptionOwnProps, } from "./RadioOption.svelte";

package/dist/radio-group/index.js

@@ -0,0 +1,3 @@
+export { default as Radio, } from "./Radio.svelte";
+export { default as RadioGroup, } from "./RadioGroup.svelte";
+export { default as RadioOption, } from "./RadioOption.svelte";

package/dist/select/Select.svelte.d.ts

@@ -17,4 +17,5 @@ export type SelectOwnProps = {
 };
 export type SelectProps = Props<typeof DEFAULT_SELECT_TAG, SelectRenderPropArg, SelectOwnProps>;
 declare const Select: import("svelte").Component<SelectProps, {}, "element">;
+type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/switch/Switch.svelte.d.ts

@@ -24,4 +24,5 @@ export type SwitchOwnProps = {
 };
 export type SwitchProps = Props<typeof DEFAULT_SWITCH_TAG, SwitchRenderPropArg, SwitchOwnProps>;
 declare const Switch: import("svelte").Component<SwitchProps, {}, "element" | "checked">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/switch/SwitchGroup.svelte.d.ts

@@ -8,4 +8,5 @@ declare const SwitchGroup: import("svelte").Component<{
         props?: Record<string, any>;
     }]> | undefined;
 }, {}, "">;
+type SwitchGroup = ReturnType<typeof SwitchGroup>;
 export default SwitchGroup;

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

@@ -16,4 +16,5 @@ export type TabOwnProps = {
 };
 export type TabProps = Props<typeof DEFAULT_TAB_TAG, TabRenderPropArg, TabOwnProps>;
 declare const Tab: import("svelte").Component<TabProps, {}, "element">;
+type Tab = ReturnType<typeof Tab>;
 export default Tab;

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

@@ -13,4 +13,5 @@ export type TabGroupOwnProps = {
 };
 export type TabGroupProps = Props<typeof DEFAULT_TABS_TAG, TabsRenderPropArg, TabGroupOwnProps>;
 declare const TabGroup: import("svelte").Component<TabGroupProps, {}, "element">;
+type TabGroup = ReturnType<typeof TabGroup>;
 export default TabGroup;

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

@@ -8,4 +8,5 @@ export type TabListOwnProps = {
 };
 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.d.ts

@@ -13,4 +13,5 @@ export type TabPanelOwnProps = PropsForFeatures<typeof PanelRenderFeatures> & {
 export type TabPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, TabPanelOwnProps>;
 import { type PropsForFeatures } from "../utils/render.js";
 declare const TabPanel: import("svelte").Component<TabPanelProps, {}, "element">;
+type TabPanel = ReturnType<typeof TabPanel>;
 export default TabPanel;

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

@@ -8,4 +8,5 @@ export type TabPanelsOwnProps = {
 };
 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/transition/InternalTransitionChild.svelte.d.ts

@@ -20,4 +20,5 @@ import { type TransitionChildProps } from "./TransitionChild.svelte";
  */
 export declare function shouldForwardRef(props: TransitionRootProps): boolean;
 declare const InternalTransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
+type InternalTransitionChild = ReturnType<typeof InternalTransitionChild>;
 export default InternalTransitionChild;

package/dist/transition/Transition.svelte.d.ts

@@ -8,4 +8,5 @@ export type TransitionRootProps = TransitionChildProps & {
     appear?: boolean;
 };
 declare const Transition: import("svelte").Component<TransitionRootProps, {}, "element">;
+type Transition = ReturnType<typeof Transition>;
 export default Transition;

package/dist/transition/TransitionChild.svelte.d.ts

@@ -13,4 +13,5 @@ export type TransitionChildRenderPropArg = {
 };
 export declare const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy;
 declare const TransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
+type TransitionChild = ReturnType<typeof TransitionChild>;
 export default TransitionChild;

package/dist/utils/DisabledProvider.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
-declare const DisabledProvider: import("svelte").Component<{
+type $$ComponentProps = {
     disabled?: boolean;
     children?: Snippet;
-}, {}, "">;
+};
+declare const DisabledProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type DisabledProvider = ReturnType<typeof DisabledProvider>;
 export default DisabledProvider;

package/dist/utils/StableCollection.svelte.d.ts

@@ -1,6 +1,8 @@
 import { type Snippet } from "svelte";
 export declare function useStableCollectionIndex(group: string): number;
-declare const StableCollection: import("svelte").Component<{
+type $$ComponentProps = {
     children: Snippet;
-}, {}, "">;
+};
+declare const StableCollection: import("svelte").Component<$$ComponentProps, {}, "">;
+type StableCollection = ReturnType<typeof StableCollection>;
 export default StableCollection;

package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts

@@ -4,4 +4,5 @@ export interface FloatingNodeProps {
     id: string;
 }
 declare const FloatingNode: import("svelte").Component<FloatingNodeProps, {}, "">;
+type FloatingNode = ReturnType<typeof FloatingNode>;
 export default FloatingNode;

package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts

@@ -22,4 +22,5 @@ export interface FloatingTreeProps {
     children?: Snippet;
 }
 declare const FloatingTree: import("svelte").Component<FloatingTreeProps, {}, "">;
+type FloatingTree = ReturnType<typeof FloatingTree>;
 export default FloatingTree;