ui-ingredients 0.31.2 → 1.0.0

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from './environment-provider/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './floating-panel/index.js';
+export * from './focus-trap/index.js';
 export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
@@ -51,7 +52,6 @@ export * from './tour/index.js';
 export * from './tree-view/index.js';
 export * from './create-context.svelte.js';
 export * from './create-split-props.js';
-export * from './create-unique-id.js';
 export * from './merge-props.js';
 export * from '@zag-js/anatomy';
 export { reflect } from '@zag-js/svelte';

package/dist/index.js

@@ -18,6 +18,7 @@ export * from './environment-provider/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './floating-panel/index.js';
+export * from './focus-trap/index.js';
 export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
@@ -51,7 +52,6 @@ export * from './tour/index.js';
 export * from './tree-view/index.js';
 export * from './create-context.svelte.js';
 export * from './create-split-props.js';
-export * from './create-unique-id.js';
 export * from './merge-props.js';
 export * from '@zag-js/anatomy';
 export { reflect } from '@zag-js/svelte';

package/dist/locale-provider/index.d.ts

@@ -1,3 +1,3 @@
 export type { Locale } from '@zag-js/i18n-utils';
-export { getLocaleContext, setLocaleContext, } from './local-provider-context.svelte.js';
-export { default as LocaleProvider, type LocaleProviderProps, } from './local-provider.svelte';
+export { getLocaleContext, setLocaleContext, } from './locale-provider-context.svelte.js';
+export { default as LocaleProvider, type LocaleProviderProps, } from './locale-provider.svelte';

package/dist/locale-provider/index.js

@@ -1,2 +1,2 @@
-export { getLocaleContext, setLocaleContext, } from './local-provider-context.svelte.js';
-export { default as LocaleProvider, } from './local-provider.svelte';
+export { getLocaleContext, setLocaleContext, } from './locale-provider-context.svelte.js';
+export { default as LocaleProvider, } from './locale-provider.svelte';

package/dist/locale-provider/{local-provider.svelte → locale-provider.svelte}

@@ -9,7 +9,7 @@
 
 <script lang="ts">
   import {isRTL} from '@zag-js/i18n-utils';
-  import {setLocaleContext} from './local-provider-context.svelte.js';
+  import {setLocaleContext} from './locale-provider-context.svelte.js';
 
   let {children, ...props}: LocaleProviderProps = $props();
 

package/dist/locale-provider/locale-provider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface LocaleProviderProps {
+    locale: string;
+    children: Snippet;
+}
+declare const LocaleProvider: import("svelte").Component<LocaleProviderProps, {}, "">;
+type LocaleProvider = ReturnType<typeof LocaleProvider>;
+export default LocaleProvider;

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

@@ -1,9 +1,7 @@
 import * as menu from '@zag-js/menu';
-export interface CreateMenuProps extends Omit<menu.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
-    id?: string;
-    openControlled?: boolean;
+export interface CreateMenuProps extends Omit<menu.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateMenuReturn extends menu.Api {
-    machine: menu.Service;
+    service: menu.Service;
 }
 export declare function createMenu(props: CreateMenuProps): CreateMenuReturn;

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

@@ -1,22 +1,17 @@
 import * as menu from '@zag-js/menu';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createMenu(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(menu.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send, machine] = useMachine(menu.machine(context), { context });
     return reflect(() => ({
-        ...menu.connect(state, send, normalizeProps),
-        machine,
+        ...menu.connect(service, normalizeProps),
+        service,
     }));
 }

package/dist/menu/menu-arrow-tip.svelte

@@ -17,7 +17,7 @@
   }: MenuArrowTipProps = $props();
 
   let menu = getMenuContext();
