@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Card/index.d.ts

@@ -0,0 +1,3 @@
+import Card from "./Card";
+export { Card };
+export * from "./Card.types";

package/dist/components/Card/templates/CategoryCardTemplate.d.ts

@@ -0,0 +1,27 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title: string;
+    link: string;
+    productCount: number;
+    imageBackgroundColor: string;
+    textBackgroundColor: string;
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+};
+type CategoryCardTemplateProps = {
+    data: DataTypes;
+    containerClasses?: string;
+    imageContainerClasses?: string;
+    titleClasses?: string;
+    productCountClasses?: string;
+};
+declare const CategoryCardTemplate: ({ data, containerClasses, imageContainerClasses, titleClasses, productCountClasses, }: CategoryCardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default CategoryCardTemplate;

package/dist/components/Card/templates/CategoryCardTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+const CategoryCardTemplate = ({ data, containerClasses = "", imageContainerClasses = "", titleClasses = "", productCountClasses = "", }) => {
+    return (_jsxs("div", { className: `${containerClasses} p-4`, children: [_jsx("a", { href: data.link, className: `${imageContainerClasses}`, children: data.imageUrl ? (_jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-full object-contain" })) : (_jsx("div", { className: `${data.imageBackgroundColor} flex items-center justify-center w-full h-full`, children: _jsx(Text, { tag: "p", size: "text-4xl", text: "\uD83D\uDEA7", color: "text-gray-300", fontFamily: "" }) })) }), _jsxs("div", { className: titleClasses, children: [_jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} font-bold` }), _jsx(Text, { tag: "p", size: "text-sm", text: `${data.productCount} products`, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: productCountClasses })] })] }));
+};
+export default CategoryCardTemplate;

package/dist/components/Card/templates/CompassCardTemplate.d.ts

@@ -0,0 +1,23 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title?: string;
+    rating: number;
+    link: string;
+    linkTitle: boolean;
+    imageBackgroundColor: string;
+    textBackgroundColor: string;
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+};
+declare const CompassCardTemplate: ({ data }: {
+    data: DataTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CompassCardTemplate;

package/dist/components/Card/templates/CompassCardTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+const CompassCardTemplate = ({ data }) => {
+    return (_jsxs("a", { href: "#", className: `flex flex-col justify-center w-full max-sm:w-full h-full`, "data-testid": "card", children: [_jsx("div", { className: data.imageBackgroundColor, "data-testid": "card-image-container", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsx("div", { "data-testid": "card-text-container", className: `flex flex-col w-full p-2 h-full items-center justify-center max-sm:text-xs ${data.textBackgroundColor}`, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) })] }));
+};
+export default CompassCardTemplate;

package/dist/components/Card/templates/CounterContentCardTemplate.d.ts

@@ -0,0 +1,53 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title: string;
+    rating: number;
+    link: string;
+    inStock: boolean;
+    inStockProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        inStockIcon: string;
+        outOfStockIcon: string;
+        additionalClasses: string;
+    };
+    linkTitle: boolean;
+    identifier: string;
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    price: string;
+    priceProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+    buttonProps: {
+        text: string;
+        as: string;
+        size: string;
+        fontColor: string;
+        borderColor: string;
+        shape: string;
+        color: string;
+        hoverBackground?: string;
+        additionalClasses: string;
+    };
+    badgeText: string;
+    description: string;
+};
+declare const CounterContentCardTemplate: ({ data }: {
+    data: DataTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CounterContentCardTemplate;

package/dist/components/Card/templates/CounterContentCardTemplate.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+import CounterButton from "../../CounterButton/CounterButton";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+import FormButton from "../../FormButton";
+const truncateDescription = (description, maxLength) => {
+    if (description.length > maxLength) {
+        return description.slice(0, maxLength) + "...";
+    }
+    return description;
+};
+const CounterContentCardTemplate = ({ data }) => {
+    const [count, setCount] = useState(0);
+    const [inCart, setInCart] = useState(false);
+    const handleIncrementClick = () => {
+        setCount((prevCount) => prevCount + 1);
+    };
+    const handleDecrementClick = () => {
+        if (count === 1) {
+            setInCart(false);
+            setCount(0);
+        }
+        else {
+            setCount((prevCount) => Math.max(1, prevCount - 1)); // Prevent going below 1
+        }
+    };
+    const handleInputChange = (e) => {
+        const value = parseInt(e.target.value, 10);
+        if (!isNaN(value) && value > 0) {
+            setCount(value);
+        }
+    };
+    const handleAddToCartClick = () => {
+        setInCart(true);
+        setCount(1);
+    };
+    const handleDeleteClick = () => {
+        setInCart(false);
+        setCount(0);
+    };
+    return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[300px] h-auto sm:h-[350px] border border-[#DFE4EA] bg-white rounded-lg relative p-4 sm:p-4 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-3 left-3", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: "flex justify-center items-center mt-4 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[100px] sm:w-[120px] h-[100px] sm:h-[120px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-4", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-md", text: truncateDescription(data.title, 52), color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left font-bold` }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "text-left mt-1" }), _jsx(Text, { tag: "p", size: "text-xs sm:text-sm", text: truncateDescription(data.description, 52), color: "text-gray-700", fontFamily: "font-sans", additionalClasses: "text-left mt-2" })] }), _jsxs("div", { className: "flex justify-between items-center w-full mt-4 sm:mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx("div", { className: "flex items-center gap-2 min-w-[120px] sm:min-w-[150px] justify-end", children: inCart ? (_jsxs(_Fragment, { children: [_jsx(FormButton, { additionalClasses: "w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600", icon: getFontAwesomeIcon("trash"), onClick: handleDeleteClick }), _jsx(CounterButton, { count: count, onIncrementClick: handleIncrementClick, onDecrementClick: handleDecrementClick, onInputChange: handleInputChange, containerClassName: "flex items-center border border-gray-300 rounded-md overflow-hidden", inputClassName: "w-8 h-8 text-center text-xs sm:text-sm border-none outline-none bg-white", buttonClassName: "w-8 h-8 flex items-center justify-center text-gray-600", iconClasses: "fill-current text-gray-600" })] })) : (_jsx(FormButton, { text: "Add to Cart", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] hover:bg-teal-800", onClick: handleAddToCartClick })) })] })] }));
+};
+export default CounterContentCardTemplate;

package/dist/components/Card/templates/HorizontalCardTemplate.d.ts

@@ -0,0 +1,65 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title: string;
+    rating: number;
+    ratingProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    link: string;
+    inStock: boolean;
+    inStockProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        inStockIcon: string;
+        outOfStockIcon: string;
+        additionalClasses: string;
+    };
+    linkTitle: boolean;
+    identifier: string;
+    identifierProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    price: string;
+    priceProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+    buttonProps: {
+        text: string;
+        as: string;
+        size: string;
+        fontColor: string;
+        borderColor: string;
+        shape: string;
+        color: string;
+        hoverBackground: string;
+        additionalClasses: string;
+    };
+};
+declare const HorizontalCardTemplate: ({ data }: {
+    data: DataTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HorizontalCardTemplate;

package/dist/components/Card/templates/HorizontalCardTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+const HorizontalCardTemplate = ({ data }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("a", { href: "#", className: `flex justify-center w-72  max-sm:w-full`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsxs("div", { className: "flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full", children: [_jsx("div", { className: "flex h-full mb-12 max-sm:mb-2", children: _jsx("a", { href: data.link, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) }) }), _jsxs("div", { className: `flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`, children: [_jsx("div", { className: "flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: _jsx(Text, { tag: data.identifierProps.tag, size: data.identifierProps.size, text: data.identifier, color: "", fontFamily: "", additionalClasses: data.identifierProps.additionalClasses }) }), _jsxs("div", { className: "flex items-center justify-center px-2 max-sm:mb-1", children: [_jsx("div", { className: "pr-2 text-xs", children: data.inStock === true
+                                            ? getFontAwesomeIcon(data.inStockProps.inStockIcon)
+                                            : getFontAwesomeIcon(data.inStockProps.outOfStockIcon) }), _jsx(Text, { tag: data.inStockProps.tag, size: data.inStockProps.size, text: data.inStock === true
+                                            ? "In Stock"
+                                            : "Out of Stock", color: "black", fontFamily: "", additionalClasses: data.inStockProps.additionalClasses })] }), _jsxs("div", { className: "flex px-2 items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: [_jsx("svg", { className: "w-4 h-4 text-yellow-300", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 22 20", children: _jsx("path", { d: "M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" }) }), _jsx(Text, { tag: data.ratingProps.tag, size: data.ratingProps.size, text: data.rating, color: "", fontFamily: "", additionalClasses: data.ratingProps.additionalClasses })] })] }), _jsxs("div", { className: "flex items-end flex-col w-full max-sm:flex-row max-sm:justify-between", children: [_jsx("div", { className: "px-2", children: _jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: "black", fontFamily: "", additionalClasses: data.priceProps.additionalClasses }) }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, hoverBackground: data.buttonProps.hoverBackground, additionalClasses: "w-24" })] })] })] }));
+};
+export default HorizontalCardTemplate;

