@pzerelles/headlessui-svelte 2.1.2-next.32 → 2.1.2-next.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/dist/button/Button.svelte +8 -9
  2. package/dist/button/Button.svelte.d.ts +4 -31
  3. package/dist/checkbox/Checkbox.svelte +14 -11
  4. package/dist/checkbox/Checkbox.svelte.d.ts +14 -31
  5. package/dist/close-button/CloseButton.svelte +4 -7
  6. package/dist/close-button/CloseButton.svelte.d.ts +2 -43
  7. package/dist/data-interactive/DataInteractive.svelte +5 -19
  8. package/dist/data-interactive/DataInteractive.svelte.d.ts +7 -29
  9. package/dist/description/Description.svelte +15 -12
  10. package/dist/description/Description.svelte.d.ts +7 -27
  11. package/dist/dialog/Dialog.svelte +34 -32
  12. package/dist/dialog/Dialog.svelte.d.ts +4 -41
  13. package/dist/dialog/DialogBackdrop.svelte +10 -10
  14. package/dist/dialog/DialogBackdrop.svelte.d.ts +4 -28
  15. package/dist/dialog/DialogPanel.svelte +18 -10
  16. package/dist/dialog/DialogPanel.svelte.d.ts +4 -29
  17. package/dist/dialog/DialogTitle.svelte +19 -7
  18. package/dist/dialog/DialogTitle.svelte.d.ts +6 -26
  19. package/dist/field/Field.svelte +9 -15
  20. package/dist/field/Field.svelte.d.ts +4 -29
  21. package/dist/fieldset/Fieldset.svelte +10 -13
  22. package/dist/fieldset/Fieldset.svelte.d.ts +5 -30
  23. package/dist/focus-trap/FocusTrap.svelte +20 -24
  24. package/dist/focus-trap/FocusTrap.svelte.d.ts +5 -33
  25. package/dist/hooks/use-inert-others.svelte.js +10 -10
  26. package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
  27. package/dist/input/Input.svelte +19 -9
  28. package/dist/input/Input.svelte.d.ts +13 -26
  29. package/dist/internal/FocusSentinel.svelte +33 -32
  30. package/dist/internal/FormResolver.svelte +5 -1
  31. package/dist/internal/Hidden.svelte +9 -23
  32. package/dist/internal/Hidden.svelte.d.ts +4 -29
  33. package/dist/internal/MainTreeProvider.svelte +1 -1
  34. package/dist/label/Label.svelte +19 -13
  35. package/dist/label/Label.svelte.d.ts +7 -31
  36. package/dist/legend/Legend.svelte +20 -6
  37. package/dist/legend/Legend.svelte.d.ts +4 -3
  38. package/dist/listbox/Listbox.svelte +6 -17
  39. package/dist/listbox/Listbox.svelte.d.ts +11 -34
  40. package/dist/listbox/ListboxButton.svelte +14 -13
  41. package/dist/listbox/ListboxButton.svelte.d.ts +5 -31
  42. package/dist/listbox/ListboxOption.svelte +15 -15
  43. package/dist/listbox/ListboxOption.svelte.d.ts +12 -25
  44. package/dist/listbox/ListboxOptions.svelte +13 -11
  45. package/dist/listbox/ListboxOptions.svelte.d.ts +4 -37
  46. package/dist/listbox/ListboxSelectedOption.svelte +15 -17
  47. package/dist/listbox/ListboxSelectedOption.svelte.d.ts +8 -32
  48. package/dist/menu/Menu.svelte +5 -7
  49. package/dist/menu/Menu.svelte.d.ts +3 -30
  50. package/dist/menu/MenuButton.svelte +12 -12
  51. package/dist/menu/MenuButton.svelte.d.ts +4 -33
  52. package/dist/menu/MenuHeading.svelte +10 -9
  53. package/dist/menu/MenuHeading.svelte.d.ts +4 -30
  54. package/dist/menu/MenuItem.svelte +12 -12
  55. package/dist/menu/MenuItem.svelte.d.ts +5 -31
  56. package/dist/menu/MenuItems.svelte +12 -13
  57. package/dist/menu/MenuItems.svelte.d.ts +4 -37
  58. package/dist/menu/MenuSection.svelte +9 -8
  59. package/dist/menu/MenuSection.svelte.d.ts +5 -28
  60. package/dist/menu/MenuSeparator.svelte +9 -7
  61. package/dist/menu/MenuSeparator.svelte.d.ts +5 -27
  62. package/dist/popover/Popover.svelte +8 -8
  63. package/dist/popover/Popover.svelte.d.ts +4 -29
  64. package/dist/popover/PopoverBackdrop.svelte +15 -12
  65. package/dist/popover/PopoverBackdrop.svelte.d.ts +6 -33
  66. package/dist/popover/PopoverButton.svelte +34 -34
  67. package/dist/popover/PopoverButton.svelte.d.ts +6 -28
  68. package/dist/popover/PopoverGroup.svelte +14 -13
  69. package/dist/popover/PopoverGroup.svelte.d.ts +5 -27
  70. package/dist/popover/PopoverPanel.svelte +46 -41
  71. package/dist/popover/PopoverPanel.svelte.d.ts +5 -35
  72. package/dist/popover/index.d.ts +1 -1
  73. package/dist/portal/InternalPortal.svelte +17 -16
  74. package/dist/portal/InternalPortal.svelte.d.ts +4 -29
  75. package/dist/portal/Portal.svelte +7 -6
  76. package/dist/portal/Portal.svelte.d.ts +2 -18
  77. package/dist/portal/PortalGroup.svelte +5 -13
  78. package/dist/portal/PortalGroup.svelte.d.ts +3 -30
  79. package/dist/select/Select.svelte +10 -9
  80. package/dist/select/Select.svelte.d.ts +5 -31
  81. package/dist/switch/Switch.svelte +13 -12
  82. package/dist/switch/Switch.svelte.d.ts +5 -37
  83. package/dist/switch/SwitchGroup.svelte +5 -5
  84. package/dist/switch/SwitchGroup.svelte.d.ts +7 -27
  85. package/dist/tabs/Tab.svelte +12 -12
  86. package/dist/tabs/Tab.svelte.d.ts +4 -31
  87. package/dist/tabs/TabGroup.svelte +8 -8
  88. package/dist/tabs/TabGroup.svelte.d.ts +4 -33
  89. package/dist/tabs/TabList.svelte +7 -8
  90. package/dist/tabs/TabList.svelte.d.ts +5 -27
  91. package/dist/tabs/TabPanel.svelte +11 -11
  92. package/dist/tabs/TabPanel.svelte.d.ts +4 -33
  93. package/dist/tabs/TabPanels.svelte +5 -5
  94. package/dist/tabs/TabPanels.svelte.d.ts +5 -26
  95. package/dist/textarea/Textarea.svelte +12 -10
  96. package/dist/textarea/Textarea.svelte.d.ts +13 -26
  97. package/dist/transition/InternalTransitionChild.svelte +19 -12
  98. package/dist/transition/InternalTransitionChild.svelte.d.ts +3 -32
  99. package/dist/transition/Transition.svelte +12 -21
  100. package/dist/transition/Transition.svelte.d.ts +3 -35
  101. package/dist/transition/TransitionChild.svelte +9 -10
  102. package/dist/transition/TransitionChild.svelte.d.ts +8 -34
  103. package/dist/transition/context.svelte.js +7 -7
  104. package/dist/utils/ElementOrComponent.svelte +56 -15
  105. package/dist/utils/ElementOrComponent.svelte.d.ts +30 -23
  106. package/dist/utils/state.js +4 -4
  107. package/dist/utils/types.d.ts +12 -9
  108. package/package.json +12 -12
  109. package/dist/combobox/Combobox.svelte +0 -53
  110. package/dist/combobox/Combobox.svelte.d.ts +0 -50
  111. package/dist/utils/Generic.svelte +0 -57
  112. package/dist/utils/Generic.svelte.d.ts +0 -31
  113. package/dist/utils/alternative-types.d.ts +0 -20
  114. package/dist/utils/alternative-types.js +0 -1
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type { Props, ElementType } from "../utils/types.js"
2
+ import type { Props } from "../utils/types.js"
3
3
 
