@sonic-equipment/ui 0.0.0

package/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/react.js"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,39 @@
+
+
+> @sonic-equipment/ui@0.0.0 build /Users/jeroenslor/Projects/sonic-equipment/packages/ui
+> rollup --config
+
+
+src/reset.css → dist/reset.css...
+(!) The emitted file "reset.css" overwrites a previously emitted file of the same name.
+created dist/reset.css in 700ms
+
+src/tokens/index.css → dist/base.css...
+(!) The emitted file "base.css" overwrites a previously emitted file of the same name.
+created dist/base.css in 458ms
+
+src/app.css → dist/app.css...
+(!) The emitted file "app.css" overwrites a previously emitted file of the same name.
+created dist/app.css in 400ms
+
+src/button/button.tsx → dist/button.js...
+(!) Unresolved dependencies
+https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
+clsx (imported by "src/button/button.tsx")
+react-aria-components (imported by "src/button/button.tsx")
+created dist/button.js in 462ms
+
+src/checkbox/checkbox.tsx → dist/checkbox.js...
+(!) Unresolved dependencies
+https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
+react-aria-components (imported by "src/checkbox/checkbox.tsx")
+created dist/checkbox.js in 387ms
+
+src/product-card/product-card.tsx → dist/product-card.js...
+created dist/product-card.js in 367ms
+
+src/product-listing/product-listing.tsx → dist/product-listing.js...
+(!) Unresolved dependencies
+https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
+react-aria-components (imported by "src/checkbox/checkbox.tsx")
+created dist/product-listing.js in 392ms

package/dist/app.css

@@ -0,0 +1,12 @@
+html {
+  font-family: var(--font-family-sonic);
+  font-size: var(--font-size-base);
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+          text-size-adjust: none;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/base.css

@@ -0,0 +1,240 @@
+:root {   
+  --font-family-sonic: 'Pancetta', sans-serif;  
+
+  --font-size-20: 0.75rem; /* 12px */
+  --font-size-24: 0.875rem; /* 14px */
+  --font-size-28: 1rem; /* 16px */
+  --font-size-32: 1.125rem; /* 18px */
+  --font-size-36: 1.25rem; /* 20px */
+  --font-size-40: 1.5rem; /* 24px */
+  --font-size-48: 1.875rem;/* 30px */ 
+  --font-size-56: 2.25rem; /* 36px */
+  --font-size-64: 3rem; /* 48px */
+  --font-size-72: 3.75rem; /* 60px */
+  --font-size-80: 4.5rem; /* 72px */
+  --font-size-96: 6rem; /* 96px */
+  --font-size-112: 8rem; /* 128px */
+  --font-size-base: var(--font-size-28);
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+}
+/*********************************************************
+ *
+ *  Pancetta
+ *
+*********************************************************/
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100022/fonts/pancetta/pancettapro-thin-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100018/fonts/pancetta/pancettapro-thin-webfont.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100030/fonts/pancetta/pancettapro-thinitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100042/fonts/pancetta/pancettapro-thinitalic-webfont.woff") format("woff");
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099957/fonts/pancetta/pancettapro-extralight-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099944/fonts/pancetta/pancettapro-extralight-webfont.woff") format("woff");
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099964/fonts/pancetta/pancettapro-extralightitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099960/fonts/pancetta/pancettapro-extralightitalic-webfont.woff") format("woff");
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099985/fonts/pancetta/pancettapro-light-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099977/fonts/pancetta/pancettapro-light-webfont.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100009/fonts/pancetta/pancettapro-lightitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099989/fonts/pancetta/pancettapro-lightitalic-webfont.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100013/fonts/pancetta/pancettapro-regular-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100005/fonts/pancetta/pancettapro-regular-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099973/fonts/pancetta/pancettapro-italic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099969/fonts/pancetta/pancettapro-italic-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099997/fonts/pancetta/pancettapro-medium-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099981/fonts/pancetta/pancettapro-medium-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100001/fonts/pancetta/pancettapro-mediumitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099993/fonts/pancetta/pancettapro-mediumitalic-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100038/fonts/pancetta/pancettapro-semibold-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100034/fonts/pancetta/pancettapro-semibold-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100026/fonts/pancetta/pancettapro-semibolditalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100047/fonts/pancetta/pancettapro-semibolditalic-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099948/fonts/pancetta/pancettapro-bold-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099932/fonts/pancetta/pancettapro-bold-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099952/fonts/pancetta/pancettapro-bolditalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099936/fonts/pancetta/pancettapro-bolditalic-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099929/fonts/pancetta/pancettapro-black-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099921/fonts/pancetta/pancettapro-black-webfont.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099941/fonts/pancetta/pancettapro-blackitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099924/fonts/pancetta/pancettapro-blackitalic-webfont.woff") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-xxl: 1536px;
+}
+:root {
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-26: 24px;
+  --space-28: 28px;
+  --space-32: 32px;
+  --space-36: 36px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --space-96: 96px;
+  --space-112: 112px;
+  --space-128: 128px;
+  --space-160: 160px;
+  --space-192: 192px;
+  --space-224: 224px;
+}
+:root {
+  --white: #ffffff;
+  --red-50: #fff0f1;
+  --red-100: #ffdee0;
+  --red-200: #ffc3c7;
+  --red-300: #ff999f;
+  --red-400: #ff5e67;
+  --red-500: #ff2b37;
+  --red-600: #f60c1a;
+  --red-700: #e30613;
+  --red-800: #ab0913;
+  --red-900: #8d0f16;
+  --red-950: #4d0206;
+
+  --gray-100: #ededed;
+  --gray-500: #bcbcbc;
+  --gray-900: #6f6f6f;
+
+  --black: #000000;
+
+  --brand-color-black: var(--black);
+
+  --brand-color-red: var(--red-700);
+  --brand-color-dark-red: var(--red-800);
+
+  --brand-color-light-gray: var(--gray-100);
+  --brand-color-medium-gray: var(--gray-500);
+  --brand-color-dark-gray: var(--gray-900);
+
+  --focus-ring-color: var(--brand-color-red);
+}
+:root {
+  --border-radius-0: 0px;
+  --border-radius-1: 2px;
+  --border-radius-2: 4px;
+  --border-radius-3: 6px;
+  --border-radius-4: 8px;
+  --border-radius-5: 12px;
+  --border-radius-6: 16px;
+  --border-radius-7: 20px;
+  --border-radius-8: 22px;
+  --border-radius-9: 30px;
+  --border-radius-full: 9999px;
+
+  --border-width-0: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-3: 4px;
+}