package/dist/components/Card/templates/ItemCardTemplate.d.ts

@@ -0,0 +1,61 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title: string;
+    rating: number;
+    link: string;
+    inStock: boolean;
+    inStockProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        inStockIcon: string;
+        outOfStockIcon: string;
+        additionalClasses: string;
+    };
+    linkTitle: boolean;
+    identifier: string;
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    price: string;
+    priceProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+    buttonProps: {
+        text: string;
+        as: string;
+        size: string;
+        fontColor: string;
+        borderColor: string;
+        shape: string;
+        color: string;
+        hoverBackground?: string;
+        additionalClasses: string;
+    };
+    badgeText: string;
+    description: string;
+};
+type ItemCardTemplateProps = {
+    data: DataTypes;
+    containerClasses?: string;
+    imageContainerClasses?: string;
+    titleContainerClasses?: string;
+    descriptionContainerClasses?: string;
+    priceContainerClasses?: string;
+    buttonContainerClasses?: string;
+    badgeContainerClasses?: string;
+};
+declare const ItemCardTemplate: ({ data, containerClasses, imageContainerClasses, titleContainerClasses, descriptionContainerClasses, priceContainerClasses, buttonContainerClasses, badgeContainerClasses, }: ItemCardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default ItemCardTemplate;

package/dist/components/Card/templates/ItemCardTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+const ItemCardTemplate = ({ data, containerClasses = "", imageContainerClasses = "", titleContainerClasses = "", descriptionContainerClasses = "", priceContainerClasses = "", buttonContainerClasses = "", badgeContainerClasses = "", }) => {
+    return (_jsxs("div", { className: `${containerClasses}`, children: [_jsx("div", { className: badgeContainerClasses, children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: `flex justify-center items-center ${imageContainerClasses}`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "object-contain max-h-full" }) }), _jsxs("div", { className: `${titleContainerClasses}`, children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-sm sm:text-md", text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: data.titleProps.additionalClasses }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "mb-1 sm:mb-2" }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.description, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "mb-2 sm:mb-4" }), _jsxs("div", { className: `${priceContainerClasses}`, children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: `${buttonContainerClasses} hover:bg-teal-800` })] })] })] }));
+};
+export default ItemCardTemplate;

package/dist/components/Card/templates/KitContentCardTemplate.d.ts

@@ -0,0 +1,53 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title: string;
+    rating: number;
+    link: string;
+    inStock: boolean;
+    inStockProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        inStockIcon: string;
+        outOfStockIcon: string;
+        additionalClasses: string;
+    };
+    linkTitle: boolean;
+    identifier: string;
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    price: string;
+    priceProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+    buttonProps: {
+        text: string;
+        as: string;
+        size: string;
+        fontColor: string;
+        borderColor: string;
+        shape: string;
+        color: string;
+        hoverBackground?: string;
+        additionalClasses: string;
+    };
+    badgeText: string;
+    description: string;
+};
+declare const KitContentCardTemplate: ({ data }: {
+    data: DataTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export default KitContentCardTemplate;

package/dist/components/Card/templates/KitContentCardTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+const KitContentCardTemplate = ({ data }) => {
+    return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[244px] h-auto sm:h-[255px] border border-[#DFE4EA] bg-white rounded-lg relative p-3 hover:border-1 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-2 left-2", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-yellow-800" }) }), _jsx("div", { className: "flex flex-col items-center gap-2 mt-6 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[80px] h-[80px] sm:w-[100px] sm:h-[100px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-2", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-xs sm:text-sm", text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left` }), _jsx(Text, { tag: "span", size: "text-xs", text: data.identifier, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "text-left" })] }), _jsxs("div", { className: "flex items-end justify-between w-full mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-xs sm:text-sm", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: "bg-slate-200", shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: "px-2 py-1 cursor-not-allowed", isDisabled: true })] })] }));
+};
+export default KitContentCardTemplate;

package/dist/components/Card/templates/ShippingAddressCardTemplate.d.ts

@@ -0,0 +1,15 @@
+type DataTypes = {
+    id: string;
+    title: string;
+    addressLine1: string;
+    addressLine2: string;
+    addressLine3: string;
+    imageUrl: string | null;
+    altText: string;
+    badgeText: string;
+};
+type ShippingAddressCardTemplateProps = {
+    data: DataTypes;
+};
+declare const ShippingAddressCardTemplate: ({ data, }: ShippingAddressCardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default ShippingAddressCardTemplate;

package/dist/components/Card/templates/ShippingAddressCardTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+const ShippingAddressCardTemplate = ({ data, }) => {
+    return (_jsxs("div", { className: "flex flex-col sm:flex-row p-4 sm:p-6 m-4 sm:m-20 border border-[#00B9A8] bg-white rounded-lg w-full relative hover:border-teal-500 hover:shadow-inner", children: [_jsx("div", { className: "flex-shrink-0 w-full sm:w-auto mb-4 sm:mb-0", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-auto sm:h-auto object-contain" }) }), _jsxs("div", { className: "flex flex-col w-full h-full sm:ml-5", children: [_jsx(Badge, { text: _jsx(Text, { color: "text-green-800", fontFamily: "font-serif", tag: "span", text: data.badgeText, size: "text-xs" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "w-[fit-content] h-[fit-content]" }), _jsxs("div", { className: "mt-2 sm:mt-0", children: [_jsx(Text, { tag: "h2", size: "text-lg", text: data.title, color: "text-black", fontFamily: "font-serif", additionalClasses: "font-bold" }), _jsxs("div", { className: "mt-1", children: [_jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine1, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" }), _jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine2, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" }), _jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine3, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" })] })] }), _jsxs("div", { className: "flex flex-row sm:flex-row gap-2 mt-4 sm:mt-20 w-full sm:w-auto", children: [_jsx(FormButton, { text: "Edit", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "px-2 py-1 sm:px-4 sm:py-2 hover:bg-teal-800" }), _jsx(FormButton, { text: "Delete", backgroundColor: "bg-transparent", shape: "rounded-md", borderColor: "border border-red-600", additionalClasses: "px-2 py-1 sm:px-4 sm:py-2 hover:bg-[#FFEBEE]" })] })] })] }));
+};
+export default ShippingAddressCardTemplate;

