ui-ingredients 0.0.20 → 0.0.22

package/dist/file-upload/root.svelte

@@ -1,3 +1,68 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateFileUploadProps, CreateFileUploadReturn} from './create-file-upload.svelte.js';
 
-<script lang="ts"></script>
+  export interface FileUploadProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateFileUploadProps> {
+    children?: Snippet<[fileUpload: CreateFileUploadReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+  import {createFileUpload} from './create-file-upload.svelte.js';
+
+  let {
+    id,
+    ids,
+    name,
+    accept,
+    locale,
+    capture,
+    required,
+    disabled,
+    validate,
+    allowDrop,
+    directory,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    onFileAccept,
+    onFileChange,
+    onFileReject,
+    translations,
+    children,
+    ...props
+  }: FileUploadProps = $props();
+
+  let fileUpload = createFileUpload({
+    id,
+    ids,
+    name,
+    accept,
+    locale,
+    capture,
+    required,
+    disabled,
+    validate,
+    allowDrop,
+    directory,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    onFileAccept,
+    onFileChange,
+    onFileReject,
+    translations,
+  });
+
+  let attrs = $derived(mergeProps(props, fileUpload.getRootProps()));
+
+  fileUploadContext.set(fileUpload);
+</script>
+
+<div {...attrs}>
+  {@render children?.(fileUpload)}
+</div>

package/dist/file-upload/root.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Root: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Root: $$__sveltets_2_IsomorphicComponent<FileUploadProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Root = InstanceType<typeof Root>;
 export default Root;

package/dist/file-upload/trigger.svelte

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadTriggerProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/file-upload/trigger.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Trigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Trigger: $$__sveltets_2_IsomorphicComponent<FileUploadTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Trigger = InstanceType<typeof Trigger>;
 export default Trigger;

package/dist/hover-card/arrow-tip.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardArrowTipProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getArrowTipProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/arrow.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardArrowProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getArrowProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/content.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardContentProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContentProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getContentProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/create-hover-card.svelte.js

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as hoverCard from '@zag-js/hover-card';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createHoverCard(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(hoverCard.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));
     const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));

package/dist/hover-card/hover-card.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/hover-card';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/hover-card/hover-card.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/hover-card';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/hover-card/index.d.ts

@@ -1,8 +1,7 @@
-export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export * as HoverCard from './hover-card.js';
 export type { HoverCardArrowTipProps } from './arrow-tip.svelte';
 export type { HoverCardArrowProps } from './arrow.svelte';
 export type { HoverCardContentProps } from './content.svelte';
-export * as HoverCard from './hover-card.js';
 export type { HoverCardPositionerProps } from './positioner.svelte';
 export type { HoverCardProps } from './root.svelte';
 export type { HoverCardTriggerProps } from './trigger.svelte';

package/dist/hover-card/index.js

@@ -1,2 +1 @@
-export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export * as HoverCard from './hover-card.js';

package/dist/hover-card/positioner.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardPositionerProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getPositionerProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/root.svelte

@@ -3,7 +3,7 @@
   import type {CreateHoverCardProps, CreateHoverCardReturn} from './create-hover-card.svelte.js';
 
   export interface HoverCardProps extends CreateHoverCardProps {
-    children?: Snippet<[api: CreateHoverCardReturn]>;
+    children?: Snippet<[hoverCard: CreateHoverCardReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {id, children, ...props}: HoverCardProps = $props();
 
-  let context = createHoverCard({id, ...props});
+  let hoverCard = createHoverCard({id, ...props});
 
-  hoverCardContext.set(context);
+  hoverCardContext.set(hoverCard);
 </script>
 
-{@render children?.(context)}
+{@render children?.(hoverCard)}

package/dist/hover-card/trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardTriggerProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getTriggerProps()));
 </script>
 
 <a {...attrs}>

package/dist/locale-provider/root.svelte

@@ -13,12 +13,12 @@
 
   let {children, ...props}: LocaleProviderProps = $props();
 
