@rkosafo/cai.components 0.0.74 → 0.0.78

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 (127) hide show
  1. package/README.md +8 -8
  2. package/dist/baseEditor/index.svelte +32 -32
  3. package/dist/builders/filters/FilterBuilder.svelte +641 -641
  4. package/dist/forms/FormCheckbox/FormCheckbox.svelte +53 -53
  5. package/dist/forms/FormClEditor/ClEdito.svelte +68 -68
  6. package/dist/forms/FormDatepicker/FormDatepicker.svelte +159 -159
  7. package/dist/forms/FormFileUpload/FormFileUplad.svelte +134 -134
  8. package/dist/forms/FormInput/FormInput.svelte +87 -87
  9. package/dist/forms/FormRadio/FormRadio.svelte +53 -53
  10. package/dist/forms/FormSelect/FormSelect.svelte +88 -88
  11. package/dist/forms/FormTextarea/FormTextarea.svelte +78 -78
  12. package/dist/forms/button-toggle/ButtonToggle.svelte +119 -0
  13. package/dist/forms/button-toggle/ButtonToggle.svelte.d.ts +139 -0
  14. package/dist/forms/button-toggle/ButtonToggleGroup.svelte +0 -0
  15. package/dist/forms/button-toggle/ButtonToggleGroup.svelte.d.ts +26 -0
  16. package/dist/forms/button-toggle/CheckIcon.svelte +28 -0
  17. package/dist/forms/button-toggle/CheckIcon.svelte.d.ts +4 -0
  18. package/dist/forms/button-toggle/index.d.ts +4 -0
  19. package/dist/forms/button-toggle/index.js +4 -0
  20. package/dist/forms/button-toggle/theme.d.ts +347 -0
  21. package/dist/forms/button-toggle/theme.js +129 -0
  22. package/dist/forms/checkbox/Checkbox.svelte +82 -82
  23. package/dist/forms/checkbox/CheckboxButton.svelte +92 -92
  24. package/dist/forms/datepicker/Datepicker.svelte +707 -707
  25. package/dist/forms/form/Form.svelte +69 -69
  26. package/dist/forms/input/Input.svelte +363 -363
  27. package/dist/forms/label/Label.svelte +38 -38
  28. package/dist/forms/radio/Radio.svelte +48 -48
  29. package/dist/forms/radio/RadioButton.svelte +22 -22
  30. package/dist/forms/select/Select.svelte +56 -56
  31. package/dist/forms/textarea/Textarea.svelte +165 -165
  32. package/dist/forms/toggle/Toggle.svelte +70 -0
  33. package/dist/forms/toggle/Toggle.svelte.d.ts +3 -0
  34. package/dist/forms/toggle/index.d.ts +2 -0
  35. package/dist/forms/toggle/index.js +2 -0
  36. package/dist/forms/toggle/theme.d.ts +280 -0
  37. package/dist/forms/toggle/theme.js +97 -0
  38. package/dist/index.d.ts +3 -0
  39. package/dist/index.js +3 -0
  40. package/dist/layout/Chat/CategorySelector.svelte +52 -52
  41. package/dist/layout/Chat/ChatEntry.svelte +246 -246
  42. package/dist/layout/Chat/ChatEntrySkeleton.svelte +81 -81
  43. package/dist/layout/Chat/ChatHeader.svelte +172 -172
  44. package/dist/layout/Chat/ChatInput.svelte +207 -207
  45. package/dist/layout/Chat/DraggableWindow.svelte +230 -230
  46. package/dist/layout/Chat/PreviewPage.svelte +182 -182
  47. package/dist/layout/Chat/RichText.svelte +216 -216
  48. package/dist/layout/ComponentCanvas/Canvas.svelte +40 -40
  49. package/dist/layout/ComponentCanvas/ComponentRenderer.svelte +85 -85
  50. package/dist/layout/TF/Content/Content.svelte +21 -21
  51. package/dist/layout/TF/Header/Header.svelte +166 -166
  52. package/dist/layout/TF/Sidebar/Sidebar.svelte +148 -148
  53. package/dist/layout/TF/Wrapper/Wrapper.svelte +17 -17
  54. package/dist/layout/mailing/MailPaginator.svelte +36 -36
  55. package/dist/layout/mailing/MailSidebar.svelte +39 -39
  56. package/dist/layout/mailing/MailToolBar.svelte +174 -174
  57. package/dist/layout/mailing/MailingContent.svelte +10 -10
  58. package/dist/layout/mailing/MailingHeader.svelte +55 -55
  59. package/dist/layout/mailing/MailingMessageCard.svelte +112 -112
  60. package/dist/layout/mailing/MailingMessageViewer.svelte +87 -87
  61. package/dist/layout/mailing/MailingModule.svelte +448 -448
  62. package/dist/styles/docs.css +615 -615
  63. package/dist/styles/tf-layout.css +185 -185
  64. package/dist/themes/ThemeProvider.svelte +20 -20
  65. package/dist/themes/themes.d.ts +3 -0
  66. package/dist/themes/themes.js +3 -0
  67. package/dist/types/index.d.ts +59 -2
  68. package/dist/typography/heading/Heading.svelte +35 -35
  69. package/dist/ui/accordion/Accordion.svelte +49 -49
  70. package/dist/ui/accordion/AccordionItem.svelte +173 -173
  71. package/dist/ui/alert/Alert.svelte +83 -83
  72. package/dist/ui/alertDialog/AlertDialog.svelte +40 -40
  73. package/dist/ui/avatar/Avatar.svelte +77 -77
  74. package/dist/ui/box/Box.svelte +28 -28
  75. package/dist/ui/breadcrumb/Breadcrumb.svelte +39 -28
  76. package/dist/ui/buttons/ActionButton.svelte +234 -234
  77. package/dist/ui/buttons/Button.svelte +102 -102
  78. package/dist/ui/buttons/GradientButton.svelte +59 -59
  79. package/dist/ui/datatable/Datatable.svelte +525 -525
  80. package/dist/ui/drawer/Drawer.svelte +300 -300
  81. package/dist/ui/dropdown/Dropdown.svelte +36 -36
  82. package/dist/ui/dropdown/DropdownDivider.svelte +11 -11
  83. package/dist/ui/dropdown/DropdownGroup.svelte +14 -14
  84. package/dist/ui/dropdown/DropdownHeader.svelte +14 -14
  85. package/dist/ui/dropdown/DropdownItem.svelte +52 -52
  86. package/dist/ui/footer/Footer.svelte +15 -15
  87. package/dist/ui/footer/FooterBrand.svelte +37 -37
  88. package/dist/ui/footer/FooterCopyright.svelte +45 -45
  89. package/dist/ui/footer/FooterIcon.svelte +22 -22
  90. package/dist/ui/footer/FooterLink.svelte +33 -33
  91. package/dist/ui/footer/FooterLinkGroup.svelte +13 -13
  92. package/dist/ui/icons/IconifyIcon.svelte +7 -7
  93. package/dist/ui/indicator/Indicator.svelte +42 -42
  94. package/dist/ui/modal/Modal.svelte +265 -265
  95. package/dist/ui/modal/theme.d.ts +26 -26
  96. package/dist/ui/modal/theme.js +25 -25
  97. package/dist/ui/notificationList/NotificationList.svelte +123 -123
  98. package/dist/ui/pageLoader/PageLoader.svelte +14 -14
  99. package/dist/ui/paginate/Paginate.svelte +96 -96
  100. package/dist/ui/speedDial/SpeedDial.svelte +77 -0
  101. package/dist/ui/speedDial/SpeedDial.svelte.d.ts +21 -0
  102. package/dist/ui/speedDial/SpeedDialButton.svelte +75 -0
  103. package/dist/ui/speedDial/SpeedDialButton.svelte.d.ts +20 -0
  104. package/dist/ui/speedDial/SpeedDialTrigger.svelte +79 -0
  105. package/dist/ui/speedDial/SpeedDialTrigger.svelte.d.ts +18 -0
  106. package/dist/ui/speedDial/index.d.ts +4 -0
  107. package/dist/ui/speedDial/index.js +4 -0
  108. package/dist/ui/speedDial/theme.d.ts +75 -0
  109. package/dist/ui/speedDial/theme.js +35 -0
  110. package/dist/ui/tab/Tab.svelte +67 -67
  111. package/dist/ui/table/Table.svelte +396 -394
  112. package/dist/ui/tableLoader/TableLoader.svelte +24 -24
  113. package/dist/ui/toast/Toast.svelte +337 -337
  114. package/dist/ui/toast/Toast.svelte.d.ts +10 -10
  115. package/dist/ui/toast/index.d.ts +1 -2
  116. package/dist/ui/toast/index.js +3 -1
  117. package/dist/ui/toolbar/Toolbar.svelte +59 -59
  118. package/dist/ui/toolbar/ToolbarButton.svelte +56 -56
  119. package/dist/ui/toolbar/ToolbarGroup.svelte +43 -43
  120. package/dist/ui/tooltip/Tooltip.svelte +51 -51
  121. package/dist/utils/Popper.svelte +257 -257
  122. package/dist/utils/closeButton/CloseButton.svelte +88 -88
  123. package/dist/utils/index.d.ts +3 -2
  124. package/dist/utils/index.js +13 -3
  125. package/dist/utils/singleSelection.svelte.js +48 -48
  126. package/dist/youtube/index.svelte +12 -12
  127. package/package.json +2 -1
