ui-ingredients 0.0.6 → 0.0.8

package/dist/hover-card/arrow-tip.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useHoverCardContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useHoverCardContext();
-let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface HoverCardArrowTipProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useHoverCardContext} from './context.svelte.js';
+
+  let {children, ...props}: HoverCardArrowTipProps = $props();
+
+  let context = useHoverCardContext();
+
+  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/hover-card/arrow.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useHoverCardContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useHoverCardContext();
-let attrs = $derived(mergeProps(props, context.getArrowProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface HoverCardArrowProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useHoverCardContext} from './context.svelte.js';
+
+  let {children, ...props}: HoverCardArrowProps = $props();
+
+  let context = useHoverCardContext();
+
+  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/hover-card/content.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useHoverCardContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useHoverCardContext();
-let attrs = $derived(mergeProps(props, context.getContentProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface HoverCardContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useHoverCardContext} from './context.svelte.js';
+
+  let {children, ...props}: HoverCardContentProps = $props();
+
+  let context = useHoverCardContext();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/hover-card/positioner.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useHoverCardContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useHoverCardContext();
-let attrs = $derived(mergeProps(props, context.getPositionerProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface HoverCardPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useHoverCardContext} from './context.svelte.js';
+
+  let {children, ...props}: HoverCardPositionerProps = $props();
+
+  let context = useHoverCardContext();
+
+  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/hover-card/root.svelte

@@ -1,10 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { createHoverCardContext, setHoverCardContext } from "./context.svelte.js";
-let { id = uuid(), children, ...props } = $props();
-let context = createHoverCardContext({ id, ...props });
-setHoverCardContext(context);
-</script>
-
-{@render children?.(context)}
+<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> {
+    children?: Snippet<[CreateHoverCardContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {createHoverCardContext, setHoverCardContext} from './context.svelte.js';
+
+  let {id = uuid(), children, ...props}: HoverCardProps = $props();
+
+  let context = createHoverCardContext({id, ...props});
+
+  setHoverCardContext(context);
+</script>
+
+{@render children?.(context)}

package/dist/hover-card/trigger.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useHoverCardContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useHoverCardContext();
-let attrs = $derived(mergeProps(props, context.getTriggerProps()));
-</script>
-
-<a {...attrs}>
-  {@render children?.()}
-</a>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface HoverCardTriggerProps extends Assign<SvelteHTMLElements['a'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useHoverCardContext} from './context.svelte.js';
+
+  let {children, ...props}: HoverCardTriggerProps = $props();
+
+  let context = useHoverCardContext();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+</script>
+
+<a {...attrs}>
+  {@render children?.()}
+</a>

package/dist/index.d.ts

@@ -26,6 +26,8 @@ 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 Select from './select/index.js';
@@ -38,6 +40,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 +57,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 +70,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

@@ -12,12 +12,15 @@ 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 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 +32,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 +45,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,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useNumberInputContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useNumberInputContext();
-let attrs = $derived(mergeProps(props, context.getControlProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface NumberInputControlTriggerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useNumberInputContext} from './context.svelte.js';
+
+  let {children, ...props}: NumberInputControlTriggerProps = $props();
+
+  let context = useNumberInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getControlProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -1,12 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useNumberInputContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useNumberInputContext();
-let attrs = $derived(mergeProps(props, context.getDecrementTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface NumberInputDecrementTriggerProps
+    extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useNumberInputContext} from './context.svelte.js';
+
+  let {children, ...props}: NumberInputDecrementTriggerProps = $props();
+
+  let context = useNumberInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getDecrementTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -1,12 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useNumberInputContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useNumberInputContext();
-let attrs = $derived(mergeProps(props, context.getIncrementTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface NumberInputIncrementTriggerProps
+    extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useNumberInputContext} from './context.svelte.js';
+
+  let {children, ...props}: NumberInputIncrementTriggerProps = $props();
+
+  let context = useNumberInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getIncrementTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/number-input/input.svelte

@@ -1,10 +1,19 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useNumberInputContext } from "./context.svelte.js";
-let { ...props } = $props();
-let context = useNumberInputContext();
-let attrs = $derived(mergeProps(props, context.getInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface NumberInputInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useNumberInputContext} from './context.svelte.js';
+
+  let {...props}: NumberInputInputProps = $props();
+
+  let context = useNumberInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getInputProps()));
+</script>
+
+<input {...attrs} />

package/dist/number-input/label.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useNumberInputContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useNumberInputContext();
-let attrs = $derived(mergeProps(props, context.getLabelProps()));
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface NumberInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useNumberInputContext} from './context.svelte.js';
+
+  let {children, ...props}: NumberInputLabelProps = $props();
+
+  let context = useNumberInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/number-input/root.svelte

@@ -1,72 +1,93 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createNumberInputContext, setNumberInputContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  max,
-  min,
-  step,
-  name,
-  form,
-  value,
-  locale,
-  pattern,
-  invalid,
-  disabled,
-  readOnly,
-  required,
-  inputMode,
-  spinOnPress,
-  translations,
-  formatOptions,
-  allowOverflow,
-  allowMouseWheel,
-  clampValueOnBlur,
-  focusInputOnChange,
-  onFocusChange,
-  onValueChange,
-  onValueInvalid,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createNumberInputContext({
-  id,
-  ids,
-  dir,
-  max,
-  min,
-  step,
-  name,
-  form,
-  value: $state.snapshot(value),
-  locale,
-  pattern,
-  invalid,
-  disabled,
-  readOnly,
-  required,
-  inputMode,
-  spinOnPress,
-  translations,
-  formatOptions,
-  allowOverflow,
-  allowMouseWheel,
-  clampValueOnBlur,
-  focusInputOnChange,
-  onFocusChange,
-  onValueChange,
-  onValueInvalid,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setNumberInputContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} 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]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createNumberInputContext, setNumberInputContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    max,
+    min,
+    step,
+    name,
+    form,
+    value,
+    locale,
+    pattern,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    inputMode,
+    spinOnPress,
+    translations,
+    formatOptions,
+    allowOverflow,
+    allowMouseWheel,
+    clampValueOnBlur,
+    focusInputOnChange,
+    onFocusChange,
+    onValueChange,
+    onValueInvalid,
+    getRootNode,
+    children,
+    ...props
+  }: NumberInputProps = $props();
+
+  let context = createNumberInputContext({
+    id,
+    ids,
+    dir,
+    max,
+    min,
+    step,
+    name,
+    form,
+    value: $state.snapshot(value),
+    locale,
+    pattern,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    inputMode,
+    spinOnPress,
+    translations,
+    formatOptions,
+    allowOverflow,
+    allowMouseWheel,
+    clampValueOnBlur,
+    focusInputOnChange,
+    onFocusChange,
+    onValueChange,
+    onValueInvalid,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setNumberInputContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>