-  let context: Locale = $derived({
+  let locale: Locale = $derived({
     locale: props.locale,
     dir: isRTL(props.locale) ? 'rtl' : 'ltr',
   });
 
-  localeContext.set(() => context);
+  localeContext.set(() => locale);
 </script>
 
 {@render children()}

package/dist/menu/arrow-tip.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuArrowTipProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+  let attrs = $derived(mergeProps(props, menu.getArrowTipProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/arrow.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuArrowProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+  let attrs = $derived(mergeProps(props, menu.getArrowProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/context-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuContextTriggerProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContextTriggerProps()));
+  let attrs = $derived(mergeProps(props, menu.getContextTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/menu/create-menu.svelte.js

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as menu from '@zag-js/menu';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createMenu(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(menu.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));
     const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));

package/dist/menu/index.d.ts

@@ -1,4 +1,4 @@
-export { anatomy as menuAnatomy } from '@zag-js/menu';
+export * as Menu from './menu.js';
 export { type MenuArrowTipProps } from './arrow-tip.svelte';
 export { type MenuArrowProps } from './arrow.svelte';
 export { type MenuContentProps } from './content.svelte';
@@ -7,7 +7,6 @@ export { type MenuIndicatorProps } from './indicator.svelte';
 export { type MenuItemGroupLabelProps } from './item-group-label.svelte';
 export { type MenuItemGroupProps } from './item-group.svelte';
 export { type MenuItemProps } from './item.svelte';
-export * as Menu from './menu.js';
 export { type MenuOptionItemIndicatorProps } from './option-item-indicator.svelte';
 export { type MenuOptionItemTextProps } from './option-item-text.svelte';
 export { type MenuOptionItemProps } from './option-item.svelte';

package/dist/menu/index.js

@@ -1,4 +1,4 @@
-export { anatomy as menuAnatomy } from '@zag-js/menu';
+export * as Menu from './menu.js';
 export {} from './arrow-tip.svelte';
 export {} from './arrow.svelte';
 export {} from './content.svelte';
@@ -7,7 +7,6 @@ export {} from './indicator.svelte';
 export {} from './item-group-label.svelte';
 export {} from './item-group.svelte';
 export {} from './item.svelte';
-export * as Menu from './menu.js';
 export {} from './option-item-indicator.svelte';
 export {} from './option-item-text.svelte';
 export {} from './option-item.svelte';

package/dist/menu/indicator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuIndicatorProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
+  let attrs = $derived(mergeProps(props, menu.getIndicatorProps()));
 </script>
 
 <span {...attrs}>

package/dist/menu/item-group-label.svelte

@@ -10,14 +10,13 @@
 
   let {children, ...props}: MenuItemGroupLabelProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let itemGroupProps = menuItemGroupPropsContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getItemGroupLabelProps({
+      menu.getItemGroupLabelProps({
         htmlFor: itemGroupProps.id,
       }),
     ),

package/dist/menu/item-group.svelte

@@ -13,7 +13,7 @@
 
   let {id, children, ...props}: MenuItemGroupProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
   let uid = createUniqueId();
 
@@ -21,7 +21,7 @@
     id: id ?? uid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps(itemGroupProps)));
+  let attrs = $derived(mergeProps(props, menu.getItemGroupProps(itemGroupProps)));
 
   menuItemGroupPropsContext.set(() => itemGroupProps);
 </script>

package/dist/menu/item.svelte

@@ -14,8 +14,7 @@
 
   let {value, valueText, disabled, closeOnSelect, children, ...props}: MenuItemProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let itemProps = $derived({
     value,
     valueText,
@@ -23,8 +22,8 @@
     closeOnSelect,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(menu.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, menu.getItemProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/menu/menu.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/menu';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/menu/menu.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/menu';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/menu/option-item-indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: MenuOptionItemIndicatorProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(optionItemProps)));
+  let attrs = $derived(mergeProps(props, menu.getItemIndicatorProps(optionItemProps)));
 </script>
 
 <span {...attrs}>

package/dist/menu/option-item-text.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: MenuOptionItemTextProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(optionItemProps)));
+  let attrs = $derived(mergeProps(props, menu.getItemTextProps(optionItemProps)));
 </script>
 
 <span {...attrs}>

package/dist/menu/option-item.svelte

@@ -25,8 +25,7 @@
     ...props
   }: MenuOptionItemProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let itemProps: OptionItemProps = $derived({
     type,
     value,
@@ -37,8 +36,8 @@
     onCheckedChange,
   });
 
-  let state = $derived(context.getOptionItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getOptionItemProps(itemProps)));
+  let state = $derived(menu.getOptionItemState(itemProps));
+  let attrs = $derived(mergeProps(props, menu.getOptionItemProps(itemProps)));
 
   menuOptionItemPropsContext.set(() => itemProps);
 </script>

package/dist/menu/positioner.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuPositionerProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+  let attrs = $derived(mergeProps(props, menu.getPositionerProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/root.svelte

@@ -3,7 +3,7 @@
   import {type CreateMenuProps, type CreateMenuReturn} from './create-menu.svelte.js';
 
   export interface MenuRootProps extends CreateMenuProps {
-    children?: Snippet<[api: CreateMenuReturn]>;
+    children?: Snippet<[menu: CreateMenuReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: MenuRootProps = $props();
 
-  let context = createMenu(props);
+  let menu = createMenu(props);
 
-  menuContext.set(context);
+  menuContext.set(menu);
 </script>
 
-{@render children?.(context)}
+{@render children?.(menu)}

package/dist/menu/separator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuSeparatorProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+  let attrs = $derived(mergeProps(props, menu.getSeparatorProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/trigger-item.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuTriggerItemIndicatorProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerItemProps(context)));
+  let attrs = $derived(mergeProps(props, menu.getTriggerItemProps(menu)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/menu/trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuTriggerProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, menu.getTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/number-input/control.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputControlTriggerProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getControlProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getControlProps()));
 </script>
 
 <div {...attrs}>

package/dist/number-input/create-number-input.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as numberInput from '@zag-js/number-input';
-export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'locale' | 'getRootNode'> {
+export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
 export interface CreateNumberInputReturn extends numberInput.Api {

package/dist/number-input/create-number-input.svelte.js

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createNumberInput(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(numberInput.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
-        locale: localeContext?.locale,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        locale: props.locale ?? locale?.locale,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => numberInput.connect(state, send, normalizeProps)));
     return api;

package/dist/number-input/decrement-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputDecrementTriggerProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getDecrementTriggerProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getDecrementTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>