package/dist/components/Card/templates/VerticalCardTemplate.d.ts

@@ -0,0 +1,61 @@
+import { TagName } from "../../Text/Text.types";
+type DataTypes = {
+    id: string;
+    title: string;
+    rating: number;
+    link: string;
+    inStock: boolean;
+    inStockProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        inStockIcon: string;
+        outOfStockIcon: string;
+        additionalClasses: string;
+    };
+    linkTitle: boolean;
+    identifier: string;
+    titleProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    price: string;
+    priceProps: {
+        tag: TagName;
+        size: string;
+        fontColor: string;
+        fontFamily: string;
+        additionalClasses: string;
+    };
+    imageUrl: string | null;
+    altText: string;
+    buttonProps: {
+        text: string;
+        as: string;
+        size: string;
+        fontColor: string;
+        borderColor: string;
+        shape: string;
+        color: string;
+        hoverBackground?: string;
+        additionalClasses: string;
+    };
+    badgeText: string;
+    description: string;
+};
+type VerticalCardTemplateProps = {
+    data: DataTypes;
+    containerClasses?: string;
+    imageContainerClasses?: string;
+    titleContainerClasses?: string;
+    descriptionContainerClasses?: string;
+    priceContainerClasses?: string;
+    buttonContainerClasses?: string;
+    badgeContainerClasses?: string;
+};
+declare const VerticalCardTemplate: ({ data, containerClasses, imageContainerClasses, titleContainerClasses, descriptionContainerClasses, priceContainerClasses, buttonContainerClasses, badgeContainerClasses, }: VerticalCardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default VerticalCardTemplate;

package/dist/components/Card/templates/VerticalCardTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+const VerticalCardTemplate = ({ data, containerClasses = "", imageContainerClasses = "", titleContainerClasses = "", descriptionContainerClasses = "", priceContainerClasses = "", buttonContainerClasses = "", badgeContainerClasses = "", }) => {
+    return (_jsxs("div", { className: `${containerClasses} p-4`, children: [_jsx("div", { className: badgeContainerClasses, children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-md" }), type: "span", hoverColor: "", badgeContainerClasses: "text-slate-800", backgroundColor: "bg-slate-100" }) }), _jsx("div", { className: `relative ${imageContainerClasses}`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-full object-contain" }) }), _jsxs("div", { className: titleContainerClasses, children: [_jsx("div", { className: "flex flex-col", children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: data.titleProps.additionalClasses }) }), _jsx("div", { className: descriptionContainerClasses, children: _jsxs("div", { className: "relative flex items-center gap-2", children: [_jsx("div", { className: "w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden z-10", children: _jsx(Image, { background: false, src: "../../../assets/compass-card-image-4.png", alt: "Icon 1", additionalClasses: "object-cover w-full h-full" }) }), _jsx("div", { className: "w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden -ml-[20px]", children: _jsx(Image, { background: false, src: "../../../assets/compass-card-image-2.png", alt: "Icon 2", additionalClasses: "object-cover w-full h-full" }) }), _jsx(Text, { tag: "span", size: "text-sm", text: data.description, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "ml-4" })] }) }), _jsxs("div", { className: priceContainerClasses, children: [_jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: buttonContainerClasses })] })] })] }));
+};
+export default VerticalCardTemplate;

