ui-ingredients 0.0.43 → 0.0.45

package/README.md

@@ -52,6 +52,8 @@ npm install ui-ingredients
 - [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
 - [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
 - [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
+- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
+- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
 - [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
 - [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
 - [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
@@ -79,6 +81,7 @@ npm install ui-ingredients
 - [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
 - [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
 - [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
+- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
 - [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
 - [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
 

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

@@ -7,13 +7,12 @@ export function createAccordion(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(accordion.machine(context), { context });
-    const api = $derived(reflect(() => accordion.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => accordion.connect(state, send, normalizeProps));
 }

package/dist/accordion/item-content.svelte

@@ -10,6 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {
     getAccordionContext,
     getAccordionItemPropsContext,
@@ -22,17 +23,12 @@
   let itemsState = $derived(accordion.getItemState(itemProps));
 
   let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence({
-    get present() {
-      return itemsState.expanded;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: itemsState.expanded,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(

package/dist/accordion/item.svelte

@@ -18,13 +18,13 @@
 
   let accordion = getAccordionContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['value', 'disabled'])(props),
   );
 
   let itemState = $derived(accordion.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, accordion.getItemProps(itemProps)),
+    mergeProps(localProps, accordion.getItemProps(itemProps)),
   );
 
   setAccordionItemPropsContext(() => itemProps);

package/dist/accordion/root.svelte

@@ -24,13 +24,13 @@
 
   let {asChild, children, ...props}: AccordionProps = $props();
 
-  let [presenceStrategyProps, otherProps] = $derived(
+  let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
-  let [accordionProps, elementProps] = $derived(
+  let [accordionProps, localProps] = $derived(
     createSplitProps<CreateAccordionProps>([
       'id',
       'ids',
@@ -41,14 +41,12 @@
       'collapsible',
       'onFocusChange',
       'onValueChange',
-    ])(otherProps),
+    ])(rest),
   );
 
   let accordion = createAccordion(reflect(() => accordionProps));
 
-  let mergedProps = $derived(
-    mergeProps(elementProps, accordion.getRootProps()),
-  );
+  let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
 
   setAccordionContext(accordion);
   setPresenceStrategyPropsContext(() => presenceStrategyProps);

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

@@ -7,13 +7,12 @@ export function createAvatar(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(avatar.machine(context), { context });
-    const api = $derived(reflect(() => avatar.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => avatar.connect(state, send, normalizeProps));
 }

package/dist/avatar/root.svelte

@@ -21,13 +21,13 @@
 
   let {asChild, children, ...props}: AvatarProps = $props();
 
-  let [avatarProps, otherProps] = $derived(
+  let [avatarProps, localProps] = $derived(
     createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
   );
 
   let avatar = createAvatar(reflect(() => avatarProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, avatar.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, avatar.getRootProps()));
 
   setAvatarContext(avatar);
 </script>

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

@@ -7,13 +7,12 @@ export function createCarousel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(carousel.machine(context), { context });
-    const api = $derived(reflect(() => carousel.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => carousel.connect(state, send, normalizeProps));
 }

package/dist/carousel/indicator.svelte

@@ -15,12 +15,12 @@
 
   let carousel = getCarouselContext();
 
-  let [indicatorProps, otherProps] = $derived(
+  let [indicatorProps, localProps] = $derived(
     createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, carousel.getIndicatorProps(indicatorProps)),
+    mergeProps(localProps, carousel.getIndicatorProps(indicatorProps)),
   );
 </script>
 

package/dist/carousel/item.svelte

@@ -15,13 +15,13 @@
 
   let carousel = getCarouselContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
   );
 
   let itemState = $derived(carousel.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, carousel.getItemProps(itemProps)),
+    mergeProps(localProps, carousel.getItemProps(itemProps)),
   );
 </script>
 

package/dist/carousel/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: CarouselProps = $props();
 
-  let [carouselProps, otherProps] = $derived(
+  let [carouselProps, localProps] = $derived(
     createSplitProps<CreateCarouselProps>([
       'id',
       'ids',
@@ -37,7 +37,7 @@
 
   let carousel = createCarousel(reflect(() => carouselProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, carousel.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, carousel.getRootProps()));
 
   setCarouselContext(carousel);
 </script>

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

@@ -9,7 +9,7 @@ export function createCheckbox(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -22,9 +22,9 @@ export function createCheckbox(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(checkbox.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = checkbox.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createCheckbox(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/checkbox/root.svelte

@@ -22,7 +22,7 @@
 
   let {asChild, children, ...props}: CheckboxProps = $props();
 
-  let [checkboxProps, otherProps] = $derived(
+  let [checkboxProps, localProps] = $derived(
     createSplitProps<CreateCheckboxProps>([
       'id',
       'ids',
@@ -40,7 +40,7 @@
 
   let checkbox = createCheckbox(reflect(() => checkboxProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, checkbox.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, checkbox.getRootProps()));
 
   setCheckboxContext(checkbox);
 </script>

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

@@ -5,12 +5,11 @@ import { uid } from 'uid';
 export function createClipboard(props) {
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(clipboard.machine(context), { context });
-    const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => clipboard.connect(state, send, normalizeProps));
 }

package/dist/clipboard/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: ClipboardProps = $props();
 
-  let [clipboardProps, otherProps] = $derived(
+  let [clipboardProps, localProps] = $derived(
     createSplitProps<CreateClipboardProps>([
       'id',
       'ids',
@@ -33,7 +33,7 @@
 
   let clipboard = createClipboard(reflect(() => clipboardProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, clipboard.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, clipboard.getRootProps()));
 
   setClipboardContext(clipboard);
 </script>

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

@@ -7,15 +7,14 @@ export function createCollapsible(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(collapsible.machine(context), { context });
-    const api = $derived(reflect(() => collapsible.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => collapsible.connect(state, send, normalizeProps));
 }

package/dist/collapsible/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: CollapsibleProps = $props();
 
-  let [collapsibleProps, otherProps] = $derived(
+  let [collapsibleProps, localProps] = $derived(
     createSplitProps<CreateCollapsibleProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
   let collapsible = createCollapsible(reflect(() => collapsibleProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, collapsible.getRootProps()),
+    mergeProps(localProps, collapsible.getRootProps()),
   );
 
   setCollapsibleContext(collapsible);

package/dist/color-picker/create-color-picker.svelte.js

@@ -7,7 +7,7 @@ export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
@@ -15,8 +15,7 @@ export function createColorPicker(props) {
         value: props.value ? colorPicker.parse(props.value) : undefined,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(colorPicker.machine(context), { context });
-    const api = $derived(reflect(() => colorPicker.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => colorPicker.connect(state, send, normalizeProps));
 }

package/dist/color-picker/root.svelte

@@ -23,7 +23,7 @@
 
   let {children, ...props}: ColorPickerProps = $props();
 
-  let [colorPickerProps, otherProps] = $derived(
+  let [colorPickerProps, localProps] = $derived(
     createSplitProps<CreateColorPickerProps>([
       'id',
       'ids',
@@ -56,7 +56,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(otherProps, colorPicker.getRootProps()),
+    mergeProps(localProps, colorPicker.getRootProps()),
   );
 
   setColorPickerContext(colorPicker);

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

@@ -17,7 +17,7 @@ export function createCombobox(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -33,9 +33,9 @@ export function createCombobox(props) {
         'open.controlled': props.open != null,
         getRootNode: environment?.getRootNode,
         collection,
-    });
+    }));
     const [state, send] = useMachine(combobox.machine(context));
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = combobox.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -46,6 +46,5 @@ export function createCombobox(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/combobox/item.svelte

@@ -18,13 +18,13 @@
 
   let combobox = getComboboxContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
   );
 
   let itemState = $derived(combobox.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, combobox.getItemProps(itemProps)),
+    mergeProps(localProps, combobox.getItemProps(itemProps)),
   );
 
   setComboboxItemPropsContext(() => itemProps);

package/dist/combobox/root.svelte

@@ -25,13 +25,13 @@
 
   let {asChild, children, ...props}: ComboboxProps<T> = $props();
 
-  let [presenceStrategyProps, otherProps] = $derived(
+  let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
-  let [comboboxProps, elementProps] = $derived(
+  let [comboboxProps, localProps] = $derived(
     createSplitProps<CreateComboboxProps<T>>([
       'id',
       'ids',
@@ -74,24 +74,18 @@
       'onPointerDownOutside',
       'getSelectionValue',
       'scrollToIndexFn',
-    ])(otherProps),
+    ])(rest),
   );
 
   let combobox = createCombobox(reflect(() => comboboxProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: combobox.open,
+    })),
+  );
 
-  let presence = createPresence({
-    get present() {
-      return combobox.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
-
-  let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, combobox.getRootProps()));
 
   setComboboxContext(combobox);
   setPresenceContext(presence);

package/dist/create-context.svelte.js

@@ -11,15 +11,7 @@ export function createContext(key, strict = true) {
         return getContext(key);
     }
     function s(context) {
-        const v = $derived.by(() => {
-            if (typeof context === 'function') {
-                return reflect(context);
-            }
-            else {
-                return context;
-            }
-        });
-        setContext(key, v);
+        setContext(key, typeof context === 'function' ? reflect(context) : context);
     }
     return [g, s];
 }

package/dist/date-picker/create-date-picker.svelte.js

@@ -24,7 +24,7 @@ export function createDatePicker(props) {
         getRootNode: environment?.getRootNode,
     });
     const [state, send] = useMachine(datePicker.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = datePicker.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createDatePicker(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/date-picker/day-table-cell.svelte

@@ -21,7 +21,7 @@
 
   let datePicker = getDatePickerContext();
 
-  let [tableCellProps, otherProps] = $derived(
+  let [tableCellProps, localProps] = $derived(
     createSplitProps<DayTableCellProps>(['value', 'disabled', 'visibleRange'])(
       props,
     ),
@@ -32,7 +32,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, datePicker.getDayTableCellProps(tableCellProps)),
+    mergeProps(localProps, datePicker.getDayTableCellProps(tableCellProps)),
   );
 
   setDatePickerDayTableCellPropsContext(() => tableCellProps);

package/dist/date-picker/month-table-cell.svelte

@@ -18,7 +18,7 @@
 
   let datePicker = getDatePickerContext();
 
-  let [tableCellProps, otherProps] = $derived(
+  let [tableCellProps, localProps] = $derived(
     createSplitProps<TableCellProps>(['value', 'disabled', 'columns'])(props),
   );
 
@@ -27,7 +27,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, datePicker.getMonthTableCellProps(tableCellProps)),
+    mergeProps(localProps, datePicker.getMonthTableCellProps(tableCellProps)),
   );
 
   setDatePickerTableCellPropsContext(() => tableCellProps);

package/dist/date-picker/root.svelte

@@ -25,11 +25,11 @@
 
   let {asChild, children, ...props}: DatePickerProps = $props();
 
-  let [presenceStrategyProps, otherProps] = $derived(
+  let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>([])(props),
   );
 
-  let [datePickerProps, elementProps] = $derived(
+  let [datePickerProps, localProps] = $derived(
     createSplitProps<CreateDatePickerProps>([
       'id',
       'ids',
@@ -59,27 +59,19 @@
       'onValueChange',
       'onFocusChange',
       'isDateUnavailable',
-    ])(otherProps),
+    ])(rest),
   );
 
   let datePicker = createDatePicker(reflect(() => datePickerProps));
-
-  let presence = createPresence({
-    get present() {
-      return datePicker.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
-
-  let mergedProps = $derived(
-    mergeProps(elementProps, datePicker.getRootProps()),
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: datePicker.open,
+    })),
   );
 
+  let mergedProps = $derived(mergeProps(localProps, datePicker.getRootProps()));
+
   setDatePickerContext(datePicker);
   setPresenceContext(presence);
 </script>

package/dist/date-picker/year-table-cell.svelte

@@ -18,7 +18,7 @@
 
   let datePicker = getDatePickerContext();
 
-  let [tableCellProps, otherProps] = $derived(
+  let [tableCellProps, localProps] = $derived(
     createSplitProps<TableCellProps>(['value', 'disabled', 'columns'])(props),
   );
 
@@ -27,7 +27,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, datePicker.getYearTableCellProps(tableCellProps)),
+    mergeProps(localProps, datePicker.getYearTableCellProps(tableCellProps)),
   );
 
   setDatePickerTableCellPropsContext(() => tableCellProps);

package/dist/dialog/backdrop.svelte

@@ -10,24 +10,19 @@
   import {mergeProps} from '../merge-props.js';
   import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {getDialogContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: DialogBackdropProps = $props();
 
   let dialog = getDialogContext();
-
   let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence({
-    get present() {
-      return dialog.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: dialog.open,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(props, dialog.getBackdropProps(), presence.getPresenceProps()),