@tapcart/mobile-components 0.2.11 → 0.3.0

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

@@ -3,7 +3,7 @@ import { Drawer as DrawerPrimitive } from "vaul";
 declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DrawerPortal: React.FC<import("@radix-ui/react-dialog").DialogPortalProps>;
 declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
 declare const Drawer: {
     ({ shouldScaleBackground, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -23,13 +23,13 @@ declare const DrawerFooter: {
     displayName: string;
 };
 declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-declare type DrawerHeaderProps = {
+type DrawerHeaderProps = {
     iconLeftName?: string;
     iconRightName?: string;
     title: string;
     onCloseClick?: (event: React.MouseEvent) => void;
 };
-declare const DrawerHeader: ({ title, iconLeftName, iconRightName, onCloseClick }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const DrawerHeader: ({ title, iconLeftName, iconRightName, onCloseClick, }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
 declare const DrawerContent: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,QAAA,MAAM,aAAa,+HAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,8DAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,6HAAwB,CAAA;AAEzC,aAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAEpE,QAAA,MAAM,MAAM;0CAGT,WAAW;;CAOb,CAAA;AAGD,QAAA,MAAM,aAAa;;wCAajB,CAAA;AAGF,QAAA,MAAM,iBAAiB;;;;;;wCAsBrB,CAAA;AA6BF,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAKtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,CAAA;AAGF,aAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,yDAA0D,iBAAiB,4CAU5F,CAAA;AAED,QAAA,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAE/D,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,QAAA,MAAM,aAAa,+HAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,8DAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,6HAAwB,CAAA;AAEzC,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAEpE,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAE/D,CAAA;AAGD,QAAA,MAAM,aAAa;;wCAcjB,CAAA;AAGF,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CAoBnB,CAAA;AAED,QAAA,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAE/D,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}

package/dist/components/ui/drawer.js

@@ -13,51 +13,53 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { cn } from "@/lib/utils";
-import { Icon } from "@/components/ui/icon";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
 const DrawerTrigger = DrawerPrimitive.Trigger;
 const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;
 const Drawer = (_a) => {
     var { shouldScaleBackground } = _a, props = __rest(_a, ["shouldScaleBackground"]);
-    return (_jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props), void 0));
+    return _jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props));
 };
 Drawer.displayName = "Drawer";
 const DrawerOverlay = React.forwardRef((_a, ref) => {
     var { className, backdropHexColor = "#000000" } = _a, props = __rest(_a, ["className", "backdropHexColor"]);
-    return (_jsx(DrawerPrimitive.Overlay, Object.assign({ style: { backgroundColor: `${backdropHexColor}CC` }, ref: ref, className: cn(`fixed inset-0 z-50`, className) }, props), void 0));
+    return (_jsx(DrawerPrimitive.Overlay, Object.assign({ style: { backgroundColor: `${backdropHexColor}CC` }, ref: ref, className: cn(`fixed inset-0 z-50`, className) }, props)));
 });
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 const DrawerContentBase = React.forwardRef((_a, ref) => {
     var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet"]);
-    const styles = isSheet ? { height: "calc(100vh - 56px)" } : { maxHeight: "calc(100vh - 56px)" };
-    return (_jsxs(DrawerPortal, { children: [hideBackdrop ? null : _jsx(DrawerOverlay, { backdropHexColor: backdropHexColor }, void 0), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", className) }, props, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }, void 0), children] }), void 0)] }, void 0));
+    const styles = isSheet
+        ? { height: "calc(100vh - 56px)" }
+        : { maxHeight: "calc(100vh - 56px)" };
+    return (_jsxs(DrawerPortal, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", className) }, props, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }), children] }))] }));
 });
 DrawerContentBase.displayName = "DrawerContentBase";
 const DrawerHeaderBase = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn(className) }, props), void 0));
+    return (_jsx("div", Object.assign({ className: cn(className) }, props)));
 };
 DrawerHeaderBase.displayName = "DrawerHeaderBase";
 const DrawerTitle = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DrawerPrimitive.Title, Object.assign({ ref: ref, className: cn("text-textColors-primaryColor text-center text-[18px] font-medium leading-[24px] truncate my-0 mx-4", className) }, props), void 0));
+    return (_jsx(DrawerPrimitive.Title, Object.assign({ ref: ref, className: cn("text-textColors-primaryColor text-center text-[18px] font-medium leading-[24px] truncate my-0 mx-4", className) }, props)));
 });
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 const DrawerFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("mt-auto flex flex-row gap-2 pb-8 pt-4 pl-4 pr-4 border-t border-coreColors-dividingLines", className) }, props), void 0));
+    return (_jsx("div", Object.assign({ className: cn("mt-auto flex flex-row gap-2 pb-8 pt-4 pl-4 pr-4 border-t border-coreColors-dividingLines", className) }, props)));
 };
 DrawerFooter.displayName = "DrawerFooter";
 const DrawerDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DrawerPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props), void 0));
+    return (_jsx(DrawerPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props)));
 });
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-const DrawerHeader = ({ title, iconLeftName, iconRightName, onCloseClick }) => {
-    return (_jsxs(DrawerHeaderBase, Object.assign({ className: "p-4 text-center flex justify-between" }, { children: [iconLeftName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconLeftName, className: "h-6 w-6 p-0", size: "md" }, void 0) }), void 0)) : _jsx("span", {}, void 0), _jsx(DrawerTitle, { children: title }, void 0), iconRightName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconRightName, className: "h-6 w-6 p-0", size: "md" }, void 0) }), void 0)) : _jsx("span", {}, void 0)] }), void 0));
+const DrawerHeader = ({ title, iconLeftName, iconRightName, onCloseClick, }) => {
+    return (_jsxs(DrawerHeaderBase, Object.assign({ className: "p-4 text-center flex justify-between" }, { children: [iconLeftName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconLeftName, color: "coreColors-secondaryIcon", className: "h-6 w-6 p-0", size: "md" }) }))) : (_jsx("div", { className: "w-6" })), _jsx(DrawerTitle, { children: title }), iconRightName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconRightName, color: "coreColors-secondaryIcon", className: "h-6 w-6 p-0", size: "md" }) }))) : (_jsx("div", { className: "w-6" }))] })));
 };
 const DrawerContent = ({ children }) => {
-    return (_jsx("div", Object.assign({ className: "h-full overflow-scroll" }, { children: children }), void 0));
+    return _jsx("div", Object.assign({ className: "h-full overflow-scroll" }, { children: children }));
 };
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContentBase, DrawerContent, DrawerFooter, DrawerDescription, DrawerHeader, };

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { WishlistProps } from "./wishlist";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+interface DropdownMenuTriggerProps {
+    label: string;
+    className?: string;
+    asChild?: boolean;
+    selectedItem?: WishlistProps | null;
+    isError?: boolean;
+    width?: number;
+}
+declare const DropdownMenuTrigger: React.FC<DropdownMenuTriggerProps>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    width?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, type DropdownMenuTriggerProps, };
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../components/ui/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAMtE,OAAO,EAAmB,aAAa,EAAE,MAAM,YAAY,CAAA;AAE3D,QAAA,MAAM,YAAY,mDAA6B,CAAA;AAE/C,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgF3D,CAAA;AAED,QAAA,MAAM,iBAAiB,qHAA8B,CAAA;AAErD,QAAA,MAAM,mBAAmB;;wCAuBvB,CAAA;AAGF,QAAA,MAAM,gBAAgB;;wCAepB,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,wBAAwB,GAC9B,CAAA"}

package/dist/components/ui/dropdown.js

@@ -0,0 +1,60 @@
+"use client";
+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 * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import clsx from "clsx";
+import { cn } from "../../lib/utils";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { PlaceholderIcon } from "./wishlist";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = (_a) => {
+    var { label, className, asChild, selectedItem, isError, width } = _a, props = __rest(_a, ["label", "className", "asChild", "selectedItem", "isError", "width"]);
+    const triggerClass = clsx("[&[data-state=open]_.chevron-icon]:rotate-180 active:text-coreColors-brandColorPrimary  active:outline-coreColors-brandColorPrimary outline outline-1 outline-coreColors-dividingLines", {
+        "outline-stateColors-error": isError,
+        "[&[data-state=open]]:outline-coreColors-brandColorPrimary": !isError,
+        "[&[data-state=open]_.label]:text-coreColors-brandColorPrimary": selectedItem,
+        "[&[data-state=open]_.label]:text-textColors-secondaryColor": !selectedItem,
+    });
+    const labelClass = clsx("label overflow-hidden text-ellipsis whitespace-nowrap", {
+        "text-stateColors-error": isError,
+        "text-textColors-secondaryColor": !isError,
+    });
+    const nameClass = clsx("name", {
+        "text-stateColors-error": isError,
+        "": !isError,
+    });
+    const iconClass = clsx("", {
+        "stateColors-error": isError,
+        "coreColors-secondaryIcon": !isError,
+    });
+    return (_jsx(DropdownMenuPrimitive.Trigger, Object.assign({ asChild: asChild, className: cn(triggerClass, className) }, props, { style: { width: width } }, { children: _jsxs("button", Object.assign({ className: "h-14 flex justify-between items-center w-full rounded-[4px]  p-4 bg-coreColors-inputBackground" }, { children: [selectedItem ? (_jsxs("div", Object.assign({ className: "flex flex-row items-center overflow-hidden" }, { children: [selectedItem.imgUrl ? (_jsx("img", { alt: "wishlist-image", className: "flex-shrink-0 h-10 w-10 border border-coreColors-dividingLines rounded-sm", src: selectedItem.imgUrl })) : (_jsx(PlaceholderIcon, {})), _jsxs("div", Object.assign({ className: "ml-2 text-start overflow-hidden" }, { children: [_jsx(Text, Object.assign({ type: "label", className: labelClass }, { children: label })), _jsx(Text, Object.assign({ type: "body-primary", className: nameClass }, { children: selectedItem.name }))] }))] }))) : (_jsx(Text, Object.assign({ type: "body-primary", className: labelClass }, { children: label }))), _jsx(Icon, { name: "chevron-down", size: "sm", color: iconClass, className: "chevron-icon shrink-0 ml-2" })] })) })));
+};
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuContent = React.forwardRef((_a, ref) => {
+    var { className, sideOffset = 4, width } = _a, props = __rest(_a, ["className", "sideOffset", "width"]);
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 max-h-[240px] overflow-y-auto min-w-[8rem] rounded-[4px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), style: {
+                outlineStyle: "solid",
+                outlineWidth: 1,
+                outlineColor: "var(--coreColors-brandColorPrimary)",
+                width: width,
+            } }, props)) }));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
+    return (_jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center outline-none transition-colors focus:bg-stateColors-skeleton data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className) }, props)));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, };

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

@@ -2,11 +2,13 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const favoriteVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
-    defaultVariants?: "size" | null | undefined;
+    showBackground?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
     selected?: boolean;
-    onClick: () => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    icon?: string;
+    showBackground?: boolean;
 }
 declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
 export { Favorite, favoriteVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;mFAarB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,QAAA,MAAM,QAAQ,yFAsBb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;mFAkBrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,QAAA,MAAM,QAAQ,yFAuBb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/favorite.js

@@ -14,22 +14,28 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
-const favoriteVariants = cva("flex p-2 bg-coreColors-inputBackground rounded-[4px] shadow-buttonColors-primaryShadow active:[&_svg]:text-stateColors-favorites", {
+const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-primaryShadow active:[&_svg]:text-stateColors-favorites", {
     variants: {
         size: {
             small: "p-2",
             large: "p-3",
         },
-        defaultVariants: {
-            size: "small",
+        showBackground: {
+            true: "bg-coreColors-inputBackground",
+            false: "",
         },
     },
+    defaultVariants: {
+        size: "small",
+        showBackground: true,
+    },
 });
 const Favorite = React.forwardRef((_a, ref) => {
-    var { className, size = "small", selected = false, onClick } = _a, props = __rest(_a, ["className", "size", "selected", "onClick"]);
+    var { className, size = "small", selected = false, onClick, icon = "heart-filled", showBackground = true } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "icon", "showBackground"]);
     return (_jsx("button", Object.assign({ onClick: onClick, ref: ref, className: cn(favoriteVariants({
             size,
-        }), className) }, props, { children: _jsx(Icon, { name: "heart-filled", color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }, void 0) }), void 0));
+            showBackground
+        }), className) }, props, { children: _jsx(Icon, { name: icon, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }) })));
 });
 Favorite.displayName = "Favorite";
 export { Favorite, favoriteVariants };

package/dist/components/ui/grid.js

@@ -16,10 +16,10 @@ import { cn } from "../../lib/utils";
 const gridVariants = cva("grid", {
     variants: {
         columns: {
-            1: "grid-cols-1 gap-y-[7px]",
-            2: "grid-cols-2 gap-x-[7px] gap-y-[7px]",
-            3: "grid-cols-3 gap-x-[7px] gap-y-[7px]",
-            4: "grid-cols-4 gap-x-[7px] gap-y-[7px]",
+            1: "grid-cols-1 gap-y-4",
+            2: "grid-cols-2 gap-x-[7px] gap-y-4",
+            3: "grid-cols-3 gap-x-[7px] gap-y-4",
+            4: "grid-cols-4 gap-x-[7px] gap-y-4",
         },
     },
     defaultVariants: {
@@ -28,6 +28,6 @@ const gridVariants = cva("grid", {
 });
 function Grid(_a) {
     var { className, columns } = _a, props = __rest(_a, ["className", "columns"]);
-    return (_jsx(Container, { children: _jsx("div", Object.assign({ className: cn(gridVariants({ columns }), className) }, props), void 0) }, void 0));
+    return (_jsx(Container, { children: _jsx("div", Object.assign({ className: cn(gridVariants({ columns }), className) }, props)) }));
 }
 export { Grid, gridVariants };

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-import { IconUpload, IconPencilMinus } from "@tabler/icons-react";
+import { IconPencilMinus } from "@tabler/icons-react";
 declare const iconVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     color?: string | null | undefined;
@@ -9,5 +9,5 @@ export interface IconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
     name?: string;
 }
 declare function Icon({ className, name, size, color, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
-export { Icon, iconVariants, IconUpload, IconPencilMinus };
+export { Icon, iconVariants, IconPencilMinus };
 //# sourceMappingURL=icon.d.ts.map

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,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAIjE,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAeD,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,2CAuBzE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,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,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"}

package/dist/components/ui/icon.js

@@ -11,9 +11,8 @@ 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 } 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, } from "@tabler/icons-react";
 import { cn, iconColorVariantClasses } from "../../lib/utils";
-import * as allIcons from "@tabler/icons-react";
 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: {
         size: {
@@ -40,11 +39,41 @@ const sizeMapping = {
     md: 24,
     lg: 56,
 };
+const icons = {
+    minus: IconMinus,
+    plus: IconPlus,
+    "adjustments-alt": IconAdjustmentsAlt,
+    "arrows-sort": IconArrowsSort,
+    "alert-circle": IconAlertCircle,
+    "circle-x": IconCircleX,
+    "info-circle": IconInfoCircle,
+    check: IconCheck,
+    "square-off": IconSquareOff,
+    "map-pin": IconMapPin,
+    repeat: IconRepeat,
+    square: IconSquare,
+    "square-check": IconSquareCheck,
+    "chevron-up": IconChevronUp,
+    "chevron-right": IconChevronRight,
+    "eye-off": IconEyeOff,
+    "square-x": IconSquareX,
+    circle: IconCircle,
+    "chevron-down": IconChevronDown,
+    "heart-filled": IconHeartFilled,
+    "menu-icon-heart": IconHeartFilled,
+    upload: IconUpload,
+    "currency-dollar": IconCurrencyDollar,
+    x: IconX,
+    "circle-off": IconCircleOff,
+    "circle-dot-filled": IconCircleDotFilled,
+    "mood-sad": IconMoodSad,
+    "square-x-filled": IconSquareXFilled,
+    trash: IconTrash,
+    loader: IconLoader2,
+};
 function Icon(_a) {
     var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);
-    const iconName = "Icon" +
-        (name === null || name === void 0 ? void 0 : name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(""));
-    const IconComponent = allIcons[iconName];
-    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ color, size, className })) }, props, { children: [IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] }, void 0)) : null, props.children] }), void 0));
+    const IconComponent = icons[name];
+    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ color, size, className })) }, props, { children: [IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null, props.children] })));
 }
-export { Icon, iconVariants, IconUpload, IconPencilMinus };
+export { Icon, iconVariants, IconPencilMinus };

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

@@ -0,0 +1,157 @@
+import * as React from "react";
+import type { PartialDeep } from "type-fest";
+import type { Image as ImageType } from "app-studio-types";
+type SrcSetOptions = {
+    intervals: number;
+    startingWidth: number;
+    incrementSize: number;
+    placeholderWidth: number;
+};
+export type LoaderParams = {
+    src?: ImageType["url"];
+    width?: number;
+    height?: number;
+    crop?: Crop;
+    isContained?: boolean;
+};
+export type Loader = (params: LoaderParams) => string;
+type Crop = "center" | "top" | "bottom" | "left" | "right";
+export type TapcartImageProps = React.ComponentPropsWithRef<"img"> & TapcartImageBaseProps;
+type TapcartImageBaseProps = {
+    /** The aspect ratio of the image, in the format of `width/height`.
+     *
+     * @example
+     * ```
+     * <Image data={productImage} aspectRatio="4/5" />
+     * ```
+     */
+    aspectRatio?: string;
+    /** The crop position of the image.
+     *
+     * @remarks
+     * In the event that AspectRatio is set, without specifying a crop,
+     * the Shopify CDN won't return the expected image.
+     *
+     * @defaultValue `center`
+     */
+    crop?: Crop;
+    data?: PartialDeep<ImageType, {
+        recurseIntoArrays: true;
+    }>;
+    /** A function that returns a URL string for an image.
+     *
+     * @remarks
+     * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide
+     * your own function to use a another provider, as long as they support URL based image transformations.
+     */
+    loader?: Loader;
+    /** An optional prop you can use to change the default srcSet generation behaviour */
+    srcSetOptions?: SrcSetOptions;
+    /** An optional prop to set the fill behavior of the image. Defaults to "cover"
+     *
+     * @remarks
+     * "fit" maps to `object-fit: contain`
+     * "fill" maps to `object-fit: cover`
+     */
+    objectFit?: "fit" | "fill" | "cover" | "contain" | "none" | "scale-down";
+};
+/**
+ * Tapcart’s Image component is a wrapper around the HTML image element.
+ * It supports the same props as the HTML `img` element, but automatically
+ * generates the srcSet and sizes attributes for you. For most use cases,
+ * you’ll want to set the `aspectRatio` prop to ensure the image is sized
+ * correctly.
+ *
+ * @remarks
+ * - `decoding` is set to `async` by default.
+ * - `loading` is set to `lazy` by default.
+ * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop
+ * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop
+ *
+ * @example
+ * A responsive image with a 4:5 aspect ratio:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   aspectRatio="4:5"
+ *   sizes="(min-width: 45em) 40vw, 100vw"
+ * />
+ * ```
+ * @example
+ * A fixed size image:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   width={100}
+ *   height={100}
+ * />
+ * ```
+ *
+ * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
+ */
+export declare const Image: React.ForwardRefExoticComponent<Omit<TapcartImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+/**
+ * The shopifyLoader function is a simple utility function that takes a src, width,
+ * height, and crop and returns a string that can be used as the src for an image.
+ * It can be used with the Tapcart Image component or with the next/image component.
+ * (or any others that accept equivalent configuration)
+ * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`
+ * @param width - The width of the image, e.g. `100`
+ * @param height - The height of the image, e.g. `100`
+ * @param crop - The crop of the image, e.g. `center`
+ * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`
+ *
+ * @example
+ * ```
+ * shopifyLoader({
+ *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+ *   width: 100,
+ *   height: 100,
+ *   crop: 'center',
+ * })
+ * ```
+ */
+export declare function shopifyLoader({ src, width, height, crop, isContained, }: LoaderParams): string;
+/**
+ * This function generates a srcSet for Shopify images.
+ * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
+ * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
+ * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+ * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
+ */
+export declare function generateSrcSet(src?: string, sizesArray?: Array<{
+    width?: number;
+    height?: number;
+    crop?: Crop;
+}>, loader?: Loader, isContained?: boolean): string;
+/**
+ * This function generates an array of sizes for Shopify images, for both fixed and responsive images.
+ * @param width - The CSS width of the image
+ * @param intervals - The number of intervals to generate
+ * @param startingWidth - The starting width of the image
+ * @param incrementSize - The size of each interval
+ * @returns An array of widths
+ */
+export declare function generateImageWidths(width: string | number | undefined, intervals: number, startingWidth: number, incrementSize: number): number[];
+/**
+ * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1:1`, not `0.5`, or `auto`
+ * @param aspectRatio - The aspect ratio of the image, e.g. `1:1`
+ * @returns The aspect ratio as a number, e.g. `1`
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}
+ */
+export declare function parseAspectRatio(aspectRatio?: string): number | undefined;
+/**
+ * Generate sizes for Imagery loader
+ * @param imageWidths
+ * @param aspectRatio
+ * @param crop
+ * @returns
+ */
+export declare function generateSizes(imageWidths?: number[], aspectRatio?: string, crop?: Crop): {
+    width: number;
+    height: number | undefined;
+    crop: Crop;
+}[] | undefined;
+export {};
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +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,yGA8KjB,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"}