4
4
  const DEFAULT_BUTTON_TAG = "button" as const
5
5
 
@@ -10,13 +10,12 @@
10
10
  active: boolean
11
11
  autofocus: boolean
12
12
  }
13
- type ButtonPropsWeControl = never
14
13
 
15
- export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
16
- TTag,
14
+ export type ButtonProps = Props<
15
+ typeof DEFAULT_BUTTON_TAG,
17
16
  ButtonRenderPropArg,
18
- ButtonPropsWeControl,
19
17
  {
18
+ element?: HTMLElement
20
19
  disabled?: boolean
21
20
  autofocus?: boolean
22
21
  type?: "button" | "submit" | "reset"
@@ -24,7 +23,7 @@
24
23
  >
25
24
  </script>
26
25
 
27
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
26
+ <script lang="ts">
28
27
  import { useActivePress } from "../hooks/use-active-press.svelte.js"
29
28
  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
30
29
  import { useDisabled } from "../hooks/use-disabled.js"
@@ -35,12 +34,12 @@
35
34
  const providedDisabled = useDisabled()
36
35
 
37
36
  let {
38
- ref = $bindable(),
37
+ element = $bindable(),
39
38
  disabled: ownDisabled = false,
40
39
  autofocus = false,
41
40
  type = "button",
42
41
  ...theirProps
43
- }: { as?: TTag } & ButtonProps<TTag> = $props()
42
+ }: ButtonProps = $props()
44
43
 
