lithesome 0.7.3 → 0.8.0

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 (117) hide show
  1. package/dist/components/Accordion/Accordion.svelte +8 -1
  2. package/dist/components/Accordion/Accordion.svelte.d.ts +5 -9
  3. package/dist/components/Accordion/AccordionButton.svelte.d.ts +5 -0
  4. package/dist/components/Accordion/AccordionContent.svelte +7 -14
  5. package/dist/components/Accordion/AccordionContent.svelte.d.ts +5 -14
  6. package/dist/components/Accordion/AccordionHeading.svelte.d.ts +5 -7
  7. package/dist/components/Accordion/AccordionItem.svelte +8 -1
  8. package/dist/components/Accordion/AccordionItem.svelte.d.ts +5 -10
  9. package/dist/components/Accordion/index.d.ts +1 -0
  10. package/dist/components/Accordion/types.d.ts +45 -0
  11. package/dist/components/Accordion/types.js +1 -0
  12. package/dist/components/Checkbox/index.d.ts +1 -0
  13. package/dist/components/Checkbox/types.d.ts +16 -0
  14. package/dist/components/Checkbox/types.js +1 -0
  15. package/dist/components/Combobox/Combobox.svelte.d.ts +4 -14
  16. package/dist/components/Combobox/ComboboxArrow.svelte.d.ts +5 -7
  17. package/dist/components/Combobox/ComboboxContent.svelte +21 -28
  18. package/dist/components/Combobox/ComboboxContent.svelte.d.ts +5 -7
  19. package/dist/components/Combobox/ComboboxInput.svelte +1 -6
  20. package/dist/components/Combobox/ComboboxInput.svelte.d.ts +5 -13
  21. package/dist/components/Combobox/ComboboxOption.svelte +1 -5
  22. package/dist/components/Combobox/ComboboxOption.svelte.d.ts +5 -15
  23. package/dist/components/Combobox/context.svelte.d.ts +2 -2
  24. package/dist/components/Combobox/context.svelte.js +2 -2
  25. package/dist/components/Combobox/index.d.ts +1 -0
  26. package/dist/components/Combobox/types.d.ts +53 -0
  27. package/dist/components/Combobox/types.js +1 -0
  28. package/dist/components/Hovercard/Hovercard.svelte.d.ts +5 -14
  29. package/dist/components/Hovercard/HovercardArrow.svelte.d.ts +5 -7
  30. package/dist/components/Hovercard/HovercardContent.svelte +26 -26
  31. package/dist/components/Hovercard/HovercardContent.svelte.d.ts +5 -10
  32. package/dist/components/Hovercard/HovercardTrigger.svelte +1 -8
  33. package/dist/components/Hovercard/HovercardTrigger.svelte.d.ts +5 -7
  34. package/dist/components/Hovercard/context.svelte.d.ts +2 -2
  35. package/dist/components/Hovercard/context.svelte.js +2 -2
  36. package/dist/components/Hovercard/index.d.ts +1 -0
  37. package/dist/components/Hovercard/types.d.ts +22 -0
  38. package/dist/components/Hovercard/types.js +1 -0
  39. package/dist/components/Menu/Menu.svelte.d.ts +5 -7
  40. package/dist/components/Menu/MenuArrow.svelte.d.ts +5 -7
  41. package/dist/components/Menu/MenuContent.svelte +18 -25
  42. package/dist/components/Menu/MenuContent.svelte.d.ts +5 -7
  43. package/dist/components/Menu/MenuItem.svelte.d.ts +5 -13
  44. package/dist/components/Menu/MenuTrigger.svelte +1 -3
  45. package/dist/components/Menu/MenuTrigger.svelte.d.ts +5 -10
  46. package/dist/components/Menu/context.svelte.d.ts +2 -2
  47. package/dist/components/Menu/context.svelte.js +2 -2
  48. package/dist/components/Menu/index.d.ts +1 -0
  49. package/dist/components/Menu/types.d.ts +34 -0
  50. package/dist/components/Menu/types.js +1 -0
  51. package/dist/components/Modal/Modal.svelte +1 -1
  52. package/dist/components/Modal/Modal.svelte.d.ts +5 -8
  53. package/dist/components/Modal/ModalContent.svelte +15 -15
  54. package/dist/components/Modal/ModalContent.svelte.d.ts +5 -12
  55. package/dist/components/Modal/ModalDescription.svelte.d.ts +5 -5
  56. package/dist/components/Modal/ModalOverlay.svelte +6 -17
  57. package/dist/components/Modal/ModalOverlay.svelte.d.ts +5 -12
  58. package/dist/components/Modal/ModalTitle.svelte.d.ts +5 -5
  59. package/dist/components/Modal/index.d.ts +1 -0
  60. package/dist/components/Modal/types.d.ts +28 -0
  61. package/dist/components/Modal/types.js +1 -0
  62. package/dist/components/Pin/Pin.svelte.d.ts +5 -14
  63. package/dist/components/Pin/PinInput.svelte +1 -7
  64. package/dist/components/Pin/PinInput.svelte.d.ts +5 -14
  65. package/dist/components/Pin/PinValue.svelte.d.ts +5 -12
  66. package/dist/components/Pin/index.d.ts +1 -0
  67. package/dist/components/Pin/types.d.ts +41 -0
  68. package/dist/components/Pin/types.js +1 -0
  69. package/dist/components/Popover/Popover.svelte +8 -1
  70. package/dist/components/Popover/Popover.svelte.d.ts +5 -9
  71. package/dist/components/Popover/PopoverArrow.svelte.d.ts +5 -7
  72. package/dist/components/Popover/PopoverContent.svelte +28 -28
  73. package/dist/components/Popover/PopoverContent.svelte.d.ts +5 -7
  74. package/dist/components/Popover/PopoverTrigger.svelte +1 -3
  75. package/dist/components/Popover/PopoverTrigger.svelte.d.ts +5 -10
  76. package/dist/components/Popover/context.svelte.d.ts +2 -2
  77. package/dist/components/Popover/context.svelte.js +2 -2
  78. package/dist/components/Popover/index.d.ts +1 -0
  79. package/dist/components/Popover/types.d.ts +16 -0
  80. package/dist/components/Popover/types.js +1 -0
  81. package/dist/components/RadioGroup/RadioGroup.svelte.d.ts +5 -8
  82. package/dist/components/RadioGroup/RadioGroupItem.svelte +1 -7
  83. package/dist/components/RadioGroup/RadioGroupItem.svelte.d.ts +5 -12
  84. package/dist/components/RadioGroup/index.d.ts +1 -0
  85. package/dist/components/RadioGroup/types.d.ts +20 -0
  86. package/dist/components/RadioGroup/types.js +1 -0
  87. package/dist/components/Select/Select.svelte.d.ts +4 -9
  88. package/dist/components/Select/SelectArrow.svelte.d.ts +5 -7
  89. package/dist/components/Select/SelectContent.svelte +18 -25
  90. package/dist/components/Select/SelectContent.svelte.d.ts +5 -7
  91. package/dist/components/Select/SelectOption.svelte +1 -5
  92. package/dist/components/Select/SelectOption.svelte.d.ts +5 -15
  93. package/dist/components/Select/SelectTrigger.svelte +1 -8
  94. package/dist/components/Select/SelectTrigger.svelte.d.ts +5 -7
  95. package/dist/components/Select/SelectValue.svelte +7 -1
  96. package/dist/components/Select/SelectValue.svelte.d.ts +5 -9
  97. package/dist/components/Select/context.svelte.d.ts +2 -2
  98. package/dist/components/Select/context.svelte.js +2 -2
  99. package/dist/components/Select/index.d.ts +1 -0
  100. package/dist/components/Select/types.d.ts +42 -0
  101. package/dist/components/Select/types.js +1 -0
  102. package/dist/components/Tabs/Tabs.svelte +2 -2
  103. package/dist/components/Tabs/Tabs.svelte.d.ts +5 -10
  104. package/dist/components/Tabs/TabsButton.svelte +1 -6
  105. package/dist/components/Tabs/TabsButton.svelte.d.ts +5 -12
  106. package/dist/components/Tabs/TabsContent.svelte.d.ts +5 -9
  107. package/dist/components/Tabs/TabsList.svelte.d.ts +5 -5
  108. package/dist/components/Tabs/index.d.ts +1 -0
  109. package/dist/components/Tabs/types.d.ts +42 -0
  110. package/dist/components/Tabs/types.js +1 -0
  111. package/dist/internal/actions/clickOutside.d.ts +3 -1
  112. package/dist/internal/actions/clickOutside.js +4 -3
  113. package/dist/internal/helpers/context.svelte.d.ts +6 -3
  114. package/dist/internal/helpers/context.svelte.js +8 -3
  115. package/dist/internal/helpers/transition.d.ts +9 -9
  116. package/dist/internal/helpers/transition.js +11 -10
  117. package/package.json +2 -2
