@sikka/hawa 0.26.0-next → 0.26.1-next
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/signature/index.d.mts +15 -0
- package/dist/signature/index.d.ts +15 -0
- package/dist/signature/index.js +108 -7
- package/dist/signature/index.mjs +104 -3
- package/package.json +1 -1
|
@@ -1,10 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import React__default, { FC } from 'react';
|
|
2
3
|
import { SignaturePadOptions } from 'signature_pad';
|
|
3
4
|
|
|
5
|
+
type PositionType = "top" | "bottom" | "right" | "left";
|
|
6
|
+
|
|
7
|
+
type LabelProps = {
|
|
8
|
+
hint?: React.ReactNode;
|
|
9
|
+
hintSide?: PositionType;
|
|
10
|
+
htmlFor?: string;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
};
|
|
13
|
+
|
|
4
14
|
interface SignatureCanvasProps extends SignaturePadOptions {
|
|
5
15
|
canvasProps?: React__default.CanvasHTMLAttributes<HTMLCanvasElement>;
|
|
6
16
|
clearOnResize?: boolean;
|
|
7
17
|
onGetImage?: any;
|
|
18
|
+
texts?: {
|
|
19
|
+
clear?: string;
|
|
20
|
+
};
|
|
21
|
+
labelProps?: LabelProps;
|
|
22
|
+
label?: any;
|
|
8
23
|
}
|
|
9
24
|
declare const Signature: FC<SignatureCanvasProps>;
|
|
10
25
|
|
|
@@ -1,10 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import React__default, { FC } from 'react';
|
|
2
3
|
import { SignaturePadOptions } from 'signature_pad';
|
|
3
4
|
|
|
5
|
+
type PositionType = "top" | "bottom" | "right" | "left";
|
|
6
|
+
|
|
7
|
+
type LabelProps = {
|
|
8
|
+
hint?: React.ReactNode;
|
|
9
|
+
hintSide?: PositionType;
|
|
10
|
+
htmlFor?: string;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
};
|
|
13
|
+
|
|
4
14
|
interface SignatureCanvasProps extends SignaturePadOptions {
|
|
5
15
|
canvasProps?: React__default.CanvasHTMLAttributes<HTMLCanvasElement>;
|
|
6
16
|
clearOnResize?: boolean;
|
|
7
17
|
onGetImage?: any;
|
|
18
|
+
texts?: {
|
|
19
|
+
clear?: string;
|
|
20
|
+
};
|
|
21
|
+
labelProps?: LabelProps;
|
|
22
|
+
label?: any;
|
|
8
23
|
}
|
|
9
24
|
declare const Signature: FC<SignatureCanvasProps>;
|
|
10
25
|
|
package/dist/signature/index.js
CHANGED
|
@@ -35,7 +35,7 @@ __export(signature_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(signature_exports);
|
|
36
36
|
|
|
37
37
|
// components/elements/signature/Signature.tsx
|
|
38
|
-
var
|
|
38
|
+
var import_react2 = __toESM(require("react"));
|
|
39
39
|
|
|
40
40
|
// components/util.ts
|
|
41
41
|
var import_clsx = require("clsx");
|
|
@@ -47,14 +47,115 @@ function cn(...inputs) {
|
|
|
47
47
|
// components/elements/signature/Signature.tsx
|
|
48
48
|
var import_signature_pad = __toESM(require("signature_pad"));
|
|
49
49
|
var import_trim_canvas = __toESM(require("trim-canvas"));
|
|
50
|
+
|
|
51
|
+
// components/elements/label/Label.tsx
|
|
52
|
+
var React2 = __toESM(require("react"));
|
|
53
|
+
|
|
54
|
+
// components/elements/tooltip/Tooltip.tsx
|
|
55
|
+
var import_react = __toESM(require("react"));
|
|
56
|
+
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
|
57
|
+
var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
|
|
58
|
+
TooltipPrimitive.Content,
|
|
59
|
+
{
|
|
60
|
+
ref,
|
|
61
|
+
sideOffset,
|
|
62
|
+
className: cn(
|
|
63
|
+
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
|
64
|
+
className
|
|
65
|
+
),
|
|
66
|
+
...props
|
|
67
|
+
}
|
|
68
|
+
));
|
|
69
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
70
|
+
var TooltipArrow = import_react.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
|
|
71
|
+
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
|
72
|
+
var Tooltip = ({
|
|
73
|
+
side,
|
|
74
|
+
open,
|
|
75
|
+
content,
|
|
76
|
+
children,
|
|
77
|
+
defaultOpen,
|
|
78
|
+
onOpenChange,
|
|
79
|
+
triggerProps,
|
|
80
|
+
contentProps,
|
|
81
|
+
providerProps,
|
|
82
|
+
delayDuration = 300,
|
|
83
|
+
...props
|
|
84
|
+
}) => {
|
|
85
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
86
|
+
TooltipPrimitive.TooltipProvider,
|
|
87
|
+
{
|
|
88
|
+
delayDuration,
|
|
89
|
+
...providerProps
|
|
90
|
+
},
|
|
91
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
92
|
+
TooltipPrimitive.Root,
|
|
93
|
+
{
|
|
94
|
+
open,
|
|
95
|
+
defaultOpen,
|
|
96
|
+
onOpenChange,
|
|
97
|
+
...props
|
|
98
|
+
},
|
|
99
|
+
/* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
|
100
|
+
/* @__PURE__ */ import_react.default.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
|
|
101
|
+
)
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
// components/elements/label/Label.tsx
|
|
106
|
+
var Label = React2.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React2.createElement(
|
|
107
|
+
"label",
|
|
108
|
+
{
|
|
109
|
+
ref,
|
|
110
|
+
className: cn(
|
|
111
|
+
"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
|
|
112
|
+
className
|
|
113
|
+
),
|
|
114
|
+
...props
|
|
115
|
+
},
|
|
116
|
+
children,
|
|
117
|
+
required && /* @__PURE__ */ React2.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
|
|
118
|
+
), hint && /* @__PURE__ */ React2.createElement(
|
|
119
|
+
Tooltip,
|
|
120
|
+
{
|
|
121
|
+
content: hint,
|
|
122
|
+
side: hintSide,
|
|
123
|
+
triggerProps: {
|
|
124
|
+
tabIndex: -1,
|
|
125
|
+
onClick: (event) => event.preventDefault()
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
/* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
|
|
129
|
+
"svg",
|
|
130
|
+
{
|
|
131
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
132
|
+
className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
|
|
133
|
+
viewBox: "0 0 24 24",
|
|
134
|
+
fill: "none",
|
|
135
|
+
stroke: "currentColor",
|
|
136
|
+
strokeWidth: "2",
|
|
137
|
+
strokeLinecap: "round",
|
|
138
|
+
strokeLinejoin: "round"
|
|
139
|
+
},
|
|
140
|
+
/* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }),
|
|
141
|
+
/* @__PURE__ */ React2.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
|
|
142
|
+
/* @__PURE__ */ React2.createElement("path", { d: "M12 17h.01" })
|
|
143
|
+
))
|
|
144
|
+
)));
|
|
145
|
+
Label.displayName = "Label";
|
|
146
|
+
|
|
147
|
+
// components/elements/signature/Signature.tsx
|
|
50
148
|
var Signature = ({
|
|
51
149
|
canvasProps,
|
|
52
150
|
clearOnResize = false,
|
|
53
151
|
onGetImage,
|
|
152
|
+
texts,
|
|
153
|
+
label,
|
|
154
|
+
labelProps,
|
|
54
155
|
...sigPadProps
|
|
55
156
|
}) => {
|
|
56
|
-
const canvasRef = (0,
|
|
57
|
-
const sigPadRef = (0,
|
|
157
|
+
const canvasRef = (0, import_react2.useRef)(null);
|
|
158
|
+
const sigPadRef = (0, import_react2.useRef)(null);
|
|
58
159
|
const checkClearOnResize = () => {
|
|
59
160
|
if (!clearOnResize) {
|
|
60
161
|
return;
|
|
@@ -96,12 +197,12 @@ var Signature = ({
|
|
|
96
197
|
const trimmedCanvas = getTrimmedCanvas();
|
|
97
198
|
return trimmedCanvas.toDataURL();
|
|
98
199
|
};
|
|
99
|
-
(0,
|
|
200
|
+
(0, import_react2.useEffect)(() => {
|
|
100
201
|
if (onGetImage) {
|
|
101
202
|
onGetImage(getSignatureImage);
|
|
102
203
|
}
|
|
103
204
|
}, [onGetImage]);
|
|
104
|
-
(0,
|
|
205
|
+
(0, import_react2.useEffect)(() => {
|
|
105
206
|
const canvas = canvasRef.current;
|
|
106
207
|
if (canvas) {
|
|
107
208
|
sigPadRef.current = new import_signature_pad.default(canvas, sigPadProps);
|
|
@@ -136,14 +237,14 @@ var Signature = ({
|
|
|
136
237
|
var _a;
|
|
137
238
|
return (_a = sigPadRef.current) == null ? void 0 : _a.toData();
|
|
138
239
|
};
|
|
139
|
-
return /* @__PURE__ */
|
|
240
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", { className: "hawa-w-full" }, label && /* @__PURE__ */ import_react2.default.createElement(Label, { ...labelProps, className: "hawa-mb-2" }, label || "Signature"), /* @__PURE__ */ import_react2.default.createElement(
|
|
140
241
|
"canvas",
|
|
141
242
|
{
|
|
142
243
|
ref: canvasRef,
|
|
143
244
|
...canvasProps,
|
|
144
245
|
className: cn("hawa-rounded", canvasProps == null ? void 0 : canvasProps.className)
|
|
145
246
|
}
|
|
146
|
-
), /* @__PURE__ */
|
|
247
|
+
), /* @__PURE__ */ import_react2.default.createElement("div", { className: "clickable-link hawa-w-fit", onClick: () => clear() }, (texts == null ? void 0 : texts.clear) || "Clear"));
|
|
147
248
|
};
|
|
148
249
|
// Annotate the CommonJS export names for ESM import in node:
|
|
149
250
|
0 && (module.exports = {
|
package/dist/signature/index.mjs
CHANGED
|
@@ -3,13 +3,114 @@ import {
|
|
|
3
3
|
} from "../chunk-TE3BKEXL.mjs";
|
|
4
4
|
|
|
5
5
|
// components/elements/signature/Signature.tsx
|
|
6
|
-
import
|
|
6
|
+
import React3, { useRef, useEffect } from "react";
|
|
7
7
|
import SignaturePad from "signature_pad";
|
|
8
8
|
import trimCanvas from "trim-canvas";
|
|
9
|
+
|
|
10
|
+
// components/elements/label/Label.tsx
|
|
11
|
+
import * as React2 from "react";
|
|
12
|
+
|
|
13
|
+
// components/elements/tooltip/Tooltip.tsx
|
|
14
|
+
import React from "react";
|
|
15
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
16
|
+
var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
17
|
+
TooltipPrimitive.Content,
|
|
18
|
+
{
|
|
19
|
+
ref,
|
|
20
|
+
sideOffset,
|
|
21
|
+
className: cn(
|
|
22
|
+
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
|
23
|
+
className
|
|
24
|
+
),
|
|
25
|
+
...props
|
|
26
|
+
}
|
|
27
|
+
));
|
|
28
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
29
|
+
var TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
|
|
30
|
+
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
|
31
|
+
var Tooltip = ({
|
|
32
|
+
side,
|
|
33
|
+
open,
|
|
34
|
+
content,
|
|
35
|
+
children,
|
|
36
|
+
defaultOpen,
|
|
37
|
+
onOpenChange,
|
|
38
|
+
triggerProps,
|
|
39
|
+
contentProps,
|
|
40
|
+
providerProps,
|
|
41
|
+
delayDuration = 300,
|
|
42
|
+
...props
|
|
43
|
+
}) => {
|
|
44
|
+
return /* @__PURE__ */ React.createElement(
|
|
45
|
+
TooltipPrimitive.TooltipProvider,
|
|
46
|
+
{
|
|
47
|
+
delayDuration,
|
|
48
|
+
...providerProps
|
|
49
|
+
},
|
|
50
|
+
/* @__PURE__ */ React.createElement(
|
|
51
|
+
TooltipPrimitive.Root,
|
|
52
|
+
{
|
|
53
|
+
open,
|
|
54
|
+
defaultOpen,
|
|
55
|
+
onOpenChange,
|
|
56
|
+
...props
|
|
57
|
+
},
|
|
58
|
+
/* @__PURE__ */ React.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
|
59
|
+
/* @__PURE__ */ React.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
// components/elements/label/Label.tsx
|
|
65
|
+
var Label = React2.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React2.createElement(
|
|
66
|
+
"label",
|
|
67
|
+
{
|
|
68
|
+
ref,
|
|
69
|
+
className: cn(
|
|
70
|
+
"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
|
|
71
|
+
className
|
|
72
|
+
),
|
|
73
|
+
...props
|
|
74
|
+
},
|
|
75
|
+
children,
|
|
76
|
+
required && /* @__PURE__ */ React2.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
|
|
77
|
+
), hint && /* @__PURE__ */ React2.createElement(
|
|
78
|
+
Tooltip,
|
|
79
|
+
{
|
|
80
|
+
content: hint,
|
|
81
|
+
side: hintSide,
|
|
82
|
+
triggerProps: {
|
|
83
|
+
tabIndex: -1,
|
|
84
|
+
onClick: (event) => event.preventDefault()
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
/* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
|
|
88
|
+
"svg",
|
|
89
|
+
{
|
|
90
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
91
|
+
className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
|
|
92
|
+
viewBox: "0 0 24 24",
|
|
93
|
+
fill: "none",
|
|
94
|
+
stroke: "currentColor",
|
|
95
|
+
strokeWidth: "2",
|
|
96
|
+
strokeLinecap: "round",
|
|
97
|
+
strokeLinejoin: "round"
|
|
98
|
+
},
|
|
99
|
+
/* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }),
|
|
100
|
+
/* @__PURE__ */ React2.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
|
|
101
|
+
/* @__PURE__ */ React2.createElement("path", { d: "M12 17h.01" })
|
|
102
|
+
))
|
|
103
|
+
)));
|
|
104
|
+
Label.displayName = "Label";
|
|
105
|
+
|
|
106
|
+
// components/elements/signature/Signature.tsx
|
|
9
107
|
var Signature = ({
|
|
10
108
|
canvasProps,
|
|
11
109
|
clearOnResize = false,
|
|
12
110
|
onGetImage,
|
|
111
|
+
texts,
|
|
112
|
+
label,
|
|
113
|
+
labelProps,
|
|
13
114
|
...sigPadProps
|
|
14
115
|
}) => {
|
|
15
116
|
const canvasRef = useRef(null);
|
|
@@ -95,14 +196,14 @@ var Signature = ({
|
|
|
95
196
|
var _a;
|
|
96
197
|
return (_a = sigPadRef.current) == null ? void 0 : _a.toData();
|
|
97
198
|
};
|
|
98
|
-
return /* @__PURE__ */
|
|
199
|
+
return /* @__PURE__ */ React3.createElement("div", { className: "hawa-w-full" }, label && /* @__PURE__ */ React3.createElement(Label, { ...labelProps, className: "hawa-mb-2" }, label || "Signature"), /* @__PURE__ */ React3.createElement(
|
|
99
200
|
"canvas",
|
|
100
201
|
{
|
|
101
202
|
ref: canvasRef,
|
|
102
203
|
...canvasProps,
|
|
103
204
|
className: cn("hawa-rounded", canvasProps == null ? void 0 : canvasProps.className)
|
|
104
205
|
}
|
|
105
|
-
), /* @__PURE__ */
|
|
206
|
+
), /* @__PURE__ */ React3.createElement("div", { className: "clickable-link hawa-w-fit", onClick: () => clear() }, (texts == null ? void 0 : texts.clear) || "Clear"));
|
|
106
207
|
};
|
|
107
208
|
export {
|
|
108
209
|
Signature
|