package/dist/components/CounterButton/CounterButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CounterButtonTypes } from "./CounterButton.types";
+declare const CounterButton: React.FC<CounterButtonTypes>;
+export default CounterButton;

package/dist/components/CounterButton/CounterButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "../FormButton/FormButton";
+import Text from "../Text/Text";
+const CounterButton = ({ count, containerClassName, inputClassName, buttonClassName, iconClasses, onIncrementClick, onDecrementClick, onInputChange, }) => {
+    return (_jsxs("div", { className: containerClassName, children: [_jsx(FormButton, { icon: _jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: iconClasses, children: _jsx("path", { d: "M11.0626 6.43135H0.937598C0.712598 6.43135 0.506348 6.24385 0.506348 6.0001C0.506348 5.7751 0.693848 5.56885 0.937598 5.56885H11.0626C11.2876 5.56885 11.4938 5.75635 11.4938 6.0001C11.4938 6.2251 11.2876 6.43135 11.0626 6.43135Z" }) }), text: _jsx(Text, { size: "", color: "", text: "Decrement", fontFamily: "", additionalClasses: "sr-only" }), backgroundColor: "clear", borderColor: "none", shape: "cornered", additionalClasses: buttonClassName, onClick: onDecrementClick }), _jsx("div", { className: `flex justify-center items-center border-x border-gray-300`, children: _jsx("input", { type: "text", value: count, className: inputClassName, onChange: onInputChange, onFocus: (e) => e.target.select() }) }), _jsx(FormButton, { icon: _jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: iconClasses, children: [_jsx("g", { clipPath: "url(#clip0_1032_24236)", children: _jsx("path", { d: "M11.2501 5.5876H6.43135V0.750098C6.43135 0.525098 6.24385 0.318848 6.0001 0.318848C5.7751 0.318848 5.56885 0.506348 5.56885 0.750098V5.5876H0.750098C0.525098 5.5876 0.318848 5.7751 0.318848 6.01885C0.318848 6.24385 0.506348 6.4501 0.750098 6.4501H5.5876V11.2501C5.5876 11.4751 5.7751 11.6813 6.01885 11.6813C6.24385 11.6813 6.4501 11.4938 6.4501 11.2501V6.43135H11.2501C11.4751 6.43135 11.6813 6.24385 11.6813 6.0001C11.6813 5.7751 11.4751 5.5876 11.2501 5.5876Z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1032_24236", children: _jsx("rect", { width: 12, height: 12, fill: "white" }) }) })] }), text: _jsx(Text, { size: "", color: "", text: "Increment", fontFamily: "", additionalClasses: "sr-only" }), backgroundColor: "clear", borderColor: "none", shape: "cornered", additionalClasses: buttonClassName, onClick: onIncrementClick })] }));
+};
+export default CounterButton;

