@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.
- package/dist/button/Button.svelte +8 -9
- package/dist/button/Button.svelte.d.ts +4 -31
- package/dist/checkbox/Checkbox.svelte +14 -11
- package/dist/checkbox/Checkbox.svelte.d.ts +14 -31
- package/dist/close-button/CloseButton.svelte +4 -7
- package/dist/close-button/CloseButton.svelte.d.ts +2 -43
- package/dist/data-interactive/DataInteractive.svelte +5 -19
- package/dist/data-interactive/DataInteractive.svelte.d.ts +7 -29
- package/dist/description/Description.svelte +15 -12
- package/dist/description/Description.svelte.d.ts +7 -27
- package/dist/dialog/Dialog.svelte +34 -32
- package/dist/dialog/Dialog.svelte.d.ts +4 -41
- package/dist/dialog/DialogBackdrop.svelte +10 -10
- package/dist/dialog/DialogBackdrop.svelte.d.ts +4 -28
- package/dist/dialog/DialogPanel.svelte +18 -10
- package/dist/dialog/DialogPanel.svelte.d.ts +4 -29
- package/dist/dialog/DialogTitle.svelte +19 -7
- package/dist/dialog/DialogTitle.svelte.d.ts +6 -26
- package/dist/field/Field.svelte +9 -15
- package/dist/field/Field.svelte.d.ts +4 -29
- package/dist/fieldset/Fieldset.svelte +10 -13
- package/dist/fieldset/Fieldset.svelte.d.ts +5 -30
- package/dist/focus-trap/FocusTrap.svelte +20 -24
- package/dist/focus-trap/FocusTrap.svelte.d.ts +5 -33
- package/dist/hooks/use-inert-others.svelte.js +10 -10
- package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
- package/dist/input/Input.svelte +19 -9
- package/dist/input/Input.svelte.d.ts +13 -26
- package/dist/internal/FocusSentinel.svelte +33 -32
- package/dist/internal/FormResolver.svelte +5 -1
- package/dist/internal/Hidden.svelte +9 -23
- package/dist/internal/Hidden.svelte.d.ts +4 -29
- package/dist/internal/MainTreeProvider.svelte +1 -1
- package/dist/label/Label.svelte +19 -13
- package/dist/label/Label.svelte.d.ts +7 -31
- package/dist/legend/Legend.svelte +20 -6
- package/dist/legend/Legend.svelte.d.ts +4 -3
- package/dist/listbox/Listbox.svelte +6 -17
- package/dist/listbox/Listbox.svelte.d.ts +11 -34
- package/dist/listbox/ListboxButton.svelte +14 -13
- package/dist/listbox/ListboxButton.svelte.d.ts +5 -31
- package/dist/listbox/ListboxOption.svelte +15 -15
- package/dist/listbox/ListboxOption.svelte.d.ts +12 -25
- package/dist/listbox/ListboxOptions.svelte +13 -11
- package/dist/listbox/ListboxOptions.svelte.d.ts +4 -37
- package/dist/listbox/ListboxSelectedOption.svelte +15 -17
- package/dist/listbox/ListboxSelectedOption.svelte.d.ts +8 -32
- package/dist/menu/Menu.svelte +5 -7
- package/dist/menu/Menu.svelte.d.ts +3 -30
- package/dist/menu/MenuButton.svelte +12 -12
- package/dist/menu/MenuButton.svelte.d.ts +4 -33
- package/dist/menu/MenuHeading.svelte +10 -9
- package/dist/menu/MenuHeading.svelte.d.ts +4 -30
- package/dist/menu/MenuItem.svelte +12 -12
- package/dist/menu/MenuItem.svelte.d.ts +5 -31
- package/dist/menu/MenuItems.svelte +12 -13
- package/dist/menu/MenuItems.svelte.d.ts +4 -37
- package/dist/menu/MenuSection.svelte +9 -8
- package/dist/menu/MenuSection.svelte.d.ts +5 -28
- package/dist/menu/MenuSeparator.svelte +9 -7
- package/dist/menu/MenuSeparator.svelte.d.ts +5 -27
- package/dist/popover/Popover.svelte +8 -8
- package/dist/popover/Popover.svelte.d.ts +4 -29
- package/dist/popover/PopoverBackdrop.svelte +15 -12
- package/dist/popover/PopoverBackdrop.svelte.d.ts +6 -33
- package/dist/popover/PopoverButton.svelte +34 -34
- package/dist/popover/PopoverButton.svelte.d.ts +6 -28
- package/dist/popover/PopoverGroup.svelte +14 -13
- package/dist/popover/PopoverGroup.svelte.d.ts +5 -27
- package/dist/popover/PopoverPanel.svelte +46 -41
- package/dist/popover/PopoverPanel.svelte.d.ts +5 -35
- package/dist/popover/index.d.ts +1 -1
- package/dist/portal/InternalPortal.svelte +17 -16
- package/dist/portal/InternalPortal.svelte.d.ts +4 -29
- package/dist/portal/Portal.svelte +7 -6
- package/dist/portal/Portal.svelte.d.ts +2 -18
- package/dist/portal/PortalGroup.svelte +5 -13
- package/dist/portal/PortalGroup.svelte.d.ts +3 -30
- package/dist/select/Select.svelte +10 -9
- package/dist/select/Select.svelte.d.ts +5 -31
- package/dist/switch/Switch.svelte +13 -12
- package/dist/switch/Switch.svelte.d.ts +5 -37
- package/dist/switch/SwitchGroup.svelte +5 -5
- package/dist/switch/SwitchGroup.svelte.d.ts +7 -27
- package/dist/tabs/Tab.svelte +12 -12
- package/dist/tabs/Tab.svelte.d.ts +4 -31
- package/dist/tabs/TabGroup.svelte +8 -8
- package/dist/tabs/TabGroup.svelte.d.ts +4 -33
- package/dist/tabs/TabList.svelte +7 -8
- package/dist/tabs/TabList.svelte.d.ts +5 -27
- package/dist/tabs/TabPanel.svelte +11 -11
- package/dist/tabs/TabPanel.svelte.d.ts +4 -33
- package/dist/tabs/TabPanels.svelte +5 -5
- package/dist/tabs/TabPanels.svelte.d.ts +5 -26
- package/dist/textarea/Textarea.svelte +12 -10
- package/dist/textarea/Textarea.svelte.d.ts +13 -26
- package/dist/transition/InternalTransitionChild.svelte +19 -12
- package/dist/transition/InternalTransitionChild.svelte.d.ts +3 -32
- package/dist/transition/Transition.svelte +12 -21
- package/dist/transition/Transition.svelte.d.ts +3 -35
- package/dist/transition/TransitionChild.svelte +9 -10
- package/dist/transition/TransitionChild.svelte.d.ts +8 -34
- package/dist/transition/context.svelte.js +7 -7
- package/dist/utils/ElementOrComponent.svelte +56 -15
- package/dist/utils/ElementOrComponent.svelte.d.ts +30 -23
- package/dist/utils/state.js +4 -4
- package/dist/utils/types.d.ts +12 -9
- package/package.json +12 -12
- package/dist/combobox/Combobox.svelte +0 -53
- package/dist/combobox/Combobox.svelte.d.ts +0 -50
- package/dist/utils/Generic.svelte +0 -57
- package/dist/utils/Generic.svelte.d.ts +0 -31
- package/dist/utils/alternative-types.d.ts +0 -20
- package/dist/utils/alternative-types.js +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import type { Props
|
|
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
|
|
16
|
-
|
|
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"
|
|
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
|
-
|
|
37
|
+
element = $bindable(),
|
|
39
38
|
disabled: ownDisabled = false,
|
|
40
39
|
autofocus = false,
|
|
41
40
|
type = "button",
|
|
42
41
|
...theirProps
|
|
43
|
-
}:
|
|
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:
|
|
90
|
+
<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Props
|
|
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
|
|
11
|
-
|
|
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
|
|
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 {
|
|
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<
|
|
24
|
-
|
|
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
|
|
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
|
-
|
|
63
|
-
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
|
-
}:
|
|
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:
|
|
200
|
+
bind:element
|
|
198
201
|
bind:value
|
|
199
202
|
/>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare
|
|
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
|
|
14
|
-
|
|
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
|
|
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(): "
|
|
30
|
+
bindings(): "element" | "checked";
|
|
48
31
|
exports(): {};
|
|
49
32
|
}
|
|
50
33
|
interface $$IsomorphicComponent {
|
|
51
|
-
new <TType
|
|
52
|
-
$$bindings?: ReturnType<__sveltets_Render<TType
|
|
53
|
-
} & ReturnType<__sveltets_Render<TType
|
|
54
|
-
<TType
|
|
55
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any
|
|
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
|
|
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
|
-
|
|
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"
|
|
8
|
+
<script lang="ts">
|
|
12
9
|
const closeContext = useClose()
|
|
13
10
|
const close = $derived(closeContext?.close)
|
|
14
|
-
let { ...props }:
|
|
11
|
+
let { element = $bindable(), ...props }: CloseButtonProps = $props()
|
|
15
12
|
</script>
|
|
16
13
|
|
|
17
|
-
<Button onclick={close}
|
|
14
|
+
<Button {...props} onclick={close} bind:element />
|
|
@@ -1,45 +1,4 @@
|
|
|
1
1
|
import { type ButtonProps } from "../button/Button.svelte";
|
|
2
|
-
|
|
3
|
-
declare
|
|
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 {
|
|
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
|
|
20
|
-
TTag,
|
|
21
|
-
DataInteractiveRenderPropArg,
|
|
22
|
-
DataInteractivePropsWeControl,
|
|
23
|
-
{}
|
|
24
|
-
>
|
|
17
|
+
export type DataInteractiveProps = PropsAsChild<DataInteractiveRenderPropArg>
|
|
25
18
|
</script>
|
|
26
19
|
|
|
27
|
-
<script lang="ts"
|
|
28
|
-
let {
|
|
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 {
|
|
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
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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 {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export type DescriptionProps
|
|
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"
|
|
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:
|
|
45
|
+
bind:element
|
|
43
46
|
/>
|
|
@@ -1,28 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare
|
|
3
|
-
export type DescriptionProps
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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;
|