@tapcart/mobile-components 0.8.57 → 0.8.58
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/ui/animate-container.d.ts.map +1 -1
- package/dist/components/ui/animate-container.js +3 -0
- package/dist/components/ui/favorite.js +1 -1
- package/dist/components/ui/icon.d.ts.map +1 -1
- package/dist/components/ui/icon.js +6 -2
- package/dist/components/ui/product-card.d.ts +8 -0
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +33 -6
- package/dist/components/ui/slider.js +1 -1
- package/dist/components/ui/star-rating.d.ts.map +1 -1
- package/dist/components/ui/star-rating.js +28 -8
- package/dist/styles.css +6 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate-container.d.ts","sourceRoot":"","sources":["../../../components/ui/animate-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAW7D,CAAA;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,QAAc,EACd,SAAS,EACT,SAAS,EACT,OAAO,GACR,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"animate-container.d.ts","sourceRoot":"","sources":["../../../components/ui/animate-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAW7D,CAAA;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,QAAc,EACd,SAAS,EACT,SAAS,EACT,OAAO,GACR,EAAE,qBAAqB,2CAmCvB"}
|
|
@@ -25,6 +25,9 @@ export function AnimateContainer({ children, animations, duration = 300, classNa
|
|
|
25
25
|
return;
|
|
26
26
|
}, [isLoading, animations]);
|
|
27
27
|
const getAnimationClasses = () => {
|
|
28
|
+
if (!animations || !Array.isArray(animations)) {
|
|
29
|
+
return "";
|
|
30
|
+
}
|
|
28
31
|
return animations
|
|
29
32
|
.map((animation) => (hasData ? animation.enter : animation.exit))
|
|
30
33
|
.join(" ");
|
|
@@ -41,7 +41,7 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px]", {
|
|
|
41
41
|
},
|
|
42
42
|
});
|
|
43
43
|
const Favorite = (_a) => {
|
|
44
|
-
var { className, size = "small", selected = false, onClick, iconUrl = "https://
|
|
44
|
+
var { className, size = "small", selected = false, onClick, iconUrl = "https://assets.tapcart.com/default-icon-options/heart-1.svg", showBackground = false, showBackgroundShadow = false, cornerRadius = 4, layoutType = "below-image-on-right", favoriteFillColor = "#D91E18", disabledFillColor = "#727272", backgroundColor = "#FFFFFF", borderSides = ["all"], borderColorStyle = undefined, borderPadding = {}, disableHaptic = false } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "showBackgroundShadow", "cornerRadius", "layoutType", "favoriteFillColor", "disabledFillColor", "backgroundColor", "borderSides", "borderColorStyle", "borderPadding", "disableHaptic"]);
|
|
45
45
|
const { action } = useActions();
|
|
46
46
|
const handleClick = (e) => {
|
|
47
47
|
try {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAyChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA+DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AA8KD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CA+BX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { ReactSVG } from "react-svg";
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
|
-
import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconChevronLeft, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, IconStarFilled, IconShoppingBagPlus, IconShieldCheckFilled, IconShoppingBag, IconHeartCancel, } from "@tabler/icons-react";
|
|
16
|
+
import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconChevronLeft, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, IconStarFilled, IconShoppingBagPlus, IconShieldCheckFilled, IconShoppingBag, IconHeartCancel, IconStar, } from "@tabler/icons-react";
|
|
17
17
|
import { cn, iconColorVariantClasses } from "../../lib/utils";
|
|
18
18
|
const iconVariants = cva("inline-flex items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
|
|
19
19
|
variants: {
|
|
@@ -86,6 +86,7 @@ const icons = {
|
|
|
86
86
|
"shopping-bag-plus": IconShoppingBagPlus,
|
|
87
87
|
"shield-check-filled": IconShieldCheckFilled,
|
|
88
88
|
"heart-cancel": IconHeartCancel,
|
|
89
|
+
star: IconStar,
|
|
89
90
|
};
|
|
90
91
|
const TablerIcon = ({ name, size }) => {
|
|
91
92
|
const IconComponent = icons[name];
|
|
@@ -168,6 +169,9 @@ const CustomIcon = ({ url, size, color, strokeColor, strokeWidth, fillColor, fil
|
|
|
168
169
|
};
|
|
169
170
|
function Icon(_a) {
|
|
170
171
|
var { className, name, size = "md", color, url, fillColor, secondaryFillColor, strokeColor, strokeWidth, fillPercentage } = _a, props = __rest(_a, ["className", "name", "size", "color", "url", "fillColor", "secondaryFillColor", "strokeColor", "strokeWidth", "fillPercentage"]);
|
|
171
|
-
|
|
172
|
+
// For Tabler icons, we need to apply custom colors as inline styles
|
|
173
|
+
const isCustomColor = color && !iconColorVariantClasses[color];
|
|
174
|
+
const iconStyle = isCustomColor ? { color } : {};
|
|
175
|
+
return (_jsxs("div", Object.assign({ className: cn(iconVariants({ size, color: isCustomColor ? undefined : color }), className), style: iconStyle }, props, { children: [url ? (_jsx(CustomIcon, { url: url, size: size, color: color, fillColor: fillColor, secondaryFillColor: secondaryFillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, fillPercentage: fillPercentage || (color || fillColor ? 1 : 0) })) : (_jsx(TablerIcon, { name: name, size: size })), props.children] })));
|
|
172
176
|
}
|
|
173
177
|
export { Icon, iconVariants, IconPencilMinus };
|
|
@@ -25,6 +25,14 @@ type Config = {
|
|
|
25
25
|
uppercase: boolean;
|
|
26
26
|
textAlignment: string;
|
|
27
27
|
cornerRadius: number;
|
|
28
|
+
defaultText?: string;
|
|
29
|
+
defaultTextColor?: string;
|
|
30
|
+
defaultBackgroundColor?: string;
|
|
31
|
+
defaultBorderColor?: string;
|
|
32
|
+
soldOutText?: string;
|
|
33
|
+
soldOutTextColor?: string;
|
|
34
|
+
soldOutBackgroundColor?: string;
|
|
35
|
+
soldOutBorderColor?: string;
|
|
28
36
|
};
|
|
29
37
|
favoritesIcon?: {
|
|
30
38
|
enabled: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAQ1C,KAAK,MAAM,GAAG;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,YAAY,EAAE,MAAM,CAAA;QACpB,iBAAiB,EAAE,OAAO,CAAA;KAC3B,CAAA;IACD,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAA;KAClD,CAAA;IACD,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,OAAO,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,EAAE,OAAO,CAAA;KAClB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,OAAO,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -190,7 +190,12 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
190
190
|
const imageSwipeEnabled = ((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.allowSwipeability) && product.images.length > 1;
|
|
191
191
|
return (_jsx("div", Object.assign({ className: cn("w-1/2", className) }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70 cursor-pointer", onClick: () => {
|
|
192
192
|
_openProduct();
|
|
193
|
-
}
|
|
193
|
+
}, onKeyDown: (e) => {
|
|
194
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
195
|
+
e.preventDefault();
|
|
196
|
+
_openProduct();
|
|
197
|
+
}
|
|
198
|
+
}, role: "button", tabIndex: 0 }, { children: [((_f = config.productImage) === null || _f === void 0 ? void 0 : _f.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
|
|
194
199
|
borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
|
|
195
200
|
borderTopRightRadius: `${config.productImage.cornerRadius}px`,
|
|
196
201
|
borderBottomLeftRadius: `${((_g = config.quickAdd) === null || _g === void 0 ? void 0 : _g.enabled)
|
|
@@ -223,13 +228,35 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
223
228
|
imageSwipeEnabled,
|
|
224
229
|
})), selected: favorited, onClick: (e) => {
|
|
225
230
|
onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
|
|
226
|
-
}, iconUrl: (_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.url, layoutType: (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.layoutType, showBackground: (_s = config.favoritesIcon) === null || _s === void 0 ? void 0 : _s.showBackground, cornerRadius: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.cornerRadius }))] }))), ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
231
|
+
}, iconUrl: (_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.url, layoutType: (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.layoutType, showBackground: (_s = config.favoritesIcon) === null || _s === void 0 ? void 0 : _s.showBackground, cornerRadius: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.cornerRadius }))] }))), ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: Object.assign({ borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`, borderBottomRightRadius: `${config.quickAdd.cornerRadius}px` }, (product.availableForSale
|
|
232
|
+
? {
|
|
233
|
+
backgroundColor: config.quickAdd.defaultBackgroundColor || undefined,
|
|
234
|
+
borderColor: config.quickAdd.defaultBorderColor || undefined,
|
|
235
|
+
color: config.quickAdd.defaultTextColor || undefined,
|
|
236
|
+
}
|
|
237
|
+
: {
|
|
238
|
+
backgroundColor: config.quickAdd.soldOutBackgroundColor || undefined,
|
|
239
|
+
borderColor: config.quickAdd.soldOutBorderColor || undefined,
|
|
240
|
+
color: config.quickAdd.soldOutTextColor || undefined,
|
|
241
|
+
})), labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: {
|
|
242
|
+
fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize,
|
|
243
|
+
color: product.availableForSale
|
|
244
|
+
? config.quickAdd.defaultTextColor || undefined
|
|
245
|
+
: config.quickAdd.soldOutTextColor || undefined,
|
|
246
|
+
}, variant: "quickadd", size: "default", disabled: product.availableForSale === false, onClick: (e) => {
|
|
230
247
|
e.stopPropagation();
|
|
231
248
|
onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
|
|
232
|
-
} }, { children: _jsxs("div", Object.assign({ className: "flex items-center justify-center gap-2"
|
|
249
|
+
} }, { children: _jsxs("div", Object.assign({ className: "flex items-center justify-center gap-2", style: {
|
|
250
|
+
color: product.availableForSale
|
|
251
|
+
? config.quickAdd.defaultTextColor || undefined
|
|
252
|
+
: config.quickAdd.soldOutTextColor || undefined,
|
|
253
|
+
} }, { children: [_jsx(Icon, { name: product.availableForSale ? "plus" : "shopping-cart-off", size: "xs", style: {
|
|
254
|
+
color: product.availableForSale
|
|
255
|
+
? config.quickAdd.defaultTextColor || undefined
|
|
256
|
+
: config.quickAdd.soldOutTextColor || undefined,
|
|
257
|
+
} }), product.availableForSale
|
|
258
|
+
? config.quickAdd.defaultText || "Quick Add"
|
|
259
|
+
: config.quickAdd.soldOutText || "Sold Out"] })) }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
|
|
233
260
|
"justify-end": belowBadge.horizontalPosition === "end",
|
|
234
261
|
}) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.uppercase }, {
|
|
235
262
|
"text-left": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "left",
|
|
@@ -41,7 +41,7 @@ const Slider = React.forwardRef((_a, ref) => {
|
|
|
41
41
|
const debouncedSliderVal = useDebounce(value, 200);
|
|
42
42
|
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "mt-3 mb-6" }, { children: _jsxs(SliderPrimitive.Root, Object.assign({ ref: ref, className: cn("flex relative h-0.5 w-auto items-center select-none", className), onValueChange: (value) => onChange(value), onValueCommit: (value) => {
|
|
43
43
|
handleCommit(value);
|
|
44
|
-
}, defaultValue: defaultValue, value: value, max: max, min: min, step: step }, props, { children: [_jsx(SliderPrimitive.Track, Object.assign({ className: "relative h-1 rounded w-full grow overflow-hidden bg-coreColors-dividingLines" }, { children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-coreColors-brandColorPrimary" }) })), _jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-coreColors-brandColorPrimary bg-coreColors-modalBackground focus-visible:outline-none disabled:pointer-events-none" })] })) })), _jsxs("div", Object.assign({ className: "flex w-auto gap-4 " }, { children: [doubleValue && doubleValue == true ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "w-full px-4 py-2 border bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Minimum" })), _jsxs("div", Object.assign({ className: "flex text-textColors-primaryColor text-[14px]" }, { children: ["$", min] }))] })) })), _jsx("div", { className: "w-4 h-0 self-center border-2 bg-coreColors-dividingLines" })] })) : (""), _jsx("div", Object.assign({ className: "w-full px-4 py-2 outline outline-1 outline-coreColors-dividingLines rounded bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "flex items-center h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Maximum" })), _jsxs("div", Object.assign({ className: "flex h-6 text-textColors-primaryColor text-[14px] w-full [&>div]:w-full" }, { children: ["$", _jsx(Input, { className: "border-0
|
|
44
|
+
}, defaultValue: defaultValue, value: value, max: max, min: min, step: step }, props, { children: [_jsx(SliderPrimitive.Track, Object.assign({ className: "relative h-1 rounded w-full grow overflow-hidden bg-coreColors-dividingLines" }, { children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-coreColors-brandColorPrimary" }) })), _jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-coreColors-brandColorPrimary bg-coreColors-modalBackground focus-visible:outline-none disabled:pointer-events-none" })] })) })), _jsxs("div", Object.assign({ className: "flex w-auto gap-4 " }, { children: [doubleValue && doubleValue == true ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "w-full px-4 py-2 border bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Minimum" })), _jsxs("div", Object.assign({ className: "flex text-textColors-primaryColor text-[14px]" }, { children: ["$", min] }))] })) })), _jsx("div", { className: "w-4 h-0 self-center border-2 bg-coreColors-dividingLines" })] })) : (""), _jsx("div", Object.assign({ className: "w-full px-4 py-2 outline outline-1 outline-coreColors-dividingLines rounded bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "flex items-center h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Maximum" })), _jsxs("div", Object.assign({ className: "flex h-6 text-textColors-primaryColor text-[14px] w-full [&>div]:w-full" }, { children: ["$", _jsx(Input, { className: "border-0 pl-1 pr-0 py-0 h-full w-full text-[14px]", id: "slider-maximum", value: debouncedSliderVal[0].toString(), placeholder: defaultValue[0].toString(), onChange: (value) => {
|
|
45
45
|
const inputValue = Number(value);
|
|
46
46
|
inputValue > max ? onChange([max]) : onChange([inputValue]);
|
|
47
47
|
} })] }))] })) }))] }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"star-rating.d.ts","sourceRoot":"","sources":["../../../components/ui/star-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;CACzC;AAED,QAAA,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"star-rating.d.ts","sourceRoot":"","sources":["../../../components/ui/star-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;CACzC;AAED,QAAA,MAAM,UAAU,wFAqGf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}
|
|
@@ -9,24 +9,44 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import * as React from "react";
|
|
14
14
|
import { cn } from "../../lib/utils";
|
|
15
15
|
import { Icon } from "./icon";
|
|
16
16
|
const StarRating = React.forwardRef((_a, ref) => {
|
|
17
|
-
var { className, score, iconSize = "sm", iconUrl, filledColor
|
|
17
|
+
var { className, score, iconSize = "sm", iconUrl, filledColor = "#facc15", // default to yellow-400
|
|
18
|
+
emptyColor = "#e5e7eb", // default to gray-200
|
|
19
|
+
designOptions } = _a, props = __rest(_a, ["className", "score", "iconSize", "iconUrl", "filledColor", "emptyColor", "designOptions"]);
|
|
20
|
+
const getIconProps = (isFilled) => {
|
|
21
|
+
if (iconUrl) {
|
|
22
|
+
return { url: iconUrl };
|
|
23
|
+
}
|
|
24
|
+
return { name: isFilled ? "star-filled" : "star" };
|
|
25
|
+
};
|
|
18
26
|
if (designOptions === "condensed") {
|
|
19
|
-
return _jsx(Icon, { size: iconSize,
|
|
27
|
+
return (_jsx(Icon, Object.assign({ size: iconSize }, getIconProps(score > 0), { color: score > 0 ? filledColor : emptyColor })));
|
|
20
28
|
}
|
|
21
29
|
return (_jsx("div", Object.assign({ className: cn("flex flex-row gap-1", className), ref: ref }, props, { children: Array.from({ length: 5 }).map((_, index) => {
|
|
22
|
-
|
|
23
|
-
|
|
30
|
+
const starNumber = index + 1;
|
|
31
|
+
if (score >= starNumber) {
|
|
32
|
+
// Fully filled star
|
|
33
|
+
return (_jsx(Icon, Object.assign({ size: iconSize }, getIconProps(true), { color: filledColor }), index));
|
|
24
34
|
}
|
|
25
|
-
else if (index
|
|
26
|
-
|
|
35
|
+
else if (score > index && score < starNumber) {
|
|
36
|
+
// Partial star - create overlay effect
|
|
37
|
+
const fillPercentage = score - index;
|
|
38
|
+
if (iconUrl) {
|
|
39
|
+
// Use fillPercentage for custom icons
|
|
40
|
+
return (_jsx(Icon, { size: iconSize, url: iconUrl, fillColor: filledColor, secondaryFillColor: emptyColor, fillPercentage: fillPercentage }, index));
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
// For Tabler icons, create overlay effect
|
|
44
|
+
return (_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx(Icon, { size: iconSize, name: "star", color: emptyColor }), _jsx("div", Object.assign({ className: "absolute inset-0 overflow-hidden", style: { width: `${fillPercentage * 100}%` } }, { children: _jsx(Icon, { size: iconSize, name: "star-filled", color: filledColor }) }))] }), index));
|
|
45
|
+
}
|
|
27
46
|
}
|
|
28
47
|
else {
|
|
29
|
-
|
|
48
|
+
// Empty star
|
|
49
|
+
return (_jsx(Icon, Object.assign({ size: iconSize }, getIconProps(false), { color: emptyColor }), index));
|
|
30
50
|
}
|
|
31
51
|
}) })));
|
|
32
52
|
});
|
package/dist/styles.css
CHANGED
|
@@ -1913,6 +1913,9 @@ video {
|
|
|
1913
1913
|
.pl-0 {
|
|
1914
1914
|
padding-left: 0px;
|
|
1915
1915
|
}
|
|
1916
|
+
.pl-1 {
|
|
1917
|
+
padding-left: 0.25rem;
|
|
1918
|
+
}
|
|
1916
1919
|
.pl-2 {
|
|
1917
1920
|
padding-left: 0.5rem;
|
|
1918
1921
|
}
|
|
@@ -1925,6 +1928,9 @@ video {
|
|
|
1925
1928
|
.pl-8 {
|
|
1926
1929
|
padding-left: 2rem;
|
|
1927
1930
|
}
|
|
1931
|
+
.pr-0 {
|
|
1932
|
+
padding-right: 0px;
|
|
1933
|
+
}
|
|
1928
1934
|
.pr-1 {
|
|
1929
1935
|
padding-right: 0.25rem;
|
|
1930
1936
|
}
|