package/dist/components/CounterButton/CounterButton.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;

package/dist/components/CounterButton/CounterButton.stories.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import CounterButton from "../CounterButton/CounterButton";
+export default {
+    title: "Components/CounterButton",
+    component: CounterButton,
+    argTypes: {
+        count: {
+            control: "none",
+            description: "The initial count value to be displayed in the input field.",
+        },
+        containerClassName: {
+            control: "none",
+            description: "Additional classes for styling the outer container of the counter.",
+        },
+        inputClassName: {
+            control: "none",
+            description: "Additional classes for styling the input field.",
+        },
+        buttonClassName: {
+            control: "none",
+            description: "Additional classes for styling the increment and decrement buttons.",
+        },
+        iconClasses: {
+            control: "none",
+            description: "Additional classes for styling the icons.",
+        },
+        onIncrementClick: {
+            table: { disable: true },
+            control: "none",
+            description: "Function to handle increment button click.",
+        },
+        onDecrementClick: {
+            table: { disable: true },
+            control: "none",
+            description: "Function to handle decrement button click.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => {
+    const [count, setCount] = useState(args.count);
+    const handleIncrement = () => {
+        setCount((prevCount) => prevCount + 1);
+    };
+    const handleDecrement = () => {
+        setCount((prevCount) => prevCount - 1);
+    };
+    const handleInputChange = (e) => {
+        const newCount = e.target.value === "" || e.target.value === null
+            ? 0
+            : parseInt(e.target.value, 10);
+        if (!isNaN(newCount) && newCount >= 0) {
+            setCount(newCount);
+        }
+    };
+    return (_jsx(CounterButton, { ...args, count: count, onIncrementClick: handleIncrement, onDecrementClick: handleDecrement, onInputChange: handleInputChange }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    count: 1,
+    containerClassName: "flex items-center border border-gray-300 rounded-lg overflow-hidden ",
+    inputClassName: "w-full h-full text-center text-xl border-none outline-none m-0 p-0 bg-white",
+    buttonClassName: "w-12 h-12 flex items-center justify-center",
+    iconClasses: "fill-current text-blue-600",
+};

package/dist/components/CounterButton/CounterButton.types.d.ts

@@ -0,0 +1,10 @@
+export interface CounterButtonTypes {
+    count: number;
+    containerClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    iconClasses?: string;
+    onIncrementClick: () => void;
+    onDecrementClick: () => void;
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/components/CounterButton/CounterButton.types.js

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

package/dist/components/Description/Description.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DescriptionProps } from './Description.types';
+declare const Description: React.FC<DescriptionProps>;
+export default Description;

package/dist/components/Description/Description.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Description = ({ title, children, containerClassName, titleClassName, contentClassName }) => {
+    return (_jsxs("div", { className: `${containerClassName}`, children: [_jsx("div", { className: `${titleClassName}`, children: title }), _jsx("div", { className: `${contentClassName}`, children: children })] }));
+};
+export default Description;

package/dist/components/Description/Description.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const WithCustomStyles: any;