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

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 (267) hide show
  1. package/dist/button/Button.svelte +16 -19
  2. package/dist/button/Button.svelte.d.ts +8 -36
  3. package/dist/button/index.d.ts +1 -1
  4. package/dist/button/index.js +1 -1
  5. package/dist/checkbox/Checkbox.svelte +31 -27
  6. package/dist/checkbox/Checkbox.svelte.d.ts +17 -38
  7. package/dist/checkbox/index.d.ts +1 -1
  8. package/dist/checkbox/index.js +1 -1
  9. package/dist/close-button/CloseButton.svelte +4 -7
  10. package/dist/close-button/CloseButton.svelte.d.ts +3 -46
  11. package/dist/close-button/index.d.ts +1 -0
  12. package/dist/close-button/index.js +1 -0
  13. package/dist/data-interactive/DataInteractive.svelte +6 -22
  14. package/dist/data-interactive/DataInteractive.svelte.d.ts +9 -34
  15. package/dist/data-interactive/index.d.ts +1 -1
  16. package/dist/data-interactive/index.js +1 -1
  17. package/dist/description/Description.svelte +29 -24
  18. package/dist/description/Description.svelte.d.ts +9 -30
  19. package/dist/description/context.svelte.js +14 -16
  20. package/dist/description/index.d.ts +1 -1
  21. package/dist/dialog/Dialog.svelte +315 -31
  22. package/dist/dialog/Dialog.svelte.d.ts +7 -45
  23. package/dist/dialog/DialogBackdrop.svelte +11 -14
  24. package/dist/dialog/DialogBackdrop.svelte.d.ts +8 -33
  25. package/dist/dialog/DialogPanel.svelte +23 -19
  26. package/dist/dialog/DialogPanel.svelte.d.ts +8 -34
  27. package/dist/dialog/DialogTitle.svelte +17 -8
  28. package/dist/dialog/DialogTitle.svelte.d.ts +9 -30
  29. package/dist/dialog/context.svelte.js +2 -2
  30. package/dist/dialog/index.d.ts +4 -4
  31. package/dist/dialog/index.js +4 -4
  32. package/dist/disclosure/Disclosure.svelte +61 -0
  33. package/dist/disclosure/Disclosure.svelte.d.ts +14 -0
  34. package/dist/disclosure/DisclosureButton.svelte +191 -0
  35. package/dist/disclosure/DisclosureButton.svelte.d.ts +19 -0
  36. package/dist/disclosure/DisclosurePanel.svelte +96 -0
  37. package/dist/disclosure/DisclosurePanel.svelte.d.ts +16 -0
  38. package/dist/disclosure/context.svelte.d.ts +32 -0
  39. package/dist/disclosure/context.svelte.js +94 -0
  40. package/dist/disclosure/index.d.ts +3 -0
  41. package/dist/disclosure/index.js +3 -0
  42. package/dist/field/Field.svelte +27 -26
  43. package/dist/field/Field.svelte.d.ts +7 -34
  44. package/dist/field/index.d.ts +1 -1
  45. package/dist/fieldset/Fieldset.svelte +21 -20
  46. package/dist/fieldset/Fieldset.svelte.d.ts +8 -35
  47. package/dist/fieldset/index.d.ts +1 -1
  48. package/dist/focus-trap/FocusTrap.svelte +29 -36
  49. package/dist/focus-trap/FocusTrap.svelte.d.ts +8 -38
  50. package/dist/hooks/use-controllable.svelte.js +3 -2
  51. package/dist/hooks/use-did-element-move.svelte.js +5 -10
  52. package/dist/hooks/use-disabled.d.ts +6 -1
  53. package/dist/hooks/use-disabled.js +10 -5
  54. package/dist/hooks/use-element-size.svelte.js +1 -1
  55. package/dist/hooks/use-event-listener.svelte.d.ts +1 -1
  56. package/dist/hooks/use-event-listener.svelte.js +3 -1
  57. package/dist/hooks/use-focus-ring.svelte.js +1 -1
  58. package/dist/hooks/use-inert-others.svelte.js +10 -10
  59. package/dist/hooks/use-is-top-layer.svelte.js +2 -2
  60. package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
  61. package/dist/hooks/use-root-containers.svelte.d.ts +2 -2
  62. package/dist/hooks/use-root-containers.svelte.js +5 -5
  63. package/dist/hooks/use-tab-direction.svelte.js +1 -1
  64. package/dist/hooks/use-transition.svelte.js +29 -4
  65. package/dist/index.d.ts +6 -2
  66. package/dist/index.js +6 -2
  67. package/dist/input/Input.svelte +28 -21
  68. package/dist/input/Input.svelte.d.ts +16 -33
  69. package/dist/input/index.d.ts +1 -1
  70. package/dist/input/index.js +1 -1
  71. package/dist/internal/FloatingProvider.svelte +17 -0
  72. package/dist/internal/FloatingProvider.svelte.d.ts +8 -0
  73. package/dist/internal/FocusSentinel.svelte +33 -32
  74. package/dist/internal/FocusSentinel.svelte.d.ts +4 -18
  75. package/dist/internal/ForcePortalRoot.svelte.d.ts +4 -18
  76. package/dist/internal/FormFields.svelte +18 -13
  77. package/dist/internal/FormFields.svelte.d.ts +4 -18
  78. package/dist/internal/FormFieldsProvider.svelte +17 -0
  79. package/dist/internal/FormFieldsProvider.svelte.d.ts +7 -0
  80. package/dist/internal/FormResolver.svelte +6 -2
  81. package/dist/internal/FormResolver.svelte.d.ts +4 -18
  82. package/dist/internal/Hidden.svelte +10 -10
  83. package/dist/internal/Hidden.svelte.d.ts +6 -33
  84. package/dist/internal/MainTreeProvider.svelte +1 -1
  85. package/dist/internal/MainTreeProvider.svelte.d.ts +4 -18
  86. package/dist/internal/Portal.svelte.d.ts +4 -18
  87. package/dist/internal/floating-provider.svelte.d.ts +3 -0
  88. package/dist/internal/floating-provider.svelte.js +206 -0
  89. package/dist/internal/floating.svelte.d.ts +46 -22
  90. package/dist/internal/floating.svelte.js +90 -272
  91. package/dist/internal/form-fields.svelte.d.ts +10 -0
  92. package/dist/internal/form-fields.svelte.js +23 -0
  93. package/dist/internal/frozen.svelte.js +1 -1
  94. package/dist/label/Label.svelte +17 -13
  95. package/dist/label/Label.svelte.d.ts +8 -33
  96. package/dist/label/context.svelte.js +1 -1
  97. package/dist/label/index.d.ts +1 -1
  98. package/dist/legend/Legend.svelte +22 -15
  99. package/dist/legend/Legend.svelte.d.ts +10 -34
  100. package/dist/listbox/Listbox.svelte +79 -151
  101. package/dist/listbox/Listbox.svelte.d.ts +16 -91
  102. package/dist/listbox/ListboxButton.svelte +31 -29
  103. package/dist/listbox/ListboxButton.svelte.d.ts +8 -38
  104. package/dist/listbox/ListboxOption.svelte +40 -27
  105. package/dist/listbox/ListboxOption.svelte.d.ts +16 -32
  106. package/dist/listbox/ListboxOptions.svelte +126 -72
  107. package/dist/listbox/ListboxOptions.svelte.d.ts +8 -43
  108. package/dist/listbox/ListboxSelectedOption.svelte +24 -26
  109. package/dist/listbox/ListboxSelectedOption.svelte.d.ts +14 -39
  110. package/dist/listbox/context.svelte.d.ts +76 -0
  111. package/dist/listbox/context.svelte.js +36 -0
  112. package/dist/listbox/index.d.ts +5 -5
  113. package/dist/listbox/index.js +4 -4
  114. package/dist/menu/Menu.svelte +22 -266
  115. package/dist/menu/Menu.svelte.d.ts +7 -37
  116. package/dist/menu/MenuButton.svelte +29 -24
  117. package/dist/menu/MenuButton.svelte.d.ts +8 -39
  118. package/dist/menu/MenuHeading.svelte +12 -16
  119. package/dist/menu/MenuHeading.svelte.d.ts +7 -36
  120. package/dist/menu/MenuItem.svelte +18 -23
  121. package/dist/menu/MenuItem.svelte.d.ts +9 -39
  122. package/dist/menu/MenuItems.svelte +33 -34
  123. package/dist/menu/MenuItems.svelte.d.ts +8 -43
  124. package/dist/menu/MenuSection.svelte +9 -12
  125. package/dist/menu/MenuSection.svelte.d.ts +7 -33
  126. package/dist/menu/MenuSeparator.svelte +9 -12
  127. package/dist/menu/MenuSeparator.svelte.d.ts +7 -33
  128. package/dist/menu/context.svelte.d.ts +2 -1
  129. package/dist/menu/context.svelte.js +212 -2
  130. package/dist/menu/index.d.ts +7 -7
  131. package/dist/menu/index.js +3 -3
  132. package/dist/popover/Popover.svelte +228 -0
  133. package/dist/popover/Popover.svelte.d.ts +15 -0
  134. package/dist/popover/PopoverBackdrop.svelte +83 -0
  135. package/dist/popover/PopoverBackdrop.svelte.d.ts +17 -0
  136. package/dist/popover/PopoverButton.svelte +324 -0
  137. package/dist/popover/PopoverButton.svelte.d.ts +21 -0
  138. package/dist/popover/PopoverGroup.svelte +66 -0
  139. package/dist/popover/PopoverGroup.svelte.d.ts +9 -0
  140. package/dist/popover/PopoverPanel.svelte +359 -0
  141. package/dist/popover/PopoverPanel.svelte.d.ts +22 -0
  142. package/dist/popover/context.svelte.d.ts +51 -0
  143. package/dist/popover/context.svelte.js +108 -0
  144. package/dist/popover/index.d.ts +5 -0
  145. package/dist/popover/index.js +5 -0
  146. package/dist/portal/InternalPortal.svelte +17 -17
  147. package/dist/portal/InternalPortal.svelte.d.ts +6 -33
  148. package/dist/portal/Portal.svelte +7 -6
  149. package/dist/portal/Portal.svelte.d.ts +3 -22
  150. package/dist/portal/PortalGroup.svelte +6 -14
  151. package/dist/portal/PortalGroup.svelte.d.ts +5 -34
  152. package/dist/radio-group/Radio.svelte +142 -0
  153. package/dist/radio-group/Radio.svelte.d.ts +35 -0
  154. package/dist/radio-group/RadioGroup.svelte +222 -0
  155. package/dist/radio-group/RadioGroup.svelte.d.ts +34 -0
  156. package/dist/radio-group/RadioOption.svelte +145 -0
  157. package/dist/radio-group/RadioOption.svelte.d.ts +37 -0
  158. package/dist/radio-group/contest.svelte.d.ts +30 -0
  159. package/dist/radio-group/contest.svelte.js +40 -0
  160. package/dist/radio-group/index.d.ts +3 -0
  161. package/dist/radio-group/index.js +3 -0
  162. package/dist/select/Select.svelte +112 -0
  163. package/dist/select/Select.svelte.d.ts +21 -0
  164. package/dist/select/index.d.ts +1 -0
  165. package/dist/select/index.js +1 -0
  166. package/dist/switch/Switch.svelte +27 -28
  167. package/dist/switch/Switch.svelte.d.ts +9 -42
  168. package/dist/switch/SwitchGroup.svelte +5 -5
  169. package/dist/switch/SwitchGroup.svelte.d.ts +8 -30
  170. package/dist/switch/index.d.ts +1 -1
  171. package/dist/switch/index.js +1 -1
  172. package/dist/tabs/Tab.svelte +28 -31
  173. package/dist/tabs/Tab.svelte.d.ts +8 -36
  174. package/dist/tabs/TabGroup.svelte +42 -264
  175. package/dist/tabs/TabGroup.svelte.d.ts +7 -57
  176. package/dist/tabs/TabList.svelte +13 -16
  177. package/dist/tabs/TabList.svelte.d.ts +8 -31
  178. package/dist/tabs/TabPanel.svelte +20 -20
  179. package/dist/tabs/TabPanel.svelte.d.ts +8 -38
  180. package/dist/tabs/TabPanels.svelte +11 -9
  181. package/dist/tabs/TabPanels.svelte.d.ts +8 -30
  182. package/dist/tabs/context.svelte.d.ts +31 -0
  183. package/dist/tabs/context.svelte.js +134 -0
  184. package/dist/tabs/index.d.ts +5 -5
  185. package/dist/tabs/index.js +4 -4
  186. package/dist/textarea/Textarea.svelte +24 -20
  187. package/dist/textarea/Textarea.svelte.d.ts +18 -30
  188. package/dist/textarea/index.d.ts +1 -1
  189. package/dist/textarea/index.js +1 -1
  190. package/dist/transition/InternalTransitionChild.svelte +36 -22
  191. package/dist/transition/InternalTransitionChild.svelte.d.ts +6 -37
  192. package/dist/transition/Transition.svelte +16 -17
  193. package/dist/transition/Transition.svelte.d.ts +8 -38
  194. package/dist/transition/TransitionChild.svelte +13 -12
  195. package/dist/transition/TransitionChild.svelte.d.ts +11 -38
  196. package/dist/transition/context.svelte.js +11 -11
  197. package/dist/transition/index.d.ts +2 -2
  198. package/dist/transition/index.js +2 -2
  199. package/dist/utils/DisabledProvider.svelte +10 -0
  200. package/dist/utils/DisabledProvider.svelte.d.ts +8 -0
  201. package/dist/utils/ElementOrComponent.svelte +58 -17
  202. package/dist/utils/ElementOrComponent.svelte.d.ts +19 -30
  203. package/dist/utils/StableCollection.svelte.d.ts +4 -18
  204. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +32 -0
  205. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts +8 -0
  206. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +94 -0
  207. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +26 -0
  208. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.d.ts +6 -0
  209. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +158 -0
  210. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.d.ts +11 -0
  211. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +53 -0
  212. package/dist/utils/floating-ui/svelte/hooks/useId.svelte.d.ts +9 -0
  213. package/dist/utils/floating-ui/svelte/hooks/useId.svelte.js +28 -0
  214. package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.d.ts +23 -0
  215. package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.js +72 -0
  216. package/dist/utils/floating-ui/svelte/index.d.ts +5 -0
  217. package/dist/utils/floating-ui/svelte/index.js +5 -0
  218. package/dist/utils/floating-ui/svelte/inner.svelte.d.ts +83 -0
  219. package/dist/utils/floating-ui/svelte/inner.svelte.js +178 -0
  220. package/dist/utils/floating-ui/svelte/types.d.ts +114 -0
  221. package/dist/utils/floating-ui/svelte/utils/createPubSub.d.ts +5 -0
  222. package/dist/utils/floating-ui/svelte/utils/createPubSub.js +14 -0
  223. package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.d.ts +2 -0
  224. package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.js +13 -0
  225. package/dist/utils/floating-ui/svelte/utils/log.d.ts +2 -0
  226. package/dist/utils/floating-ui/svelte/utils/log.js +19 -0
  227. package/dist/utils/floating-ui/svelte/utils.d.ts +19 -0
  228. package/dist/utils/floating-ui/svelte/utils.js +136 -0
  229. package/dist/utils/floating-ui/svelte-dom/arrow.d.ts +22 -0
  230. package/dist/utils/floating-ui/svelte-dom/arrow.js +29 -0
  231. package/dist/utils/floating-ui/svelte-dom/index.d.ts +2 -0
  232. package/dist/utils/floating-ui/svelte-dom/index.js +2 -0
  233. package/dist/utils/floating-ui/svelte-dom/types.d.ts +80 -0
  234. package/dist/utils/floating-ui/svelte-dom/types.js +3 -0
  235. package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts +6 -0
  236. package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js +183 -0
  237. package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts +1 -0
  238. package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js +50 -0
  239. package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts +1 -0
  240. package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js +7 -0
  241. package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts +1 -0
  242. package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js +5 -0
  243. package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts +4 -0
  244. package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js +7 -0
  245. package/dist/utils/id.d.ts +1 -1
  246. package/dist/utils/id.js +1 -1
  247. package/dist/utils/index.d.ts +3 -0
  248. package/dist/utils/index.js +3 -0
  249. package/dist/utils/state.js +4 -4
  250. package/dist/utils/style.d.ts +2 -0
  251. package/dist/utils/style.js +6 -0
  252. package/dist/utils/types.d.ts +13 -19
  253. package/package.json +54 -53
  254. package/dist/combobox/Combobox.svelte +0 -53
  255. package/dist/combobox/Combobox.svelte.d.ts +0 -50
  256. package/dist/dialog/InternalDialog.svelte +0 -294
  257. package/dist/dialog/InternalDialog.svelte.d.ts +0 -42
  258. package/dist/internal/HoistFormFields.svelte +0 -14
  259. package/dist/internal/HoistFormFields.svelte.d.ts +0 -21
  260. package/dist/internal/id.d.ts +0 -8
  261. package/dist/internal/id.js +0 -11
  262. package/dist/listbox/ListboxStates.d.ts +0 -12
  263. package/dist/listbox/ListboxStates.js +0 -15
  264. package/dist/utils/Generic.svelte +0 -56
  265. package/dist/utils/Generic.svelte.d.ts +0 -35
  266. package/dist/utils/alternative-types.d.ts +0 -21
  267. /package/dist/utils/{alternative-types.js → floating-ui/svelte/types.js} +0 -0
