@tapcart/mobile-components 0.6.2 → 0.6.4

package/dist/components/hooks/use-collection.js

@@ -29,7 +29,7 @@ export const useCollection = ({ apiUrl, appId, collectionId, collectionHandle, l
                     const collectionBy = collectionHandle ? "by-handle" : "by-id";
                     specificCollectionUrl = `${apiUrl}/collections/${collectionBy}?${params}`;
                 }
-                const fetchAllCollections = allCollectionsUrl
+                const fetchAllCollections = getCollections && allCollectionsUrl
                     ? fetch(allCollectionsUrl, {
                         method: "GET",
                         headers: {

package/dist/components/hooks/use-products.d.ts

@@ -2,6 +2,7 @@ import { Product } from "app-studio-types";
 type URL = string;
 type UseProductsProps = {
     productIds: string[];
+    productHandles: string[];
     baseURL: URL;
     fetcher?: (url: string) => Promise<any>;
 };

package/dist/components/hooks/use-products.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAc7E"}
+{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAqB7E"}

package/dist/components/hooks/use-products.js

@@ -1,8 +1,15 @@
 import useSWR from "swr";
 export function useProducts(props) {
-    const url = props
-        ? `${props.baseURL}/products/by-ids?ids=${props.productIds.join(",")}`
-        : null;
+    let url = null;
+    if (props) {
+        const { baseURL, productIds, productHandles } = props;
+        if ((productIds === null || productIds === void 0 ? void 0 : productIds.length) > 0) {
+            url = `${baseURL}/products/by-ids?ids=${productIds.join(",")}`;
+        }
+        else if ((productHandles === null || productHandles === void 0 ? void 0 : productHandles.length) > 0) {
+            url = `${baseURL}/products/by-ids?handles=${productHandles.join(",")}`;
+        }
+    }
     const fetcher = (props === null || props === void 0 ? void 0 : props.fetcher) || ((url) => fetch(url).then((res) => res.json()));
     const { data, error } = useSWR(url, fetcher);
     return {

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

@@ -2,7 +2,9 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    showDefaultIcon?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KAuBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAWpB,CAAA;AAIF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB;;2CA2BpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAWpB,CAAA;AAIF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/accordion.js

@@ -22,8 +22,8 @@ const AccordionItem = React.forwardRef((_a, ref) => {
 });
 AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = React.forwardRef((_a, ref) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]_svg]:rotate-180 active:opacity-70", className) }, props, { children: [children, _jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200 " })] })) })));
+    var { className, children, showDefaultIcon = true } = _a, props = __rest(_a, ["className", "children", "showDefaultIcon"]);
+    return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]_svg]:rotate-180 active:opacity-70", className) }, props, { children: [children, showDefaultIcon && (_jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200" }))] })) })));
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef((_a, ref) => {

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    alignment?: "end" | "center" | "start" | null | undefined;
+    alignment?: "center" | "end" | "start" | null | undefined;
     cornerRadius?: "circle" | "square" | "rounded" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

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

@@ -3,7 +3,7 @@ import React from "react";
 declare const chipVariants: (props?: ({
     variant?: "secondary" | "primary" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
-    iconPosition?: "default" | "left" | "right" | null | undefined;
+    iconPosition?: "left" | "right" | "default" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ChipProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof chipVariants> & {
     icon?: React.ElementType;
@@ -14,7 +14,7 @@ type ChipProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof chi
 declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
     variant?: "secondary" | "primary" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
-    iconPosition?: "default" | "left" | "right" | null | undefined;
+    iconPosition?: "left" | "right" | "default" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
     icon?: React.ElementType<any> | undefined;
     iconPosition?: "left" | "right" | undefined;

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

@@ -12,6 +12,7 @@ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElem
     showBackground?: boolean;
     cornerRadius?: number;
     layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right";
+    favoriteFillColor?: string;
 }
 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;;;;mFA0BrB,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,CAAA;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EACP,sBAAsB,GACtB,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CAAA;CACnB;AAED,QAAA,MAAM,QAAQ,yFAwCb,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;;;;mFA0BrB,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,CAAA;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EACP,sBAAsB,GACtB,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,yFA0Cb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/favorite.js

@@ -39,14 +39,14 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-p
     },
 });
 const Favorite = React.forwardRef((_a, ref) => {
-    var { className, size = "small", selected = false, onClick, iconUrl = "", showBackground = false, cornerRadius = 4, layoutType = "below-image-on-right" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "cornerRadius", "layoutType"]);
+    var { className, size = "small", selected = false, onClick, iconUrl = "https://storage.googleapis.com/tapcart-asset-uploads-prod/default-icon-options/Heart_1.svg", showBackground = false, cornerRadius = 4, layoutType = "below-image-on-right", favoriteFillColor = "#D91E18FF" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "cornerRadius", "layoutType", "favoriteFillColor"]);
     return (_jsx("button", Object.assign({ onClick: onClick, ref: ref, className: cn(favoriteVariants({
             size,
             showBackground,
             layoutType,
         }), className), style: {
             borderRadius: `${cornerRadius}px`,
-        } }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }) })));
+        } }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", fillColor: favoriteFillColor }) })));
 });
 Favorite.displayName = "Favorite";
 export { Favorite, favoriteVariants };

