ui-ingredients 1.9.1 → 2.0.0-0

package/README.md

@@ -1,49 +1,60 @@
-# ui-ingredients
-
-Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
-
-## Installation
-
-```bash
-npm install ui-ingredients
-```
-
-## Usage
-
-```svelte
-<script>
-  import {Dialog, Portal} from 'ui-ingredients';
-  import {XCloseIcon} from '$lib/icons';
-  import {Button} from '$lib/ui';
-</script>
-
-<Dialog.Root lazyMount keepMounted>
-  <Dialog.Trigger>
-    {#snippet asChild(attrs)}
-      <Button {...attrs}>Open</Button>
-    {/snippet}
-  </Dialog.Trigger>
-
-  <Portal>
-    <Dialog.Backdrop />
-    <Dialog.Positioner>
-      <Dialog.Content>
-        <Dialog.Title>Title</Dialog.Title>
-        <Dialog.Description>Description</Dialog.Description>
-        <Dialog.CloseTrigger>
-          <XCloseIcon />
-        </Dialog.CloseTrigger>
-      </Dialog.Content>
-    </Dialog.Positioner>
-  </Portal>
-</Dialog.Root>
-```
-
-## Inspiration
-
-- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
-- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
-
-## Documentation
-
-Browse the [documentation](https://ui-ingredients.vercel.app/) for more information on how to use UI Ingredients
+# ui-ingredients
+
+Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
+
+## Installation
+
+```bash
+npm install ui-ingredients
+```
+
+## Usage
+
+```svelte
+<script>
+  import {Dialog, Portal} from 'ui-ingredients';
+  import {XCloseIcon} from '$lib/icons';
+  import {Button} from '$lib/ui';
+
+  let open = $state(false)
+</script>
+
+<Dialog.Root 
+  {open}
+  onOpenChange={function (details) {
+    open = details.open;
+  }}
+  lazyMount
+  keepMounted
+  onExitComplete={function () {
+    console.log('🚀');
+  }}
+>
+  <Dialog.Trigger>
+    {#snippet asChild(props)}
+      <Button {...props()}>Open</Button>
+    {/snippet}
+  </Dialog.Trigger>
+  <Portal>
+    <Dialog.Backdrop />
+    <Dialog.Positioner>
+      <Dialog.Content>
+        <Dialog.Title>Title</Dialog.Title>
+        <Dialog.Description>Description</Dialog.Description>
+        <Dialog.CloseTrigger>
+          <XCloseIcon />
+        </Dialog.CloseTrigger>
+      </Dialog.Content>
+    </Dialog.Positioner>
+  </Portal>
+</Dialog.Root>
+```
+
+## Inspiration
+
+- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
+- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
+
+## Documentation
+
+Browse the [documentation](https://ui-ingredients.vercel.app/) for more information on how to use UI Ingredients

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,5 @@
+export { default as Item } from './AccordionItem.svelte';
+export { default as ItemContent } from './AccordionItemContent.svelte';
+export { default as ItemIndicator } from './AccordionItemIndicator.svelte';
+export { default as ItemTrigger } from './AccordionItemTrigger.svelte';
+export { default as Root } from './AccordionRoot.svelte';

package/dist/Accordion/Accordion.js

@@ -0,0 +1,5 @@
+export { default as Item } from './AccordionItem.svelte';
+export { default as ItemContent } from './AccordionItemContent.svelte';
+export { default as ItemIndicator } from './AccordionItemIndicator.svelte';
+export { default as ItemTrigger } from './AccordionItemTrigger.svelte';
+export { default as Root } from './AccordionRoot.svelte';

package/dist/Accordion/AccordionContext.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ItemProps } from '@zag-js/accordion';
+import type { Accessor } from '../types.js';
+import type { CreateAccordionReturn } from './createAccordion.svelte.js';
+export declare const getAccordionContext: () => Accessor<CreateAccordionReturn>, setAccordionContext: (context: Accessor<CreateAccordionReturn>) => Accessor<CreateAccordionReturn>;
+export declare const getAccordionItemPropsContext: () => Accessor<ItemProps>, setAccordionItemPropsContext: (context: Accessor<ItemProps>) => Accessor<ItemProps>;

package/dist/Accordion/AccordionContext.svelte.js

@@ -0,0 +1,3 @@
+import { createContext } from 'svelte';
+export const [getAccordionContext, setAccordionContext] = createContext();
+export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext();

package/dist/Accordion/AccordionItem.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+import {defineKeyset} from '../defineKeySet.js';
+import type {ItemProps, ItemState} from '@zag-js/accordion';
+import {mergeProps} from '@zag-js/svelte';
+import type {Merge} from 'type-fest';
+import {setCollapsibleContext} from '../Collapsible/CollapsibleContext.svelte.js';
+import {createCollapsible} from '../Collapsible/createCollapsible.svelte.js';
+import {splitProps} from '../splitProps.js';
+import type {HtmlIngredientProps} from '../types.js';
+import {
+	getAccordionContext,
+	setAccordionItemPropsContext,
+} from './AccordionContext.svelte.js';
+
+export interface AccordionItemProps
+	extends Merge<
+		HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
+		ItemProps
+	> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AccordionItemProps = $props();
+
+let accordion = getAccordionContext();
+let itemPropKeys = defineKeyset<ItemProps>()(['value', 'disabled']);
+let [itemProps, localProps] = $derived(splitProps(props, itemPropKeys));
+
+let itemState = () => accordion().getItemState(itemProps);
+let contentProps = $derived(accordion().getItemContentProps(itemProps));
+let id = $props.id();
+let collapsible = createCollapsible(() => ({
+	id,
+	ids: {content: contentProps.id},
+	open: itemState().expanded,
+	disabled: itemState().disabled,
+}));
+
+let mergedProps = $derived(
+	mergeProps(
+		collapsible().getRootProps(),
+		accordion().getItemProps(itemProps),
+		localProps,
+	),
+);
+
+setCollapsibleContext(collapsible);
+setAccordionItemPropsContext(() => itemProps);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps, itemState)}
+{:else}
+	<div bind:this={ref} {...mergedProps}>{@render children?.(itemState)}</div>
+{/if}