@@ -40,11 +40,11 @@ export interface ToasterProps {
40
40
  offset?: number | string;
41
41
  }
42
42
  export declare const toast: {
43
- success: (message: string, options?: CustomToastOptions) => string;
44
- error: (message: string, options?: CustomToastOptions) => string;
45
- warning: (message: string, options?: CustomToastOptions) => string;
46
- info: (message: string, options?: CustomToastOptions) => string;
47
- loading: (message: string, options?: CustomToastOptions) => string;
43
+ success: (message: string, options?: CustomToastOptions) => any;
44
+ error: (message: string, options?: CustomToastOptions) => any;
45
+ warning: (message: string, options?: CustomToastOptions) => any;
46
+ info: (message: string, options?: CustomToastOptions) => any;
47
+ loading: (message: string, options?: CustomToastOptions) => any;
48
48
  promise: <T>(promise: Promise<T>, messages: {
49
49
  loading: string;
50
50
  success: string;
@@ -53,14 +53,14 @@ export declare const toast: {
53
53
  loading?: CustomToastOptions;
54
54
  success?: CustomToastOptions;
55
55
  error?: CustomToastOptions;
56
- }) => Promise<T>;
57
- custom: (message: string, type?: ToastType, options?: CustomToastOptions) => string;
56
+ }) => any;
57
+ custom: (message: string, type?: ToastType, options?: CustomToastOptions) => any;
58
58
  action: (message: string, action: {
59
59
  label: string;
60
60
  onClick: () => void;
61
- }, options?: CustomToastOptions) => string;
62
- dismiss: (toastId?: string) => void;
63
- remove: (toastId?: string) => void;
61
+ }, options?: CustomToastOptions) => any;
62
+ dismiss: (toastId?: string) => any;
63
+ remove: (toastId?: string) => any;
64
64
  };
