@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

package/dist/switch/Switch.svelte

@@ -1,190 +1,143 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  const DEFAULT_SWITCH_TAG = "button" as const
-  type SwitchRenderPropArg = {
-    checked: boolean
-    hover: boolean
-    focus: boolean
-    active: boolean
-    autofocus: boolean
-    changing: boolean
-    disabled: boolean
-  }
-  type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role"
-
-  export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<
-    TTag,
-    SwitchRenderPropArg,
-    SwitchPropsWeControl,
-    {
-      checked?: boolean
-      defaultChecked?: boolean
-      onchange?(checked: boolean): void
-      name?: string
-      value?: string
-      form?: string
-      autofocus?: boolean
-      disabled?: boolean
-      tabIndex?: number
-    }
-  >
+<script lang="ts" module>const DEFAULT_SWITCH_TAG = "button";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { useDisabled } from "../hooks/use-disabled.js"
-  import { useProvidedId } from "../utils/id.js"
-  import { getContext, tick } from "svelte"
-  import type { GroupContext } from "./SwitchGroup.svelte"
-  import { attemptSubmit } from "../utils/form.js"
-  import { useLabelledBy } from "../label/context.svelte.js"
-  import { useDescribedBy } from "../description/context.svelte.js"
-  import { mergeProps } from "../utils/render.js"
-  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
-  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
-  import { useHover } from "../hooks/use-hover.svelte.js"
-  import { useActivePress } from "../hooks/use-active-press.svelte.js"
-  import { useControllable } from "../hooks/use-controllable.svelte.js"
-  import FormFields from "../internal/FormFields.svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  const internalId = useId()
-  const providedId = useProvidedId()
-  const providedDisabled = useDisabled()
-  let {
-    ref = $bindable(),
-    id = (providedId || `headlessui-switch-${internalId}`) as PropsOf<TTag>["id"],
-    disabled: theirDisabled = false,
-    checked: controlledChecked = $bindable(),
-    defaultChecked: _defaultChecked,
-    onchange: controlledOnChange,
-    name,
-    value,
-    form,
-    autofocus = false,
-    tabIndex,
-    ...theirProps
-  }: { as?: TTag } & SwitchProps<TTag> = $props()
-  const disabled = $derived(providedDisabled.current ?? theirDisabled)
-  const groupContext = getContext<GroupContext>("GroupContext")
-  $effect(() => {
-    if (groupContext) groupContext.switchElement = ref ?? null
-  })
-
-  const defaultChecked = _defaultChecked
-  const controllable = useControllable(
-    {
-      get controlledValue() {
-        return controlledChecked
-      },
-      set controlledValue(checked) {
-        controlledChecked = checked
-      },
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">import { useId } from "../hooks/use-id.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { useProvidedId } from "../utils/id.js";
+import { getContext, tick } from "svelte";
+import { attemptSubmit } from "../utils/form.js";
+import { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useControllable } from "../hooks/use-controllable.svelte.js";
+import FormFields from "../internal/FormFields.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+const providedId = useProvidedId();
+const providedDisabled = useDisabled();
+let {
+  ref = $bindable(),
+  id = providedId || `headlessui-switch-${internalId}`,
+  disabled: theirDisabled = false,
+  checked: controlledChecked = $bindable(),
+  defaultChecked: _defaultChecked,
+  onchange: controlledOnChange,
+  name,
+  value,
+  form,
+  autofocus = false,
+  tabIndex,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled.current ?? theirDisabled);
+const groupContext = getContext("GroupContext");
+$effect(() => {
+  if (groupContext) groupContext.switchElement = ref ?? null;
+});
+const defaultChecked = _defaultChecked;
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledChecked;
     },
-    controlledOnChange,
-    defaultChecked ?? false
-  )
-  const { value: checked, onchange } = $derived(controllable)
-
-  let changing = $state(false)
-
-  const toggle = () => {
-    changing = true
-    onchange?.(!checked)
-    tick().then(() => {
-      changing = false
-    })
-  }
-
-  const handleClick = (event: MouseEvent) => {
-    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
-    event.preventDefault()
-    toggle()
+    set controlledValue(checked2) {
+      controlledChecked = checked2;
+    }
+  },
+  controlledOnChange,
+  defaultChecked ?? false
+);
+const { value: checked, onchange } = $derived(controllable);
+let changing = $state(false);
+const toggle = () => {
+  changing = true;
+  onchange?.(!checked);
+  tick().then(() => {
+    changing = false;
+  });
+};
+const handleClick = (event) => {
+  event.preventDefault();
+  toggle();
+};
+const handleKeyUp = (event) => {
+  if (event.key === " ") {
+    event.preventDefault();
+    toggle();
+  } else if (event.key === "Enter") {
+    attemptSubmit(event.currentTarget);
   }
-
-  const handleKeyUp = (event: KeyboardEvent) => {
-    if (event.key === " ") {
-      event.preventDefault()
-      toggle()
-    } else if (event.key === "Enter") {
-      attemptSubmit(event.currentTarget as HTMLElement)
+};
+const handleKeyPress = (event) => event.preventDefault();
+let labelledBy = useLabelledBy();
+let describedBy = useDescribedBy();
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
     }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const slot = $derived({
+  checked,
+  disabled,
+  hover,
+  focus,
+  active,
+  autofocus,
+  changing
+});
+const buttonType = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as: theirProps.as };
+  },
+  get ref() {
+    return { current: ref };
   }
