@snacky/ui 0.5.8 → 0.6.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 +168 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +199 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +55 -1
- package/dist/index.d.ts +55 -1
- package/dist/index.js +166 -39
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -26,6 +26,7 @@ __export(index_exports, {
|
|
|
26
26
|
Avatar: () => Avatar,
|
|
27
27
|
BottomSheet: () => BottomSheet,
|
|
28
28
|
Button: () => Button,
|
|
29
|
+
Calendar: () => Calendar,
|
|
29
30
|
Callout: () => Callout,
|
|
30
31
|
ChatInput: () => ChatInput,
|
|
31
32
|
Checkbox: () => Checkbox,
|
|
@@ -52,6 +53,7 @@ __export(index_exports, {
|
|
|
52
53
|
SnackyIcons: () => SnackyIcons,
|
|
53
54
|
SoldOutBadge: () => SoldOutBadge,
|
|
54
55
|
SquareBanner: () => SquareBanner,
|
|
56
|
+
Stepper: () => Stepper,
|
|
55
57
|
TabRow: () => TabRow,
|
|
56
58
|
TextField: () => TextField,
|
|
57
59
|
Toggle: () => Toggle,
|
|
@@ -1026,14 +1028,139 @@ function Section({ title, onAction, children, className }) {
|
|
|
1026
1028
|
] });
|
|
1027
1029
|
}
|
|
1028
1030
|
|
|
1029
|
-
// src/components/
|
|
1031
|
+
// src/components/Stepper/Stepper.tsx
|
|
1030
1032
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1033
|
+
function Stepper({ steps, className }) {
|
|
1034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1035
|
+
"li",
|
|
1036
|
+
{
|
|
1037
|
+
className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
|
|
1038
|
+
children: [
|
|
1039
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(close, { width: 12, height: 12 }) }),
|
|
1040
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "snacky-stepper__body", children: [
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
|
|
1042
|
+
step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
|
|
1043
|
+
] })
|
|
1044
|
+
]
|
|
1045
|
+
},
|
|
1046
|
+
`${step.label}-${i}`
|
|
1047
|
+
)) });
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
// src/components/Calendar/Calendar.tsx
|
|
1051
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1052
|
+
var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
1053
|
+
var MONTHS = [
|
|
1054
|
+
"January",
|
|
1055
|
+
"February",
|
|
1056
|
+
"March",
|
|
1057
|
+
"April",
|
|
1058
|
+
"May",
|
|
1059
|
+
"June",
|
|
1060
|
+
"July",
|
|
1061
|
+
"August",
|
|
1062
|
+
"September",
|
|
1063
|
+
"October",
|
|
1064
|
+
"November",
|
|
1065
|
+
"December"
|
|
1066
|
+
];
|
|
1067
|
+
var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1068
|
+
function buildGrid(month) {
|
|
1069
|
+
const first = new Date(month.getFullYear(), month.getMonth(), 1);
|
|
1070
|
+
const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
|
|
1071
|
+
const start = new Date(first);
|
|
1072
|
+
start.setDate(1 - first.getDay());
|
|
1073
|
+
const end = new Date(last);
|
|
1074
|
+
end.setDate(last.getDate() + (6 - last.getDay()));
|
|
1075
|
+
const days = [];
|
|
1076
|
+
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
|
1077
|
+
days.push(new Date(d));
|
|
1078
|
+
}
|
|
1079
|
+
return days;
|
|
1080
|
+
}
|
|
1081
|
+
function Calendar({
|
|
1082
|
+
month,
|
|
1083
|
+
onPrevMonth,
|
|
1084
|
+
onNextMonth,
|
|
1085
|
+
selected,
|
|
1086
|
+
onSelect,
|
|
1087
|
+
marked = [],
|
|
1088
|
+
actionLabel = "Select Date",
|
|
1089
|
+
onAction,
|
|
1090
|
+
className
|
|
1091
|
+
}) {
|
|
1092
|
+
const days = buildGrid(month);
|
|
1093
|
+
const range = Array.isArray(selected) ? selected : null;
|
|
1094
|
+
const single = selected instanceof Date ? selected : null;
|
|
1095
|
+
const [lo, hi] = range ? [range[0], range[1]].sort((a, b) => a.getTime() - b.getTime()) : [null, null];
|
|
1096
|
+
const isEnd = (d) => single && sameDay(d, single) || lo && hi && (sameDay(d, lo) || sameDay(d, hi));
|
|
1097
|
+
const isInRange = (d) => lo && hi && d > lo && d < hi;
|
|
1098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("snacky-calendar", className), children: [
|
|
1099
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-calendar__header", children: [
|
|
1100
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1101
|
+
"button",
|
|
1102
|
+
{
|
|
1103
|
+
type: "button",
|
|
1104
|
+
className: "snacky-calendar__nav",
|
|
1105
|
+
onClick: onPrevMonth,
|
|
1106
|
+
"aria-label": "Previous month",
|
|
1107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(back, { width: 24, height: 24 })
|
|
1108
|
+
}
|
|
1109
|
+
),
|
|
1110
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "snacky-calendar__label", children: [
|
|
1111
|
+
MONTHS[month.getMonth()],
|
|
1112
|
+
" ",
|
|
1113
|
+
month.getFullYear()
|
|
1114
|
+
] }),
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1116
|
+
"button",
|
|
1117
|
+
{
|
|
1118
|
+
type: "button",
|
|
1119
|
+
className: "snacky-calendar__nav snacky-calendar__nav--next",
|
|
1120
|
+
onClick: onNextMonth,
|
|
1121
|
+
"aria-label": "Next month",
|
|
1122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(back, { width: 24, height: 24 })
|
|
1123
|
+
}
|
|
1124
|
+
)
|
|
1125
|
+
] }),
|
|
1126
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-calendar__grid", children: [
|
|
1127
|
+
WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
|
|
1128
|
+
days.map((d, i) => {
|
|
1129
|
+
const outside = d.getMonth() !== month.getMonth();
|
|
1130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1131
|
+
"button",
|
|
1132
|
+
{
|
|
1133
|
+
type: "button",
|
|
1134
|
+
className: cx(
|
|
1135
|
+
"snacky-calendar__day",
|
|
1136
|
+
outside && "snacky-calendar__day--outside",
|
|
1137
|
+
isInRange(d) && "snacky-calendar__day--in-range",
|
|
1138
|
+
isEnd(d) && "snacky-calendar__day--selected"
|
|
1139
|
+
),
|
|
1140
|
+
onClick: () => onSelect?.(d),
|
|
1141
|
+
disabled: outside,
|
|
1142
|
+
"aria-current": isEnd(d) ? "date" : void 0,
|
|
1143
|
+
children: [
|
|
1144
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
|
|
1145
|
+
marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__marker" })
|
|
1146
|
+
]
|
|
1147
|
+
},
|
|
1148
|
+
i
|
|
1149
|
+
);
|
|
1150
|
+
})
|
|
1151
|
+
] }),
|
|
1152
|
+
onAction && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
|
|
1153
|
+
] });
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
// src/components/Avatar/Avatar.tsx
|
|
1157
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1031
1158
|
function Avatar({ src, alt, size = "md", className }) {
|
|
1032
|
-
return /* @__PURE__ */ (0,
|
|
1159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
|
|
1033
1160
|
}
|
|
1034
1161
|
|
|
1035
1162
|
// src/components/Illustration/Illustration.tsx
|
|
1036
|
-
var
|
|
1163
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1037
1164
|
var SIZE = {
|
|
1038
1165
|
empty: { width: 268, height: 200 },
|
|
1039
1166
|
createAccount: { width: 360, height: 240 },
|
|
@@ -1043,54 +1170,54 @@ var SIZE = {
|
|
|
1043
1170
|
};
|
|
1044
1171
|
function Illustration({ variant, src, alt, className }) {
|
|
1045
1172
|
const { width, height } = SIZE[variant];
|
|
1046
|
-
return /* @__PURE__ */ (0,
|
|
1173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
|
|
1047
1174
|
}
|
|
1048
1175
|
|
|
1049
1176
|
// src/components/ProductImage/ProductImage.tsx
|
|
1050
|
-
var
|
|
1177
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1051
1178
|
function ProductImage({ src, alt, usage, sold = false, className }) {
|
|
1052
|
-
return /* @__PURE__ */ (0,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1054
|
-
sold && /* @__PURE__ */ (0,
|
|
1179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
|
|
1180
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
|
|
1181
|
+
sold && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
|
|
1055
1182
|
] });
|
|
1056
1183
|
}
|
|
1057
1184
|
|
|
1058
1185
|
// src/components/ProductCard/ProductCard.tsx
|
|
1059
|
-
var
|
|
1186
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1060
1187
|
function ProductCard(props) {
|
|
1061
1188
|
if (props.variant === "details") {
|
|
1062
1189
|
const { productName: productName2, imageUrl: imageUrl2, price: price2, rating: rating2, originalPrice: originalPrice2, discountLabel: discountLabel2, ratingCount, favorited, onFavoriteClick, onShareClick, onChatClick, sold, ratingIcon: ratingIcon2, favoriteIcon, shareIcon, chatIcon, onClick: onClick2, className: className2 } = props;
|
|
1063
|
-
return /* @__PURE__ */ (0,
|
|
1064
|
-
/* @__PURE__ */ (0,
|
|
1065
|
-
/* @__PURE__ */ (0,
|
|
1066
|
-
sold && /* @__PURE__ */ (0,
|
|
1190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
|
|
1191
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
|
|
1192
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
|
|
1193
|
+
sold && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SoldOutBadge, {}) })
|
|
1067
1194
|
] }) }),
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1072
|
-
originalPrice2 && /* @__PURE__ */ (0,
|
|
1073
|
-
discountLabel2 && /* @__PURE__ */ (0,
|
|
1195
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__details-body", children: [
|
|
1196
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
|
|
1197
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__price-row", children: [
|
|
1198
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
|
|
1199
|
+
originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
|
|
1200
|
+
discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscountTag, { label: discountLabel2 })
|
|
1074
1201
|
] }),
|
|
1075
|
-
/* @__PURE__ */ (0,
|
|
1076
|
-
/* @__PURE__ */ (0,
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
|
|
1203
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "snacky-product-card__rating", children: [
|
|
1204
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(star, { width: 16, height: 16 }) }),
|
|
1078
1205
|
rating2,
|
|
1079
1206
|
" (",
|
|
1080
1207
|
ratingCount,
|
|
1081
1208
|
")"
|
|
1082
1209
|
] }),
|
|
1083
|
-
/* @__PURE__ */ (0,
|
|
1084
|
-
/* @__PURE__ */ (0,
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1086
|
-
/* @__PURE__ */ (0,
|
|
1210
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
|
|
1212
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
|
|
1213
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
|
|
1087
1214
|
] })
|
|
1088
1215
|
] })
|
|
1089
1216
|
] })
|
|
1090
1217
|
] });
|
|
1091
1218
|
}
|
|
1092
1219
|
const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
|
|
1093
|
-
return /* @__PURE__ */ (0,
|
|
1220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1094
1221
|
"div",
|
|
1095
1222
|
{
|
|
1096
1223
|
className: cx("snacky-product-card", "snacky-product-card--list", className),
|
|
@@ -1099,25 +1226,25 @@ function ProductCard(props) {
|
|
|
1099
1226
|
onClick,
|
|
1100
1227
|
onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
|
|
1101
1228
|
children: [
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
/* @__PURE__ */ (0,
|
|
1104
|
-
discountLabel && /* @__PURE__ */ (0,
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
|
|
1231
|
+
discountLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscountTag, { label: discountLabel }) })
|
|
1105
1232
|
] }),
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
/* @__PURE__ */ (0,
|
|
1108
|
-
/* @__PURE__ */ (0,
|
|
1109
|
-
originalPrice && /* @__PURE__ */ (0,
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "snacky-product-card__name", children: productName }),
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__price-row", children: [
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__price", children: price }),
|
|
1236
|
+
originalPrice && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
|
|
1110
1237
|
] }),
|
|
1111
|
-
/* @__PURE__ */ (0,
|
|
1112
|
-
/* @__PURE__ */ (0,
|
|
1113
|
-
/* @__PURE__ */ (0,
|
|
1238
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "snacky-product-card__rating", children: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(star, { width: 16, height: 16 }) }),
|
|
1114
1241
|
rating
|
|
1115
1242
|
] }),
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1117
1244
|
IconButton,
|
|
1118
1245
|
{
|
|
1119
1246
|
variant: "primary",
|
|
1120
|
-
icon: cartIcon ?? /* @__PURE__ */ (0,
|
|
1247
|
+
icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(cartAdd, { width: 16, height: 16 }),
|
|
1121
1248
|
onClick: (e) => {
|
|
1122
1249
|
e.stopPropagation();
|
|
1123
1250
|
onAddToCart();
|
|
@@ -1138,6 +1265,7 @@ function ProductCard(props) {
|
|
|
1138
1265
|
Avatar,
|
|
1139
1266
|
BottomSheet,
|
|
1140
1267
|
Button,
|
|
1268
|
+
Calendar,
|
|
1141
1269
|
Callout,
|
|
1142
1270
|
ChatInput,
|
|
1143
1271
|
Checkbox,
|
|
@@ -1164,6 +1292,7 @@ function ProductCard(props) {
|
|
|
1164
1292
|
SnackyIcons,
|
|
1165
1293
|
SoldOutBadge,
|
|
1166
1294
|
SquareBanner,
|
|
1295
|
+
Stepper,
|
|
1167
1296
|
TabRow,
|
|
1168
1297
|
TextField,
|
|
1169
1298
|
Toggle,
|