@snacky/ui 0.10.0 → 0.12.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/CHANGELOG.md +61 -0
- package/README.md +4 -3
- package/dist/index.cjs +138 -111
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +22 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +29 -5
- package/dist/index.d.ts +29 -5
- package/dist/index.js +103 -77
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -45,6 +45,7 @@ __export(index_exports, {
|
|
|
45
45
|
NotificationListItem: () => NotificationListItem,
|
|
46
46
|
OrderListItem: () => OrderListItem,
|
|
47
47
|
OtpField: () => OtpField,
|
|
48
|
+
PageIndicator: () => PageIndicator,
|
|
48
49
|
PointBalanceBanner: () => PointBalanceBanner,
|
|
49
50
|
ProductCard: () => ProductCard,
|
|
50
51
|
ProductChip: () => ProductChip,
|
|
@@ -704,6 +705,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
|
|
|
704
705
|
var solid_exports = {};
|
|
705
706
|
__export(solid_exports, {
|
|
706
707
|
account: () => account2,
|
|
708
|
+
address: () => address2,
|
|
707
709
|
angleSmallRight: () => angleSmallRight,
|
|
708
710
|
balance: () => balance2,
|
|
709
711
|
bell: () => bell2,
|
|
@@ -735,6 +737,9 @@ var account2 = icon2(20, [
|
|
|
735
737
|
["M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z", "nonzero"],
|
|
736
738
|
["M10 11.6659C5.85977 11.6705 2.50461 15.0257 2.5 19.1659C2.5 19.6261 2.87309 19.9992 3.33332 19.9992H16.6666C17.1269 19.9992 17.5 19.6261 17.5 19.1659C17.4954 15.0257 14.1402 11.6705 10 11.6659Z", "nonzero"]
|
|
737
739
|
]);
|
|
740
|
+
var address2 = icon2(16, [
|
|
741
|
+
["M8.00001 0.0283203C6.23597 0.030261 4.54473 0.731837 3.2973 1.97914C2.04987 3.22644 1.34813 4.91762 1.34601 6.68165C1.34601 8.39499 2.67268 11.0763 5.28934 14.651C5.60085 15.0777 6.00871 15.4249 6.47974 15.6643C6.95077 15.9036 7.47166 16.0283 8.00001 16.0283C8.52836 16.0283 9.04924 15.9036 9.52027 15.6643C9.9913 15.4249 10.3992 15.0777 10.7107 14.651C13.3273 11.0763 14.654 8.39499 14.654 6.68165C14.6519 4.91762 13.9501 3.22644 12.7027 1.97914C11.4553 0.731837 9.76405 0.030261 8.00001 0.0283203V0.0283203ZM8.00001 9.33365C7.47259 9.33365 6.95702 9.17726 6.51849 8.88424C6.07996 8.59122 5.73816 8.17475 5.53633 7.68748C5.3345 7.20021 5.28169 6.66403 5.38458 6.14675C5.48747 5.62946 5.74145 5.15431 6.11439 4.78137C6.48733 4.40843 6.96248 4.15445 7.47977 4.05156C7.99705 3.94867 8.53323 4.00148 9.0205 4.20331C9.50777 4.40514 9.92424 4.74694 10.2173 5.18547C10.5103 5.624 10.6667 6.13957 10.6667 6.66699C10.6667 7.37423 10.3857 8.05251 9.88563 8.55261C9.38553 9.0527 8.70725 9.33365 8.00001 9.33365Z", "nonzero"]
|
|
742
|
+
]);
|
|
738
743
|
var angleSmallRight = icon2(24, [
|
|
739
744
|
["M15.75 9.525L11.164 4.939C10.8827 4.65774 10.5011 4.49978 10.1032 4.49988C9.70534 4.49997 9.32381 4.65811 9.04255 4.9395C8.76129 5.2209 8.60333 5.6025 8.60342 6.00036C8.60352 6.39822 8.76166 6.77974 9.04305 7.061L13.629 11.646C13.6756 11.6925 13.7125 11.7476 13.7378 11.8084C13.763 11.8691 13.7759 11.9342 13.7759 12C13.7759 12.0658 13.763 12.1309 13.7378 12.1916C13.7125 12.2524 13.6756 12.3076 13.629 12.354L9.04305 16.939C8.76166 17.2203 8.60352 17.6018 8.60342 17.9997C8.60333 18.3975 8.76129 18.7791 9.04255 19.0605C9.32381 19.3419 9.70534 19.5 10.1032 19.5001C10.5011 19.5002 10.8827 19.3423 11.164 19.061L15.75 14.475C16.4053 13.818 16.7732 12.9279 16.7732 12C16.7732 11.0721 16.4053 10.182 15.75 9.525Z", "nonzero"]
|
|
740
745
|
]);
|
|
@@ -837,43 +842,64 @@ function AlertBanner({ message, countdown, className }) {
|
|
|
837
842
|
] });
|
|
838
843
|
}
|
|
839
844
|
|
|
840
|
-
// src/components/
|
|
845
|
+
// src/components/PageIndicator/PageIndicator.tsx
|
|
841
846
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
847
|
+
function PageIndicator({ count, activeIndex, ariaLabel, className }) {
|
|
848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
849
|
+
"div",
|
|
850
|
+
{
|
|
851
|
+
className: cx("snacky-page-indicator", className),
|
|
852
|
+
role: "status",
|
|
853
|
+
"aria-label": ariaLabel ?? `Page ${activeIndex + 1} of ${count}`,
|
|
854
|
+
children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
855
|
+
"span",
|
|
856
|
+
{
|
|
857
|
+
"aria-hidden": "true",
|
|
858
|
+
className: cx("snacky-page-indicator__dot", i === activeIndex && "snacky-page-indicator__dot--active")
|
|
859
|
+
},
|
|
860
|
+
i
|
|
861
|
+
))
|
|
862
|
+
}
|
|
863
|
+
);
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
// src/components/Badge/Badge.tsx
|
|
867
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
842
868
|
function NotificationBadge({ count, max = 99, children, className }) {
|
|
843
|
-
if (count <= 0) return /* @__PURE__ */ (0,
|
|
844
|
-
return /* @__PURE__ */ (0,
|
|
869
|
+
if (count <= 0) return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
|
|
870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: cx("snacky-badge-wrap", className), children: [
|
|
845
871
|
children,
|
|
846
|
-
/* @__PURE__ */ (0,
|
|
872
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
|
|
847
873
|
] });
|
|
848
874
|
}
|
|
849
875
|
function DiscountTag({ label, className }) {
|
|
850
|
-
return /* @__PURE__ */ (0,
|
|
876
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx("snacky-discount-tag", className), children: label });
|
|
851
877
|
}
|
|
852
878
|
function SoldOutBadge({ className }) {
|
|
853
|
-
return /* @__PURE__ */ (0,
|
|
879
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
|
|
854
880
|
}
|
|
855
881
|
function InfoBadge({ label, icon: icon3, className }) {
|
|
856
|
-
return /* @__PURE__ */ (0,
|
|
857
|
-
icon3 && /* @__PURE__ */ (0,
|
|
882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: cx("snacky-info-badge", className), children: [
|
|
883
|
+
icon3 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "snacky-info-badge__icon", children: icon3 }),
|
|
858
884
|
label
|
|
859
885
|
] });
|
|
860
886
|
}
|
|
861
887
|
var VariantBadge = InfoBadge;
|
|
862
888
|
|
|
863
889
|
// src/components/Callout/Callout.tsx
|
|
864
|
-
var
|
|
890
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
865
891
|
function Callout({ message, timestamp, variant, statusIcon, className }) {
|
|
866
|
-
return /* @__PURE__ */ (0,
|
|
867
|
-
/* @__PURE__ */ (0,
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
892
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx("snacky-callout", `snacky-callout--${variant}`, className), children: [
|
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "snacky-callout__message", children: message }),
|
|
894
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "snacky-callout__meta", children: [
|
|
869
895
|
timestamp,
|
|
870
|
-
statusIcon && variant !== "received" && /* @__PURE__ */ (0,
|
|
896
|
+
statusIcon && variant !== "received" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-callout__meta-icon", children: statusIcon })
|
|
871
897
|
] })
|
|
872
898
|
] });
|
|
873
899
|
}
|
|
874
900
|
|
|
875
901
|
// src/components/List/List.tsx
|
|
876
|
-
var
|
|
902
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
877
903
|
var STATUS_LABEL = {
|
|
878
904
|
waiting: "Waiting for Payment",
|
|
879
905
|
process: "Order Processing",
|
|
@@ -901,7 +927,7 @@ function OrderListItem({
|
|
|
901
927
|
}) {
|
|
902
928
|
const action = actionLabel ?? STATUS_ACTION[status];
|
|
903
929
|
const isCod = status === "processCod";
|
|
904
|
-
return /* @__PURE__ */ (0,
|
|
930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
905
931
|
"div",
|
|
906
932
|
{
|
|
907
933
|
className: cx("snacky-order-item", className),
|
|
@@ -910,32 +936,32 @@ function OrderListItem({
|
|
|
910
936
|
onClick,
|
|
911
937
|
onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
|
|
912
938
|
children: [
|
|
913
|
-
/* @__PURE__ */ (0,
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
915
|
-
/* @__PURE__ */ (0,
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
939
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__top", children: [
|
|
940
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
|
|
941
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__info", children: [
|
|
942
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
917
943
|
"span",
|
|
918
944
|
{
|
|
919
945
|
className: cx("snacky-order-item__status", status === "cancelled" && "snacky-order-item__status--cancelled"),
|
|
920
946
|
children: STATUS_LABEL[status]
|
|
921
947
|
}
|
|
922
948
|
),
|
|
923
|
-
/* @__PURE__ */ (0,
|
|
949
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-order-item__name", children: productName })
|
|
924
950
|
] })
|
|
925
951
|
] }),
|
|
926
|
-
/* @__PURE__ */ (0,
|
|
927
|
-
/* @__PURE__ */ (0,
|
|
928
|
-
/* @__PURE__ */ (0,
|
|
952
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__details", children: [
|
|
953
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-order-item__count", children: itemsSummary }),
|
|
954
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: cx("snacky-order-item__total", isCod && "snacky-order-item__total--cod"), children: [
|
|
929
955
|
"Order Total: ",
|
|
930
|
-
/* @__PURE__ */ (0,
|
|
956
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("b", { children: total })
|
|
931
957
|
] }),
|
|
932
|
-
isCod && /* @__PURE__ */ (0,
|
|
958
|
+
isCod && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-order-item__cod", children: "COD" })
|
|
933
959
|
] }),
|
|
934
|
-
status === "waiting" && paymentDeadline && /* @__PURE__ */ (0,
|
|
960
|
+
status === "waiting" && paymentDeadline && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__deadline", children: [
|
|
935
961
|
"Pay before ",
|
|
936
962
|
paymentDeadline
|
|
937
963
|
] }),
|
|
938
|
-
action && /* @__PURE__ */ (0,
|
|
964
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
939
965
|
Button,
|
|
940
966
|
{
|
|
941
967
|
variant: "primary",
|
|
@@ -951,7 +977,7 @@ function OrderListItem({
|
|
|
951
977
|
);
|
|
952
978
|
}
|
|
953
979
|
function NotificationListItem({ title, message, unread = false, onClick, className }) {
|
|
954
|
-
return /* @__PURE__ */ (0,
|
|
980
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
955
981
|
"div",
|
|
956
982
|
{
|
|
957
983
|
className: cx("snacky-notif-item", unread && "snacky-notif-item--unread", className),
|
|
@@ -960,8 +986,8 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
|
|
|
960
986
|
onClick,
|
|
961
987
|
onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
|
|
962
988
|
children: [
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
964
|
-
/* @__PURE__ */ (0,
|
|
989
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-notif-item__title", children: title }),
|
|
990
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-notif-item__message", children: message })
|
|
965
991
|
]
|
|
966
992
|
}
|
|
967
993
|
);
|
|
@@ -969,12 +995,12 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
|
|
|
969
995
|
|
|
970
996
|
// src/components/Accordion/Accordion.tsx
|
|
971
997
|
var import_react10 = require("react");
|
|
972
|
-
var
|
|
998
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
973
999
|
function Accordion({ title, leadingIcon, children, defaultOpen = false, className }) {
|
|
974
1000
|
const [open, setOpen] = (0, import_react10.useState)(defaultOpen);
|
|
975
1001
|
const panelId = (0, import_react10.useId)();
|
|
976
|
-
return /* @__PURE__ */ (0,
|
|
977
|
-
/* @__PURE__ */ (0,
|
|
1002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("snacky-accordion", !!leadingIcon && "snacky-accordion--icon", className), children: [
|
|
1003
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
978
1004
|
"button",
|
|
979
1005
|
{
|
|
980
1006
|
type: "button",
|
|
@@ -983,27 +1009,27 @@ function Accordion({ title, leadingIcon, children, defaultOpen = false, classNam
|
|
|
983
1009
|
"aria-controls": panelId,
|
|
984
1010
|
onClick: () => setOpen((v) => !v),
|
|
985
1011
|
children: [
|
|
986
|
-
leadingIcon && /* @__PURE__ */ (0,
|
|
987
|
-
/* @__PURE__ */ (0,
|
|
988
|
-
/* @__PURE__ */ (0,
|
|
1012
|
+
leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "snacky-accordion__icon", children: leadingIcon }),
|
|
1013
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "snacky-accordion__title", children: title }),
|
|
1014
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
989
1015
|
"svg",
|
|
990
1016
|
{
|
|
991
1017
|
className: cx("snacky-accordion__chevron", open && "snacky-accordion__chevron--open"),
|
|
992
1018
|
viewBox: "0 0 20 20",
|
|
993
1019
|
fill: "none",
|
|
994
|
-
children: /* @__PURE__ */ (0,
|
|
1020
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
995
1021
|
}
|
|
996
1022
|
)
|
|
997
1023
|
]
|
|
998
1024
|
}
|
|
999
1025
|
),
|
|
1000
|
-
open && /* @__PURE__ */ (0,
|
|
1026
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: panelId, className: "snacky-accordion__panel", children })
|
|
1001
1027
|
] });
|
|
1002
1028
|
}
|
|
1003
1029
|
|
|
1004
1030
|
// src/components/Modal/BottomSheet.tsx
|
|
1005
1031
|
var import_react11 = require("react");
|
|
1006
|
-
var
|
|
1032
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1007
1033
|
function BottomSheet({ open, onDismiss, children, showHandle = false, className }) {
|
|
1008
1034
|
(0, import_react11.useEffect)(() => {
|
|
1009
1035
|
if (!open) return;
|
|
@@ -1014,7 +1040,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
|
|
|
1014
1040
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
1015
1041
|
}, [open, onDismiss]);
|
|
1016
1042
|
if (!open) return null;
|
|
1017
|
-
return /* @__PURE__ */ (0,
|
|
1043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1018
1044
|
"div",
|
|
1019
1045
|
{
|
|
1020
1046
|
className: cx("snacky-sheet", className),
|
|
@@ -1022,7 +1048,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
|
|
|
1022
1048
|
"aria-modal": "true",
|
|
1023
1049
|
onClick: (e) => e.stopPropagation(),
|
|
1024
1050
|
children: [
|
|
1025
|
-
showHandle && /* @__PURE__ */ (0,
|
|
1051
|
+
showHandle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "snacky-sheet__handle" }),
|
|
1026
1052
|
children
|
|
1027
1053
|
]
|
|
1028
1054
|
}
|
|
@@ -1030,29 +1056,29 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
|
|
|
1030
1056
|
}
|
|
1031
1057
|
|
|
1032
1058
|
// src/components/Section/Section.tsx
|
|
1033
|
-
var
|
|
1059
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1034
1060
|
function Section({ title, onAction, children, className }) {
|
|
1035
|
-
return /* @__PURE__ */ (0,
|
|
1036
|
-
/* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1038
|
-
onAction && /* @__PURE__ */ (0,
|
|
1061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: cx("snacky-section", className), children: [
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "snacky-section__header", children: [
|
|
1063
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "snacky-section__title", children: title }),
|
|
1064
|
+
onAction && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
|
|
1039
1065
|
] }),
|
|
1040
1066
|
children
|
|
1041
1067
|
] });
|
|
1042
1068
|
}
|
|
1043
1069
|
|
|
1044
1070
|
// src/components/Stepper/Stepper.tsx
|
|
1045
|
-
var
|
|
1071
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1046
1072
|
function Stepper({ steps, className }) {
|
|
1047
|
-
return /* @__PURE__ */ (0,
|
|
1073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1048
1074
|
"li",
|
|
1049
1075
|
{
|
|
1050
1076
|
className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
|
|
1051
1077
|
children: [
|
|
1052
|
-
/* @__PURE__ */ (0,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1054
|
-
/* @__PURE__ */ (0,
|
|
1055
|
-
step.timestamp && /* @__PURE__ */ (0,
|
|
1078
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(close, { width: 12, height: 12 }) }),
|
|
1079
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "snacky-stepper__body", children: [
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
|
|
1081
|
+
step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
|
|
1056
1082
|
] })
|
|
1057
1083
|
]
|
|
1058
1084
|
},
|
|
@@ -1061,7 +1087,7 @@ function Stepper({ steps, className }) {
|
|
|
1061
1087
|
}
|
|
1062
1088
|
|
|
1063
1089
|
// src/components/Calendar/Calendar.tsx
|
|
1064
|
-
var
|
|
1090
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1065
1091
|
var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
1066
1092
|
var MONTHS = [
|
|
1067
1093
|
"January",
|
|
@@ -1108,39 +1134,39 @@ function Calendar({
|
|
|
1108
1134
|
const [lo, hi] = range ? [range[0], range[1]].sort((a, b) => a.getTime() - b.getTime()) : [null, null];
|
|
1109
1135
|
const isEnd = (d) => single && sameDay(d, single) || lo && hi && (sameDay(d, lo) || sameDay(d, hi));
|
|
1110
1136
|
const isInRange = (d) => lo && hi && d > lo && d < hi;
|
|
1111
|
-
return /* @__PURE__ */ (0,
|
|
1112
|
-
/* @__PURE__ */ (0,
|
|
1113
|
-
/* @__PURE__ */ (0,
|
|
1137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("snacky-calendar", className), children: [
|
|
1138
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "snacky-calendar__header", children: [
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1114
1140
|
"button",
|
|
1115
1141
|
{
|
|
1116
1142
|
type: "button",
|
|
1117
1143
|
className: "snacky-calendar__nav",
|
|
1118
1144
|
onClick: onPrevMonth,
|
|
1119
1145
|
"aria-label": "Previous month",
|
|
1120
|
-
children: /* @__PURE__ */ (0,
|
|
1146
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(back, { width: 24, height: 24 })
|
|
1121
1147
|
}
|
|
1122
1148
|
),
|
|
1123
|
-
/* @__PURE__ */ (0,
|
|
1149
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "snacky-calendar__label", children: [
|
|
1124
1150
|
MONTHS[month.getMonth()],
|
|
1125
1151
|
" ",
|
|
1126
1152
|
month.getFullYear()
|
|
1127
1153
|
] }),
|
|
1128
|
-
/* @__PURE__ */ (0,
|
|
1154
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1129
1155
|
"button",
|
|
1130
1156
|
{
|
|
1131
1157
|
type: "button",
|
|
1132
1158
|
className: "snacky-calendar__nav snacky-calendar__nav--next",
|
|
1133
1159
|
onClick: onNextMonth,
|
|
1134
1160
|
"aria-label": "Next month",
|
|
1135
|
-
children: /* @__PURE__ */ (0,
|
|
1161
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(back, { width: 24, height: 24 })
|
|
1136
1162
|
}
|
|
1137
1163
|
)
|
|
1138
1164
|
] }),
|
|
1139
|
-
/* @__PURE__ */ (0,
|
|
1140
|
-
WEEKDAYS.map((d) => /* @__PURE__ */ (0,
|
|
1165
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "snacky-calendar__grid", children: [
|
|
1166
|
+
WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
|
|
1141
1167
|
days.map((d, i) => {
|
|
1142
1168
|
const outside = d.getMonth() !== month.getMonth();
|
|
1143
|
-
return /* @__PURE__ */ (0,
|
|
1169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1144
1170
|
"button",
|
|
1145
1171
|
{
|
|
1146
1172
|
type: "button",
|
|
@@ -1154,26 +1180,26 @@ function Calendar({
|
|
|
1154
1180
|
disabled: outside,
|
|
1155
1181
|
"aria-current": isEnd(d) ? "date" : void 0,
|
|
1156
1182
|
children: [
|
|
1157
|
-
/* @__PURE__ */ (0,
|
|
1158
|
-
marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0,
|
|
1183
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
|
|
1184
|
+
marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__marker" })
|
|
1159
1185
|
]
|
|
1160
1186
|
},
|
|
1161
1187
|
i
|
|
1162
1188
|
);
|
|
1163
1189
|
})
|
|
1164
1190
|
] }),
|
|
1165
|
-
onAction && /* @__PURE__ */ (0,
|
|
1191
|
+
onAction && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
|
|
1166
1192
|
] });
|
|
1167
1193
|
}
|
|
1168
1194
|
|
|
1169
1195
|
// src/components/Avatar/Avatar.tsx
|
|
1170
|
-
var
|
|
1196
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1171
1197
|
function Avatar({ src, alt, size = "md", className }) {
|
|
1172
|
-
return /* @__PURE__ */ (0,
|
|
1198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
|
|
1173
1199
|
}
|
|
1174
1200
|
|
|
1175
1201
|
// src/components/Illustration/Illustration.tsx
|
|
1176
|
-
var
|
|
1202
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1177
1203
|
var SIZE = {
|
|
1178
1204
|
empty: { width: 268, height: 200 },
|
|
1179
1205
|
createAccount: { width: 360, height: 240 },
|
|
@@ -1183,54 +1209,54 @@ var SIZE = {
|
|
|
1183
1209
|
};
|
|
1184
1210
|
function Illustration({ variant, src, alt, className }) {
|
|
1185
1211
|
const { width, height } = SIZE[variant];
|
|
1186
|
-
return /* @__PURE__ */ (0,
|
|
1212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
|
|
1187
1213
|
}
|
|
1188
1214
|
|
|
1189
1215
|
// src/components/ProductImage/ProductImage.tsx
|
|
1190
|
-
var
|
|
1216
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1191
1217
|
function ProductImage({ src, alt, usage, sold = false, className }) {
|
|
1192
|
-
return /* @__PURE__ */ (0,
|
|
1193
|
-
/* @__PURE__ */ (0,
|
|
1194
|
-
sold && /* @__PURE__ */ (0,
|
|
1218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
|
|
1220
|
+
sold && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
|
|
1195
1221
|
] });
|
|
1196
1222
|
}
|
|
1197
1223
|
|
|
1198
1224
|
// src/components/ProductCard/ProductCard.tsx
|
|
1199
|
-
var
|
|
1225
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1200
1226
|
function ProductCard(props) {
|
|
1201
1227
|
if (props.variant === "details") {
|
|
1202
1228
|
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;
|
|
1203
|
-
return /* @__PURE__ */ (0,
|
|
1204
|
-
/* @__PURE__ */ (0,
|
|
1205
|
-
/* @__PURE__ */ (0,
|
|
1206
|
-
sold && /* @__PURE__ */ (0,
|
|
1229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
|
|
1231
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
|
|
1232
|
+
sold && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SoldOutBadge, {}) })
|
|
1207
1233
|
] }) }),
|
|
1208
|
-
/* @__PURE__ */ (0,
|
|
1209
|
-
/* @__PURE__ */ (0,
|
|
1210
|
-
/* @__PURE__ */ (0,
|
|
1211
|
-
/* @__PURE__ */ (0,
|
|
1212
|
-
originalPrice2 && /* @__PURE__ */ (0,
|
|
1213
|
-
discountLabel2 && /* @__PURE__ */ (0,
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__details-body", children: [
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
|
|
1236
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__price-row", children: [
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
|
|
1238
|
+
originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
|
|
1239
|
+
discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscountTag, { label: discountLabel2 })
|
|
1214
1240
|
] }),
|
|
1215
|
-
/* @__PURE__ */ (0,
|
|
1216
|
-
/* @__PURE__ */ (0,
|
|
1217
|
-
/* @__PURE__ */ (0,
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
|
|
1242
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "snacky-product-card__rating", children: [
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(star, { width: 16, height: 16 }) }),
|
|
1218
1244
|
rating2,
|
|
1219
1245
|
" (",
|
|
1220
1246
|
ratingCount,
|
|
1221
1247
|
")"
|
|
1222
1248
|
] }),
|
|
1223
|
-
/* @__PURE__ */ (0,
|
|
1224
|
-
/* @__PURE__ */ (0,
|
|
1225
|
-
/* @__PURE__ */ (0,
|
|
1226
|
-
/* @__PURE__ */ (0,
|
|
1249
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
|
|
1252
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
|
|
1227
1253
|
] })
|
|
1228
1254
|
] })
|
|
1229
1255
|
] })
|
|
1230
1256
|
] });
|
|
1231
1257
|
}
|
|
1232
1258
|
const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
|
|
1233
|
-
return /* @__PURE__ */ (0,
|
|
1259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1234
1260
|
"div",
|
|
1235
1261
|
{
|
|
1236
1262
|
className: cx("snacky-product-card", "snacky-product-card--list", className),
|
|
@@ -1239,25 +1265,25 @@ function ProductCard(props) {
|
|
|
1239
1265
|
onClick,
|
|
1240
1266
|
onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
|
|
1241
1267
|
children: [
|
|
1242
|
-
/* @__PURE__ */ (0,
|
|
1243
|
-
/* @__PURE__ */ (0,
|
|
1244
|
-
discountLabel && /* @__PURE__ */ (0,
|
|
1268
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
|
|
1270
|
+
discountLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscountTag, { label: discountLabel }) })
|
|
1245
1271
|
] }),
|
|
1246
|
-
/* @__PURE__ */ (0,
|
|
1247
|
-
/* @__PURE__ */ (0,
|
|
1248
|
-
/* @__PURE__ */ (0,
|
|
1249
|
-
originalPrice && /* @__PURE__ */ (0,
|
|
1272
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "snacky-product-card__name", children: productName }),
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__price-row", children: [
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__price", children: price }),
|
|
1275
|
+
originalPrice && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
|
|
1250
1276
|
] }),
|
|
1251
|
-
/* @__PURE__ */ (0,
|
|
1252
|
-
/* @__PURE__ */ (0,
|
|
1253
|
-
/* @__PURE__ */ (0,
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "snacky-product-card__rating", children: [
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(star, { width: 16, height: 16 }) }),
|
|
1254
1280
|
rating
|
|
1255
1281
|
] }),
|
|
1256
|
-
/* @__PURE__ */ (0,
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1257
1283
|
IconButton,
|
|
1258
1284
|
{
|
|
1259
1285
|
variant: "primary",
|
|
1260
|
-
icon: cartIcon ?? /* @__PURE__ */ (0,
|
|
1286
|
+
icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(cartAdd, { width: 16, height: 16 }),
|
|
1261
1287
|
onClick: (e) => {
|
|
1262
1288
|
e.stopPropagation();
|
|
1263
1289
|
onAddToCart();
|
|
@@ -1272,17 +1298,17 @@ function ProductCard(props) {
|
|
|
1272
1298
|
}
|
|
1273
1299
|
|
|
1274
1300
|
// src/components/ImagePlaceholder/ImagePlaceholder.tsx
|
|
1275
|
-
var
|
|
1301
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1276
1302
|
function ImagePlaceholder({ width, height, className }) {
|
|
1277
1303
|
const iconSize = Math.round(Math.min(width, height) * 0.32);
|
|
1278
|
-
return /* @__PURE__ */ (0,
|
|
1304
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1279
1305
|
"div",
|
|
1280
1306
|
{
|
|
1281
1307
|
className: cx("snacky-image-placeholder", className),
|
|
1282
1308
|
style: { width, height },
|
|
1283
1309
|
role: "img",
|
|
1284
1310
|
"aria-label": "No image",
|
|
1285
|
-
children: /* @__PURE__ */ (0,
|
|
1311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
1286
1312
|
"svg",
|
|
1287
1313
|
{
|
|
1288
1314
|
width: iconSize,
|
|
@@ -1294,9 +1320,9 @@ function ImagePlaceholder({ width, height, className }) {
|
|
|
1294
1320
|
strokeLinecap: "round",
|
|
1295
1321
|
strokeLinejoin: "round",
|
|
1296
1322
|
children: [
|
|
1297
|
-
/* @__PURE__ */ (0,
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1299
|
-
/* @__PURE__ */ (0,
|
|
1323
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "21 15 16 10 5 21" })
|
|
1300
1326
|
]
|
|
1301
1327
|
}
|
|
1302
1328
|
)
|
|
@@ -1330,6 +1356,7 @@ function ImagePlaceholder({ width, height, className }) {
|
|
|
1330
1356
|
NotificationListItem,
|
|
1331
1357
|
OrderListItem,
|
|
1332
1358
|
OtpField,
|
|
1359
|
+
PageIndicator,
|
|
1333
1360
|
PointBalanceBanner,
|
|
1334
1361
|
ProductCard,
|
|
1335
1362
|
ProductChip,
|