@@ -5,7 +5,14 @@ export const { context, contextName } = setupContext();
5
5
 
6
6
  <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
7
7
  import { setContext } from "svelte";
8
- let { children, use = [], class: klass, self = $bindable(), single = $bindable(false), ...props } = $props();
8
+ let {
9
+ children,
10
+ use = [],
11
+ class: klass,
12
+ self = $bindable(),
13
+ single = $bindable(false),
14
+ ...props
15
+ } = $props();
9
16
  const ctx = new AccordionContext({ single });
10
17
  const active = $derived(ctx.activeItems.length > 0);
11
18
  setContext(contextName, ctx);
@@ -1,21 +1,17 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  import { AccordionContext } from './context.svelte.js';
3
3
  export declare const context: () => AccordionContext, contextName: string;
4
- import { type BaseProps } from '../../internal/index.js';
4
+ import type { AccordionProps } from './types.js';
5
5
  declare const __propDef: {
6
- props: BaseProps<HTMLDivElement, {
7
- active: boolean;
8
- }> & {
9
- single?: boolean | undefined;
10
- };
6
+ props: AccordionProps;
11
7
  events: {
12
8
  [evt: string]: CustomEvent<any>;
13
9
  };
14
10
  slots: {};
15
11
  };
16
- export type AccordionProps = typeof __propDef.props;
12
+ type AccordionProps_ = typeof __propDef.props;
13
+ export { AccordionProps_ as AccordionProps };
17
14
  export type AccordionEvents = typeof __propDef.events;
