ui-ingredients 0.0.20 → 0.0.21

package/README.md

@@ -41,12 +41,12 @@ npm install ui-ingredients
 - 🟢 Checkbox
 - 🟢 Clipboard
 - 🟢 Collapsible
-- ⚪ ColorPicker
+- 🟡 ColorPicker
 - 🟢 Combobox
 - 🟢 DatePicker
 - 🟢 Dialog
 - 🟢 Editable
-- 🟡 FileUpload
+- 🟢 FileUpload
 - 🟢 HoverCard
 - 🟢 Menu
 - 🟢 NumberInput

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

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

package/dist/accordion/item-content.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: AccordionItemContentProps = $props();
 
-  let context = accordionContext.get();
-
+  let accordion = accordionContext.get();
   let itemProps = accordionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemContentProps(itemProps)));
+  let attrs = $derived(mergeProps(props, accordion.getItemContentProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/accordion/item-indicator.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: AccordionIndicatorProps = $props();
 
-  let context = accordionContext.get();
-
+  let accordion = accordionContext.get();
   let itemProps = accordionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));
+  let attrs = $derived(mergeProps(props, accordion.getItemIndicatorProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/accordion/item-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: AccordionItemTriggerProps = $props();
 
-  let context = accordionContext.get();
-
+  let accordion = accordionContext.get();
   let itemProps = accordionItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTriggerProps(itemProps)));
+  let attrs = $derived(mergeProps(props, accordion.getItemTriggerProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/accordion/item.svelte

@@ -15,15 +15,14 @@
 
   let {value, disabled, children, ...props}: AccordionItemProps = $props();
 
-  let context = accordionContext.get();
-
+  let accordion = accordionContext.get();
   let itemProps = $derived({
     value,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(accordion.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, accordion.getItemProps(itemProps)));
 
   accordionItemPropsContext.set(() => itemProps);
 </script>

package/dist/accordion/root.svelte

@@ -5,7 +5,7 @@
 
   export interface AccordionProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAccordionProps> {
-    children?: Snippet<[context: CreateAccordionReturn]>;
+    children?: Snippet<[accordion: CreateAccordionReturn]>;
   }
 </script>
 
@@ -28,7 +28,7 @@
     ...props
   }: AccordionProps = $props();
 
-  let context = createAccordion({
+  let accordion = createAccordion({
     id,
     ids,
     value: $state.snapshot(value),
@@ -40,11 +40,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, accordion.getRootProps()));
 
-  accordionContext.set(context);
+  accordionContext.set(accordion);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(accordion)}
 </div>

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

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

package/dist/avatar/fallback.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: AvatarFallbackProps = $props();
 
-  let context = avatarContext.get();
+  let avatar = avatarContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getFallbackProps()));
+  let attrs = $derived(mergeProps(props, avatar.getFallbackProps()));
 </script>
 
 <div {...attrs}>

package/dist/avatar/image.svelte

@@ -10,9 +10,9 @@
 
   let {...props}: AvatarImageProps = $props();
 
-  let context = avatarContext.get();
+  let avatar = avatarContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getImageProps()));
+  let attrs = $derived(mergeProps(props, avatar.getImageProps()));
 </script>
 
 <img {...attrs} />

package/dist/avatar/root.svelte

@@ -5,7 +5,7 @@
 
   export interface AvatarProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAvatarProps> {
-    children?: Snippet<[api: CreateAvatarReturn]>;
+    children?: Snippet<[avatar: CreateAvatarReturn]>;
   }
 </script>
 
@@ -23,17 +23,17 @@
     ...props
   }: AvatarProps = $props();
 
-  let context = createAvatar({
+  let avatar = createAvatar({
     id,
     ids,
     onStatusChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, avatar.getRootProps()));
 
-  avatarContext.set(context);
+  avatarContext.set(avatar);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(avatar)}
 </div>

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

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

package/dist/carousel/indicator-group.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: CarouselIndicatorGroupProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorGroupProps()));
+  let attrs = $derived(mergeProps(props, carousel.getIndicatorGroupProps()));
 </script>
 
 <div {...attrs}>

package/dist/carousel/indicator.svelte

@@ -11,12 +11,12 @@
 
   let {index, readOnly, children, ...props}: CarouselIndicatorProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getIndicatorProps({
+      carousel.getIndicatorProps({
         index,
         readOnly,
       }),

package/dist/carousel/item-group.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: CarouselItemGroupProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps()));
+  let attrs = $derived(mergeProps(props, carousel.getItemGroupProps()));
 </script>
 
 <div {...attrs}>

package/dist/carousel/item.svelte

@@ -15,10 +15,10 @@
 
   let {index, children, ...props}: CarouselItemProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
-  let state = $derived(context.getItemState({index}));
-  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+  let state = $derived(carousel.getItemState({index}));
+  let attrs = $derived(mergeProps(props, carousel.getItemProps({index})));
 </script>
 
 <button type="button" {...attrs}>

