@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.js
CHANGED
|
@@ -969,14 +969,139 @@ function Section({ title, onAction, children, className }) {
|
|
|
969
969
|
] });
|
|
970
970
|
}
|
|
971
971
|
|
|
972
|
+
// src/components/Stepper/Stepper.tsx
|
|
973
|
+
import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
974
|
+
function Stepper({ steps, className }) {
|
|
975
|
+
return /* @__PURE__ */ jsx27("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs20(
|
|
976
|
+
"li",
|
|
977
|
+
{
|
|
978
|
+
className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
|
|
979
|
+
children: [
|
|
980
|
+
/* @__PURE__ */ jsx27("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ jsx27(close, { width: 12, height: 12 }) }),
|
|
981
|
+
/* @__PURE__ */ jsxs20("span", { className: "snacky-stepper__body", children: [
|
|
982
|
+
/* @__PURE__ */ jsx27("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
|
|
983
|
+
step.timestamp && /* @__PURE__ */ jsx27("span", { className: "snacky-stepper__time", children: step.timestamp })
|
|
984
|
+
] })
|
|
985
|
+
]
|
|
986
|
+
},
|
|
987
|
+
`${step.label}-${i}`
|
|
988
|
+
)) });
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
// src/components/Calendar/Calendar.tsx
|
|
992
|
+
import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
993
|
+
var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
994
|
+
var MONTHS = [
|
|
995
|
+
"January",
|
|
996
|
+
"February",
|
|
997
|
+
"March",
|
|
998
|
+
"April",
|
|
999
|
+
"May",
|
|
1000
|
+
"June",
|
|
1001
|
+
"July",
|
|
1002
|
+
"August",
|
|
1003
|
+
"September",
|
|
1004
|
+
"October",
|
|
1005
|
+
"November",
|
|
1006
|
+
"December"
|
|
1007
|
+
];
|
|
1008
|
+
var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1009
|
+
function buildGrid(month) {
|
|
1010
|
+
const first = new Date(month.getFullYear(), month.getMonth(), 1);
|
|
1011
|
+
const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
|
|
1012
|
+
const start = new Date(first);
|
|
1013
|
+
start.setDate(1 - first.getDay());
|
|
1014
|
+
const end = new Date(last);
|
|
1015
|
+
end.setDate(last.getDate() + (6 - last.getDay()));
|
|
1016
|
+
const days = [];
|
|
1017
|
+
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
|
1018
|
+
days.push(new Date(d));
|
|
1019
|
+
}
|
|
1020
|
+
return days;
|
|
1021
|
+
}
|
|
1022
|
+
function Calendar({
|
|
1023
|
+
month,
|
|
1024
|
+
onPrevMonth,
|
|
1025
|
+
onNextMonth,
|
|
1026
|
+
selected,
|
|
1027
|
+
onSelect,
|
|
1028
|
+
marked = [],
|
|
1029
|
+
actionLabel = "Select Date",
|
|
1030
|
+
onAction,
|
|
1031
|
+
className
|
|
1032
|
+
}) {
|
|
1033
|
+
const days = buildGrid(month);
|
|
1034
|
+
const range = Array.isArray(selected) ? selected : null;
|
|
1035
|
+
const single = selected instanceof Date ? selected : null;
|
|
1036
|
+
const [lo, hi] = range ? [range[0], range[1]].sort((a, b) => a.getTime() - b.getTime()) : [null, null];
|
|
1037
|
+
const isEnd = (d) => single && sameDay(d, single) || lo && hi && (sameDay(d, lo) || sameDay(d, hi));
|
|
1038
|
+
const isInRange = (d) => lo && hi && d > lo && d < hi;
|
|
1039
|
+
return /* @__PURE__ */ jsxs21("div", { className: cx("snacky-calendar", className), children: [
|
|
1040
|
+
/* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__header", children: [
|
|
1041
|
+
/* @__PURE__ */ jsx28(
|
|
1042
|
+
"button",
|
|
1043
|
+
{
|
|
1044
|
+
type: "button",
|
|
1045
|
+
className: "snacky-calendar__nav",
|
|
1046
|
+
onClick: onPrevMonth,
|
|
1047
|
+
"aria-label": "Previous month",
|
|
1048
|
+
children: /* @__PURE__ */ jsx28(back, { width: 24, height: 24 })
|
|
1049
|
+
}
|
|
1050
|
+
),
|
|
1051
|
+
/* @__PURE__ */ jsxs21("span", { className: "snacky-calendar__label", children: [
|
|
1052
|
+
MONTHS[month.getMonth()],
|
|
1053
|
+
" ",
|
|
1054
|
+
month.getFullYear()
|
|
1055
|
+
] }),
|
|
1056
|
+
/* @__PURE__ */ jsx28(
|
|
1057
|
+
"button",
|
|
1058
|
+
{
|
|
1059
|
+
type: "button",
|
|
1060
|
+
className: "snacky-calendar__nav snacky-calendar__nav--next",
|
|
1061
|
+
onClick: onNextMonth,
|
|
1062
|
+
"aria-label": "Next month",
|
|
1063
|
+
children: /* @__PURE__ */ jsx28(back, { width: 24, height: 24 })
|
|
1064
|
+
}
|
|
1065
|
+
)
|
|
1066
|
+
] }),
|
|
1067
|
+
/* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__grid", children: [
|
|
1068
|
+
WEEKDAYS.map((d) => /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__weekday", children: d }, d)),
|
|
1069
|
+
days.map((d, i) => {
|
|
1070
|
+
const outside = d.getMonth() !== month.getMonth();
|
|
1071
|
+
return /* @__PURE__ */ jsxs21(
|
|
1072
|
+
"button",
|
|
1073
|
+
{
|
|
1074
|
+
type: "button",
|
|
1075
|
+
className: cx(
|
|
1076
|
+
"snacky-calendar__day",
|
|
1077
|
+
outside && "snacky-calendar__day--outside",
|
|
1078
|
+
isInRange(d) && "snacky-calendar__day--in-range",
|
|
1079
|
+
isEnd(d) && "snacky-calendar__day--selected"
|
|
1080
|
+
),
|
|
1081
|
+
onClick: () => onSelect?.(d),
|
|
1082
|
+
disabled: outside,
|
|
1083
|
+
"aria-current": isEnd(d) ? "date" : void 0,
|
|
1084
|
+
children: [
|
|
1085
|
+
/* @__PURE__ */ jsx28("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
|
|
1086
|
+
marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__marker" })
|
|
1087
|
+
]
|
|
1088
|
+
},
|
|
1089
|
+
i
|
|
1090
|
+
);
|
|
1091
|
+
})
|
|
1092
|
+
] }),
|
|
1093
|
+
onAction && /* @__PURE__ */ jsx28(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
|
|
1094
|
+
] });
|
|
1095
|
+
}
|
|
1096
|
+
|
|
972
1097
|
// src/components/Avatar/Avatar.tsx
|
|
973
|
-
import { jsx as
|
|
1098
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
974
1099
|
function Avatar({ src, alt, size = "md", className }) {
|
|
975
|
-
return /* @__PURE__ */
|
|
1100
|
+
return /* @__PURE__ */ jsx29("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
|
|
976
1101
|
}
|
|
977
1102
|
|
|
978
1103
|
// src/components/Illustration/Illustration.tsx
|
|
979
|
-
import { jsx as
|
|
1104
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
980
1105
|
var SIZE = {
|
|
981
1106
|
empty: { width: 268, height: 200 },
|
|
982
1107
|
createAccount: { width: 360, height: 240 },
|
|
@@ -986,54 +1111,54 @@ var SIZE = {
|
|
|
986
1111
|
};
|
|
987
1112
|
function Illustration({ variant, src, alt, className }) {
|
|
988
1113
|
const { width, height } = SIZE[variant];
|
|
989
|
-
return /* @__PURE__ */
|
|
1114
|
+
return /* @__PURE__ */ jsx30("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
|
|
990
1115
|
}
|
|
991
1116
|
|
|
992
1117
|
// src/components/ProductImage/ProductImage.tsx
|
|
993
|
-
import { jsx as
|
|
1118
|
+
import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
994
1119
|
function ProductImage({ src, alt, usage, sold = false, className }) {
|
|
995
|
-
return /* @__PURE__ */
|
|
996
|
-
/* @__PURE__ */
|
|
997
|
-
sold && /* @__PURE__ */
|
|
1120
|
+
return /* @__PURE__ */ jsxs22("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
|
|
1121
|
+
/* @__PURE__ */ jsx31("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
|
|
1122
|
+
sold && /* @__PURE__ */ jsx31("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ jsx31("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
|
|
998
1123
|
] });
|
|
999
1124
|
}
|
|
1000
1125
|
|
|
1001
1126
|
// src/components/ProductCard/ProductCard.tsx
|
|
1002
|
-
import { jsx as
|
|
1127
|
+
import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1003
1128
|
function ProductCard(props) {
|
|
1004
1129
|
if (props.variant === "details") {
|
|
1005
1130
|
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;
|
|
1006
|
-
return /* @__PURE__ */
|
|
1007
|
-
/* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1009
|
-
sold && /* @__PURE__ */
|
|
1131
|
+
return /* @__PURE__ */ jsxs23("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
|
|
1132
|
+
/* @__PURE__ */ jsx32("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
|
|
1133
|
+
/* @__PURE__ */ jsx32("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
|
|
1134
|
+
sold && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ jsx32(SoldOutBadge, {}) })
|
|
1010
1135
|
] }) }),
|
|
1011
|
-
/* @__PURE__ */
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1015
|
-
originalPrice2 && /* @__PURE__ */
|
|
1016
|
-
discountLabel2 && /* @__PURE__ */
|
|
1136
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__details-body", children: [
|
|
1137
|
+
/* @__PURE__ */ jsx32("p", { className: "snacky-product-card__name", children: productName2 }),
|
|
1138
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
|
|
1139
|
+
/* @__PURE__ */ jsx32("span", { className: "snacky-product-card__price", children: price2 }),
|
|
1140
|
+
originalPrice2 && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
|
|
1141
|
+
discountLabel2 && /* @__PURE__ */ jsx32(DiscountTag, { label: discountLabel2 })
|
|
1017
1142
|
] }),
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1143
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
|
|
1144
|
+
/* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
|
|
1145
|
+
/* @__PURE__ */ jsx32("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx32(star, { width: 16, height: 16 }) }),
|
|
1021
1146
|
rating2,
|
|
1022
1147
|
" (",
|
|
1023
1148
|
ratingCount,
|
|
1024
1149
|
")"
|
|
1025
1150
|
] }),
|
|
1026
|
-
/* @__PURE__ */
|
|
1027
|
-
/* @__PURE__ */
|
|
1028
|
-
/* @__PURE__ */
|
|
1029
|
-
/* @__PURE__ */
|
|
1151
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
|
|
1152
|
+
/* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ jsx32(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ jsx32(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
|
|
1153
|
+
/* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ jsx32(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
|
|
1154
|
+
/* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ jsx32(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
|
|
1030
1155
|
] })
|
|
1031
1156
|
] })
|
|
1032
1157
|
] })
|
|
1033
1158
|
] });
|
|
1034
1159
|
}
|
|
1035
1160
|
const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
|
|
1036
|
-
return /* @__PURE__ */
|
|
1161
|
+
return /* @__PURE__ */ jsxs23(
|
|
1037
1162
|
"div",
|
|
1038
1163
|
{
|
|
1039
1164
|
className: cx("snacky-product-card", "snacky-product-card--list", className),
|
|
@@ -1042,25 +1167,25 @@ function ProductCard(props) {
|
|
|
1042
1167
|
onClick,
|
|
1043
1168
|
onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
|
|
1044
1169
|
children: [
|
|
1045
|
-
/* @__PURE__ */
|
|
1046
|
-
/* @__PURE__ */
|
|
1047
|
-
discountLabel && /* @__PURE__ */
|
|
1170
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", children: [
|
|
1171
|
+
/* @__PURE__ */ jsx32("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
|
|
1172
|
+
discountLabel && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ jsx32(DiscountTag, { label: discountLabel }) })
|
|
1048
1173
|
] }),
|
|
1049
|
-
/* @__PURE__ */
|
|
1050
|
-
/* @__PURE__ */
|
|
1051
|
-
/* @__PURE__ */
|
|
1052
|
-
originalPrice && /* @__PURE__ */
|
|
1174
|
+
/* @__PURE__ */ jsx32("p", { className: "snacky-product-card__name", children: productName }),
|
|
1175
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
|
|
1176
|
+
/* @__PURE__ */ jsx32("span", { className: "snacky-product-card__price", children: price }),
|
|
1177
|
+
originalPrice && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__original-price", children: originalPrice })
|
|
1053
1178
|
] }),
|
|
1054
|
-
/* @__PURE__ */
|
|
1055
|
-
/* @__PURE__ */
|
|
1056
|
-
/* @__PURE__ */
|
|
1179
|
+
/* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
|
|
1180
|
+
/* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
|
|
1181
|
+
/* @__PURE__ */ jsx32("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx32(star, { width: 16, height: 16 }) }),
|
|
1057
1182
|
rating
|
|
1058
1183
|
] }),
|
|
1059
|
-
/* @__PURE__ */
|
|
1184
|
+
/* @__PURE__ */ jsx32(
|
|
1060
1185
|
IconButton,
|
|
1061
1186
|
{
|
|
1062
1187
|
variant: "primary",
|
|
1063
|
-
icon: cartIcon ?? /* @__PURE__ */
|
|
1188
|
+
icon: cartIcon ?? /* @__PURE__ */ jsx32(cartAdd, { width: 16, height: 16 }),
|
|
1064
1189
|
onClick: (e) => {
|
|
1065
1190
|
e.stopPropagation();
|
|
1066
1191
|
onAddToCart();
|
|
@@ -1080,6 +1205,7 @@ export {
|
|
|
1080
1205
|
Avatar,
|
|
1081
1206
|
BottomSheet,
|
|
1082
1207
|
Button,
|
|
1208
|
+
Calendar,
|
|
1083
1209
|
Callout,
|
|
1084
1210
|
ChatInput,
|
|
1085
1211
|
Checkbox,
|
|
@@ -1106,6 +1232,7 @@ export {
|
|
|
1106
1232
|
SnackyIcons,
|
|
1107
1233
|
SoldOutBadge,
|
|
1108
1234
|
SquareBanner,
|
|
1235
|
+
Stepper,
|
|
1109
1236
|
TabRow,
|
|
1110
1237
|
TextField,
|
|
1111
1238
|
Toggle,
|