@@ -0,0 +1,145 @@
1
+ <script lang="ts" module>
2
+ import type { Props } from "../utils/types.js"
3
+
4
+ const DEFAULT_OPTION_TAG = "div" as const
5
+
6
+ export type RadioOptionRenderPropArg = {
7
+ checked: boolean
8
+ /** @deprecated use `focus` instead */
9
+ active: boolean
10
+ hover: boolean
11
+ focus: boolean
12
+ autofocus: boolean
13
+ disabled: boolean
14
+ }
15
+
16
+ export type RadioOptionOwnProps<TType> = {
17
+ element?: HTMLElement
18
+ value: TType
19
+ disabled?: boolean
20
+ autofocus?: boolean
21
+ }
22
+
23
+ export type RadioOptionProps<TType> = Props<
24
+ typeof DEFAULT_OPTION_TAG,
25
+ RadioOptionRenderPropArg,
26
+ RadioOptionOwnProps<TType>
27
+ >
28
+ </script>
29
+
30
+ <script lang="ts" generics="TType = ComponentProps<typeof RadioGroup>['value']">
31
+ import { default as RadioGroup } from "./RadioGroup.svelte"
32
+ import { useActions, useData } from "./contest.svelte.js"
33
+ import { useId } from "../hooks/use-id.js"
34
+ import { useLabels } from "../label/context.svelte.js"
35
+ import { useDescriptions } from "../description/context.svelte.js"
36
+ import { onMount, type ComponentProps } from "svelte"
37
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte"
38
+ import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
39
+ import { useHover } from "../hooks/use-hover.svelte.js"
40
+ import { mergeProps } from "../utils/render.js"
41
+
42
+ const data = useData("RadioOption")
43
+ const actions = useActions<TType>("RadioOption")
44
+
45
+ const internalId = useId()
46
+ let {
47
+ element = $bindable(),
48
+ id: theirId,
49
+ value,
50
+ disabled: theirDisabled = false,
51
+ autofocus = false,
52
+ ...theirProps
53
+ }: RadioOptionProps<TType> = $props()
54
+ const id = $derived(theirId || `headlessui-radiogroup-option-${internalId}`)
55
+ const disabled = $derived(data.disabled || theirDisabled)
56
+
57
+ const labelledby = useLabels()
58
+ const describedby = useDescriptions()
59
+
60
+ const propsRef = {
61
+ get value() {
62
+ return value
63
+ },
64
+ get disabled() {
65
+ return disabled
66
+ },
67
+ }
68
+
69
+ onMount(() => {
70
+ return actions.registerOption({
71
+ id,
72
+ get element() {
73
+ return element
74
+ },
75
+ get propsRef() {
76
+ return propsRef
77
+ },
78
+ })
79
+ })
80
+
81
+ const handleClick = (event: MouseEvent) => {
82
+ //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
83
+ if (!actions.change(value)) return
84
+ element?.focus()
85
+ }
86
+
87
+ const isFirstOption = $derived(data.firstOption?.id === id)
88
+
89
+ const { isFocusVisible: focus, focusProps } = $derived(
90
+ useFocusRing({
91
+ get autofocus() {
92
+ return autofocus
93
+ },
94
+ })
95
+ )
96
+ const { isHovered: hover, hoverProps } = $derived(
97
+ useHover({
98
+ get disabled() {
99
+ return disabled
100
+ },
101
+ })
102
+ )
103
+
104
+ const checked = $derived(data.compare(data.value as TType, value))
105
+ const ourProps = $derived(
106
+ mergeProps(
107
+ {
108
+ id,
109
+ role: "radio",
110
+ "aria-checked": checked ? "true" : "false",
111
+ "aria-labelledby": labelledby.value,
112
+ "aria-describedby": describedby.value,
113
+ "aria-disabled": disabled ? true : undefined,
114
+ tabIndex: (() => {
115
+ if (disabled) return -1
116
+ if (checked) return 0
117
+ if (!data.containsCheckedOption && isFirstOption) return 0
118
+ return -1
119
+ })(),
120
+ onclick: disabled ? undefined : handleClick,
121
+ autofocus,
122
+ },
123
+ focusProps,
124
+ hoverProps
125
+ )
126
+ )
127
+
128
+ const slot = $derived({
129
+ checked,
130
+ disabled,
131
+ active: focus,
132
+ hover,
133
+ focus,
134
+ autofocus,
135
+ } satisfies RadioOptionRenderPropArg)
136
+ </script>
137
+
138
+ <ElementOrComponent
139
+ {ourProps}
140
+ {theirProps}
141
+ slots={slot}
142
+ defaultTag={DEFAULT_OPTION_TAG}
143
+ bind:element
144
+ name="RadioOption"
145
+ />
@@ -0,0 +1,37 @@
1
+ import type { Props } from "../utils/types.js";
2
+ declare const DEFAULT_OPTION_TAG: "div";
3
+ export type RadioOptionRenderPropArg = {
4
+ checked: boolean;
5
+ /** @deprecated use `focus` instead */
6
+ active: boolean;
7
+ hover: boolean;
8
+ focus: boolean;
9
+ autofocus: boolean;
10
+ disabled: boolean;
11
+ };
12
+ export type RadioOptionOwnProps<TType> = {
13
+ element?: HTMLElement;
14
+ value: TType;
15
+ disabled?: boolean;
16
+ autofocus?: boolean;
17
+ };
18
+ export type RadioOptionProps<TType> = Props<typeof DEFAULT_OPTION_TAG, RadioOptionRenderPropArg, RadioOptionOwnProps<TType>>;
19
+ import { default as RadioGroup } from "./RadioGroup.svelte";
20
+ import { type ComponentProps } from "svelte";
21
+ declare class __sveltets_Render<TType = ComponentProps<typeof RadioGroup>['value']> {
22
+ props(): RadioOptionProps<TType>;
23
+ events(): {};
24
+ slots(): {};
25
+ bindings(): "element";
26
+ exports(): {};
27
+ }
28
+ interface $$IsomorphicComponent {
29
+ 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']>> & {
30
+ $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
31
+ } & ReturnType<__sveltets_Render<TType>['exports']>;
32
+ <TType = ComponentProps<typeof RadioGroup>['value']>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
33
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
34
+ }
35
+ declare const RadioOption: $$IsomorphicComponent;
36
+ type RadioOption<TType = ComponentProps<typeof RadioGroup>['value']> = InstanceType<typeof RadioOption<TType>>;
37
+ export default RadioOption;
@@ -0,0 +1,30 @@
1
+ interface Option<T = unknown> {
2
+ id: string;
3
+ element?: HTMLElement;
4
+ propsRef: {
5
+ value: T;
6
+ disabled: boolean;
7
+ };
8
+ }
9
+ export interface StateDefinition<T = unknown> {
10
+ options: Option<T>[];
11
+ }
12
+ export type RadioGroupDataContext = {
13
+ value: unknown;
14
+ firstOption?: Option;
15
+ containsCheckedOption: boolean;
16
+ disabled: boolean;
17
+ compare(a: unknown, z: unknown): boolean;
18
+ } & StateDefinition;
19
+ export declare function useData(component: string): RadioGroupDataContext;
20
+ export type RadioGroupActionsContext<T> = {
21
+ registerOption(option: Option<T>): () => void;
22
+ change(value: T): boolean;
23
+ };
24
+ export declare function useActions<T>(component: string): RadioGroupActionsContext<T>;
25
+ export declare function createState<T>(): {
26
+ readonly options: Option<T>[];
27
+ registerOption(option: Option<T>): void;
28
+ unregisterOption(id: string): void;
29
+ };
30
+ export {};
@@ -0,0 +1,40 @@
1
+ import { sortByDomNode } from "../utils/focus-management.js";
2
+ import { getContext } from "svelte";
3
+ export function useData(component) {
4
+ const context = getContext("RadioGroupDataContext");
5
+ if (!context) {
6
+ const err = new Error(`<${component} /> is missing a parent <RadioGroup /> component.`);
7
+ if (Error.captureStackTrace)
8
+ Error.captureStackTrace(err, useData);
9
+ throw err;
10
+ }
11
+ return context;
12
+ }
13
+ export function useActions(component) {
14
+ const context = getContext("RadioGroupActionsContext");
15
+ if (!context) {
16
+ const err = new Error(`<${component} /> is missing a parent <RadioGroup /> component.`);
17
+ if (Error.captureStackTrace)
18
+ Error.captureStackTrace(err, useActions);
19
+ throw err;
20
+ }
21
+ return context;
22
+ }
23
+ export function createState() {
24
+ let options = $state([]);
25
+ return {
26
+ get options() {
27
+ return options;
28
+ },
29
+ registerOption(option) {
30
+ const nextOptions = [...options, option];
31
+ options = sortByDomNode(nextOptions, (option) => option.element ?? null);
32
+ },
33
+ unregisterOption(id) {
34
+ let idx = options.findIndex((radio) => radio.id === id);
35
+ if (idx === -1)
36
+ return;
37
+ options.splice(idx, 1);
38
+ },
39
+ };
40
+ }
@@ -0,0 +1,3 @@
1
+ export { default as Radio, type RadioProps, type RadioRenderPropArg as RadioSlot, type RadioOwnProps, } from "./Radio.svelte";
2
+ export { default as RadioGroup, type RadioGroupProps, type RadioGroupRenderPropArg as RadioGroupSlot, type RadioGroupOwnProps, } from "./RadioGroup.svelte";
3
+ export { default as RadioOption, type RadioOptionProps, type RadioOptionRenderPropArg as RadioOptionSlot, type RadioOptionOwnProps, } from "./RadioOption.svelte";
@@ -0,0 +1,3 @@
1
+ export { default as Radio, } from "./Radio.svelte";
2
+ export { default as RadioGroup, } from "./RadioGroup.svelte";
3
+ export { default as RadioOption, } from "./RadioOption.svelte";
@@ -0,0 +1,112 @@
1
+ <script lang="ts" module>
2
+ import type { Props } from "../utils/types.js"
3
+
4
+ let DEFAULT_SELECT_TAG = "select" as const
5
+
6
+ export type SelectRenderPropArg = {
7
+ disabled: boolean
8
+ hover: boolean
9
+ focus: boolean
10
+ active: boolean
11
+ autofocus: boolean
12
+ invalid: boolean
13
+ }
14
+ type SelectPropsWeControl = "aria-labelledby" | "aria-describedby"
15
+
16
+ export type SelectOwnProps = {
17
+ element?: HTMLElement
18
+ id?: string
19
+ disabled?: boolean
20
+ invalid?: boolean
21
+ autofocus?: boolean
22
+ }
23
+
24
+ export type SelectProps = Props<typeof DEFAULT_SELECT_TAG, SelectRenderPropArg, SelectOwnProps>
25
+ </script>
26
+
27
+ <script lang="ts">
28
+ import { useId } from "../hooks/use-id.js"
29
+ import { useProvidedId } from "../utils/id.js"
30
+ import { useDisabled } from "../hooks/use-disabled.js"
31
+ import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
32
+ import { useHover } from "../hooks/use-hover.svelte.js"
33
+ import { useActivePress } from "../hooks/use-active-press.svelte.js"
34
+ import { useLabelledBy } from "../label/context.svelte.js"
35
+ import { useDescribedBy } from "../description/context.svelte.js"
36
+ import { mergeProps } from "../utils/render.js"
37
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte"
38
+
39
+ const internalId = useId()
40
+ const providedId = useProvidedId()
41
+ const providedDisabled = useDisabled()
42
+ let {
43
+ element = $bindable(),
44
+ id = providedId || `headlessui-select-${internalId}`,
45
+ disabled: theirDisabled = false,
46
+ invalid = false,
47
+ autofocus = false,
48
+ value = $bindable(),
49
+ ...theirProps
50
+ }: SelectProps = $props()
51
+
52
+ const disabled = $derived(providedDisabled.current ?? theirDisabled)
53
+ const labelledBy = useLabelledBy()
54
+ const describedBy = useDescribedBy()
55
+
56
+ const { isFocusVisible: focus, focusProps } = $derived(
57
+ useFocusRing({
58
+ get autofocus() {
59
+ return autofocus
60
+ },
61
+ })
62
+ )
63
+ const { isHovered: hover, hoverProps } = $derived(
64
+ useHover({
65
+ get disabled() {
66
+ return disabled
67
+ },
68
+ })
69
+ )
70
+ const { pressed: active, pressProps } = $derived(
71
+ useActivePress({
72
+ get disabled() {
73
+ return disabled
74
+ },
75
+ })
76
+ )
77
+
78
+ const ourProps = $derived(
79
+ mergeProps(
80
+ {
81
+ id,
82
+ "aria-labelledby": labelledBy.value,
83
+ "aria-describedby": describedBy.value,
84
+ "aria-invalid": invalid ? "" : undefined,
85
+ disabled: disabled || undefined,
86
+ autofocus,
87
+ },
88
+ focusProps,
89
+ hoverProps,
90
+ pressProps
91
+ )
92
+ )
93
+
94
+ const slot = $derived({
95
+ disabled,
96
+ invalid,
97
+ hover,
98
+ focus,
99
+ active,
100
+ autofocus,
101
+ } satisfies SelectRenderPropArg)
102
+ </script>
103
+
104
+ <ElementOrComponent
105
+ {ourProps}
106
+ {theirProps}
107
+ slots={slot}
108
+ defaultTag={DEFAULT_SELECT_TAG}
109
+ name="Select"
110
+ bind:element
111
+ bind:value
112
+ />
@@ -0,0 +1,21 @@
1
+ import type { Props } from "../utils/types.js";
2
+ declare let DEFAULT_SELECT_TAG: "select";
3
+ export type SelectRenderPropArg = {
4
+ disabled: boolean;
5
+ hover: boolean;
6
+ focus: boolean;
7
+ active: boolean;
8
+ autofocus: boolean;
9
+ invalid: boolean;
10
+ };
11
+ export type SelectOwnProps = {
12
+ element?: HTMLElement;
13
+ id?: string;
14
+ disabled?: boolean;
15
+ invalid?: boolean;
16
+ autofocus?: boolean;
17
+ };
18
+ export type SelectProps = Props<typeof DEFAULT_SELECT_TAG, SelectRenderPropArg, SelectOwnProps>;
19
+ declare const Select: import("svelte").Component<SelectProps, {}, "element" | "value">;
20
+ type Select = ReturnType<typeof Select>;
21
+ export default Select;
@@ -0,0 +1 @@
1
+ export { default as Select, type SelectProps, type SelectRenderPropArg as SelectSlot, type SelectOwnProps, } from "./Select.svelte";
@@ -0,0 +1 @@
1
+ export { default as Select, } from "./Select.svelte";
@@ -1,8 +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
3
 
