ui-ingredients 0.0.52 → 0.0.54

package/dist/select/select-label.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
+}
+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 SelectLabel: $$__sveltets_2_IsomorphicComponent<SelectLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SelectLabel = InstanceType<typeof SelectLabel>;
+export default SelectLabel;

package/dist/select/select-list.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SelectListProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSelectContext} from './select-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SelectListProps = $props();
+
+  let select = getSelectContext();
+
+  let mergedProps = $derived(mergeProps(props, select.getListProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/select-list.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectListProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 SelectList: $$__sveltets_2_IsomorphicComponent<SelectListProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SelectList = InstanceType<typeof SelectList>;
+export default SelectList;

package/dist/select/select-positioner.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SelectPositionerProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/presence-context.svelte.js';
+  import {getSelectContext} from './select-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SelectPositionerProps = $props();
+
+  let select = getSelectContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, select.getPositionerProps(), presence.getPresenceProps()),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div bind:this={e} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/select/select-positioner.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectPositionerProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 SelectPositioner: $$__sveltets_2_IsomorphicComponent<SelectPositionerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SelectPositioner = InstanceType<typeof SelectPositioner>;
+export default SelectPositioner;

package/dist/select/select-root.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateSelectProps,
+    CreateSelectReturn,
+  } from './create-select.svelte.js';
+
+  export interface SelectProps<T>
+    extends Assign<
+        HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>,
+        CreateSelectProps<T>
+      >,
+      PresenceStrategyProps {}
+</script>
+
+<script lang="ts" generics="T">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {setPresenceContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {createSelect} from './create-select.svelte.js';
+  import {setSelectContext} from './select-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SelectProps<T> = $props();
+
+  let [createSelectProps, rest] = $derived(
+    createSplitProps<CreateSelectProps<T>>([
+      'id',
+      'ids',
+      'form',
+      'name',
+      'open',
+      'defaultOpen',
+      'value',
+      'items',
+      'invalid',
+      'multiple',
+      'disabled',
+      'readOnly',
+      'required',
+      'loopFocus',
+      'composite',
+      'positioning',
+      'closeOnSelect',
+      'highlightedValue',
+      'itemToValue',
+      'itemToString',
+      'isItemDisabled',
+      'onOpenChange',
+      'onValueChange',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onPointerDownOutside',
+      'scrollToIndexFn',
+    ])(props),
+  );
+
+  let [presenceStrategyProps, localProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
+  );
+
+  let select = createSelect(reflect(() => createSelectProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: select.open,
+    })),
+  );
+
+  let mergedProps = $derived(mergeProps(localProps, select.getRootProps()));
+
+  setSelectContext(select);
+  setPresenceContext(presence);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, select)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(select)}
+  </div>
+{/if}

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

@@ -0,0 +1,26 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSelectProps, CreateSelectReturn } from './create-select.svelte.js';
+export interface SelectProps<T> extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>, CreateSelectProps<T>>, PresenceStrategyProps {
+}
+declare class __sveltets_Render<T> {
+    props(): SelectProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<T>['events']>;
+    }): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SelectRoot: $$IsomorphicComponent;
+type SelectRoot<T> = InstanceType<typeof SelectRoot<T>>;
+export default SelectRoot;