package/dist/button.css

@@ -0,0 +1,49 @@
+.button-module-YrVJX {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  vertical-align: top;
+  text-transform: uppercase;
+  font-style: italic;
+  font-weight: var(--font-weight-bold);
+}
+
+/*********************************************************
+ *
+ *  Sizes
+ *
+*********************************************************/
+
+.button-module-JKC7O {
+  min-height: 40px;
+  border-radius: var(--border-radius-7);
+  padding-inline: var(--space-20);
+}
+
+.button-module-QYp75 {
+  min-height: 44px;  
+  border-radius: var(--border-radius-8);
+  padding-inline: var(--space-20);
+}
+
+/*********************************************************
+ *
+ *  Variants
+ *
+*********************************************************/
+
+/* Solid */
+
+.button-module-trXaT:where(.button-module-2nlh8) {
+    background-color: var(--brand-color-red);
+    color: var(--white);
+  }
+
+.button-module-trXaT:where(.button-module-2nlh8):where([data-hovered]),
+    .button-module-trXaT:where(.button-module-2nlh8):where([data-pressed]) {
+      background-color: var(--brand-color-dark-red);
+    }

package/dist/button.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Button as Button$1 } from 'react-aria-components';
+
+var styles = {"button":"button-module-YrVJX","md":"button-module-JKC7O","lg":"button-module-QYp75","solid":"button-module-trXaT","primary":"button-module-2nlh8"};
+
+function Button({ children, variant = "solid", size = "md", color = "primary", className, ...props }) {
+    return (jsx(Button$1, { ...props, className: clsx(styles.button, styles[variant], styles[size], styles[color], className), children: children }));
+}
+Button.displayName = "Button";
+
+export { Button };

package/dist/checkbox.css