4
4
  const DEFAULT_SWITCH_TAG = "button" as const
5
- type SwitchRenderPropArg = {
5
+ export type SwitchRenderPropArg = {
6
6
  checked: boolean
7
7
  hover: boolean
8
8
  focus: boolean
@@ -13,28 +13,27 @@
13
13
  }
14
14
  type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role"
15
15
 
16
- export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<
17
- TTag,
18
- SwitchRenderPropArg,
19
- SwitchPropsWeControl,
20
- {
21
- checked?: boolean
22
- defaultChecked?: boolean
23
- onchange?(checked: boolean): void
24
- name?: string
25
- value?: string
26
- form?: string
27
- autofocus?: boolean
28
- disabled?: boolean
29
- tabIndex?: number
30
- }
31
- >
16
+ export type SwitchOwnProps = {
17
+ element?: HTMLElement
18
+ id?: string
19
+ checked?: boolean
20
+ defaultChecked?: boolean
21
+ onchange?(checked: boolean): void
22
+ name?: string
23
+ value?: string
24
+ form?: string
25
+ autofocus?: boolean
26
+ disabled?: boolean
27
+ tabIndex?: number
28
+ }
29
+
30
+ export type SwitchProps = Props<typeof DEFAULT_SWITCH_TAG, SwitchRenderPropArg, SwitchOwnProps>
32
31
  </script>
33
32
 
34
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">
33
+ <script lang="ts">
35
34
  import { useId } from "../hooks/use-id.js"
36
35
  import { useDisabled } from "../hooks/use-disabled.js"
37
- import { useProvidedId } from "../internal/id.js"
36
+ import { useProvidedId } from "../utils/id.js"
38
37
  import { getContext, tick } from "svelte"
39
38
  import type { GroupContext } from "./SwitchGroup.svelte"
40
39
  import { attemptSubmit } from "../utils/form.js"
@@ -53,8 +52,8 @@
53
52
  const providedId = useProvidedId()
54
53
  const providedDisabled = useDisabled()
55
54
  let {
56
- ref = $bindable(),
57
- id = (providedId || `headlessui-switch-${internalId}`) as PropsOf<TTag>["id"],
55
+ element = $bindable(),
56
+ id = providedId || `headlessui-switch-${internalId}`,
58
57
  disabled: theirDisabled = false,
59
58
  checked: controlledChecked = $bindable(),
60
59
  defaultChecked: _defaultChecked,
@@ -65,11 +64,11 @@
65
64
  autofocus = false,
66
65
  tabIndex,
67
66
  ...theirProps
68
- }: { as?: TTag } & SwitchProps<TTag> = $props()
69
- const disabled = $derived(providedDisabled?.value ?? theirDisabled)
67
+ }: SwitchProps = $props()
68
+ const disabled = $derived(theirDisabled || providedDisabled.current)
70
69
  const groupContext = getContext<GroupContext>("GroupContext")
