ui-ingredients 0.0.41 → 0.0.43

package/README.md

@@ -59,6 +59,7 @@ npm install ui-ingredients
 - [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
 - [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
 - [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
+- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
 - [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
 - [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
 - [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)

package/dist/accordion/item-content.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     getAccordionContext,
@@ -19,10 +20,18 @@
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
   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 mergedProps = $derived(
@@ -34,10 +43,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/accordion/root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateAccordionProps,
@@ -7,13 +8,15 @@
 
   export interface AccordionProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateAccordionReturn>,
-      CreateAccordionProps
-    > {}
+        HtmlIngredientProps<'div', CreateAccordionReturn>,
+        CreateAccordionProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {setAccordionContext} from './context.svelte.js';
@@ -21,7 +24,13 @@
 
   let {asChild, children, ...props}: AccordionProps = $props();
 
-  let [accordionProps, otherProps] = $derived(
+  let [presenceStrategyProps, otherProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [accordionProps, elementProps] = $derived(
     createSplitProps<CreateAccordionProps>([
       'id',
       'ids',
@@ -32,14 +41,17 @@
       'collapsible',
       'onFocusChange',
       'onValueChange',
-    ])(props),
+    ])(otherProps),
   );
 
   let accordion = createAccordion(reflect(() => accordionProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, accordion.getRootProps()));
+  let mergedProps = $derived(
+    mergeProps(elementProps, accordion.getRootProps()),
+  );
 
   setAccordionContext(accordion);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {#if asChild}

package/dist/color-picker/root.svelte

@@ -51,7 +51,7 @@
   let colorPicker = createColorPicker(reflect(() => colorPickerProps));
   let presence = createPresence({
     get present() {
-      return colorPickerProps.open;
+      return colorPicker.open;
     },
   });
 

package/dist/combobox/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/combobox/positioner.svelte

@@ -23,10 +23,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/combobox/root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateComboboxProps,
@@ -7,9 +8,10 @@
 
   export interface ComboboxProps<T>
     extends Assign<
-      HtmlIngredientProps<'div', CreateComboboxReturn>,
-      CreateComboboxProps<T>
-    > {}
+        HtmlIngredientProps<'div', CreateComboboxReturn>,
+        CreateComboboxProps<T>
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts" generics="T">
@@ -23,7 +25,13 @@
 
   let {asChild, children, ...props}: ComboboxProps<T> = $props();
 
-  let [comboboxProps, otherProps] = $derived(
+  let [presenceStrategyProps, otherProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [comboboxProps, elementProps] = $derived(
     createSplitProps<CreateComboboxProps<T>>([
       'id',
       'ids',
@@ -66,17 +74,24 @@
       'onPointerDownOutside',
       'getSelectionValue',
       'scrollToIndexFn',
-    ])(props),
+    ])(otherProps),
   );
 
   let combobox = createCombobox(reflect(() => comboboxProps));
+
   let presence = createPresence({
     get present() {
       return combobox.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
-  let mergedProps = $derived(mergeProps(otherProps, combobox.getRootProps()));
+  let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
 
   setComboboxContext(combobox);
   setPresenceContext(presence);

package/dist/date-picker/content.svelte

@@ -25,10 +25,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/date-picker/positioner.svelte

@@ -24,10 +24,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/date-picker/root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateDatePickerProps,
@@ -7,9 +8,10 @@
 
   export interface DatePickerProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateDatePickerReturn>,
-      CreateDatePickerProps
-    > {}
+        HtmlIngredientProps<'div', CreateDatePickerReturn>,
+        CreateDatePickerProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
@@ -23,7 +25,11 @@
 
   let {asChild, children, ...props}: DatePickerProps = $props();
 
-  let [datePickerProps, otherProps] = $derived(
+  let [presenceStrategyProps, otherProps] = $derived(
+    createSplitProps<PresenceStrategyProps>([])(props),
+  );
+
+  let [datePickerProps, elementProps] = $derived(
     createSplitProps<CreateDatePickerProps>([
       'id',
       'ids',
@@ -53,17 +59,26 @@
       'onValueChange',
       'onFocusChange',
       'isDateUnavailable',
-    ])(props),
+    ])(otherProps),
   );
 
   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(otherProps, datePicker.getRootProps()));
+  let mergedProps = $derived(
+    mergeProps(elementProps, datePicker.getRootProps()),
+  );
 
   setDatePickerContext(datePicker);
   setPresenceContext(presence);

package/dist/dialog/backdrop.svelte

@@ -8,16 +8,25 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   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 mergedProps = $derived(
@@ -25,10 +34,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/dialog/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/dialog/positioner.svelte

@@ -19,10 +19,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/dialog/root.svelte

@@ -1,32 +1,54 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateDialogProps,
     CreateDialogReturn,
   } from './create-dialog.svelte.js';
 
-  export interface DialogProps extends CreateDialogProps {
+  export interface DialogProps
+    extends CreateDialogProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateDialogReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {
+    setPresenceContext,
+    setPresenceStrategyPropsContext,
+  } from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setDialogContext} from './context.svelte.js';
   import {createDialog} from './create-dialog.svelte.js';
 
   let {children, ...props}: DialogProps = $props();
 
-  let dialog = createDialog(props);
+  let [presenceStrategyProps, dialogProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let dialog = createDialog(reflect(() => dialogProps));
+
   let presence = createPresence({
     get present() {
       return dialog.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setDialogContext(dialog);
   setPresenceContext(presence);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {@render children?.(dialog)}

package/dist/file-upload/create-file-upload.svelte.js

@@ -14,6 +14,7 @@ export function createFileUpload(props) {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
         },
+        invalid: field?.invalid,
         disabled: field?.disabled,
         required: field?.required,
         ...props,

package/dist/file-upload/root.svelte

@@ -29,6 +29,7 @@
       'accept',
       'locale',
       'capture',
+      'invalid',
       'required',
       'disabled',
       'validate',

package/dist/floating-panel/create-floating-panel.svelte.d.ts

@@ -0,0 +1,6 @@
+import * as floatingPanel from '@zag-js/floating-panel';
+export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'dir' | 'getRootNode'> {
+}
+export interface CreateFloatingPanelReturn extends floatingPanel.Api<any> {
+}
+export declare function createFloatingPanel(props: CreateFloatingPanelProps): CreateFloatingPanelReturn;

package/dist/floating-panel/create-floating-panel.svelte.js

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import * as floatingPanel from '@zag-js/floating-panel';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
+export function createFloatingPanel(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const id = uid();
+    const context = $derived(reflect(() => ({
+        id: props.id ?? id,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+    })));
+    const [state, send] = useMachine(floatingPanel.machine(context), { context });
+    const api = $derived(reflect(() => floatingPanel.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/hover-card/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/hover-card/positioner.svelte

@@ -24,10 +24,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/hover-card/root.svelte

@@ -1,11 +1,14 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateHoverCardProps,
     CreateHoverCardReturn,
   } from './create-hover-card.svelte.js';
 
-  export interface HoverCardProps extends CreateHoverCardProps {
+  export interface HoverCardProps
+    extends CreateHoverCardProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateHoverCardReturn]>;
   }
 </script>
@@ -13,16 +16,38 @@
 <script lang="ts">
   import {setPresenceContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setHoverCardContext} from './context.svelte.js';
   import {createHoverCard} from './create-hover-card.svelte.js';
 
   let {children, ...props}: HoverCardProps = $props();
 
-  let hoverCard = createHoverCard(props);
+  let [hoverCardProps, presenceStrategyProps] = $derived(
+    createSplitProps<CreateHoverCardProps>([
+      'id',
+      'ids',
+      'open',
+      'openDelay',
+      'closeDelay',
+      'defaultOpen',
+      'positioning',
+      'onOpenChange',
+    ])(props),
+  );
+
+  let hoverCard = createHoverCard(reflect(() => hoverCardProps));
+
   let presence = createPresence({
     get present() {
       return hoverCard.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setHoverCardContext(hoverCard);

package/dist/menu/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/menu/positioner.svelte

@@ -19,10 +19,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}