-  let mergedProps = $derived(mergeProps(menu!.getArrowTipProps(), props));
+  let mergedProps = $derived(mergeProps(menu?.getArrowTipProps() ?? {}, props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-arrow.svelte

@@ -17,7 +17,7 @@
   }: MenuArrowProps = $props();
 
   let menu = getMenuContext();
-  let mergedProps = $derived(mergeProps(menu!.getArrowProps(), props));
+  let mergedProps = $derived(mergeProps(menu?.getArrowProps() ?? {}, props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-content.svelte

@@ -21,7 +21,11 @@
   let menu = getMenuContext();
   let presence = getPresenceContext();
   let mergedProps = $derived(
-    mergeProps(menu!.getContentProps(), presence.getPresenceProps(), props),
+    mergeProps(
+      menu?.getContentProps() ?? {},
+      presence.getPresenceProps(),
+      props,
+    ),
   );
 </script>
 

package/dist/menu/menu-context-trigger.svelte

@@ -17,7 +17,9 @@
   }: MenuContextTriggerProps = $props();
 
   let menu = getMenuContext();
-  let mergedProps = $derived(mergeProps(menu!.getContextTriggerProps(), props));
+  let mergedProps = $derived(
+    mergeProps(menu?.getContextTriggerProps() ?? {}, props),
+  );
 </script>
 
 {#if asChild}

package/dist/menu/menu-indicator.svelte

@@ -17,7 +17,9 @@
   }: MenuIndicatorProps = $props();
 
   let menu = getMenuContext();
-  let mergedProps = $derived(mergeProps(menu!.getIndicatorProps(), props));
+  let mergedProps = $derived(
+    mergeProps(menu?.getIndicatorProps() ?? {}, props),
+  );
 </script>
 
 {#if asChild}

package/dist/menu/menu-item-group-label.svelte

@@ -23,7 +23,7 @@
   let itemGroupProps = getMenuItemGroupPropsContext();
   let mergedProps = $derived(
     mergeProps(
-      menu!.getItemGroupLabelProps({htmlFor: itemGroupProps.id}),
+      menu?.getItemGroupLabelProps({htmlFor: itemGroupProps.id}) ?? {},
       props,
     ),
   );

package/dist/menu/menu-item-group.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
   import {
     getMenuContext,
@@ -21,11 +20,12 @@
     ...props
   }: MenuItemGroupProps = $props();
 
+  let uid = $props.id();
+
   let menu = getMenuContext();
-  let uid = createUniqueId();
   let itemGroupProps = $derived({id: id ?? uid});
   let mergedProps = $derived(
-    mergeProps(menu!.getItemGroupProps(itemGroupProps), props),
+    mergeProps(menu?.getItemGroupProps(itemGroupProps) ?? {}, props),
   );
 
   setMenuItemGroupPropsContext(() => itemGroupProps);

package/dist/menu/menu-item.svelte

@@ -31,9 +31,16 @@
   );
 
   let menu = getMenuContext();
-  let itemState = $derived(menu!.getItemState(itemProps));
+
+  let itemState: ItemState = $derived(
+    menu?.getItemState(itemProps) ?? {
+      disabled: false,
+      highlighted: false,
+    },
+  );
+
   let mergedProps = $derived(
-    mergeProps(menu!.getItemProps(itemProps), localProps),
+    mergeProps(menu?.getItemProps(itemProps) ?? {}, localProps),
   );
 </script>
 

package/dist/menu/menu-option-item-indicator.svelte

@@ -22,7 +22,7 @@
   let menu = getMenuContext();
   let itemProps = getMenuOptionItemPropsContext();
   let mergedProps = $derived(
-    mergeProps(menu!.getItemIndicatorProps(itemProps), props),
+    mergeProps(menu?.getItemIndicatorProps(itemProps) ?? {}, props),
   );
 </script>
 

package/dist/menu/menu-option-item-text.svelte

@@ -22,7 +22,7 @@
   let menu = getMenuContext();
   let itemProps = getMenuOptionItemPropsContext();
   let mergedProps = $derived(
-    mergeProps(menu!.getItemTextProps(itemProps), props),
+    mergeProps(menu?.getItemTextProps(itemProps) ?? {}, props),
   );
 </script>
 

package/dist/menu/menu-option-item.svelte

@@ -37,9 +37,17 @@
   );
 
   let menu = getMenuContext();
-  let itemState = $derived(menu!.getOptionItemState(itemProps));
+
+  let itemState: OptionItemState = $derived(
+    menu?.getOptionItemState(itemProps) ?? {
+      checked: false,
+      disabled: false,
+      highlighted: false,
+    },
+  );
+
   let mergedProps = $derived(
-    mergeProps(menu!.getOptionItemProps(itemProps), localProps),
+    mergeProps(menu?.getOptionItemProps(itemProps) ?? {}, localProps),
   );
 
   setMenuOptionItemPropsContext(() => itemProps);

package/dist/menu/menu-positioner.svelte

@@ -20,7 +20,11 @@
   let menu = getMenuContext();
   let presence = getPresenceContext();
   let mergedProps = $derived(
-    mergeProps(menu!.getPositionerProps(), presence.getPresenceProps(), props),
+    mergeProps(
+      menu?.getPositionerProps() ?? {},
+      presence.getPresenceProps(),
+      props,
+    ),
   );
 </script>
 

package/dist/menu/menu-root.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Optional} from '../types.js';
   import {
     type CreateMenuProps,
     type CreateMenuReturn,
   } from './create-menu.svelte.js';
 
   export interface MenuRootProps
