@tapcart/mobile-components 0.8.68 → 0.8.72

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.
Files changed (9) hide show
  1. package/dist/components/ui/button.d.ts.map +1 -1
  2. package/dist/components/ui/button.js +16 -3
  3. package/dist/components/ui/html.d.ts +2 -1
  4. package/dist/components/ui/html.d.ts.map +1 -1
  5. package/dist/components/ui/html.js +3 -2
  6. package/dist/components/ui/quantity-picker.d.ts.map +1 -1
  7. package/dist/components/ui/quantity-picker.js +11 -66
  8. package/dist/styles.css +9 -11
  9. package/package.json +1 -1
package/dist/components/ui/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAMxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACvD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,MAAM;2MAmBT,WAAW;;CA6Fb,CAAA;AAID,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAOxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACvD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,MAAM;2MAmBT,WAAW;;CAuIb,CAAA;AAID,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
package/dist/components/ui/button.js CHANGED
@@ -16,7 +16,8 @@ import { Slot } from "@radix-ui/react-slot";
16
16
  import { cva } from "class-variance-authority";
17
17
  import { cn, getColor, getTextStyle, getBackgroundAndPaddingStyle, } from "../../lib/utils";
18
18
  import { Icon } from "./icon";
19
- import { Text } from "./text";
19
+ import { Text, textVariants } from "./text";
20
+ import { Html } from "./html";
20
21
  // @ts-ignore -- webbridge-react is not typed (yet)
21
22
  import { useActions } from "@tapcart/app-studio-sdk";
22
23
  const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate disabled:opacity-70 cursor-pointer", {
@@ -108,11 +109,23 @@ const Button = (_a) => {
108
109
  }
109
110
  }
110
111
  : undefined;
112
+ // Check if children is an Html component
113
+ const isHtmlComponent = React.isValidElement(props.children) && props.children.type === Html;
114
+ const HtmlButton = () => {
115
+ var _a, _b;
116
+ return (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: iconSize ? iconSize : "sm", className: cn(iconVariants({ variant }), {
117
+ "mr-2": iconPosition === "left",
118
+ "ml-2": iconPosition === "right",
119
+ }, iconClassName), style: { color: iconColor } })) : null, !loading && React.isValidElement(props.children) ? (React.cloneElement(props.children, {
120
+ className: cn(textVariants({ type: "body-primary" }), labelVariants({ variant }), labelClassName, (_a = props.children.props) === null || _a === void 0 ? void 0 : _a.className),
121
+ style: Object.assign(Object.assign({}, labelStyle), (_b = props.children.props) === null || _b === void 0 ? void 0 : _b.style),
122
+ })) : (_jsx(_Fragment, {}))] }));
123
+ };
111
124
  return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
112
125
  "pointer-events-none": loading,
113
126
  "flex-row-reverse": (icon || iconUrl) && iconPosition === "right",