71
70
  $effect(() => {
72
- if (groupContext) groupContext.switchElement = ref ?? null
71
+ if (groupContext) groupContext.switchElement = element ?? null
73
72
  })
74
73
 
75
74
  const defaultChecked = _defaultChecked
@@ -152,10 +151,10 @@
152
151
 
153
152
  const buttonType = useResolveButtonType({
154
153
  get props() {
155
- return { type: theirProps.type, as: theirProps.as }
154
+ return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_SWITCH_TAG }
156
155
  },
157
156
  get ref() {
158
- return { current: ref }
157
+ return { current: element }
159
158
  },
160
159
  })
161
160
 
@@ -197,4 +196,4 @@
197
196
  />
198
197
  {/if}
199
198
 
200
- <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:ref />
199
+ <ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:element />
@@ -1,6 +1,6 @@
1
- import type { ElementType, Props, PropsOf } from "../utils/types.js";
1
+ import type { Props } from "../utils/types.js";
2
2
  declare const DEFAULT_SWITCH_TAG: "button";
3
- type SwitchRenderPropArg = {
3
+ export type SwitchRenderPropArg = {
4
4
  checked: boolean;
5
5
  hover: boolean;
6
6
  focus: boolean;
@@ -9,8 +9,9 @@ type SwitchRenderPropArg = {
9
9
  changing: boolean;
10
10
  disabled: boolean;
11
11
  };
12
- type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role";
13
- export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, {
12
+ export type SwitchOwnProps = {
13
+ element?: HTMLElement;
14
+ id?: string;
14
15
  checked?: boolean;
15
16
  defaultChecked?: boolean;
16
17
  onchange?(checked: boolean): void;
@@ -20,42 +21,8 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
20
21
  autofocus?: boolean;
21
22
  disabled?: boolean;
22
23
  tabIndex?: number;
23
- }>;
24
- declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
25
- props(): {
26
- as?: TTag | undefined;
27
- } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
28
- children?: import("../utils/types.js").Children<SwitchRenderPropArg> | undefined;
29
- ref?: HTMLElement;
30
- } & (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) ? {
31
- class?: PropsOf<TTag>["class"] | ((bag: SwitchRenderPropArg) => string) | undefined;
32
- } : {}) & {
33
- checked?: boolean;
34
- defaultChecked?: boolean;
35
- onchange?(checked: boolean): void;
36
- name?: string;
37
- value?: string;
38
- form?: string;
39
- autofocus?: boolean;
40
- disabled?: boolean;
41
- tabIndex?: number;
42
- };
43
- events(): {} & {
44
- [evt: string]: CustomEvent<any>;
45
- };
46
- slots(): {};
47
- bindings(): "ref" | "checked";
48
- exports(): {};
49
- }
50
- interface $$IsomorphicComponent {
51
- new <TTag extends ElementType = typeof DEFAULT_SWITCH_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']>> & {
52
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
53
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
54
- <TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
55
- $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
56
- }): ReturnType<__sveltets_Render<TTag>['exports']>;
57
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
58
- }
59
- declare const Switch: $$IsomorphicComponent;
60
- type Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = InstanceType<typeof Switch<TTag>>;
24
+ };
25
+ export type SwitchProps = Props<typeof DEFAULT_SWITCH_TAG, SwitchRenderPropArg, SwitchOwnProps>;
26
+ declare const Switch: import("svelte").Component<SwitchProps, {}, "element" | "checked">;
27
+ type Switch = ReturnType<typeof Switch>;
61
28
  export default Switch;