45
44
  const disabled = $derived(providedDisabled.current || ownDisabled)
46
45
 
@@ -88,4 +87,4 @@
88
87
  )
89
88
  </script>
90
89
 
91
- <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />
90
+ <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />
@@ -1,4 +1,4 @@
1
- import type { Props, ElementType } from "../utils/types.js";
1
+ import type { Props } from "../utils/types.js";
2
2
  declare const DEFAULT_BUTTON_TAG: "button";
3
3
  type ButtonRenderPropArg = {
4
4
  disabled: boolean;
@@ -7,38 +7,11 @@ type ButtonRenderPropArg = {
7
7
  active: boolean;
8
8
  autofocus: boolean;
9
9
  };
10
- type ButtonPropsWeControl = never;
11
- export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
10
+ export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
11
+ element?: HTMLElement;
12
12
  disabled?: boolean;
13
13
  autofocus?: boolean;
14
14
  type?: "button" | "submit" | "reset";
15
15
  }>;
16
- declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
17
- props(): {
18
- as?: TTag | undefined;
19
- } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
20
- children?: import("svelte").Snippet<[ButtonRenderPropArg & {
21
- props?: Record<string, any>;
22
- }]> | undefined;
23
- class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
24
- ref?: HTMLElement;
25
- } & {
26
- disabled?: boolean;
27
- autofocus?: boolean;
28
- type?: "button" | "submit" | "reset";
29
- };
30
- events(): {};
31
- slots(): {};
32
- bindings(): "ref";
33
- exports(): {};
34
- }
35
- interface $$IsomorphicComponent {
36
- new <TTag extends ElementType = typeof DEFAULT_BUTTON_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']>> & {
37
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
38
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
39
- <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
40
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
41
- }
42
- declare const Button: $$IsomorphicComponent;
43
- type Button<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof Button<TTag>>;
16
+ declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
44
17
  export default Button;
@@ -1,7 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type { ElementType, Props, PropsOf } from "../utils/types.js"
2
+ import type { Props } from "../utils/types.js"
3
+
4
+ const DEFAULT_CHECKBOX_TAG = "span" as const
3
5
 
4
- let DEFAULT_CHECKBOX_TAG = "span" as const
5
6
  type CheckboxRenderPropArg = {
6
7
  checked: boolean
7
8
  changing: boolean
@@ -12,6 +13,7 @@
12
13
  disabled: boolean
13
14
  indeterminate: boolean
14
15
  }
16
+
15
17
  type CheckboxPropsWeControl =
16
18
  | "aria-checked"
17
19
  | "aria-describedby"
@@ -20,15 +22,15 @@
20
22
  | "role"
21
23
  | "tabIndex"
22
24
 
23
- export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<
24
- TTag,
25
+ export type CheckboxProps<TType = string> = Props<
26
+ typeof DEFAULT_CHECKBOX_TAG,
25
27
  CheckboxRenderPropArg,
26
- CheckboxPropsWeControl,
27
28
  {
29
+ element?: HTMLElement
30
+ id?: string
28
31
  value?: TType
29
32
  disabled?: boolean
30
33
  indeterminate?: boolean
31
-
32
34
  checked?: boolean
33
35
  defaultChecked?: boolean
34
36
  autofocus?: boolean
@@ -39,7 +41,7 @@
39
41
  >
40
42
  </script>
41
43
 
42
- <script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">
44
+ <script lang="ts" generics="TType">
43
45
  import { tick } from "svelte"
44
46
  import { attemptSubmit } from "../utils/form.js"
45
47
  import { useProvidedId, htmlid } from "../utils/id.js"
@@ -59,8 +61,8 @@
59
61
  const providedDisabled = useDisabled()
60
62
 
61
63
  let {
62
- ref = $bindable(),
63
- id = (providedId || `headlessui-checkbox-${internalId}`) as PropsOf<TTag>["id"],
64
+ element = $bindable(),
65
+ id = providedId || `headlessui-checkbox-${internalId}`,
64
66
  disabled: theirDisabled = false,
65
67
  autofocus = false,
66
68
  checked: controlledChecked = $bindable(),
@@ -71,7 +73,7 @@
71
73
  form,
72
74
  indeterminate = false,
73
75
  ...theirProps
74
- }: { as?: TTag } & CheckboxProps<TTag, TType> = $props()
76
+ }: CheckboxProps<TType> = $props()
75
77
 