@@ -0,0 +1,63 @@
+.checkbox-module-FLuy1 {
+  --selected-color: var(--brand-color-red);
+  --selected-color-pressed: var(--brand-color-dark-red);
+  --checkmark-color: var(--white);
+
+  display: flex;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: var(--font-size-24);
+  line-height: 14px;
+  color: var(--brand-color-black);
+  forced-color-adjust: none;
+}
+
+  .checkbox-module-FLuy1 .checkbox-module-v6JLF {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--brand-color-medium-gray);
+    border-radius: var(--border-radius-1);
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;    
+  }
+
+  .checkbox-module-FLuy1 svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  .checkbox-module-FLuy1[data-pressed] .checkbox-module-v6JLF {
+    border-color: var(--brand-color-dark-gray);
+  }
+
+  .checkbox-module-FLuy1[data-focus-visible] .checkbox-module-v6JLF {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .checkbox-module-FLuy1[data-selected] .checkbox-module-v6JLF, .checkbox-module-FLuy1[data-indeterminate] .checkbox-module-v6JLF {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+  .checkbox-module-FLuy1[data-selected][data-pressed] .checkbox-module-v6JLF, .checkbox-module-FLuy1[data-indeterminate][data-pressed] .checkbox-module-v6JLF {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+  .checkbox-module-FLuy1[data-selected] svg, .checkbox-module-FLuy1[data-indeterminate] svg {
+      stroke-dashoffset: 44;
+    }
+
+  .checkbox-module-FLuy1[data-indeterminate] svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }

package/dist/checkbox.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
+
+var styles = {"checkbox":"checkbox-module-FLuy1","box":"checkbox-module-v6JLF"};
+
+function Checkbox({ children, ...props }) {
+    return (jsxs(Checkbox$1, { ...props, className: styles.checkbox, children: [jsx("div", { className: styles.box, children: jsx("svg", { viewBox: "0 0 18 18", "aria-hidden": "true", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+}
+
+export { Checkbox };

package/dist/dts/button/button.d.ts

@@ -0,0 +1,12 @@
+import { Button as AriaButton } from "react-aria-components";
+import { ComponentPropsWithoutRef } from "react";
+export type ButtonProps = ComponentPropsWithoutRef<typeof AriaButton> & {
+    variant?: "solid" | "outline" | "ghost";
+    size?: "md" | "lg";
+    color?: "primary" | "secondary" | "tertiary" | "quaternary";
+};
+export declare function Button({ children, variant, size, color, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/dts/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,WAAW,GAAG,wBAAwB,CAAC,OAAO,UAAU,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;CAC7D,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAiB,EACjB,IAAW,EACX,KAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CAeb;yBAtBe,MAAM"}

package/dist/dts/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/dts/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,wBAAwB,EAAa,MAAM,OAAO,CAAC;AAG5D,MAAM,MAAM,aAAa,GAAG,wBAAwB,CAAC,OAAO,YAAY,CAAC,CAAC;AAE1E,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAW7D"}

package/dist/dts/color-filter/color-filter.d.ts

@@ -0,0 +1,14 @@
+import { FilterProps } from "../filter/filter";
+export type ColorFilterProps = FilterProps & {
+    options: [
+        {
+            value: string;
+            label: string;
+            count: number;
+        }
+    ];
+    activeFilters: string[];
+    onFilterChange: (value: string[]) => void;
+};
+export declare function ColorFilter({ options, activeFilters, onFilterChange, }: ColorFilterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-filter.d.ts.map

package/dist/dts/color-filter/color-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-filter.d.ts","sourceRoot":"","sources":["../../../src/color-filter/color-filter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QACP;YACE,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf;KACF,CAAC;IACF,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,aAAa,EACb,cAAc,GACf,EAAE,gBAAgB,2CAoBlB"}

package/dist/dts/filter/filter.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+export type FilterProps = PropsWithChildren<{
+    title?: string;
+    isCollapseable?: boolean;
+    initialIsCollapsed?: boolean;
+}>;
+export declare function Filter({ title, children, isCollapseable, initialIsCollapsed, }: FilterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter.d.ts.map

package/dist/dts/filter/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/filter/filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC,CAAC;AAEH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,cAAqB,EACrB,kBAA0B,GAC3B,EAAE,WAAW,2CASb"}

package/dist/dts/product-card/product-card.d.ts

@@ -0,0 +1,10 @@
+export type ProductCardProps = {
+    product: {
+        id: string;
+        title: string;
+    };
+    onAddToCart?: (productId: string) => void;
+    onAddToList?: (productId: string) => void;
+};
+export declare function ProductCard({ product }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-card.d.ts.map

package/dist/dts/product-card/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../src/product-card/product-card.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAMxD"}

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

@@ -0,0 +1,38 @@
+import { ComponentType } from "react";
+import { ProductCardProps } from "../product-card/product-card";
+export type Filters = {
+    color: {
+        options: [
+            {
+                value: string;
+                label: string;
+                count: number;
+            }
+        ];
+    };
+};
+export type ActiveFilters = {
+    color: string[];
+};
+export type Sort = {
+    by: string;
+    direction: string;
+};
+export type ProductListingProps = {
+    productCard: ComponentType<ProductCardProps>;
+    products: {
+        id: string;
+        title: string;
+    }[];
+    total: number;
+    filters: Filters;
+    activeFilters: ActiveFilters;
+    sort: {
+        by: string;
+        direction: string;
+    };
+    onFilterChange: (filters: ActiveFilters) => void;
+    onSortChange: (sort: Sort) => void;
+};
+export declare function ProductListing({ productCard: ProductCard, products, filters, activeFilters, onFilterChange, onSortChange, }: ProductListingProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-listing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-listing.d.ts","sourceRoot":"","sources":["../../../src/product-listing/product-listing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE;QACL,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,MAAM,CAAC;gBACd,KAAK,EAAE,MAAM,CAAC;gBACd,KAAK,EAAE,MAAM,CAAC;aACf;SACF,CAAC;KACH,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,QAAQ,EAAE;QACR,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,cAAc,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EAAE,WAAW,EACxB,QAAQ,EACR,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,GACb,EAAE,mBAAmB,2CA8BrB"}

package/dist/product-card.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ProductCard({ product }) {
+    return (jsx("div", { children: jsx("h1", { children: product.title }) }));
+}
+
+export { ProductCard };

package/dist/product-listing.css

@@ -0,0 +1,63 @@
+.checkbox-module-FLuy1 {
+  --selected-color: var(--brand-color-red);
+  --selected-color-pressed: var(--brand-color-dark-red);
+  --checkmark-color: var(--white);
+
+  display: flex;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: var(--font-size-24);
+  line-height: 14px;
+  color: var(--brand-color-black);
+  forced-color-adjust: none;
+}
+
+  .checkbox-module-FLuy1 .checkbox-module-v6JLF {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--brand-color-medium-gray);
+    border-radius: var(--border-radius-1);
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;    
+  }
+
+  .checkbox-module-FLuy1 svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  .checkbox-module-FLuy1[data-pressed] .checkbox-module-v6JLF {
+    border-color: var(--brand-color-dark-gray);
+  }
+
+  .checkbox-module-FLuy1[data-focus-visible] .checkbox-module-v6JLF {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .checkbox-module-FLuy1[data-selected] .checkbox-module-v6JLF, .checkbox-module-FLuy1[data-indeterminate] .checkbox-module-v6JLF {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+  .checkbox-module-FLuy1[data-selected][data-pressed] .checkbox-module-v6JLF, .checkbox-module-FLuy1[data-indeterminate][data-pressed] .checkbox-module-v6JLF {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+  .checkbox-module-FLuy1[data-selected] svg, .checkbox-module-FLuy1[data-indeterminate] svg {
+      stroke-dashoffset: 44;
+    }
+
+  .checkbox-module-FLuy1[data-indeterminate] svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }

package/dist/product-listing.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
+
+var styles = {"checkbox":"checkbox-module-FLuy1","box":"checkbox-module-v6JLF"};
+
+function Checkbox({ children, ...props }) {
+    return (jsxs(Checkbox$1, { ...props, className: styles.checkbox, children: [jsx("div", { className: styles.box, children: jsx("svg", { viewBox: "0 0 18 18", "aria-hidden": "true", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+}
+
+function Filter({ title, children, isCollapseable = true, initialIsCollapsed = false, }) {
+    return (jsxs("div", { children: [jsx("div", { children: jsx("h3", { children: title }) }), jsx("div", { children: children })] }));
+}
+
+function ColorFilter({ options, activeFilters, onFilterChange, }) {
+    return (jsx(Filter, { title: "Color", children: jsx("ul", { children: options.map((option) => (jsx("li", { children: jsx(Checkbox, { onChange: (isSelected) => onFilterChange(isSelected ? [option.value] : []), value: option.value, isSelected: activeFilters.includes(option.value), children: option.label }) }, option.value))) }) }));
+}
+
+function ProductListing({ productCard: ProductCard, products, filters, 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, activeFilters: activeFilters.color, onFilterChange: (color) => onFilterChange({ color }) }) })] }), jsx("main", { children: jsxs("select", { children: [jsx("option", { value: "", children: "Sort By" }) // translations
+                        , " // translations", jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), jsx("ul", { children: products.map((product) => (jsx("li", { children: jsx(ProductCard, { product: product }) }, product.id))) })] }));
+}
+
+export { ProductListing };