@@ -1,16 +1,16 @@
1
1
  <script lang="ts" module>
2
- import type { ElementType, Props } from "../utils/types.js"
2
+ import type { PropsAsChild } from "../utils/types.js"
3
3
 
4
4
  const DEFAULT_GROUP_TAG = "svelte:fragment"
5
5
 
6
- export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>
6
+ export type SwitchGroupProps = PropsAsChild
7
7
 
8
8
  export type GroupContext = {
9
9
  switchElement: HTMLElement | null
10
10
  }
11
11
  </script>
12
12
 
13
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
13
+ <script lang="ts">
14
14
  import { setContext } from "svelte"
15
15
  import { useLabels } from "../label/context.svelte.js"
16
16
  import { useDescriptions } from "../description/context.svelte.js"
@@ -44,7 +44,7 @@
44
44
  },
45
45
  })
46
46
 
47
- let { ref = $bindable(), ...theirProps }: { as?: TTag } & SwitchGroupProps<TTag> = $props()
47
+ let { ...theirProps }: SwitchGroupProps = $props()
48
48
  </script>
49
49
 
50
- <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />
50
+ <ElementOrComponent {theirProps} name="SwitchGroup" />
@@ -1,34 +1,12 @@
1
- import type { ElementType, Props } from "../utils/types.js";
2
- declare const DEFAULT_GROUP_TAG = "svelte:fragment";
3
- export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>;
1
+ import type { PropsAsChild } from "../utils/types.js";
2
+ export type SwitchGroupProps = PropsAsChild;
4
3
  export type GroupContext = {
5
4
  switchElement: HTMLElement | null;
6
5
  };
