ui-ingredients 0.0.42 → 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/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/portal/root.svelte

@@ -1,32 +1,32 @@
-<script module lang="ts">
-  import {type Snippet} from 'svelte';
-
-  export interface PortalProps {
-    container?: HTMLElement;
-    disabled?: boolean;
-    children: Snippet;
-    [x: `data-${string}`]: string | number | boolean | null | undefined;
-  }
-</script>
-
-<script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {portal} from '@zag-js/svelte';
-
-  let {container, disabled, children, ...props}: PortalProps = $props();
-
-  let environment = getEnvironmentContext();
-</script>
-
-<div
-  use:portal={{
-    disabled,
-    container,
-    getRootNode: environment?.getRootNode,
-  }}
-  data-scope="portal"
-  data-part="root"
-  {...props}
->
-  {@render children?.()}
-</div>
+<script module lang="ts">
+  import {type Snippet} from 'svelte';
+
+  export interface PortalProps {
+    container?: HTMLElement;
+    disabled?: boolean;
+    children: Snippet;
+    [x: `data-${string}`]: string | number | boolean | null | undefined;
+  }
+</script>
+
+<script lang="ts">
+  import {getEnvironmentContext} from '../environment-provider/index.js';
+  import {portal} from '@zag-js/svelte';
+
+  let {container, disabled, children, ...props}: PortalProps = $props();
+
+  let environment = getEnvironmentContext();
+</script>
+
+<div
+  use:portal={{
+    disabled,
+    container,
+    getRootNode: environment?.getRootNode,
+  }}
+  data-scope="portal"
+  data-part="root"
+  {...props}
+>
+  {@render children?.()}
+</div>

package/dist/switch/control.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchControlProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SwitchControlProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchControlProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SwitchControlProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/switch/hidden-input.svelte

@@ -1,23 +1,23 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, ...props}: SwitchHiddenInputProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <input {...mergedProps} />
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, ...props}: SwitchHiddenInputProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/switch/label.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchLabelProps extends HtmlIngredientProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SwitchLabelProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getLabelProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <span {...mergedProps}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchLabelProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SwitchLabelProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/switch/root.svelte

@@ -1,54 +1,54 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {
-    CreateSwitchProps,
-    CreateSwitchReturn,
-  } from './create-switch.svelte.js';
-
-  export interface SwitchProps
-    extends Assign<
-      HtmlIngredientProps<'label', CreateSwitchReturn>,
-      CreateSwitchProps
-    > {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setSwitchContext} from './context.svelte.js';
-  import {createSwitch} from './create-switch.svelte.js';
-
-  let {asChild, children, ...props}: SwitchProps = $props();
-
-  let [switchProps, otherProps] = $derived(
-    createSplitProps<CreateSwitchProps>([
-      'id',
-      'ids',
-      'form',
-      'name',
-      'label',
-      'value',
-      'checked',
-      'invalid',
-      'disabled',
-      'readOnly',
-      'required',
-      'onCheckedChange',
-    ])(props),
-  );
-
-  let switch$ = createSwitch(reflect(() => switchProps));
-
-  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
-
-  setSwitchContext(switch$);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, switch$)}
-{:else}
-  <label {...mergedProps}>
-    {@render children?.(switch$)}
-  </label>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateSwitchProps,
+    CreateSwitchReturn,
+  } from './create-switch.svelte.js';
+
+  export interface SwitchProps
+    extends Assign<
+      HtmlIngredientProps<'label', CreateSwitchReturn>,
+      CreateSwitchProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setSwitchContext} from './context.svelte.js';
+  import {createSwitch} from './create-switch.svelte.js';
+
+  let {asChild, children, ...props}: SwitchProps = $props();
+
+  let [switchProps, otherProps] = $derived(
+    createSplitProps<CreateSwitchProps>([
+      'id',
+      'ids',
+      'form',
+      'name',
+      'label',
+      'value',
+      'checked',
+      'invalid',
+      'disabled',
+      'readOnly',
+      'required',
+      'onCheckedChange',
+    ])(props),
+  );
+
+  let switch$ = createSwitch(reflect(() => switchProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
+
+  setSwitchContext(switch$);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, switch$)}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.(switch$)}
+  </label>
+{/if}