package/dist/select/select-trigger.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SelectTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSelectContext} from './select-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SelectTriggerProps = $props();
+
+  let select = getSelectContext();
+
+  let mergedProps = $derived(mergeProps(props, select.getTriggerProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={e} type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/select/select-trigger.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
+}
+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 SelectTrigger: $$__sveltets_2_IsomorphicComponent<SelectTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SelectTrigger = InstanceType<typeof SelectTrigger>;
+export default SelectTrigger;

package/dist/select/select-value-text.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SelectValueTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSelectContext} from './select-context.svelte.js';
+
+  let {
+    this: e,
+    asChild,
+    children,
+    placeholder,
+    ...props
+  }: SelectValueTextProps = $props();
+
+  let select = getSelectContext();
+
+  let mergedProps = $derived(mergeProps(props, select.getValueTextProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={e} {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else if select.value.length}
+      {select.valueAsString}
+    {:else}
+      {placeholder}
+    {/if}
+  </span>
+{/if}

package/dist/select/select-value-text.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SelectValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+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 SelectValueText: $$__sveltets_2_IsomorphicComponent<SelectValueTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SelectValueText = InstanceType<typeof SelectValueText>;
+export default SelectValueText;

package/dist/select/select.d.ts

@@ -1,16 +1,16 @@
-export { default as ClearTrigger } from './clear-trigger.svelte';
-export { default as Content } from './content.svelte';
-export { default as Control } from './control.svelte';
-export { default as HiddenSelect } from './hidden-select.svelte';
-export { default as Indicator } from './indicator.svelte';
-export { default as ItemGroupLabel } from './item-group-label.svelte';
-export { default as ItemGroup } from './item-group.svelte';
-export { default as ItemIndicator } from './item-indicator.svelte';
-export { default as ItemText } from './item-text.svelte';
-export { default as Item } from './item.svelte';
-export { default as Label } from './label.svelte';
-export { default as List } from './list.svelte';
-export { default as Positioner } from './positioner.svelte';
-export { default as Root } from './root.svelte';
-export { default as Trigger } from './trigger.svelte';
-export { default as ValueText } from './value-text.svelte';
+export { default as ClearTrigger } from './select-clear-trigger.svelte';
+export { default as Content } from './select-content.svelte';
+export { default as Control } from './select-control.svelte';
+export { default as HiddenSelect } from './select-hidden-select.svelte';
+export { default as Indicator } from './select-indicator.svelte';
+export { default as ItemGroupLabel } from './select-item-group-label.svelte';
+export { default as ItemGroup } from './select-item-group.svelte';
+export { default as ItemIndicator } from './select-item-indicator.svelte';
+export { default as ItemText } from './select-item-text.svelte';
+export { default as Item } from './select-item.svelte';
+export { default as Label } from './select-label.svelte';
+export { default as List } from './select-list.svelte';
+export { default as Positioner } from './select-positioner.svelte';
+export { default as Root } from './select-root.svelte';
+export { default as Trigger } from './select-trigger.svelte';
+export { default as ValueText } from './select-value-text.svelte';

package/dist/select/select.js

@@ -1,16 +1,16 @@
-export { default as ClearTrigger } from './clear-trigger.svelte';
-export { default as Content } from './content.svelte';
-export { default as Control } from './control.svelte';
-export { default as HiddenSelect } from './hidden-select.svelte';
-export { default as Indicator } from './indicator.svelte';
-export { default as ItemGroupLabel } from './item-group-label.svelte';
-export { default as ItemGroup } from './item-group.svelte';
-export { default as ItemIndicator } from './item-indicator.svelte';
-export { default as ItemText } from './item-text.svelte';
-export { default as Item } from './item.svelte';
-export { default as Label } from './label.svelte';
-export { default as List } from './list.svelte';
-export { default as Positioner } from './positioner.svelte';
-export { default as Root } from './root.svelte';
-export { default as Trigger } from './trigger.svelte';
-export { default as ValueText } from './value-text.svelte';
+export { default as ClearTrigger } from './select-clear-trigger.svelte';
+export { default as Content } from './select-content.svelte';
+export { default as Control } from './select-control.svelte';
+export { default as HiddenSelect } from './select-hidden-select.svelte';
+export { default as Indicator } from './select-indicator.svelte';
+export { default as ItemGroupLabel } from './select-item-group-label.svelte';
+export { default as ItemGroup } from './select-item-group.svelte';
+export { default as ItemIndicator } from './select-item-indicator.svelte';
+export { default as ItemText } from './select-item-text.svelte';
+export { default as Item } from './select-item.svelte';
+export { default as Label } from './select-label.svelte';
+export { default as List } from './select-list.svelte';
+export { default as Positioner } from './select-positioner.svelte';
+export { default as Root } from './select-root.svelte';
+export { default as Trigger } from './select-trigger.svelte';
+export { default as ValueText } from './select-value-text.svelte';

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

@@ -1,5 +1,5 @@
-import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
-import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
 import * as signaturePad from '@zag-js/signature-pad';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';

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

@@ -1,12 +1,12 @@
 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';
+export type { SignaturePadClearTriggerProps } from './signature-pad-clear-trigger.svelte';
+export type { SignaturePadControlProps } from './signature-pad-control.svelte';
+export type { SignaturePadCurrentSegmentPathProps } from './signature-pad-current-segment-path.svelte';
+export type { SignaturePadGuideProps } from './signature-pad-guide.svelte';
+export type { SignaturePadHiddenInputProps } from './signature-pad-hidden-input.svelte';
+export type { SignaturePadLabelProps } from './signature-pad-label.svelte';
+export type { SignaturePadProps } from './signature-pad-root.svelte';
+export type { SignaturePadSegmentPathProps } from './signature-pad-segment-path.svelte';
+export type { SignaturePadSegmentProps } from './signature-pad-segment.svelte';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
-export { getSignaturePadContext } from './context.svelte.js';
+export { getSignaturePadContext } from './signature-pad-context.svelte.js';

package/dist/signature-pad/index.js

@@ -1,3 +1,3 @@
 export * as SignaturePad from './signature-pad.js';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
-export { getSignaturePadContext } from './context.svelte.js';
+export { getSignaturePadContext } from './signature-pad-context.svelte.js';

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

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SignaturePadClearTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSignaturePadContext} from './signature-pad-context.svelte.js';
+
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadClearTriggerProps = $props();
+
+  let signaturePad = getSignaturePadContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, signaturePad.getClearTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={e} type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadClearTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
+}
+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 SignaturePadClearTrigger: $$__sveltets_2_IsomorphicComponent<SignaturePadClearTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SignaturePadClearTrigger = InstanceType<typeof SignaturePadClearTrigger>;
+export default SignaturePadClearTrigger;

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

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SignaturePadControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSignaturePadContext} from './signature-pad-context.svelte.js';
+
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadControlProps = $props();
+
+  let signaturePad = getSignaturePadContext();
+
+  let mergedProps = $derived(mergeProps(props, signaturePad.getControlProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 SignaturePadControl: $$__sveltets_2_IsomorphicComponent<SignaturePadControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SignaturePadControl = InstanceType<typeof SignaturePadControl>;
+export default SignaturePadControl;

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

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SignaturePadCurrentSegmentPathProps
+    extends HtmlIngredientProps<'path', SVGPathElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSignaturePadContext} from './signature-pad-context.svelte.js';
+
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadCurrentSegmentPathProps = $props();
+
+  let signaturePad = getSignaturePadContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      signaturePad.getSegmentPathProps({
+        path: signaturePad.currentPath ?? '',
+      }),
+    ),
+  );
+</script>
+
+{#if signaturePad.currentPath}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <path bind:this={e} {...mergedProps}>
+      {@render children?.()}
+    </path>
+  {/if}
+{/if}

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

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SignaturePadCurrentSegmentPathProps extends HtmlIngredientProps<'path', SVGPathElement> {
+}
+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 SignaturePadCurrentSegmentPath: $$__sveltets_2_IsomorphicComponent<SignaturePadCurrentSegmentPathProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SignaturePadCurrentSegmentPath = InstanceType<typeof SignaturePadCurrentSegmentPath>;
+export default SignaturePadCurrentSegmentPath;

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

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SignaturePadGuideProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSignaturePadContext} from './signature-pad-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SignaturePadGuideProps = $props();
+
+  let signaturePad = getSignaturePadContext();
+
+  let mergedProps = $derived(mergeProps(props, signaturePad.getGuideProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}