ui-ingredients 2.0.0-4 → 2.0.0

package/dist/Accordion/AccordionItem.svelte

@@ -1,60 +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}
+<script lang="ts" module>
+import type {ItemProps, ItemState} from '@zag-js/accordion';
+import {mergeProps} from '@zag-js/svelte';
+import type {Merge} from 'type-fest';
+import {defineKeyset} from '../defineKeySet.js';
+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/AccordionItemContent.svelte

@@ -1,50 +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}
+<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/AccordionItemIndicator.svelte

@@ -1,32 +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}
+<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

@@ -1,34 +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}
+<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

@@ -1,72 +1,72 @@
-<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 presenceStrategyPropKeys = defineKeyset<PresenceStrategyProps>()([
-	'lazyMount',
-	'keepMounted',
-	'animateOnMount',
-	'onExitComplete',
-]);
-
-let [presenceStrategyProps, accordionProps] = $derived(
-	splitProps(props, presenceStrategyPropKeys),
-);
-
-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}
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import type {Merge, SetOptional} from 'type-fest';
+import {defineKeyset} from '../defineKeySet.js';
+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 {
+	type CreateAccordionProps,
+	type CreateAccordionReturn,
+	createAccordion,
+} 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 presenceStrategyPropKeys = defineKeyset<PresenceStrategyProps>()([
+	'lazyMount',
+	'keepMounted',
+	'animateOnMount',
+	'onExitComplete',
+]);
+
+let [presenceStrategyProps, accordionProps] = $derived(
+	splitProps(props, presenceStrategyPropKeys),
+);
+
+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/index.d.ts

@@ -1,9 +1,9 @@
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export * as Accordion from './Accordion.js';
+export * from './AccordionContext.svelte.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 * from './AccordionContext.svelte.js';
 export * from './createAccordion.svelte.js';
-export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/Accordion/index.js

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

package/dist/Alert/Alert.anatomy.d.ts

@@ -0,0 +1 @@
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "root" | "description">;

package/dist/Alert/Alert.anatomy.js

@@ -0,0 +1,2 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const anatomy = createAnatomy('alert').parts('root', 'title', 'description');

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+export { default as Description } from './AlertDescription.svelte';
+export { default as Root } from './AlertRoot.svelte';
+export { default as Title } from './AlertTitle.svelte';

package/dist/Alert/Alert.js

@@ -0,0 +1,3 @@
+export { default as Description } from './AlertDescription.svelte';
+export { default as Root } from './AlertRoot.svelte';
+export { default as Title } from './AlertTitle.svelte';

package/dist/Alert/AlertContext.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { Accessor } from '../types.js';
+import type { CreateAlertReturn } from './createAlert.svelte.js';
+export declare const getAlertContext: () => Accessor<CreateAlertReturn>, setAlertContext: (context: Accessor<CreateAlertReturn>) => Accessor<CreateAlertReturn>;

package/dist/Alert/AlertContext.svelte.js

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

package/dist/Alert/AlertDescription.svelte

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

package/dist/Alert/AlertDescription.svelte.d.ts

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

package/dist/Alert/AlertRoot.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+import {mergeProps} from '@zag-js/svelte';
+import type {Merge, SetOptional} from 'type-fest';
+import {defineKeyset} from '../defineKeySet.js';
+import {splitProps} from '../splitProps.js';
+import type {HtmlIngredientProps} from '../types.js';
+import {setAlertContext} from './AlertContext.svelte.js';
+import {
+	type CreateAlertProps,
+	type CreateAlertReturn,
+	createAlert,
+} from './createAlert.svelte.js';
+
+export interface AlertProps
+	extends Merge<
+		HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn>,
+		SetOptional<CreateAlertProps, 'id'>
+	> {}
+</script>
+
+<script lang="ts">
+let {ref = $bindable(null), asChild, children, ...props}: AlertProps = $props();
+
+let createAlertPropKeys = defineKeyset<CreateAlertProps>()(['id', 'ids']);
+let [createAlertProps, localProps] = $derived(
+	splitProps(props, createAlertPropKeys),
+);
+
+let id = $props.id();
+let alert = createAlert(() => ({id, ...createAlertProps}));
+let mergedProps = $derived(mergeProps(alert().getRootProps(), localProps));
+
+setAlertContext(alert);
+</script>
+
+{#if asChild}
+	{@render asChild(() => mergedProps, alert)}
+{:else}
+	<div bind:this={ref} {...mergedProps}>{@render children?.(alert)}</div>
+{/if}

package/dist/Alert/AlertRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Merge, SetOptional } from 'type-fest';
+import type { HtmlIngredientProps } from '../types.js';
+import { type CreateAlertProps, type CreateAlertReturn } from './createAlert.svelte.js';
+export interface AlertProps extends Merge<HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn>, SetOptional<CreateAlertProps, 'id'>> {
+}
+declare const AlertRoot: import("svelte").Component<AlertProps, {}, "ref">;
+type AlertRoot = ReturnType<typeof AlertRoot>;
+export default AlertRoot;

package/dist/Alert/AlertTitle.svelte

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