76
78
  const defaultChecked = _defaultChecked
77
79
  const controllable = useControllable(
@@ -188,12 +190,13 @@
188
190
  onReset={reset}
189
191
  />
190
192
  {/if}
193
+
191
194
  <ElementOrComponent
192
195
  {ourProps}
193
196
  {theirProps}
194
197
  {slot}
195
198
  defaultTag={DEFAULT_CHECKBOX_TAG}
196
199
  name="Checkbox"
197
- bind:ref
200
+ bind:element
198
201
  bind:value
199
202
  />
@@ -1,5 +1,5 @@
1
- import type { ElementType, Props, PropsOf } from "../utils/types.js";
2
- declare let DEFAULT_CHECKBOX_TAG: "span";
1
+ import type { Props } from "../utils/types.js";
2
+ declare const DEFAULT_CHECKBOX_TAG: "span";
3
3
  type CheckboxRenderPropArg = {
4
4
  checked: boolean;
5
5
  changing: boolean;
@@ -10,8 +10,9 @@ type CheckboxRenderPropArg = {
10
10
  disabled: boolean;
11
11
  indeterminate: boolean;
12
12
  };
13
- type CheckboxPropsWeControl = "aria-checked" | "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex";
14
- export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<TTag, CheckboxRenderPropArg, CheckboxPropsWeControl, {
13
+ export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, {
14
+ element?: HTMLElement;
15
+ id?: string;
15
16
  value?: TType;
16
17
  disabled?: boolean;
17
18
  indeterminate?: boolean;
@@ -22,38 +23,20 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
22
23
  name?: string;
23
24
  onchange?: (checked: boolean) => void;
24
25
  }>;
25
- declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
26
- props(): {
27
- as?: TTag | undefined;
28
- } & (Exclude<keyof PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
29
- children?: import("svelte").Snippet<[CheckboxRenderPropArg & {
30
- props?: Record<string, any>;
31
- }]> | undefined;
32
- class?: string | ((bag: CheckboxRenderPropArg) => string) | null | undefined;
33
- ref?: HTMLElement;
34
- } & {
35
- value?: TType | undefined;
36
- disabled?: boolean;
37
- indeterminate?: boolean;
38
- checked?: boolean;
39
- defaultChecked?: boolean;
40
- autofocus?: boolean;
41
- form?: string;
42
- name?: string;
43
- onchange?: (checked: boolean) => void;
44
- };
26
+ declare class __sveltets_Render<TType> {
27
+ props(): CheckboxProps<TType>;
45
28
  events(): {};
46
29
  slots(): {};
47
- bindings(): "ref" | "checked";
30
+ bindings(): "element" | "checked";
48
31
  exports(): {};
49
32
  }
50
33
  interface $$IsomorphicComponent {
51
- new <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TTag>['slots']>> & {
52
- $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
53
- } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
54
- <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TTag>['props']> & {}): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
55
- z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
34
+ new <TType>(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']>> & {
35
+ $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
36
+ } & ReturnType<__sveltets_Render<TType>['exports']>;
37
+ <TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
38
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
56
39
  }
57
40
  declare const Checkbox: $$IsomorphicComponent;
58
- type Checkbox<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> = InstanceType<typeof Checkbox<TType, TTag>>;
41
+ type Checkbox<TType> = InstanceType<typeof Checkbox<TType>>;
59
42
  export default Checkbox;
@@ -1,17 +1,14 @@
1
1
  <script lang="ts" module>
2
2
  import Button, { type ButtonProps } from "../button/Button.svelte"
3
3
  import { useClose } from "../internal/close-provider.js"
4
- import type { ElementType } from "../utils/types.js"
5
4
 
6
- let DEFAULT_BUTTON_TAG = "button" as const
7
-
8
- export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>
5
+ export type CloseButtonProps = ButtonProps
9
6
  </script>
10
7
 
11
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
8
+ <script lang="ts">
12
9
  const closeContext = useClose()
13
10
  const close = $derived(closeContext?.close)
14
- let { ...props }: { as?: TTag } & CloseButtonProps<TTag> = $props()
11
+ let { element = $bindable(), ...props }: CloseButtonProps = $props()
15
12
  </script>
16
13
 
17
- <Button onclick={close} {...props} />
14
+ <Button {...props} onclick={close} bind:element />
@@ -1,45 +1,4 @@
1
1
  import { type ButtonProps } from "../button/Button.svelte";
2
- import type { ElementType } from "../utils/types.js";
3
- declare let DEFAULT_BUTTON_TAG: "button";
4
- export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>;
5
- declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
6
- props(): {
7
- as?: TTag | undefined;
8
- } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
9
- children?: import("svelte").Snippet<[{
10
- disabled: boolean;
11
- hover: boolean;
12
- focus: boolean;
13
- active: boolean;
14
- autofocus: boolean;
15
- } & {
16
- props?: Record<string, any>;
17
- }]> | undefined;
18
- class?: string | ((bag: {
19
- disabled: boolean;
20
- hover: boolean;
21
- focus: boolean;
22
- active: boolean;
23
- autofocus: boolean;
24
- }) => string) | null | undefined;
25
- ref?: HTMLElement;
26
- } & {
27
- disabled?: boolean;
28
- autofocus?: boolean;
29
- type?: "button" | "submit" | "reset";
30
- };
31
- events(): {};
32
- slots(): {};
33
- bindings(): "";
34
- exports(): {};
35
- }
36
- interface $$IsomorphicComponent {
37
- new <TTag extends ElementType = typeof DEFAULT_BUTTON_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']>> & {
38
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
39
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
40
- <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
41
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
42
- }
43
- declare const CloseButton: $$IsomorphicComponent;
44
- type CloseButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof CloseButton<TTag>>;
2
+ export type CloseButtonProps = ButtonProps;
3
+ declare const CloseButton: import("svelte").Component<ButtonProps, {}, "element">;
45
4
  export default CloseButton;
