ui-ingredients 0.3.0 → 0.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. package/README.md +4 -0
  2. package/dist/accordion/avatar-context.svelte.js +1 -1
  3. package/dist/alert/alert-anatomy.d.ts +2 -0
  4. package/dist/alert/alert-anatomy.js +3 -0
  5. package/dist/alert/alert-context.d.ts +2 -0
  6. package/dist/alert/alert-context.js +2 -0
  7. package/dist/alert/alert-description.svelte +25 -0
  8. package/dist/alert/alert-description.svelte.d.ts +21 -0
  9. package/dist/alert/alert-indicator.svelte +25 -0
  10. package/dist/alert/alert-indicator.svelte.d.ts +21 -0
  11. package/dist/alert/alert-root.svelte +29 -0
  12. package/dist/alert/alert-root.svelte.d.ts +22 -0
  13. package/dist/alert/alert-title.svelte +25 -0
  14. package/dist/alert/alert-title.svelte.d.ts +21 -0
  15. package/dist/alert/alert.d.ts +4 -0
  16. package/dist/alert/alert.js +4 -0
  17. package/dist/alert/create-alert.svelte.d.ts +8 -0
  18. package/dist/alert/create-alert.svelte.js +31 -0
  19. package/dist/alert/index.d.ts +7 -0
  20. package/dist/alert/index.js +3 -0
  21. package/dist/alert-dialog/alert-dialog-anatomy.d.ts +2 -0
  22. package/dist/alert-dialog/alert-dialog-anatomy.js +3 -0
  23. package/dist/alert-dialog/alert-dialog-backdrop.svelte +49 -0
  24. package/dist/alert-dialog/alert-dialog-backdrop.svelte.d.ts +22 -0
  25. package/dist/alert-dialog/alert-dialog-close-trigger.svelte +32 -0
  26. package/dist/alert-dialog/alert-dialog-close-trigger.svelte.d.ts +21 -0
  27. package/dist/alert-dialog/alert-dialog-content.svelte +41 -0
  28. package/dist/alert-dialog/alert-dialog-content.svelte.d.ts +22 -0
  29. package/dist/alert-dialog/alert-dialog-context.svelte.d.ts +2 -0
  30. package/dist/alert-dialog/alert-dialog-context.svelte.js +2 -0
  31. package/dist/alert-dialog/alert-dialog-description.svelte +32 -0
  32. package/dist/alert-dialog/alert-dialog-description.svelte.d.ts +21 -0
  33. package/dist/alert-dialog/alert-dialog-positioner.svelte +40 -0
  34. package/dist/alert-dialog/alert-dialog-positioner.svelte.d.ts +21 -0
  35. package/dist/alert-dialog/alert-dialog-root.svelte +48 -0
  36. package/dist/alert-dialog/alert-dialog-root.svelte.d.ts +24 -0
  37. package/dist/alert-dialog/alert-dialog-title.svelte +30 -0
  38. package/dist/alert-dialog/alert-dialog-title.svelte.d.ts +21 -0
  39. package/dist/alert-dialog/alert-dialog-trigger.svelte +30 -0
  40. package/dist/alert-dialog/alert-dialog-trigger.svelte.d.ts +21 -0
  41. package/dist/alert-dialog/alert-dialog.d.ts +8 -0
  42. package/dist/alert-dialog/alert-dialog.js +8 -0
  43. package/dist/alert-dialog/create-alert-dialog.svelte.d.ts +8 -0
  44. package/dist/alert-dialog/create-alert-dialog.svelte.js +48 -0
  45. package/dist/alert-dialog/index.d.ts +11 -0
  46. package/dist/alert-dialog/index.js +3 -0
  47. package/dist/breadcrumbs/breadcrumbs-anatomy.d.ts +2 -0
  48. package/dist/breadcrumbs/breadcrumbs-anatomy.js +3 -0
  49. package/dist/breadcrumbs/breadcrumbs-context.svelte.d.ts +2 -0
  50. package/dist/breadcrumbs/breadcrumbs-context.svelte.js +2 -0
  51. package/dist/breadcrumbs/breadcrumbs-item.svelte +25 -0
  52. package/dist/breadcrumbs/breadcrumbs-item.svelte.d.ts +21 -0
  53. package/dist/breadcrumbs/breadcrumbs-link.svelte +33 -0
  54. package/dist/breadcrumbs/breadcrumbs-link.svelte.d.ts +22 -0
  55. package/dist/breadcrumbs/breadcrumbs-list.svelte +25 -0
  56. package/dist/breadcrumbs/breadcrumbs-list.svelte.d.ts +21 -0
  57. package/dist/breadcrumbs/breadcrumbs-root.svelte +29 -0
  58. package/dist/breadcrumbs/breadcrumbs-root.svelte.d.ts +22 -0
  59. package/dist/breadcrumbs/breadcrumbs-separator.svelte +25 -0
  60. package/dist/breadcrumbs/breadcrumbs-separator.svelte.d.ts +21 -0
  61. package/dist/breadcrumbs/breadcrumbs.d.ts +5 -0
  62. package/dist/breadcrumbs/breadcrumbs.js +5 -0
  63. package/dist/breadcrumbs/create-breadcrumbs.d.ts +13 -0
  64. package/dist/breadcrumbs/create-breadcrumbs.js +47 -0
  65. package/dist/breadcrumbs/index.d.ts +8 -0
  66. package/dist/breadcrumbs/index.js +3 -0
  67. package/dist/color-picker/color-picker-anatomy.d.ts +2 -2
  68. package/dist/color-picker/color-picker-context.svelte.js +4 -4
  69. package/dist/combobox/combobox-context.svelte.js +2 -2
  70. package/dist/date-picker/date-picker-anatomy.d.ts +2 -2
  71. package/dist/date-picker/date-picker-context.svelte.js +4 -4
  72. package/dist/dialog/create-dialog.svelte.d.ts +1 -1
  73. package/dist/dialog/create-dialog.svelte.js +1 -0
  74. package/dist/drawer/create-drawer.svelte.d.ts +12 -0
  75. package/dist/drawer/create-drawer.svelte.js +57 -0
  76. package/dist/drawer/drawer-anatomy.d.ts +2 -0
  77. package/dist/drawer/drawer-anatomy.js +3 -0
  78. package/dist/drawer/drawer-backdrop.svelte +45 -0
  79. package/dist/drawer/drawer-backdrop.svelte.d.ts +22 -0
  80. package/dist/drawer/drawer-body.svelte +30 -0
  81. package/dist/drawer/drawer-body.svelte.d.ts +21 -0
  82. package/dist/drawer/drawer-close-trigger.svelte +30 -0
  83. package/dist/drawer/drawer-close-trigger.svelte.d.ts +21 -0
  84. package/dist/drawer/drawer-content.svelte +37 -0
  85. package/dist/drawer/drawer-content.svelte.d.ts +22 -0
  86. package/dist/drawer/drawer-context.svelte.d.ts +2 -0
  87. package/dist/drawer/drawer-context.svelte.js +2 -0
  88. package/dist/drawer/drawer-description.svelte +30 -0
  89. package/dist/drawer/drawer-description.svelte.d.ts +21 -0
  90. package/dist/drawer/drawer-footer.svelte +30 -0
  91. package/dist/drawer/drawer-footer.svelte.d.ts +21 -0
  92. package/dist/drawer/drawer-header.svelte +30 -0
  93. package/dist/drawer/drawer-header.svelte.d.ts +21 -0
  94. package/dist/drawer/drawer-positioner.svelte +36 -0
  95. package/dist/drawer/drawer-positioner.svelte.d.ts +21 -0
  96. package/dist/drawer/drawer-root.svelte +48 -0
  97. package/dist/drawer/drawer-root.svelte.d.ts +24 -0
  98. package/dist/drawer/drawer-title.svelte +30 -0
  99. package/dist/drawer/drawer-title.svelte.d.ts +21 -0
  100. package/dist/drawer/drawer-trigger.svelte +30 -0
  101. package/dist/drawer/drawer-trigger.svelte.d.ts +21 -0
  102. package/dist/drawer/drawer.d.ts +11 -0
  103. package/dist/drawer/drawer.js +11 -0
  104. package/dist/drawer/index.d.ts +14 -0
  105. package/dist/drawer/index.js +3 -0
  106. package/dist/environment-provider/enviroment-provider-context.svelte.d.ts +3 -3
  107. package/dist/field/create-field.svelte.d.ts +8 -7
  108. package/dist/field/create-field.svelte.js +11 -0
  109. package/dist/field/field-anatomy.d.ts +2 -2
  110. package/dist/field/field-anatomy.js +1 -1
  111. package/dist/field/field-required-indicator.svelte +36 -0
  112. package/dist/field/field-required-indicator.svelte.d.ts +21 -0
  113. package/dist/field/field.d.ts +1 -0
  114. package/dist/field/field.js +1 -0
  115. package/dist/field/index.d.ts +1 -0
  116. package/dist/file-upload/file-upload-context.svelte.js +1 -1
  117. package/dist/index.d.ts +4 -0
  118. package/dist/index.js +4 -0
  119. package/dist/menu/menu-context.svelte.js +2 -2
  120. package/dist/segment-group/segment-group-anatomy.d.ts +2 -2
  121. package/dist/segment-group/segment-group-context.svelte.js +1 -1
  122. package/dist/select/select-context.svelte.js +2 -2
  123. package/dist/slider/slider-context.svelte.js +1 -1
  124. package/dist/steps/steps-context.svelte.js +1 -1
  125. package/dist/tags-input/tags-input-context.svelte.js +1 -1
  126. package/dist/timer/timer-context.svelte.js +1 -1
  127. package/dist/toggle/create-toggle.svelte.d.ts +1 -1
  128. package/dist/toggle/create-toggle.svelte.js +3 -0
  129. package/dist/tour/tour-anatomy.d.ts +2 -2
  130. package/dist/tree-view/tree-view-context.svelte.js +3 -3
  131. package/package.json +88 -55
