@sonic-equipment/ui 0.0.10 → 0.0.12

package/dist/index.d.ts

@@ -1,53 +1,95 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Button as Button$1, Checkbox as Checkbox$1 } from 'react-aria-components';
-import { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
-type ButtonProps = ComponentPropsWithoutRef<typeof Button$1> & {
-    variant?: "solid" | "outline" | "ghost";
-    size?: "md" | "lg";
-    color?: "primary" | "secondary" | "tertiary" | "quaternary";
+interface ButtonProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: string;
+    className?: string;
+    color?: 'primary' | 'secondary';
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+    onPress?: VoidFunction;
+    size?: 'md' | 'lg';
+    variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
-};
-declare function Button({ children, variant, size, color, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-declare function FavoriteFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+}
+declare function Button({ _pseudo, children, className, color, icon, isDisabled, onPress, size, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
-
-type FavoriteButtonProps = {
+interface FavoriteButtonProps {
     isFavorite: boolean;
     onPress: () => void;
-};
+}
 declare function FavoriteButton({ isFavorite, onPress }: FavoriteButtonProps): react_jsx_runtime.JSX.Element;
 
-type IconButtonProps = ComponentPropsWithoutRef<typeof Button$1> & {
-    size?: "md" | "lg";
-    color?: "primary" | "secondary";
-};
-declare function IconButton({ size, color, className, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+interface IconButtonProps {
+    children: React.ReactNode;
+    className?: string;
+    color?: 'primary' | 'secondary';
+    onPress?: VoidFunction;
+    size?: 'md' | 'lg';
+}
+declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
-type ProductCardProps = {
-    product: {
-        id: string;
-        title: string;
-    };
-    favoriteButton: ComponentType<any>;
-};
-declare function ProductCard({ product, favoriteButton: FavoriteButton, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+interface Product {
+  id: string
+  title: string
+}
 
-type CheckboxProps = ComponentPropsWithoutRef<typeof Checkbox$1>;
-declare function Checkbox({ children, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+interface ProductCardProps {
+    favoriteButton: ComponentType<{
+        productId: string;
+    }>;
+    product: Product;
+}
+declare function ProductCard({ favoriteButton: FavoriteButton, product, }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-type Filters = {
+interface Price {
+    exclVat: number;
+    inclVat: number;
+}
+interface ProductPriceProps {
+    current: Price;
+    includeVat?: boolean;
+    original?: Price;
+}
+declare function ProductPrice({ current, includeVat, original, }: ProductPriceProps): react_jsx_runtime.JSX.Element | undefined;
+
+interface ProductSkuProps {
+    sku: string;
+}
+declare function ProductSku({ sku }: ProductSkuProps): react_jsx_runtime.JSX.Element;
+
+declare function RightArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function CartFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function CartOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function FavoriteFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: ReactNode;
+    className?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onChange?: (isSelected: boolean) => void;
+    value?: string;
+}
+declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface Filters {
     color: {
         options: {
-            value: string;
-            label: string;
             count: number;
+            label: string;
+            value: string;
         }[];
     };
-};
+}
 type ActiveFilters = {
     colors: string[];
 };
@@ -56,32 +98,34 @@ type Sort = {
     direction: string;
 };
 type ProductListingProps = {
-    productCard: ComponentType<any>;
+    activeFilters: ActiveFilters;
+    filters: Filters;
+    isLoading?: boolean;
+    onFilterChange: (filters: ActiveFilters) => void;
+    onSortChange: (sort: Sort) => void;
+    productCard: ComponentType<{
+        product: Product;
+    }>;
     products: {
         id: string;
         title: string;
     }[];
-    total: number;
-    filters: Filters;
-    activeFilters: ActiveFilters;
     sort: {
         by: string;
         direction: string;
     };
-    isLoading?: boolean;
-    onFilterChange: (filters: ActiveFilters) => void;
-    onSortChange: (sort: Sort) => void;
+    total: number;
 };
-declare function ProductListing({ productCard: ProductCard, products, filters, isLoading, activeFilters, onFilterChange, onSortChange, }: ProductListingProps): react_jsx_runtime.JSX.Element;
+declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): react_jsx_runtime.JSX.Element;
 
 declare function createProductListingSearchParams(state: {
+    filters: {
+        colors: string[];
+    };
     sort: {
         by: string;
         direction: string;
     };
-    filters: {
-        colors: string[];
-    };
 }): URLSearchParams;
 declare function parseProductListingSearchParams(params: URLSearchParams): {
     filters: {
@@ -93,4 +137,4 @@ declare function parseProductListingSearchParams(params: URLSearchParams): {
     };
 };
 
-export { type ActiveFilters, Button, type ButtonProps, Checkbox, type CheckboxProps, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type Filters, IconButton, type IconButtonProps, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, type Sort, createProductListingSearchParams, parseProductListingSearchParams };
+export { type ActiveFilters, Button, type ButtonProps, CartFilledIcon, CartOutlinedIcon, Checkbox, type CheckboxProps, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type Filters, IconButton, type IconButtonProps, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, type Sort, createProductListingSearchParams, parseProductListingSearchParams };

package/dist/index.js

@@ -1,74 +1,115 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button as Button$1, Checkbox as Checkbox$1 } from 'react-aria-components';
+import clsx from 'clsx';
 
-var styles$3 = {"button":"button-module-V4meK","md":"button-module-GVTEW","lg":"button-module-nyNY8","solid":"button-module-AjvlY","primary":"button-module-tmyk8","outline":"button-module-vq9GI"};
+function RightArrowFilledIcon(props) {
+    return (jsx("svg", { height: "13", viewBox: "0 0 12 13", width: "12", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M3.24 11.4a.239.239 0 0 1-.203-.365l3.105-4.97c.256-.41.219-.932-.093-1.3L3.54 1.792a.239.239 0 0 1 .183-.393h1.956c.07 0 .137.031.182.085l1.866 2.21c.778.92.871 2.226.232 3.249l-2.715 4.344a.239.239 0 0 1-.202.112H3.239z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
 
-function Button({ children, variant = "solid", size = "md", color = "primary", className, ...props }) {
-    return (jsx(Button$1, { ...props, className: clsx(styles$3.button, styles$3[variant], styles$3[size], styles$3[color], className), children: children }));
+var styles$5 = {"button":"button-module-V4meK","md":"button-module-GVTEW","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
+
+function Button({ _pseudo = 'none', children, className, color = 'primary', icon, isDisabled, onPress, size = 'md', variant = 'solid', withArrow = false, }) {
+    if (children && icon)
+        console.warn('Button should not have both children and icon. Icon has precedence.');
+    return (jsx(Button$1, { className: clsx(className, styles$5.button, styles$5[variant], styles$5[size], styles$5[color], { [styles$5.icon]: icon }, styles$5[_pseudo]), isDisabled: isDisabled, onPress: onPress, children: icon ? (icon) : (jsxs(Fragment, { children: [children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$5['right-arrow-icon'] }))] })) }));
+}
+
+var styles$4 = {"iconButton":"icon-button-module-HJm0i","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
+
+function IconButton({ children, className, color = 'primary', onPress, size = 'md', }) {
+    return (jsx(Button$1, { className: clsx(styles$4.iconButton, styles$4[size], styles$4[color], className), onPress: onPress, children: children }));
 }
 
 function FavoriteFilledIcon(props) {
-    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 22a.667.667 0 0 1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.244 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
+    return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 22a.667.667 0 0 1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.244 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
 function FavoriteOutlinedIcon(props) {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: jsx("path", { d: "M7.333 3.33c-2.206 0-4 1.793-4 3.997 0 .857.316 1.71.967 2.604L12 20.223l7.705-10.299c.646-.888.962-1.74.962-2.597a4.003 4.003 0 0 0-4-3.996c-1.813 0-3.545 1.232-4.028 2.865a.666.666 0 0 1-1.278 0C10.878 4.563 9.146 3.33 7.333 3.33M12 22c-.21 0-.408-.1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.245 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
+    return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.333 3.33c-2.206 0-4 1.793-4 3.997 0 .857.316 1.71.967 2.604L12 20.223l7.705-10.299c.646-.888.962-1.74.962-2.597a4.003 4.003 0 0 0-4-3.996c-1.813 0-3.545 1.232-4.028 2.865a.666.666 0 0 1-1.278 0C10.878 4.563 9.146 3.33 7.333 3.33M12 22c-.21 0-.408-.1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.245 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$2 = {"iconButton":"icon-button-module-HJm0i","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
+var styles$3 = {"favorite-button":"favorite-button-module-tXSS3","isFavorite":"favorite-button-module-6FS3Q"};
 
-function IconButton({ size = "md", color = "primary", className, ...props }) {
-    return (jsx(Button$1, { ...props, className: clsx(styles$2.iconButton, styles$2[size], styles$2[color], className) }));
+function FavoriteButton({ isFavorite, onPress }) {
+    return (jsx(IconButton, { className: clsx(styles$3['favorite-button'], {
+            [styles$3.isFavorite]: isFavorite,
+        }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
 }
 
-var styles$1 = {"isFavorite":"favorite-button-module-6FS3Q"};
+function ProductCard({ favoriteButton: FavoriteButton, product, }) {
+    return (jsxs("div", { children: [jsx("div", { children: jsx(FavoriteButton, { productId: product.id }) }), jsx("h2", { children: product.title })] }));
+}
 
-function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { color: "secondary", onPress: () => onPress(), className: clsx({ [styles$1.isFavorite]: isFavorite }), children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
+var styles$2 = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
+
+const formatPrice = (price) => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+}).format(price);
+function ProductPrice({ current, includeVat = true, original, }) {
+    if (!current.inclVat && !current.exclVat)
+        return;
+    const originalPrice = includeVat ? original?.inclVat : original?.exclVat;
+    const currentPrice = includeVat ? current.inclVat : current.exclVat;
+    const originalPriceCurrency = originalPrice
+        ? formatPrice(originalPrice)
+        : null;
+    const currentPriceCurrency = formatPrice(currentPrice);
+    const [wholes, decimals] = currentPriceCurrency.split('.');
+    return (jsxs("div", { className: styles$2['product-price'], children: [!!originalPrice && (jsx("span", { className: styles$2['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$2['current-price-wrapper'], children: [jsxs("div", { className: styles$2['current-price'], children: [jsx("span", { className: styles$2.wholes, children: wholes }), jsx("span", { className: styles$2.dot, children: "." }), jsx("span", { className: styles$2.decimals, children: decimals })] }), jsx("span", { className: styles$2.vat, children: includeVat ? 'incl. tax' : 'excl. tax' })] })] }));
 }
 
-function ProductCard({ product, favoriteButton: FavoriteButton, }) {
-    return (jsxs("div", { children: [jsx("div", { children: jsx(FavoriteButton, { productId: product.id }) }), jsx("h2", { children: product.title })] }));
+var styles$1 = {"product-sku":"product-sku-module-ITb8x"};
+
+function ProductSku({ sku }) {
+    return jsx("p", { className: styles$1['product-sku'], children: sku });
+}
+
+function CartFilledIcon(props) {
+    return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+function CartOutlinedIcon(props) {
+    return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434zm15.794 4.741H5.623l.361 4.63h13.334l1.065-4.63z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles = {"checkbox":"checkbox-module-y3eBg","box":"checkbox-module-TqLux","checkmark":"checkbox-module-Yhrdp"};
+var styles = {"checkbox":"checkbox-module-y3eBg","box":"checkbox-module-TqLux","checkmark":"checkbox-module-Yhrdp","focus":"checkbox-module-zoTSP","active":"checkbox-module-sHmzp"};
 
-function Checkbox({ children, ...props }) {
-    return (jsxs(Checkbox$1, { ...props, className: styles.checkbox, children: [jsx("div", { className: styles.box, children: jsx("svg", { className: styles.checkmark, viewBox: "0 0 18 18", "aria-hidden": "true", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
 }
 
-function Filter({ title, children }) {
+function Filter({ children, title }) {
     return (jsxs("div", { children: [jsx("div", { children: jsx("h3", { children: title }) }), jsx("div", { children: children })] }));
 }
 
-function ColorFilter({ options, value, onChange }) {
-    return (jsx(Filter, { title: "Color", children: jsx("ul", { children: options.map((option) => (jsx("li", { children: jsx(Checkbox, { onChange: (isSelected) => onChange(isSelected
+function ColorFilter({ onChange, options, value }) {
+    return (jsx(Filter, { title: "Color", children: jsx("ul", { children: options.map(option => (jsx("li", { children: jsx(Checkbox, { isSelected: value.includes(option.value), onChange: isSelected => onChange(isSelected
                         ? [...value, option.value]
-                        : value.filter((v) => v !== option.value)), value: option.value, isSelected: value.includes(option.value), children: option.label }) }, option.value))) }) }));
+                        : value.filter(v => v !== option.value)), value: option.value, children: option.label }) }, option.value))) }) }));
 }
 
-function ProductListing({ productCard: ProductCard, products, filters, isLoading = false, activeFilters, onFilterChange, onSortChange, }) {
-    return (jsxs("div", { children: [jsx("h1", { children: "Product listing" }), jsxs("aside", { children: [jsx("h2", { children: "Filter" }), jsx("div", { children: jsx(ColorFilter, { options: filters.color.options, value: activeFilters.colors, onChange: (colors) => onFilterChange({ colors }) }) })] }), jsx("main", { children: jsxs("select", { onChange: (e) => onSortChange({ by: e.target.value, direction: "asc" }), children: [jsx("option", { value: "", children: "Sort By" }), jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), isLoading ? (jsx("p", { children: "Loading..." })) : (jsx("ul", { children: products.map((product) => (jsx("li", { children: jsx(ProductCard, { product: product }) }, product.id))) }))] }));
+function ProductListing({ activeFilters, filters, isLoading = false, onFilterChange, onSortChange, productCard: ProductCard, products, }) {
+    return (jsxs("div", { children: [jsx("h1", { children: "Product listing" }), jsxs("aside", { children: [jsx("h2", { children: "Filter" }), jsx("div", { children: jsx(ColorFilter, { onChange: colors => onFilterChange({ colors }), options: filters.color.options, value: activeFilters.colors }) })] }), jsx("main", { children: jsxs("select", { onChange: e => onSortChange({ by: e.target.value, direction: 'asc' }), children: [jsx("option", { value: "", children: "Sort By" }), jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), isLoading ? (jsx("p", { children: "Loading..." })) : (jsx("ul", { children: products.map(product => (jsx("li", { children: jsx(ProductCard, { product: product }) }, product.id))) }))] }));
 }
 
 function createProductListingSearchParams(state) {
     const params = new URLSearchParams();
     if (state.filters.colors.length > 0) {
-        params.set("colors", state.filters.colors.join(","));
+        params.set('colors', state.filters.colors.join(','));
     }
-    params.set("sortBy", state.sort.by);
-    params.set("sortDirection", state.sort.direction);
+    params.set('sortBy', state.sort.by);
+    params.set('sortDirection', state.sort.direction);
     return params;
 }
 function parseProductListingSearchParams(params) {
     return {
-        filters: { colors: params.get("colors")?.split(",") ?? [] },
+        filters: { colors: params.get('colors')?.split(',') ?? [] },
         sort: {
-            by: params.get("sortBy") ?? "relevance",
-            direction: params.get("sortDirection") ?? "asc",
+            by: params.get('sortBy') ?? 'relevance',
+            direction: params.get('sortDirection') ?? 'asc',
         },
     };
 }
 
-export { Button, Checkbox, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, IconButton, ProductCard, ProductListing, createProductListingSearchParams, parseProductListingSearchParams };
+export { Button, CartFilledIcon, CartOutlinedIcon, Checkbox, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, IconButton, ProductCard, ProductListing, ProductPrice, ProductSku, RightArrowFilledIcon, createProductListingSearchParams, parseProductListingSearchParams };

package/dist/inputs/checkbox/checkbox.d.ts

@@ -1,4 +1,11 @@
-import { Checkbox as AriaCheckbox } from "react-aria-components";
-import { ComponentPropsWithoutRef } from "react";
-export type CheckboxProps = ComponentPropsWithoutRef<typeof AriaCheckbox>;
-export declare function Checkbox({ children, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface CheckboxProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: ReactNode;
+    className?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onChange?: (isSelected: boolean) => void;
+    value?: string;
+}
+export declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/inputs/checkbox/checkbox.stories.d.ts

@@ -1,17 +1,19 @@
-import type { StoryObj } from "@storybook/react";
-import { Checkbox } from "./checkbox";
+import type { StoryObj } from '@storybook/react';
+import { Checkbox } from './checkbox';
 declare const meta: {
-    title: string;
+    args: {
+        onChange: import("@vitest/spy").Mock<[isSelected: boolean], void>;
+    };
     component: typeof Checkbox;
     parameters: {
         layout: string;
     };
     tags: string[];
-    args: {
-        onChange: import("@storybook/test").Mock<[isSelected: boolean], void>;
-    };
+    title: string;
 };
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
 export declare const Unchecked: Story;
 export declare const Checked: Story;
+export declare const CheckedDisabled: Story;
+export declare const CheckedFocus: Story;

package/dist/product-listing/filters/colors/color-filter.d.ts

@@ -1,11 +1,11 @@
-import { FilterProps } from "../filter/filter";
+import { FilterProps } from 'product-listing/filters/filter/filter';
 export type ColorFilterProps = FilterProps & {
+    onChange: (value: string[]) => void;
     options: {
-        value: string;
-        label: string;
         count: number;
+        label: string;
+        value: string;
     }[];
     value: string[];
-    onChange: (value: string[]) => void;
 };
-export declare function ColorFilter({ options, value, onChange }: ColorFilterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorFilter({ onChange, options, value }: ColorFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/product-listing/filters/filter/filter.d.ts

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 export type FilterProps = PropsWithChildren<{
-    title?: string;
-    isCollapseable?: boolean;
     initialIsCollapsed?: boolean;
+    isCollapseable?: boolean;
+    title?: string;
 }>;
-export declare function Filter({ title, children }: FilterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Filter({ children, title }: FilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/product-listing/product-listing.d.ts

@@ -1,13 +1,14 @@
-import { ComponentType } from "react";
-export type Filters = {
+import { ComponentType } from 'react';
+import type { Product } from 'shared/types/product';
+export interface Filters {
     color: {
         options: {
-            value: string;
-            label: string;
             count: number;
+            label: string;
+            value: string;
         }[];
     };
-};
+}
 export type ActiveFilters = {
     colors: string[];
 };
@@ -16,20 +17,22 @@ export type Sort = {
     direction: string;
 };
 export type ProductListingProps = {
-    productCard: ComponentType<any>;
+    activeFilters: ActiveFilters;
+    filters: Filters;
+    isLoading?: boolean;
+    onFilterChange: (filters: ActiveFilters) => void;
+    onSortChange: (sort: Sort) => void;
+    productCard: ComponentType<{
+        product: Product;
+    }>;
     products: {
         id: string;
         title: string;
     }[];
-    total: number;
-    filters: Filters;
-    activeFilters: ActiveFilters;
     sort: {
         by: string;
         direction: string;
     };
-    isLoading?: boolean;
-    onFilterChange: (filters: ActiveFilters) => void;
-    onSortChange: (sort: Sort) => void;
+    total: number;
 };
-export declare function ProductListing({ productCard: ProductCard, products, filters, isLoading, activeFilters, onFilterChange, onSortChange, }: ProductListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): import("react/jsx-runtime").JSX.Element;

package/dist/product-listing/product-listing.stories.d.ts

@@ -1,13 +1,13 @@
-import { StoryObj } from "@storybook/react";
-import { ProductListing } from "./product-listing";
+import { StoryObj } from '@storybook/react';
+import { ProductListing } from './product-listing';
 declare const meta: {
-    title: string;
-    component: typeof ProductListing;
-    tags: string[];
     args: {
-        onFilterChange: import("@storybook/test").Mock<[filters: import("./product-listing").ActiveFilters], void>;
-        onSortChange: import("@storybook/test").Mock<[sort: import("./product-listing").Sort], void>;
+        onFilterChange: import("@vitest/spy").Mock<[filters: import("./product-listing").ActiveFilters], void>;
+        onSortChange: import("@vitest/spy").Mock<[sort: import("./product-listing").Sort], void>;
     };
+    component: typeof ProductListing;
+    tags: string[];
+    title: string;
 };
 export default meta;
 type Story = StoryObj<typeof ProductListing>;

package/dist/product-listing/search-params.d.ts

@@ -1,11 +1,11 @@
 export declare function createProductListingSearchParams(state: {
+    filters: {
+        colors: string[];
+    };
     sort: {
         by: string;
         direction: string;
     };
-    filters: {
-        colors: string[];
-    };
 }): URLSearchParams;
 export declare function parseProductListingSearchParams(params: URLSearchParams): {
     filters: {

package/dist/shared/types/product.d.ts

@@ -0,0 +1,4 @@
+export interface Product {
+    id: string;
+    title: string;
+}