@pzerelles/headlessui-svelte 2.1.2-next.31 → 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 (123) hide show
  1. package/dist/button/Button.svelte +84 -55
  2. package/dist/button/Button.svelte.d.ts +4 -32
  3. package/dist/checkbox/Checkbox.svelte +177 -121
  4. package/dist/checkbox/Checkbox.svelte.d.ts +14 -32
  5. package/dist/close-button/CloseButton.svelte +10 -7
  6. package/dist/close-button/CloseButton.svelte.d.ts +2 -44
  7. package/dist/data-interactive/DataInteractive.svelte +49 -37
  8. package/dist/data-interactive/DataInteractive.svelte.d.ts +7 -30
  9. package/dist/description/Description.svelte +35 -22
  10. package/dist/description/Description.svelte.d.ts +7 -28
  11. package/dist/dialog/Dialog.svelte +326 -232
  12. package/dist/dialog/Dialog.svelte.d.ts +4 -42
  13. package/dist/dialog/DialogBackdrop.svelte +33 -16
  14. package/dist/dialog/DialogBackdrop.svelte.d.ts +4 -29
  15. package/dist/dialog/DialogPanel.svelte +60 -29
  16. package/dist/dialog/DialogPanel.svelte.d.ts +4 -30
  17. package/dist/dialog/DialogTitle.svelte +51 -24
  18. package/dist/dialog/DialogTitle.svelte.d.ts +6 -27
  19. package/dist/field/Field.svelte +44 -28
  20. package/dist/field/Field.svelte.d.ts +4 -30
  21. package/dist/fieldset/Fieldset.svelte +48 -30
  22. package/dist/fieldset/Fieldset.svelte.d.ts +5 -31
  23. package/dist/focus-trap/FocusTrap.svelte +430 -298
  24. package/dist/focus-trap/FocusTrap.svelte.d.ts +5 -34
  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 +95 -54
  28. package/dist/input/Input.svelte.d.ts +13 -27
  29. package/dist/internal/FloatingProvider.svelte +14 -9
  30. package/dist/internal/FocusSentinel.svelte +49 -40
  31. package/dist/internal/ForcePortalRoot.svelte +7 -3
  32. package/dist/internal/FormFields.svelte +47 -34
  33. package/dist/internal/FormFieldsProvider.svelte +9 -5
  34. package/dist/internal/FormResolver.svelte +25 -16
  35. package/dist/internal/Hidden.svelte +45 -38
  36. package/dist/internal/Hidden.svelte.d.ts +4 -30
  37. package/dist/internal/MainTreeProvider.svelte +90 -37
  38. package/dist/internal/Portal.svelte +18 -14
  39. package/dist/label/Label.svelte +100 -59
  40. package/dist/label/Label.svelte.d.ts +7 -32
  41. package/dist/legend/Legend.svelte +27 -4
  42. package/dist/legend/Legend.svelte.d.ts +4 -3
  43. package/dist/listbox/Listbox.svelte +518 -391
  44. package/dist/listbox/Listbox.svelte.d.ts +11 -35
  45. package/dist/listbox/ListboxButton.svelte +175 -128
  46. package/dist/listbox/ListboxButton.svelte.d.ts +5 -32
  47. package/dist/listbox/ListboxOption.svelte +171 -130
  48. package/dist/listbox/ListboxOption.svelte.d.ts +12 -26
  49. package/dist/listbox/ListboxOptions.svelte +403 -305
  50. package/dist/listbox/ListboxOptions.svelte.d.ts +4 -38
  51. package/dist/listbox/ListboxSelectedOption.svelte +40 -19
  52. package/dist/listbox/ListboxSelectedOption.svelte.d.ts +8 -33
  53. package/dist/menu/Menu.svelte +76 -52
  54. package/dist/menu/Menu.svelte.d.ts +3 -31
  55. package/dist/menu/MenuButton.svelte +158 -118
  56. package/dist/menu/MenuButton.svelte.d.ts +4 -34
  57. package/dist/menu/MenuHeading.svelte +34 -15
  58. package/dist/menu/MenuHeading.svelte.d.ts +4 -31
  59. package/dist/menu/MenuItem.svelte +143 -108
  60. package/dist/menu/MenuItem.svelte.d.ts +5 -32
  61. package/dist/menu/MenuItems.svelte +301 -230
  62. package/dist/menu/MenuItems.svelte.d.ts +4 -38
  63. package/dist/menu/MenuSection.svelte +26 -10
  64. package/dist/menu/MenuSection.svelte.d.ts +5 -29
  65. package/dist/menu/MenuSeparator.svelte +20 -5
  66. package/dist/menu/MenuSeparator.svelte.d.ts +5 -28
  67. package/dist/popover/Popover.svelte +217 -151
  68. package/dist/popover/Popover.svelte.d.ts +4 -30
  69. package/dist/popover/PopoverBackdrop.svelte +71 -42
  70. package/dist/popover/PopoverBackdrop.svelte.d.ts +6 -34
  71. package/dist/popover/PopoverButton.svelte +302 -222
  72. package/dist/popover/PopoverButton.svelte.d.ts +6 -29
  73. package/dist/popover/PopoverGroup.svelte +64 -36
  74. package/dist/popover/PopoverGroup.svelte.d.ts +5 -28
  75. package/dist/popover/PopoverPanel.svelte +335 -248
  76. package/dist/popover/PopoverPanel.svelte.d.ts +5 -36
  77. package/dist/popover/index.d.ts +1 -1
  78. package/dist/portal/InternalPortal.svelte +143 -86
  79. package/dist/portal/InternalPortal.svelte.d.ts +4 -30
  80. package/dist/portal/Portal.svelte +8 -4
  81. package/dist/portal/Portal.svelte.d.ts +2 -18
  82. package/dist/portal/PortalGroup.svelte +23 -10
  83. package/dist/portal/PortalGroup.svelte.d.ts +3 -31
  84. package/dist/select/Select.svelte +100 -69
  85. package/dist/select/Select.svelte.d.ts +5 -32
  86. package/dist/switch/Switch.svelte +181 -133
  87. package/dist/switch/Switch.svelte.d.ts +5 -38
  88. package/dist/switch/SwitchGroup.svelte +45 -32
  89. package/dist/switch/SwitchGroup.svelte.d.ts +7 -28
  90. package/dist/tabs/Tab.svelte +195 -143
  91. package/dist/tabs/Tab.svelte.d.ts +4 -32
  92. package/dist/tabs/TabGroup.svelte +87 -57
  93. package/dist/tabs/TabGroup.svelte.d.ts +4 -34
  94. package/dist/tabs/TabList.svelte +31 -12
  95. package/dist/tabs/TabList.svelte.d.ts +5 -28
  96. package/dist/tabs/TabPanel.svelte +69 -44
  97. package/dist/tabs/TabPanel.svelte.d.ts +4 -34
  98. package/dist/tabs/TabPanels.svelte +19 -8
  99. package/dist/tabs/TabPanels.svelte.d.ts +5 -27
  100. package/dist/textarea/Textarea.svelte +87 -54
  101. package/dist/textarea/Textarea.svelte.d.ts +13 -27
  102. package/dist/transition/InternalTransitionChild.svelte +267 -171
  103. package/dist/transition/InternalTransitionChild.svelte.d.ts +3 -33
  104. package/dist/transition/Transition.svelte +88 -67
  105. package/dist/transition/Transition.svelte.d.ts +3 -36
  106. package/dist/transition/TransitionChild.svelte +31 -12
  107. package/dist/transition/TransitionChild.svelte.d.ts +8 -35
  108. package/dist/transition/context.svelte.js +7 -7
  109. package/dist/utils/DisabledProvider.svelte +7 -3
  110. package/dist/utils/ElementOrComponent.svelte +88 -24
  111. package/dist/utils/ElementOrComponent.svelte.d.ts +32 -27
  112. package/dist/utils/StableCollection.svelte +54 -36
  113. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +27 -12
  114. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +88 -44
  115. package/dist/utils/state.js +4 -4
  116. package/dist/utils/types.d.ts +14 -12
  117. package/package.json +12 -12
  118. package/dist/combobox/Combobox.svelte +0 -6
  119. package/dist/combobox/Combobox.svelte.d.ts +0 -50
  120. package/dist/utils/Generic.svelte +0 -46
  121. package/dist/utils/Generic.svelte.d.ts +0 -32
  122. package/dist/utils/alternative-types.d.ts +0 -20
  123. package/dist/utils/alternative-types.js +0 -1