-    extends CreateMenuProps,
+    extends Optional<CreateMenuProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateMenuReturn]>;
   }
@@ -25,16 +26,19 @@
     setMenuTriggerItemContext,
   } from './menu-context.svelte.js';
 
-  let {children, ...props}: MenuRootProps = $props();
+  let {id, children, ...props}: MenuRootProps = $props();
+
+  let uid = $props.id();
 
   let [createMenuProps, presenceStrategyProps] = $derived(
-    createSplitProps<CreateMenuProps>([
+    createSplitProps<Omit<CreateMenuProps, 'id'>>([
       'anchorPoint',
       'aria-label',
       'closeOnSelect',
       'composite',
+      'defaultHighlightedValue',
+      'defaultOpen',
       'highlightedValue',
-      'id',
       'ids',
       'loopFocus',
       'navigate',
@@ -46,14 +50,15 @@
       'onPointerDownOutside',
       'onSelect',
       'open',
-      'openControlled',
       'positioning',
       'typeahead',
     ])(props),
   );
 
   let parentMenu = getMenuContext();
-  let menu = createMenu(reflect(() => createMenuProps));
+
+  let menu = createMenu(reflect(() => ({...createMenuProps, id: id ?? uid})));
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,
@@ -66,8 +71,8 @@
   setMenuTriggerItemContext(() => parentMenu?.getTriggerItemProps(menu) ?? {});
 
   if (parentMenu) {
-    parentMenu.setChild(menu.machine);
-    menu.setParent(parentMenu.machine);
+    parentMenu.setChild(menu.service);
+    menu.setParent(parentMenu.service);
   }
 </script>
 

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Optional } from '../types.js';
 import { type CreateMenuProps, type CreateMenuReturn } from './create-menu.svelte.js';
-export interface MenuRootProps extends CreateMenuProps, PresenceStrategyProps {
+export interface MenuRootProps extends Optional<CreateMenuProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateMenuReturn]>;
 }
 declare const MenuRoot: import("svelte").Component<MenuRootProps, {}, "">;

package/dist/menu/menu-separator.svelte

@@ -17,7 +17,9 @@
   }: MenuSeparatorProps = $props();
 
   let menu = getMenuContext();
-  let mergedProps = $derived(mergeProps(menu!.getSeparatorProps(), props));
+  let mergedProps = $derived(
+    mergeProps(menu?.getSeparatorProps() ?? {}, props),
+  );
 </script>
 
 {#if asChild}

package/dist/menu/menu-trigger.svelte

@@ -17,7 +17,7 @@
   }: MenuTriggerProps = $props();
 
   let menu = getMenuContext();
