@alfadocs/ui-kit 0.52.0 → 0.53.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/{otp-input-CMphfBxZ.js → otp-input-Chb9r5vf.js} +89 -87
- package/dist/_chunks/{public-header.agent-BY6FH71R.js → public-header.agent-DyVpPwmv.js} +72 -62
- package/dist/_chunks/{sign-document-Bzld9jVM.js → sign-document-BzHTjMVC.js} +2 -2
- package/dist/_chunks/{signature-capture-CpMBhqQ9.js → signature-capture-CHbrKoA_.js} +163 -152
- package/dist/_chunks/signature-field-DhscKdgk.js +152 -0
- package/dist/_chunks/use-signing-session-C5evzYmo.js +108 -0
- package/dist/agent-catalog.json +1 -1
- package/dist/components/index.d.ts +3 -2
- package/dist/components/otp-input/index.js +1 -1
- package/dist/components/otp-input/otp-input.d.ts +6 -0
- package/dist/components/pdf-viewer/index.d.ts +1 -1
- package/dist/components/public-header/index.js +1 -1
- package/dist/components/public-header/public-header.d.ts +1 -1
- package/dist/components/sign-document/index.js +1 -1
- package/dist/components/signature-capture/index.js +1 -1
- package/dist/components/signature-capture/signature-capture.d.ts +7 -0
- package/dist/components/signature-field/index.d.ts +3 -0
- package/dist/components/signature-field/index.js +6 -0
- package/dist/components/signature-field/signature-field.d.ts +35 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +42 -41
- package/dist/hooks/use-signing-session.d.ts +36 -0
- package/dist/i18n/locales/ar.d.ts +8 -0
- package/dist/i18n/locales/ar.js +8 -0
- package/dist/i18n/locales/de.d.ts +8 -0
- package/dist/i18n/locales/de.js +8 -0
- package/dist/i18n/locales/el.d.ts +8 -0
- package/dist/i18n/locales/el.js +8 -0
- package/dist/i18n/locales/en.d.ts +8 -0
- package/dist/i18n/locales/en.js +8 -0
- package/dist/i18n/locales/es.d.ts +8 -0
- package/dist/i18n/locales/es.js +8 -0
- package/dist/i18n/locales/fr.d.ts +8 -0
- package/dist/i18n/locales/fr.js +8 -0
- package/dist/i18n/locales/hi.d.ts +8 -0
- package/dist/i18n/locales/hi.js +8 -0
- package/dist/i18n/locales/it.d.ts +8 -0
- package/dist/i18n/locales/it.js +8 -0
- package/dist/i18n/locales/ja.d.ts +8 -0
- package/dist/i18n/locales/ja.js +8 -0
- package/dist/i18n/locales/nl.d.ts +8 -0
- package/dist/i18n/locales/nl.js +8 -0
- package/dist/i18n/locales/pl.d.ts +8 -0
- package/dist/i18n/locales/pl.js +8 -0
- package/dist/i18n/locales/pt.d.ts +8 -0
- package/dist/i18n/locales/pt.js +8 -0
- package/dist/i18n/locales/ro.d.ts +8 -0
- package/dist/i18n/locales/ro.js +8 -0
- package/dist/i18n/locales/ru.d.ts +8 -0
- package/dist/i18n/locales/ru.js +8 -0
- package/dist/i18n/locales/sq.d.ts +8 -0
- package/dist/i18n/locales/sq.js +8 -0
- package/dist/i18n/locales/sv.d.ts +8 -0
- package/dist/i18n/locales/sv.js +8 -0
- package/dist/i18n/locales/tr.d.ts +8 -0
- package/dist/i18n/locales/tr.js +8 -0
- package/dist/i18n/locales/zh.d.ts +8 -0
- package/dist/i18n/locales/zh.js +8 -0
- package/dist/index.js +701 -697
- package/dist/locales/ar.json +8 -0
- package/dist/locales/de.json +8 -0
- package/dist/locales/el.json +8 -0
- package/dist/locales/en.json +8 -0
- package/dist/locales/es.json +8 -0
- package/dist/locales/fr.json +8 -0
- package/dist/locales/hi.json +8 -0
- package/dist/locales/it.json +8 -0
- package/dist/locales/ja.json +8 -0
- package/dist/locales/nl.json +8 -0
- package/dist/locales/pl.json +8 -0
- package/dist/locales/pt.json +8 -0
- package/dist/locales/ro.json +8 -0
- package/dist/locales/ru.json +8 -0
- package/dist/locales/sq.json +8 -0
- package/dist/locales/sv.json +8 -0
- package/dist/locales/tr.json +8 -0
- package/dist/locales/zh.json +8 -0
- package/dist/tokens.css +1 -1
- package/package.json +5 -1
- package/dist/_chunks/use-scroll-to-first-error-4Za-u5Nw.js +0 -43
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { jsx as e, jsxs as g, Fragment as f } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as k } from "react";
|
|
3
|
+
import { c as N } from "./index-D2ZczOXr.js";
|
|
4
|
+
import { useTranslation as y } from "react-i18next";
|
|
5
|
+
import { S as C } from "./spinner-OjQNn8oN.js";
|
|
6
|
+
import { C as _ } from "./check-DPdL_Sm7.js";
|
|
7
|
+
import { c as T } from "./createLucideIcon-CrFbzy84.js";
|
|
8
|
+
/**
|
|
9
|
+
* @license lucide-react v1.8.0 - ISC
|
|
10
|
+
*
|
|
11
|
+
* This source code is licensed under the ISC license.
|
|
12
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
13
|
+
*/
|
|
14
|
+
const w = [
|
|
15
|
+
["path", { d: "M13 21h8", key: "1jsn5i" }],
|
|
16
|
+
[
|
|
17
|
+
"path",
|
|
18
|
+
{
|
|
19
|
+
d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
|
|
20
|
+
key: "1a8usu"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
], S = T("pen-line", w), $ = N(
|
|
24
|
+
[
|
|
25
|
+
// Overlay fields are always absolutely positioned within the
|
|
26
|
+
// renderPageOverlay box; the percent geometry rides the inline style.
|
|
27
|
+
"ds:absolute",
|
|
28
|
+
"ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
|
|
29
|
+
"ds:[min-block-size:var(--min-target-size)] ds:[min-inline-size:var(--min-target-size)]",
|
|
30
|
+
"ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
|
|
31
|
+
"ds:rounded-[var(--radius-sm)]",
|
|
32
|
+
"ds:text-[length:var(--font-size-sm)] ds:font-medium",
|
|
33
|
+
"ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
|
|
34
|
+
"ds:focus-visible:outline-[length:var(--focus-ring-width)]",
|
|
35
|
+
"ds:focus-visible:outline-solid",
|
|
36
|
+
"ds:focus-visible:outline-[var(--ring)]",
|
|
37
|
+
"ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
|
|
38
|
+
"ds:forced-colors:focus-visible:outline-[CanvasText]",
|
|
39
|
+
"ds:aria-disabled:cursor-not-allowed"
|
|
40
|
+
].join(" "),
|
|
41
|
+
{
|
|
42
|
+
variants: {
|
|
43
|
+
state: {
|
|
44
|
+
unsigned: [
|
|
45
|
+
"ds:cursor-pointer",
|
|
46
|
+
"ds:border ds:border-dashed ds:border-[color:var(--ring)]",
|
|
47
|
+
"ds:bg-[color-mix(in_srgb,var(--info)_8%,transparent)]",
|
|
48
|
+
"ds:text-[var(--foreground)]",
|
|
49
|
+
"ds:hover:bg-[color-mix(in_srgb,var(--info)_16%,transparent)]",
|
|
50
|
+
"ds:forced-colors:border-[CanvasText]"
|
|
51
|
+
].join(" "),
|
|
52
|
+
signing: [
|
|
53
|
+
"ds:cursor-progress",
|
|
54
|
+
"ds:border ds:border-dashed ds:border-[color:var(--border)]",
|
|
55
|
+
"ds:bg-[var(--muted)]",
|
|
56
|
+
"ds:text-[var(--muted-foreground)]",
|
|
57
|
+
"ds:forced-colors:border-[CanvasText]"
|
|
58
|
+
].join(" "),
|
|
59
|
+
signed: [
|
|
60
|
+
"ds:cursor-pointer ds:overflow-hidden",
|
|
61
|
+
"ds:p-[var(--spacing-xs)]",
|
|
62
|
+
"ds:border ds:border-solid ds:border-[color:var(--success)]",
|
|
63
|
+
"ds:bg-[color-mix(in_srgb,var(--success)_8%,transparent)]",
|
|
64
|
+
"ds:text-[var(--foreground)]",
|
|
65
|
+
"ds:forced-colors:border-[CanvasText]"
|
|
66
|
+
].join(" ")
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
defaultVariants: { state: "unsigned" }
|
|
70
|
+
}
|
|
71
|
+
), L = k(
|
|
72
|
+
({
|
|
73
|
+
state: s = "unsigned",
|
|
74
|
+
insetInlineStart: o,
|
|
75
|
+
insetBlockStart: a,
|
|
76
|
+
inlineSize: t,
|
|
77
|
+
blockSize: l,
|
|
78
|
+
onActivate: d,
|
|
79
|
+
signedImageSrc: c,
|
|
80
|
+
label: r,
|
|
81
|
+
disabled: m = !1,
|
|
82
|
+
id: v,
|
|
83
|
+
className: p,
|
|
84
|
+
...b
|
|
85
|
+
}, h) => {
|
|
86
|
+
const { t: i } = y(), u = m || s === "signing", n = {};
|
|
87
|
+
o !== void 0 && (n.insetInlineStart = `${o}%`), a !== void 0 && (n.insetBlockStart = `${a}%`), t !== void 0 && (n.inlineSize = `${t}%`), l !== void 0 && (n.blockSize = `${l}%`);
|
|
88
|
+
const x = r ?? i("signatureField.prompt"), z = s === "signing" ? r ? i("signatureField.signingNamed", { label: r }) : i("signatureField.signing") : s === "signed" ? r ? i("signatureField.signedNamed", { label: r }) : i("signatureField.signed") : r ?? i("signatureField.unsigned");
|
|
89
|
+
function F(j) {
|
|
90
|
+
if (u) {
|
|
91
|
+
j.preventDefault();
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
d == null || d();
|
|
95
|
+
}
|
|
96
|
+
return /* @__PURE__ */ e(
|
|
97
|
+
"button",
|
|
98
|
+
{
|
|
99
|
+
ref: h,
|
|
100
|
+
type: "button",
|
|
101
|
+
...b,
|
|
102
|
+
"data-component": "signature-field",
|
|
103
|
+
"data-component-id": v,
|
|
104
|
+
"data-state": s,
|
|
105
|
+
"aria-label": z,
|
|
106
|
+
"aria-disabled": u || void 0,
|
|
107
|
+
"aria-busy": s === "signing" || void 0,
|
|
108
|
+
onClick: F,
|
|
109
|
+
className: [$({ state: s }), p].filter(Boolean).join(" "),
|
|
110
|
+
style: n,
|
|
111
|
+
children: s === "signing" ? (
|
|
112
|
+
// Decorative: the button's aria-label + aria-busy are the single
|
|
113
|
+
// source of the status announcement, so the Spinner's own
|
|
114
|
+
// role="status" live region is hidden from assistive tech.
|
|
115
|
+
/* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ e(C, { size: "sm", label: i("signatureField.signing") }) })
|
|
116
|
+
) : s === "signed" ? c ? /* @__PURE__ */ e(
|
|
117
|
+
"img",
|
|
118
|
+
{
|
|
119
|
+
src: c,
|
|
120
|
+
alt: "",
|
|
121
|
+
"aria-hidden": "true",
|
|
122
|
+
className: "ds:block-size-full ds:inline-size-full ds:object-contain"
|
|
123
|
+
}
|
|
124
|
+
) : /* @__PURE__ */ g(f, { children: [
|
|
125
|
+
/* @__PURE__ */ e(
|
|
126
|
+
_,
|
|
127
|
+
{
|
|
128
|
+
"aria-hidden": "true",
|
|
129
|
+
className: "ds:block-size-4 ds:inline-size-4 ds:text-[var(--success)]"
|
|
130
|
+
}
|
|
131
|
+
),
|
|
132
|
+
/* @__PURE__ */ e("span", { children: i("signatureField.signed") })
|
|
133
|
+
] }) : /* @__PURE__ */ g(f, { children: [
|
|
134
|
+
/* @__PURE__ */ e(
|
|
135
|
+
S,
|
|
136
|
+
{
|
|
137
|
+
"aria-hidden": "true",
|
|
138
|
+
className: "ds:block-size-4 ds:inline-size-4"
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
/* @__PURE__ */ e("span", { children: x })
|
|
142
|
+
] })
|
|
143
|
+
}
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
L.displayName = "SignatureField";
|
|
148
|
+
export {
|
|
149
|
+
L as S,
|
|
150
|
+
$ as s
|
|
151
|
+
};
|
|
152
|
+
//# sourceMappingURL=signature-field-DhscKdgk.js.map
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { useRef as w, useEffect as C, useState as y, useMemo as F, useCallback as S } from "react";
|
|
2
|
+
function b(e) {
|
|
3
|
+
return e != null && e.current ? e.current : typeof document > "u" ? null : document;
|
|
4
|
+
}
|
|
5
|
+
function A(e, o) {
|
|
6
|
+
const r = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : (
|
|
7
|
+
// SSR / jsdom fallback — drop every character that's
|
|
8
|
+
// significant in a CSS attribute selector. Conservative but
|
|
9
|
+
// robust enough for the test environment.
|
|
10
|
+
e.replace(/["'\\[\]]/g, "")
|
|
11
|
+
), s = `[data-error-anchor="${r}"], [name="${r}"], [name$="[${r}]"]`, i = Array.from(o.querySelectorAll(s));
|
|
12
|
+
return i.length === 0 ? null : i.find((c) => c.offsetParent !== null) ?? i[0];
|
|
13
|
+
}
|
|
14
|
+
function k(e, o, r = {}) {
|
|
15
|
+
const {
|
|
16
|
+
scope: s,
|
|
17
|
+
scrollOptions: i = { behavior: "smooth", block: "center" },
|
|
18
|
+
focus: u = !0,
|
|
19
|
+
skipInitialMount: c = !0
|
|
20
|
+
} = r, a = w(!1), d = w(null), l = o.find((f) => !!e[f]) ?? null;
|
|
21
|
+
C(() => {
|
|
22
|
+
if (c && !a.current) {
|
|
23
|
+
a.current = !0, d.current = l;
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
if (!l) {
|
|
27
|
+
d.current = null;
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (l === d.current || typeof window > "u") return;
|
|
31
|
+
const f = window.requestAnimationFrame(() => {
|
|
32
|
+
const m = b(s);
|
|
33
|
+
if (!m) return;
|
|
34
|
+
const g = A(l, m);
|
|
35
|
+
g && (g.scrollIntoView(i), u && g.focus({ preventScroll: !0 }), d.current = l);
|
|
36
|
+
});
|
|
37
|
+
return () => window.cancelAnimationFrame(f);
|
|
38
|
+
}, [l]);
|
|
39
|
+
}
|
|
40
|
+
function v(e, o = !1) {
|
|
41
|
+
const r = {};
|
|
42
|
+
for (const s of e)
|
|
43
|
+
r[s.id] = { signed: o ? !1 : !!s.signed };
|
|
44
|
+
return r;
|
|
45
|
+
}
|
|
46
|
+
function B(e) {
|
|
47
|
+
const [o, r] = y(
|
|
48
|
+
() => v(e)
|
|
49
|
+
), [s, i] = y(null), u = F(
|
|
50
|
+
() => e.map((n) => {
|
|
51
|
+
const t = o[n.id];
|
|
52
|
+
return {
|
|
53
|
+
...n,
|
|
54
|
+
signed: t ? t.signed : !!n.signed,
|
|
55
|
+
payload: t == null ? void 0 : t.payload
|
|
56
|
+
};
|
|
57
|
+
}),
|
|
58
|
+
[e, o]
|
|
59
|
+
), c = F(
|
|
60
|
+
() => u.reduce((n, t) => t.signed ? n + 1 : n, 0),
|
|
61
|
+
[u]
|
|
62
|
+
), a = u.length, d = a > 0 && c === a, l = S((n) => {
|
|
63
|
+
i(n);
|
|
64
|
+
}, []), f = S(() => {
|
|
65
|
+
i(null);
|
|
66
|
+
}, []), m = S((n, t) => {
|
|
67
|
+
r((p) => ({ ...p, [n]: { signed: !0, payload: t } })), i((p) => p === n ? null : p);
|
|
68
|
+
}, []), g = S(
|
|
69
|
+
(n) => {
|
|
70
|
+
var t;
|
|
71
|
+
return !!((t = o[n]) != null && t.signed);
|
|
72
|
+
},
|
|
73
|
+
[o]
|
|
74
|
+
), h = S(() => {
|
|
75
|
+
r(v(e, !0)), i(null);
|
|
76
|
+
}, [e]);
|
|
77
|
+
return F(
|
|
78
|
+
() => ({
|
|
79
|
+
fields: u,
|
|
80
|
+
signedCount: c,
|
|
81
|
+
total: a,
|
|
82
|
+
isComplete: d,
|
|
83
|
+
activeFieldId: s,
|
|
84
|
+
openField: l,
|
|
85
|
+
closeField: f,
|
|
86
|
+
markSigned: m,
|
|
87
|
+
isFieldSigned: g,
|
|
88
|
+
reset: h
|
|
89
|
+
}),
|
|
90
|
+
[
|
|
91
|
+
u,
|
|
92
|
+
c,
|
|
93
|
+
a,
|
|
94
|
+
d,
|
|
95
|
+
s,
|
|
96
|
+
l,
|
|
97
|
+
f,
|
|
98
|
+
m,
|
|
99
|
+
g,
|
|
100
|
+
h
|
|
101
|
+
]
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
export {
|
|
105
|
+
B as a,
|
|
106
|
+
k as u
|
|
107
|
+
};
|
|
108
|
+
//# sourceMappingURL=use-signing-session-C5evzYmo.js.map
|
package/dist/agent-catalog.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { usePrefersReducedMotion, useMediaQuery, useScrollToFirstError, useLocale, useTheme, resolveTheme, themeClassList, THEME_CLASS, THEME_STORAGE_KEY, ACCESSIBILITY_STORAGE_KEY, } from '../hooks';
|
|
2
|
-
export type { LocaleDir, UseLocaleReturn, UseScrollToFirstErrorOptions, ThemePreference, AccessibilityPreference, ResolvedTheme, UseThemeReturn, } from '../hooks';
|
|
1
|
+
export { usePrefersReducedMotion, useMediaQuery, useScrollToFirstError, useLocale, useTheme, resolveTheme, themeClassList, THEME_CLASS, THEME_STORAGE_KEY, ACCESSIBILITY_STORAGE_KEY, useSigningSession, } from '../hooks';
|
|
2
|
+
export type { LocaleDir, UseLocaleReturn, UseScrollToFirstErrorOptions, ThemePreference, AccessibilityPreference, ResolvedTheme, UseThemeReturn, SigningField, SigningFieldBase, UseSigningSessionReturn, } from '../hooks';
|
|
3
3
|
export * from './button';
|
|
4
4
|
export * from './button-group';
|
|
5
5
|
export * from './floating-action-button';
|
|
@@ -152,6 +152,7 @@ export * from './pdf-viewer';
|
|
|
152
152
|
export * from './reviews-panel';
|
|
153
153
|
export * from './rich-text-editor';
|
|
154
154
|
export * from './signature-capture';
|
|
155
|
+
export * from './signature-field';
|
|
155
156
|
export * from './sign-document';
|
|
156
157
|
export * from './slot-grid';
|
|
157
158
|
export * from './tooth-scheme';
|
|
@@ -34,6 +34,12 @@ export interface OTPInputProps {
|
|
|
34
34
|
* Default `false` so the listener stays opt-in.
|
|
35
35
|
*/
|
|
36
36
|
webOtp?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* When set, renders a hidden `<input name={name}>` kept in sync with the
|
|
39
|
+
* packed code so consumers can POST the OTP declaratively, e.g.
|
|
40
|
+
* `sms_code_form[code]`. Default off — no behaviour change.
|
|
41
|
+
*/
|
|
42
|
+
name?: string;
|
|
37
43
|
}
|
|
38
44
|
export declare const OTPInput: import("react").ForwardRefExoticComponent<OTPInputProps & import("react").RefAttributes<OTPInputHandle>>;
|
|
39
45
|
//# sourceMappingURL=otp-input.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { PDFViewer } from './pdf-viewer';
|
|
2
|
-
export type { PDFViewerProps, PDFViewerHandle, PDFZoomPreset, } from './pdf-viewer';
|
|
2
|
+
export type { PDFViewerProps, PDFViewerHandle, PDFZoomPreset, PDFPageOverlayArgs, PDFPageRotation, } from './pdf-viewer';
|
|
3
3
|
export { pdfViewerAgent } from './pdf-viewer.agent';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -65,7 +65,7 @@ export interface PublicHeaderDropdownLinkProps extends Omit<AnchorHTMLAttributes
|
|
|
65
65
|
children: ReactNode;
|
|
66
66
|
}
|
|
67
67
|
declare const rootVariants: (props?: ({
|
|
68
|
-
variant?: "dark" | "pill" | "transparent" | null | undefined;
|
|
68
|
+
variant?: "dark" | "brand" | "pill" | "transparent" | null | undefined;
|
|
69
69
|
sticky?: "none" | "top" | "scroll-up" | null | undefined;
|
|
70
70
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
71
71
|
export declare const PublicHeader: import("react").ForwardRefExoticComponent<PublicHeaderProps & import("react").RefAttributes<HTMLElement>> & {
|
|
@@ -34,6 +34,13 @@ export interface SignatureCaptureProps {
|
|
|
34
34
|
backgroundColor?: string;
|
|
35
35
|
/** Show the typed-name fallback toggle. Default `true`. */
|
|
36
36
|
allowTypedFallback?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* When set, on confirm() the captured PNG data URL is written into a hidden
|
|
39
|
+
* `<input name={name}>` so consumers can POST the signature declaratively.
|
|
40
|
+
* The PNG data URL satisfies the server's `data:image/png` prefix check.
|
|
41
|
+
* Default off.
|
|
42
|
+
*/
|
|
43
|
+
name?: string;
|
|
37
44
|
/** Disable the entire component. */
|
|
38
45
|
disabled?: boolean;
|
|
39
46
|
/** Accessible label for the pad region. */
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export type SignatureFieldState = 'unsigned' | 'signing' | 'signed';
|
|
3
|
+
export interface SignatureFieldProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'children' | 'aria-label' | 'disabled'> {
|
|
4
|
+
/** Lifecycle state. Drives both the visual treatment and the accessible name. */
|
|
5
|
+
state?: SignatureFieldState;
|
|
6
|
+
/**
|
|
7
|
+
* Percent offset of the field's logical start edge within the overlay box.
|
|
8
|
+
* Applied as a runtime-computed `inset-inline-start: {n}%`.
|
|
9
|
+
*/
|
|
10
|
+
insetInlineStart?: number;
|
|
11
|
+
/** Percent offset of the field's logical top edge. `inset-block-start: {n}%`. */
|
|
12
|
+
insetBlockStart?: number;
|
|
13
|
+
/** Percent of the overlay's logical inline size — the field width. */
|
|
14
|
+
inlineSize?: number;
|
|
15
|
+
/** Percent of the overlay's logical block size — the field height. */
|
|
16
|
+
blockSize?: number;
|
|
17
|
+
/** Called when an unsigned (or signed) field is activated by click / keyboard. */
|
|
18
|
+
onActivate?: () => void;
|
|
19
|
+
/** Captured signature image (PNG data URL or URL) shown when `state="signed"`. */
|
|
20
|
+
signedImageSrc?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Caption shown in the unsigned prompt and used as the accessible name
|
|
23
|
+
* (e.g. "Sign here", "Date", "Initial here"). Falls back to the
|
|
24
|
+
* translated default prompt.
|
|
25
|
+
*/
|
|
26
|
+
label?: string;
|
|
27
|
+
/** Hard-disable the field (non-activatable, dimmed). Distinct from `state="signing"`. */
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
}
|
|
30
|
+
declare const signatureFieldVariants: (props?: ({
|
|
31
|
+
state?: "signed" | "unsigned" | "signing" | null | undefined;
|
|
32
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
33
|
+
export declare const SignatureField: import("react").ForwardRefExoticComponent<SignatureFieldProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
34
|
+
export { signatureFieldVariants };
|
|
35
|
+
//# sourceMappingURL=signature-field.d.ts.map
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -18,4 +18,5 @@ export { usePersistentState } from './use-persistent-state';
|
|
|
18
18
|
export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
|
|
19
19
|
export { useWebOtp, type UseWebOtpOptions } from './use-web-otp';
|
|
20
20
|
export { useEdgeResize, type UseEdgeResizeOptions, type UseEdgeResizeReturn, type EdgeResizeSeparatorProps, } from './use-edge-resize';
|
|
21
|
+
export { useSigningSession, type SigningField, type SigningFieldBase, type UseSigningSessionReturn, } from './use-signing-session';
|
|
21
22
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import { u as v } from "../_chunks/use-prefers-reduced-motion-BMwIQRjB.js";
|
|
2
2
|
import { u as D } from "../_chunks/use-media-query-CcAx5SMM.js";
|
|
3
|
-
import { u as _ } from "../_chunks/use-
|
|
4
|
-
import { u as
|
|
5
|
-
import { u as
|
|
6
|
-
import { A as
|
|
7
|
-
import { u as
|
|
8
|
-
import { u as
|
|
9
|
-
import { u as
|
|
3
|
+
import { u as g, a as _ } from "../_chunks/use-signing-session-C5evzYmo.js";
|
|
4
|
+
import { u as O } from "../_chunks/use-count-up-BLLetaZ8.js";
|
|
5
|
+
import { u as k } from "../_chunks/use-locale-BkCIHujH.js";
|
|
6
|
+
import { A as K, T as H, a as M, r as Y, t as q, u as B } from "../_chunks/use-theme-CAuo6EYT.js";
|
|
7
|
+
import { u as P } from "../_chunks/use-controllable-state-BiY4xTzM.js";
|
|
8
|
+
import { u as V } from "../_chunks/use-copy-to-clipboard-Cyfc_dlv.js";
|
|
9
|
+
import { u as z } from "../_chunks/use-debounced-callback-BisrB-Fq.js";
|
|
10
10
|
import { useState as x, useRef as b, useEffect as E } from "react";
|
|
11
|
-
import { u as
|
|
12
|
-
import { u as
|
|
13
|
-
import { u as
|
|
14
|
-
import { u as
|
|
15
|
-
import { u as
|
|
16
|
-
function
|
|
17
|
-
const [t,
|
|
11
|
+
import { u as W, a as J } from "../_chunks/use-direction-Dp8h70PP.js";
|
|
12
|
+
import { u as X } from "../_chunks/use-persistent-state-i23OWy6G.js";
|
|
13
|
+
import { u as $ } from "../_chunks/use-isomorphic-layout-effect-BGfaCOP1.js";
|
|
14
|
+
import { u as te } from "../_chunks/use-web-otp-D_utzp6S.js";
|
|
15
|
+
import { u as oe } from "../_chunks/use-edge-resize-ZnGG7gyO.js";
|
|
16
|
+
function h(e, o) {
|
|
17
|
+
const [t, i] = x(e), u = b(null);
|
|
18
18
|
return E(() => {
|
|
19
19
|
if (o <= 0) {
|
|
20
|
-
u.current !== null && (clearTimeout(u.current), u.current = null),
|
|
20
|
+
u.current !== null && (clearTimeout(u.current), u.current = null), i(e);
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
23
|
const s = setTimeout(() => {
|
|
24
|
-
|
|
24
|
+
i(e), u.current = null;
|
|
25
25
|
}, o);
|
|
26
26
|
return u.current = s, () => clearTimeout(s);
|
|
27
27
|
}, [e, o]), t;
|
|
@@ -51,12 +51,12 @@ function p(e) {
|
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
53
|
function C(e, o = {}) {
|
|
54
|
-
const { enabled: t = !0, autoFocus:
|
|
54
|
+
const { enabled: t = !0, autoFocus: i = !0, restoreFocus: u = !0 } = o, s = b(null);
|
|
55
55
|
E(() => {
|
|
56
56
|
if (!t) return;
|
|
57
57
|
const a = e.current;
|
|
58
58
|
if (!a) return;
|
|
59
|
-
if (s.current = typeof document < "u" && document.activeElement instanceof HTMLElement ? document.activeElement : null,
|
|
59
|
+
if (s.current = typeof document < "u" && document.activeElement instanceof HTMLElement ? document.activeElement : null, i) {
|
|
60
60
|
const n = p(a)[0] ?? (a.tabIndex >= -1 ? a : null);
|
|
61
61
|
n == null || n.focus();
|
|
62
62
|
}
|
|
@@ -64,12 +64,12 @@ function C(e, o = {}) {
|
|
|
64
64
|
if (r.key !== "Tab") return;
|
|
65
65
|
const n = e.current;
|
|
66
66
|
if (!n) return;
|
|
67
|
-
const
|
|
68
|
-
if (
|
|
67
|
+
const c = p(n);
|
|
68
|
+
if (c.length === 0) {
|
|
69
69
|
r.preventDefault();
|
|
70
70
|
return;
|
|
71
71
|
}
|
|
72
|
-
const d =
|
|
72
|
+
const d = c[0], m = c[c.length - 1], l = document.activeElement;
|
|
73
73
|
r.shiftKey ? (l === d || !n.contains(l)) && (r.preventDefault(), m.focus()) : (l === m || !n.contains(l)) && (r.preventDefault(), d.focus());
|
|
74
74
|
}
|
|
75
75
|
return a.addEventListener("keydown", f), () => {
|
|
@@ -80,30 +80,31 @@ function C(e, o = {}) {
|
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
|
-
}, [t,
|
|
83
|
+
}, [t, i, u, e]);
|
|
84
84
|
}
|
|
85
85
|
export {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
86
|
+
K as ACCESSIBILITY_STORAGE_KEY,
|
|
87
|
+
H as THEME_CLASS,
|
|
88
|
+
M as THEME_STORAGE_KEY,
|
|
89
|
+
Y as resolveTheme,
|
|
90
|
+
q as themeClassList,
|
|
91
|
+
P as useControllableState,
|
|
92
|
+
V as useCopyToClipboard,
|
|
93
|
+
O as useCountUp,
|
|
94
|
+
z as useDebouncedCallback,
|
|
95
|
+
h as useDebouncedValue,
|
|
96
|
+
W as useDirection,
|
|
97
|
+
J as useDocumentDirection,
|
|
98
|
+
oe as useEdgeResize,
|
|
99
99
|
C as useFocusTrap,
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
$ as useIsomorphicLayoutEffect,
|
|
101
|
+
k as useLocale,
|
|
102
102
|
D as useMediaQuery,
|
|
103
|
-
|
|
103
|
+
X as usePersistentState,
|
|
104
104
|
v as usePrefersReducedMotion,
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
105
|
+
g as useScrollToFirstError,
|
|
106
|
+
_ as useSigningSession,
|
|
107
|
+
B as useTheme,
|
|
108
|
+
te as useWebOtp
|
|
108
109
|
};
|
|
109
110
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/** Minimum shape a signing field must satisfy. */
|
|
2
|
+
export interface SigningFieldBase {
|
|
3
|
+
/** Stable, unique id for the field within the session. */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Initial signed state (default `false`). */
|
|
6
|
+
signed?: boolean;
|
|
7
|
+
}
|
|
8
|
+
/** A consumer field enriched with the session's live signed state + payload. */
|
|
9
|
+
export type SigningField<TField extends SigningFieldBase, TPayload> = TField & {
|
|
10
|
+
signed: boolean;
|
|
11
|
+
payload?: TPayload;
|
|
12
|
+
};
|
|
13
|
+
export interface UseSigningSessionReturn<TField extends SigningFieldBase, TPayload> {
|
|
14
|
+
/** The input fields, each enriched with live `signed` + `payload`. */
|
|
15
|
+
fields: SigningField<TField, TPayload>[];
|
|
16
|
+
/** How many fields are currently signed. */
|
|
17
|
+
signedCount: number;
|
|
18
|
+
/** Total number of fields. */
|
|
19
|
+
total: number;
|
|
20
|
+
/** True when every field is signed (and there is at least one). */
|
|
21
|
+
isComplete: boolean;
|
|
22
|
+
/** The field whose capture UI is currently open, or `null`. */
|
|
23
|
+
activeFieldId: string | null;
|
|
24
|
+
/** Open a field's capture UI (sets `activeFieldId`). */
|
|
25
|
+
openField: (id: string) => void;
|
|
26
|
+
/** Close any open capture UI (clears `activeFieldId`). */
|
|
27
|
+
closeField: () => void;
|
|
28
|
+
/** Flip a field to signed, storing its payload, and close it if active. */
|
|
29
|
+
markSigned: (id: string, payload?: TPayload) => void;
|
|
30
|
+
/** Read a single field's signed state. */
|
|
31
|
+
isFieldSigned: (id: string) => boolean;
|
|
32
|
+
/** Clear all signatures and close any open field. */
|
|
33
|
+
reset: () => void;
|
|
34
|
+
}
|
|
35
|
+
export declare function useSigningSession<TField extends SigningFieldBase, TPayload = unknown>(fields: TField[]): UseSigningSessionReturn<TField, TPayload>;
|
|
36
|
+
//# sourceMappingURL=use-signing-session.d.ts.map
|
|
@@ -1712,6 +1712,14 @@ export declare const arUi: {
|
|
|
1712
1712
|
readonly invalidReturnUrl: "يجب أن يتطابق رابط العودة مع أصل هذا الموقع. لم يتم إرسال الدفع.";
|
|
1713
1713
|
};
|
|
1714
1714
|
};
|
|
1715
|
+
readonly signatureField: {
|
|
1716
|
+
readonly prompt: "انقر للتوقيع";
|
|
1717
|
+
readonly unsigned: "وقّع هنا";
|
|
1718
|
+
readonly signing: "جارٍ التوقيع…";
|
|
1719
|
+
readonly signingNamed: "{{label}} — جارٍ التوقيع…";
|
|
1720
|
+
readonly signed: "تم التوقيع";
|
|
1721
|
+
readonly signedNamed: "{{label}} — تم التوقيع";
|
|
1722
|
+
};
|
|
1715
1723
|
readonly signature: {
|
|
1716
1724
|
readonly padLabel: "منطقة التوقيع";
|
|
1717
1725
|
readonly clear: "مسح التوقيع";
|
package/dist/i18n/locales/ar.js
CHANGED
|
@@ -1695,6 +1695,14 @@ const e = {
|
|
|
1695
1695
|
invalidReturnUrl: "يجب أن يتطابق رابط العودة مع أصل هذا الموقع. لم يتم إرسال الدفع."
|
|
1696
1696
|
}
|
|
1697
1697
|
},
|
|
1698
|
+
signatureField: {
|
|
1699
|
+
prompt: "انقر للتوقيع",
|
|
1700
|
+
unsigned: "وقّع هنا",
|
|
1701
|
+
signing: "جارٍ التوقيع…",
|
|
1702
|
+
signingNamed: "{{label}} — جارٍ التوقيع…",
|
|
1703
|
+
signed: "تم التوقيع",
|
|
1704
|
+
signedNamed: "{{label}} — تم التوقيع"
|
|
1705
|
+
},
|
|
1698
1706
|
signature: {
|
|
1699
1707
|
padLabel: "منطقة التوقيع",
|
|
1700
1708
|
clear: "مسح التوقيع",
|
|
@@ -1712,6 +1712,14 @@ export declare const deUi: {
|
|
|
1712
1712
|
readonly invalidReturnUrl: "Die Rückleitungs-URL muss mit dem Ursprung dieser Website übereinstimmen. Die Zahlung wurde nicht gesendet.";
|
|
1713
1713
|
};
|
|
1714
1714
|
};
|
|
1715
|
+
readonly signatureField: {
|
|
1716
|
+
readonly prompt: "Zum Signieren klicken";
|
|
1717
|
+
readonly unsigned: "Hier unterschreiben";
|
|
1718
|
+
readonly signing: "Wird signiert…";
|
|
1719
|
+
readonly signingNamed: "{{label}} — Wird signiert…";
|
|
1720
|
+
readonly signed: "Signiert";
|
|
1721
|
+
readonly signedNamed: "{{label}} — Signiert";
|
|
1722
|
+
};
|
|
1715
1723
|
readonly signature: {
|
|
1716
1724
|
readonly padLabel: "Unterschriftfeld";
|
|
1717
1725
|
readonly clear: "Unterschrift löschen";
|
package/dist/i18n/locales/de.js
CHANGED
|
@@ -1694,6 +1694,14 @@ const e = {
|
|
|
1694
1694
|
invalidReturnUrl: "Die Rückleitungs-URL muss mit dem Ursprung dieser Website übereinstimmen. Die Zahlung wurde nicht gesendet."
|
|
1695
1695
|
}
|
|
1696
1696
|
},
|
|
1697
|
+
signatureField: {
|
|
1698
|
+
prompt: "Zum Signieren klicken",
|
|
1699
|
+
unsigned: "Hier unterschreiben",
|
|
1700
|
+
signing: "Wird signiert…",
|
|
1701
|
+
signingNamed: "{{label}} — Wird signiert…",
|
|
1702
|
+
signed: "Signiert",
|
|
1703
|
+
signedNamed: "{{label}} — Signiert"
|
|
1704
|
+
},
|
|
1697
1705
|
signature: {
|
|
1698
1706
|
padLabel: "Unterschriftfeld",
|
|
1699
1707
|
clear: "Unterschrift löschen",
|