@@ -1,61 +1,90 @@
1
- <script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
2
- </script>
1
+ <script lang="ts" module>
2
+ import type { Props } from "../utils/types.js"
3
3
 
4
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useActivePress } from "../hooks/use-active-press.svelte.js";
5
- import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
6
- import { useDisabled } from "../hooks/use-disabled.js";
7
- import { useHover } from "../hooks/use-hover.svelte.js";
8
- import { mergeProps } from "../utils/render.js";
9
- import ElementOrComponent from "../utils/ElementOrComponent.svelte";
10
- const providedDisabled = useDisabled();
11
- let {
12
- ref = $bindable(),
13
- disabled: ownDisabled = false,
14
- autofocus = false,
15
- type = "button",
16
- ...theirProps
17
- } = $props();
18
- const disabled = $derived(providedDisabled.current || ownDisabled);
19
- const { isHovered: hover, hoverProps } = $derived(
20
- useHover({
21
- get disabled() {
22
- return disabled;
23
- }
24
- })
25
- );
26
- const { pressed: active, pressProps } = $derived(
27
- useActivePress({
28
- get disabled() {
29
- return disabled;
30
- }
31
- })
32
- );
33
- const { isFocusVisible: focus, focusProps } = $derived(
34
- useFocusRing({
35
- get autofocus() {
36
- return autofocus;
4
+ const DEFAULT_BUTTON_TAG = "button" as const
5
+
6
+ type ButtonRenderPropArg = {
7
+ disabled: boolean
8
+ hover: boolean
9
+ focus: boolean
10
+ active: boolean
11
+ autofocus: boolean
12
+ }
13
+
14
+ export type ButtonProps = Props<
15
+ typeof DEFAULT_BUTTON_TAG,
16
+ ButtonRenderPropArg,
17
+ {
18
+ element?: HTMLElement
19
+ disabled?: boolean
20
+ autofocus?: boolean
21
+ type?: "button" | "submit" | "reset"
37
22
  }
23
+ >
24
+ </script>
25
+
26
+ <script lang="ts">
27
+ import { useActivePress } from "../hooks/use-active-press.svelte.js"
28
+ import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
29
+ import { useDisabled } from "../hooks/use-disabled.js"
30
+ import { useHover } from "../hooks/use-hover.svelte.js"
31
+ import { mergeProps } from "../utils/render.js"
32
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte"
33
+
34
+ const providedDisabled = useDisabled()
35
+
36
+ let {
37
+ element = $bindable(),
38
+ disabled: ownDisabled = false,
39
+ autofocus = false,
40
+ type = "button",
41
+ ...theirProps
42
+ }: ButtonProps = $props()
43
+
44
+ const disabled = $derived(providedDisabled.current || ownDisabled)
45
+
46
+ const { isHovered: hover, hoverProps } = $derived(
47
+ useHover({
48
+ get disabled() {
49
+ return disabled
50
+ },
51
+ })
52
+ )
53
+ const { pressed: active, pressProps } = $derived(
54
+ useActivePress({
55
+ get disabled() {
56
+ return disabled
57
+ },
58
+ })
59
+ )
60
+ const { isFocusVisible: focus, focusProps } = $derived(
61
+ useFocusRing({
62
+ get autofocus() {
63
+ return autofocus
64
+ },
65
+ })
66
+ )
67
+
68
+ const slot = $derived({
69
+ disabled,
70
+ hover,
71
+ focus,
72
+ active,
73
+ autofocus,
38
74
  })
39
- );
40
- const slot = $derived({
41
- disabled,
42
- hover,
43
- focus,
44
- active,
45
- autofocus
46
- });
47
- const ourProps = $derived(
48
- mergeProps(
49
- {
50
- type,
51
- disabled: disabled || void 0,
52
- autofocus
53
- },
54
- focusProps,
55
- hoverProps,
56
- pressProps
75
+
76
+ const ourProps = $derived(
77
+ mergeProps(
78
+ {
79
+ type,
80
+ disabled: disabled || undefined,
81
+ autofocus,
82
+ },
83
+ focusProps,
84
+ hoverProps,
85
+ pressProps
86
+ )
57
87
  )
58
- );
59
88
  </script>
60
89
 
61
- <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,39 +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<[{
21
- slot: ButtonRenderPropArg;
22
- props: Record<string, any>;
23
- }]> | undefined;
24
- class?: string | ((bag: ButtonRenderPropArg) => 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(): "ref";
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 Button: $$IsomorphicComponent;
44
- type Button<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof Button<TTag>>;
16
+ declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
45
17
  export default Button;
@@ -1,129 +1,184 @@
1
- <script lang="ts" module>let DEFAULT_CHECKBOX_TAG = "span";
1
+ <script lang="ts" module>
2
+ import type { Props } from "../utils/types.js"
3
+
4
+ const DEFAULT_CHECKBOX_TAG = "span" as const
5
+
6
+ type CheckboxRenderPropArg = {
7
+ checked: boolean
8
+ changing: boolean
9
+ focus: boolean
10
+ active: boolean
11
+ hover: boolean
12
+ autofocus: boolean
13
+ disabled: boolean
14
+ indeterminate: boolean
15
+ }
16
+
17
+ type CheckboxPropsWeControl =
18
+ | "aria-checked"
19
+ | "aria-describedby"
20
+ | "aria-disabled"
21
+ | "aria-labelledby"
22
+ | "role"
23
+ | "tabIndex"
24
+
25
+ export type CheckboxProps<TType = string> = Props<
26
+ typeof DEFAULT_CHECKBOX_TAG,
27
+ CheckboxRenderPropArg,
28
+ {
29
+ element?: HTMLElement
30
+ id?: string
31
+ value?: TType
32
+ disabled?: boolean
33
+ indeterminate?: boolean
34
+ checked?: boolean
35
+ defaultChecked?: boolean
36
+ autofocus?: boolean
37
+ form?: string
38
+ name?: string
39
+ onchange?: (checked: boolean) => void
40
+ }
41
+ >
2
42
  </script>
3
43
 
4
- <script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">import { tick } from "svelte";
5
- import { attemptSubmit } from "../utils/form.js";
6
- import { useProvidedId, htmlid } from "../utils/id.js";
7
- import { useActivePress } from "../hooks/use-active-press.svelte.js";
8
- import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
9
- import FormFields from "../internal/FormFields.svelte";
10
- import { useDisabled } from "../hooks/use-disabled.js";
11
- import { useLabelledBy } from "../label/context.svelte.js";
12
- import { useDescribedBy } from "../description/context.svelte.js";
13
- import { useHover } from "../hooks/use-hover.svelte.js";
14
- import { mergeProps } from "../utils/render.js";
15
- import ElementOrComponent from "../utils/ElementOrComponent.svelte";
16
- import { useControllable } from "../hooks/use-controllable.svelte.js";
17
- const internalId = htmlid();
18
- const providedId = useProvidedId();
19
- const providedDisabled = useDisabled();
20
- let {
21
- ref = $bindable(),
22
- id = providedId || `headlessui-checkbox-${internalId}`,
23
- disabled: theirDisabled = false,
24
- autofocus = false,
25
- checked: controlledChecked = $bindable(),
26
- defaultChecked: _defaultChecked,
27
- onchange: controlledOnChange,
28
- name,
29
- value,
30
- form,
31
- indeterminate = false,
32
- ...theirProps
33
- } = $props();
34
- const defaultChecked = _defaultChecked;
35
- const controllable = useControllable(
36
- {
37
- get controlledValue() {
38
- return controlledChecked;
44
+ <script lang="ts" generics="TType">
45
+ import { tick } from "svelte"
46
+ import { attemptSubmit } from "../utils/form.js"
47
+ import { useProvidedId, htmlid } from "../utils/id.js"
48
+ import { useActivePress } from "../hooks/use-active-press.svelte.js"
49
+ import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
50
+ import FormFields from "../internal/FormFields.svelte"
51
+ import { useDisabled } from "../hooks/use-disabled.js"
52
+ import { useLabelledBy } from "../label/context.svelte.js"
53
+ import { useDescribedBy } from "../description/context.svelte.js"
54
+ import { useHover } from "../hooks/use-hover.svelte.js"
55
+ import { mergeProps } from "../utils/render.js"
56
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte"
57
+ import { useControllable } from "../hooks/use-controllable.svelte.js"
58
+
59
+ const internalId = htmlid()
60
+ const providedId = useProvidedId()
61
+ const providedDisabled = useDisabled()
62
+
63
+ let {
64
+ element = $bindable(),
65
+ id = providedId || `headlessui-checkbox-${internalId}`,
66
+ disabled: theirDisabled = false,
67
+ autofocus = false,
68
+ checked: controlledChecked = $bindable(),
69
+ defaultChecked: _defaultChecked,
70
+ onchange: controlledOnChange,
71
+ name,
72
+ value,
73
+ form,
74
+ indeterminate = false,
75
+ ...theirProps
76
+ }: CheckboxProps<TType> = $props()
77
+
78
+ const defaultChecked = _defaultChecked
79
+ const controllable = useControllable(
80
+ {
81
+ get controlledValue() {
82
+ return controlledChecked
83
+ },
84
+ set controlledValue(checked) {
85
+ controlledChecked = checked
86
+ },
39
87
  },
40
- set controlledValue(checked2) {
41
- controlledChecked = checked2;
42
- }
43
- },
44
- controlledOnChange,
45
- defaultChecked ?? false
46
- );
47
- const { value: checked, onchange } = $derived(controllable);
48
- const disabled = $derived(providedDisabled.current || theirDisabled);
49
- const { isHovered: hover, hoverProps } = $derived(
50
- useHover({
51
- get disabled() {
52
- return disabled;
53
- }
54
- })
55
- );
56
- const { pressed: active, pressProps } = $derived(
57
- useActivePress({
58
- get disabled() {
59
- return disabled;
60
- }
61
- })
62
- );
63
- const { isFocusVisible: focus, focusProps } = $derived(
64
- useFocusRing({
65
- get autofocus() {
66
- return autofocus;
88
+ controlledOnChange,
89
+ defaultChecked ?? false
90
+ )
91
+ const { value: checked, onchange } = $derived(controllable)
92
+
93
+ const disabled = $derived(providedDisabled.current || theirDisabled)
94
+
95
+ const { isHovered: hover, hoverProps } = $derived(
96
+ useHover({
97
+ get disabled() {
98
+ return disabled
99
+ },
100
+ })
101
+ )
102
+ const { pressed: active, pressProps } = $derived(
103
+ useActivePress({
104
+ get disabled() {
105
+ return disabled
106
+ },
107
+ })
108
+ )
109
+ const { isFocusVisible: focus, focusProps } = $derived(
110
+ useFocusRing({
111
+ get autofocus() {
112
+ return autofocus
113
+ },
114
+ })
115
+ )
116
+
117
+ const labelledBy = useLabelledBy()
118
+ const describedBy = useDescribedBy()
119
+
120
+ let changing = $state(false)
121
+
122
+ const toggle = () => {
123
+ changing = true
124
+ onchange?.(!checked)
125
+ tick().then(() => {
126
+ changing = false
127
+ })
128
+ }
129
+
130
+ const handleClick = (event: MouseEvent) => {
131
+ if (disabled) return event.preventDefault()
132
+ event.preventDefault()
133
+ toggle()
134
+ }
135
+
136
+ const handleKeyUp = (event: KeyboardEvent) => {
137
+ if (event.key === " ") {
138
+ event.preventDefault()
139
+ toggle()
140
+ } else if (event.key === "Enter") {
141
+ if (event.currentTarget) attemptSubmit(event.currentTarget as HTMLElement)
67
142
  }
68
- })
69
- );
70
- const labelledBy = useLabelledBy();
71
- const describedBy = useDescribedBy();
72
- let changing = $state(false);
73
- const toggle = () => {
74
- changing = true;
75
- onchange?.(!checked);
76
- tick().then(() => {
77
- changing = false;
78
- });
79
- };
80
- const handleClick = (event) => {
81
- if (disabled) return event.preventDefault();
82
- event.preventDefault();
83
- toggle();
84
- };
85
- const handleKeyUp = (event) => {
86
- if (event.key === " ") {
87
- event.preventDefault();
88
- toggle();
89
- } else if (event.key === "Enter") {
90
- if (event.currentTarget) attemptSubmit(event.currentTarget);
91
143
  }
92
- };
93
- const handleKeyPress = (event) => event.preventDefault();
94
- const slot = $derived({
95
- checked,
96
- changing,
97
- focus,
98
- active,
99
- hover,
100
- autofocus: autofocus ?? false,
101
- disabled,
102
- indeterminate
103
- });
104
- const ourProps = $derived(
105
- mergeProps(
106
- {
107
- id,
108
- role: "checkbox",
109
- "aria-checked": indeterminate ? "mixed" : checked ? true : false,
110
- "aria-labelledby": labelledBy.value,
111
- "aria-describedby": describedBy.value,
112
- "aria-disabled": disabled ? true : void 0,
113
- tabindex: disabled ? void 0 : 0,
114
- onkeyup: disabled ? void 0 : handleKeyUp,
115
- onkeypress: disabled ? void 0 : handleKeyPress,
116
- onclick: disabled ? void 0 : handleClick
117
- },
118
- focusProps,
119
- hoverProps,
120
- pressProps
144
+
145
+ const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
146
+
147
+ const slot = $derived({
148
+ checked,
149
+ changing,
150
+ focus,
151
+ active,
152
+ hover,
153
+ autofocus: autofocus ?? false,
154
+ disabled,
155
+ indeterminate,
156
+ })
157
+
158
+ const ourProps = $derived(
159
+ mergeProps(
160
+ {
161
+ id,
162
+ role: "checkbox",
163
+ "aria-checked": indeterminate ? ("mixed" as "mixed") : checked ? true : false,
164
+ "aria-labelledby": labelledBy.value,
165
+ "aria-describedby": describedBy.value,
166
+ "aria-disabled": disabled ? true : undefined,
167
+ tabindex: disabled ? undefined : 0,
168
+ onkeyup: disabled ? undefined : handleKeyUp,
169
+ onkeypress: disabled ? undefined : handleKeyPress,
170
+ onclick: disabled ? undefined : handleClick,
171
+ },
172
+ focusProps,
173
+ hoverProps,
174
+ pressProps
175
+ )
121
176
  )
122
- );
123
- const reset = $derived(() => {
124
- if (defaultChecked === void 0) return;
125
- return onchange?.(defaultChecked);
126
- });
177
+
178
+ const reset = $derived(() => {
179
+ if (defaultChecked === undefined) return
180
+ return onchange?.(defaultChecked)
181
+ })
127
182
  </script>
128
183
 
129
184
  {#if name}
@@ -135,12 +190,13 @@ const reset = $derived(() => {
135
190
  onReset={reset}
136
191
  />
137
192
  {/if}
193
+
138
194
  <ElementOrComponent
139
195
  {ourProps}
140
196
  {theirProps}
141
197
  {slot}
142
198
  defaultTag={DEFAULT_CHECKBOX_TAG}
143
199
  name="Checkbox"
144
- bind:ref
200
+ bind:element
145
201
  bind:value
146
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,39 +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<[{
30
- slot: CheckboxRenderPropArg;
31
- props: Record<string, any>;
32
- }]> | undefined;
33
- class?: string | ((bag: CheckboxRenderPropArg) => string) | null | undefined;
34
- ref?: HTMLElement;
35
- } & {
36
- value?: TType | undefined;
37
- disabled?: boolean;
38
- indeterminate?: boolean;
39
- checked?: boolean;
40
- defaultChecked?: boolean;
41
- autofocus?: boolean;
42
- form?: string;
43
- name?: string;
44
- onchange?: (checked: boolean) => void;
45
- };
26
+ declare class __sveltets_Render<TType> {
27
+ props(): CheckboxProps<TType>;
46
28
  events(): {};
47
29
  slots(): {};
48
- bindings(): "ref" | "checked";
30
+ bindings(): "element" | "checked";
49
31
  exports(): {};
50
32
  }
51
33
  interface $$IsomorphicComponent {
52
- 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']>> & {
53
- $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
54
- } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
55
- <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TTag>['props']> & {}): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
56
- 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']>;
57
39
  }
58
40
  declare const Checkbox: $$IsomorphicComponent;
59
- type Checkbox<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> = InstanceType<typeof Checkbox<TType, TTag>>;
41
+ type Checkbox<TType> = InstanceType<typeof Checkbox<TType>>;
60
42
  export default Checkbox;
@@ -1,11 +1,14 @@
1
- <script lang="ts" module>import Button, {} from "../button/Button.svelte";
2
- import { useClose } from "../internal/close-provider.js";
3
- let DEFAULT_BUTTON_TAG = "button";
1
+ <script lang="ts" module>
2
+ import Button, { type ButtonProps } from "../button/Button.svelte"
3
+ import { useClose } from "../internal/close-provider.js"
4
+
5
+ export type CloseButtonProps = ButtonProps
4
6
  </script>
5
7
 
6
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const closeContext = useClose();
7
- const close = $derived(closeContext?.close);
8
- let { ...props } = $props();
8
+ <script lang="ts">
9
+ const closeContext = useClose()
10
+ const close = $derived(closeContext?.close)
11
+ let { element = $bindable(), ...props }: CloseButtonProps = $props()
9
12
  </script>
10
13
 
11
- <Button onclick={close} {...props} />
14
+ <Button {...props} onclick={close} bind:element />
@@ -1,46 +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
- slot: {
11
- disabled: boolean;
12
- hover: boolean;
13
- focus: boolean;
14
- active: boolean;
15
- autofocus: boolean;
16
- };
17
- props: Record<string, any>;
18
- }]> | undefined;
19
- class?: string | ((bag: {
20
- disabled: boolean;
21
- hover: boolean;
22
- focus: boolean;
23
- active: boolean;
24
- autofocus: boolean;
25
- }) => string) | null | undefined;
26
- ref?: HTMLElement;
27
- } & {
28
- disabled?: boolean;
29
- autofocus?: boolean;
30
- type?: "button" | "submit" | "reset";
31
- };
32
- events(): {};
33
- slots(): {};
34
- bindings(): "";
35
- exports(): {};
36
- }
37
- interface $$IsomorphicComponent {
38
- 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']>> & {
39
- $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
40
- } & ReturnType<__sveltets_Render<TTag>['exports']>;
41
- <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
42
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
43
- }
44
- declare const CloseButton: $$IsomorphicComponent;
45
- 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">;
46
4
  export default CloseButton;