114
- }), onClick: handleClick }, Object.assign({ type }, props), { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
115
- React.isValidElement(props.children) ? ( // if children are passed as a valid React element
127
+ }), onClick: handleClick }, Object.assign({ type }, props), { children: loading ? (_jsx(LoadingButton, {})) : isHtmlComponent ? ( // if children is Html component, use HtmlButton with icon logic
128
+ _jsx(HtmlButton, {})) : React.isValidElement(props.children) ? ( // if children are passed as a valid React element
116
129
  props.children // render it
117
130
  ) : // otherwise use props
118
131
  size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
package/dist/components/ui/html.d.ts CHANGED
@@ -3,7 +3,8 @@ interface HtmlProps {
3
3
  className?: any;
4
4
  style?: React.CSSProperties;
5
5
  html: string;
6
+ disableDefaultClasses?: boolean;
6
7
  }
7
- declare function Html({ className, style, html }: HtmlProps): import("react/jsx-runtime").JSX.Element;
8
+ declare function Html({ className, style, html, disableDefaultClasses, }: HtmlProps): import("react/jsx-runtime").JSX.Element;
8
9
  export { Html };
9
10
  //# sourceMappingURL=html.d.ts.map
package/dist/components/ui/html.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../components/ui/html.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,IAAI,CAAC,EAAE,SAAc,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,2CAyBvD;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../components/ui/html.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,iBAAS,IAAI,CAAC,EACZ,SAAc,EACd,KAAK,EACL,IAAI,EACJ,qBAA6B,GAC9B,EAAE,SAAS,2CAyBX;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
package/dist/components/ui/html.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import DOMPurify from "dompurify";
3
3
  import { cn } from "../../lib/utils";
4
- function Html({ className = "", style, html }) {
4
+ function Html({ className = "", style, html, disableDefaultClasses = false, }) {
5
5
  // Configure DOMPurify to allow iframes and their common attributes
6
6
  const cleanHtml = DOMPurify.sanitize(html, {
7
7
  ADD_TAGS: ["iframe"],
@@ -15,6 +15,7 @@ function Html({ className = "", style, html }) {
15
15
  "height",
16
16
  ],
17
17
  });
18
- return (_jsx("div", { className: cn(className, "grid [&>ul]:list-disc [&>ol]:list-decimal [&>ul]:pl-5 [&>ul>li]:py-1 space-y-1 [&>b]:py-2 [&>p]:py-2"), style: style, dangerouslySetInnerHTML: { __html: cleanHtml } }));
18
+ const defaultClasses = "grid [&>ul]:list-disc [&>ol]:list-decimal [&>ul]:pl-5 [&>ul>li]:py-1 space-y-1 [&>b]:py-2 [&>p]:py-2";
19
+ return (_jsx("div", { className: cn(disableDefaultClasses ? "" : defaultClasses, className), style: style, dangerouslySetInnerHTML: { __html: cleanHtml } }));
19
20
  }
20
21
  export { Html };
package/dist/components/ui/quantity-picker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA4FD,QAAA,MAAM,cAAc,4FA8HnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
1
+ {"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAmCD,QAAA,MAAM,cAAc,4FAuGnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
package/dist/components/ui/quantity-picker.js CHANGED
@@ -10,47 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  }
11
11
  return t;
12
12
  };
13
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
13
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
14
14
  import * as React from "react";
15
- import { cn } from "../../lib/utils";
15
+ import { cn, } from "../../lib/utils";
16
16
  import { Icon } from "./icon";
17
- import { LoadingDots } from "./loading-dots";
18
- // @ts-ignore -- webbridge-react is not typed (yet)
19
- import { useActions } from "@tapcart/app-studio-sdk";
20
- const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled, disableHaptic = false, }) => {
21
- const [isButtonPressed, setIsButtonPressed] = React.useState(false);
22
- const { action } = useActions();
23
- const handleClick = (e) => {
24
- try {
25
- handler(e);
26
- if (!disableHaptic) {
27
- action("trigger/haptic");
28
- }
29
- }
30
- catch (error) {
31
- console.error(error);
32
- }
33
- };
34
- // Handle press state manually for the invisible button
35
- const handleMouseDown = React.useCallback(() => {
36
- if (!disabled)
37
- setIsButtonPressed(true);
38
- }, [disabled]);
39
- const handleMouseUp = React.useCallback(() => {
40
- setIsButtonPressed(false);
41
- }, []);
42
- // Calculate the visual styles for the button
17
+ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
43
18
  const visualButtonStyle = Object.assign({}, style);
44
- return (_jsxs("div", Object.assign({ className: "relative h-7 w-7", style: { touchAction: "manipulation" } }, { children: [_jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center bg-stateColors-skeleton border border-coreColors-dividingLines", className, disabled ? "opacity-50" : ""), style: visualButtonStyle, "aria-hidden": "true" }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4, style: {
45
- opacity: isButtonPressed ? 0.7 : 1,
46
- } }) })), _jsx("button", { onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, className: "absolute cursor-pointer", style: {
47
- top: "-8px",
48
- right: "-8px",
49
- bottom: "-8px",
50
- left: "-8px",
51
- opacity: 0,
52
- zIndex: 10,
53
- }, disabled: disabled, "aria-label": "Quantity button" })] })));
19
+ return (_jsx("button", Object.assign({ className: "relative h-7 w-7 cursor-pointer", onClick: handler, "aria-label": "Quantity button" }, { children: _jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center", className, disabled ? "opacity-50" : ""), style: visualButtonStyle, "aria-hidden": "true" }, { children: _jsx(Icon, { url: iconUrl, size: "xs", strokeColor: iconColor, strokeWidth: 4 }) })) })));
54
20
  };
55
21
  const QuantityPicker = React.forwardRef((_a, ref) => {
56
22
  var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, setValue, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "setValue", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading"]);
@@ -61,40 +27,19 @@ const QuantityPicker = React.forwardRef((_a, ref) => {
61
27
  setLocalValue(value.toString());
62
28
  }
63
29
  }, [value, isFocused]);
64
- const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
30
+ const numberInputStyle = Object.assign({ display: "flex", width: "28px", height: "28px", border: "1px solid #E3E3E3", borderRadius: "8px", textAlign: "center", alignItems: "center", justifyContent: "center", fontSize: "14px" }, inputStyle);
31
+ const leftButtonStyle = Object.assign({ borderTopLeftRadius: buttonCornerRadius
65
32
  ? `${buttonCornerRadius}px`
66
33
  : undefined, borderBottomLeftRadius: buttonCornerRadius
67
34
  ? `${buttonCornerRadius}px`
68
- : undefined });
69
- const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius
35
+ : undefined }, buttonStyle);
36
+ const rightButtonStyle = Object.assign({ borderTopRightRadius: buttonCornerRadius
70
37
  ? `${buttonCornerRadius}px`
71
38
  : undefined, borderBottomRightRadius: buttonCornerRadius
72
39
  ? `${buttonCornerRadius}px`
73
- : undefined });
74
- const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
75
- return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localValue, onBlur: (e) => {
76
- setIsFocused(false);
77
- const parsedValue = parseInt(e.target.value) || 0;
78
- const clampedValue = Math.min(parsedValue, max);
79
- setValue(clampedValue);
80
- setLocalValue(clampedValue.toString());
81
- }, onFocus: () => {
82
- setIsFocused(true);
83
- }, onChange: (e) => {
84
- const inputValue = e.target.value;
85
- if (inputValue === "") {
86
- setLocalValue("");
87
- }
88
- else {
89
- const parsedValue = parseInt(inputValue);
90
- if (!isNaN(parsedValue)) {
91
- const clampedValue = Math.min(parsedValue, max);
92
- setLocalValue(clampedValue.toString());
93
- }
94
- }
95
- }, className: "w-8 h-7 focus-visible:outline-none text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
96
- ? `${inputStyle.borderRadius}px`
97
- : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
40
+ : undefined }, buttonStyle);
41
+ const singleButtonStyle = Object.assign({ borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined }, buttonStyle);
42
+ return (_jsx("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("div", Object.assign({ style: numberInputStyle }, { children: _jsx("span", { children: localValue }) })), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading })] })) })));
98
43
  });
