ui-ingredients 0.0.22 → 0.0.23

package/README.md

@@ -62,7 +62,7 @@ npm install ui-ingredients
 - 🟢 RatingGroup
 - 🟢 Select
 - 🟢 SegmentGroup
-- ⚪ SignaturePad
+- 🟢 SignaturePad
 - 🟢 Slider
 - ⚪ Splitter
 - 🟢 Steps

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './radio-group/index.js';
 export * from './rating-group/index.js';
 export * from './segment-group/index.js';
 export * from './select/index.js';
+export * from './signature-pad/index.js';
 export * from './slider/index.js';
 export * from './steps/index.js';
 export * from './switch/index.js';

package/dist/index.js

@@ -25,6 +25,7 @@ export * from './radio-group/index.js';
 export * from './rating-group/index.js';
 export * from './segment-group/index.js';
 export * from './select/index.js';
+export * from './signature-pad/index.js';
 export * from './slider/index.js';
 export * from './steps/index.js';
 export * from './switch/index.js';

package/dist/signature-pad/clear-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface SignaturePadClearTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {children,...props}: SignaturePadClearTriggerProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getClearTriggerProps()));
+</script>
+
+<button type="button" {...attrs} >
+  {@render children?.()}
+</button>

package/dist/signature-pad/clear-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+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 ClearTrigger: $$__sveltets_2_IsomorphicComponent<SignaturePadClearTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ClearTrigger = InstanceType<typeof ClearTrigger>;
+export default ClearTrigger;

package/dist/signature-pad/context.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Context } from '../utils.svelte.js';
+import type { CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
+export declare const signaturePadContext: Context<CreateSignaturePadReturn>;

package/dist/signature-pad/context.svelte.js

@@ -0,0 +1,2 @@
+import { Context } from '../utils.svelte.js';
+export const signaturePadContext = new Context('SignaturePad');

package/dist/signature-pad/control.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface SignaturePadControlProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {children, ...props}: SignaturePadControlProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getControlProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/signature-pad/control.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Control: $$__sveltets_2_IsomorphicComponent<SignaturePadControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Control = InstanceType<typeof Control>;
+export default Control;

package/dist/signature-pad/create-signature-pad.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as signaturePad from '@zag-js/signature-pad';
+export interface CreateSignaturePadProps extends Omit<signaturePad.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateSignaturePadReturn extends signaturePad.Api {
+}
+export declare function createSignaturePad(props: CreateSignaturePadProps): CreateSignaturePadReturn;

package/dist/signature-pad/create-signature-pad.svelte.js

@@ -0,0 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as signaturePad from '@zag-js/signature-pad';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createSignaturePad(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const [state, send] = useMachine(signaturePad.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+    }));
+    const api = $derived(reflect(() => signaturePad.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/signature-pad/current-segment-path.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface SignaturePadCurrentSegmentPathProps extends HtmlProps<'path'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {path, children, ...props}: SignaturePadCurrentSegmentPathProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      signaturePad.getSegmentPathProps({
+        path: signaturePad.currentPath ?? '',
+      }),
+    ),
+  );
+</script>
+
+{#if signaturePad.currentPath}
+  <path {...attrs}>
+    {@render children?.()}
+  </path>
+{/if}

package/dist/signature-pad/current-segment-path.svelte.d.ts

@@ -0,0 +1,18 @@
+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 CurrentSegmentPath: $$__sveltets_2_IsomorphicComponent<SignaturePadCurrentSegmentPathProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type CurrentSegmentPath = InstanceType<typeof CurrentSegmentPath>;
+export default CurrentSegmentPath;

package/dist/signature-pad/guide.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface SignaturePadGuideProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {children,...props}: SignaturePadGuideProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getGuideProps()));
+</script>
+
+<div  {...attrs} >
+  {@render children?.()}
+</div>

package/dist/signature-pad/guide.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Guide: $$__sveltets_2_IsomorphicComponent<SignaturePadGuideProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Guide = InstanceType<typeof Guide>;
+export default Guide;

package/dist/signature-pad/hidden-input.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {HiddenInputProps} from '@zag-js/signature-pad';
+
+  export interface SignaturePadHiddenInputProps
+    extends Assign<HtmlProps<'input'>, HiddenInputProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {value, ...props}: SignaturePadHiddenInputProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getHiddenInputProps({value})));
+</script>
+
+<input {...attrs} />

package/dist/signature-pad/hidden-input.svelte.d.ts

@@ -0,0 +1,18 @@
+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 HiddenInput: $$__sveltets_2_IsomorphicComponent<SignaturePadHiddenInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type HiddenInput = InstanceType<typeof HiddenInput>;
+export default HiddenInput;

package/dist/signature-pad/index.d.ts

@@ -0,0 +1,10 @@
+export * as SignaturePad from './signature-pad.js';
+export type { SignaturePadClearTriggerProps } from './clear-trigger.svelte';
+export type { SignaturePadControlProps } from './control.svelte';
+export type { SignaturePadCurrentSegmentPathProps } from './current-segment-path.svelte';
+export type { SignaturePadGuideProps } from './guide.svelte';
+export type { SignaturePadHiddenInputProps } from './hidden-input.svelte';
+export type { SignaturePadLabelProps } from './label.svelte';
+export type { SignaturePadProps } from './root.svelte';
+export type { SignaturePadSegmentPathProps } from './segment-path.svelte';
+export type { SignaturePadSegmentProps } from './segment.svelte';