package/dist/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ItemProps, ItemState } from '@zag-js/accordion';
+import type { Merge } from 'type-fest';
+import type { HtmlIngredientProps } from '../types.js';
+export interface AccordionItemProps extends Merge<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, ItemProps> {
+}
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/Accordion/AccordionItemContent.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import {getCollapsibleContext} from '../Collapsible/CollapsibleContext.svelte.js';
+import {createPresence} from '../Presence/createPresence.svelte.js';
+import {getPresenceStrategyPropsContext} from '../Presence/PresenceContext.svelte.js';
+import type {HtmlIngredientProps} from '../types.js';
+import {
+	getAccordionContext,
+	getAccordionItemPropsContext,
+} from './AccordionContext.svelte.js';
+
+export interface AccordionItemContentProps
+	extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AccordionItemContentProps = $props();
+
+let accordion = getAccordionContext();
+let itemProps = getAccordionItemPropsContext();
+let itemsState = () => accordion().getItemState(itemProps());
+let collapsible = getCollapsibleContext();
+let presenceStrategyProps = getPresenceStrategyPropsContext();
+let presence = createPresence(() => ({
+	...presenceStrategyProps(),
+	present: itemsState().expanded,
+}));
+
+let mergedProps = $derived(
+	mergeProps(
+		collapsible().getContentProps(),
+		accordion().getItemContentProps(itemProps()),
+		presence().getPresenceProps(),
+		props,
+	),
+);
+</script>
+
+{#if presence().mounted}
+	{#if asChild}
+		{@render asChild(() => mergedProps)}
+	{:else}
+		<div bind:this={ref} {...mergedProps}>{@render children?.()}</div>
+	{/if}
+{/if}

package/dist/Accordion/AccordionItemContent.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AccordionItemContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const AccordionItemContent: import("svelte").Component<AccordionItemContentProps, {}, "ref">;
+type AccordionItemContent = ReturnType<typeof AccordionItemContent>;
+export default AccordionItemContent;

package/dist/Accordion/AccordionItemIndicator.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import type {HtmlIngredientProps} from '../types.js';
+import {
+	getAccordionContext,
+	getAccordionItemPropsContext,
+} from './AccordionContext.svelte.js';
+
+export interface AccordionIndicatorProps
+	extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AccordionIndicatorProps = $props();
+
+let accordion = getAccordionContext();
+let itemProps = getAccordionItemPropsContext();
+let mergedProps = $derived(
+	mergeProps(accordion().getItemIndicatorProps(itemProps()), props),
+);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps)}
+{:else}
+	<span bind:this={ref} {...mergedProps}> {@render children?.()} </span>
+{/if}

