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
+ CreateDrawerProps,
6
+ CreateDrawerReturn,
7
+ } from './create-drawer.svelte.js';
8
+
9
+ export interface DrawerProps
10
+ extends CreateDrawerProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateDrawerReturn]>;
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 {createDrawer} from './create-drawer.svelte.js';
25
+ import {setDrawerContext} from './drawer-context.svelte.js';
26
+
27
+ let {children, ...props}: DrawerProps = $props();
28
+
29
+ let [presenceStrategyProps, createDialogProps] = $derived(
30
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
+ props,
32
+ ),
33
+ );
34
+
35
+ let drawer = createDrawer(reflect(() => createDialogProps));
36
+ let presence = createPresence(
37
+ reflect(() => ({
38
+ ...presenceStrategyProps,
39
+ present: drawer.open,
40
+ })),
41
+ );
42
+
43
+ setDrawerContext(drawer);
44
+ setPresenceContext(presence);
45
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
46
+ </script>
47
+
48
+ {@render children?.(drawer)}
@@ -0,0 +1,24 @@
1
+ import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
2
+ import type { Snippet } from 'svelte';
3
+ import type { CreateDrawerProps, CreateDrawerReturn } from './create-drawer.svelte.js';
4
+ export interface DrawerProps extends CreateDrawerProps, PresenceStrategyProps {
5
+ children?: Snippet<[CreateDrawerReturn]>;
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 DrawerRoot: $$__sveltets_2_IsomorphicComponent<DrawerProps, {
21
+ [evt: string]: CustomEvent<any>;
22
+ }, {}, {}, "">;
23
+ type DrawerRoot = InstanceType<typeof DrawerRoot>;
24
+ export default DrawerRoot;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface DrawerTitleProps
5
+ extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getDrawerContext} from './drawer-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: DrawerTitleProps = $props();
18
+
19
+ let drawer = getDrawerContext();
20
+
21
+ let mergedProps = $derived(mergeProps(drawer.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 DrawerTitleProps 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 DrawerTitle: $$__sveltets_2_IsomorphicComponent<DrawerTitleProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type DrawerTitle = InstanceType<typeof DrawerTitle>;
21
+ export default DrawerTitle;
@@ -0,0 +1,30 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface DrawerTriggerProps
5
+ extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getDrawerContext} from './drawer-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: DrawerTriggerProps = $props();
18
+
19
+ let drawer = getDrawerContext();
20
+
21
+ let mergedProps = $derived(mergeProps(drawer.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 DrawerTriggerProps 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 DrawerTrigger: $$__sveltets_2_IsomorphicComponent<DrawerTriggerProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type DrawerTrigger = InstanceType<typeof DrawerTrigger>;
21
+ export default DrawerTrigger;
@@ -0,0 +1,11 @@
1
+ export { default as Backdrop } from './drawer-backdrop.svelte';
2
+ export { default as Body } from './drawer-body.svelte';
3
+ export { default as CloseTrigger } from './drawer-close-trigger.svelte';
4
+ export { default as Content } from './drawer-content.svelte';
5
+ export { default as Description } from './drawer-description.svelte';
6
+ export { default as Footer } from './drawer-footer.svelte';
7
+ export { default as Header } from './drawer-header.svelte';
8
+ export { default as Positioner } from './drawer-positioner.svelte';
9
+ export { default as Root } from './drawer-root.svelte';
10
+ export { default as Title } from './drawer-title.svelte';
11
+ export { default as Trigger } from './drawer-trigger.svelte';
@@ -0,0 +1,11 @@
1
+ export { default as Backdrop } from './drawer-backdrop.svelte';
2
+ export { default as Body } from './drawer-body.svelte';
3
+ export { default as CloseTrigger } from './drawer-close-trigger.svelte';
4
+ export { default as Content } from './drawer-content.svelte';
5
+ export { default as Description } from './drawer-description.svelte';
6
+ export { default as Footer } from './drawer-footer.svelte';
7
+ export { default as Header } from './drawer-header.svelte';
8
+ export { default as Positioner } from './drawer-positioner.svelte';
9
+ export { default as Root } from './drawer-root.svelte';
10
+ export { default as Title } from './drawer-title.svelte';
11
+ export { default as Trigger } from './drawer-trigger.svelte';
@@ -0,0 +1,14 @@
1
+ export * as Drawer from './drawer.js';
2
+ export type { DrawerBackdropProps } from './drawer-backdrop.svelte';
3
+ export type { DrawerBodyProps } from './drawer-body.svelte';
4
+ export type { DrawerCloseTriggerProps } from './drawer-close-trigger.svelte';
5
+ export type { DrawerContentProps } from './drawer-content.svelte';
6
+ export type { DrawerDescriptionProps } from './drawer-description.svelte';
7
+ export type { DrawerFooterProps } from './drawer-footer.svelte';
8
+ export type { DrawerHeaderProps } from './drawer-header.svelte';
9
+ export type { DrawerPositionerProps } from './drawer-positioner.svelte';
10
+ export type { DrawerProps } from './drawer-root.svelte';
11
+ export type { DrawerTitleProps } from './drawer-title.svelte';
12
+ export type { DrawerTriggerProps } from './drawer-trigger.svelte';
13
+ export { anatomy as drawerAnatomy } from './drawer-anatomy.js';
14
+ export { getDrawerContext } from './drawer-context.svelte.js';
@@ -0,0 +1,3 @@
1
+ export * as Drawer from './drawer.js';
2
+ export { anatomy as drawerAnatomy } from './drawer-anatomy.js';
3
+ export { getDrawerContext } from './drawer-context.svelte.js';
@@ -1,6 +1,6 @@
1
1
  export interface Environment {
2
- getRootNode: () => ShadowRoot | Document | Node;
3
- getDocument: () => Document;
4
- getWindow: () => Window & typeof globalThis;
2
+ getRootNode(): ShadowRoot | Document | Node;
3
+ getDocument(): Document;
4
+ getWindow(): Window & typeof globalThis;
5
5
  }
6
6
  export declare const getEnvironmentContext: () => Environment | undefined, setEnvironmentContext: (context: Environment | (() => Environment)) => void;
@@ -21,13 +21,14 @@ export interface CreateFieldReturn {
21
21
  readOnly: boolean;
22
22
  invalid: boolean;
23
23
  'aria-describedby': string;
24
- getRootProps: () => HTMLAttributes<HTMLElement>;
25
- getLabelProps: () => HTMLLabelAttributes;
26
- getErrorTextProps: () => HTMLAttributes<HTMLElement>;
27
- getHelperTextProps: () => HTMLAttributes<HTMLElement>;
28
- getInputProps: () => HTMLInputAttributes;
29
- getSelectProps: () => HTMLSelectAttributes;
30
- getTextareaProps: () => HTMLTextareaAttributes;
24
+ getRootProps(): HTMLAttributes<HTMLElement>;
25
+ getLabelProps(): HTMLLabelAttributes;
26
+ getErrorTextProps(): HTMLAttributes<HTMLElement>;
27
+ getHelperTextProps(): HTMLAttributes<HTMLElement>;
28
+ getInputProps(): HTMLInputAttributes;
29
+ getSelectProps(): HTMLSelectAttributes;
30
+ getTextareaProps(): HTMLTextareaAttributes;
31
+ getRequiredIndicatorProps(): HTMLAttributes<HTMLElement>;
31
32
  }
32
33
  export declare function createField(props: CreateFieldProps): CreateFieldReturn;
33
34
  export {};
@@ -138,6 +138,16 @@ export function createField(props) {
138
138
  'data-readonly': dataAttr(readOnly),
139
139
  };
140
140
  }
141
+ function getRequiredIndicatorProps() {
142
+ return {
143
+ ...parts.requiredIndicator.attrs,
144
+ hidden: !required,
145
+ 'aria-hidden': true,
146
+ 'data-invalid': dataAttr(invalid),
147
+ 'data-disabled': dataAttr(disabled),
148
+ 'data-readonly': dataAttr(readOnly),
149
+ };
150
+ }
141
151
  return reflect(() => ({
142
152
  ids,
143
153
  disabled,
@@ -152,5 +162,6 @@ export function createField(props) {
152
162
  getInputProps,
153
163
  getSelectProps,
154
164
  getTextareaProps,
165
+ getRequiredIndicatorProps,
155
166
  }));
156
167
  }
@@ -1,2 +1,2 @@
1
- export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
2
- export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", import("@zag-js/anatomy").AnatomyPart>;
1
+ export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">;
2
+ export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", import("@zag-js/anatomy").AnatomyPart>;
@@ -1,3 +1,3 @@
1
1
  import { createAnatomy } from '@zag-js/anatomy';
2
- export const anatomy = createAnatomy('field').parts('root', 'label', 'input', 'select', 'textarea', 'errorText', 'helperText');
2
+ export const anatomy = createAnatomy('field').parts('root', 'label', 'input', 'select', 'textarea', 'errorText', 'helperText', 'requiredIndicator');
3
3
  export const parts = anatomy.build();
@@ -0,0 +1,36 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface FieldRequiredIndicatorProps
5
+ extends HtmlIngredientProps<'span', HTMLSpanElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {getFieldContext} from './field-context.svelte.js';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ asChild,
15
+ children,
16
+ ...props
17
+ }: FieldRequiredIndicatorProps = $props();
18
+
19
+ let field = getFieldContext();
20
+
21
+ let mergedProps = $derived(
22
+ mergeProps(field?.getRequiredIndicatorProps() ?? {}, props),
23
+ );
24
+ </script>
25
+
26
+ {#if asChild}
27
+ {@render asChild(mergedProps)}
28
+ {:else}
29
+ <span bind:this={ref} {...mergedProps}>
30
+ {#if children}
31
+ {@render children?.()}
32
+ {:else}
33
+ *
34
+ {/if}
35
+ </span>
36
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface FieldRequiredIndicatorProps 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 FieldRequiredIndicator: $$__sveltets_2_IsomorphicComponent<FieldRequiredIndicatorProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type FieldRequiredIndicator = InstanceType<typeof FieldRequiredIndicator>;
21
+ export default FieldRequiredIndicator;
@@ -2,6 +2,7 @@ export { default as ErrorText } from './field-error-text.svelte';
2
2
  export { default as HelperText } from './field-helper-text.svelte';
3
3
  export { default as Input } from './field-input.svelte';
4
4
  export { default as Label } from './field-label.svelte';
5
+ export { default as RequiredIndicator } from './field-required-indicator.svelte';
5
6
  export { default as Root } from './field-root.svelte';
6
7
  export { default as Select } from './field-select.svelte';
7
8
  export { default as Textarea } from './field-textarea.svelte';
@@ -2,6 +2,7 @@ export { default as ErrorText } from './field-error-text.svelte';
2
2
  export { default as HelperText } from './field-helper-text.svelte';
3
3
  export { default as Input } from './field-input.svelte';
4
4
  export { default as Label } from './field-label.svelte';
5
+ export { default as RequiredIndicator } from './field-required-indicator.svelte';
5
6
  export { default as Root } from './field-root.svelte';
6
7
  export { default as Select } from './field-select.svelte';
7
8
  export { default as Textarea } from './field-textarea.svelte';
@@ -3,6 +3,7 @@ export type { FieldErrorTextProps } from './field-error-text.svelte';
3
3
  export type { FieldHelperTextProps } from './field-helper-text.svelte';
4
4
  export type { FieldInputProps } from './field-input.svelte';
5
5
  export type { FieldLabelProps } from './field-label.svelte';
6
+ export type { FieldRequiredIndicatorProps } from './field-required-indicator.svelte';
6
7
  export type { FieldProps } from './field-root.svelte';
7
8
  export type { FieldSelectProps } from './field-select.svelte';
8
9
  export type { FieldTextareaProps } from './field-textarea.svelte';
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getFileUploadContext, setFileUploadContext] = createContext('FileUpload');
3
- export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem');
3
+ export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem [PROPS]');
package/dist/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  export * from './accordion/index.js';
2
+ export * from './alert-dialog/index.js';
3
+ export * from './alert/index.js';
2
4
  export * from './avatar/index.js';
5
+ export * from './breadcrumbs/index.js';
3
6
  export * from './carousel/index.js';
4
7
  export * from './checkbox/index.js';
5
8
  export * from './clipboard/index.js';
@@ -8,6 +11,7 @@ export * from './color-picker/index.js';
8
11
  export * from './combobox/index.js';
9
12
  export * from './date-picker/index.js';
10
13
  export * from './dialog/index.js';
14
+ export * from './drawer/index.js';
11
15
  export * from './editable/index.js';
12
16
  export * from './environment-provider/index.js';
13
17
  export * from './field/index.js';
package/dist/index.js CHANGED
@@ -1,5 +1,8 @@
1
1
  export * from './accordion/index.js';
2
+ export * from './alert-dialog/index.js';
3
+ export * from './alert/index.js';
2
4
  export * from './avatar/index.js';
5
+ export * from './breadcrumbs/index.js';
3
6
  export * from './carousel/index.js';
4
7
  export * from './checkbox/index.js';
5
8
  export * from './clipboard/index.js';
@@ -8,6 +11,7 @@ export * from './color-picker/index.js';
8
11
  export * from './combobox/index.js';
9
12
  export * from './date-picker/index.js';
10
13
  export * from './dialog/index.js';
14
+ export * from './drawer/index.js';
11
15
  export * from './editable/index.js';
12
16
  export * from './environment-provider/index.js';
13
17
  export * from './field/index.js';
@@ -1,5 +1,5 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getMenuContext, setMenuContext] = createContext('Menu', false);
3
- export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup');
4
- export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem');
3
+ export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup [PROPS]');
4
+ export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem [PROPS]');
5
5
  export const [getMenuTriggerItemContext, setMenuTriggerItemContext] = createContext('MenuTriggerItem');
@@ -1,2 +1,2 @@
1
- export declare const anatomy: import("@zag-js/anatomy").Anatomy<"label" | "root" | "item" | "itemText" | "itemControl" | "indicator">;
2
- export declare const parts: Record<"label" | "root" | "item" | "itemText" | "itemControl" | "indicator", import("@zag-js/anatomy").AnatomyPart>;
1
+ export declare const anatomy: import("@zag-js/anatomy").Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
2
+ export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", import("@zag-js/anatomy").AnatomyPart>;
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getSegmentGroupContext, setSegmentGroupContext] = createContext('SegmentGroup');
3
- export const [getSegmentGroupItemPropsContext, setSegmentGroupItemPropsContext,] = createContext('SegmentGroupItem');
3
+ export const [getSegmentGroupItemPropsContext, setSegmentGroupItemPropsContext,] = createContext('SegmentGroupItem [PROPS]');
@@ -1,4 +1,4 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getSelectContext, setSelectContext] = createContext('Select');
3
- export const [getSelectItemPropsContext, setSelectItemPropsContext] = createContext('SelectItem');
4
- export const [getSelectItemGroupPropsContext, setSelectItemGroupPropsContext] = createContext('SelectItemGroup');
3
+ export const [getSelectItemPropsContext, setSelectItemPropsContext] = createContext('SelectItem [PROPS]');
4
+ export const [getSelectItemGroupPropsContext, setSelectItemGroupPropsContext] = createContext('SelectItemGroup [PROPS]');
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getSliderContext, setSliderContext] = createContext('Slider');
3
- export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb');
3
+ export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb [PROPS]');
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getStepsContext, setStepsContext] = createContext('Steps');
3
- export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem');
3
+ export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem [PROPS]');
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getTagsInputContext, setTagsInputContext] = createContext('TagsInput');
3
- export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem');
3
+ export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem [PROPS]');
@@ -1,3 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getTimerContext, setTimerContext] = createContext('Timer');
3
- export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem');
3
+ export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem [PROPS]');
@@ -10,7 +10,7 @@ export interface CreateToggleProps {
10
10
  export interface CreateToggleReturn {
11
11
  pressed: boolean;
12
12
  setPressed: (pressed: boolean) => void;
13
- getRootProps: () => HTMLButtonAttributes;
13
+ getRootProps(): HTMLButtonAttributes;
14
14
  }
15
15
  export declare function createToggle(props: CreateToggleProps): any;
16
16
  export {};
@@ -22,6 +22,9 @@ export function createToggle(props) {
22
22
  ...parts.root.attrs,
23
23
  };
24
24
  }
