@uibit/signature 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Signature Pad
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/signature-pad)
+
+Signature Pad is a signature capture component that allows users to write signatures on digital forms. By providing smooth, high-fidelity stroke tracking for mouse, touch, and stylus inputs, it streamlines document workflows and digital authorization processes.
+
+## Value Delivery
+
+- **Seamless Digitization** – Replaces printing, physical signing, and scanning cycles with a direct, digital signing flow.
+- **Natural Writing Mechanics** – Tracks pressure and speed variations to render realistic strokes, improving user comfort.
+- **Export Formats** – Exports signatures directly as standard images, making it easy to archive signatures in back-office document storage.
+- **High Responsiveness** – Adapts signing inputs smoothly across both desktop mouse control and mobile touchscreen gestures.
+
+## Ideal Applications
+
+- **Service Agreements** – Capturing sign-offs on terms, service contracts, and proposals.
+- **Onboarding Verification** – Capturing signatures for member registration or employee enrollment.
+- **Transactional Approvals** – Securing approvals on delivery notes or invoices.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,417 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Signature",
+          "declaration": {
+            "name": "Signature",
+            "module": "./signature.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/signature.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Canvas area for capturing freehand signatures or drawings using touch or\nmouse gestures, rendered immediately as smooth bezier-curved vector lines\nwith simulated pen pressure.",
+          "name": "Signature",
+          "cssProperties": [
+            {
+              "description": "Width of the signature area",
+              "name": "--uibit-signature-width",
+              "default": "100%"
+            },
+            {
+              "description": "Height of the signature area",
+              "name": "--uibit-signature-height",
+              "default": "11.25rem"
+            },
+            {
+              "description": "Canvas background color",
+              "name": "--uibit-signature-background",
+              "default": "#ffffff"
+            },
+            {
+              "description": "Border around the canvas",
+              "name": "--uibit-signature-border",
+              "default": "0.0625rem solid #e5e7eb"
+            },
+            {
+              "description": "Border radius",
+              "name": "--uibit-signature-border-radius",
+              "default": "0.5rem"
+            },
+            {
+              "description": "Ink/stroke color",
+              "name": "--uibit-signature-stroke-color",
+              "default": "#111111"
+            },
+            {
+              "description": "Base stroke width (varies with velocity)",
+              "name": "--uibit-signature-stroke-width",
+              "default": "0.15625rem"
+            },
+            {
+              "description": "Color of the sign-here hint text",
+              "name": "--uibit-signature-hint-color",
+              "default": "rgba(0,0,0,0.22)"
+            },
+            {
+              "description": "Font size of the hint text",
+              "name": "--uibit-signature-hint-font-size",
+              "default": "0.8125rem"
+            },
+            {
+              "description": "Cursor style over the canvas",
+              "name": "--uibit-signature-cursor",
+              "default": "crosshair"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The outermost wrapper element",
+              "name": "container"
+            },
+            {
+              "description": "The drawing canvas element",
+              "name": "canvas"
+            },
+            {
+              "description": "The \"Sign here\" placeholder hint",
+              "name": "hint"
+            },
+            {
+              "description": "The clear button",
+              "name": "clear-button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Placeholder text shown when the pad is empty. Defaults to \"Sign here\".",
+              "name": "hint"
+            },
+            {
+              "description": "Label text inside the clear button. Defaults to \"Clear\".",
+              "name": "clear-label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hideClear",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to hide the clear button.",
+              "attribute": "hide-clear"
+            },
+            {
+              "kind": "field",
+              "name": "isEmpty",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "canvas",
+              "type": {
+                "text": "HTMLCanvasElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "ctx",
+              "type": {
+                "text": "CanvasRenderingContext2D"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "strokes",
+              "type": {
+                "text": "SignatureStroke[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "currentStroke",
+              "type": {
+                "text": "SignaturePoint[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "isPointerDown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "lastVelocity",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "method",
+              "name": "resizeCanvas",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "attachListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getPoint",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SignaturePoint"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onPointerDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onPointerMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onPointerUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "strokeWidth",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "strokeColor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "drawStrokeSegment",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "points",
+                  "type": {
+                    "text": "SignaturePoint[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "redrawStrokes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "restoreFromDataUrl",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dataUrl",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toDataURL",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "default": "'image/png'"
+                }
+              ],
+              "description": "Returns the signature as a PNG data URL, or an empty string if the pad is empty."
+            },
+            {
+              "kind": "method",
+              "name": "toSVG",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Returns the signature as an inline SVG string built from the recorded strokes."
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "description": "Clears all strokes from the pad."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ isEmpty: boolean; dataUrl: string }"
+              },
+              "description": "Fired after each stroke ends",
+              "name": "signature-change"
+            },
+            {
+              "type": {
+                "text": "{ previouslyEmpty: boolean }"
+              },
+              "description": "Fired when the canvas is cleared",
+              "name": "signature-clear"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "hide-clear",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to hide the clear button.",
+              "fieldName": "hideClear"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociatedMixin",
+              "package": "@uibit/form-internals"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-signature",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Signature",
+          "declaration": {
+            "name": "Signature",
+            "module": "src/signature.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-signature",
+          "declaration": {
+            "name": "Signature",
+            "module": "src/signature.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Signature",
+            "module": "src/signature.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,66 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+import '@uibit/signature';
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+
+@Component({
+  selector: 'uibit-signature',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => NgxSignature),
+      multi: true
+    }
+  ],
+  host: {
+    '(signature-change)': 'signatureChange.emit($event); handleInput()',
+    '(signature-clear)': 'signatureClear.emit($event); handleInput()',
+    '(blur)': 'handleBlur()',
+    '(change)': 'handleInput()',
+    '(input)': 'handleInput()'
+  }
+})
+export class NgxSignature implements ControlValueAccessor {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.hideClear = this.hideClear();
+      }
+    });
+  }
+
+  readonly hideClear = input<boolean, any>(false, { transform: booleanAttribute });
+
+  readonly signatureChange = output<CustomEvent<{ isEmpty: boolean; dataUrl: string }>>();
+  readonly signatureClear = output<CustomEvent<{ previouslyEmpty: boolean }>>();
+
+  private _onChange: (value: any) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  writeValue(value: any): void {
+    this.el.nativeElement.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+
+  handleInput() {
+    this._onChange(this.el.nativeElement.value);
+  }
+
+  handleBlur() {
+    this._onTouched();
+  }
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+import '@uibit/signature';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-signature': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/signature');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'preact';
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+import '@uibit/signature';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-signature': JSX.HTMLAttributes<HTMLElementClass> & {
+      hideClear?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/signature';
+
+export const Signature = component$<any>((props) => {
+  return (
+    <uibit-signature {...props}>
+      <Slot />
+    </uibit-signature>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+import '@uibit/signature';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-signature': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      hideClear?: boolean;
+      onSignatureChange?: (event: any) => void;
+      onSignatureClear?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js';
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+import '@uibit/signature';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-signature': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              hideClear?: boolean;
+      "on:signature-change"?: (event: CustomEvent) => void;
+      "on:signature-clear"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,12 @@
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+import '@uibit/signature';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-signature': HTMLElementClass & {
+    hideClear?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import '@uibit/signature';
+  import type { Signature as HTMLElementClass } from '@uibit/signature';
+  
+  let {
+    hideClear = undefined,
+      hint = undefined,
+      clear-label = undefined,
+      children
+  } = $props<{
+    children?: any;
+    hideClear?: boolean;
+    hint?: import('svelte').Snippet;
+    clear-label?: import('svelte').Snippet;
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && hideClear !== undefined) {
+      elementRef.hideClear = hideClear;
+    }
+  });
+  
+</script>
+
+<uibit-signature bind:this={elementRef} {...$$restProps}>
+  {#if hint}
+    <div slot="hint">
+      {@render hint()}
+    </div>
+  {/if}
+  {#if clear-label}
+    <div slot="clear-label">
+      {@render clear-label()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-signature>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+import type { Signature as HTMLElementClass } from '@uibit/signature';
+import '@uibit/signature';
+
+export const Signature = defineComponent({
+  name: 'Signature',
+  props: {
+    hideClear: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['signature-change', 'signature-clear'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onSignature-change'] = (event: Event) => {
+        emit('signature-change', event);
+      };
+      eventListeners['onSignature-clear'] = (event: Event) => {
+        emit('signature-clear', event);
+      };
+
+      return h('uibit-signature', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Signature } from './signature.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Signature } from './signature.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,cAAc,YAAY,CAAC"}

package/dist/signature.d.ts

@@ -0,0 +1,63 @@
+import { UIBitElement } from '@uibit/core';
+declare const Signature_base: import("@uibit/form-internals").Constructor<import("@uibit/form-internals").FormAssociatedInterface> & typeof UIBitElement;
+/**
+ * Canvas area for capturing freehand signatures or drawings using touch or
+ * mouse gestures, rendered immediately as smooth bezier-curved vector lines
+ * with simulated pen pressure.
+ *
+ * @fires {{ isEmpty: boolean; dataUrl: string }} signature-change - Fired after each stroke ends
+ * @fires {{ previouslyEmpty: boolean }} signature-clear - Fired when the canvas is cleared
+ *
+ * @slot hint - Placeholder text shown when the pad is empty. Defaults to "Sign here".
+ * @slot clear-label - Label text inside the clear button. Defaults to "Clear".
+ *
+ * @cssprop [--uibit-signature-width=100%] - Width of the signature area
+ * @cssprop [--uibit-signature-height=11.25rem] - Height of the signature area
+ * @cssprop [--uibit-signature-background=#ffffff] - Canvas background color
+ * @cssprop [--uibit-signature-border=0.0625rem solid #e5e7eb] - Border around the canvas
+ * @cssprop [--uibit-signature-border-radius=0.5rem] - Border radius
+ * @cssprop [--uibit-signature-stroke-color=#111111] - Ink/stroke color
+ * @cssprop [--uibit-signature-stroke-width=0.15625rem] - Base stroke width (varies with velocity)
+ * @cssprop [--uibit-signature-hint-color=rgba(0,0,0,0.22)] - Color of the sign-here hint text
+ * @cssprop [--uibit-signature-hint-font-size=0.8125rem] - Font size of the hint text
+ * @cssprop [--uibit-signature-cursor=crosshair] - Cursor style over the canvas
+ *
+ * @csspart container - The outermost wrapper element
+ * @csspart canvas - The drawing canvas element
+ * @csspart hint - The "Sign here" placeholder hint
+ * @csspart clear-button - The clear button
+ */
+export declare class Signature extends Signature_base {
+    static styles: import("lit").CSSResult;
+    /** Whether to hide the clear button. */
+    hideClear: boolean;
+    private isEmpty;
+    private canvas;
+    private ctx;
+    private strokes;
+    private currentStroke;
+    private isPointerDown;
+    private lastVelocity;
+    firstUpdated(): void;
+    private resizeCanvas;
+    private attachListeners;
+    private getPoint;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private strokeWidth;
+    private strokeColor;
+    private drawStrokeSegment;
+    private redrawStrokes;
+    private restoreFromDataUrl;
+    /** Returns the signature as a PNG data URL, or an empty string if the pad is empty. */
+    toDataURL(type?: string): string;
+    /** Returns the signature as an inline SVG string built from the recorded strokes. */
+    toSVG(): string;
+    /** Clears all strokes from the pad. */
+    clear(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default Signature;
+//# sourceMappingURL=signature.d.ts.map

package/dist/signature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.d.ts","sourceRoot":"","sources":["../src/signature.ts"],"names":[],"mappings":"AACA,OAAO,EAAsC,YAAY,EAAE,MAAM,aAAa,CAAC;;AAM/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,SAAU,SAAQ,cAAiC;IAC9D,MAAM,CAAC,MAAM,0BAkGX;IAEF,wCAAwC;IACc,SAAS,UAAS;IAE/D,OAAO,CAAC,OAAO,CAAQ;IAEhC,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,aAAa,CAAwB;IAC7C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAK;IAEzB,YAAY,SAYX;IAED,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,iBAAiB;IA0CzB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,kBAAkB;IAS1B,uFAAuF;IACvF,SAAS,CAAC,IAAI,SAAc,GAAG,MAAM,CAGpC;IAED,qFAAqF;IACrF,KAAK,IAAI,MAAM,CA0Bd;IAED,uCAAuC;IACvC,KAAK,SAQJ;IAEQ,iBAAiB,SAUzB;IAED,MAAM,oCAkBL;CACF;eAEc,SAAS"}

package/dist/signature.js

@@ -0,0 +1,377 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, fromLucide, getIcon, UIBitElement } from '@uibit/core';
+import { RotateCcw } from 'lucide';
+import { property, state } from 'lit/decorators.js';
+import { FormAssociatedMixin } from '@uibit/form-internals';
+/**
+ * Canvas area for capturing freehand signatures or drawings using touch or
+ * mouse gestures, rendered immediately as smooth bezier-curved vector lines
+ * with simulated pen pressure.
+ *
+ * @fires {{ isEmpty: boolean; dataUrl: string }} signature-change - Fired after each stroke ends
+ * @fires {{ previouslyEmpty: boolean }} signature-clear - Fired when the canvas is cleared
+ *
+ * @slot hint - Placeholder text shown when the pad is empty. Defaults to "Sign here".
+ * @slot clear-label - Label text inside the clear button. Defaults to "Clear".
+ *
+ * @cssprop [--uibit-signature-width=100%] - Width of the signature area
+ * @cssprop [--uibit-signature-height=11.25rem] - Height of the signature area
+ * @cssprop [--uibit-signature-background=#ffffff] - Canvas background color
+ * @cssprop [--uibit-signature-border=0.0625rem solid #e5e7eb] - Border around the canvas
+ * @cssprop [--uibit-signature-border-radius=0.5rem] - Border radius
+ * @cssprop [--uibit-signature-stroke-color=#111111] - Ink/stroke color
+ * @cssprop [--uibit-signature-stroke-width=0.15625rem] - Base stroke width (varies with velocity)
+ * @cssprop [--uibit-signature-hint-color=rgba(0,0,0,0.22)] - Color of the sign-here hint text
+ * @cssprop [--uibit-signature-hint-font-size=0.8125rem] - Font size of the hint text
+ * @cssprop [--uibit-signature-cursor=crosshair] - Cursor style over the canvas
+ *
+ * @csspart container - The outermost wrapper element
+ * @csspart canvas - The drawing canvas element
+ * @csspart hint - The "Sign here" placeholder hint
+ * @csspart clear-button - The clear button
+ */
+let Signature = class Signature extends FormAssociatedMixin(UIBitElement) {
+    constructor() {
+        super(...arguments);
+        /** Whether to hide the clear button. */
+        this.hideClear = false;
+        this.isEmpty = true;
+        this.strokes = [];
+        this.currentStroke = [];
+        this.isPointerDown = false;
+        this.lastVelocity = 0;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      --uibit-signature-width: 100%;
+      --uibit-signature-height: 11.25rem;
+      --uibit-signature-background: #ffffff;
+      --uibit-signature-border: 0.0625rem solid #e5e7eb;
+      --uibit-signature-border-radius: 0.5rem;
+      --uibit-signature-stroke-color: #111111;
+      --uibit-signature-stroke-width: 0.15625rem;
+      --uibit-signature-hint-color: rgba(0, 0, 0, 0.22);
+      --uibit-signature-hint-font-size: 0.8125rem;
+      --uibit-signature-cursor: crosshair;
+    }
+
+    .container {
+      position: relative;
+      width: var(--uibit-signature-width);
+      height: var(--uibit-signature-height);
+      background: var(--uibit-signature-background);
+      border: var(--uibit-signature-border);
+      border-radius: var(--uibit-signature-border-radius);
+      overflow: hidden;
+      user-select: none;
+      touch-action: none;
+      box-sizing: border-box;
+    }
+
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+      cursor: var(--uibit-signature-cursor);
+    }
+
+    .hint {
+      position: absolute;
+      bottom: 0.75rem;
+      left: 50%;
+      transform: translateX(-50%);
+      color: var(--uibit-signature-hint-color);
+      font-size: var(--uibit-signature-hint-font-size);
+      font-family: inherit;
+      pointer-events: none;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+
+    .hint::before {
+      content: '';
+      display: block;
+      width: 2rem;
+      height: 0.0625rem;
+      background: currentColor;
+    }
+
+    .hint::after {
+      content: '';
+      display: block;
+      width: 2rem;
+      height: 0.0625rem;
+      background: currentColor;
+    }
+
+    .clear-button {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
+      font-family: inherit;
+      background: transparent;
+      border: none;
+      border-radius: 9999rem;
+      color: var(--uibit-signature-hint-color);
+      cursor: pointer;
+      transition: color 150ms ease, background-color 150ms ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .clear-button:hover {
+      color: var(--uibit-signature-stroke-color);
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+
+    .clear-button:active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .clear-button:focus-visible {
+      outline: 0.125rem solid var(--uibit-signature-stroke-color);
+      outline-offset: 0.125rem;
+    }
+  `; }
+    firstUpdated() {
+        this.canvas = this.shadowRoot.querySelector('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.resizeCanvas();
+        this.attachListeners();
+        const ro = new ResizeObserver(() => {
+            const imageData = this.toDataURL();
+            this.resizeCanvas();
+            if (imageData && !this.isEmpty)
+                this.restoreFromDataUrl(imageData);
+        });
+        ro.observe(this.canvas);
+    }
+    resizeCanvas() {
+        const dpr = window.devicePixelRatio || 1;
+        const rect = this.canvas.getBoundingClientRect();
+        this.canvas.width = rect.width * dpr;
+        this.canvas.height = rect.height * dpr;
+        this.ctx.scale(dpr, dpr);
+        this.redrawStrokes();
+    }
+    attachListeners() {
+        this.canvas.addEventListener('pointerdown', (e) => this.onPointerDown(e));
+        this.canvas.addEventListener('pointermove', (e) => this.onPointerMove(e));
+        this.canvas.addEventListener('pointerup', (e) => this.onPointerUp(e));
+        this.canvas.addEventListener('pointercancel', (e) => this.onPointerUp(e));
+        this.canvas.addEventListener('pointerleave', (e) => this.onPointerUp(e));
+    }
+    getPoint(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const pressure = e.pressure > 0 ? e.pressure : 0.5;
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+            pressure,
+            timestamp: e.timeStamp,
+        };
+    }
+    onPointerDown(e) {
+        e.preventDefault();
+        this.canvas.setPointerCapture(e.pointerId);
+        this.isPointerDown = true;
+        this.lastVelocity = 0;
+        this.currentStroke = [this.getPoint(e)];
+    }
+    onPointerMove(e) {
+        if (!this.isPointerDown)
+            return;
+        e.preventDefault();
+        const point = this.getPoint(e);
+        this.currentStroke.push(point);
+        this.drawStrokeSegment(this.currentStroke);
+        if (this.isEmpty) {
+            this.isEmpty = false;
+        }
+    }
+    onPointerUp(_e) {
+        if (!this.isPointerDown)
+            return;
+        this.isPointerDown = false;
+        if (this.currentStroke.length > 0) {
+            this.strokes.push({ points: [...this.currentStroke] });
+            this.currentStroke = [];
+            const dataUrl = this.toDataURL();
+            this.value = dataUrl;
+            this.dispatchCustomEvent('signature-change', { isEmpty: this.isEmpty, dataUrl });
+        }
+    }
+    strokeWidth() {
+        const raw = this.getCssPropertyValue('--uibit-signature-stroke-width').trim();
+        if (!raw)
+            return 2;
+        const num = parseFloat(raw);
+        if (isNaN(num))
+            return 2;
+        if (raw.endsWith('rem')) {
+            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            return num * rootFontSize;
+        }
+        if (raw.endsWith('em')) {
+            const parentFontSize = parseFloat(getComputedStyle(this).fontSize) || 16;
+            return num * parentFontSize;
+        }
+        return num;
+    }
+    strokeColor() {
+        return getComputedStyle(this).getPropertyValue('--uibit-signature-stroke-color').trim() || '#111111';
+    }
+    drawStrokeSegment(points) {
+        if (points.length < 2)
+            return;
+        const ctx = this.ctx;
+        const baseWidth = this.strokeWidth();
+        const color = this.strokeColor();
+        const last = points[points.length - 2];
+        const curr = points[points.length - 1];
+        const dx = curr.x - last.x;
+        const dy = curr.y - last.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const dt = Math.max(curr.timestamp - last.timestamp, 1);
+        const velocity = dist / dt;
+        this.lastVelocity = this.lastVelocity * 0.7 + velocity * 0.3;
+        const speedFactor = Math.max(0.4, 1 - this.lastVelocity * 0.04);
+        const width = baseWidth * speedFactor * (curr.pressure * 1.5 + 0.5);
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        if (points.length === 2) {
+            ctx.moveTo(last.x, last.y);
+            ctx.lineTo(curr.x, curr.y);
+        }
+        else {
+            const prev = points[points.length - 3];
+            const cx = (last.x + curr.x) / 2;
+            const cy = (last.y + curr.y) / 2;
+            const prevCx = (prev.x + last.x) / 2;
+            const prevCy = (prev.y + last.y) / 2;
+            ctx.moveTo(prevCx, prevCy);
+            ctx.quadraticCurveTo(last.x, last.y, cx, cy);
+        }
+        ctx.stroke();
+    }
+    redrawStrokes() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        for (const stroke of this.strokes) {
+            for (let i = 1; i < stroke.points.length; i++) {
+                this.drawStrokeSegment(stroke.points.slice(0, i + 1));
+            }
+        }
+    }
+    restoreFromDataUrl(dataUrl) {
+        const img = new Image();
+        img.onload = () => {
+            const rect = this.canvas.getBoundingClientRect();
+            this.ctx.drawImage(img, 0, 0, rect.width, rect.height);
+        };
+        img.src = dataUrl;
+    }
+    /** Returns the signature as a PNG data URL, or an empty string if the pad is empty. */
+    toDataURL(type = 'image/png') {
+        if (this.isEmpty)
+            return '';
+        return this.canvas.toDataURL(type);
+    }
+    /** Returns the signature as an inline SVG string built from the recorded strokes. */
+    toSVG() {
+        if (this.isEmpty)
+            return '';
+        const rect = this.canvas.getBoundingClientRect();
+        const baseWidth = this.strokeWidth();
+        const color = this.strokeColor();
+        const paths = [];
+        for (const stroke of this.strokes) {
+            if (stroke.points.length < 2)
+                continue;
+            const pts = stroke.points;
+            let d = `M ${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}`;
+            for (let i = 1; i < pts.length; i++) {
+                if (i === 1) {
+                    d += ` L ${pts[i].x.toFixed(2)} ${pts[i].y.toFixed(2)}`;
+                }
+                else {
+                    const prev = pts[i - 1];
+                    const curr = pts[i];
+                    const cx = ((prev.x + curr.x) / 2).toFixed(2);
+                    const cy = ((prev.y + curr.y) / 2).toFixed(2);
+                    d += ` Q ${prev.x.toFixed(2)} ${prev.y.toFixed(2)} ${cx} ${cy}`;
+                }
+            }
+            paths.push(`<path d="${d}" stroke="${color}" stroke-width="${baseWidth}" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`);
+        }
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${rect.width}" height="${rect.height}" viewBox="0 0 ${rect.width} ${rect.height}">${paths.join('')}</svg>`;
+    }
+    /** Clears all strokes from the pad. */
+    clear() {
+        const wasEmpty = this.isEmpty;
+        this.strokes = [];
+        this.currentStroke = [];
+        this.isEmpty = true;
+        this.value = '';
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.dispatchCustomEvent('signature-clear', { previouslyEmpty: wasEmpty });
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        if (this.defaultValue) {
+            this.strokes = [];
+            this.currentStroke = [];
+            this.isEmpty = false;
+            this.restoreFromDataUrl(this.defaultValue);
+        }
+        else {
+            this.clear();
+        }
+    }
+    render() {
+        return html `
+      <div part="container" class="container" role="img" aria-label="Signature pad">
+        <canvas part="canvas"></canvas>
+        ${this.isEmpty
+            ? html `<div part="hint" class="hint"><slot name="hint">Sign here</slot></div>`
+            : ''}
+        <slot name="clear-button" @click=${() => this.clear()}>
+          ${!this.hideClear
+            ? html `<button
+                part="clear-button"
+                class="clear-button"
+                ?disabled=${this.isEmpty}
+              >${getIcon('rotate-ccw', 14, fromLucide(RotateCcw))}</button>`
+            : ''}
+        </slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'hide-clear' })
+], Signature.prototype, "hideClear", void 0);
+__decorate([
+    state()
+], Signature.prototype, "isEmpty", void 0);
+Signature = __decorate([
+    customElement('uibit-signature')
+], Signature);
+export { Signature };
+export default Signature;
+//# sourceMappingURL=signature.js.map

package/dist/signature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.js","sourceRoot":"","sources":["../src/signature.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+import type Signature from './signature';
+export interface SignaturePoint {
+    x: number;
+    y: number;
+    pressure: number;
+    timestamp: number;
+}
+export interface SignatureStroke {
+    points: SignaturePoint[];
+}
+export interface SignatureChangeDetail {
+    isEmpty: boolean;
+    dataUrl: string;
+}
+export interface SignatureClearDetail {
+    previouslyEmpty: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-signature': Signature;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,SAAS,CAAC;KAChC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@uibit/signature",
+  "version": "0.1.0",
+  "description": "A canvas drawing area that captures freehand signatures or messages using touch or mouse gestures, rendered immediately as smooth bezier-curved vector lines with simulated pen pressure.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "signature-pad",
+    "signature",
+    "web-component",
+    "lit",
+    "canvas",
+    "touch",
+    "accessible",
+    "a11y"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/signature"
+  },
+  "dependencies": {
+    "lucide": "^1.24.0",
+    "@uibit/core": "0.1.0",
+    "@uibit/form-internals": "0.1.0"
+  },
+  "devDependencies": {
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "signature",
+    "title": "Signature",
+    "category": "Forms",
+    "tagName": "uibit-signature"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
+  }
+}