package/dist/Accordion/AccordionItemTrigger.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import type {HtmlIngredientProps} from '../types.js';
+import {
+	getAccordionContext,
+	getAccordionItemPropsContext,
+} from './AccordionContext.svelte.js';
+
+export interface AccordionItemTriggerProps
+	extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AccordionItemTriggerProps = $props();
+
+let accordion = getAccordionContext();
+let itemProps = getAccordionItemPropsContext();
+let mergedProps = $derived(
+	mergeProps(accordion().getItemTriggerProps(itemProps()), props),
+);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps)}
+{:else}
+	<button type="button" bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/Accordion/AccordionRoot.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+import {defineKeyset} from '../defineKeySet.js';import {mergeProps} from '@zag-js/svelte';
+import type {Merge, SetOptional} from 'type-fest';
+import type {PresenceStrategyProps} from '../Presence/createPresence.svelte.js';
+import {setPresenceStrategyPropsContext} from '../Presence/PresenceContext.svelte.js';
+import {splitProps} from '../splitProps.js';
+import type {HtmlIngredientProps} from '../types.js';
+import {setAccordionContext} from './AccordionContext.svelte.js';
+import {
+	createAccordion,
+	type CreateAccordionProps,
+	type CreateAccordionReturn,
+} from './createAccordion.svelte.js';
+
+export interface AccordionProps
+	extends Merge<
+			HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>,
+			SetOptional<CreateAccordionProps, 'id'>
+		>,
+		PresenceStrategyProps {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AccordionProps = $props();
+
+let presentStrategyPropKeys = defineKeyset<PresenceStrategyProps>()([
+	'lazyMount',
+	'keepMounted',
+	'animateOnMount',
+	'onExitComplete',
+]);
+
+let [presenceStrategyProps, accordionProps] = $derived(
+	splitProps(props, presentStrategyPropKeys),
+);
+
+let createAccordionPropKeys = defineKeyset<CreateAccordionProps>()([
+	'id',
+	'ids',
+	'multiple',
+	'collapsible',
+	'value',
+	'defaultValue',
+	'disabled',
+	'onValueChange',
+	'onFocusChange',
+	'orientation',
+]);
+
+let [createAccordionProps, localProps] = $derived(
+	splitProps(accordionProps, createAccordionPropKeys),
+);
+
+let id = $props.id();
+let accordion = createAccordion(() => ({id, ...createAccordionProps}));
+let mergedProps = $derived(mergeProps(accordion().getRootProps(), localProps));
+
+setAccordionContext(accordion);
+setPresenceStrategyPropsContext(() => presenceStrategyProps);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps, accordion)}
+{:else}
+	<div bind:this={ref} {...mergedProps}>{@render children?.(accordion)}</div>
+{/if}
+
+

package/dist/Accordion/AccordionRoot.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Merge, SetOptional } from 'type-fest';
+import type { PresenceStrategyProps } from '../Presence/createPresence.svelte.js';
+import type { HtmlIngredientProps } from '../types.js';
+import { type CreateAccordionProps, type CreateAccordionReturn } from './createAccordion.svelte.js';
+export interface AccordionProps extends Merge<HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>, SetOptional<CreateAccordionProps, 'id'>>, PresenceStrategyProps {
+}
+declare const AccordionRoot: import("svelte").Component<AccordionProps, {}, "ref">;
+type AccordionRoot = ReturnType<typeof AccordionRoot>;
+export default AccordionRoot;

