ui-ingredients 0.0.7 → 0.0.9

package/dist/hover-card/positioner.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface HoverCardPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface HoverCardPositionerProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/hover-card/positioner.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface HoverCardPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface HoverCardPositionerProps extends SvelteHtmlProps<'div'> {
 }
 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/hover-card/root.svelte

@@ -1,23 +1,30 @@
 <script lang="ts" context="module">
-  import type {OptionalId} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateHoverCardContextProps,
     CreateHoverCardContextReturn,
   } from './context.svelte.js';
 
-  export interface HoverCardProps extends OptionalId<CreateHoverCardContextProps> {
+  export interface HoverCardProps
+    extends Omit<CreateHoverCardContextProps, 'id'> {
+    id?: string | null;
     children?: Snippet<[CreateHoverCardContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
-  import {createHoverCardContext, setHoverCardContext} from './context.svelte.js';
+  import {
+    createHoverCardContext,
+    setHoverCardContext,
+  } from './context.svelte.js';
 
-  let {id = uuid(), children, ...props}: HoverCardProps = $props();
+  let {id, children, ...props}: HoverCardProps = $props();
 
-  let context = createHoverCardContext({id, ...props});
+  let context = createHoverCardContext({
+    id: id ?? uuid(),
+    ...props,
+  });
 
   setHoverCardContext(context);
 </script>

package/dist/hover-card/root.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { OptionalId } from '../types.js';
 import type { Snippet } from 'svelte';
 import type { CreateHoverCardContextProps, CreateHoverCardContextReturn } from './context.svelte.js';
-export interface HoverCardProps extends OptionalId<CreateHoverCardContextProps> {
+export interface HoverCardProps extends Omit<CreateHoverCardContextProps, 'id'> {
+    id?: string | null;
     children?: Snippet<[CreateHoverCardContextReturn]>;
 }
 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> {

package/dist/hover-card/trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface HoverCardTriggerProps extends Assign<SvelteHTMLElements['a'], {}> {}
+  export interface HoverCardTriggerProps extends SvelteHtmlProps<'a'> {}
 </script>
 
 <script lang="ts">

package/dist/hover-card/trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface HoverCardTriggerProps extends Assign<SvelteHTMLElements['a'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface HoverCardTriggerProps extends SvelteHtmlProps<'a'> {
 }
 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/index.d.ts

@@ -14,6 +14,8 @@ export * as Combobox from './combobox/index.js';
 export type { ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxListProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, } from './combobox/index.js';
 export * as Dialog from './dialog/index.js';
 export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogDescriptionProps, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps, } from './dialog/index.js';
+export * as Editable from './editable/index.js';
+export type { EditableAreaProps, EditableCancelTriggerProps, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, } from './editable/index.js';
 export * as HoverCard from './hover-card/index.js';
 export type { HoverCardArrowProps, HoverCardArrowTipProps, HoverCardContentProps, HoverCardPositionerProps, HoverCardProps, HoverCardTriggerProps, } from './hover-card/index.js';
 export * as NumberInput from './number-input/index.js';
@@ -26,8 +28,12 @@ export * as Popover from './popover/index.js';
 export type { PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverDescriptionProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, } from './popover/index.js';
 export * as Progress from './progress/index.js';
 export type { ProgressCircleProps, ProgressCircleRangeProps, ProgressCircleTrackProps, ProgressLabelProps, ProgressProps, ProgressRangeProps, ProgressTrackProps, ProgressValueTextProps, } from './progress/index.js';
+export * as QRCode from './qr-code/index.js';
+export type { QRCodeFrameProps, QRCodeOverlayProps, QRCodePatternProps, QRCodeProps, } from './qr-code/index.js';
 export * as RadioGroup from './radio-group/index.js';
 export type { RadioGroupIndicatorProps, RadioGroupItemControlProps, RadioGroupItemHiddenInputProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupProps, } from './radio-group/index.js';
+export * as RatingGroup from './rating-group/index.js';
+export type { RatingGroupControlProps, RatingGroupHiddenInputProps, RatingGroupItemProps, RatingGroupLabelProps, RatingGroupProps, } from './rating-group/index.js';
 export * as Select from './select/index.js';
 export type { SelectClearTriggerProps, SelectContentProps, SelectControlProps, SelectHiddenSelectProps, SelectIndicatorProps, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueTextProps, } from './select/index.js';
 export * as Slider from './slider/index.js';
@@ -38,6 +44,10 @@ export * as Switch from './switch/index.js';
 export type { SwitchControlProps, SwitchHiddenInputProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, } from './switch/index.js';
 export * as Tabs from './tabs/index.js';
 export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, } from './tabs/index.js';
+export * as TagsInput from './tags-input/index.js';
+export type { TagsInputClearTriggerProps, TagsInputControlProps, TagsInputHiddenInputProps, TagsInputInputProps, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemPreviewProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputProps, } from './tags-input/index.js';
+export * as Timer from './timer/index.js';
+export type { TimerActionTriggerProps, TimerItemLabelProps, TimerItemProps, TimerItemValueProps, TimerProps, TimerSeparatorProps, } from './timer/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
 export type { ToggleGroupItemProps, ToggleGroupProps, } from './toggle-group/index.js';
 export * as Tooltip from './tooltip/index.js';
@@ -51,10 +61,12 @@ export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as datePickerAnatomy } from '@zag-js/date-picker';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
@@ -62,14 +74,17 @@ export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { anatomy as timerAnatomy } from '@zag-js/timer';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
 export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/dist/index.js

@@ -6,18 +6,23 @@ export * as Clipboard from './clipboard/index.js';
 export * as Collapsible from './collapsible/index.js';
 export * as Combobox from './combobox/index.js';
 export * as Dialog from './dialog/index.js';
+export * as Editable from './editable/index.js';
 export * as HoverCard from './hover-card/index.js';
 export * as NumberInput from './number-input/index.js';
 export * as Pagination from './pagination/index.js';
 export * as PinInput from './pin-input/index.js';
 export * as Popover from './popover/index.js';
 export * as Progress from './progress/index.js';
+export * as QRCode from './qr-code/index.js';
 export * as RadioGroup from './radio-group/index.js';
+export * as RatingGroup from './rating-group/index.js';
 export * as Select from './select/index.js';
 export * as Slider from './slider/index.js';
 export * as Steps from './steps/index.js';
 export * as Switch from './switch/index.js';
 export * as Tabs from './tabs/index.js';
+export * as TagsInput from './tags-input/index.js';
+export * as Timer from './timer/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
 export * as Tooltip from './tooltip/index.js';
 export * from './portal/index.js';
@@ -29,10 +34,12 @@ export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as datePickerAnatomy } from '@zag-js/date-picker';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
@@ -40,14 +47,17 @@ export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { anatomy as timerAnatomy } from '@zag-js/timer';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
 export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/dist/number-input/control.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface NumberInputControlTriggerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface NumberInputControlTriggerProps
+    extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface NumberInputControlTriggerProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface NumberInputControlTriggerProps extends SvelteHtmlProps<'div'> {
 }
 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/number-input/decrement-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
   export interface NumberInputDecrementTriggerProps
-    extends Assign<SvelteHTMLElements['button'], {}> {}
+    extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/number-input/decrement-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface NumberInputDecrementTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface NumberInputDecrementTriggerProps extends SvelteHtmlProps<'button'> {
 }
 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/number-input/increment-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
   export interface NumberInputIncrementTriggerProps
-    extends Assign<SvelteHTMLElements['button'], {}> {}
+    extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/number-input/increment-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface NumberInputIncrementTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface NumberInputIncrementTriggerProps extends SvelteHtmlProps<'button'> {
 }
 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/number-input/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Control, type NumberInputControlTriggerProps } from './control.svelte';
+export { default as Control, type NumberInputControlTriggerProps, } from './control.svelte';
 export { default as DecrementTrigger, type NumberInputDecrementTriggerProps, } from './decrement-trigger.svelte';
 export { default as IncrementTrigger, type NumberInputIncrementTriggerProps, } from './increment-trigger.svelte';
 export { default as Input, type NumberInputInputProps } from './input.svelte';
 export { default as Label, type NumberInputLabelProps } from './label.svelte';
 export { default as Root, type NumberInputProps } from './root.svelte';
-export { default as Scrubber, type NumberInputScrubberProps } from './scrubber.svelte';
+export { default as Scrubber, type NumberInputScrubberProps, } from './scrubber.svelte';

package/dist/number-input/index.js

@@ -1,7 +1,7 @@
-export { default as Control } from './control.svelte';
+export { default as Control, } from './control.svelte';
 export { default as DecrementTrigger, } from './decrement-trigger.svelte';
 export { default as IncrementTrigger, } from './increment-trigger.svelte';
 export { default as Input } from './input.svelte';
 export { default as Label } from './label.svelte';
 export { default as Root } from './root.svelte';
-export { default as Scrubber } from './scrubber.svelte';
+export { default as Scrubber, } from './scrubber.svelte';

package/dist/number-input/input.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface NumberInputInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface NumberInputInputProps extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface NumberInputInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface NumberInputInputProps extends SvelteHtmlProps<'input'> {
 }
 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/number-input/label.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface NumberInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+  export interface NumberInputLabelProps extends SvelteHtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface NumberInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface NumberInputLabelProps extends SvelteHtmlProps<'label'> {
 }
 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/number-input/root.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import type {
     CreateNumberInputContextProps,
     CreateNumberInputContextReturn,
@@ -9,20 +8,23 @@
 
   export interface NumberInputProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateNumberInputContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateNumberInputContextProps, 'id'>
     > {
-    children?: Snippet<[CreateNumberInputContextReturn]>;
+    children?: Snippet<[context: CreateNumberInputContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createNumberInputContext, setNumberInputContext} from './context.svelte.js';
+  import {
+    createNumberInputContext,
+    setNumberInputContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     max,
@@ -54,7 +56,7 @@
   }: NumberInputProps = $props();
 
   let context = createNumberInputContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     max,

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

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateNumberInputContextProps, CreateNumberInputContextReturn } from './context.svelte.js';
-export interface NumberInputProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateNumberInputContextProps>> {
-    children?: Snippet<[CreateNumberInputContextReturn]>;
+export interface NumberInputProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateNumberInputContextProps, 'id'>> {
+    children?: Snippet<[context: CreateNumberInputContextReturn]>;
 }
 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/number-input/scrubber.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface NumberInputScrubberProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface NumberInputScrubberProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface NumberInputScrubberProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface NumberInputScrubberProps extends SvelteHtmlProps<'div'> {
 }
 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/pagination/ellipsis.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {EllipsisProps} from '@zag-js/pagination';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface PaginationEllipsisProps
-    extends Assign<SvelteHTMLElements['span'], EllipsisProps> {}
+    extends Assign<SvelteHtmlProps<'span'>, EllipsisProps> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/ellipsis.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { EllipsisProps } from '@zag-js/pagination';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface PaginationEllipsisProps extends Assign<SvelteHTMLElements['span'], EllipsisProps> {
+export interface PaginationEllipsisProps extends Assign<SvelteHtmlProps<'span'>, EllipsisProps> {
 }
 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/pagination/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Ellipsis, type PaginationEllipsisProps } from './ellipsis.svelte';
+export { default as Ellipsis, type PaginationEllipsisProps, } from './ellipsis.svelte';
 export { default as Item, type PaginationItemProps } from './item.svelte';
-export { default as NextTrigger, type PaginationNextTriggerProps } from './next-trigger.svelte';
-export { default as PrevTrigger, type PaginationPrevTriggerProps } from './prev-trigger.svelte';
+export { default as NextTrigger, type PaginationNextTriggerProps, } from './next-trigger.svelte';
+export { default as PrevTrigger, type PaginationPrevTriggerProps, } from './prev-trigger.svelte';
 export { default as Root, type PaginationProps } from './root.svelte';

package/dist/pagination/index.js

@@ -1,5 +1,5 @@
-export { default as Ellipsis } from './ellipsis.svelte';
+export { default as Ellipsis, } from './ellipsis.svelte';
 export { default as Item } from './item.svelte';
-export { default as NextTrigger } from './next-trigger.svelte';
-export { default as PrevTrigger } from './prev-trigger.svelte';
+export { default as NextTrigger, } from './next-trigger.svelte';
+export { default as PrevTrigger, } from './prev-trigger.svelte';
 export { default as Root } from './root.svelte';

package/dist/pagination/item.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/pagination';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface PaginationItemProps
-    extends Assign<SvelteHTMLElements['button'], Omit<ItemProps, 'type'>> {}
+    extends Assign<SvelteHtmlProps<'button'>, Omit<ItemProps, 'type'>> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/item.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { ItemProps } from '@zag-js/pagination';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface PaginationItemProps extends Assign<SvelteHTMLElements['button'], Omit<ItemProps, 'type'>> {
+export interface PaginationItemProps extends Assign<SvelteHtmlProps<'button'>, Omit<ItemProps, 'type'>> {
 }
 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/pagination/next-trigger.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface PaginationNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface PaginationNextTriggerProps
+    extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/next-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface PaginationNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface PaginationNextTriggerProps extends SvelteHtmlProps<'button'> {
 }
 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/pagination/prev-trigger.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface PaginationPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface PaginationPrevTriggerProps
+    extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/prev-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface PaginationPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface PaginationPrevTriggerProps extends SvelteHtmlProps<'button'> {
 }
 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/pagination/root.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import type {
     CreatePaginationContextProps,
     CreatePaginationContextReturn,
@@ -9,20 +8,23 @@
 
   export interface PaginationProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreatePaginationContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreatePaginationContextProps, 'id'>
     > {
-    children?: Snippet<[CreatePaginationContextReturn]>;
+    children?: Snippet<[context: CreatePaginationContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createPaginationContext, setPaginationContext} from './context.svelte.js';
+  import {
+    createPaginationContext,
+    setPaginationContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     type,
@@ -39,7 +41,7 @@
   }: PaginationProps = $props();
 
   let context = createPaginationContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     type,