package/dist/components/ui/text.js

@@ -16,7 +16,7 @@ const textVariants = cva("", {
     variants: {
         type: {
             h1: "text-[23px] font-fontRegular leading-[130%] font-normal text-textColors-primaryColor",
-            h2: "text-lg font-fontMedium leading-[130%] font-medium text-textColors-primaryColor",
+            h2: "text-lg font-fontRegular leading-[130%] font-medium text-textColors-primaryColor",
             "body-primary": "text-[14px] font-fontRegular leading-[160%] font-normal text-textColors-primaryColor",
             "body-secondary": "text-[12px] font-fontRegular leading-[130%] font-normal text-textColors-secondaryColor",
             label: "text-[10px] font-fontRegular leading-[130%] font-normal text-textColors-secondaryColor",

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { cn, cva, getColor } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } from "./lib/utils";
 export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,5 +1,5 @@
 // component exports
-export { cn, cva, getColor } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } from "./lib/utils";
 export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";

package/dist/lib/utils.d.ts

@@ -8,4 +8,95 @@ 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;
+type BorderSide = "all" | "top" | "bottom" | "left" | "right";
+type BorderSides = BorderSide[];
+export declare const getBorderSidesStyle: (borderSides: BorderSides) => {
+    borderWidth: string;
+    borderTopWidth?: undefined;
+    borderBottomWidth?: undefined;
+    borderLeftWidth?: undefined;
+    borderRightWidth?: undefined;
+} | {
+    borderTopWidth: string | number;
+    borderBottomWidth: string | number;
+    borderLeftWidth: string | number;
+    borderRightWidth: string | number;
+    borderWidth?: undefined;
+};
+type VerticalAlignment = "top" | "middle" | "bottom";
+type Spacing = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+interface AlignmentAndSpacing {
+    alignment: VerticalAlignment;
+    spacing: Spacing;
+}
+export declare const getVerticalAlignmentStyle: (alignmentAndSpacing: AlignmentAndSpacing) => {
+    bottom: string;
+    top: string;
+    transform?: undefined;
+} | {
+    top: string;
+    transform: string;
+    bottom?: undefined;
+} | {
+    bottom?: undefined;
+    top?: undefined;
+    transform?: undefined;
+};
+type BackgroundAndPadding = {
+    backgroundColor?: Color;
+    borderSides?: BorderSides;
+    borderColor?: Color;
+    cornerRadius?: number;
+    padding?: Partial<Spacing>;
+};
+export declare const getBackgroundAndPaddingStyle: (backgroundAndPadding: BackgroundAndPadding) => {
+    backgroundColor: string | undefined;
+    borderColor: string | undefined;
+    borderTopWidth: string | undefined;
+    borderBottomWidth: string | undefined;
+    borderLeftWidth: string | undefined;
+    borderRightWidth: string | undefined;
+    paddingTop: string | undefined;
+    paddingBottom: string | undefined;
+    paddingLeft: string | undefined;
+    paddingRight: string | undefined;
+    borderStyle: string | undefined;
+    borderRadius: string | undefined;
+};
+type BackgroundAndSpacing = AlignmentAndSpacing & {
+    backgroundColor?: Color;
+    borderColor?: Color;
+    backgroundCorners?: number;
+};
+export declare const getBackgroundAndSpacingStyle: (backgroundAndSpacing: BackgroundAndSpacing) => {
+    padding: string;
+    borderColor: string;
+    backgroundColor: string;
+    borderRadius: string;
+};
+type TextStyle = {
+    font: {
+        family: string;
+        weight: number | string;
+    };
+    size: number | string;
+    color: Color;
+    uppercase: boolean;
+    textAlignment: "left" | "center" | "right" | "justify";
+};
+type Headline = TextStyle;
+type Subtext = TextStyle;
+export declare const getTextStyle: (textStyle: Headline | Subtext) => {
+    fontFamily: string | undefined;
+    fontWeight: string | number | undefined;
+    fontSize: string | number;
+    color: string | undefined;
+    textTransform: string;
+    textAlign: "left" | "right" | "center" | "justify";
+};
 //# 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,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"}
+{"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,CAAA;AAEnE,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;AAI9C,eAAO,MAAM,QAAQ,gBAAiB,KAAK,GAAG,SAAS,uBAMtD,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7D,KAAK,WAAW,GAAG,UAAU,EAAE,CAAA;AAE/B,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAU/B,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEpD,KAAK,OAAO,GAAG;IACb,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,iBAAiB,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,yBAAyB,wBACf,mBAAmB;;;;;;;;;;;;CAczC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;;;;;;;;;CAgC3C,CAAA;AAED,KAAK,oBAAoB,GAAG,mBAAmB,GAAG;IAChD,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;CAU3C,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KACxB,CAAA;IACD,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;CACvD,CAAA;AAED,KAAK,QAAQ,GAAG,SAAS,CAAA;AACzB,KAAK,OAAO,GAAG,SAAS,CAAA;AAExB,eAAO,MAAM,YAAY,cAAe,QAAQ,GAAG,OAAO;;;;;;;CAUzD,CAAA"}

package/dist/lib/utils.js

@@ -23,6 +23,81 @@ for (let iconColorLevel of iconColorLevels) {
     iconColorVariantClasses[iconColorLevel] = `text-${iconColorLevel}`;
 }
 export { cva } from "class-variance-authority";
+// #region =-=-=-= Block Utils =-=-=-=
 export const getColor = (colorOption) => {
-    return colorOption ? (colorOption === null || colorOption === void 0 ? void 0 : colorOption.type) === 'brand-kit' ? `var(--${colorOption.value})` : colorOption.value : undefined;
+    return colorOption
+        ? (colorOption === null || colorOption === void 0 ? void 0 : colorOption.type) === "brand-kit"
+            ? `var(--${colorOption.value})`
+            : colorOption.value
+        : undefined;
 };
+export const getBorderSidesStyle = (borderSides) => {
+    const style = 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,
+        };
+    return style;
+};
+export const getVerticalAlignmentStyle = (alignmentAndSpacing) => {
+    const { alignment, spacing } = alignmentAndSpacing;
+    switch (alignment) {
+        case "bottom":
+            return { bottom: `${spacing.bottom}px`, top: "auto" };
+        case "middle":
+            return { top: "50%", transform: "translateY(-50%)" };
+        case "top":
+            return { top: `${spacing.top}px`, bottom: "auto" };
+        default:
+            return {};
+    }
+};
+export const getBackgroundAndPaddingStyle = (backgroundAndPadding) => {
+    const { backgroundColor, borderSides, borderColor, cornerRadius, padding } = backgroundAndPadding;
+    return {
+        backgroundColor: getColor(backgroundColor),
+        borderColor: getColor(borderColor),
+        borderTopWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("top")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            ? "1px"
+            : undefined,
+        borderBottomWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("bottom")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            ? "1px"
+            : undefined,
+        borderLeftWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("left")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            ? "1px"
+            : undefined,
+        borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            ? "1px"
+            : undefined,
+        paddingTop: (padding === null || padding === void 0 ? void 0 : padding.top) !== undefined ? `${padding.top}px` : undefined,
+        paddingBottom: (padding === null || padding === void 0 ? void 0 : padding.bottom) !== undefined ? `${padding.bottom}px` : undefined,
+        paddingLeft: (padding === null || padding === void 0 ? void 0 : padding.left) !== undefined ? `${padding.left}px` : undefined,
+        paddingRight: (padding === null || padding === void 0 ? void 0 : padding.right) !== undefined ? `${padding.right}px` : undefined,
+        borderStyle: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.length) ? "solid" : undefined,
+        borderRadius: cornerRadius !== undefined ? `${cornerRadius}px` : undefined,
+    };
+};
+export const getBackgroundAndSpacingStyle = (backgroundAndSpacing) => {
+    const { spacing, borderColor, backgroundColor, backgroundCorners } = backgroundAndSpacing;
+    return {
+        padding: `${spacing.top}px ${spacing.right}px ${spacing.bottom}px ${spacing.left}px`,
+        borderColor: borderColor ? borderColor.value : "transparent",
+        backgroundColor: getColor(backgroundColor) || "transparent",
+        borderRadius: `${backgroundCorners !== null && backgroundCorners !== void 0 ? backgroundCorners : 0}px`,
+    };
+};
+export const getTextStyle = (textStyle) => {
+    const { font, size, color, uppercase, textAlignment } = textStyle;
+    return {
+        fontFamily: font.family === "initial" ? undefined : font.family,
+        fontWeight: font.weight === "initial" ? undefined : font.weight,
+        fontSize: size,
+        color: getColor(color),
+        textTransform: uppercase ? "uppercase" : "none",
+        textAlign: textAlignment,
+    };
+};
+// #endregion =-=-=-= END BLOCK UTILS =-=-=-=

package/dist/styles.css

@@ -1419,6 +1419,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-t-\[0px\] {
+  border-top-width: 0px;
+}
 .border-t-\[1px\] {
   border-top-width: 1px;
 }
@@ -1719,9 +1722,6 @@ video {
 .align-top {
   vertical-align: top;
 }
-.font-fontMedium {
-  font-family: var(--fontMedium);
-}
 .font-fontRegular {
   font-family: var(--fontRegular);
 }
@@ -1779,6 +1779,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.lowercase {
+  text-transform: lowercase;
+}
 .capitalize {
   text-transform: capitalize;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",