package/dist/Accordion/createAccordion.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as accordion from '@zag-js/accordion';
+import type { Accessor } from '../types.js';
+export interface CreateAccordionProps extends Omit<accordion.Props, 'dir' | 'getRootNode'> {
+}
+export interface CreateAccordionReturn extends accordion.Api {
+}
+export declare function createAccordion(props: Accessor<CreateAccordionProps>): Accessor<CreateAccordionReturn>;

package/dist/Accordion/createAccordion.svelte.js

@@ -0,0 +1,14 @@
+import * as accordion from '@zag-js/accordion';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { getEnvironmentContext } from '../EnvironmentProvider/EnvironmentProviderContext.svelte.js';
+import { getLocaleContext } from '../LocaleProvider/LocaleProviderContext.svelte.js';
+export function createAccordion(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const service = useMachine(accordion.machine, () => ({
+        dir: locale?.().dir,
+        getRootNode: environment?.().getRootNode,
+        ...props(),
+    }));
+    return () => accordion.connect(service, normalizeProps);
+}

package/dist/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+export * as Accordion from './Accordion.js';
+export type { AccordionItemProps } from './AccordionItem.svelte';
+export type { AccordionItemContentProps } from './AccordionItemContent.svelte';
+export type { AccordionIndicatorProps } from './AccordionItemIndicator.svelte';
+export type { AccordionItemTriggerProps } from './AccordionItemTrigger.svelte';
+export type { AccordionProps } from './AccordionRoot.svelte';
+export { getAccordionContext, setAccordionContext, } from './AccordionContext.svelte.js';
+export { createAccordion, type CreateAccordionProps, type CreateAccordionReturn, } from './createAccordion.svelte.js';
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/Accordion/index.js

@@ -0,0 +1,4 @@
+export * as Accordion from './Accordion.js';
+export { getAccordionContext, setAccordionContext, } from './AccordionContext.svelte.js';
+export { createAccordion, } from './createAccordion.svelte.js';
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/AlertDialog/AlertDialog.anatomy.d.ts

@@ -0,0 +1,2 @@
+export declare const anatomy: import("@zag-js/anatomy").Anatomy<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
+export declare const parts: Record<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,8 @@
+export { default as Backdrop } from './AlertDialogBackdrop.svelte';
+export { default as CloseTrigger } from './AlertDialogCloseTrigger.svelte';
+export { default as Content } from './AlertDialogContent.svelte';
+export { default as Description } from './AlertDialogDescription.svelte';
+export { default as Positioner } from './AlertDialogPositioner.svelte';
+export { default as Root } from './AlertDialogRoot.svelte';
+export { default as Title } from './AlertDialogTitle.svelte';
+export { default as Trigger } from './AlertDialogTrigger.svelte';

package/dist/AlertDialog/AlertDialog.js

@@ -0,0 +1,8 @@
+export { default as Backdrop } from './AlertDialogBackdrop.svelte';
+export { default as CloseTrigger } from './AlertDialogCloseTrigger.svelte';
+export { default as Content } from './AlertDialogContent.svelte';
+export { default as Description } from './AlertDialogDescription.svelte';
+export { default as Positioner } from './AlertDialogPositioner.svelte';
+export { default as Root } from './AlertDialogRoot.svelte';
+export { default as Title } from './AlertDialogTitle.svelte';
+export { default as Trigger } from './AlertDialogTrigger.svelte';