@@ -1,8 +1,7 @@
1
1
  <script lang="ts" module>
2
- import type { Props, ElementType } from "../utils/types.js"
2
+ import type { PropsAsChild } from "../utils/types.js"
3
3
  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
4
4
  import { useActivePress } from "../hooks/use-active-press.svelte.js"
5
- import type { Snippet } from "svelte"
6
5
  import { useHover } from "../hooks/use-hover.svelte.js"
7
6
  import { mergeProps } from "../utils/render.js"
8
7
  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
@@ -14,18 +13,12 @@
14
13
  focus: boolean
15
14
  active: boolean
16
15
  }
17
- type DataInteractivePropsWeControl = never
18
16
 
19
- export type DataInteractiveProps<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = Props<
20
- TTag,
21
- DataInteractiveRenderPropArg,
22
- DataInteractivePropsWeControl,
23
- {}
24
- >
17
+ export type DataInteractiveProps = PropsAsChild<DataInteractiveRenderPropArg>
25
18
  </script>
26
19
 
27
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG">
28
- let { ref = $bindable(), ...theirProps }: { as?: TTag } & DataInteractiveProps<TTag> = $props()
20
+ <script lang="ts">
21
+ let { ...theirProps }: DataInteractiveProps = $props()
29
22
 
30
23
  // Ideally we can use a `disabled` prop, but that would depend on the props of the child element
31
24
  // and we don't have access to that in this component.
@@ -57,11 +50,4 @@
57
50
  const ourProps = $derived(mergeProps(focusProps, hoverProps, pressProps))
58
51
  </script>
59
52
 
60
- <ElementOrComponent
61
- {ourProps}
62
- {theirProps}
63
- {slot}
64
- defaultTag={DEFAULT_DATA_INTERACTIVE_TAG}
65
- name="DataInteractive"
66
- bind:ref
67
- />
53
+ <ElementOrComponent {ourProps} {theirProps} {slot} name="DataInteractive" />
@@ -1,35 +1,13 @@
1
- import type { Props, ElementType } from "../utils/types.js";
2
- import type { Snippet } from "svelte";
3
- declare const DEFAULT_DATA_INTERACTIVE_TAG: "svelte:fragment";
1
+ import type { PropsAsChild } from "../utils/types.js";
4
2
  type DataInteractiveRenderPropArg = {
5
3
  hover: boolean;
6
4
  focus: boolean;
7
5
  active: boolean;
8
6
  };
