ui-ingredients 0.5.0 → 0.7.0

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

@@ -25,7 +25,6 @@ export function createField(props) {
             readOnly: props.readOnly ?? false,
         };
     });
-    let focused = $state(false);
     let hasErrorText = $state(false);
     let hasHelperText = $state(false);
     const ariaDescribedby = $derived.by(() => {
@@ -47,7 +46,6 @@ export function createField(props) {
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
             'data-readonly': dataAttr(readOnly),
-            'data-focus': dataAttr(focused),
         };
     }
     function getLabelProps() {
@@ -59,7 +57,6 @@ export function createField(props) {
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
             'data-readonly': dataAttr(readOnly),
-            'data-focus': dataAttr(focused),
         };
     }
     function getRequiredIndicatorProps() {
@@ -70,7 +67,6 @@ export function createField(props) {
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-readonly': dataAttr(readOnly),
-            'data-focus': dataAttr(focused),
         };
     }
     function getErrorTextProps() {
@@ -83,7 +79,6 @@ export function createField(props) {
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
             'data-readonly': dataAttr(readOnly),
-            'data-focus': dataAttr(focused),
         };
     }
     function getHelperTextProps() {
@@ -94,20 +89,11 @@ export function createField(props) {
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
             'data-readonly': dataAttr(readOnly),
-            'data-focus': dataAttr(focused),
         };
     }
-    function onfocus() {
-        focused = true;
-    }
-    function onblur() {
-        focused = false;
-    }
     function getControlProps() {
         return {
             id: ids.control,
-            onfocus,
-            onblur,
             disabled,
             required,
             'aria-describedby': ariaDescribedby,
@@ -119,7 +105,6 @@ export function createField(props) {
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
             'data-readonly': dataAttr(readOnly),
-            'data-focus': dataAttr(focused),
         };
     }
     function getInputProps() {
@@ -161,7 +146,6 @@ export function createField(props) {
         required,
         readOnly,
         invalid,
-        focused,
         'aria-describedby': ariaDescribedby,
         getRootProps,
         getLabelProps,

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.7.0",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -365,29 +365,29 @@
   "devDependencies": {
     "@faker-js/faker": "^9.0.3",
     "@sveltejs/adapter-vercel": "^5.4.5",
-    "@sveltejs/kit": "^2.7.0",
+    "@sveltejs/kit": "^2.7.1",
     "@sveltejs/package": "^2.3.5",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/svelte": "^5.2.3",
     "@testing-library/user-event": "^14.5.2",
     "@types/jsdom": "^21.1.7",
-    "@untitled-theme/icons-svelte": "^0.10.10",
+    "@untitled-theme/icons-svelte": "^0.10.11",
     "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
     "publint": "^0.2.11",
-    "release-it": "^17.8.2",
+    "release-it": "^17.9.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.0.0-next.264",
+    "svelte": "^5.0.0-next.265",
     "svelte-check": "^4.0.5",
-    "tailwind-merge": "^2.5.3",
+    "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-canvas-mock": "^0.3.3"
   },