package/dist/carousel/next-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: CarouselNextTriggerProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
+  let attrs = $derived(mergeProps(props, carousel.getNextTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/carousel/prev-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: CarouselPrevTriggerProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
+  let attrs = $derived(mergeProps(props, carousel.getPrevTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/carousel/root.svelte

@@ -5,7 +5,7 @@
 
   export interface CarouselProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCarouselProps> {
-    children?: Snippet<[api: CreateCarouselReturn]>;
+    children?: Snippet<[carousel: CreateCarouselReturn]>;
   }
 </script>
 
@@ -28,7 +28,7 @@
     ...props
   }: CarouselProps = $props();
 
-  let context = createCarousel({
+  let carousel = createCarousel({
     id,
     ids,
     loop,
@@ -40,11 +40,11 @@
     onIndexChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, carousel.getRootProps()));
 
-  carouselContext.set(context);
+  carouselContext.set(carousel);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(carousel)}
 </div>

package/dist/carousel/viewport.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: CarouselViewportProps = $props();
 
-  let context = carouselContext.get();
+  let carousel = carouselContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getViewportProps()));
+  let attrs = $derived(mergeProps(props, carousel.getViewportProps()));
 </script>
 
 <div {...attrs}>

package/dist/checkbox/control.svelte

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

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

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

package/dist/checkbox/hidden-input.svelte

@@ -10,9 +10,9 @@
 
   let {...props}: CheckboxHiddenInputProps = $props();
 
-  let context = checkboxContext.get();
+  let checkbox = checkboxContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+  let attrs = $derived(mergeProps(props, checkbox.getHiddenInputProps()));
 </script>
 
 <input {...attrs} />

package/dist/checkbox/indicator.svelte

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

package/dist/checkbox/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: CheckboxLabelProps = $props();
 
-  let context = checkboxContext.get();
+  let checkbox = checkboxContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, checkbox.getLabelProps()));
 </script>
 
 <span {...attrs}>

package/dist/checkbox/root.svelte

@@ -5,7 +5,7 @@
 
   export interface CheckboxProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateCheckboxProps> {
-    children?: Snippet<[api: CreateCheckboxReturn]>;
+    children?: Snippet<[checkbox: CreateCheckboxReturn]>;
   }
 </script>
 
@@ -30,7 +30,7 @@
     ...props
   }: CheckboxProps = $props();
 
-  let context = createCheckbox({
+  let checkbox = createCheckbox({
     id,
     ids,
     form,
@@ -44,11 +44,11 @@
     onCheckedChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, checkbox.getRootProps()));
 
-  checkboxContext.set(context);
+  checkboxContext.set(checkbox);
 </script>
 
 <label {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(checkbox)}
 </label>

package/dist/clipboard/control.svelte

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

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

@@ -3,11 +3,11 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as clipboard from '@zag-js/clipboard';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createClipboard(props) {
-    const environmentContext = getEnvironmentContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(clipboard.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));
     return api;

package/dist/clipboard/indicator.svelte

@@ -12,9 +12,9 @@
 
   let {copied = false, children, ...props}: ClipboardIndicatorProps = $props();
 
-  let context = clipboardContext.get();
+  let clipboard = clipboardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps({copied})));
+  let attrs = $derived(mergeProps(props, clipboard.getIndicatorProps({copied})));
 </script>
 
 <span {...attrs}>

package/dist/clipboard/input.svelte

@@ -10,9 +10,9 @@
 
   let {...props}: ClipboardInputProps = $props();
 
-  let context = clipboardContext.get();
+  let clipboard = clipboardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getInputProps()));
+  let attrs = $derived(mergeProps(props, clipboard.getInputProps()));
 </script>
 
 <input {...attrs} />

package/dist/clipboard/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: ClipboardLabelProps = $props();
 
-  let context = clipboardContext.get();
+  let clipboard = clipboardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, clipboard.getLabelProps()));
 </script>
 
 <label {...attrs}>

package/dist/clipboard/root.svelte

@@ -5,7 +5,7 @@
 
   export interface ClipboardProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
-    children?: Snippet<[api: CreateClipboardReturn]>;
+    children?: Snippet<[clipboard: CreateClipboardReturn]>;
   }
 </script>
 
@@ -25,7 +25,7 @@
     ...props
   }: ClipboardProps = $props();
 
-  let context = createClipboard({
+  let clipboard = createClipboard({
     id,
     ids,
     value: $state.snapshot(value),
@@ -33,11 +33,11 @@
     onStatusChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, clipboard.getRootProps()));
 
-  clipboardContext.set(context);
+  clipboardContext.set(clipboard);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(clipboard)}
 </div>

package/dist/clipboard/trigger.svelte

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

package/dist/collapsible/content.svelte

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

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

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as collapsible from '@zag-js/collapsible';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createCollapsible(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(collapsible.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(() => collapsible.connect(state, send, normalizeProps)));

package/dist/collapsible/root.svelte

@@ -29,7 +29,7 @@
     ...props
   }: CollapsibleProps = $props();
 
-  let context = createCollapsible({
+  let collapsible = createCollapsible({
     id,
     ids,
     open,
@@ -39,11 +39,11 @@
     onExitComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, collapsible.getRootProps()));
 
-  collapsibleContext.set(context);
+  collapsibleContext.set(collapsible);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(collapsible)}
 </div>

package/dist/collapsible/trigger.svelte

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