ui-ingredients 0.0.6 → 0.0.8

package/dist/progress/value-text.svelte

@@ -1,16 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useProgressContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useProgressContext();
-let attrs = $derived(mergeProps(props, context.getValueTextProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {context.percentAsString}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface ProgressValueTextProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useProgressContext} from './context.svelte.js';
+
+  let {children, ...props}: ProgressValueTextProps = $props();
+
+  let context = useProgressContext();
+
+  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {context.percentAsString}
+  {/if}
+</div>

package/dist/qr-code/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import * as qrCode from '@zag-js/qr-code';
+export interface CreateQRCodeContextProps extends qrCode.Context {
+}
+export interface CreateQRCodeContextReturn extends ReturnType<typeof createQRCodeContext> {
+}
+export declare function createQRCodeContext(props: CreateQRCodeContextProps): any;
+export declare function setQRCodeContext(value: CreateQRCodeContextReturn): void;
+export declare function useQRCodeContext(): CreateQRCodeContextReturn;

package/dist/qr-code/context.svelte.js

@@ -0,0 +1,14 @@
+import * as qrCode from '@zag-js/qr-code';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createQRCodeContext(props) {
+    const [state, send] = useMachine(qrCode.machine(props));
+    const api = $derived(reflect(() => qrCode.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setQRCodeContext(value) {
+    setContext('QRCode', value);
+}
+export function useQRCodeContext() {
+    return getContext('QRCode');
+}

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/frame.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface QRCodeFrameProps extends Assign<SvelteHTMLElements['svg'], {}> {
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Frame: $$__sveltets_2_IsomorphicComponent<QRCodeFrameProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Frame = InstanceType<typeof Frame>;
+export default Frame;

package/dist/qr-code/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Frame, type QRCodeFrameProps } from './frame.svelte';
+export { default as Overlay, type QRCodeOverlayProps } from './overlay.svelte';
+export { default as Pattern, type QRCodePatternProps } from './pattern.svelte';
+export { default as Root, type QRCodeProps } from './root.svelte';

package/dist/qr-code/index.js

@@ -0,0 +1,4 @@
+export { default as Frame } from './frame.svelte';
+export { default as Overlay } from './overlay.svelte';
+export { default as Pattern } from './pattern.svelte';
+export { default as Root } from './root.svelte';

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/overlay.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface QRCodeOverlayProps extends Assign<SvelteHTMLElements['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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Overlay: $$__sveltets_2_IsomorphicComponent<QRCodeOverlayProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Overlay = InstanceType<typeof Overlay>;
+export default Overlay;

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/pattern.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface QRCodePatternProps extends Assign<SvelteHTMLElements['path'], {}> {
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pattern: $$__sveltets_2_IsomorphicComponent<QRCodePatternProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Pattern = InstanceType<typeof Pattern>;
+export default Pattern;

package/dist/qr-code/root.svelte

@@ -0,0 +1,48 @@
+<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 {CreateQRCodeContextProps, CreateQRCodeContextReturn} from './context.svelte.js';
+
+  export interface QRCodeProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateQRCodeContextProps>
+    > {
+    children?: Snippet<[CreateQRCodeContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createQRCodeContext, setQRCodeContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    value,
+    encoding,
+    getRootNode,
+    children,
+    ...props
+  }: QRCodeProps = $props();
+
+  let context = createQRCodeContext({
+    id,
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    encoding,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setQRCodeContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/qr-code/root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { CreateQRCodeContextProps, CreateQRCodeContextReturn } from './context.svelte.js';
+export interface QRCodeProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateQRCodeContextProps>> {
+    children?: Snippet<[CreateQRCodeContextReturn]>;
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<QRCodeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/radio-group/indicator.svelte

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

package/dist/radio-group/item-control.svelte

@@ -1,13 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useRadioGroupContext, useRadioGroupItemContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useRadioGroupContext();
-let itemContext = useRadioGroupItemContext();
-let attrs = $derived(mergeProps(props, context.getItemControlProps(itemContext)));
-</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 RadioGroupItemControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRadioGroupContext, useRadioGroupItemContext} from './context.svelte.js';
+
+  let {children, ...props}: RadioGroupItemControlProps = $props();
+
+  let context = useRadioGroupContext();
+  let itemContext = useRadioGroupItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemControlProps(itemContext)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/radio-group/item-hidden-input.svelte

@@ -1,11 +1,20 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useRadioGroupContext, useRadioGroupItemContext } from "./context.svelte.js";
-let { ...props } = $props();
-let context = useRadioGroupContext();
-let itemContext = useRadioGroupItemContext();
-let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemContext)));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface RadioGroupItemHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRadioGroupContext, useRadioGroupItemContext} from './context.svelte.js';
+
+  let {...props}: RadioGroupItemHiddenInputProps = $props();
+
+  let context = useRadioGroupContext();
+  let itemContext = useRadioGroupItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemContext)));
+</script>
+
+<input {...attrs} />

package/dist/radio-group/item-text.svelte

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

package/dist/radio-group/item.svelte

@@ -1,26 +1,37 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { setRadioGroupItemContext, useRadioGroupContext } from "./context.svelte.js";
-let { value, invalid, disabled, children, ...props } = $props();
-let context = useRadioGroupContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getItemProps({
-      value,
-      invalid,
-      disabled
-    })
-  )
-);
-setRadioGroupItemContext({
-  value,
-  invalid,
-  disabled
-});
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ItemProps} from '@zag-js/radio-group';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface RadioGroupItemProps extends Assign<SvelteHTMLElements['label'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setRadioGroupItemContext, useRadioGroupContext} from './context.svelte.js';
+
+  let {value, invalid, disabled, children, ...props}: RadioGroupItemProps = $props();
+
+  let context = useRadioGroupContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        value,
+        invalid,
+        disabled,
+      }),
+    ),
+  );
+
+  setRadioGroupItemContext({
+    value,
+    invalid,
+    disabled,
+  });
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/radio-group/label.svelte

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

package/dist/radio-group/root.svelte

@@ -1,40 +1,61 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createRadioGroupContext, setRadioGroupContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  form,
-  name,
-  value,
-  disabled,
-  readOnly,
-  orientation,
-  onValueChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createRadioGroupContext({
-  id,
-  ids,
-  dir,
-  form,
-  name,
-  value: $state.snapshot(value),
-  disabled,
-  readOnly,
-  orientation,
-  onValueChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setRadioGroupContext(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 {
+    CreateRadioGroupContextProps,
+    CreateRadioGroupContextReturn,
+  } from './context.svelte.js';
+
+  export interface RadioGroupProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateRadioGroupContextProps>
+    > {
+    children?: Snippet<[CreateRadioGroupContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createRadioGroupContext, setRadioGroupContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    form,
+    name,
+    value,
+    disabled,
+    readOnly,
+    orientation,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: RadioGroupProps = $props();
+
+  let context = createRadioGroupContext({
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    value: $state.snapshot(value),
+    disabled,
+    readOnly,
+    orientation,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setRadioGroupContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>