-  let mergedProps = $derived(mergeProps(menu!.getTriggerProps(), props));
+  let mergedProps = $derived(mergeProps(menu?.getTriggerProps() ?? {}, props));
 </script>
 
 {#if asChild}

package/dist/number-input/create-number-input.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as numberInput from '@zag-js/number-input';
-export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateNumberInputProps extends Omit<numberInput.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateNumberInputReturn extends numberInput.Api {
 }

package/dist/number-input/create-number-input.svelte.js

@@ -1,16 +1,13 @@
 import * as numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createNumberInput(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(numberInput.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -24,15 +21,14 @@ export function createNumberInput(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(numberInput.machine(context), { context });
     return reflect(() => {
-        const o = numberInput.connect(state, send, normalizeProps);
+        const api = numberInput.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getInputProps(),
+                    ...api.getInputProps(),
                 };
             },
         };

package/dist/number-input/number-input-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateNumberInputProps,
     CreateNumberInputReturn,
@@ -8,7 +8,7 @@
   export interface NumberInputProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateNumberInputReturn>,
-      CreateNumberInputProps
+      Optional<CreateNumberInputProps, 'id'>
     > {}
 </script>
 
@@ -20,22 +20,25 @@
   import {setNumberInputContext} from './number-input-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: NumberInputProps = $props();
 
+  let uid = $props.id();
+
   let [createNumberInputProps, localProps] = $derived(
-    createSplitProps<CreateNumberInputProps>([
+    createSplitProps<Omit<CreateNumberInputProps, 'id'>>([
       'allowMouseWheel',
       'allowOverflow',
       'clampValueOnBlur',
+      'defaultValue',
       'disabled',
       'focusInputOnChange',
       'form',
       'formatOptions',
-      'id',
       'ids',
       'inputMode',
       'invalid',
@@ -56,7 +59,9 @@
     ])(props),
   );
 
-  let numberInput = createNumberInput(reflect(() => createNumberInputProps));
+  let numberInput = createNumberInput(
+    reflect(() => ({...createNumberInputProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(
     mergeProps(numberInput.getRootProps(), localProps),

package/dist/number-input/number-input-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateNumberInputProps, CreateNumberInputReturn } from './create-number-input.svelte.js';
-export interface NumberInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateNumberInputReturn>, CreateNumberInputProps> {
+export interface NumberInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateNumberInputReturn>, Optional<CreateNumberInputProps, 'id'>> {
 }
 declare const NumberInputRoot: import("svelte").Component<NumberInputProps, {}, "ref">;
 type NumberInputRoot = ReturnType<typeof NumberInputRoot>;

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

@@ -1,6 +1,5 @@
 import * as pagination from '@zag-js/pagination';
-export interface CreatePaginationProps extends Omit<pagination.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreatePaginationProps extends Omit<pagination.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreatePaginationReturn extends pagination.Api {
 }

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

@@ -1,18 +1,14 @@
 import * as pagination from '@zag-js/pagination';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createPagination(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(pagination.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(pagination.machine(context), { context });
-    return reflect(() => pagination.connect(state, send, normalizeProps));
+    return reflect(() => pagination.connect(service, normalizeProps));
 }

package/dist/pagination/pagination-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreatePaginationProps,
     CreatePaginationReturn,
@@ -8,7 +8,7 @@
   export interface PaginationProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreatePaginationReturn>,
-      CreatePaginationProps
+      Optional<CreatePaginationProps, 'id'>
     > {}
 </script>
 
@@ -20,16 +20,20 @@
   import {setPaginationContext} from './pagination-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: PaginationProps = $props();
 
+  let uid = $props.id();
+
   let [createPaginationProps, localProps] = $derived(
-    createSplitProps<CreatePaginationProps>([
+    createSplitProps<Omit<CreatePaginationProps, 'id'>>([
       'count',
-      'id',
+      'defaultPage',
+      'defaultPageSize',
       'ids',
       'onPageChange',
       'onPageSizeChange',
@@ -41,7 +45,9 @@
     ])(props),
   );
 
-  let pagination = createPagination(reflect(() => createPaginationProps));
+  let pagination = createPagination(
+    reflect(() => ({...createPaginationProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(pagination.getRootProps(), localProps));
 

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreatePaginationProps, CreatePaginationReturn } from './create-pagination.svelte.js';
-export interface PaginationProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreatePaginationReturn>, CreatePaginationProps> {
+export interface PaginationProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreatePaginationReturn>, Optional<CreatePaginationProps, 'id'>> {
 }
 declare const PaginationRoot: import("svelte").Component<PaginationProps, {}, "ref">;
 type PaginationRoot = ReturnType<typeof PaginationRoot>;

package/dist/pin-input/create-pin-input.svelte.d.ts

@@ -1,9 +1,6 @@
 import * as pinInput from '@zag-js/pin-input';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-export interface CreatePinInputProps extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreatePinInputProps extends Omit<pinInput.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreatePinInputReturn extends pinInput.Api {
-    getClearTriggerProps(): HTMLButtonAttributes;
 }
 export declare function createPinInputContext(props: CreatePinInputProps): CreatePinInputReturn;

package/dist/pin-input/create-pin-input.svelte.js

@@ -1,17 +1,13 @@
 import * as pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
-import { parts } from './pin-input-anatomy.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createPinInputContext(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(pinInput.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -24,24 +20,14 @@ export function createPinInputContext(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(pinInput.machine(context), { context });
     return reflect(() => {
-        const o = pinInput.connect(state, send, normalizeProps);
+        const api = pinInput.connect(service, normalizeProps);
         return {
-            ...o,
-            getClearTriggerProps() {
-                return {
-                    type: 'button',
-                    onclick() {
-                        o.clearValue();
-                    },
-                    ...parts.clearTrigger.attrs,
-                };
-            },
+            ...api,
             getHiddenInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenInputProps(),
+                    ...api.getHiddenInputProps(),
                 };
             },
         };

package/dist/pin-input/index.d.ts

@@ -1,5 +1,4 @@
 export * as PinInput from './pin-input.js';
-export type { PinInputClearTriggerProps } from './pin-input-clear-trigger.svelte';
 export type { PinInputControlProps } from './pin-input-control.svelte';
 export type { PinInputHiddenInputProps } from './pin-input-hidden-input.svelte';
 export type { PinInputInputProps } from './pin-input-input.svelte';