65
65
  export declare function updateToastConfig(config: {
66
66
  duration?: number;
@@ -1,2 +1 @@
1
- export { default as Toaster, toast } from './Toast.svelte';
2
- export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';
1
+ export * from 'svelte-french-toast';
@@ -1 +1,3 @@
1
- export { default as Toaster, toast } from './Toast.svelte';
1
+ // export { default as Toaster, toast } from './Toast.svelte';
2
+ // export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';
3
+ export * from 'svelte-french-toast';
@@ -1,59 +1,59 @@
1
- <script lang="ts">
2
- import clsx from 'clsx';
3
- import { setContext } from 'svelte';
4
- import { toolbar } from './index.js';
5
- import { getTheme, type ToolbarProps } from '../../index.js';
6
-
7
- let {
8
- children,
9
- end,
10
- color,
11
- embedded,
12
- class: className,
13
- classes,
14
- ...restProps
15
- }: ToolbarProps = $props();
16
-
17
- const theme = getTheme('toolbar');
18
-
19
- const context = $state({ separators: false });
20
- setContext('toolbar', context);
21
-
22
- let frameColor = $derived(embedded ? 'default' : color);
23
-
24
- let { base, content } = $derived(
25
- toolbar({
26
- color: frameColor,
27
- embedded,
28
- separators: context.separators
29
- })
30
- );
31
-
32
- // let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
33
-
34
- // let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
35
- </script>
36
-
37
- <div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
38
- <div class={content({ class: clsx(theme?.content, classes?.content) })}>
39
- {@render children?.()}
40
- </div>
41
- {#if end}
42
- {@render end()}
43
- {/if}
44
- </div>
45
-
46
- <!--
47
- @component
48
- [Go to docs](https://flowbite-svelte.com/)
49
- ## Type
50
- [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1116)
51
- ## Props
52
- @prop children
53
- @prop end
54
- @prop color
55
- @prop embedded
56
- @prop class: className
57
- @prop classes
58
- @prop ...restProps
59
- -->
1
+ <script lang="ts">
2
+ import clsx from 'clsx';
3
+ import { setContext } from 'svelte';
4
+ import { toolbar } from './index.js';
5
+ import { getTheme, type ToolbarProps } from '../../index.js';
6
+
7
+ let {
8
+ children,
9
+ end,
10
+ color,
11
+ embedded,
12
+ class: className,
13
+ classes,
14
+ ...restProps
15
+ }: ToolbarProps = $props();
16
+
17
+ const theme = getTheme('toolbar');
18
+
19
+ const context = $state({ separators: false });
20
+ setContext('toolbar', context);
21
+
22
+ let frameColor = $derived(embedded ? 'default' : color);
23
+
24
+ let { base, content } = $derived(
25
+ toolbar({
26
+ color: frameColor,
27
+ embedded,
28
+ separators: context.separators
29
+ })
30
+ );
31
+
32
+ // let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
33
+
34
+ // let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
35
+ </script>
36
+
37
+ <div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
38
+ <div class={content({ class: clsx(theme?.content, classes?.content) })}>
39
+ {@render children?.()}
40
+ </div>
41
+ {#if end}
42
+ {@render end()}
43
+ {/if}
44
+ </div>
45
+
46
+ <!--
47
+ @component
48
+ [Go to docs](https://flowbite-svelte.com/)
49
+ ## Type
50
+ [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1116)
51
+ ## Props
52
+ @prop children
53
+ @prop end
54
+ @prop color
55
+ @prop embedded
56
+ @prop class: className
57
+ @prop classes
58
+ @prop ...restProps
59
+ -->
@@ -1,56 +1,56 @@
1
- <script lang="ts">
2
- import { getContext } from 'svelte';
3
- import { toolbarButton } from './index.js';
4
-
5
- import clsx from 'clsx';
6
- import { getTheme, type ToolbarButtonProps } from '../../index.js';
7
-
8
- const background = getContext('background');
9
- let {
10
- children,
11
- color,
12
- name,
13
- 'aria-label': ariaLabel,
14
- size,
15
- class: className,
16
- ...restProps
17
- }: ToolbarButtonProps = $props();
18
-
19
- const theme = getTheme('toolbarButton');
20
-
21
- const buttonCls = $derived(
22
- toolbarButton({
23
- color,
24
- size,
25
- background: !!background,
26
- class: clsx(theme, className)
27
- })
28
- );
29
- </script>
30
-
31
- {#if restProps.href === undefined}
32
- <button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
33
- {#if name}<span class="sr-only">{name}</span>{/if}
34
- {@render children?.()}
35
- </button>
36
- {:else}
37
- <a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
38
- {#if name}<span class="sr-only">{name}</span>{/if}
39
- {@render children?.()}
40
- </a>
41
- {/if}
42
-
43
- <!--
44
- @component
45
- [Go to docs](https://flowbite-svelte.com/)
46
- ## Type
47
- [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1122)
48
- ## Props
49
- @prop children
50
- @prop color
51
- @prop name
52
- @prop "aria-label": ariaLabel
53
- @prop size
54
- @prop class: className
55
- @prop ...restProps
56
- -->
1
+ <script lang="ts">
2
+ import { getContext } from 'svelte';
3
+ import { toolbarButton } from './index.js';
4
+
5
+ import clsx from 'clsx';
6
+ import { getTheme, type ToolbarButtonProps } from '../../index.js';
7
+
8
+ const background = getContext('background');
9
+ let {
10
+ children,
11
+ color,
12
+ name,
13
+ 'aria-label': ariaLabel,
14
+ size,
15
+ class: className,
16
+ ...restProps
17
+ }: ToolbarButtonProps = $props();
18
+
19
+ const theme = getTheme('toolbarButton');
20
+
21
+ const buttonCls = $derived(
22
+ toolbarButton({
23
+ color,
24
+ size,
25
+ background: !!background,
26
+ class: clsx(theme, className)
27
+ })
28
+ );
29
+ </script>
30
+
31
+ {#if restProps.href === undefined}
32
+ <button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
33
+ {#if name}<span class="sr-only">{name}</span>{/if}
34
+ {@render children?.()}
35
+ </button>
36
+ {:else}
37
+ <a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
38
+ {#if name}<span class="sr-only">{name}</span>{/if}
39
+ {@render children?.()}
40
+ </a>
41
+ {/if}
42
+
43
+ <!--
44
+ @component
45
+ [Go to docs](https://flowbite-svelte.com/)
46
+ ## Type
47
+ [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1122)
48
+ ## Props
49
+ @prop children
50
+ @prop color
51
+ @prop name
52
+ @prop "aria-label": ariaLabel
53
+ @prop size
54
+ @prop class: className
55
+ @prop ...restProps
56
+ -->
@@ -1,43 +1,43 @@
1
- <script lang="ts">
2
- import clsx from 'clsx';
3
- import { getContext } from 'svelte';
4
- import { toolbarGroup } from './index.js';
5
- import { getTheme, type ToolbarGroupProps } from '../../index.js';
6
-
7
- let {
8
- children,
9
- spacing,
10
- padding,
11
- position = 'middle',
12
- class: className,
13
- ...restProps
14
- }: ToolbarGroupProps = $props();
15
-
16
- const theme = getTheme('toolbarGroup');
17
-
18
- const groupCls = $derived(
19
- toolbarGroup({ spacing, padding, position, class: clsx(theme, className) })
20
- );
21
-
22
- const context = getContext<Record<string, boolean>>('toolbar');
23
-
24
- if (context) context.separators = true;
25
- </script>
26
-
27
- <div {...restProps} class={groupCls}>
28
- {@render children?.()}
29
- </div>
30
-
31
- <!--
32
- @component
33
- [Go to docs](https://flowbite-svelte.com/)
34
- ## Type
35
- [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
36
- ## Props
37
- @prop children
38
- @prop spacing
39
- @prop padding
40
- @prop position = "middle"
41
- @prop class: className
42
- @prop ...restProps
43
- -->
1
+ <script lang="ts">
2
+ import clsx from 'clsx';
3
+ import { getContext } from 'svelte';
4
+ import { toolbarGroup } from './index.js';
5
+ import { getTheme, type ToolbarGroupProps } from '../../index.js';
6
+
7
+ let {
8
+ children,
9
+ spacing,
10
+ padding,
11
+ position = 'middle',
12
+ class: className,
13
+ ...restProps
14
+ }: ToolbarGroupProps = $props();
15
+
16
+ const theme = getTheme('toolbarGroup');
17
+
18
+ const groupCls = $derived(
19
+ toolbarGroup({ spacing, padding, position, class: clsx(theme, className) })
20
+ );
21
+
22
+ const context = getContext<Record<string, boolean>>('toolbar');
23
+
24
+ if (context) context.separators = true;
25
+ </script>
26
+
27
+ <div {...restProps} class={groupCls}>
28
+ {@render children?.()}
29
+ </div>
30
+
31
+ <!--
32
+ @component
33
+ [Go to docs](https://flowbite-svelte.com/)
34
+ ## Type
35
+ [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
36
+ ## Props
37
+ @prop children
38
+ @prop spacing
39
+ @prop padding
40
+ @prop position = "middle"
41
+ @prop class: className
42
+ @prop ...restProps
43
+ -->
@@ -1,51 +1,51 @@
1
- <script lang="ts">
2
- import { Popper, type TooltipProps, type TriggeredToggleEvent } from '../../index.js';
3
- import clsx from 'clsx';
4
- import { tooltip } from './theme.js';
5
-
6
- let {
7
- type = 'dark',
8
- color = undefined,
9
- trigger = 'hover',
10
- arrow = true,
11
- children,
12
- placement = 'top',
13
- onbeforetoggle: _onbeforetoggle,
14
- class: className,
15
- isOpen = $bindable(false),
16
- ...restProps
17
- }: TooltipProps = $props();
18
-
19
- const base = $derived(tooltip({ color, type, class: clsx(className) }));
20
- function onbeforetoggle(ev: TriggeredToggleEvent) {
21
- // block all focusable elements inside the tooltip
22
- if (ev.target instanceof HTMLElement) {
23
- ev.target
24
- .querySelectorAll(
25
- 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]'
26
- )
27
- .forEach((element) => element.setAttribute('tabindex', '-1'));
28
- }
29
- // bubble event to parent
30
- _onbeforetoggle?.(ev);
31
- }
32
- </script>
33
-
34
- <Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base} {onbeforetoggle}>
35
- <div class="pointer-events-none">{@render children()}</div>
36
- </Popper>
37
-
38
- <!--
39
- @component
40
- ## Props
41
- @prop type = "dark"
42
- @prop color = undefined
43
- @prop trigger = "hover"
44
- @prop arrow = true
45
- @prop children
46
- @prop placement = "top"
47
- @prop onbeforetoggle: _onbeforetoggle
48
- @prop class: className
49
- @prop isOpen = $bindable(false)
50
- @prop ...restProps
51
- -->
1
+ <script lang="ts">
2
+ import { Popper, type TooltipProps, type TriggeredToggleEvent } from '../../index.js';
3
+ import clsx from 'clsx';
4
+ import { tooltip } from './theme.js';
5
+
6
+ let {
7
+ type = 'dark',
8
+ color = undefined,
9
+ trigger = 'hover',
10
+ arrow = true,
11
+ children,
12
+ placement = 'top',
13
+ onbeforetoggle: _onbeforetoggle,
14
+ class: className,
15
+ isOpen = $bindable(false),
16
+ ...restProps
17
+ }: TooltipProps = $props();
18
+
19
+ const base = $derived(tooltip({ color, type, class: clsx(className) }));
20
+ function onbeforetoggle(ev: TriggeredToggleEvent) {
21
+ // block all focusable elements inside the tooltip
22
+ if (ev.target instanceof HTMLElement) {
23
+ ev.target
24
+ .querySelectorAll(
25
+ 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]'
26
+ )
27
+ .forEach((element) => element.setAttribute('tabindex', '-1'));
28
+ }
29
+ // bubble event to parent
30
+ _onbeforetoggle?.(ev);
31
+ }
32
+ </script>
33
+
34
+ <Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base} {onbeforetoggle}>
35
+ <div class="pointer-events-none">{@render children()}</div>
36
+ </Popper>
37
+
38
+ <!--
39
+ @component
40
+ ## Props
41
+ @prop type = "dark"
42
+ @prop color = undefined
43
+ @prop trigger = "hover"
44
+ @prop arrow = true
45
+ @prop children
46
+ @prop placement = "top"
47
+ @prop onbeforetoggle: _onbeforetoggle
48
+ @prop class: className
49
+ @prop isOpen = $bindable(false)
50
+ @prop ...restProps
51
+ -->