7
- declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
8
- props(): {
9
- as?: TTag | undefined;
10
- } & (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) & {
11
- children?: import("../utils/types.js").Children<{}> | undefined;
12
- ref?: HTMLElement;
13
- } & (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) ? {
14
- class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: {}) => string) | undefined;
15
- } : {});
16
- events(): {} & {
17
- [evt: string]: CustomEvent<any>;
18
- };
19
- slots(): {};
20
- bindings(): "ref";
21
- exports(): {};
22
- }
23
- interface $$IsomorphicComponent {
24
- new <TTag extends ElementType = typeof DEFAULT_GROUP_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']>> & {
25
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
26
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
27
- <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
28
- $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
29
- }): ReturnType<__sveltets_Render<TTag>['exports']>;
30
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
31
- }
32
- declare const SwitchGroup: $$IsomorphicComponent;
33
- type SwitchGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof SwitchGroup<TTag>>;
6
+ declare const SwitchGroup: import("svelte").Component<{
7
+ children?: import("svelte").Snippet<[{
8
+ props?: Record<string, any>;
9
+ }]> | undefined;
10
+ }, {}, "">;
11
+ type SwitchGroup = ReturnType<typeof SwitchGroup>;
34
12
  export default SwitchGroup;
@@ -1,2 +1,2 @@
1
- export { default as Switch, type SwitchProps } from "./Switch.svelte";
1
+ export { default as Switch, type SwitchProps, type SwitchRenderPropArg as SwitchSlot, type SwitchOwnProps, } from "./Switch.svelte";
2
2
  export { default as SwitchGroup, type SwitchGroupProps } from "./SwitchGroup.svelte";
@@ -1,2 +1,2 @@
1
- export { default as Switch } from "./Switch.svelte";
1
+ export { default as Switch, } from "./Switch.svelte";
2
2
  export { default as SwitchGroup } from "./SwitchGroup.svelte";