-
-  // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
-  const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
-
-  let labelledBy = useLabelledBy()
-  let describedBy = useDescribedBy()
-
-  const { isFocusVisible: focus, focusProps } = $derived(
-    useFocusRing({
-      get autofocus() {
-        return autofocus
-      },
-    })
-  )
-  const { isHovered: hover, hoverProps } = $derived(
-    useHover({
-      get disabled() {
-        return disabled
-      },
-    })
-  )
-  const { pressed: active, pressProps } = $derived(
-    useActivePress({
-      get disabled() {
-        return disabled
-      },
-    })
-  )
-
-  const slot = $derived({
-    checked,
-    disabled,
-    hover,
-    focus,
-    active,
-    autofocus,
-    changing,
-  } satisfies SwitchRenderPropArg)
-
-  const buttonType = useResolveButtonType({
-    get props() {
-      return { type: theirProps.type, as: theirProps.as }
-    },
-    get ref() {
-      return { current: ref }
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      id,
+      role: "switch",
+      type: buttonType.type,
+      tabIndex: tabIndex === -1 ? 0 : tabIndex ?? 0,
+      "aria-checked": checked,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      disabled: disabled || void 0,
+      autofocus,
+      onclick: handleClick,
+      onkeyup: handleKeyUp,
+      onkeypress: handleKeyPress
     },
-  })
-
-  const ourProps = $derived(
-    mergeProps(
-      {
-        id,
-        role: "switch",
-        type: buttonType.type,
-        tabIndex: tabIndex === -1 ? 0 : (tabIndex ?? 0),
-        "aria-checked": checked,
-        "aria-labelledby": labelledBy.value,
-        "aria-describedby": describedBy.value,
-        disabled: disabled || undefined,
-        autofocus,
-        onclick: handleClick,
-        onkeyup: handleKeyUp,
-        onkeypress: handleKeyPress,
-      },
-      focusProps,
-      hoverProps,
-      pressProps
-    )
+    focusProps,
+    hoverProps,
+    pressProps
   )
-
-  const reset = $derived(() => {
-    if (defaultChecked === undefined) return
-    return onchange?.(defaultChecked)
-  })
+);
+const reset = $derived(() => {
+  if (defaultChecked === void 0) return;
+  return onchange?.(defaultChecked);
+});
 </script>
 
 {#if name}

package/dist/switch/SwitchGroup.svelte

@@ -1,50 +1,37 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  const DEFAULT_GROUP_TAG = "svelte:fragment"
-
-  export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>
-
-  export type GroupContext = {
-    switchElement: HTMLElement | null
-  }
+<script lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
-  import { setContext } from "svelte"
-  import { useLabels } from "../label/context.svelte.js"
-  import { useDescriptions } from "../description/context.svelte.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  let switchElement = $state<HTMLElement | null>(null)
-  useLabels({
-    name: "SwitchGroup",
-    props: {
-      get htmlFor() {
-        return switchElement?.id
-      },
-      onclick: (event: MouseEvent) => {
-        if (!switchElement) return
-        if (event.currentTarget instanceof HTMLLabelElement) {
-          event.preventDefault()
-        }
-        switchElement.click()
-        switchElement.focus({ preventScroll: true })
-      },
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import { setContext } from "svelte";
+import { useLabels } from "../label/context.svelte.js";
+import { useDescriptions } from "../description/context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let switchElement = $state(null);
+useLabels({
+  name: "SwitchGroup",
+  props: {
+    get htmlFor() {
+      return switchElement?.id;
     },
-  })
-  useDescriptions()
-
-  setContext<GroupContext>("GroupContext", {
-    get switchElement() {
-      return switchElement
-    },
-    set switchElement(element) {
-      switchElement = element
-    },
-  })
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & SwitchGroupProps<TTag> = $props()
+    onclick: (event) => {
+      if (!switchElement) return;
+      if (event.currentTarget instanceof HTMLLabelElement) {
+        event.preventDefault();
+      }
+      switchElement.click();
+      switchElement.focus({ preventScroll: true });
+    }
+  }
+});
+useDescriptions();
+setContext("GroupContext", {
+  get switchElement() {
+    return switchElement;
+  },
+  set switchElement(element) {
+    switchElement = element;
+  }
+});
+let { ref = $bindable(), ...theirProps } = $props();
 </script>
 
 <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />