@tapcart/mobile-components 0.4.2 → 0.4.4

package/dist/components/hooks/use-infinite-scroll.d.ts

@@ -5,10 +5,10 @@ interface PageData {
     products: Product[];
     cursorBlob?: string;
     filtersData: any;
+    apiURL: string;
 }
 interface UseInfiniteScrollProps {
     initialData: PageData;
-    loadMoreProducts: (params: any) => Promise<PageData>;
     queryVariables: Record<string, any>;
 }
 interface UseInfiniteScrollReturn {
@@ -23,6 +23,7 @@ interface UseInfiniteScrollReturn {
     isLoading: boolean;
     isValidating: boolean;
 }
-declare const useInfiniteScroll: ({ initialData, loadMoreProducts, queryVariables: queryVariableProps, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
-export { useInfiniteScroll };
+declare const constructURL: (params: Record<string, any>, apiURL: string) => string;
+declare const useInfiniteScroll: ({ initialData, queryVariables: queryVariableProps, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
+export { useInfiniteScroll, constructURL };
 //# sourceMappingURL=use-infinite-scroll.d.ts.map

package/dist/components/hooks/use-infinite-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;CACjB;AAOD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,CAAA;IACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AA0CD,QAAA,MAAM,iBAAiB,2EAIpB,sBAAsB,KAAG,uBA+F3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf;AAOD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AA2CD,QAAA,MAAM,YAAY,WAAY,OAAO,MAAM,EAAE,GAAG,CAAC,UAAU,MAAM,WAahE,CAAA;AAqBD,QAAA,MAAM,iBAAiB,yDAGpB,sBAAsB,KAAG,uBAoF3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/hooks/use-infinite-scroll.js

@@ -7,8 +7,7 @@ const PAGE_SIZE = 8;
 const parseSort = (json) => {
     return json ? JSON.parse(json) : undefined;
 };
-// @ts-expect-error
-const reconcileFilters = ({ selectedFilters, filtersData }) => {
+const reconcileFilters = ({ selectedFilters = "[]", filtersData = [] }) => {
     if (!selectedFilters)
         throw new Error("No filters provided");
     const filtersArray = selectedFilters ? JSON.parse(selectedFilters) : undefined;
@@ -20,6 +19,8 @@ const reconcileFilters = ({ selectedFilters, filtersData }) => {
     });
     const matchingFilters = (filtersList, selectedTags) => {
         return filtersList.filter((filter) => {
+            if (!(filter === null || filter === void 0 ? void 0 : filter.tag))
+                return false;
             const parsedFilter = filter.tag;
             return selectedTags.has(parsedFilter);
         });
@@ -34,7 +35,30 @@ const reconcileFilters = ({ selectedFilters, filtersData }) => {
         filtersData,
     };
 };
-const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: queryVariableProps, }) => {
+const constructURL = (params, apiURL) => {
+    const url = new URL(apiURL);
+    Object.keys(params).forEach((key) => {
+        const value = params[key];
+        if (value !== undefined && value !== null) {
+            if (typeof value === "string") {
+                url.searchParams.append(key, value);
+            }
+            else {
+                url.searchParams.append(key, JSON.stringify(value));
+            }
+        }
+    });
+    return url.toString();
+};
+const getKey = (pageIndex, previousPageData, queryVariables, apiURL) => {
+    var _a;
+    if (pageIndex === 0)
+        return constructURL(queryVariables, apiURL);
+    if (!previousPageData || !((_a = previousPageData.pageData) === null || _a === void 0 ? void 0 : _a.cursorBlob))
+        return null;
+    return constructURL(Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob }), apiURL);
+};
+const useInfiniteScroll = ({ initialData, queryVariables: queryVariableProps, }) => {
     var _a, _b, _c, _d;
     const searchParams = useSearchParams();
     const sortStateFromParam = useCallback(() => {
@@ -56,15 +80,8 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: quer
         sortStateFromParam,
     ]);
     const { ref, inView } = useInView({ rootMargin: "600px" }); // controls how early the next page loads
-    const getKey = (pageIndex, previousPageData) => {
-        var _a;
-        if (pageIndex === 0)
-            return queryVariables;
-        if (!previousPageData || !((_a = previousPageData.pageData) === null || _a === void 0 ? void 0 : _a.cursorBlob))
-            return null;
-        return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob });
-    };
-    const { data, error, size, setSize, isLoading, isValidating, } = useSWRInfinite(getKey, loadMoreProducts, {
+    const fetcher = (url) => fetch(url).then((res) => res.json());
+    const { data, error, size, setSize, isLoading, isValidating, } = useSWRInfinite((pageIndex, previousPageData) => getKey(pageIndex, previousPageData, queryVariables, initialData.apiURL), fetcher, {
         revalidateFirstPage: false,
         initialSize: 1,
     });
@@ -76,20 +93,17 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: quer
         ? !((_d = (_c = data[data.length - 1]) === null || _c === void 0 ? void 0 : _c.pageData) === null || _d === void 0 ? void 0 : _d.cursorBlob)
         : true;
     const isReachingEnd = isEmpty || isEndPointer;
+    const isRefreshing = isValidating && data && data.length === size;
     const loadMore = useCallback(() => {
-        if (!isLoadingMore && !isReachingEnd) {
+        if (!isLoadingMore && !isReachingEnd && !isRefreshing) {
             setSize(size + 1);
         }
-    }, [isLoadingMore, isReachingEnd, size, setSize]);
+    }, [isLoadingMore, isReachingEnd, isRefreshing, setSize, size]);
     useEffect(() => {
         if (inView) {
             loadMore();
         }
     }, [inView, loadMore]);
-    // Trigger a new page load when the query variables change
-    useEffect(() => {
-        setSize(1);
-    }, [queryVariables, setSize]);
     return {
         data,
         error,
@@ -103,4 +117,4 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: quer
         isValidating,
     };
 };
-export { useInfiniteScroll };
+export { useInfiniteScroll, constructURL };

package/dist/components/ui/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/ui/Input/index.js

@@ -0,0 +1 @@
+export * from './input';

package/dist/components/ui/Input/input.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { InputProps } from "../../../components/ui/Input/types";
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/Input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,QAAA,MAAM,KAAK,qFAiIV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/Input/input.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { inputVariants, useInput } from "./useInput";
+import { cn } from "../../../lib/utils";
+import { Icon } from "../icon";
+const Input = React.forwardRef((_a, ref) => {
+    var { className, error = false, id, type, label, asChild, value, onChange, icon, iconPosition = "right", // Default to "right" for backward compatibility
+    iconColor, placeholder, placeholderFont, placeholderFontWeight, placeholderFontSize, placeholderTextAlign, placeholderTextColor, placeholderUpperCase, inputPadding, backgroundColor, borderRadius, inputBorderColor, borderSides, inputSpacing } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "asChild", "value", "onChange", "icon", "iconPosition", "iconColor", "placeholder", "placeholderFont", "placeholderFontWeight", "placeholderFontSize", "placeholderTextAlign", "placeholderTextColor", "placeholderUpperCase", "inputPadding", "backgroundColor", "borderRadius", "inputBorderColor", "borderSides", "inputSpacing"]);
+    const { Comp, inputPaddingRight, inputPaddingLeft, borderStyle, borderRadiusStyle, iconLeftPadding, iconRightPadding, iconTopPadding, iconBottomPadding, placeholderTextColorStyle, iconColorStyle, inputBgColor, inputBorderColorStyle, } = useInput({
+        asChild,
+        icon,
+        iconPosition,
+        iconColor,
+        className,
+        backgroundColor,
+        borderRadius,
+        inputBorderColor,
+        borderSides,
+        inputSpacing,
+        inputPadding,
+        placeholderTextColor,
+    });
+    return (_jsxs(Comp, Object.assign({ className: "relative flex items-center group" }, { children: [icon && iconPosition === "left" && (_jsx(Icon, { name: icon, "data-error": error, size: "sm", color: iconColorStyle !== "inherit" ? undefined : "coreColors-secondaryIcon", className: cn("flex items-center absolute aspect-square fill-current z-10 icon ", {
+                    "w-5": true,
+                    "text-stateColors-error": error,
+                }), style: {
+                    left: iconLeftPadding,
+                    right: iconRightPadding,
+                    top: iconTopPadding,
+                    bottom: iconBottomPadding,
+                    color: iconColorStyle,
+                } })), _jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error, hasLabel: !!label }), className), "data-icon": !!icon, ref: ref }, props, { style: Object.assign(Object.assign({ paddingLeft: inputPaddingLeft, paddingRight: inputPaddingRight, fontFamily: placeholderFont, fontWeight: placeholderFontWeight, fontSize: `${placeholderFontSize}px`, textAlign: placeholderTextAlign, color: placeholderTextColorStyle, textTransform: placeholderUpperCase ? "uppercase" : undefined, borderColor: inputBorderColorStyle, paddingTop: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top, paddingBottom: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom, backgroundColor: inputBgColor }, borderStyle), (label ? { borderRadius: "8px" } : borderRadiusStyle)) })), label ? (_jsx("label", Object.assign({ htmlFor: id, className: cn("absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] opacity-100 peer-placeholder-shown:opacity-0", iconPosition === "left" ? "start-10" : "start-4") }, { children: label }))) : null, icon && iconPosition === "right" && (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" }))] })));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/Input/types.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { VariantProps } from "class-variance-authority";
+import { inputVariants } from "../../../components/ui/Input/useInput";
+import { Color } from "../../../lib/utils";
+export type BorderSides = ("all" | "bottom" | "left" | "right" | "top")[];
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
+    id: string;
+    label?: string;
+    asChild?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    iconColor?: Color;
+    placeholder: string;
+    placeholderFont?: string;
+    placeholderFontWeight?: string;
+    placeholderFontSize?: number;
+    placeholderTextAlign?: "left" | "center" | "right";
+    placeholderTextColor?: Color;
+    placeholderUpperCase?: boolean;
+    backgroundColor?: Color;
+    borderRadius?: number;
+    inputBorderColor?: Color;
+    borderSides?: BorderSides;
+    inputPadding?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    inputSpacing?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ui/Input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;AAE1E,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnD,oBAAoB,CAAC,EAAE,KAAK,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;KAAE,CAAC;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/ui/Input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Input/useInput.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { InputProps } from "../../../components/ui/Input/types";
+export declare const DEFAULT_ICON_SIZE = 20;
+export declare const DEFAULT_X_PADDING = 12;
+export declare const DEFAULT_Y_PADDING = 8;
+export declare const inputVariants: (props?: ({
+    hasLabel?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const useInput: (props: Pick<InputProps, "asChild" | "icon" | "iconPosition" | "iconColor" | "className" | "backgroundColor" | "borderRadius" | "inputBorderColor" | "borderSides" | "inputSpacing" | "inputPadding" | "placeholderTextColor">) => {
+    Comp: string | import("react").ForwardRefExoticComponent<import("@radix-ui/react-slot").SlotProps & import("react").RefAttributes<HTMLElement>>;
+    inputPaddingRight: string | undefined;
+    inputPaddingLeft: string | undefined;
+    borderStyle: {
+        borderWidth: string;
+        borderTopWidth?: undefined;
+        borderBottomWidth?: undefined;
+        borderLeftWidth?: undefined;
+        borderRightWidth?: undefined;
+    } | {
+        borderTopWidth: string | number;
+        borderBottomWidth: string | number;
+        borderLeftWidth: string | number;
+        borderRightWidth: string | number;
+        borderWidth?: undefined;
+    };
+    borderRadiusStyle: {
+        borderRadius: string;
+    } | {
+        borderRadius?: undefined;
+    };
+    iconLeftPadding: string;
+    iconRightPadding: string;
+    iconTopPadding: string;
+    iconBottomPadding: string;
+    placeholderTextColorStyle: string | undefined;
+    iconColorStyle: string | undefined;
+    inputBgColor: string | undefined;
+    inputBorderColorStyle: string | undefined;
+};
+//# sourceMappingURL=useInput.d.ts.map

package/dist/components/ui/Input/useInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInput.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/useInput.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,IAAI,CAAA;AAElC,eAAO,MAAM,aAAa;;;mFAkBzB,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,KAAK,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,cAAc,GAAG,WAAW,GAAG,WAAW,GAAG,iBAAiB,GAAG,cAAc,GAAG,kBAAkB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,sBAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkErP,CAAA"}

package/dist/components/ui/Input/useInput.js

@@ -0,0 +1,69 @@
+import { getColor } from "../../../lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+export const DEFAULT_ICON_SIZE = 20;
+export const DEFAULT_X_PADDING = 12;
+export const DEFAULT_Y_PADDING = 8;
+export const inputVariants = cva("flex w-full border border-coreColors-dividingLines bg-coreColors-inputBackground text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
+    variants: {
+        hasLabel: {
+            true: "h-14 px-4 rounded pt-5 pb-2 placeholder-shown:p-4",
+            false: "pl-10 pr-4 py-2",
+        },
+        error: {
+            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        error: false,
+        hasLabel: true,
+    },
+});
+export const useInput = (props) => {
+    const { asChild, icon, iconPosition = "right", // Default to "right" for backward compatibility
+    iconColor, placeholderTextColor, backgroundColor, borderRadius, inputBorderColor, borderSides = ["all"], inputPadding, inputSpacing = DEFAULT_X_PADDING, } = props;
+    const Comp = asChild ? Slot : "div";
+    const inputPaddingRight = icon && iconPosition === "right" ? (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.right) ? `${inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.right}px` : "2.5rem" : undefined;
+    const inputPaddingLeft = icon && iconPosition === "left"
+        ? (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) !== undefined && inputSpacing
+            ? `calc(${(inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) + inputSpacing + DEFAULT_ICON_SIZE}px)`
+            : (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left)
+                ? `calc(${(inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) + DEFAULT_ICON_SIZE + DEFAULT_Y_PADDING}px)`
+                : inputSpacing
+                    ? `calc(${inputSpacing + DEFAULT_X_PADDING + DEFAULT_ICON_SIZE}px)`
+                    : `calc(${DEFAULT_Y_PADDING + DEFAULT_X_PADDING + DEFAULT_ICON_SIZE}px)`
+        : undefined;
+    const borderStyle = borderSides.includes("all")
+        ? { borderWidth: "1px" }
+        : {
+            borderTopWidth: borderSides.includes("top") ? "1px" : 0,
+            borderBottomWidth: borderSides.includes("bottom") ? "1px" : 0,
+            borderLeftWidth: borderSides.includes("left") ? "1px" : 0,
+            borderRightWidth: borderSides.includes("right") ? "1px" : 0,
+        };
+    const borderRadiusStyle = borderRadius ? { borderRadius: `${borderRadius}px` } : {};
+    const iconLeftPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) !== undefined ? `${inputPadding.left}px` : `${DEFAULT_X_PADDING}px`;
+    const iconRightPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.right) !== undefined ? `${inputPadding.right}px` : `${DEFAULT_X_PADDING}px`;
+    const iconTopPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top) !== undefined ? `${inputPadding.top}px` : `${DEFAULT_Y_PADDING}px`;
+    const iconBottomPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom) !== undefined ? `${inputPadding.bottom}px` : `${DEFAULT_Y_PADDING}px`;
+    const iconColorStyle = getColor(iconColor);
+    const inputBgColor = getColor(backgroundColor);
+    const inputBorderColorStyle = getColor(inputBorderColor);
+    const placeholderTextColorStyle = getColor(placeholderTextColor);
+    return {
+        Comp,
+        inputPaddingRight,
+        inputPaddingLeft,
+        borderStyle,
+        borderRadiusStyle,
+        iconLeftPadding,
+        iconRightPadding,
+        iconTopPadding,
+        iconBottomPadding,
+        placeholderTextColorStyle,
+        iconColorStyle,
+        inputBgColor,
+        inputBorderColorStyle,
+    };
+};

package/dist/components/ui/button.d.ts

@@ -10,6 +10,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     icon?: string;
     labelClassName?: string;
     labelStyle?: React.CSSProperties | undefined;
+    iconColor?: string;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;CAC7C;AAED,QAAA,MAAM,MAAM,uFAoEX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,uFAuEX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -79,13 +79,13 @@ const labelVariants = cva("truncate", {
     },
 });
 const Button = React.forwardRef((_a, ref) => {
-    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon"]);
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor"]);
     const Comp = asChild ? Slot : "button";
     const IconButton = () => (icon ? _jsx(Icon, { name: icon, size: "sm" }) : null);
-    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), "mr-2") })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), "mr-2"), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
-        }), ref: ref }, props, { children: loading ? (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader" }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
+        }), ref: ref }, props, { children: loading ? (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/components/ui/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EA6BhB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAiDD,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,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EA8BhB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAkDD,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,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, } from "@tabler/icons-react";
+import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconSearch, } from "@tabler/icons-react";
 import { cn, iconColorVariantClasses } from "../../lib/utils";
 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", {
     variants: {
@@ -70,6 +70,7 @@ const icons = {
     "square-x-filled": IconSquareXFilled,
     trash: IconTrash,
     loader: IconLoader2,
+    "search": IconSearch
 };
 function Icon(_a) {
     var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);

package/dist/components/ui/image.d.ts

@@ -54,6 +54,9 @@ type TapcartImageBaseProps = {
      * "fill" maps to `object-fit: cover`
      */
     objectFit?: "fit" | "fill" | "cover" | "contain" | "none" | "scale-down";
+    /** An optional prop to set styles for the image wrapper
+     */
+    imageWrapperStyles?: any;
 };
 /**
  * Tapcart’s Image component is a wrapper around the HTML image element.

package/dist/components/ui/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAM1D,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAUD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAA;AAKrD,KAAK,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAChE,qBAAqB,CAAA;AAEvB,KAAK,qBAAqB,GAAG;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE;QAAE,iBAAiB,EAAE,IAAI,CAAA;KAAE,CAAC,CAAA;IAC1D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qFAAqF;IACrF,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAA;CACzE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,KAAK,yGAqKjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,WAAW,GACZ,EAAE,YAAY,UAiBd;AAiED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,GAAG,CAAC,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,KAAK,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC,EACpE,MAAM,GAAE,MAAsB,EAC9B,WAAW,UAAQ,GAClB,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,6BAA0B,EAC/B,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,GACpB,MAAM,EAAE,CAUV;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIzE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,WAAW,CAAC,EAAE,MAAM,EAAE,EACtB,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,GAAE,IAAe,GAEnB;IACE,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,IAAI,EAAE,IAAI,CAAA;CACX,EAAE,GACH,SAAS,CAUZ"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/image.js

@@ -49,12 +49,12 @@ import * as React from "react";
  */
 export const Image = React.forwardRef((_a, ref) => {
     var _b;
-    var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, srcSetOptions = {
+    var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, imageWrapperStyles, srcSetOptions = {
         intervals: 15,
         startingWidth: 100,
         incrementSize: 100,
         placeholderWidth: 100,
-    }, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "srcSetOptions", "width", "objectFit"]);
+    }, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "imageWrapperStyles", "srcSetOptions", "width", "objectFit"]);
     /*
      * Gets normalized values for width, height from data  prop
      */
@@ -135,9 +135,7 @@ export const Image = React.forwardRef((_a, ref) => {
         setHasError(true);
     };
     const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
-    const wrapperStyle = {
-        aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/"),
-    };
+    const wrapperStyle = Object.assign({ aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/") }, imageWrapperStyles);
     return (_jsx("div", Object.assign({ className: "relative bg-stateColors-skeleton border-transparent", style: wrapperStyle }, { children: !hasError && normalizedProps.src ? (_jsx("img", Object.assign({ ref: ref, alt: normalizedProps.alt, decoding: decoding, height: normalizedProps.height, loading: loading, src: normalizedProps.src, srcSet: generateSrcSet(normalizedProps.src, generateSizes(imageWidths, normalizedProps.aspectRatio, crop), loader, normalizedProps.objectFit === "contain"), width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes, style: {
                 objectFit: normalizedProps.objectFit,
                 maxHeight: "100%",

package/dist/components/ui/money.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../components/ui/money.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,aAAa,gGAMjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAQ/D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../components/ui/money.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,aAAa,gGAMjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAS/D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/money.js

@@ -23,6 +23,7 @@ function Money(_a) {
     const formatter = new Intl.NumberFormat(locale, {
         style: "currency",
         currency: currency,
+        currencyDisplay: "narrowSymbol",
     });
     let formattedPrice = formatter.format(Number(price));
     return _jsx("span", Object.assign({}, props, { children: formattedPrice }));

package/dist/components/ui/slider.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../../lib/utils";
-import { Input } from "./input";
+import { Input } from "./Input";
 const Slider = React.forwardRef((_a, ref) => {
     var { className, max, min = 0, step = 1, defaultValue, value, onChange } = _a, 
     // doubleValue = false,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./components/ui/button";
-export * from "./components/ui/input";
+export * from "./components/ui/Input/input";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/accordion";
 export * from "./components/ui/icon";
@@ -32,14 +32,13 @@ export * from "./components/ui/favorite";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/product-card";
 export * from "./components/ui/dropdown";
-export * from "./components/ui/product-grid";
 export * from "./components/ui/quantity-picker";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/ui/subscription";
 export * from "./components/ui/line-item-text-icons";
 export * from "./components/ui/textarea";
 export * from "./components/hooks/use-scroll-direction";
+export { cn, cva, getColor } from "./lib/utils";
 export * from "./components/ui/image";
 export * from "./components/ui/empty-message";
-export { cn, cva } from "./lib/utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sCAAsC,CAAA;AACpD,cAAc,0BAA0B,CAAA;AACxC,cAAc,yCAAyC,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sCAAsC,CAAA;AACpD,cAAc,0BAA0B,CAAA;AACxC,cAAc,yCAAyC,CAAA;AACvD,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA"}

package/dist/index.js

@@ -1,6 +1,6 @@
 // component exports
 export * from "./components/ui/button";
-export * from "./components/ui/input";
+export * from "./components/ui/Input/input";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/accordion";
 export * from "./components/ui/icon";
@@ -33,13 +33,12 @@ export * from "./components/ui/favorite";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/product-card";
 export * from "./components/ui/dropdown";
-export * from "./components/ui/product-grid";
 export * from "./components/ui/quantity-picker";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/ui/subscription";
 export * from "./components/ui/line-item-text-icons";
 export * from "./components/ui/textarea";
 export * from "./components/hooks/use-scroll-direction";
+export { cn, cva, getColor } from "./lib/utils";
 export * from "./components/ui/image";
 export * from "./components/ui/empty-message";
-export { cn, cva } from "./lib/utils";

package/dist/lib/utils.d.ts

@@ -1,6 +1,11 @@
 import { ClassValue } from "clsx";
+export type Color = {
+    type: "custom" | "brand-kit";
+    value: string;
+};
 export declare function cn(...inputs: ClassValue[]): string;
 export declare const iconColorLevels: string[];
 export declare const iconColorVariantClasses: Record<string, string>;
 export { cva } from "class-variance-authority";
+export declare const getColor: (colorOption: Color | undefined) => string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAG9C,eAAO,MAAM,QAAQ,gBAAiB,KAAK,GAAG,SAAS,uBAEtD,CAAC"}

package/dist/lib/utils.js

@@ -23,3 +23,6 @@ for (let iconColorLevel of iconColorLevels) {
     iconColorVariantClasses[iconColorLevel] = `text-${iconColorLevel}`;
 }
 export { cva } from "class-variance-authority";
+export const getColor = (colorOption) => {
+    return colorOption ? (colorOption === null || colorOption === void 0 ? void 0 : colorOption.type) === 'brand-kit' ? `var(--${colorOption.value})` : colorOption.value : undefined;
+};

package/dist/styles.css

@@ -728,6 +728,9 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.start-10 {
+  inset-inline-start: 2.5rem;
+}
 .start-4 {
   inset-inline-start: 1rem;
 }
@@ -842,9 +845,6 @@ video {
 .grid {
   display: grid;
 }
-.aspect-\[2\/3\] {
-  aspect-ratio: 2/3;
-}
 .aspect-productImages {
   aspect-ratio: var(--productImage-aspectRatio);
 }
@@ -1317,10 +1317,6 @@ video {
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
-.bg-neutral-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
@@ -1442,6 +1438,9 @@ video {
 .pl-0 {
   padding-left: 0px;
 }
+.pl-10 {
+  padding-left: 2.5rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1776,6 +1775,9 @@ video {
   --tw-drop-shadow: drop-shadow(0 3px 1px 0 rgba(0,0,0,1));
   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);
 }
+.\!filter {
+  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) !important;
+}
 .filter {
   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);
 }
@@ -2212,10 +2214,6 @@ video {
 .data-\[state\=open\]\:duration-500[data-state=open] {
   animation-duration: 500ms;
 }
-:is(.dark .dark\:bg-neutral-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-}
 @media (min-width: 640px) {
 
   .sm\:mt-0 {
@@ -2244,12 +2242,6 @@ video {
     text-align: left;
   }
 }
-@media (min-width: 1024px) {
-
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
 .\[\&\+label\]\:text-stateColors-error+label {
   color: var(--stateColors-error);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -11,16 +11,6 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Tapcart Inc.",
   "homepage": "https://tapcart.com",
-  "scripts": {
-    "lint": "eslint \"**/*.ts*\"",
-    "ui:add": "pnpm dlx shadcn-ui@latest add",
-    "build:styles": "postcss styles/globals.css -o dist/styles.css",
-    "build:ts": "tsc -p tsconfig.json && tsc-alias",
-    "build": "pnpm run build:ts && pnpm run build:styles",
-    "dev:ts": "tsc -w -p tsconfig.json",
-    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
-    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
-  },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
@@ -29,17 +19,17 @@
     "@types/lodash": "4.17.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "app-studio-types": "workspace:*",
     "autoprefixer": "^10.4.14",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^7.32.0",
-    "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
     "tsc-alias": "^1.8.10",
-    "tsconfig": "workspace:*",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "eslint-config-custom": "0.0.0",
+    "tsconfig": "0.0.0",
+    "app-studio-types": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -71,5 +61,15 @@
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.1"
+  },
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "ui:add": "pnpm dlx shadcn-ui@latest add",
+    "build:styles": "postcss styles/globals.css -o dist/styles.css",
+    "build:ts": "tsc -p tsconfig.json && tsc-alias",
+    "build": "pnpm run build:ts && pnpm run build:styles",
+    "dev:ts": "tsc -w -p tsconfig.json",
+    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
+    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
   }
-}
+}