25
+ $effect(() => {
26
+ pressed = props.pressed ?? false;
27
+ });
25
28
  return reflect(() => ({
26
29
  pressed,
27
30
  setPressed,
@@ -1,2 +1,2 @@
1
- export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "trigger" | "positioner" | "actionTrigger" | "closeTrigger" | "progressText" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
2
- export declare const parts: Record<"title" | "content" | "trigger" | "positioner" | "actionTrigger" | "closeTrigger" | "progressText" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight", import("@zag-js/anatomy").AnatomyPart>;
1
+ export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger" | "actionTrigger" | "progressText" | "arrow" | "arrowTip" | "spotlight">;
2
+ export declare const parts: Record<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger" | "actionTrigger" | "progressText" | "arrow" | "arrowTip" | "spotlight", import("@zag-js/anatomy").AnatomyPart>;
@@ -1,5 +1,5 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getTreeViewContext, setTreeViewContext] = createContext('TreeView');
3
- export const [getTreeViewItemPropsContext, setTreeViewItemPropsContext] = createContext('TreeViewItem');
4
- export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch');
5
- export const [getTreeViewTreePropsContext, setTreeViewTreePropsContext] = createContext('TreeViewTree');
3
+ export const [getTreeViewItemPropsContext, setTreeViewItemPropsContext] = createContext('TreeViewItem [PROPS]');
4
+ export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch [PROPS]');
5
+ export const [getTreeViewTreePropsContext, setTreeViewTreePropsContext] = createContext('TreeViewTree [PROPS]');