18
15
  export type AccordionSlots = typeof __propDef.slots;
19
- export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
16
+ export default class Accordion extends SvelteComponent<AccordionProps_, AccordionEvents, AccordionSlots> {
20
17
  }
21
- export {};
@@ -5,6 +5,11 @@ declare const __propDef: {
5
5
  active: boolean;
6
6
  disabled: boolean;
7
7
  }> & {
8
+ /**
9
+ * The onclick event.
10
+ *
11
+ * Using the regular `onclick` will overwrite and behaviour the component requires.
12
+ */
8
13
  onClick?: Handler<MouseEvent, HTMLButtonElement> | undefined;
9
14
  };
10
15
  events: {
@@ -5,7 +5,7 @@ let { children, class: klass, use = [], self = $bindable(), transition, ...props
5
5
  const ctx = context();
6
6
  const itemId = getContext("accordionitem-id");
7
7
  const active = $derived(ctx.activeItems.includes(itemId));
8
- const _transition = getTransition(transition);
8
+ const { inTransition, outTransition } = getTransition(transition);
9
9
  const attrs = $derived({
10
10
  id: ctx.uid("content"),
11
11
  "data-accordioncontent": "",
@@ -14,19 +14,12 @@ const attrs = $derived({
14
14
  });
15
15
  </script>
16
16
 
17
- {#if _transition}
18
- {#if active}
19
- <div
20
- bind:this={self}
21
- use:useActions={use}
22
- in:_transition.in.fn={_transition.in.params}
23
- out:_transition.out.fn={_transition.out.params}
24
- {...attrs}
25
- {...props}
26
- >
27
- {@render children({ active })}
28
- </div>
29
- {/if}
17
+ {#if inTransition && outTransition && active}
18
+ {@const { config: inConf, transition: inFn } = inTransition}
19
+ {@const { config: outConf, transition: outFn } = outTransition}
20
+ <div bind:this={self} use:useActions={use} in:inFn={inConf} out:outFn={outConf} {...attrs} {...props}>
21
+ {@render children({ active })}
22
+ </div>
30
23
  {:else if active}
31
24
  <div bind:this={self} use:useActions={use} {...attrs} {...props}>
32
25
  {@render children({ active })}
@@ -1,24 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BaseProps, type Transition } from '../../internal/index.js';
2
+ import type { AccordionContentProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BaseProps<HTMLDivElement, {
5
- active: boolean;
6
- }> & {
7
- /**
8
- * The `svelte/transtion` you wish to use.
9
- *
10
- * @see https://lithesome.dev/docs/api#transition-prop
11
- */
12
- transition?: Transition | undefined;
13
- };
4
+ props: AccordionContentProps;
14
5
  events: {
15
6
  [evt: string]: CustomEvent<any>;
16
7
  };
17
8
  slots: {};
18
9
  };
19
- export type AccordionContentProps = typeof __propDef.props;
10
+ type AccordionContentProps_ = typeof __propDef.props;
11
+ export { AccordionContentProps_ as AccordionContentProps };
20
12
  export type AccordionContentEvents = typeof __propDef.events;
21
13
  export type AccordionContentSlots = typeof __propDef.slots;
22
- export default class AccordionContent extends SvelteComponent<AccordionContentProps, AccordionContentEvents, AccordionContentSlots> {
14
+ export default class AccordionContent extends SvelteComponent<AccordionContentProps_, AccordionContentEvents, AccordionContentSlots> {
23
15
  }
24
- export {};
@@ -1,17 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BaseProps } from '../../internal/index.js';
2
+ import type { AccordionHeadingProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BaseProps<HTMLDivElement, any> & {
5
- level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
6
- };
4
+ props: AccordionHeadingProps;
7
5
  events: {
8
6
  [evt: string]: CustomEvent<any>;
9
7
  };
10
8
  slots: {};
11
9
  };
12
- export type AccordionHeadingProps = typeof __propDef.props;
10
+ type AccordionHeadingProps_ = typeof __propDef.props;
11
+ export { AccordionHeadingProps_ as AccordionHeadingProps };
13
12
  export type AccordionHeadingEvents = typeof __propDef.events;
14
13
  export type AccordionHeadingSlots = typeof __propDef.slots;
15
- export default class AccordionHeading extends SvelteComponent<AccordionHeadingProps, AccordionHeadingEvents, AccordionHeadingSlots> {
14
+ export default class AccordionHeading extends SvelteComponent<AccordionHeadingProps_, AccordionHeadingEvents, AccordionHeadingSlots> {
16
15
  }
17
- export {};
@@ -1,7 +1,14 @@
1
1
  <script lang="ts">import { context } from "./Accordion.svelte";
2
2
  import { log, useActions, createUID, classProp } from "../../internal/index.js";
3
3
  import { onMount, setContext } from "svelte";
4
- let { children, class: klass, use = [], self = $bindable(), disabled = $bindable(false), ...props } = $props();
4
+ let {
5
+ children,
6
+ class: klass,
7
+ use = [],
8
+ self = $bindable(),
9
+ disabled = $bindable(false),
10
+ ...props
11
+ } = $props();
5
12
  const ctx = context();
6
13
  const { uid } = createUID("item");
7
14
  const active = $derived(ctx.activeItems.includes(uid()));
@@ -1,20 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BaseProps } from '../../internal/index.js';
2
+ import type { AccordionItemProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BaseProps<HTMLDivElement, {
5
- active: boolean;
6
- disabled: boolean;
7
- }> & {
8
- disabled?: boolean | undefined;
9
- };
4
+ props: AccordionItemProps;
10
5
  events: {
11
6
  [evt: string]: CustomEvent<any>;
12
7
  };
13
8
  slots: {};
14
9
  };
15
- export type AccordionItemProps = typeof __propDef.props;
10
+ type AccordionItemProps_ = typeof __propDef.props;
11
+ export { AccordionItemProps_ as AccordionItemProps };
16
12
  export type AccordionItemEvents = typeof __propDef.events;
17
13
  export type AccordionItemSlots = typeof __propDef.slots;
18
- export default class AccordionItem extends SvelteComponent<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
14
+ export default class AccordionItem extends SvelteComponent<AccordionItemProps_, AccordionItemEvents, AccordionItemSlots> {
19
15
  }
20
- export {};
@@ -3,3 +3,4 @@ export { default as AccordionHeading } from './AccordionHeading.svelte';
3
3
  export { default as AccordionItem } from './AccordionItem.svelte';
4
4
  export { default as AccordionButton } from './AccordionButton.svelte';
5
5
  export { default as AccordionContent } from './AccordionContent.svelte';
6
+ export type * from './types.js';
@@ -0,0 +1,45 @@
1
+ import type { BaseProps, Handler, Transition } from '../../internal/index.js';
2
+ interface AccordionState {
3
+ /** True if any item is opened. */
4
+ active: boolean;
5
+ }
6
+ export interface AccordionProps extends BaseProps<HTMLDivElement, AccordionState> {
7
+ /** Allow only a singluar `AccordionItem` to be opened at once. */
8
+ single?: boolean;
9
+ }
10
+ interface AccordionContentState {
11
+ /** True if any item is opened. */
12
+ active: boolean;
13
+ }
14
+ export interface AccordionContentProps extends BaseProps<HTMLDivElement, AccordionContentState> {
15
+ /**
16
+ * The `svelte/transtion` you wish to use.
17
+ *
18
+ * @see https://lithesome.dev/docs/api#transition-prop
19
+ */
20
+ transition?: Transition;
21
+ }
22
+ export interface AccordionHeadingProps extends BaseProps<HTMLDivElement> {
23
+ /** The `aria-level` to be set. */
24
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
25
+ }
26
+ interface AccordionButtonState {
27
+ /** True if the item is opened. */
28
+ active: boolean;
29
+ /** True if the item is disabled. */
30
+ disabled: boolean;
31
+ }
32
+ export interface AccordionButtonProps extends BaseProps<HTMLButtonElement, AccordionButtonState> {
33
+ onClick?: Handler<MouseEvent, HTMLButtonElement>;
34
+ }
35
+ interface AccordionItemState {
36
+ /** True if the item is opened. */
37
+ active: boolean;
38
+ /** True if the item is disabled. */
39
+ disabled: boolean;
40
+ }
41
+ export interface AccordionItemProps extends BaseProps<HTMLDivElement, AccordionItemState> {
42
+ /** Disables the items, disallowing clicking and keyboard navigation. */
43
+ disabled?: boolean;
44
+ }
45
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -1 +1,2 @@
1
1
  export { default as Checkbox } from './Checkbox.svelte';
2
+ export type * from './types.js';
@@ -0,0 +1,16 @@
1
+ import type { BaseProps, Handler, Optional } from '../../internal/types.js';
2
+ type Checked = boolean | 'mixed';
3
+ interface CheckboxState {
4
+ /** If the checkbox is checked or not. */
5
+ checked: Checked;
6
+ }
7
+ export interface CheckboxProps extends Optional<BaseProps<HTMLButtonElement, CheckboxState>, 'children'> {
8
+ /** If the checkbox is checked or not. */
9
+ checked?: Checked;
10
+ /** Adds aria attributes. */
11
+ required?: boolean;
12
+ /** Disabled the checkbox, disallowing the internal events. */
13
+ disabled?: boolean;
14
+ onClick?: Handler<MouseEvent, HTMLButtonElement>;
15
+ }
16
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -1,27 +1,17 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  import { ComboboxContext } from './context.svelte.js';
3
3
  export declare const context: () => ComboboxContext<any>, contextName: string;
4
- import { type BaseProps } from '../../internal/index.js';
4
+ import type { ComboboxProps } from './types.js';
5
5
  declare class __sveltets_Render<ValueType> {
6
- props(): BaseProps<HTMLDivElement, {
7
- visible: boolean;
8
- }> & {
9
- value: ValueType;
10
- label?: string | undefined;
11
- touched?: boolean | undefined;
12
- onChange?: ((payload?: {
13
- value?: ValueType | undefined;
14
- label?: string | undefined;
15
- } | undefined) => void) | undefined;
16
- };
6
+ props(): ComboboxProps<ValueType>;
17
7
  events(): {} & {
18
8
  [evt: string]: CustomEvent<any>;
19
9
  };
20
10
  slots(): {};
21
11
  }
22
- export type ComboboxProps<ValueType> = ReturnType<__sveltets_Render<ValueType>['props']>;
12
+ export type ComboboxProps_<ValueType> = ReturnType<__sveltets_Render<ValueType>['props']>;
23
13
  export type ComboboxEvents<ValueType> = ReturnType<__sveltets_Render<ValueType>['events']>;
24
14
  export type ComboboxSlots<ValueType> = ReturnType<__sveltets_Render<ValueType>['slots']>;
25
- export default class Combobox<ValueType> extends SvelteComponent<ComboboxProps<ValueType>, ComboboxEvents<ValueType>, ComboboxSlots<ValueType>> {
15
+ export default class Combobox<ValueType> extends SvelteComponent<ComboboxProps_<ValueType>, ComboboxEvents<ValueType>, ComboboxSlots<ValueType>> {
26
16
  }
27
17
  export {};
@@ -1,17 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BasePropsNoChildren } from '../../internal/index.js';
2
+ import type { ComboboxArrowProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BasePropsNoChildren<HTMLDivElement, {
5
- visible: boolean;
6
- }>;
4
+ props: ComboboxArrowProps;
7
5
  events: {
8
6
  [evt: string]: CustomEvent<any>;
9
7
  };
10
8
  slots: {};
11
9
  };
12
- export type ComboboxArrowProps = typeof __propDef.props;
10
+ type ComboboxArrowProps_ = typeof __propDef.props;
11
+ export { ComboboxArrowProps_ as ComboboxArrowProps };
13
12
  export type ComboboxArrowEvents = typeof __propDef.events;
14
13
  export type ComboboxArrowSlots = typeof __propDef.slots;
15
- export default class ComboboxArrow extends SvelteComponent<ComboboxArrowProps, ComboboxArrowEvents, ComboboxArrowSlots> {
14
+ export default class ComboboxArrow extends SvelteComponent<ComboboxArrowProps_, ComboboxArrowEvents, ComboboxArrowSlots> {
16
15
  }
17
- export {};
@@ -1,12 +1,5 @@
1
1
  <script lang="ts">import { context } from "./Combobox.svelte";
2
- import {
3
- clickOutside,
4
- anchorElement,
5
- portal,
6
- useActions,
7
- getTransition,
8
- classProp
9
- } from "../../internal/index.js";
2
+ import { clickOutside, anchorElement, portal, useActions, getTransition, classProp } from "../../internal/index.js";
10
3
  import { log } from "../../internal/index.js";
11
4
  import { onMount } from "svelte";
12
5
  let {
@@ -23,7 +16,7 @@ let {
23
16
  } = $props();
24
17
  const ctx = context();
25
18
  let contentCleanup = $state(void 0);
26
- const _transition = getTransition(transition);
19
+ const { inTransition, outTransition } = getTransition(transition);
27
20
  const attrs = $derived({
28
21
  id: ctx.uid("content"),
29
22
  "aria-labelledby": ctx.uid("trigger"),
@@ -61,29 +54,29 @@ $effect(() => {
61
54
  });
62
55
  </script>
63
56
 
64
- {#if _transition}
65
- {#if ctx.visible}
66
- <div
67
- bind:this={self}
68
- use:clickOutside={{
69
- exclude: [ctx.trigger],
70
- callback: () => ctx.close()
71
- }}
72
- use:portal={portalTarget}
73
- use:useActions={use}
74
- in:_transition.in.fn={_transition.in.params}
75
- out:_transition.out.fn={_transition.out.params}
76
- {...attrs}
77
- {...props}
78
- >
79
- {@render children({ visible: ctx.visible })}
80
- </div>
81
- {/if}
57
+ {#if inTransition && outTransition && ctx.visible}
58
+ {@const { config: inConf, transition: inFn } = inTransition}
59
+ {@const { config: outConf, transition: outFn } = outTransition}
60
+ <div
61
+ bind:this={self}
62
+ use:clickOutside={{
63
+ exclude: ctx.trigger,
64
+ callback: () => ctx.close()
65
+ }}
66
+ use:portal={portalTarget}
67
+ use:useActions={use}
68
+ in:inFn={inConf}
69
+ out:outFn={outConf}
70
+ {...attrs}
71
+ {...props}
72
+ >
73
+ {@render children({ visible: ctx.visible })}
74
+ </div>
82
75
  {:else if ctx.visible}
83
76
  <div
84
77
  bind:this={self}
85
78
  use:clickOutside={{
86
- exclude: [ctx.trigger],
79
+ exclude: ctx.trigger,
87
80
  callback: () => ctx.close()
88
81
  }}
89
82
  use:portal={portalTarget}
@@ -1,17 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BaseProps, type ContentProps } from '../../internal/index.js';
2
+ import type { ComboboxContentProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BaseProps<HTMLDivElement, {
5
- visible: boolean;
6
- }> & ContentProps;
4
+ props: ComboboxContentProps;
7
5
  events: {
8
6
  [evt: string]: CustomEvent<any>;
9
7
  };
10
8
  slots: {};
11
9
  };
12
- export type ComboboxContentProps = typeof __propDef.props;
10
+ type ComboboxContentProps_ = typeof __propDef.props;
11
+ export { ComboboxContentProps_ as ComboboxContentProps };
13
12
  export type ComboboxContentEvents = typeof __propDef.events;
14
13
  export type ComboboxContentSlots = typeof __propDef.slots;
15
- export default class ComboboxContent extends SvelteComponent<ComboboxContentProps, ComboboxContentEvents, ComboboxContentSlots> {
14
+ export default class ComboboxContent extends SvelteComponent<ComboboxContentProps_, ComboboxContentEvents, ComboboxContentSlots> {
16
15
  }
17
- export {};
@@ -1,10 +1,5 @@
1
1
  <script lang="ts">import { context } from "./Combobox.svelte";
2
- import {
3
- useActions,
4
- classProp,
5
- PREVENT_KEYS,
6
- KEYS
7
- } from "../../internal/index.js";
2
+ import { useActions, classProp, PREVENT_KEYS, KEYS } from "../../internal/index.js";
8
3
  import { onMount } from "svelte";
9
4
  let {
10
5
  class: klass,
@@ -1,23 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BasePropsNoChildren, type Handler } from '../../internal/index.js';
2
+ import type { ComboboxInputProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BasePropsNoChildren<HTMLInputElement, {
5
- visible: boolean;
6
- }> & {
7
- value: string;
8
- disabled?: boolean | undefined;
9
- onClick?: Handler<MouseEvent, HTMLInputElement> | undefined;
10
- onFocus?: Handler<FocusEvent, HTMLInputElement> | undefined;
11
- onKeydown?: Handler<KeyboardEvent, HTMLInputElement> | undefined;
12
- };
4
+ props: ComboboxInputProps;
13
5
  events: {
14
6
  [evt: string]: CustomEvent<any>;
15
7
  };
16
8
  slots: {};
17
9
  };
18
- export type ComboboxInputProps = typeof __propDef.props;
10
+ type ComboboxInputProps_ = typeof __propDef.props;
11
+ export { ComboboxInputProps_ as ComboboxInputProps };
19
12
  export type ComboboxInputEvents = typeof __propDef.events;
20
13
  export type ComboboxInputSlots = typeof __propDef.slots;
21
- export default class ComboboxInput extends SvelteComponent<ComboboxInputProps, ComboboxInputEvents, ComboboxInputSlots> {
14
+ export default class ComboboxInput extends SvelteComponent<ComboboxInputProps_, ComboboxInputEvents, ComboboxInputSlots> {
22
15
  }
23
- export {};
@@ -1,9 +1,5 @@
1
1
  <script lang="ts">import { context } from "./Combobox.svelte";
2
- import {
3
- useActions,
4
- classProp,
5
- isBrowser
6
- } from "../../internal/index.js";
2
+ import { useActions, classProp, isBrowser } from "../../internal/index.js";
7
3
  import { createUID } from "../../internal/index.js";
8
4
  import { onMount, tick } from "svelte";
9
5
  let {
@@ -1,25 +1,15 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import { type BaseProps, type JsonValue, type Handler } from '../../internal/index.js';
2
+ import type { ComboboxOptionProps } from './types.js';
3
3
  declare const __propDef: {
4
- props: BaseProps<HTMLButtonElement | HTMLAnchorElement, {
5
- hovered: boolean;
6
- selected: boolean;
7
- }> & {
8
- value: JsonValue;
9
- disabled?: boolean | undefined;
10
- label?: string | undefined;
11
- onClick?: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
12
- onFocus?: Handler<FocusEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
13
- onMouseenter?: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
14
- };
4
+ props: ComboboxOptionProps;
15
5
  events: {
16
6
  [evt: string]: CustomEvent<any>;
17
7
  };
18
8
  slots: {};
19
9
  };
20
- export type ComboboxOptionProps = typeof __propDef.props;
10
+ type ComboboxOptionProps_ = typeof __propDef.props;
11
+ export { ComboboxOptionProps_ as ComboboxOptionProps };
21
12
  export type ComboboxOptionEvents = typeof __propDef.events;
22
13
  export type ComboboxOptionSlots = typeof __propDef.slots;
23
- export default class ComboboxOption extends SvelteComponent<ComboboxOptionProps, ComboboxOptionEvents, ComboboxOptionSlots> {
14
+ export default class ComboboxOption extends SvelteComponent<ComboboxOptionProps_, ComboboxOptionEvents, ComboboxOptionSlots> {
24
15
  }
25
- export {};
@@ -1,4 +1,4 @@
1
- import { Context, type CalcIndexAction, type JsonValue } from '../../internal/index.js';
1
+ import { FloatingContext, type CalcIndexAction, type JsonValue } from '../../internal/index.js';
2
2
  export interface Option {
3
3
  value: JsonValue;
4
4
  label: string;
@@ -15,7 +15,7 @@ interface Hooks<ValueType> {
15
15
  newLabel?: string;
16
16
  }) => void;
17
17
  }
18
- export declare class ComboboxContext<ValueType = any> extends Context<Hooks<ValueType>, HTMLInputElement> {
18
+ export declare class ComboboxContext<ValueType = any> extends FloatingContext<Hooks<ValueType>, HTMLInputElement> {
19
19
  #private;
20
20
  visible: boolean;
21
21
  hoveredIndex: number;
@@ -1,6 +1,6 @@
1
- import { calculateIndex, disableScroll, removeDisabledElements, Context, effects } from '../../internal/index.js';
1
+ import { calculateIndex, disableScroll, removeDisabledElements, FloatingContext, effects } from '../../internal/index.js';
2
2
  import { tick } from 'svelte';
3
- export class ComboboxContext extends Context {
3
+ export class ComboboxContext extends FloatingContext {
4
4
  visible = $state(true);
5
5
  hoveredIndex = $state(-1);
6
6
  options = $state([]);
@@ -3,3 +3,4 @@ export { default as ComboboxContent } from './ComboboxContent.svelte';
3
3
  export { default as ComboboxInput } from './ComboboxInput.svelte';
4
4
  export { default as ComboboxOption } from './ComboboxOption.svelte';
5
5
  export { default as ComboboxArrow } from './ComboboxArrow.svelte';
6
+ export type * from './types.js';
@@ -0,0 +1,53 @@
1
+ import type { BaseProps, BasePropsNoChildren, ContentProps, Handler, JsonValue } from '../../internal/types.js';
2
+ export type ComboboxElement = HTMLAnchorElement | HTMLButtonElement;
3
+ interface ComboboxState {
4
+ /** Whether or not the content is opened or not. */
5
+ visible: boolean;
6
+ }
7
+ export interface ComboboxProps<T> extends BaseProps<HTMLDivElement, ComboboxState> {
8
+ /** The value of the combobox. */
9
+ value: T;
10
+ /** The label of the selected item. */
11
+ label?: string;
12
+ /** If the user has modified the selected value in anyway. */
13
+ touched?: boolean;
14
+ onChange?: (payload?: {
15
+ value?: T;
16
+ label?: string;
17
+ }) => void;
18
+ }
19
+ export interface ComboboxArrowProps extends BasePropsNoChildren<HTMLDivElement, ComboboxState> {
20
+ }
21
+ export interface ComboboxContentProps extends BaseProps<HTMLDivElement, ComboboxState>, ContentProps {
22
+ }
23
+ export interface ComboboxInputProps extends BasePropsNoChildren<HTMLInputElement, ComboboxState> {
24
+ /** Bind the value of the input value. */
25
+ value: string;
26
+ /** Disables the input. */
27
+ disabled?: boolean;
28
+ onClick?: Handler<MouseEvent, HTMLInputElement>;
29
+ onFocus?: Handler<FocusEvent, HTMLInputElement>;
30
+ onKeydown?: Handler<KeyboardEvent, HTMLInputElement>;
31
+ }
32
+ interface ComboboxOptionState {
33
+ /** If the option is hovered, either via mouse or keyboard. */
34
+ hovered: boolean;
35
+ /** If the option is selected. */
36
+ selected: boolean;
37
+ }
38
+ export interface ComboboxOptionProps extends BaseProps<ComboboxElement, ComboboxOptionState> {
39
+ /** The value of the option. */
40
+ value: JsonValue;
41
+ /** Disables the option. */
42
+ disabled?: boolean;
43
+ /**
44
+ * Label of the option.
45
+ *
46
+ * If this prop is not provided, the text content will be used.
47
+ */
48
+ label?: string;
49
+ onClick?: Handler<MouseEvent, ComboboxElement>;
50
+ onFocus?: Handler<FocusEvent, ComboboxElement>;
51
+ onMouseenter?: Handler<MouseEvent, ComboboxElement>;
52
+ }
53
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -1,26 +1,17 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  import { HovercardContext } from './context.svelte.js';
3
3
  export declare const context: () => HovercardContext, contextName: string;
4
- import { type BaseProps } from '../../internal/index.js';
4
+ import type { HovercardProps } from './types.js';
5
5
  declare const __propDef: {
6
- props: BaseProps<HTMLDivElement, {
7
- visible: boolean;
8
- }> & {
9
- /**
10
- * The delay between the the content being visible or not.
11
- *
12
- * Passing an array will allow you to change the delays for in and out.
13
- */
14
- delay?: number | [number, number] | undefined;
15
- };
6
+ props: HovercardProps;
16
7
  events: {
17
8
  [evt: string]: CustomEvent<any>;
18
9
  };
19
10
  slots: {};
20
11
  };
21
- export type HovercardProps = typeof __propDef.props;
12
+ type HovercardProps_ = typeof __propDef.props;
13
+ export { HovercardProps_ as HovercardProps };
22
14
  export type HovercardEvents = typeof __propDef.events;
23
15
  export type HovercardSlots = typeof __propDef.slots;
24
- export default class Hovercard extends SvelteComponent<HovercardProps, HovercardEvents, HovercardSlots> {
16
+ export default class Hovercard extends SvelteComponent<HovercardProps_, HovercardEvents, HovercardSlots> {
25
17
  }
26
- export {};