package/README.md CHANGED
@@ -43,7 +43,10 @@ npm install ui-ingredients
43
43
  ## Documentation
44
44
 
45
45
  - [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
46
+ - [Alert](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert.md)
47
+ - [AlertDialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert-dialog.md)
46
48
  - [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
49
+ - [Breadcrumbs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/breadcrumbs.md)
47
50
  - [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
48
51
  - [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
49
52
  - [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
@@ -52,6 +55,7 @@ npm install ui-ingredients
52
55
  - [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
53
56
  - [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
54
57
  - [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
58
+ - [Drawer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/drawer.md)
55
59
  - [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
56
60
  - [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
57
61
  - [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getAccordionContext, setAccordionContext] = createContext('Accordion');
3
- export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem');
3
+ export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem [PROPS]');
@@ -0,0 +1,2 @@
1
+ export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "description" | "root" | "indicator">;
2
+ export declare const parts: Record<"title" | "description" | "root" | "indicator", import("@zag-js/anatomy").AnatomyPart>;
@@ -0,0 +1,3 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ export const anatomy = createAnatomy('alert').parts('root', 'title', 'description', 'indicator');
3
+ export const parts = anatomy.build();
@@ -0,0 +1,2 @@
1
+ import type { CreateAlertReturn } from './create-alert.svelte.js';
2
+ export declare const getAlertContext: () => CreateAlertReturn, setAlertContext: (context: CreateAlertReturn | (() => CreateAlertReturn)) => void;
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../create-context.svelte.js';
2
+ export const [getAlertContext, setAlertContext] = createContext('Alert');
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertDescriptionProps
5
+ extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAlertContext} from './alert-context.js';
11
+
12
+ let {ref, asChild, children, ...props}: AlertDescriptionProps = $props();
13
+
14
+ let alert = getAlertContext();
15
+
16
+ let attrs = $derived(mergeProps(alert.getDescriptionProps(), props));
17
+ </script>
18
+
19
+ {#if asChild}
20
+ {@render asChild(attrs)}
21
+ {:else}
22
+ <p bind:this={ref} {...attrs}>
23
+ {@render children?.()}
24
+ </p>
25
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertDescriptionProps extends HtmlIngredientProps<'p', HTMLParagraphElement> {
3
+ }
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AlertDescription: $$__sveltets_2_IsomorphicComponent<AlertDescriptionProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "">;
20
+ type AlertDescription = InstanceType<typeof AlertDescription>;
21
+ export default AlertDescription;
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertIndicatorProps
5
+ extends HtmlIngredientProps<'span', HTMLSpanElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAlertContext} from './alert-context.js';
11
+
12
+ let {ref, asChild, children, ...props}: AlertIndicatorProps = $props();
13
+
14
+ let alert = getAlertContext();
15
+
16
+ let attrs = $derived(mergeProps(alert.getIndicatorProps(), props));
17
+ </script>
18
+
19
+ {#if asChild}
20
+ {@render asChild(attrs)}
21
+ {:else}
22
+ <span bind:this={ref} {...attrs}>
23
+ {@render children?.()}
24
+ </span>
25
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
3
+ }
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AlertIndicator: $$__sveltets_2_IsomorphicComponent<AlertIndicatorProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "">;
20
+ type AlertIndicator = InstanceType<typeof AlertIndicator>;
21
+ export default AlertIndicator;
@@ -0,0 +1,29 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {CreateAlertReturn} from './create-alert.svelte.js';
4
+
5
+ export interface AlertProps
6
+ extends HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {setAlertContext} from './alert-context.js';
12
+ import {createAlert} from './create-alert.svelte.js';
13
+
14
+ let {ref, asChild, children, ...props}: AlertProps = $props();
15
+
16
+ let alert = createAlert();
17
+
18
+ let attrs = $derived(mergeProps(alert.getRootProps(), props));
19
+
20
+ setAlertContext(alert);
21
+ </script>
22
+
23
+ {#if asChild}
24
+ {@render asChild(attrs, alert)}
25
+ {:else}
26
+ <div bind:this={ref} {...attrs}>
27
+ {@render children?.(alert)}
28
+ </div>
29
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ import type { CreateAlertReturn } from './create-alert.svelte.js';
3
+ export interface AlertProps extends HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const AlertRoot: $$__sveltets_2_IsomorphicComponent<AlertProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type AlertRoot = InstanceType<typeof AlertRoot>;
22
+ export default AlertRoot;
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertTitleProps
5
+ extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAlertContext} from './alert-context.js';
11
+
12
+ let {ref, asChild, children, ...props}: AlertTitleProps = $props();
13
+
14
+ let alert = getAlertContext();
15
+
16
+ let attrs = $derived(mergeProps(alert.getTitleProps(), props));
17
+ </script>
18
+
19
+ {#if asChild}
20
+ {@render asChild(attrs)}
21
+ {:else}
22
+ <h2 bind:this={ref} {...attrs}>
23
+ {@render children?.()}
24
+ </h2>
25
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertTitleProps extends HtmlIngredientProps<'h2', HTMLHeadingElement> {
3
+ }
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AlertTitle: $$__sveltets_2_IsomorphicComponent<AlertTitleProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "">;
20
+ type AlertTitle = InstanceType<typeof AlertTitle>;
21
+ export default AlertTitle;
@@ -0,0 +1,4 @@
1
+ export { default as Description } from './alert-description.svelte';
2
+ export { default as Indicator } from './alert-indicator.svelte';
3
+ export { default as Root } from './alert-root.svelte';
4
+ export { default as Title } from './alert-title.svelte';
@@ -0,0 +1,4 @@
1
+ export { default as Description } from './alert-description.svelte';
2
+ export { default as Indicator } from './alert-indicator.svelte';
3
+ export { default as Root } from './alert-root.svelte';
4
+ export { default as Title } from './alert-title.svelte';
@@ -0,0 +1,8 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ export interface CreateAlertReturn {
3
+ getRootProps(): HTMLAttributes<HTMLElement>;
4
+ getTitleProps(): HTMLAttributes<HTMLElement>;
5
+ getDescriptionProps(): HTMLAttributes<HTMLElement>;
6
+ getIndicatorProps(): HTMLAttributes<HTMLElement>;
7
+ }
8
+ export declare function createAlert(): CreateAlertReturn;
@@ -0,0 +1,31 @@
1
+ import { parts } from './alert-anatomy.js';
2
+ export function createAlert() {
3
+ function getRootProps() {
4
+ return {
5
+ role: 'alert',
6
+ ...parts.root.attrs,
7
+ };
8
+ }
9
+ function getTitleProps() {
10
+ return {
11
+ ...parts.title.attrs,
12
+ };
13
+ }
14
+ function getDescriptionProps() {
15
+ return {
16
+ ...parts.description.attrs,
17
+ };
18
+ }
19
+ function getIndicatorProps() {
20
+ return {
21
+ 'aria-hidden': true,
22
+ ...parts.indicator.attrs,
23
+ };
24
+ }
25
+ return {
26
+ getRootProps,
27
+ getTitleProps,
28
+ getDescriptionProps,
29
+ getIndicatorProps,
30
+ };
31
+ }
@@ -0,0 +1,7 @@
1
+ export * as Alert from './alert.js';
2
+ export type { AlertDescriptionProps } from './alert-description.svelte';
3
+ export type { AlertIndicatorProps } from './alert-indicator.svelte';
4
+ export type { AlertProps } from './alert-root.svelte';
5
+ export type { AlertTitleProps } from './alert-title.svelte';
6
+ export { anatomy as alertAnatomy } from './alert-anatomy.js';
7
+ export { getAlertContext } from './alert-context.js';
@@ -0,0 +1,3 @@
1
+ export * as Alert from './alert.js';
2
+ export { anatomy as alertAnatomy } from './alert-anatomy.js';
3
+ export { getAlertContext } from './alert-context.js';
@@ -0,0 +1,2 @@
1
+ export declare const anatomy: import("@zag-js/anatomy").Anatomy<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
2
+ export declare const parts: Record<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;
@@ -0,0 +1,3 @@
1
+ import { anatomy as _ } from '@zag-js/dialog';
2
+ export const anatomy = _.rename('alertdialog');
3
+ export const parts = anatomy.build();
@@ -0,0 +1,49 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
4
+
5
+ export interface AlertDialogBackdropProps
6
+ extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {createPresence} from '../presence/create-presence.svelte.js';
12
+ import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
13
+ import {reflect} from '@zag-js/svelte';
14
+ import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
15
+
16
+ let {
17
+ ref = $bindable(null),
18
+ asChild,
19
+ children,
20
+ ...props
21
+ }: AlertDialogBackdropProps = $props();
22
+
23
+ let alertDialog = getAlertDialogContext();
24
+ let presenceStrategyProps = getPresenceStrategyPropsContext();
25
+ let presence = createPresence(
26
+ reflect(() => ({
27
+ ...presenceStrategyProps,
28
+ present: alertDialog.open,
29
+ })),
30
+ );
31
+
32
+ let mergedProps = $derived(
33
+ mergeProps(
34
+ alertDialog.getBackdropProps(),
35
+ presence.getPresenceProps(),
36
+ props,
37
+ ),
38
+ );
39
+ </script>
40
+
41
+ {#if presence.mounted}
42
+ {#if asChild}
43
+ {@render asChild(presence.setReference, mergedProps)}
44
+ {:else}
45
+ <div bind:this={ref} use:presence.setReference {...mergedProps}>
46
+ {@render children?.()}
47
+ </div>
48
+ {/if}
49
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ import type { Action } from 'svelte/action';
3
+ export interface AlertDialogBackdropProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const AlertDialogBackdrop: $$__sveltets_2_IsomorphicComponent<AlertDialogBackdropProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "ref">;
21
+ type AlertDialogBackdrop = InstanceType<typeof AlertDialogBackdrop>;
22
+ export default AlertDialogBackdrop;
@@ -0,0 +1,32 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertDialogCloseTriggerProps
5
+ extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AlertDialogCloseTriggerProps = $props();
18
+
19
+ let alertDialog = getAlertDialogContext();
20
+
21
+ let mergedProps = $derived(
22
+ mergeProps(alertDialog.getCloseTriggerProps(), props),
23
+ );
24
+ </script>
25
+
26
+ {#if asChild}
27
+ {@render asChild(mergedProps)}
28
+ {:else}
29
+ <button bind:this={ref} type="button" {...mergedProps}>
30
+ {@render children?.()}
31
+ </button>
32
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertDialogCloseTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
3
+ }
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AlertDialogCloseTrigger: $$__sveltets_2_IsomorphicComponent<AlertDialogCloseTriggerProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AlertDialogCloseTrigger = InstanceType<typeof AlertDialogCloseTrigger>;
21
+ export default AlertDialogCloseTrigger;
@@ -0,0 +1,41 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
4
+
5
+ export interface AlertDialogContentProps
6
+ extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {getPresenceContext} from '../presence/presence-context.svelte.js';
12
+ import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
13
+
14
+ let {
15
+ ref = $bindable(null),
16
+ asChild,
17
+ children,
18
+ ...props
19
+ }: AlertDialogContentProps = $props();
20
+
21
+ let alertDialog = getAlertDialogContext();
22
+ let presence = getPresenceContext();
23
+
24
+ let mergedProps = $derived(
25
+ mergeProps(
26
+ alertDialog.getContentProps(),
27
+ presence.getPresenceProps(),
28
+ props,
29
+ ),
30
+ );
31
+ </script>
32
+
33
+ {#if presence.mounted}
34
+ {#if asChild}
35
+ {@render asChild(presence.setReference, mergedProps)}
36
+ {:else}
37
+ <div bind:this={ref} use:presence.setReference {...mergedProps}>
38
+ {@render children?.()}
39
+ </div>
40
+ {/if}
41
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ import type { Action } from 'svelte/action';
3
+ export interface AlertDialogContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const AlertDialogContent: $$__sveltets_2_IsomorphicComponent<AlertDialogContentProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "ref">;
21
+ type AlertDialogContent = InstanceType<typeof AlertDialogContent>;
22
+ export default AlertDialogContent;
@@ -0,0 +1,2 @@
1
+ import type { CreateAlertDialogReturn } from './create-alert-dialog.svelte.js';
2
+ export declare const getAlertDialogContext: () => CreateAlertDialogReturn, setAlertDialogContext: (context: CreateAlertDialogReturn | (() => CreateAlertDialogReturn)) => void;
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../create-context.svelte.js';
2
+ export const [getAlertDialogContext, setAlertDialogContext] = createContext('AlertDialog');
@@ -0,0 +1,32 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertDialogDescriptionProps
5
+ extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: AlertDialogDescriptionProps = $props();
18
+
19
+ let alertDialog = getAlertDialogContext();
20
+
21
+ let mergedProps = $derived(
22
+ mergeProps(alertDialog.getDescriptionProps(), props),
23
+ );
24
+ </script>
25
+
26
+ {#if asChild}
27
+ {@render asChild(mergedProps)}
28
+ {:else}
29
+ <p bind:this={ref} {...mergedProps}>
30
+ {@render children?.()}
31
+ </p>
32
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertDialogDescriptionProps extends HtmlIngredientProps<'p', HTMLParagraphElement> {
3
+ }
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AlertDialogDescription: $$__sveltets_2_IsomorphicComponent<AlertDialogDescriptionProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AlertDialogDescription = InstanceType<typeof AlertDialogDescription>;
21
+ export default AlertDialogDescription;
@@ -0,0 +1,40 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertDialogPositionerProps
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getPresenceContext} from '../presence/presence-context.svelte.js';
11
+ import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
12
+
13
+ let {
14
+ ref = $bindable(null),
15
+ asChild,
16
+ children,
17
+ ...props
18
+ }: AlertDialogPositionerProps = $props();
19
+
20
+ let alertDialog = getAlertDialogContext();
21
+ let presence = getPresenceContext();
22
+
23
+ let mergedProps = $derived(
24
+ mergeProps(
25
+ alertDialog.getPositionerProps(),
26
+ presence.getPresenceProps(),
27
+ props,
28
+ ),
29
+ );
30
+ </script>
31
+
32
+ {#if presence.mounted}
33
+ {#if asChild}
34
+ {@render asChild(mergedProps)}
35
+ {:else}
36
+ <div bind:this={ref} {...mergedProps}>
37
+ {@render children?.()}
38
+ </div>
39
+ {/if}
40
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertDialogPositionerProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
+ }
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const AlertDialogPositioner: $$__sveltets_2_IsomorphicComponent<AlertDialogPositionerProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AlertDialogPositioner = InstanceType<typeof AlertDialogPositioner>;
21
+ export default AlertDialogPositioner;