ui-ingredients 0.0.20 → 0.0.22

package/README.md

@@ -41,12 +41,13 @@ npm install ui-ingredients
 - 🟢 Checkbox
 - 🟢 Clipboard
 - 🟢 Collapsible
-- ⚪ ColorPicker
+- 🟡 ColorPicker
 - 🟢 Combobox
 - 🟢 DatePicker
 - 🟢 Dialog
 - 🟢 Editable
-- 🟡 FileUpload
+- 🟢 FileUpload
+- ⚪ FloatingPanel
 - 🟢 HoverCard
 - 🟢 Menu
 - 🟢 NumberInput
@@ -54,7 +55,7 @@ npm install ui-ingredients
 - 🟢 PinInput
 - 🟢 Popover
 - 🟢 Portal
-- 🟢 Presence
+- ⚪ Presence
 - 🟢 Progress
 - 🟢 QRCode
 - 🟢 RadioGroup
@@ -68,10 +69,12 @@ npm install ui-ingredients
 - 🟢 Switch
 - 🟢 Tabs
 - 🟢 TagsInput
+- 🟡 TimePicker
 - 🟢 Timer
 - 🟢 Toast
 - 🟢 ToggleGroup
 - 🟢 Tooltip
-- ⚪ TreeView
+- ⚪ Tour
+- 🟡 TreeView
 
 View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/accordion.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/accordion';
 export { default as ItemContent } from './item-content.svelte';
 export { default as ItemIndicator } from './item-indicator.svelte';
 export { default as ItemTrigger } from './item-trigger.svelte';

package/dist/accordion/accordion.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/accordion';
 export { default as ItemContent } from './item-content.svelte';
 export { default as ItemIndicator } from './item-indicator.svelte';
 export { default as ItemTrigger } from './item-trigger.svelte';

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/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export * as Accordion from './accordion.js';
 export type { AccordionItemContentProps } from './item-content.svelte';
 export type { AccordionIndicatorProps } from './item-indicator.svelte';

package/dist/accordion/index.js

@@ -1,2 +1 @@
-export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export * as Accordion from './accordion.js';

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/avatar.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/avatar';
 export { default as Fallback } from './fallback.svelte';
 export { default as Image } from './image.svelte';
 export { default as Root } from './root.svelte';

package/dist/avatar/avatar.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/avatar';
 export { default as Fallback } from './fallback.svelte';
 export { default as Image } from './image.svelte';
 export { default as Root } from './root.svelte';

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/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export * as Avatar from './avatar.js';
 export type { AvatarFallbackProps } from './fallback.svelte';
 export type { AvatarImageProps } from './image.svelte';

package/dist/avatar/index.js

@@ -1,2 +1 @@
-export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export * as Avatar from './avatar.js';

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/carousel.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/carousel';
 export { default as IndicatorGroup } from './indicator-group.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemGroup } from './item-group.svelte';

package/dist/carousel/carousel.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/carousel';
 export { default as IndicatorGroup } from './indicator-group.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemGroup } from './item-group.svelte';

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/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export * as Carousel from './carousel.js';
 export type { CarouselIndicatorGroupProps } from './indicator-group.svelte';
 export type { CarouselIndicatorProps } from './indicator.svelte';

package/dist/carousel/index.js

@@ -1,2 +1 @@
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export * as Carousel from './carousel.js';

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/checkbox.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/checkbox';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Indicator } from './indicator.svelte';

package/dist/checkbox/checkbox.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/checkbox';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Indicator } from './indicator.svelte';

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/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export * as Checkbox from './checkbox.js';
 export type { CheckboxControlProps } from './control.svelte';
 export type { CheckboxHiddenInputProps } from './hidden-input.svelte';

package/dist/checkbox/index.js

@@ -1,2 +1 @@
-export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export * as Checkbox from './checkbox.js';

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/clipboard.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/clipboard';
 export { default as Control } from './control.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Input } from './input.svelte';

package/dist/clipboard/clipboard.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/clipboard';
 export { default as Control } from './control.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Input } from './input.svelte';

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/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export * as Clipboard from './clipboard.js';
 export type { ClipboardControlProps } from './control.svelte';
 export type { ClipboardIndicatorProps } from './indicator.svelte';

package/dist/clipboard/index.js

@@ -1,2 +1 @@
-export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export * as Clipboard from './clipboard.js';

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}>