@tapcart/mobile-components 0.7.61 → 0.7.63
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/components/hooks/use-click-outside.d.ts +6 -0
- package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
- package/dist/components/hooks/use-click-outside.js +15 -0
- package/dist/components/hooks/use-outside-click.d.ts +7 -0
- package/dist/components/hooks/use-outside-click.d.ts.map +1 -0
- package/dist/components/hooks/use-outside-click.js +16 -0
- package/dist/components/hooks/use-tap.d.ts +7 -7
- package/dist/components/hooks/use-tap.js +97 -97
- package/dist/components/ui/Input/input.d.ts +1 -1
- package/dist/components/ui/Input/input.d.ts.map +1 -1
- package/dist/components/ui/Input/input.js +12 -12
- package/dist/components/ui/Input/useInput.d.ts +0 -2
- package/dist/components/ui/Input/useInput.d.ts.map +1 -1
- package/dist/components/ui/Input/useInput.js +1 -1
- package/dist/components/ui/apple-pay-button.d.ts +1 -1
- package/dist/components/ui/apple-pay-button.d.ts.map +1 -1
- package/dist/components/ui/radio-group.d.ts.map +1 -1
- package/dist/components/ui/radio-group.js +6 -2
- package/dist/components/ui/selectors.d.ts.map +1 -1
- package/dist/components/ui/selectors.js +7 -3
- package/dist/styles.css +3 -0
- package/package.json +20 -20
- package/dist/components/hooks/use-customer.d.ts +0 -10
- package/dist/components/hooks/use-customer.d.ts.map +0 -1
- package/dist/components/hooks/use-customer.js +0 -24
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import React from "react"
|
|
3
|
+
export function useClickOutside(ref, callback) {
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const handleClickOutside = (event) => {
|
|
6
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
7
|
+
callback()
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
document.addEventListener("mousedown", handleClickOutside)
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener("mousedown", handleClickOutside)
|
|
13
|
+
}
|
|
14
|
+
}, [ref, callback])
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import React from "react"
|
|
3
|
+
const useClickOutside = (ref, callback) => {
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const handleClickOutside = (event) => {
|
|
6
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
7
|
+
callback()
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
document.addEventListener("mousedown", handleClickOutside)
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener("mousedown", handleClickOutside)
|
|
13
|
+
}
|
|
14
|
+
}, [ref, callback])
|
|
15
|
+
}
|
|
16
|
+
export default useClickOutside
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React from "react"
|
|
1
|
+
import React from "react"
|
|
2
2
|
declare const useTap: (tapThreshold?: number) => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
export { useTap }
|
|
8
|
-
//# sourceMappingURL=use-tap.d.ts.map
|
|
3
|
+
onTap: (handler: (event: any) => void) => (event: any) => void
|
|
4
|
+
isPressed: boolean
|
|
5
|
+
ref: React.MutableRefObject<null>
|
|
6
|
+
}
|
|
7
|
+
export { useTap }
|
|
8
|
+
//# sourceMappingURL=use-tap.d.ts.map
|
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
import { useState, useEffect, useCallback, useRef } from "react"
|
|
1
|
+
"use client"
|
|
2
|
+
import { useState, useEffect, useCallback, useRef } from "react"
|
|
3
3
|
// Shared manager for all instances of the hook
|
|
4
4
|
const tapManager = (() => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
5
|
+
const elements = new Map()
|
|
6
|
+
let isListening = false
|
|
7
|
+
const startListening = () => {
|
|
8
|
+
if (isListening) return
|
|
9
|
+
const handleTouchStart = (e) => {
|
|
10
|
+
const touch = e.touches[0]
|
|
11
|
+
elements.forEach((data, el) => {
|
|
12
|
+
if (el.contains(touch.target)) {
|
|
13
|
+
data.touchStarted = true
|
|
14
|
+
data.touchMoved = false
|
|
15
|
+
data.startPosition = { x: touch.clientX, y: touch.clientY }
|
|
16
|
+
// Don't set isPressed here, wait to determine if it's a tap or drag
|
|
17
|
+
}
|
|
18
|
+
})
|
|
19
|
+
}
|
|
20
|
+
const handleTouchMove = (e) => {
|
|
21
|
+
const touch = e.touches[0]
|
|
22
|
+
elements.forEach((data, el) => {
|
|
23
|
+
if (data.touchStarted) {
|
|
24
|
+
const deltaX = Math.abs(touch.clientX - data.startPosition.x)
|
|
25
|
+
const deltaY = Math.abs(touch.clientY - data.startPosition.y)
|
|
26
|
+
if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
|
|
27
|
+
data.touchMoved = true
|
|
28
|
+
data.setIsPressed(false)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
})
|
|
32
|
+
}
|
|
33
|
+
const handleTouchEnd = () => {
|
|
34
|
+
elements.forEach((data) => {
|
|
35
|
+
if (data.touchStarted) {
|
|
36
|
+
data.touchStarted = false
|
|
37
|
+
if (!data.touchMoved) {
|
|
38
|
+
// It's a tap, set isPressed briefly
|
|
39
|
+
data.setIsPressed(true)
|
|
40
|
+
setTimeout(() => data.setIsPressed(false), 100)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
})
|
|
44
|
+
}
|
|
45
|
+
document.addEventListener("touchstart", (e) => handleTouchStart(e), {
|
|
46
|
+
passive: true,
|
|
47
|
+
})
|
|
48
|
+
document.addEventListener("touchmove", (e) => handleTouchMove(e), {
|
|
49
|
+
passive: true,
|
|
50
|
+
})
|
|
51
|
+
document.addEventListener("touchend", () => handleTouchEnd(), {
|
|
52
|
+
passive: true,
|
|
53
|
+
})
|
|
54
|
+
isListening = true
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
register: (el, data) => {
|
|
58
|
+
elements.set(el, data)
|
|
59
|
+
startListening()
|
|
60
|
+
},
|
|
61
|
+
unregister: (el) => {
|
|
62
|
+
elements.delete(el)
|
|
63
|
+
},
|
|
64
|
+
elements,
|
|
65
|
+
}
|
|
66
|
+
})()
|
|
64
67
|
const useTap = (tapThreshold = 10) => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
return { onTap, isPressed, ref: elementRef };
|
|
99
|
-
};
|
|
100
|
-
export { useTap };
|
|
68
|
+
const [isPressed, setIsPressed] = useState(false)
|
|
69
|
+
const elementRef = useRef(null)
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
const element = elementRef.current
|
|
72
|
+
if (!element) return
|
|
73
|
+
const data = {
|
|
74
|
+
touchStarted: false,
|
|
75
|
+
touchMoved: false,
|
|
76
|
+
startPosition: { x: 0, y: 0 },
|
|
77
|
+
setIsPressed,
|
|
78
|
+
tapThreshold,
|
|
79
|
+
}
|
|
80
|
+
tapManager.register(element, data)
|
|
81
|
+
return () => {
|
|
82
|
+
tapManager.unregister(element)
|
|
83
|
+
}
|
|
84
|
+
}, [tapThreshold])
|
|
85
|
+
const onTap = useCallback((handler) => {
|
|
86
|
+
return (event) => {
|
|
87
|
+
const data = tapManager.elements.get(elementRef.current)
|
|
88
|
+
if (!data) return
|
|
89
|
+
if (event.type === "touchend" && !data.touchMoved) {
|
|
90
|
+
handler(event)
|
|
91
|
+
} else if (event.type === "click" && !data.touchStarted) {
|
|
92
|
+
handler(event)
|
|
93
|
+
setIsPressed(true)
|
|
94
|
+
setTimeout(() => setIsPressed(false), 100)
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}, [])
|
|
98
|
+
return { onTap, isPressed, ref: elementRef }
|
|
99
|
+
}
|
|
100
|
+
export { useTap }
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import { InputProps } from "../../../components/ui/Input/types";
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
4
4
|
export { Input };
|
|
5
5
|
//# sourceMappingURL=input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,QAAA,MAAM,KAAK,qFAqLV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import * as React from "react";
|
|
14
|
-
import { inputVariants, useInput } from "./useInput";
|
|
15
14
|
import { cn } from "../../../lib/utils";
|
|
16
|
-
import { Icon } from "../icon";
|
|
17
15
|
import { getTextTranslation, useTranslation, } from "../../contexts/translation-context";
|
|
16
|
+
import { Icon } from "../icon";
|
|
17
|
+
import { inputVariants, useInput } from "./useInput";
|
|
18
18
|
const Input = React.forwardRef((_a, ref) => {
|
|
19
19
|
var { className, error = false, id, type, label, labelStyle, asChild, value, onChange, icon, iconUrl, iconPosition = "right", // Default to "right" for backward compatibility
|
|
20
20
|
iconColor, placeholder, placeholderFont, placeholderFontWeight, placeholderFontSize, placeholderTextAlign, placeholderTextColor, placeholderUpperCase, inputPadding, backgroundColor, borderRadius, inputBorderColor, borderSides, inputSpacing, inputActiveBorderColor } = _a, // New prop for active border color
|
|
@@ -51,20 +51,20 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
51
51
|
bottom: iconBottomPadding,
|
|
52
52
|
color: iconColorStyle,
|
|
53
53
|
} })), _jsx("style", { children: `
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
#${id}::placeholder {
|
|
55
|
+
color: ${placeholderTextColorStyle};
|
|
56
|
+
}
|
|
57
|
+
#${id} {
|
|
58
|
+
border-color: ${inputBorderColorStyle};
|
|
59
|
+
}
|
|
60
|
+
#${id}:focus {
|
|
61
|
+
border-color: ${inputActiveBorderColorStyle};
|
|
62
|
+
}
|
|
63
63
|
` }), _jsx("input", Object.assign({ placeholder: translatedPlaceholder || placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error, hasLabel: !!label }), className, "custom-placeholder-value"), "data-icon": !!icon, ref: ref }, props, { style: Object.assign(Object.assign({ paddingLeft: iconUrl &&
|
|
64
64
|
iconPosition === "left" &&
|
|
65
65
|
placeholderTextAlign === "center"
|
|
66
66
|
? undefined
|
|
67
|
-
: inputPaddingLeft, paddingRight: inputPaddingRight, fontFamily: placeholderFont, fontWeight: placeholderFontWeight, fontSize: `${placeholderFontSize}px`, textAlign: placeholderTextAlign, color: placeholderTextColorStyle, textTransform: placeholderUpperCase ? "uppercase" : undefined, paddingTop: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top, paddingBottom: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom, backgroundColor: inputBgColor }, borderStyle),
|
|
67
|
+
: inputPaddingLeft, paddingRight: inputPaddingRight, fontFamily: placeholderFont, fontWeight: placeholderFontWeight, fontSize: `${placeholderFontSize}px`, textAlign: placeholderTextAlign, color: placeholderTextColorStyle, textTransform: placeholderUpperCase ? "uppercase" : undefined, paddingTop: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top, paddingBottom: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom, backgroundColor: inputBgColor }, borderStyle), borderRadiusStyle) })), label ? (_jsx("label", Object.assign({ htmlFor: id, style: labelTextStyle, className: cn("absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] opacity-100 peer-placeholder-shown:opacity-0", iconPosition === "left" ? "start-10" : "start-4") }, { children: label }))) : null, (icon || iconUrl) && iconPosition === "right" && (_jsx(Icon, { name: icon, url: iconUrl, "data-error": error, size: "sm", className: cn("flex items-center absolute aspect-square fill-current z-10 icon ", {
|
|
68
68
|
"w-5": true,
|
|
69
69
|
"text-stateColors-error": error,
|
|
70
70
|
}), style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInput.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/useInput.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,IAAI,CAAA;AAElC,eAAO,MAAM,aAAa;;;mFAkBzB,CAAA;AAED,eAAO,MAAM,QAAQ,UACZ,KACL,UAAU,EACR,SAAS,GACT,MAAM,GACN,SAAS,GACT,cAAc,GACd,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,kBAAkB,GAClB,wBAAwB,GACxB,aAAa,GACb,cAAc,GACd,cAAc,GACd,sBAAsB,GACtB,YAAY,CACf
|
|
1
|
+
{"version":3,"file":"useInput.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/useInput.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,IAAI,CAAA;AAElC,eAAO,MAAM,aAAa;;;mFAkBzB,CAAA;AAED,eAAO,MAAM,QAAQ,UACZ,KACL,UAAU,EACR,SAAS,GACT,MAAM,GACN,SAAS,GACT,cAAc,GACd,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,kBAAkB,GAClB,wBAAwB,GACxB,aAAa,GACb,cAAc,GACd,cAAc,GACd,sBAAsB,GACtB,YAAY,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FF,CAAA"}
|
|
@@ -48,7 +48,7 @@ export const useInput = (props) => {
|
|
|
48
48
|
};
|
|
49
49
|
const borderRadiusStyle = borderRadius
|
|
50
50
|
? { borderRadius: `${borderRadius}px` }
|
|
51
|
-
: {};
|
|
51
|
+
: { borderRadius: "8px" };
|
|
52
52
|
const iconLeftPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) !== undefined
|
|
53
53
|
? `${inputPadding.left}px`
|
|
54
54
|
: `${DEFAULT_X_PADDING}px`;
|
|
@@ -23,7 +23,7 @@ export interface ApplePayButtonProps extends React.ButtonHTMLAttributes<HTMLButt
|
|
|
23
23
|
borderRadius?: string | undefined;
|
|
24
24
|
padding?: string | undefined;
|
|
25
25
|
boxSizing?: string | undefined;
|
|
26
|
-
}
|
|
26
|
+
};
|
|
27
27
|
onPaymentAuthorized?: (paymentData: ApplePayJS.ApplePayPayment) => Promise<boolean>;
|
|
28
28
|
onShippingContactSelected?: (shippingContact: ApplePayJS.ApplePayPaymentContact) => Promise<ApplePayJS.ApplePayShippingMethodUpdate>;
|
|
29
29
|
onShippingMethodSelected?: (shippingMethod: ApplePayJS.ApplePayShippingMethod) => Promise<ApplePayJS.ApplePayShippingMethodUpdate>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apple-pay-button.d.ts","sourceRoot":"","sources":["../../../components/ui/apple-pay-button.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,WAAW,GACX,MAAM,GACN,KAAK,GACL,WAAW,GACX,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,WAAW,GACX,SAAS,GACT,KAAK,GACL,QAAQ,CAAA;AAEZ,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,CAAA;AAErE,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,4BAA4B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IAChE,6BAA6B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IACjE,eAAe,EAAE,MAAM,CAAA;IACvB,uBAAuB,EAAE,OAAO,CAAA;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAAE,CAAA;IAC9D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,mBAAmB,CAAC,
|
|
1
|
+
{"version":3,"file":"apple-pay-button.d.ts","sourceRoot":"","sources":["../../../components/ui/apple-pay-button.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,WAAW,GACX,MAAM,GACN,KAAK,GACL,WAAW,GACX,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,WAAW,GACX,SAAS,GACT,KAAK,GACL,QAAQ,CAAA;AAEZ,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,CAAA;AAErE,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,4BAA4B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IAChE,6BAA6B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IACjE,eAAe,EAAE,MAAM,CAAA;IACvB,uBAAuB,EAAE,OAAO,CAAA;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAAE,CAAA;IAC9D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,mBAAmB,CAAC,EAAE;QACpB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QACjC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAC/B,CAAA;IACD,mBAAmB,CAAC,EAAE,CACpB,WAAW,EAAE,UAAU,CAAC,eAAe,KACpC,OAAO,CAAC,OAAO,CAAC,CAAA;IACrB,yBAAyB,CAAC,EAAE,CAC1B,eAAe,EAAE,UAAU,CAAC,sBAAsB,KAC/C,OAAO,CAAC,UAAU,CAAC,4BAA4B,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,CACzB,cAAc,EAAE,UAAU,CAAC,sBAAsB,KAC9C,OAAO,CAAC,UAAU,CAAC,4BAA4B,CAAC,CAAA;IACrD,kBAAkB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,KAAK,IAAI,CAAA;CACxD;AAED,QAAA,MAAM,cAAc;yWAoBjB,mBAAmB;;CAsKrB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AAuCD,QAAA,MAAM,cAAc;;8HAkGnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}
|
|
@@ -17,6 +17,8 @@ import { cva } from "class-variance-authority";
|
|
|
17
17
|
import { cn } from "../../lib/utils";
|
|
18
18
|
import { Icon } from "./icon";
|
|
19
19
|
import { Text } from "./text";
|
|
20
|
+
import { useTap } from "./tap";
|
|
21
|
+
import { useMergeRefs } from "../hooks/use-merge-refs";
|
|
20
22
|
const RadioGroup = React.forwardRef((_a, ref) => {
|
|
21
23
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
22
24
|
return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-4", className) }, props, { ref: ref })));
|
|
@@ -36,8 +38,10 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-s
|
|
|
36
38
|
});
|
|
37
39
|
const RadioGroupItemLabels = ({ key, label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-start" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-2" }, { children: subtext }))) : null] })));
|
|
38
40
|
const RadioGroupItem = React.forwardRef((_a, ref) => {
|
|
39
|
-
var { value, label = "", subtext, numberAmount = 0, onSelect, onClick, selected = false, className, variant = "default", key } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant", "key"]);
|
|
40
|
-
|
|
41
|
+
var { value, label = "", subtext, numberAmount = 0, onSelect = () => { }, onClick = () => { }, selected = false, className, variant = "default", key } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant", "key"]);
|
|
42
|
+
const { onTap, ref: tapRef } = useTap();
|
|
43
|
+
const mergedRef = useMergeRefs(ref, tapRef);
|
|
44
|
+
return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: mergedRef, value: value, onSelect: onSelect, checked: selected, onClick: onTap(onClick), className: cn("flex items-center justify-center active:opacity-70", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }) })), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) }))) })));
|
|
41
45
|
});
|
|
42
46
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
43
47
|
export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA6CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -15,6 +15,8 @@ import * as React from "react";
|
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
16
|
import { cn } from "../../lib/utils";
|
|
17
17
|
import { Text } from "./text";
|
|
18
|
+
import { useTap } from "./tap";
|
|
19
|
+
import { useMergeRefs } from "../hooks/use-merge-refs";
|
|
18
20
|
const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pageColor flex-row justify-center outline outline-1 rounded text-textColors-primaryColor outline-coreColors-dividingLines items-center", {
|
|
19
21
|
variants: {
|
|
20
22
|
selected: {
|
|
@@ -31,12 +33,14 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
|
|
|
31
33
|
},
|
|
32
34
|
});
|
|
33
35
|
const Selectors = React.forwardRef((_a, ref) => {
|
|
34
|
-
var { label, selected, disabled = false, disabledClick = true, className, onSelect, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "children"]);
|
|
35
|
-
|
|
36
|
+
var { label, selected, disabled = false, disabledClick = true, className, onSelect = () => { }, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "children"]);
|
|
37
|
+
const { onTap, ref: tapRef } = useTap();
|
|
38
|
+
const mergedRef = useMergeRefs(ref, tapRef);
|
|
39
|
+
return (_jsx("button", Object.assign({ disabled: disabled && disabledClick, onClick: onTap(onSelect), className: cn(selectorsVariants({
|
|
36
40
|
selected: selected,
|
|
37
41
|
className,
|
|
38
42
|
disabled,
|
|
39
|
-
}), "group", className), ref:
|
|
43
|
+
}), "group", className), ref: mergedRef }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
|
|
40
44
|
});
|
|
41
45
|
const SelectorContainer = ({ children, containerRef, className, height = "42px", }) => {
|
|
42
46
|
const [showFadeLeft, setShowFadeLeft] = React.useState(false);
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tapcart/mobile-components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.63",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"style": "dist/styles.css",
|
|
@@ -11,20 +11,6 @@
|
|
|
11
11
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
12
12
|
"author": "Tapcart Inc.",
|
|
13
13
|
"homepage": "https://tapcart.com",
|
|
14
|
-
"scripts": {
|
|
15
|
-
"clean": "rm -rf dist node_modules",
|
|
16
|
-
"lint": "eslint \"**/*.ts*\"",
|
|
17
|
-
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
18
|
-
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
19
|
-
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
20
|
-
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
21
|
-
"dev:ts": "tsc -w -p tsconfig.json",
|
|
22
|
-
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
23
|
-
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
24
|
-
"test": "jest",
|
|
25
|
-
"test:silent": "jest --silent",
|
|
26
|
-
"test:watch": "jest --watch"
|
|
27
|
-
},
|
|
28
14
|
"peerDependencies": {
|
|
29
15
|
"react": "^17.0.2 || ^18.0.0",
|
|
30
16
|
"react-dom": "^17.0.2 || ^18.0.0"
|
|
@@ -37,20 +23,20 @@
|
|
|
37
23
|
"@types/pluralize": "^0.0.33",
|
|
38
24
|
"@types/react": "^18.2.0",
|
|
39
25
|
"@types/react-dom": "^18.2.0",
|
|
40
|
-
"app-studio-types": "workspace:*",
|
|
41
26
|
"autoprefixer": "^10.4.14",
|
|
42
27
|
"chokidar-cli": "^3.0.0",
|
|
43
28
|
"concurrently": "^8.2.2",
|
|
44
29
|
"eslint": "^7.32.0",
|
|
45
|
-
"eslint-config-custom": "workspace:*",
|
|
46
30
|
"jest": "^29.7.0",
|
|
47
31
|
"jest-environment-jsdom": "^29.7.0",
|
|
48
32
|
"postcss": "^8.4.24",
|
|
49
33
|
"tailwindcss": "^3.3.2",
|
|
50
34
|
"ts-jest": "^29.2.5",
|
|
51
35
|
"tsc-alias": "^1.8.10",
|
|
52
|
-
"
|
|
53
|
-
"
|
|
36
|
+
"typescript": "^4.5.2",
|
|
37
|
+
"app-studio-types": "0.0.7",
|
|
38
|
+
"tsconfig": "0.0.0",
|
|
39
|
+
"eslint-config-custom": "0.0.0"
|
|
54
40
|
},
|
|
55
41
|
"dependencies": {
|
|
56
42
|
"@radix-ui/react-accordion": "^1.1.2",
|
|
@@ -90,5 +76,19 @@
|
|
|
90
76
|
"tailwind-merge": "^1.13.2",
|
|
91
77
|
"tailwindcss-animate": "^1.0.6",
|
|
92
78
|
"vaul": "0.9.1"
|
|
79
|
+
},
|
|
80
|
+
"scripts": {
|
|
81
|
+
"clean": "rm -rf dist node_modules",
|
|
82
|
+
"lint": "eslint \"**/*.ts*\"",
|
|
83
|
+
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
84
|
+
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
85
|
+
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
86
|
+
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
87
|
+
"dev:ts": "tsc -w -p tsconfig.json",
|
|
88
|
+
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
89
|
+
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
90
|
+
"test": "jest",
|
|
91
|
+
"test:silent": "jest --silent",
|
|
92
|
+
"test:watch": "jest --watch"
|
|
93
93
|
}
|
|
94
|
-
}
|
|
94
|
+
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
type Customer = {
|
|
2
|
-
isAuthenticated: boolean;
|
|
3
|
-
};
|
|
4
|
-
type UseCustomerProps = {};
|
|
5
|
-
type UseCustomerReturn = {
|
|
6
|
-
customer: Customer;
|
|
7
|
-
};
|
|
8
|
-
export declare const useCustomer: (props: UseCustomerProps | null) => UseCustomerReturn;
|
|
9
|
-
export {};
|
|
10
|
-
//# sourceMappingURL=use-customer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-customer.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-customer.ts"],"names":[],"mappings":"AAWA,KAAK,QAAQ,GAAG;IACd,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAGD,KAAK,gBAAgB,GAAG,EAAE,CAAA;AAE1B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,UACf,gBAAgB,GAAG,IAAI,KAC7B,iBAuBF,CAAA"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useState, useEffect } from "react";
|
|
3
|
-
// @ts-ignore -- webbridge-react is not typed (yet)
|
|
4
|
-
import { useActions } from "@tapcart/webbridge-react";
|
|
5
|
-
export const useCustomer = (props) => {
|
|
6
|
-
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
7
|
-
const [customer, setCustomer] = useState({});
|
|
8
|
-
const actions = useActions();
|
|
9
|
-
// verify customer
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
try {
|
|
12
|
-
// webbridge method to get customerIdentity
|
|
13
|
-
actions.getCustomerIdentity(null, {
|
|
14
|
-
onSuccess: (user) => setIsAuthenticated(!!(user === null || user === void 0 ? void 0 : user.email)),
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
catch (e) {
|
|
18
|
-
console.log("unable to get customer identity ", e);
|
|
19
|
-
}
|
|
20
|
-
}, [actions]);
|
|
21
|
-
return {
|
|
22
|
-
customer: Object.assign({ isAuthenticated }, customer),
|
|
23
|
-
};
|
|
24
|
-
};
|