99
44
  QuantityPicker.displayName = "QuantityPicker";
100
45
  export { QuantityPicker };
package/dist/styles.css CHANGED
@@ -790,9 +790,6 @@ video {
790
790
  .z-30 {
791
791
  z-index: 30;
792
792
  }
793
- .z-40 {
794
- z-index: 40;
795
- }
796
793
  .z-50 {
797
794
  z-index: 50;
798
795
  }
@@ -1060,6 +1057,9 @@ video {
1060
1057
  .h-\[30vh\] {
1061
1058
  height: 30vh;
1062
1059
  }
1060
+ .h-\[350px\] {
1061
+ height: 350px;
1062
+ }
1063
1063
  .h-\[38px\] {
1064
1064
  height: 38px;
1065
1065
  }
@@ -1216,6 +1216,9 @@ video {
1216
1216
  .min-w-16 {
1217
1217
  min-width: 4rem;
1218
1218
  }
1219
+ .min-w-\[200px\] {
1220
+ min-width: 200px;
1221
+ }
1219
1222
  .min-w-\[8rem\] {
1220
1223
  min-width: 8rem;
1221
1224
  }
@@ -1450,6 +1453,9 @@ video {
1450
1453
  .items-center {
1451
1454
  align-items: center;
1452
1455
  }
1456
+ .items-baseline {
1457
+ align-items: baseline;
1458
+ }
1453
1459
  .items-stretch {
1454
1460
  align-items: stretch;
1455
1461
  }
@@ -1609,9 +1615,6 @@ video {
1609
1615
  .rounded-sm {
1610
1616
  border-radius: calc(var(--radius) - 4px);
1611
1617
  }
1612
- .rounded-xl {
1613
- border-radius: 0.75rem;
1614
- }
1615
1618
  .rounded-b-lg {
1616
1619
  border-bottom-right-radius: var(--radius);
1617
1620
  border-bottom-left-radius: var(--radius);
@@ -2370,11 +2373,6 @@ video {
2370
2373
  .filter {
2371
2374
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2372
2375
  }
2373
- .backdrop-blur-md {
2374
- --tw-backdrop-blur: blur(12px);
2375
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2376
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2377
- }
2378
2376
  .transition {
2379
2377
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2380
2378
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.8.68",
3
+ "version": "0.8.72",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",