@stamprally/ui 0.2.1 → 0.4.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/index.cjs +271 -90
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +207 -0
- package/dist/index.d.cts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +272 -91
- package/dist/index.js.map +1 -1
- package/package.json +6 -7
- package/src/styles.css +0 -45
package/dist/index.css
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
.stamp-sheet,
|
|
2
|
+
:where(.stamprally-sheet, .stamprally-rewards) {
|
|
3
|
+
color: var(--stamprally-text, #352f25);
|
|
4
|
+
background: var(--stamprally-background, transparent);
|
|
5
|
+
}
|
|
6
|
+
.stamp-sheet {
|
|
7
|
+
display: grid;
|
|
8
|
+
gap: 1rem;
|
|
9
|
+
padding: 1.5rem;
|
|
10
|
+
border: 1px solid color-mix(in srgb, var(--stamp-primary, #9e551e) 35%, #fff);
|
|
11
|
+
border-radius: 1.5rem;
|
|
12
|
+
color: var(--stamp-text, #352f25);
|
|
13
|
+
font-family: var(--stamp-font-family, Georgia, "Times New Roman", serif);
|
|
14
|
+
background: var(--stamp-bg, #fbf4df);
|
|
15
|
+
}
|
|
16
|
+
.stamp-sheet__header,
|
|
17
|
+
.stamp-sheet__progress-label,
|
|
18
|
+
.stamp-slot__topline {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: baseline;
|
|
21
|
+
justify-content: space-between;
|
|
22
|
+
gap: 1rem;
|
|
23
|
+
}
|
|
24
|
+
.stamp-sheet__header h2 {
|
|
25
|
+
margin: 0;
|
|
26
|
+
}
|
|
27
|
+
.stamp-sheet__progress-label {
|
|
28
|
+
font-size: 0.85rem;
|
|
29
|
+
}
|
|
30
|
+
.stamp-sheet__progress-track {
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
height: 0.5rem;
|
|
33
|
+
border-radius: 999px;
|
|
34
|
+
background: color-mix(in srgb, var(--stamp-primary, #9e551e) 15%, #fff);
|
|
35
|
+
}
|
|
36
|
+
.stamp-sheet__progress-fill {
|
|
37
|
+
height: 100%;
|
|
38
|
+
border-radius: inherit;
|
|
39
|
+
background: var(--stamp-primary, #9e551e);
|
|
40
|
+
}
|
|
41
|
+
.stamp-sheet__grid {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-columns: repeat(var(--stamp-grid-cols, 3), minmax(0, 1fr));
|
|
44
|
+
gap: 1rem;
|
|
45
|
+
}
|
|
46
|
+
.stamp-slot {
|
|
47
|
+
position: relative;
|
|
48
|
+
color: var(--stamprally-text, #352f25);
|
|
49
|
+
display: grid;
|
|
50
|
+
gap: 0.35rem;
|
|
51
|
+
min-height: 10rem;
|
|
52
|
+
padding: 1rem;
|
|
53
|
+
background: var(--stamprally-card, #fff);
|
|
54
|
+
border: 2px solid var(--stamprally-primary, #9e551e);
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
}
|
|
57
|
+
.stamp-slot:focus-visible,
|
|
58
|
+
.stamprally-modal button:focus-visible,
|
|
59
|
+
.stamprally-rewards button:focus-visible,
|
|
60
|
+
.stamprally-rewards input:focus-visible {
|
|
61
|
+
outline: 3px solid currentColor;
|
|
62
|
+
outline-offset: 3px;
|
|
63
|
+
}
|
|
64
|
+
.stamp-slot:disabled,
|
|
65
|
+
.stamprally-modal button:disabled,
|
|
66
|
+
.stamprally-rewards button:disabled {
|
|
67
|
+
cursor: not-allowed;
|
|
68
|
+
opacity: 0.6;
|
|
69
|
+
}
|
|
70
|
+
.stamp-slot__number,
|
|
71
|
+
.stamp-slot__state,
|
|
72
|
+
.stamp-slot__condition {
|
|
73
|
+
font-size: 0.72rem;
|
|
74
|
+
font-weight: 700;
|
|
75
|
+
}
|
|
76
|
+
.stamp-slot__watermark {
|
|
77
|
+
font-size: 2rem;
|
|
78
|
+
opacity: 0.35;
|
|
79
|
+
}
|
|
80
|
+
.stamp-slot__name {
|
|
81
|
+
font-weight: 800;
|
|
82
|
+
}
|
|
83
|
+
.stamp-slot__condition {
|
|
84
|
+
opacity: 0.75;
|
|
85
|
+
}
|
|
86
|
+
.stamp-imprint {
|
|
87
|
+
display: grid;
|
|
88
|
+
place-items: center;
|
|
89
|
+
padding: 0.35rem;
|
|
90
|
+
border: 2px solid var(--stamp-completed-color, #b33c2e);
|
|
91
|
+
color: var(--stamp-completed-color, #b33c2e);
|
|
92
|
+
transform: rotate(-4deg);
|
|
93
|
+
}
|
|
94
|
+
.stamp-imprint__inner {
|
|
95
|
+
display: grid;
|
|
96
|
+
gap: 0.1rem;
|
|
97
|
+
text-align: center;
|
|
98
|
+
}
|
|
99
|
+
.stamp-slot--locked {
|
|
100
|
+
opacity: var(--stamp-unclaimed-opacity, 0.55);
|
|
101
|
+
cursor: not-allowed;
|
|
102
|
+
}
|
|
103
|
+
.stamp-slot--animating {
|
|
104
|
+
animation: stamp-press 0.6s ease-out;
|
|
105
|
+
}
|
|
106
|
+
.stamp-press {
|
|
107
|
+
animation: stamp-press 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
|
|
108
|
+
transform-origin: center;
|
|
109
|
+
}
|
|
110
|
+
.stamprally-modal {
|
|
111
|
+
position: fixed;
|
|
112
|
+
inset: 0;
|
|
113
|
+
display: grid;
|
|
114
|
+
place-items: center;
|
|
115
|
+
padding: 1rem;
|
|
116
|
+
background: #0008;
|
|
117
|
+
}
|
|
118
|
+
.stamprally-modal__panel {
|
|
119
|
+
max-width: 32rem;
|
|
120
|
+
width: 100%;
|
|
121
|
+
padding: 1.5rem;
|
|
122
|
+
background: var(--stamprally-card, #fff);
|
|
123
|
+
}
|
|
124
|
+
@keyframes stamp-press {
|
|
125
|
+
0% {
|
|
126
|
+
transform: scale(1.18) rotate(-8deg);
|
|
127
|
+
}
|
|
128
|
+
45% {
|
|
129
|
+
transform: scale(0.94) rotate(3deg);
|
|
130
|
+
}
|
|
131
|
+
72% {
|
|
132
|
+
transform: scale(1.04) rotate(-1deg);
|
|
133
|
+
}
|
|
134
|
+
100% {
|
|
135
|
+
transform: scale(1) rotate(0);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
.stamp-sheet__complete-mark {
|
|
139
|
+
position: relative;
|
|
140
|
+
padding: 0.75rem 1rem;
|
|
141
|
+
border: 2px solid var(--stamp-primary, #9e551e);
|
|
142
|
+
border-radius: 999px;
|
|
143
|
+
text-align: center;
|
|
144
|
+
font-weight: 800;
|
|
145
|
+
animation: achievement-pop 0.65s cubic-bezier(0.2, 1.4, 0.4, 1);
|
|
146
|
+
}
|
|
147
|
+
.stamp-sheet__complete-mark::before,
|
|
148
|
+
.stamp-sheet__complete-mark::after {
|
|
149
|
+
position: absolute;
|
|
150
|
+
inset: 50% auto auto 50%;
|
|
151
|
+
width: 0.45rem;
|
|
152
|
+
height: 0.45rem;
|
|
153
|
+
content: "";
|
|
154
|
+
background: var(--stamp-primary, #9e551e);
|
|
155
|
+
box-shadow:
|
|
156
|
+
-4rem -1rem #d64b3c,
|
|
157
|
+
4rem -0.75rem #e6a23c,
|
|
158
|
+
-3rem 1rem #4e8f78,
|
|
159
|
+
3.5rem 1.1rem #6574b8;
|
|
160
|
+
animation: confetti-burst 0.7s ease-out both;
|
|
161
|
+
}
|
|
162
|
+
.stamp-sheet__complete-mark::after {
|
|
163
|
+
box-shadow:
|
|
164
|
+
-2.5rem -1.5rem #e6a23c,
|
|
165
|
+
2.5rem -1.4rem #4e8f78,
|
|
166
|
+
-4.5rem 0.4rem #6574b8,
|
|
167
|
+
4.5rem 0.5rem #d64b3c;
|
|
168
|
+
animation-delay: 0.08s;
|
|
169
|
+
}
|
|
170
|
+
@keyframes achievement-pop {
|
|
171
|
+
0% {
|
|
172
|
+
opacity: 0;
|
|
173
|
+
transform: scale(0.7);
|
|
174
|
+
}
|
|
175
|
+
70% {
|
|
176
|
+
transform: scale(1.06);
|
|
177
|
+
}
|
|
178
|
+
100% {
|
|
179
|
+
opacity: 1;
|
|
180
|
+
transform: scale(1);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
@keyframes confetti-burst {
|
|
184
|
+
0% {
|
|
185
|
+
opacity: 0;
|
|
186
|
+
transform: translate(-50%, -50%) scale(0.5);
|
|
187
|
+
}
|
|
188
|
+
100% {
|
|
189
|
+
opacity: 1;
|
|
190
|
+
transform: translate(-50%, -50%) scale(1);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
@media (prefers-reduced-motion: reduce) {
|
|
194
|
+
*,
|
|
195
|
+
*::before,
|
|
196
|
+
*::after {
|
|
197
|
+
scroll-behavior: auto;
|
|
198
|
+
animation-duration: 0.01ms;
|
|
199
|
+
animation-iteration-count: 1;
|
|
200
|
+
transition-duration: 0.01ms;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
@media (max-width: 640px) {
|
|
204
|
+
.stamp-sheet__grid {
|
|
205
|
+
grid-template-columns: repeat(var(--stamp-grid-cols-mobile, 2), minmax(0, 1fr));
|
|
206
|
+
}
|
|
207
|
+
}
|
package/dist/index.d.cts
CHANGED
|
@@ -5,6 +5,7 @@ interface StampPresentation {
|
|
|
5
5
|
readonly label?: string;
|
|
6
6
|
readonly icon?: string;
|
|
7
7
|
readonly ink?: "vermilion" | "indigo";
|
|
8
|
+
readonly channel?: "instant" | "qr" | "nfc" | "geo";
|
|
8
9
|
}
|
|
9
10
|
interface StampSlotProps {
|
|
10
11
|
readonly stamp: SpotItem;
|
|
@@ -16,9 +17,10 @@ interface StampSlotProps {
|
|
|
16
17
|
readonly disabled?: boolean;
|
|
17
18
|
readonly slotShape?: SlotShape;
|
|
18
19
|
readonly locale?: SupportedLocale;
|
|
20
|
+
readonly statusText?: string;
|
|
19
21
|
readonly onSelect?: () => void;
|
|
20
22
|
}
|
|
21
|
-
declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, onSelect, }: StampSlotProps): react.JSX.Element;
|
|
23
|
+
declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, statusText, onSelect, }: StampSlotProps): react.JSX.Element;
|
|
22
24
|
interface StampSheetProps {
|
|
23
25
|
readonly title?: LocalizedText;
|
|
24
26
|
readonly config: RallyConfig;
|
|
@@ -57,12 +59,14 @@ interface RewardPanelProps {
|
|
|
57
59
|
readonly states: ReadonlyArray<RewardState>;
|
|
58
60
|
readonly locale?: SupportedLocale;
|
|
59
61
|
readonly isPending?: boolean;
|
|
62
|
+
readonly open?: boolean;
|
|
63
|
+
readonly onClose?: () => void;
|
|
60
64
|
readonly onRedeem: (rewardId: string, options?: {
|
|
61
65
|
readonly passcode?: string;
|
|
62
66
|
readonly staffId?: string;
|
|
63
67
|
}) => Promise<ConsumeResult>;
|
|
64
68
|
readonly onNotify?: (ok: boolean, message: string) => void;
|
|
65
69
|
}
|
|
66
|
-
declare function RewardPanel({ rewards, states, locale, isPending, onRedeem, onNotify, }: RewardPanelProps): react.JSX.Element;
|
|
70
|
+
declare function RewardPanel({ rewards, states, locale, isPending, open, onClose, onRedeem, onNotify, }: RewardPanelProps): react.JSX.Element | null;
|
|
67
71
|
|
|
68
72
|
export { type AcquisitionFeedback, RewardPanel, type RewardPanelProps, StampModal, type StampModalProps, type StampPresentation, StampSheet, type StampSheetProps, StampSlot, type StampSlotProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ interface StampPresentation {
|
|
|
5
5
|
readonly label?: string;
|
|
6
6
|
readonly icon?: string;
|
|
7
7
|
readonly ink?: "vermilion" | "indigo";
|
|
8
|
+
readonly channel?: "instant" | "qr" | "nfc" | "geo";
|
|
8
9
|
}
|
|
9
10
|
interface StampSlotProps {
|
|
10
11
|
readonly stamp: SpotItem;
|
|
@@ -16,9 +17,10 @@ interface StampSlotProps {
|
|
|
16
17
|
readonly disabled?: boolean;
|
|
17
18
|
readonly slotShape?: SlotShape;
|
|
18
19
|
readonly locale?: SupportedLocale;
|
|
20
|
+
readonly statusText?: string;
|
|
19
21
|
readonly onSelect?: () => void;
|
|
20
22
|
}
|
|
21
|
-
declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, onSelect, }: StampSlotProps): react.JSX.Element;
|
|
23
|
+
declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, statusText, onSelect, }: StampSlotProps): react.JSX.Element;
|
|
22
24
|
interface StampSheetProps {
|
|
23
25
|
readonly title?: LocalizedText;
|
|
24
26
|
readonly config: RallyConfig;
|
|
@@ -57,12 +59,14 @@ interface RewardPanelProps {
|
|
|
57
59
|
readonly states: ReadonlyArray<RewardState>;
|
|
58
60
|
readonly locale?: SupportedLocale;
|
|
59
61
|
readonly isPending?: boolean;
|
|
62
|
+
readonly open?: boolean;
|
|
63
|
+
readonly onClose?: () => void;
|
|
60
64
|
readonly onRedeem: (rewardId: string, options?: {
|
|
61
65
|
readonly passcode?: string;
|
|
62
66
|
readonly staffId?: string;
|
|
63
67
|
}) => Promise<ConsumeResult>;
|
|
64
68
|
readonly onNotify?: (ok: boolean, message: string) => void;
|
|
65
69
|
}
|
|
66
|
-
declare function RewardPanel({ rewards, states, locale, isPending, onRedeem, onNotify, }: RewardPanelProps): react.JSX.Element;
|
|
70
|
+
declare function RewardPanel({ rewards, states, locale, isPending, open, onClose, onRedeem, onNotify, }: RewardPanelProps): react.JSX.Element | null;
|
|
67
71
|
|
|
68
72
|
export { type AcquisitionFeedback, RewardPanel, type RewardPanelProps, StampModal, type StampModalProps, type StampPresentation, StampSheet, type StampSheetProps, StampSlot, type StampSlotProps };
|