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
@@ -0,0 +1,48 @@
1
+ <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
+ import type {Snippet} from 'svelte';
4
+ import type {
5
+ CreateAlertDialogProps,
6
+ CreateAlertDialogReturn,
7
+ } from './create-alert-dialog.svelte.js';
8
+
9
+ export interface AlertDialogProps
10
+ extends CreateAlertDialogProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateAlertDialogReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {createPresence} from '../presence/create-presence.svelte.js';
18
+ import {
19
+ setPresenceContext,
20
+ setPresenceStrategyPropsContext,
21
+ } from '../presence/presence-context.svelte.js';
22
+ import {reflect} from '@zag-js/svelte';
23
+ import {createSplitProps} from '@zag-js/utils';
24
+ import {setAlertDialogContext} from './alert-dialog-context.svelte.js';
25
+ import {createAlertDialog} from './create-alert-dialog.svelte.js';
26
+
27
+ let {children, ...props}: AlertDialogProps = $props();
28
+
29
+ let [presenceStrategyProps, createDialogProps] = $derived(
30
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
+ props,
32
+ ),
33
+ );
34
+
35
+ let alertDialog = createAlertDialog(reflect(() => createDialogProps));
36
+ let presence = createPresence(
37
+ reflect(() => ({
38
+ ...presenceStrategyProps,
39
+ present: alertDialog.open,
40
+ })),
41
+ );
42
+
43
+ setAlertDialogContext(alertDialog);
44
+ setPresenceContext(presence);
45
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
46
+ </script>
47
+
48
+ {@render children?.(alertDialog)}
@@ -0,0 +1,24 @@
1
+ import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
2
+ import type { Snippet } from 'svelte';
3
+ import type { CreateAlertDialogProps, CreateAlertDialogReturn } from './create-alert-dialog.svelte.js';
4
+ export interface AlertDialogProps extends CreateAlertDialogProps, PresenceStrategyProps {
5
+ children?: Snippet<[CreateAlertDialogReturn]>;
6
+ }
7
+ 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> {
8
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
9
+ $$bindings?: Bindings;
10
+ } & Exports;
11
+ (internal: unknown, props: Props & {
12
+ $$events?: Events;
13
+ $$slots?: Slots;
14
+ }): Exports & {
15
+ $set?: any;
16
+ $on?: any;
17
+ };
18
+ z_$$bindings?: Bindings;
19
+ }
20
+ declare const AlertDialogRoot: $$__sveltets_2_IsomorphicComponent<AlertDialogProps, {
21
+ [evt: string]: CustomEvent<any>;
22
+ }, {}, {}, "">;
23
+ type AlertDialogRoot = InstanceType<typeof AlertDialogRoot>;
24
+ export default AlertDialogRoot;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertDialogTitleProps
5
+ extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
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
+ }: AlertDialogTitleProps = $props();
18
+
19
+ let alertDialog = getAlertDialogContext();
20
+
21
+ let mergedProps = $derived(mergeProps(alertDialog.getTitleProps(), props));
22
+ </script>
23
+
24
+ {#if asChild}
25
+ {@render asChild(mergedProps)}
26
+ {:else}
27
+ <h2 bind:this={ref} {...mergedProps}>
28
+ {@render children?.()}
29
+ </h2>
30
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertDialogTitleProps 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 AlertDialogTitle: $$__sveltets_2_IsomorphicComponent<AlertDialogTitleProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AlertDialogTitle = InstanceType<typeof AlertDialogTitle>;
21
+ export default AlertDialogTitle;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface AlertDialogTriggerProps
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
+ }: AlertDialogTriggerProps = $props();
18
+
19
+ let alertDialog = getAlertDialogContext();
20
+
21
+ let mergedProps = $derived(mergeProps(alertDialog.getTriggerProps(), props));
22
+ </script>
23
+
24
+ {#if asChild}
25
+ {@render asChild(mergedProps)}
26
+ {:else}
27
+ <button bind:this={ref} type="button" {...mergedProps}>
28
+ {@render children?.()}
29
+ </button>
30
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface AlertDialogTriggerProps 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 AlertDialogTrigger: $$__sveltets_2_IsomorphicComponent<AlertDialogTriggerProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type AlertDialogTrigger = InstanceType<typeof AlertDialogTrigger>;
21
+ export default AlertDialogTrigger;
@@ -0,0 +1,8 @@
1
+ export { default as Backdrop } from './alert-dialog-backdrop.svelte';
2
+ export { default as CloseTrigger } from './alert-dialog-close-trigger.svelte';
3
+ export { default as Content } from './alert-dialog-content.svelte';
4
+ export { default as Description } from './alert-dialog-description.svelte';
5
+ export { default as Positioner } from './alert-dialog-positioner.svelte';
6
+ export { default as Root } from './alert-dialog-root.svelte';
7
+ export { default as Title } from './alert-dialog-title.svelte';
8
+ export { default as Trigger } from './alert-dialog-trigger.svelte';
@@ -0,0 +1,8 @@
1
+ export { default as Backdrop } from './alert-dialog-backdrop.svelte';
2
+ export { default as CloseTrigger } from './alert-dialog-close-trigger.svelte';
3
+ export { default as Content } from './alert-dialog-content.svelte';
4
+ export { default as Description } from './alert-dialog-description.svelte';
5
+ export { default as Positioner } from './alert-dialog-positioner.svelte';
6
+ export { default as Root } from './alert-dialog-root.svelte';
7
+ export { default as Title } from './alert-dialog-title.svelte';
8
+ export { default as Trigger } from './alert-dialog-trigger.svelte';
@@ -0,0 +1,8 @@
1
+ import * as dialog from '@zag-js/dialog';
2
+ export interface CreateAlertDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'role' | 'getRootNode' | 'open.controlled'> {
3
+ id?: string;
4
+ openControlled?: boolean;
5
+ }
6
+ export interface CreateAlertDialogReturn extends dialog.Api {
7
+ }
8
+ export declare function createAlertDialog(props: CreateAlertDialogProps): CreateAlertDialogReturn;
@@ -0,0 +1,48 @@
1
+ import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
+ import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
+ import { mergeProps } from '../merge-props.js';
4
+ import * as dialog from '@zag-js/dialog';
5
+ import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
+ import { uid } from 'uid';
7
+ import { parts } from './alert-dialog-anatomy.js';
8
+ export function createAlertDialog(props) {
9
+ const locale = getLocaleContext();
10
+ const environment = getEnvironmentContext();
11
+ const id = uid();
12
+ const context = reflect(() => ({
13
+ id,
14
+ dir: locale?.dir,
15
+ role: 'alertdialog',
16
+ ...props,
17
+ getRootNode: environment?.getRootNode,
18
+ 'open.controlled': props.openControlled,
19
+ }));
20
+ const [state, send] = useMachine(dialog.machine(context), { context });
21
+ return reflect(() => {
22
+ const o = dialog.connect(state, send, normalizeProps);
23
+ return {
24
+ ...o,
25
+ getBackdropProps() {
26
+ return mergeProps(o.getBackdropProps(), parts.backdrop.attrs);
27
+ },
28
+ getCloseTriggerProps() {
29
+ return mergeProps(o.getCloseTriggerProps(), parts.closeTrigger.attrs);
30
+ },
31
+ getContentProps() {
32
+ return mergeProps(o.getContentProps(), parts.content.attrs);
33
+ },
34
+ getDescriptionProps() {
35
+ return mergeProps(o.getDescriptionProps(), parts.description.attrs);
36
+ },
37
+ getPositionerProps() {
38
+ return mergeProps(o.getPositionerProps(), parts.positioner.attrs);
39
+ },
40
+ getTitleProps() {
41
+ return mergeProps(o.getTitleProps(), parts.title.attrs);
42
+ },
43
+ getTriggerProps() {
44
+ return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
45
+ },
46
+ };
47
+ });
48
+ }
@@ -0,0 +1,11 @@
1
+ export * as AlertDialog from './alert-dialog.js';
2
+ export type { AlertDialogBackdropProps } from './alert-dialog-backdrop.svelte';
3
+ export type { AlertDialogCloseTriggerProps } from './alert-dialog-close-trigger.svelte';
4
+ export type { AlertDialogContentProps } from './alert-dialog-content.svelte';
5
+ export type { AlertDialogDescriptionProps } from './alert-dialog-description.svelte';
6
+ export type { AlertDialogPositionerProps } from './alert-dialog-positioner.svelte';
7
+ export type { AlertDialogProps } from './alert-dialog-root.svelte';
8
+ export type { AlertDialogTitleProps } from './alert-dialog-title.svelte';
9
+ export type { AlertDialogTriggerProps } from './alert-dialog-trigger.svelte';
10
+ export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
11
+ export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
@@ -0,0 +1,3 @@
1
+ export * as AlertDialog from './alert-dialog.js';
2
+ export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
3
+ export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
@@ -0,0 +1,2 @@
1
+ export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"link" | "list" | "separator" | "root" | "item">;
2
+ export declare const parts: Record<"link" | "list" | "separator" | "root" | "item", import("@zag-js/anatomy").AnatomyPart>;
@@ -0,0 +1,3 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ export const anatomy = createAnatomy('breadcrumbs').parts('root', 'list', 'item', 'link', 'separator');
3
+ export const parts = anatomy.build();
@@ -0,0 +1,2 @@
1
+ import type { CreateBreadcrumbsReturn } from './create-breadcrumbs.js';
2
+ export declare const getBreadcrumbsContext: () => CreateBreadcrumbsReturn, setBreadcrumbsContext: (context: CreateBreadcrumbsReturn | (() => CreateBreadcrumbsReturn)) => void;
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../create-context.svelte.js';
2
+ export const [getBreadcrumbsContext, setBreadcrumbsContext] = createContext('Breadcrumbs');
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface BreadcrumbsItemProps
5
+ extends HtmlIngredientProps<'li', HTMLLIElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {createBreadcrumbs} from './create-breadcrumbs.js';
11
+
12
+ let {ref, asChild, children, ...props}: BreadcrumbsItemProps = $props();
13
+
14
+ let breadcrumbs = createBreadcrumbs();
15
+
16
+ let attrs = $derived(mergeProps(breadcrumbs.getItemProps(), props));
17
+ </script>
18
+
19
+ {#if asChild}
20
+ {@render asChild(attrs)}
21
+ {:else}
22
+ <li bind:this={ref} {...attrs}>
23
+ {@render children?.()}
24
+ </li>
25
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface BreadcrumbsItemProps extends HtmlIngredientProps<'li', HTMLLIElement> {
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 BreadcrumbsItem: $$__sveltets_2_IsomorphicComponent<BreadcrumbsItemProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "">;
20
+ type BreadcrumbsItem = InstanceType<typeof BreadcrumbsItem>;
21
+ export default BreadcrumbsItem;
@@ -0,0 +1,33 @@
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {LinkProps} from './create-breadcrumbs.js';
4
+
5
+ export interface BreadcrumbsLinkProps
6
+ extends Assign<HtmlIngredientProps<'a', HTMLAnchorElement>, LinkProps> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {createSplitProps} from '@zag-js/utils';
12
+ import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
13
+
14
+ let {ref, asChild, children, ...props}: BreadcrumbsLinkProps = $props();
15
+
16
+ let [linkProps, localProps] = $derived(
17
+ createSplitProps<LinkProps>(['href', 'current'])(props),
18
+ );
19
+
20
+ let breadcrumbs = getBreadcrumbsContext();
21
+
22
+ let attrs = $derived(
23
+ mergeProps(breadcrumbs.getLinkProps(linkProps), localProps),
24
+ );
25
+ </script>
26
+
27
+ {#if asChild}
28
+ {@render asChild(attrs)}
29
+ {:else}
30
+ <a bind:this={ref} {...attrs}>
31
+ {@render children?.()}
32
+ </a>
33
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { Assign, HtmlIngredientProps } from '../types.js';
2
+ import type { LinkProps } from './create-breadcrumbs.js';
3
+ export interface BreadcrumbsLinkProps extends Assign<HtmlIngredientProps<'a', HTMLAnchorElement>, LinkProps> {
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 BreadcrumbsLink: $$__sveltets_2_IsomorphicComponent<BreadcrumbsLinkProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type BreadcrumbsLink = InstanceType<typeof BreadcrumbsLink>;
22
+ export default BreadcrumbsLink;
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface BreadcrumbsListProps
5
+ extends HtmlIngredientProps<'ol', HTMLOListElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
11
+
12
+ let {ref, asChild, children, ...props}: BreadcrumbsListProps = $props();
13
+
14
+ let breadcrumbs = getBreadcrumbsContext();
15
+
16
+ let attrs = $derived(mergeProps(breadcrumbs.getListProps(), props));
17
+ </script>
18
+
19
+ {#if asChild}
20
+ {@render asChild(attrs)}
21
+ {:else}
22
+ <ol bind:this={ref} {...attrs}>
23
+ {@render children?.()}
24
+ </ol>
25
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface BreadcrumbsListProps extends HtmlIngredientProps<'ol', HTMLOListElement> {
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 BreadcrumbsList: $$__sveltets_2_IsomorphicComponent<BreadcrumbsListProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "">;
20
+ type BreadcrumbsList = InstanceType<typeof BreadcrumbsList>;
21
+ export default BreadcrumbsList;
@@ -0,0 +1,29 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {CreateBreadcrumbsReturn} from './create-breadcrumbs.js';
4
+
5
+ export interface BreadcrumbsProps
6
+ extends HtmlIngredientProps<'nav', HTMLElement, CreateBreadcrumbsReturn> {}
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import {mergeProps} from '../merge-props.js';
11
+ import {setBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
12
+ import {createBreadcrumbs} from './create-breadcrumbs.js';
13
+
14
+ let {ref, asChild, children, ...props}: BreadcrumbsProps = $props();
15
+
16
+ let breadcrumbs = createBreadcrumbs();
17
+
18
+ let attrs = $derived(mergeProps(breadcrumbs.getRootProps(), props));
19
+
20
+ setBreadcrumbsContext(breadcrumbs);
21
+ </script>
22
+
23
+ {#if asChild}
24
+ {@render asChild(attrs, breadcrumbs)}
25
+ {:else}
26
+ <nav bind:this={ref} {...attrs}>
27
+ {@render children?.(breadcrumbs)}
28
+ </nav>
29
+ {/if}
@@ -0,0 +1,22 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ import type { CreateBreadcrumbsReturn } from './create-breadcrumbs.js';
3
+ export interface BreadcrumbsProps extends HtmlIngredientProps<'nav', HTMLElement, CreateBreadcrumbsReturn> {
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 BreadcrumbsRoot: $$__sveltets_2_IsomorphicComponent<BreadcrumbsProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type BreadcrumbsRoot = InstanceType<typeof BreadcrumbsRoot>;
22
+ export default BreadcrumbsRoot;
@@ -0,0 +1,25 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface BreadcrumbsSeparatorProps
5
+ extends HtmlIngredientProps<'span', HTMLSpanElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
11
+
12
+ let {ref, asChild, children, ...props}: BreadcrumbsSeparatorProps = $props();
13
+
14
+ let breadcrumbs = getBreadcrumbsContext();
15
+
16
+ let attrs = $derived(mergeProps(breadcrumbs.getSeparatorProps(), 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 BreadcrumbsSeparatorProps 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 BreadcrumbsSeparator: $$__sveltets_2_IsomorphicComponent<BreadcrumbsSeparatorProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "">;
20
+ type BreadcrumbsSeparator = InstanceType<typeof BreadcrumbsSeparator>;
21
+ export default BreadcrumbsSeparator;
@@ -0,0 +1,5 @@
1
+ export { default as Item } from './breadcrumbs-item.svelte';
2
+ export { default as Link } from './breadcrumbs-link.svelte';
3
+ export { default as List } from './breadcrumbs-list.svelte';
4
+ export { default as Root } from './breadcrumbs-root.svelte';
5
+ export { default as Separator } from './breadcrumbs-separator.svelte';
@@ -0,0 +1,5 @@
1
+ export { default as Item } from './breadcrumbs-item.svelte';
2
+ export { default as Link } from './breadcrumbs-link.svelte';
3
+ export { default as List } from './breadcrumbs-list.svelte';
4
+ export { default as Root } from './breadcrumbs-root.svelte';
5
+ export { default as Separator } from './breadcrumbs-separator.svelte';
@@ -0,0 +1,13 @@
1
+ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLiAttributes, HTMLOlAttributes } from 'svelte/elements';
2
+ export interface LinkProps {
3
+ href: string;
4
+ current?: boolean;
5
+ }
6
+ export interface CreateBreadcrumbsReturn {
7
+ getRootProps(): HTMLAttributes<HTMLElement>;
8
+ getListProps(): HTMLOlAttributes;
9
+ getItemProps(): HTMLLiAttributes;
10
+ getLinkProps(props: LinkProps): HTMLAnchorAttributes;
11
+ getSeparatorProps(): HTMLAttributes<HTMLElement>;
12
+ }
13
+ export declare function createBreadcrumbs(): CreateBreadcrumbsReturn;
@@ -0,0 +1,47 @@
1
+ import { ariaAttr, dataAttr } from '@zag-js/dom-query';
2
+ import { parts } from './breadcrumbs-anatomy.js';
3
+ export function createBreadcrumbs() {
4
+ function getRootProps() {
5
+ return {
6
+ role: 'navigation',
7
+ 'aria-label': 'Breadcrumb',
8
+ ...parts.root.attrs,
9
+ };
10
+ }
11
+ function getListProps() {
12
+ return {
13
+ role: 'list',
14
+ ...parts.list.attrs,
15
+ };
16
+ }
17
+ function getItemProps() {
18
+ return {
19
+ role: 'listitem',
20
+ ...parts.item.attrs,
21
+ };
22
+ }
23
+ function getLinkProps(props) {
24
+ return {
25
+ role: 'link',
26
+ href: props.current ? undefined : props.href,
27
+ 'aria-current': props.current ? 'page' : undefined,
28
+ 'data-current': dataAttr(props.current),
29
+ 'aria-disabled': ariaAttr(props.current),
30
+ 'data-disabled': dataAttr(props.current),
31
+ ...parts.link.attrs,
32
+ };
33
+ }
34
+ function getSeparatorProps() {
35
+ return {
36
+ 'aria-hidden': true,
37
+ ...parts.separator.attrs,
38
+ };
39
+ }
40
+ return {
41
+ getRootProps,
42
+ getListProps,
43
+ getItemProps,
44
+ getLinkProps,
45
+ getSeparatorProps,
46
+ };
47
+ }
@@ -0,0 +1,8 @@
1
+ export * as Breadcrumbs from './breadcrumbs.js';
2
+ export type { BreadcrumbsItemProps } from './breadcrumbs-item.svelte';
3
+ export type { BreadcrumbsLinkProps } from './breadcrumbs-link.svelte';
4
+ export type { BreadcrumbsListProps } from './breadcrumbs-list.svelte';
5
+ export type { BreadcrumbsProps } from './breadcrumbs-root.svelte';
6
+ export type { BreadcrumbsSeparatorProps } from './breadcrumbs-separator.svelte';
7
+ export { anatomy as breadcrumbsAnatomy } from './breadcrumbs-anatomy.js';
8
+ export { getBreadcrumbsContext as getBreadcrumbContext } from './breadcrumbs-context.svelte.js';
@@ -0,0 +1,3 @@
1
+ export * as Breadcrumbs from './breadcrumbs.js';
2
+ export { anatomy as breadcrumbsAnatomy } from './breadcrumbs-anatomy.js';
3
+ export { getBreadcrumbsContext as getBreadcrumbContext } from './breadcrumbs-context.svelte.js';