9
- type DataInteractivePropsWeControl = never;
10
- export type DataInteractiveProps<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = Props<TTag, DataInteractiveRenderPropArg, DataInteractivePropsWeControl, {}>;
11
- declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> {
12
- props(): {
13
- as?: TTag | undefined;
14
- } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
15
- children?: Snippet<[DataInteractiveRenderPropArg & {
16
- props?: Record<string, any>;
17
- }]> | undefined;
18
- class?: string | ((bag: DataInteractiveRenderPropArg) => string) | null | undefined;
19
- ref?: HTMLElement;
20
- };
21
- events(): {};
22
- slots(): {};
23
- bindings(): "ref";
24
- exports(): {};
25
- }
26
- interface $$IsomorphicComponent {
27
- new <TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_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']>> & {
28
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
29
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
30
- <TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
31
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
32
- }
33
- declare const DataInteractive: $$IsomorphicComponent;
34
- type DataInteractive<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = InstanceType<typeof DataInteractive<TTag>>;
7
+ export type DataInteractiveProps = PropsAsChild<DataInteractiveRenderPropArg>;
8
+ declare const DataInteractive: import("svelte").Component<{
9
+ children?: import("svelte").Snippet<[DataInteractiveRenderPropArg & {
10
+ props?: Record<string, any>;
11
+ }]> | undefined;
12
+ }, {}, "">;
35
13
  export default DataInteractive;
@@ -1,12 +1,19 @@
1
1
  <script lang="ts" module>
2
- import type { ElementType, Props, PropsOf } from "../utils/types.js"
3
-
4
- let DEFAULT_DESCRIPTION_TAG = "p" as const
5
-
6
- export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>
2
+ import type { Props } from "../utils/types.js"
3
+
4
+ const DEFAULT_DESCRIPTION_TAG = "p" as const
5
+
6
+ export type DescriptionProps = Props<
7
+ typeof DEFAULT_DESCRIPTION_TAG,
8
+ {},
9
+ {
10
+ id?: string
11
+ element?: HTMLElement
12
+ }
13
+ >
7
14
  </script>
8
15
 
9
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">
16
+ <script lang="ts">
10
17
  import { useId } from "../hooks/use-id.js"
11
18
  import { useDisabled } from "../hooks/use-disabled.js"
12
19
  import { useDescriptionContext } from "./context.svelte.js"
@@ -16,11 +23,7 @@
16
23
  const internalId = useId()
17
24
  const providedDisabled = useDisabled()
18
25
 
19
- let {
20
- ref = $bindable(),
21
- id = `headlessui-description-${internalId}` as PropsOf<TTag>["id"],
22
- ...theirProps
23
- }: { as?: TTag } & DescriptionProps<TTag> = $props()
26
+ let { element = $bindable(), id = `headlessui-description-${internalId}`, ...theirProps }: DescriptionProps = $props()
24
27
 
25
28
  const { register } = useDescriptionContext()
26
29
  $effect(() => {
@@ -39,5 +42,5 @@
39
42
  slots={slot}
40
43
  defaultTag={DEFAULT_DESCRIPTION_TAG}
41
44
  name="Description"
42
- bind:ref
45
+ bind:element
43
46
  />
@@ -1,28 +1,8 @@
1
- import type { ElementType, Props, PropsOf } from "../utils/types.js";
2
- declare let DEFAULT_DESCRIPTION_TAG: "p";
3
- export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>;
4
- declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> {
5
- props(): {
6
- as?: TTag | undefined;
7
- } & (Exclude<keyof PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
8
- children?: import("svelte").Snippet<[{
9
- props?: Record<string, any>;
10
- }]> | undefined;
11
- class?: string | ((bag: {}) => string) | null | undefined;
12
- ref?: HTMLElement;
13
- };
14
- events(): {};
15
- slots(): {};
16
- bindings(): "ref";
17
- exports(): {};
18
- }
19
- interface $$IsomorphicComponent {
20
- new <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_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']>> & {
21
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
22
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
23
- <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
24
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
25
- }
26
- declare const Description: $$IsomorphicComponent;
27
- type Description<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = InstanceType<typeof Description<TTag>>;
1
+ import type { Props } from "../utils/types.js";
2
+ declare const DEFAULT_DESCRIPTION_TAG: "p";
3
+ export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, {
4
+ id?: string;
5
+ element?: HTMLElement;
6
+ }>;
7
+ declare const Description: import("svelte").Component<DescriptionProps, {}, "element">;
28
8
  export default Description;