package/dist/AlertDialog/AlertDialogBackdrop.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import {omit} from 'es-toolkit';
+import {createPresence} from '../Presence/createPresence.svelte.js';
+import {getPresenceStrategyPropsContext} from '../Presence/PresenceContext.svelte.js';
+import type {HtmlIngredientProps} from '../types.js';
+import {getAlertDialogContext} from './AlertDialogContext.svelte.js';
+
+export interface AlertDialogBackdropProps
+	extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AlertDialogBackdropProps = $props();
+
+let alertDialog = getAlertDialogContext();
+let presenceStrategyProps = getPresenceStrategyPropsContext();
+let presence = createPresence(() => ({
+	...omit(presenceStrategyProps(), ['onExitComplete']),
+	present: alertDialog().open,
+}));
+
+let mergedProps = $derived(
+	mergeProps(
+		alertDialog().getBackdropProps(),
+		presence().getPresenceProps(),
+		props,
+	),
+);
+</script>
+
+{#if presence().mounted}
+	{#if asChild}
+		{@render asChild(() => mergedProps)}
+	{:else}
+		<div bind:this={ref} {...mergedProps}>{@render children?.()}</div>
+	{/if}
+{/if}

package/dist/AlertDialog/AlertDialogBackdrop.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AlertDialogBackdropProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const AlertDialogBackdrop: import("svelte").Component<AlertDialogBackdropProps, {}, "ref">;
+type AlertDialogBackdrop = ReturnType<typeof AlertDialogBackdrop>;
+export default AlertDialogBackdrop;

package/dist/AlertDialog/AlertDialogCloseTrigger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import type {HtmlIngredientProps} from '../types.js';
+import {getAlertDialogContext} from './AlertDialogContext.svelte.js';
+
+export interface AlertDialogCloseTriggerProps
+	extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AlertDialogCloseTriggerProps = $props();
+
+let alertDialog = getAlertDialogContext();
+let mergedProps = $derived(
+	mergeProps(alertDialog().getCloseTriggerProps(), props),
+);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps)}
+{:else}
+	<button type="button" bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/AlertDialog/AlertDialogContent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import {getPresenceContext} from '../Presence/PresenceContext.svelte.js';
+import type {HtmlIngredientProps} from '../types.js';
+import {getAlertDialogContext} from './AlertDialogContext.svelte.js';
+
+export interface AlertDialogContentProps
+	extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AlertDialogContentProps = $props();
+
+let alertDialog = getAlertDialogContext();
+let presence = getPresenceContext();
+let mergedProps = $derived(
+	mergeProps(
+		alertDialog().getContentProps(),
+		presence().getPresenceProps(),
+		props,
+	),
+);
+</script>
+
+{#if presence().mounted}
+	{#if asChild}
+		{@render asChild(() => mergedProps)}
+	{:else}
+		<div bind:this={ref} {...mergedProps}>{@render children?.()}</div>
+	{/if}
+{/if}

package/dist/AlertDialog/AlertDialogContent.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AlertDialogContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const AlertDialogContent: import("svelte").Component<AlertDialogContentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/AlertDialog/AlertDialogContext.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { Accessor } from '../types.js';
+import type { CreateAlertDialogReturn } from './createAlertDialog.svelte.js';
+export declare const getAlertDialogContext: () => Accessor<CreateAlertDialogReturn>, setAlertDialogContext: (context: Accessor<CreateAlertDialogReturn>) => Accessor<CreateAlertDialogReturn>;

package/dist/AlertDialog/AlertDialogContext.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getAlertDialogContext, setAlertDialogContext] = createContext();

package/dist/AlertDialog/AlertDialogDescription.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import type {HtmlIngredientProps} from '../types.js';
+import {getAlertDialogContext} from './AlertDialogContext.svelte.js';
+
+export interface AlertDialogDescriptionProps
+	extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+let {
+	ref = $bindable(null),
+	asChild,
+	children,
+	...props
+}: AlertDialogDescriptionProps = $props();
+
+let alertDialog = getAlertDialogContext();
+let mergedProps = $derived(
+	mergeProps(alertDialog().getDescriptionProps(), props),
+);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps)}
+{:else}
+	<span bind:this={ref} {...mergedProps}>{@render children?.()}</span>
+{/if}

package/dist/AlertDialog/AlertDialogDescription.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AlertDialogDescriptionProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const AlertDialogDescription: import("svelte").Component<AlertDialogDescriptionProps, {}, "ref">;
+type AlertDialogDescription = ReturnType<typeof AlertDialogDescription>;
+export default AlertDialogDescription;