package/dist/signature-pad/index.js

@@ -0,0 +1 @@
+export * as SignaturePad from './signature-pad.js';

package/dist/signature-pad/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface SignaturePadLabelProps extends HtmlProps<'label'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {children, ...props}: SignaturePadLabelProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/signature-pad/label.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Label: $$__sveltets_2_IsomorphicComponent<SignaturePadLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Label = InstanceType<typeof Label>;
+export default Label;

package/dist/signature-pad/root.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateSignaturePadProps,
+    CreateSignaturePadReturn,
+  } from './create-signature-pad.svelte.js';
+
+  export interface SignaturePadProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSignaturePadProps> {
+    children?: Snippet<[signaturePad: CreateSignaturePadReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+  import {createSignaturePad} from './create-signature-pad.svelte.js';
+
+  let {
+    id,
+    ids,
+    name,
+    drawing,
+    required,
+    disabled,
+    readOnly,
+    translations,
+    onDraw,
+    onDrawEnd,
+    children,
+    ...props
+  }: SignaturePadProps = $props();
+
+  let signaturePad = createSignaturePad({
+    id,
+    ids,
+    name,
+    drawing,
+    required,
+    disabled,
+    readOnly,
+    translations,
+    onDraw,
+    onDrawEnd,
+  });
+
+  let attrs = $derived(mergeProps(props, signaturePad.getRootProps()));
+
+  signaturePadContext.set(signaturePad);
+</script>
+
+<div {...attrs}>
+  {@render children?.(signaturePad)}
+</div>

package/dist/signature-pad/root.svelte.d.ts

@@ -0,0 +1,18 @@
+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<SignaturePadProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/signature-pad/segment-path.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {SegmentPathProps} from '@zag-js/signature-pad';
+
+  export interface SignaturePadSegmentPathProps
+    extends Assign<HtmlProps<'path'>, SegmentPathProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {path, children, ...props}: SignaturePadSegmentPathProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getSegmentPathProps({path})));
+</script>
+
+<path {...attrs}>
+  {@render children?.()}
+</path>

package/dist/signature-pad/segment-path.svelte.d.ts

@@ -0,0 +1,18 @@
+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 SegmentPath: $$__sveltets_2_IsomorphicComponent<SignaturePadSegmentPathProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SegmentPath = InstanceType<typeof SegmentPath>;
+export default SegmentPath;

package/dist/signature-pad/segment.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface SignaturePadSegmentProps extends HtmlProps<'svg'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {children, ...props}: SignaturePadSegmentProps = $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let attrs = $derived(mergeProps(props, signaturePad.getSegmentProps()));
+</script>
+
+<svg {...attrs}>
+  {@render children?.()}
+</svg>

package/dist/signature-pad/segment.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Segment: $$__sveltets_2_IsomorphicComponent<SignaturePadSegmentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Segment = InstanceType<typeof Segment>;
+export default Segment;

package/dist/signature-pad/signature-pad.d.ts

@@ -0,0 +1,10 @@
+export { anatomy } from '@zag-js/signature-pad';
+export { default as ClearTrigger } from './clear-trigger.svelte';
+export { default as Control } from './control.svelte';
+export { default as CurrentSegmentPath } from './current-segment-path.svelte';
+export { default as Guide } from './guide.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as SegmentPath } from './segment-path.svelte';
+export { default as Segment } from './segment.svelte';

package/dist/signature-pad/signature-pad.js

@@ -0,0 +1,10 @@
+export { anatomy } from '@zag-js/signature-pad';
+export { default as ClearTrigger } from './clear-trigger.svelte';
+export { default as Control } from './control.svelte';
+export { default as CurrentSegmentPath } from './current-segment-path.svelte';
+export { default as Guide } from './guide.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as SegmentPath } from './segment-path.svelte';
+export { default as Segment } from './segment.svelte';

package/dist/steps/completed-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface StepsCompletedContentProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {stepsContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsCompletedContentProps = $props();
+
+  let steps = stepsContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      steps.getContentProps({
+        index: steps.count,
+      }),
+    ),
+  );
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/completed-content.svelte.d.ts

@@ -0,0 +1,18 @@
+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 CompletedContent: $$__sveltets_2_IsomorphicComponent<StepsCompletedContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type CompletedContent = InstanceType<typeof CompletedContent>;
+export default CompletedContent;

package/dist/steps/index.d.ts

@@ -1,4 +1,5 @@
 export * as Steps from './steps.js';
+export type { StepsCompletedContentProps } from './completed-content.svelte';
 export type { StepsContentProps } from './content.svelte';
 export type { StepsIndicatorProps } from './indicator.svelte';
 export type { StepsItemProps } from './item.svelte';

package/dist/steps/steps.d.ts

@@ -1,4 +1,5 @@
 export { anatomy } from '@zag-js/steps';
+export { default as CompletedContent } from './completed-content.svelte';
 export { default as Content } from './content.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Item } from './item.svelte';

package/dist/steps/steps.js

@@ -1,4 +1,5 @@
 export { anatomy } from '@zag-js/steps';
+export { default as CompletedContent } from './completed-content.svelte';
 export { default as Content } from './content.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Item } from './item.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -85,7 +85,6 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@internationalized/date": "3.5.5",
     "@zag-js/accordion": "0.65.1",
     "@zag-js/anatomy": "0.65.1",
     "@zag-js/avatar": "0.65.1",