@caseparts-org/caseblocks 0.0.33 → 0.0.34

package/dist/assets/Cart.css

@@ -1 +1 @@
-._cart_h4033_1{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_h4033_8{position:absolute;top:4px;left:17px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_h4033_23{height:calc(100vh - 120px);width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-1)}._cartItems_h4033_32{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_h4033_32 ul{margin:0;padding:0}._cartItems_h4033_32 li{list-style:none;margin:0;padding:var(--spacing-0-25);width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-0-5)}._cartItems_h4033_32 li p{margin:0;padding:0}._cartItems_h4033_32 img{height:40px;width:40px;object-fit:contain}._noItems_h4033_60{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}
+._cart_tgc5k_1{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_tgc5k_8{position:absolute;top:4px;left:17px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_tgc5k_23{height:calc(100vh - 120px);width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:var(--spacing-1)}._cartItems_tgc5k_32{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_tgc5k_32 ul{margin:0;padding:0}._cartItems_tgc5k_32 li{display:grid;grid-template-columns:1fr auto;gap:var(--spacing-0-5);align-items:center;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border-bottom:1px solid var(--color-neutrals-neutral-2)}._itemInfo_tgc5k_54{display:flex;flex-direction:row;align-items:center}._cartItems_tgc5k_32 li p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._cartItems_tgc5k_32 img{height:40px;width:40px;object-fit:contain}._removeItem_tgc5k_71{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer}._itemManagement_tgc5k_78{display:flex;flex-direction:column;align-items:flex-end}._noItems_tgc5k_83{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_tgc5k_90{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}

package/dist/assets/QuantityInput.css

@@ -0,0 +1 @@
+._qty-container_19ir9_1{display:flex;flex-direction:row;align-items:center}._qty-container_19ir9_1>button{font-size:1.25rem;border:1px solid var(--color-neutrals-neutral-3);background-color:#fff;box-sizing:border-box}._qty-container_19ir9_1>input{text-align:center;font-size:18px;border:1px solid var(--color-neutrals-neutral-3);box-sizing:border-box}._qty-container_19ir9_1>input::-webkit-outer-spin-button,._qty-container_19ir9_1>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._qty-container_19ir9_1>input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}._decrease-btn_19ir9_34{position:relative;left:2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._increase-btn_19ir9_45{position:relative;left:-2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._decrease-btn_19ir9_34:disabled,._increase-btn_19ir9_45:disabled{pointer-events:none}._decrease-btn_19ir9_34:disabled svg,._increase-btn_19ir9_45:disabled svg{fill:var(--color-neutrals-neutral-4)}._button-sm_19ir9_66{width:1.5rem;height:1.5rem}._button-md_19ir9_70{width:2rem;height:2rem}._qty-input-sm_19ir9_74{width:2.5rem;height:1.5rem}._qty-input-md_19ir9_78{width:3rem;height:2rem}

package/dist/main-client.js

@@ -1,42 +1,44 @@
-import { Button as e } from "./atoms/Button/Button.js";
+import { Button as t } from "./atoms/Button/Button.js";
 import { Flex as p } from "./atoms/Flex/Flex.js";
 import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
-import { Head as a } from "./atoms/Root/Head.js";
-import { Icon as c } from "./atoms/Icon/Icon.js";
-import { Root as u } from "./atoms/Root/Root.js";
+import { Head as n } from "./atoms/Root/Head.js";
+import { Icon as u } from "./atoms/Icon/Icon.js";
+import { Root as l } from "./atoms/Root/Root.js";
 import { Separator as g } from "./atoms/Separator/Separator.js";
 import { Text as v } from "./atoms/Text/Text.js";
-import { Input as L } from "./atoms/Input/Input.js";
-import { Logo as T } from "./molecules/Logo/Logo.js";
-import { SearchBox as A } from "./molecules/SearchBox/SearchBox.js";
-import { Link as I, LinkProvider as w } from "./atoms/Link/Link.js";
-import { Tooltip as G } from "./molecules/Tooltip/Tooltip.js";
-import { Account as M } from "./molecules/Account/Account.js";
-import { Avatar as P } from "./molecules/Avatar/Avatar.js";
+import { Input as I } from "./atoms/Input/Input.js";
+import { Logo as S } from "./molecules/Logo/Logo.js";
+import { SearchBox as k } from "./molecules/SearchBox/SearchBox.js";
+import { QuantityInput as B } from "./molecules/QuantityInput/QuantityInput.js";
+import { Link as y, LinkProvider as F } from "./atoms/Link/Link.js";
+import { Tooltip as H } from "./molecules/Tooltip/Tooltip.js";
+import { Account as N } from "./molecules/Account/Account.js";
+import { Avatar as Q } from "./molecules/Avatar/Avatar.js";
 import { Chip as V } from "./molecules/Chip/Chip.js";
 import { ToggleView as j } from "./molecules/ToggleView/ToggleView.js";
 import { MainNav as s } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as z } from "./organisms/ChipSelector/ChipSelector.js";
+import { ChipSelector as D } from "./organisms/ChipSelector/ChipSelector.js";
 export {
-  M as Account,
-  P as Avatar,
-  e as Button,
+  N as Account,
+  Q as Avatar,
+  t as Button,
   V as Chip,
-  z as ChipSelector,
+  D as ChipSelector,
   m as Column,
   p as Flex,
   f as Grid,
-  a as Head,
-  c as Icon,
-  L as Input,
-  I as Link,
-  w as LinkProvider,
-  T as Logo,
+  n as Head,
+  u as Icon,
+  I as Input,
+  y as Link,
+  F as LinkProvider,
+  S as Logo,
   s as MainNav,
-  u as Root,
-  A as SearchBox,
+  B as QuantityInput,
+  l as Root,
+  k as SearchBox,
   g as Separator,
   v as Text,
   j as ToggleView,
-  G as Tooltip
+  H as Tooltip
 };

package/dist/main-server.d.ts

@@ -16,3 +16,5 @@ export type { InputProps } from './atoms/Input/Input';
 export { Logo } from './molecules/Logo/Logo';
 export { SearchBox } from './molecules/SearchBox/SearchBox';
 export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
+export type { QuantityInputProps } from './molecules/QuantityInput/QuantityInput';
+export { QuantityInput } from './molecules/QuantityInput/QuantityInput';

package/dist/main-server.js

@@ -1,25 +1,27 @@
 import { Button as t } from "./atoms/Button/Button.js";
-import { Flex as x } from "./atoms/Flex/Flex.js";
+import { Flex as p } from "./atoms/Flex/Flex.js";
 import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
-import { Head as n } from "./atoms/Root/Head.js";
-import { Icon as c } from "./atoms/Icon/Icon.js";
-import { Root as l } from "./atoms/Root/Root.js";
-import { Separator as I } from "./atoms/Separator/Separator.js";
-import { Text as g } from "./atoms/Text/Text.js";
-import { Input as i } from "./atoms/Input/Input.js";
-import { Logo as F } from "./molecules/Logo/Logo.js";
-import { SearchBox as H } from "./molecules/SearchBox/SearchBox.js";
+import { Head as a } from "./atoms/Root/Head.js";
+import { Icon as I } from "./atoms/Icon/Icon.js";
+import { Root as d } from "./atoms/Root/Root.js";
+import { Separator as l } from "./atoms/Separator/Separator.js";
+import { Text as S } from "./atoms/Text/Text.js";
+import { Input as h } from "./atoms/Input/Input.js";
+import { Logo as C } from "./molecules/Logo/Logo.js";
+import { SearchBox as G } from "./molecules/SearchBox/SearchBox.js";
+import { QuantityInput as L } from "./molecules/QuantityInput/QuantityInput.js";
 export {
   t as Button,
   m as Column,
-  x as Flex,
+  p as Flex,
   f as Grid,
-  n as Head,
-  c as Icon,
-  i as Input,
-  F as Logo,
-  l as Root,
-  H as SearchBox,
-  I as Separator,
-  g as Text
+  a as Head,
+  I as Icon,
+  h as Input,
+  C as Logo,
+  L as QuantityInput,
+  d as Root,
+  G as SearchBox,
+  l as Separator,
+  S as Text
 };

package/dist/molecules/Cart/Cart.d.ts

@@ -16,9 +16,10 @@ export interface CartPropsBase {
     onItemDelete: (_item: CartItem) => void;
     onItemEdit: (_item: CartItem) => void;
     onCheckout: () => void;
+    subtotal?: number;
     cart: ShoppingCart;
 }
 interface CartProps extends CartPropsBase, React.HtmlHTMLAttributes<HTMLButtonElement> {
 }
-export declare function ShoppingCart({ cart, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, ...otherProps }: CartProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShoppingCart({ cart, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, subtotal, ...otherProps }: CartProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/molecules/Cart/Cart.js

@@ -1,58 +1,74 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Icon as m } from "../../atoms/Icon/Icon.js";
-import { Text as s } from "../../atoms/Text/Text.js";
-import { Button as a } from "../../atoms/Button/Button.js";
-import { Tooltip as l } from "../Tooltip/Tooltip.js";
-import '../../assets/Cart.css';const h = "_cart_h4033_1", d = "_count_h4033_8", p = "_cartContainer_h4033_23", _ = "_cartItems_h4033_32", g = "_noItems_h4033_60", o = {
-  cart: h,
-  count: d,
-  cartContainer: p,
-  cartItems: _,
-  noItems: g
+import { Icon as o } from "../../atoms/Icon/Icon.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { Button as g } from "../../atoms/Button/Button.js";
+import { Tooltip as _ } from "../Tooltip/Tooltip.js";
+import { QuantityInput as p } from "../QuantityInput/QuantityInput.js";
+import '../../assets/Cart.css';const I = "_cart_tgc5k_1", u = "_count_tgc5k_8", f = "_cartContainer_tgc5k_23", k = "_cartItems_tgc5k_32", v = "_itemInfo_tgc5k_54", z = "_removeItem_tgc5k_71", C = "_itemManagement_tgc5k_78", N = "_noItems_tgc5k_83", y = "_subtotal_tgc5k_90", e = {
+  cart: I,
+  count: u,
+  cartContainer: f,
+  cartItems: k,
+  itemInfo: v,
+  removeItem: z,
+  itemManagement: C,
+  noItems: N,
+  subtotal: y
 };
-function N({
-  cart: e,
-  onItemQtyChange: I,
-  onItemDelete: u,
-  onItemEdit: C,
-  onCheckout: r,
-  ...c
+function T({
+  cart: i,
+  onItemQtyChange: a,
+  onItemDelete: r,
+  onItemEdit: b,
+  onCheckout: l,
+  subtotal: c,
+  ...d
 }) {
-  return e = e || { items: [] }, /* @__PURE__ */ t(
-    l,
+  return i = i || { items: [] }, /* @__PURE__ */ t(
+    _,
     {
-      trigger: /* @__PURE__ */ n("button", { className: o.cart, ...c, children: [
+      trigger: /* @__PURE__ */ n("button", { className: e.cart, ...d, children: [
         /* @__PURE__ */ t(
-          m,
+          o,
           {
             iconKey: "fa-kit fa-shoppingcart-empty",
             title: "Shopping Cart",
             size: "lg"
           }
         ),
-        e.items.length > 0 && /* @__PURE__ */ t("div", { className: o.count, children: /* @__PURE__ */ t(s, { size: "xxs", children: e.items.length }) })
+        i.items.length > 0 && /* @__PURE__ */ t("div", { className: e.count, children: /* @__PURE__ */ t(m, { size: "xxs", children: i.items.length }) })
       ] }),
       position: "bottom",
       on: "click",
-      children: /* @__PURE__ */ n("div", { className: o.cartContainer, children: [
-        /* @__PURE__ */ t(s, { as: "h1", size: "2xl", children: "Cart" }),
-        /* @__PURE__ */ t("div", { className: o.cartItems, children: e.items.length > 0 ? /* @__PURE__ */ t("ul", { children: e.items.map(
-          (i) => /* @__PURE__ */ n("li", { children: [
-            /* @__PURE__ */ t("img", { src: i.imageUrl, alt: `${i.itemId} product image` }),
-            /* @__PURE__ */ n("div", { children: [
-              /* @__PURE__ */ t(s, { as: "p", size: "sm", children: i.description }),
-              /* @__PURE__ */ n(s, { as: "p", size: "sm", children: [
-                "Part # ",
-                i.itemId
+      children: /* @__PURE__ */ n("div", { className: e.cartContainer, children: [
+        /* @__PURE__ */ t(m, { as: "h1", size: "2xl", children: "Cart" }),
+        /* @__PURE__ */ t("div", { className: e.cartItems, children: i.items.length > 0 ? /* @__PURE__ */ t("ul", { children: i.items.map(
+          (s) => /* @__PURE__ */ n("li", { className: e.cartItem, children: [
+            /* @__PURE__ */ n("div", { className: e.itemInfo, children: [
+              /* @__PURE__ */ t("img", { src: s.imageUrl, alt: `${s.itemId} product image` }),
+              /* @__PURE__ */ n("div", { children: [
+                /* @__PURE__ */ t(m, { as: "p", size: "sm", children: s.description }),
+                /* @__PURE__ */ n(m, { as: "p", size: "sm", children: [
+                  "Part # ",
+                  s.itemId
+                ] })
               ] })
+            ] }),
+            /* @__PURE__ */ n("div", { className: e.itemManagement, children: [
+              /* @__PURE__ */ t("button", { onClick: () => r(s), className: e.removeItem, children: /* @__PURE__ */ t(o, { iconKey: "fa-regular fa-trash", size: "sm" }) }),
+              /* @__PURE__ */ t(p, { onQuantityChange: (h) => a(s, h), size: "sm" })
             ] })
-          ] }, i.id)
-        ) }) : /* @__PURE__ */ t("div", { className: o.noItems, children: /* @__PURE__ */ t(s, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
-        /* @__PURE__ */ t(a, { disabled: e.items.length === 0, onClick: r, variant: "cta-primary", size: "md", children: "Checkout" })
+          ] }, s.id)
+        ) }) : /* @__PURE__ */ t("div", { className: e.noItems, children: /* @__PURE__ */ t(m, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
+        c && /* @__PURE__ */ n("div", { className: e.subtotal, children: [
+          /* @__PURE__ */ t(m, { size: "md", children: "Subtotal" }),
+          /* @__PURE__ */ t(m, { size: "md", children: c })
+        ] }),
+        /* @__PURE__ */ t(g, { disabled: i.items.length === 0, onClick: l, variant: "cta-primary", size: "md", children: "Checkout" })
       ] })
     }
   );
 }
 export {
-  N as ShoppingCart
+  T as ShoppingCart
 };

package/dist/molecules/Cart/Cart.stories.d.ts

@@ -11,4 +11,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyCart: Story;
-export declare const CartWithItems: Story;
+export declare const LargeCart: Story;
+export declare const SmallCart: Story;

package/dist/molecules/Cart/Cart.stories.js

@@ -1,5 +1,5 @@
 import { ShoppingCart as e } from "./Cart.js";
-const r = {
+const o = {
   title: "Case Parts/Molecules/Cart",
   component: e,
   parameters: {
@@ -21,7 +21,14 @@ const r = {
     { id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: 40.1, quantity: 1, imageUrl: t, availability: "In Stock" },
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: 50.15, quantity: 1, imageUrl: t, availability: "In Stock" }
   ]
-}, o = {
+}, a = {
+  items: [
+    { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: 99.99, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 2, itemId: "810810", description: "True Door Gasket", price: 9.99, quantity: 1, imageUrl: t, availability: "In Stock" },
+    { id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: 9.99, quantity: 1, imageUrl: t, availability: "" },
+    { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: 9.99, quantity: 1, imageUrl: t, availability: "" }
+  ]
+}, l = {
   args: {
     cart: { items: [] },
     onCheckout: () => {
@@ -37,7 +44,7 @@ const r = {
       alert("Delete");
     }
   }
-}, l = {
+}, n = {
   args: {
     cart: i,
     onCheckout: () => {
@@ -51,11 +58,30 @@ const r = {
     },
     onItemQtyChange: () => {
       alert("Delete");
-    }
+    },
+    subtotal: 748.98
+  }
+}, s = {
+  args: {
+    cart: a,
+    onCheckout: () => {
+      alert("Checkout");
+    },
+    onItemDelete: () => {
+      alert("Delete");
+    },
+    onItemEdit: () => {
+      alert("Delete");
+    },
+    onItemQtyChange: () => {
+      alert("Delete");
+    },
+    subtotal: 748.98
   }
 };
 export {
-  l as CartWithItems,
-  o as EmptyCart,
-  r as default
+  l as EmptyCart,
+  n as LargeCart,
+  s as SmallCart,
+  o as default
 };

package/dist/molecules/QuantityInput/QuantityInput.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { HideAtProps } from '../../atoms/HideAt';
+export interface QuantityInputProps extends React.HTMLAttributes<HTMLInputElement>, HideAtProps {
+    quantity?: number;
+    onQuantityChange: (_quantity: number) => void;
+    min?: number;
+    max?: number;
+    size?: "sm" | "md";
+    wrapperClassName?: string;
+}
+export declare function QuantityInput({ quantity, onQuantityChange, min, max, className, wrapperClassName, hideAt, size, ...otherProps }: QuantityInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/QuantityInput/QuantityInput.js

@@ -0,0 +1,73 @@
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { Icon as l } from "../../atoms/Icon/Icon.js";
+import { getHideAtStyles as g } from "../../atoms/HideAt.js";
+import '../../assets/QuantityInput.css';const s = {
+  "qty-container": "_qty-container_19ir9_1",
+  "decrease-btn": "_decrease-btn_19ir9_34",
+  "increase-btn": "_increase-btn_19ir9_45",
+  "button-sm": "_button-sm_19ir9_66",
+  "button-md": "_button-md_19ir9_70",
+  "qty-input-sm": "_qty-input-sm_19ir9_74",
+  "qty-input-md": "_qty-input-md_19ir9_78"
+};
+function j({
+  quantity: i = 1,
+  onQuantityChange: b,
+  min: e = 1,
+  max: n = 9999,
+  className: d,
+  wrapperClassName: _,
+  hideAt: p,
+  size: a = "md",
+  ...m
+}) {
+  const y = (t) => (e !== void 0 && t < e && (t = e), n !== void 0 && n !== void 0 && t > n && (t = n), t), u = (t) => {
+    const o = y(Number.isNaN(t) ? e ?? 1 : t);
+    b(o);
+  }, f = () => u(i - 1), N = () => u(i + 1);
+  return /* @__PURE__ */ v("div", { className: c(s["qty-container"], g(p), _), children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: c(s["decrease-btn"], s[`button-${a}`]),
+        onClick: f,
+        disabled: i <= (e ?? 1),
+        "aria-label": "Decrease quantity",
+        children: /* @__PURE__ */ r(l, { iconKey: "fa-solid fa-minus", size: "sm" })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        className: c(s["qty-input"], s[`qty-input-${a}`], d),
+        type: "number",
+        min: e,
+        max: n,
+        value: i,
+        onFocus: (t) => t.currentTarget.select(),
+        onChange: (t) => {
+          const o = parseInt(t.target.value, 10);
+          u(Number.isNaN(o) ? e ?? 1 : o);
+        },
+        "aria-label": "Quantity",
+        ...m
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: c(s["increase-btn"], s[`button-${a}`]),
+        onClick: N,
+        disabled: n !== void 0 && i >= n,
+        "aria-label": "Increase quantity",
+        children: /* @__PURE__ */ r(l, { iconKey: "fa-solid fa-plus", size: "sm" })
+      }
+    )
+  ] });
+}
+export {
+  j as QuantityInput
+};

package/dist/molecules/QuantityInput/QuantityInput.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react';
+import { QuantityInput } from './QuantityInput';
+declare const meta: {
+    title: string;
+    component: typeof QuantityInput;
+    tags: string[];
+    args: {
+        quantity: number;
+        min: number;
+        size: "md";
+    };
+    argTypes: {
+        onQuantityChange: {
+            action: string;
+        };
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const WithMinMax: Story;
+export declare const AllSizes: Story;
+export declare const MaxReached: Story;
+export declare const EventHandler: Story;

package/dist/molecules/QuantityInput/QuantityInput.stories.js

@@ -0,0 +1,75 @@
+import { jsx as n } from "react/jsx-runtime";
+import { QuantityInput as u } from "./QuantityInput.js";
+import { useState as s, useEffect as m } from "react";
+const c = {
+  title: "Case Parts/Molecules/QuantityInput",
+  component: u,
+  tags: ["autodocs"],
+  args: {
+    quantity: 2,
+    min: 1,
+    size: "md"
+  },
+  argTypes: {
+    onQuantityChange: { action: "quantity changed" },
+    size: {
+      control: { type: "inline-radio" },
+      options: ["sm", "md"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  }
+}, e = (t) => {
+  const [a, i] = s(t.quantity ?? 1);
+  return m(() => {
+    i(t.quantity ?? 1);
+  }, [t.quantity]), /* @__PURE__ */ n(
+    u,
+    {
+      ...t,
+      quantity: a,
+      onQuantityChange: (o) => {
+        var r;
+        i(o), (r = t.onQuantityChange) == null || r.call(t, o);
+      }
+    }
+  );
+}, g = {
+  args: { onQuantityChange: () => {
+  } },
+  render: (t) => /* @__PURE__ */ n(e, { ...t })
+}, h = {
+  args: { size: "sm", quantity: 3, onQuantityChange: () => {
+  } },
+  render: (t) => /* @__PURE__ */ n(e, { ...t })
+}, p = {
+  args: { size: "md", quantity: 3, onQuantityChange: () => {
+  } },
+  render: (t) => /* @__PURE__ */ n(e, { ...t })
+}, q = {
+  args: { min: 2, max: 5, quantity: 2, onQuantityChange: () => {
+  } },
+  render: (t) => /* @__PURE__ */ n(e, { ...t })
+}, Q = {
+  args: { onQuantityChange: (t) => alert(t) },
+  render: (t) => /* @__PURE__ */ n("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: ["sm", "md"].map((a) => /* @__PURE__ */ n(e, { ...t, size: a, quantity: a === "sm" ? 1 : 2 }, a)) })
+}, C = {
+  args: { min: 1, max: 3, quantity: 3, onQuantityChange: (t) => alert(t) },
+  render: (t) => /* @__PURE__ */ n(e, { ...t })
+}, f = {
+  args: { min: 2, max: 5, quantity: 2, onQuantityChange: (t) => {
+    alert(t);
+  } },
+  render: (t) => /* @__PURE__ */ n(e, { ...t })
+};
+export {
+  Q as AllSizes,
+  g as Default,
+  f as EventHandler,
+  C as MaxReached,
+  p as Medium,
+  h as Small,
+  q as WithMinMax,
+  c as default
+};

package/dist/organisms/MainNav/MainNav.d.ts

@@ -8,6 +8,7 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     accountRoute: string;
     contactRoute: string;
     cart: ShoppingCart;
+    cartSubtotal?: number;
     onLoginClick: () => void;
     onSearch: (_input: string) => void;
 }
@@ -20,4 +21,4 @@ export interface MainCategory extends Category {
     children: Category[];
     showChevron?: boolean;
 }
-export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, cartSubtotal, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/MainNav/MainNav.js

@@ -1,91 +1,93 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { Text as f } from "../../atoms/Text/Text.js";
 import { Link as p } from "../../atoms/Link/Link.js";
-import { Icon as C } from "../../atoms/Icon/Icon.js";
-import { Flex as o } from "../../atoms/Flex/Flex.js";
-import { Grid as y, Column as k } from "../../atoms/Grid/Grid.js";
-import { Logo as b } from "../../molecules/Logo/Logo.js";
+import { Icon as y } from "../../atoms/Icon/Icon.js";
+import { Flex as c } from "../../atoms/Flex/Flex.js";
+import { Grid as b, Column as k } from "../../atoms/Grid/Grid.js";
+import { Logo as j } from "../../molecules/Logo/Logo.js";
 import { SearchBox as d } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as j } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { ShoppingCart as D } from "../../molecules/Cart/Cart.js";
-import { Account as z } from "../../molecules/Account/Account.js";
-import { CategoryNav as F } from "../../molecules/CategoryNav/CategoryNav.js";
-import '../../assets/MainNav.css';const I = "_topNav_1uhwf_1", U = "_operations_1uhwf_9", M = "_search_1uhwf_16", Q = "_siteLink_1uhwf_19", B = "_accountArea_1uhwf_23", G = "_category_1uhwf_35", H = "_menuList_1uhwf_57", i = {
-  topNav: I,
-  operations: U,
-  search: M,
-  siteLink: Q,
-  accountArea: B,
-  category: G,
-  menuList: H
+import { HamburgerMenu as D } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as z } from "../../molecules/Cart/Cart.js";
+import { Account as F } from "../../molecules/Account/Account.js";
+import { CategoryNav as I } from "../../molecules/CategoryNav/CategoryNav.js";
+import '../../assets/MainNav.css';const U = "_topNav_1uhwf_1", M = "_operations_1uhwf_9", Q = "_search_1uhwf_16", B = "_siteLink_1uhwf_19", G = "_accountArea_1uhwf_23", H = "_category_1uhwf_35", K = "_menuList_1uhwf_57", i = {
+  topNav: U,
+  operations: M,
+  search: Q,
+  siteLink: B,
+  accountArea: G,
+  category: H,
+  menuList: K
 };
-function $({
+function q({
   account: s,
-  categories: n,
-  faqRoute: c,
+  categories: t,
+  faqRoute: o,
   customPartsRoute: l,
   aboutUsRoute: u,
   accountRoute: _,
   contactRoute: m,
   cart: N,
-  onLoginClick: A,
+  cartSubtotal: A,
+  onLoginClick: v,
   onSearch: h,
-  onItemQtyChange: v,
-  onItemDelete: w,
-  onItemEdit: g,
-  onCheckout: x,
-  ...L
+  onItemQtyChange: w,
+  onItemDelete: g,
+  onItemEdit: x,
+  onCheckout: L,
+  ...C
 }) {
-  return /* @__PURE__ */ e(y, { ...L, children: /* @__PURE__ */ t(k, { span: 12, children: [
-    /* @__PURE__ */ t(
-      o,
+  return /* @__PURE__ */ e(b, { ...C, children: /* @__PURE__ */ n(k, { span: 12, children: [
+    /* @__PURE__ */ n(
+      c,
       {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
         className: i.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(b, {}) }),
-          /* @__PURE__ */ t(
-            o,
+          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(j, {}) }),
+          /* @__PURE__ */ n(
+            c,
             {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "flex-end",
               className: i.operations,
               children: [
-                /* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search" }) }),
+                /* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search" }) }),
                 /* @__PURE__ */ e(r, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(r, { href: c, hideAt: ["sm", "md"], children: "FAQ" }),
+                /* @__PURE__ */ e(r, { href: o, hideAt: ["sm", "md"], children: "FAQ" }),
                 /* @__PURE__ */ e(r, { href: m, hideAt: ["sm", "md"], children: "Contact Us" }),
                 /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
-                  z,
+                  F,
                   {
                     account: s,
                     accountRoute: _,
-                    onLoginClick: A,
+                    onLoginClick: v,
                     className: i.avatar
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  D,
+                  z,
                   {
                     cart: N,
-                    onItemDelete: w,
-                    onItemEdit: g,
-                    onItemQtyChange: v,
-                    onCheckout: x
+                    onItemDelete: g,
+                    onItemEdit: x,
+                    onItemQtyChange: w,
+                    onCheckout: L,
+                    subtotal: A
                   }
                 ),
-                /* @__PURE__ */ e(j, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: i.menuList, children: [
+                /* @__PURE__ */ e(D, { hideAt: ["lg"], children: /* @__PURE__ */ n("ul", { className: i.menuList, children: [
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: l, children: "Custom Parts" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: c, children: "FAQ" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: o, children: "FAQ" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: m, children: "Contact Us" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: u, children: "About Us" }) }),
-                  n && n.map((a) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(p, { href: a.route, children: [
+                  t && t.map((a) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ n(p, { href: a.route, children: [
                     /* @__PURE__ */ e(f, { size: "sm", weight: "semibold", children: a.label }),
                     /* @__PURE__ */ e(
-                      C,
+                      y,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",
@@ -100,17 +102,17 @@ function $({
         ]
       }
     ),
-    /* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search", className: i.search }) }),
-    /* @__PURE__ */ e(F, { categories: n })
+    /* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search", className: i.search }) }),
+    /* @__PURE__ */ e(I, { categories: t })
   ] }) });
 }
 function r({
   href: s,
-  children: n,
-  ...c
+  children: t,
+  ...o
 }) {
-  return /* @__PURE__ */ e(p, { href: s, className: i.siteLink, ...c, children: /* @__PURE__ */ e(f, { size: "md", variant: "display", children: n }) });
+  return /* @__PURE__ */ e(p, { href: s, className: i.siteLink, ...o, children: /* @__PURE__ */ e(f, { size: "md", variant: "display", children: t }) });
 }
 export {
-  $ as MainNav
+  q as MainNav
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.33",
+  "version": "0.0.34",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",