package/dist/switch/thumb.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SwitchThumbProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SwitchThumbProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/toast/actor.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-  import * as toast$ from '@zag-js/toast';
-  import type {Snippet} from 'svelte';
-  import {setToastContext} from './context.svelte.js';
-  import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
-
-  interface Props {
-    actor: toast$.Service;
-    children$: Snippet<[toast: CreateToastReturn]>;
-  }
-
-  let {actor, children$}: Props = $props();
-
-  let toast = createToast(actor);
-
-  setToastContext(toast);
-</script>
-
-{@render children$(toast)}
+<script lang="ts">
+  import * as toast$ from '@zag-js/toast';
+  import type {Snippet} from 'svelte';
+  import {setToastContext} from './context.svelte.js';
+  import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
+
+  interface Props {
+    actor: toast$.Service;
+    children$: Snippet<[toast: CreateToastReturn]>;
+  }
+
+  let {actor, children$}: Props = $props();
+
+  let toast = createToast(actor);
+
+  setToastContext(toast);
+</script>
+
+{@render children$(toast)}

package/dist/toast/toaster.svelte

@@ -1,39 +1,39 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {CreateToastReturn} from './create-toast.svelte.js';
-  import type {CreateToasterReturn} from './create-toaster.svelte.js';
-
-  export interface ToasterProps
-    extends HtmlIngredientProps<'div', CreateToastReturn> {
-    toaster: CreateToasterReturn;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {Portal} from '../portal/index.js';
-  import {normalizeProps, useMachine} from '@zag-js/svelte';
-  import * as toast from '@zag-js/toast';
-  import ToastActor from './actor.svelte';
-
-  let {toaster, children, ...props}: ToasterProps = $props();
-
-  let [snapshot, send] = useMachine(toaster.machine);
-
-  let placement = $derived(snapshot.context.placement);
-  let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
-  let toasts = $derived(api.getToastsByPlacement(placement));
-  let mergedProps = $derived(mergeProps(props, api.getGroupProps({placement})));
-</script>
-
-<Portal>
-  <div {...mergedProps}>
-    {#each toasts as toast (toast.id)}
-      <ToastActor actor={toast}>
-        {#snippet children$(ctx)}
-          {@render children?.(ctx)}
-        {/snippet}
-      </ToastActor>
-    {/each}
-  </div>
-</Portal>
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {CreateToastReturn} from './create-toast.svelte.js';
+  import type {CreateToasterReturn} from './create-toaster.svelte.js';
+
+  export interface ToasterProps
+    extends HtmlIngredientProps<'div', CreateToastReturn> {
+    toaster: CreateToasterReturn;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {Portal} from '../portal/index.js';
+  import {normalizeProps, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import ToastActor from './actor.svelte';
+
+  let {toaster, children, ...props}: ToasterProps = $props();
+
+  let [snapshot, send] = useMachine(toaster.machine);
+
+  let placement = $derived(snapshot.context.placement);
+  let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
+  let toasts = $derived(api.getToastsByPlacement(placement));
+  let mergedProps = $derived(mergeProps(props, api.getGroupProps({placement})));
+</script>
+
+<Portal>
+  <div {...mergedProps}>
+    {#each toasts as toast (toast.id)}
+      <ToastActor actor={toast}>
+        {#snippet children$(ctx)}
+          {@render children?.(ctx)}
+        {/snippet}
+      </ToastActor>
+    {/each}
+  </div>
+</Portal>

package/dist/tour/create-tour.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as tour from '@zag-js/tour';
+export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateTourReturn extends tour.Api<any> {
+}
+export declare function createTour(props: CreateTourProps): CreateTourReturn;

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

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as tour from '@zag-js/tour';
+import { uid } from 'uid';
+export function createTour(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(tour.machine(context), { context });
+    const api = $derived(reflect(() => tour.connect(state, send, normalizeProps)));
+    return api;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -85,50 +85,50 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.66.1",
-    "@zag-js/anatomy": "0.66.1",
-    "@zag-js/avatar": "0.66.1",
-    "@zag-js/carousel": "0.66.1",
-    "@zag-js/checkbox": "0.66.1",
-    "@zag-js/clipboard": "0.66.1",
-    "@zag-js/collapsible": "0.66.1",
-    "@zag-js/color-picker": "0.66.1",
-    "@zag-js/combobox": "0.66.1",
-    "@zag-js/date-picker": "0.66.1",
-    "@zag-js/dialog": "0.66.1",
-    "@zag-js/dom-query": "0.66.1",
-    "@zag-js/editable": "0.66.1",
-    "@zag-js/file-upload": "0.66.1",
-    "@zag-js/floating-panel": "0.66.1",
-    "@zag-js/hover-card": "0.66.1",
-    "@zag-js/i18n-utils": "0.66.1",
-    "@zag-js/menu": "0.66.1",
-    "@zag-js/number-input": "0.66.1",
-    "@zag-js/pagination": "0.66.1",
-    "@zag-js/pin-input": "0.66.1",
-    "@zag-js/popover": "0.66.1",
-    "@zag-js/presence": "0.66.1",
-    "@zag-js/progress": "0.66.1",
-    "@zag-js/qr-code": "0.66.1",
-    "@zag-js/radio-group": "0.66.1",
-    "@zag-js/rating-group": "0.66.1",
-    "@zag-js/select": "0.66.1",
-    "@zag-js/signature-pad": "0.66.1",
-    "@zag-js/slider": "0.66.1",
-    "@zag-js/splitter": "0.66.1",
-    "@zag-js/steps": "0.66.1",
-    "@zag-js/svelte": "0.66.1",
-    "@zag-js/switch": "0.66.1",
-    "@zag-js/tabs": "0.66.1",
-    "@zag-js/tags-input": "0.66.1",
-    "@zag-js/time-picker": "0.66.1",
-    "@zag-js/timer": "0.66.1",
-    "@zag-js/toast": "0.66.1",
-    "@zag-js/toggle-group": "0.66.1",
-    "@zag-js/tooltip": "0.66.1",
-    "@zag-js/tour": "0.66.1",
-    "@zag-js/tree-view": "0.66.1",
-    "@zag-js/utils": "0.66.1",
+    "@zag-js/accordion": "0.67.0",
+    "@zag-js/anatomy": "0.67.0",
+    "@zag-js/avatar": "0.67.0",
+    "@zag-js/carousel": "0.67.0",
+    "@zag-js/checkbox": "0.67.0",
+    "@zag-js/clipboard": "0.67.0",
+    "@zag-js/collapsible": "0.67.0",
+    "@zag-js/color-picker": "0.67.0",
+    "@zag-js/combobox": "0.67.0",
+    "@zag-js/date-picker": "0.67.0",
+    "@zag-js/dialog": "0.67.0",
+    "@zag-js/dom-query": "0.67.0",
+    "@zag-js/editable": "0.67.0",
+    "@zag-js/file-upload": "0.67.0",
+    "@zag-js/floating-panel": "0.67.0",
+    "@zag-js/hover-card": "0.67.0",
+    "@zag-js/i18n-utils": "0.67.0",
+    "@zag-js/menu": "0.67.0",
+    "@zag-js/number-input": "0.67.0",
+    "@zag-js/pagination": "0.67.0",
+    "@zag-js/pin-input": "0.67.0",
+    "@zag-js/popover": "0.67.0",
+    "@zag-js/presence": "0.67.0",
+    "@zag-js/progress": "0.67.0",
+    "@zag-js/qr-code": "0.67.0",
+    "@zag-js/radio-group": "0.67.0",
+    "@zag-js/rating-group": "0.67.0",
+    "@zag-js/select": "0.67.0",
+    "@zag-js/signature-pad": "0.67.0",
+    "@zag-js/slider": "0.67.0",
+    "@zag-js/splitter": "0.67.0",
+    "@zag-js/steps": "0.67.0",
+    "@zag-js/svelte": "0.67.0",
+    "@zag-js/switch": "0.67.0",
+    "@zag-js/tabs": "0.67.0",
+    "@zag-js/tags-input": "0.67.0",
+    "@zag-js/time-picker": "0.67.0",
+    "@zag-js/timer": "0.67.0",
+    "@zag-js/toast": "0.67.0",
+    "@zag-js/toggle-group": "0.67.0",
+    "@zag-js/tooltip": "0.67.0",
+    "@zag-js/tour": "0.67.0",
+    "@zag-js/tree-view": "0.67.0",
+    "@zag-js/utils": "0.67.0",
     "uid": "2.0.2"
   },
   "peerDependencies": {
@@ -150,7 +150,7 @@
     "tailwind-merge": "2.5.2",
     "tailwind-variants": "0.2.1",
     "tailwindcss": "3.4.10",
-    "typescript": "5.5.4",
+    "typescript": "5.6.2",
     "vite": "5.4.3",
     "vitest": "2.0.5",
     "vitest-axe": "0.1.0"