ui-ingredients 0.5.0 → 0.6.0

package/dist/field/field-error-text.svelte

@@ -1,12 +1,16 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
   export interface FieldErrorTextProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {getFieldContext} from './field-context.svelte.js';
 
   let {
@@ -18,15 +22,29 @@
 
   let field = getFieldContext();
 
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      present: field?.invalid ?? true,
+      ...presenceStrategyProps,
+    })),
+  );
+
   let mergedProps = $derived(
-    mergeProps(field?.getErrorTextProps() ?? {}, props),
+    mergeProps(
+      field?.getErrorTextProps() ?? {},
+      presence.getPresenceProps(),
+      props,
+    ),
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div use:presence.setReference bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/field/field-error-text.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface FieldErrorTextProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+import type { Action } from 'svelte/action';
+export interface FieldErrorTextProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/field/field-root.svelte

@@ -7,13 +7,16 @@
 
   export interface FieldProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
-      CreateFieldProps
-    > {}
+        HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
+        CreateFieldProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {createField} from './create-field.svelte.js';
@@ -26,6 +29,12 @@
     ...props
   }: FieldProps = $props();
 
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
+      props,
+    ),
+  );
+
   let [createFieldProps, localProps] = $derived(
     createSplitProps<CreateFieldProps>([
       'id',
@@ -34,7 +43,7 @@
       'disabled',
       'readOnly',
       'required',
-    ])(props),
+    ])(rest),
   );
 
   let field = createField(reflect(() => createFieldProps));
@@ -42,6 +51,7 @@
   let mergedProps = $derived(mergeProps(field.getRootProps(), localProps));
 
   setFieldContext(field);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {#if asChild}

package/dist/field/field-root.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { CreateFieldProps, CreateFieldReturn } from './create-field.svelte.js';
-export interface FieldProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>, CreateFieldProps> {
+export interface FieldProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>, CreateFieldProps>, PresenceStrategyProps {
 }
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",