@caseparts-org/caseblocks 0.0.38 → 0.0.40

package/dist/molecules/AddToCart/AddToCart.stories.js

@@ -0,0 +1,106 @@
+import { AddToCart as o } from "./AddToCart.js";
+const i = {
+  title: "Case Parts/Molecules/AddToCart",
+  component: o,
+  parameters: { layout: "centered" },
+  argTypes: {
+    itemKey: {
+      control: "number",
+      description: "Unique item identifier passed to onAdd"
+    },
+    initialQuantity: {
+      control: "number",
+      description: "Initial quantity (clamped by min/max)"
+    },
+    min: {
+      control: "number",
+      description: "Minimum quantity"
+    },
+    max: {
+      control: "number",
+      description: "Maximum quantity (optional)"
+    },
+    onQuantityChange: {
+      action: "quantityChanged",
+      description: "(q:number) fired when quantity changes"
+    },
+    onAdd: {
+      description: "(itemKey, quantity) invoked when Add clicked (can return Promise)"
+    },
+    autoHideDelayMs: {
+      control: "number",
+      description: 'Milliseconds before "Added!" state resets'
+    },
+    showQuantity: {
+      control: "boolean",
+      description: "Show/hide quantity input"
+    },
+    buttonText: {
+      control: "text",
+      description: "Label before add completes"
+    },
+    buttonDoneText: {
+      control: "text",
+      description: "Label after add completes"
+    },
+    className: { control: "text" },
+    addButtonClassName: { control: "text" }
+  },
+  args: {
+    itemKey: 101,
+    initialQuantity: 1,
+    min: 1,
+    max: void 0,
+    autoHideDelayMs: 2500,
+    showQuantity: !0,
+    buttonText: "Add",
+    buttonDoneText: "Added!",
+    onAdd: async (t, e) => {
+      await new Promise((n) => setTimeout(n, 600)), alert(`Added (story default):${JSON.stringify({ itemKey: t, quantity: e })}`);
+    }
+  },
+  tags: ["autodocs"]
+}, s = {}, d = {
+  name: "Without Quantity Input",
+  args: {
+    showQuantity: !1
+  }
+}, r = {
+  name: "With Max Constraint",
+  args: {
+    max: 5,
+    initialQuantity: 3
+  }
+}, u = {
+  args: {
+    buttonText: "Add to Cart",
+    buttonDoneText: "In Cart"
+  }
+}, c = {
+  name: "Async (Simulated Slow)",
+  args: {
+    onAdd: async (t, e) => {
+      await new Promise((n) => setTimeout(n, 1800)), console.log("Slow add complete:", { itemKey: t, quantity: e });
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Simulates a slower network add (1.8s) before showing the completed state."
+      }
+    }
+  }
+}, l = {
+  args: {
+    autoHideDelayMs: 5e3
+  }
+};
+export {
+  c as AsyncSlowAdd,
+  l as CustomAutoHideDelay,
+  u as CustomTexts,
+  s as Default,
+  d as HiddenQuantity,
+  r as WithMaxConstraint,
+  i as default
+};

package/dist/molecules/Availability/Availability.d.ts

@@ -0,0 +1,9 @@
+export type ContactUsLinkBehavior = "same-tab" | "new-tab";
+export interface AvailabilityProps {
+    availId: string;
+    availDescription: string;
+    contactHref: string;
+    contactLinkBehavior: ContactUsLinkBehavior;
+    availClassName?: string;
+}
+export declare function Availability({ availId: id, availDescription: description, contactHref, contactLinkBehavior, availClassName: className }: AvailabilityProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Availability/Availability.js

@@ -0,0 +1,36 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as o } from "../../clsx-OuTLNxxd.js";
+import { Text as s } from "../../atoms/Text/Text.js";
+import { Link as c } from "../../atoms/Link/Link.js";
+import '../../assets/Availability.css';const m = "_availability_jaqg4_1", _ = "_availabilityLink_jaqg4_4", y = "_available_jaqg4_8", f = "_limited_jaqg4_11", d = "_unavailable_jaqg4_14", a = {
+  availability: m,
+  availabilityLink: _,
+  available: y,
+  limited: f,
+  unavailable: d
+};
+function p({
+  availId: i,
+  availDescription: l,
+  contactHref: v,
+  contactLinkBehavior: r,
+  availClassName: t
+}) {
+  const e = r === "new-tab";
+  if (i === "contact")
+    return /* @__PURE__ */ n(
+      c,
+      {
+        target: e ? "_blank" : void 0,
+        rel: e ? "noopener noreferrer" : void 0,
+        className: o(a.availabilityLink, t),
+        href: v,
+        children: l
+      }
+    );
+  const b = i === "available" ? a.available : i === "limited" ? a.limited : a.unavailable;
+  return /* @__PURE__ */ n(s, { size: "xs", className: o(a.availability, b, t), children: l });
+}
+export {
+  p as Availability
+};

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

@@ -0,0 +1,46 @@
+import { StoryObj } from '@storybook/react';
+import { AvailabilityProps, ContactUsLinkBehavior } from './Availability';
+declare const meta: {
+    title: string;
+    component: (props: AvailabilityProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        availId: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+        };
+        availDescription: {
+            control: "text";
+            description: string;
+        };
+        contactHref: {
+            control: "text";
+            description: string;
+        };
+        contactLinkBehavior: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ContactUsLinkBehavior[];
+            description: string;
+        };
+        availClassName: {
+            control: "text";
+            description: string;
+        };
+    };
+    args: AvailabilityProps;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Available: Story;
+export declare const Limited: Story;
+export declare const Unavailable: Story;
+export declare const ContactSameTab: Story;
+export declare const ContactNewTab: Story;

package/dist/molecules/Availability/Availability.stories.js

@@ -0,0 +1,119 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Availability as e } from "./Availability.js";
+const i = (a) => /* @__PURE__ */ t(e, { ...a }), c = {
+  title: "Case Parts/Molecules/Availability",
+  component: i,
+  parameters: {
+    layout: "centered"
+  },
+  argTypes: {
+    availId: {
+      control: { type: "select" },
+      options: ["available", "limited", "unavailable", "contact"],
+      description: "Determines variant / rendering mode"
+    },
+    availDescription: {
+      control: "text",
+      description: "Displayed text content"
+    },
+    contactHref: {
+      control: "text",
+      description: 'Href for the contact link (used only when id === "contact")'
+    },
+    contactLinkBehavior: {
+      control: { type: "inline-radio" },
+      options: ["same-tab", "new-tab"],
+      description: "Whether the contact link opens in the same or new tab"
+    },
+    availClassName: {
+      control: "text",
+      description: "Optional custom className"
+    }
+  },
+  args: {
+    // Default (can be overridden in each story)
+    availId: "available",
+    availDescription: "Available",
+    contactHref: "/contact",
+    contactLinkBehavior: "same-tab",
+    availClassName: ""
+  },
+  tags: ["autodocs"]
+}, s = {
+  name: "Available",
+  args: {
+    availId: "available",
+    availDescription: "In stock"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows the green / positive availability state."
+      }
+    }
+  }
+}, r = {
+  name: "Limited",
+  args: {
+    availId: "limited",
+    availDescription: "Limited stock"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows the limited / caution state."
+      }
+    }
+  }
+}, l = {
+  name: "Unavailable",
+  args: {
+    availId: "unavailable",
+    availDescription: "Out of stock"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows the unavailable / negative state."
+      }
+    }
+  }
+}, p = {
+  name: "Contact (Same Tab)",
+  args: {
+    availId: "contact",
+    availDescription: "Contact us for availability",
+    contactHref: "/contact",
+    contactLinkBehavior: "same-tab"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Renders a link opening in the current tab."
+      }
+    }
+  }
+}, d = {
+  name: "Contact (New Tab)",
+  args: {
+    availId: "contact",
+    availDescription: "Contact us (opens new tab)",
+    contactHref: "https://example.com/contact",
+    contactLinkBehavior: "new-tab"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Renders a link with target="_blank" and rel="noopener noreferrer".'
+      }
+    }
+  }
+};
+export {
+  s as Available,
+  d as ContactNewTab,
+  p as ContactSameTab,
+  r as Limited,
+  l as Unavailable,
+  c as default
+};

package/dist/molecules/Pricing/Pricing.d.ts

@@ -0,0 +1,6 @@
+export interface PricingProps {
+    pricingLabel?: string;
+    price?: string;
+    className?: string;
+}
+export declare function Pricing({ pricingLabel, price, className }: PricingProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Pricing/Pricing.js

@@ -0,0 +1,15 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import { Text as n } from "../../atoms/Text/Text.js";
+import '../../assets/Pricing.css';const e = "_pricingInformation_u1dqz_1", m = {
+  pricingInformation: e
+};
+function a({ pricingLabel: r, price: o, className: t }) {
+  return /* @__PURE__ */ c("div", { className: s(m.pricingInformation, t), children: [
+    /* @__PURE__ */ i(n, { size: "xxs", children: r }),
+    /* @__PURE__ */ i(n, { size: "lg", weight: "bold", children: o })
+  ] });
+}
+export {
+  a as Pricing
+};

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

@@ -0,0 +1,43 @@
+import { StoryObj } from '@storybook/react';
+import { Pricing, PricingProps } from './Pricing';
+/**
+ * Stories for Pricing.
+ * Simple presentational component showing an optional pricing label (e.g. "Net Price")
+ * above (or beside in future) a price value.
+ *
+ * Props:
+ * - pricingLabel?: string  (descriptor, e.g. "Net Price", "List Price", "Price")
+ * - price?: string         (already-formatted currency or value string)
+ * - className?: string     (custom styling hook)
+ *
+ * Both props are optional so the component can be composed in flexible layouts.
+ */
+declare const meta: {
+    title: string;
+    component: typeof Pricing;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        pricingLabel: {
+            control: "text";
+            description: string;
+        };
+        price: {
+            control: "text";
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+    };
+    args: PricingProps;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LabelOnly: Story;
+export declare const PriceOnly: Story;
+export declare const SaleExample: Story;

package/dist/molecules/Pricing/Pricing.stories.js

@@ -0,0 +1,49 @@
+import { Pricing as e } from "./Pricing.js";
+const r = {
+  title: "Case Parts/Molecules/Pricing",
+  component: e,
+  parameters: { layout: "centered" },
+  argTypes: {
+    pricingLabel: {
+      control: "text",
+      description: "Descriptor label above the price"
+    },
+    price: {
+      control: "text",
+      description: "Price string (already formatted)"
+    },
+    className: {
+      control: "text",
+      description: "Optional custom className"
+    }
+  },
+  args: {
+    pricingLabel: "List Price",
+    price: "$129.99",
+    className: ""
+  },
+  tags: ["autodocs"]
+}, c = {}, i = {
+  args: {
+    price: void 0,
+    pricingLabel: "List Price"
+  }
+}, a = {
+  args: {
+    pricingLabel: void 0,
+    price: "$249.00"
+  }
+}, o = {
+  name: "Account Example",
+  args: {
+    pricingLabel: "Net Price",
+    price: "$89.00"
+  }
+};
+export {
+  c as Default,
+  i as LabelOnly,
+  a as PriceOnly,
+  o as SaleExample,
+  r as default
+};

package/dist/molecules/QuantityInput/QuantityInput.js

@@ -1,39 +1,39 @@
-import { jsxs as v, jsx as r } from "react/jsx-runtime";
-import { c } from "../../clsx-OuTLNxxd.js";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
 import { Icon as l } from "../../atoms/Icon/Icon.js";
-import { getHideAtStyles as g } from "../../atoms/HideAt.js";
+import { getHideAtStyles as v } 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"
+  "qty-container": "_qty-container_krcn7_1",
+  "decrease-btn": "_decrease-btn_krcn7_35",
+  "increase-btn": "_increase-btn_krcn7_46",
+  "button-sm": "_button-sm_krcn7_67",
+  "button-md": "_button-md_krcn7_71",
+  "qty-input-sm": "_qty-input-sm_krcn7_75",
+  "qty-input-md": "_qty-input-md_krcn7_79"
 };
-function j({
-  quantity: i = 1,
+function $({
+  quantity: c = 1,
   onQuantityChange: b,
-  min: e = 1,
-  max: n = 9999,
+  min: n = 1,
+  max: e = 9999,
   className: d,
   wrapperClassName: _,
   hideAt: p,
-  size: a = "md",
+  size: i = "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);
+  const y = (t) => (n !== void 0 && t < n && (t = n), e !== void 0 && e !== void 0 && t > e && (t = e), t), u = (t) => {
+    const o = y(Number.isNaN(t) ? n ?? 1 : t);
     b(o);
-  }, f = () => u(i - 1), N = () => u(i + 1);
-  return /* @__PURE__ */ v("div", { className: c(s["qty-container"], g(p), _), children: [
+  }, f = () => u(c - 1), N = () => u(c + 1);
+  return /* @__PURE__ */ k("div", { className: a(s["qty-container"], v(p), _), children: [
     /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        className: c(s["decrease-btn"], s[`button-${a}`]),
+        className: a(s["decrease-btn"], s[`button-${i}`]),
         onClick: f,
-        disabled: i <= (e ?? 1),
+        disabled: c <= (n ?? 1),
         "aria-label": "Decrease quantity",
         children: /* @__PURE__ */ r(l, { iconKey: "fa-solid fa-minus", size: "sm" })
       }
@@ -41,15 +41,15 @@ function j({
     /* @__PURE__ */ r(
       "input",
       {
-        className: c(s["qty-input"], s[`qty-input-${a}`], d),
+        className: a(s["qty-input"], s[`qty-input-${i}`], d),
         type: "number",
-        min: e,
-        max: n,
-        value: i,
+        min: n,
+        max: e,
+        value: c,
         onFocus: (t) => t.currentTarget.select(),
         onChange: (t) => {
           const o = parseInt(t.target.value, 10);
-          u(Number.isNaN(o) ? e ?? 1 : o);
+          u(Number.isNaN(o) ? n ?? 1 : o);
         },
         "aria-label": "Quantity",
         ...m
@@ -59,9 +59,9 @@ function j({
       "button",
       {
         type: "button",
-        className: c(s["increase-btn"], s[`button-${a}`]),
+        className: a(s["increase-btn"], s[`button-${i}`]),
         onClick: N,
-        disabled: n !== void 0 && i >= n,
+        disabled: e !== void 0 && c >= e,
         "aria-label": "Increase quantity",
         children: /* @__PURE__ */ r(l, { iconKey: "fa-solid fa-plus", size: "sm" })
       }
@@ -69,5 +69,5 @@ function j({
   ] });
 }
 export {
-  j as QuantityInput
+  $ as QuantityInput
 };

package/dist/molecules/StatefulButton/AnimatedCheckmark.d.ts

@@ -0,0 +1,6 @@
+export interface AnimatedCheckMarkProps {
+    size: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+    circleColor?: string;
+    checkColor?: string;
+}
+export declare function AnimatedCheckMark({ size, circleColor, checkColor, }: AnimatedCheckMarkProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/StatefulButton/AnimatedCheckmark.js

@@ -0,0 +1,60 @@
+import { jsx as k, jsxs as m } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import '../../assets/AnimatedCheckmark.css';const s = "_wrapper_ku95m_1", l = "_checkmark__circle_ku95m_8", h = "_stroke_ku95m_1", o = "_checkmark_ku95m_8", t = "_fill_ku95m_1", i = "_scale_ku95m_1", n = "_checkmark__check_ku95m_52", c = {
+  wrapper: s,
+  checkmark__circle: l,
+  stroke: h,
+  checkmark: o,
+  fill: t,
+  scale: i,
+  "checkmark-xxs": "_checkmark-xxs_ku95m_27",
+  "checkmark-xs": "_checkmark-xs_ku95m_31",
+  "checkmark-sm": "_checkmark-sm_ku95m_35",
+  "checkmark-md": "_checkmark-md_ku95m_39",
+  "checkmark-lg": "_checkmark-lg_ku95m_43",
+  "checkmark-xl": "_checkmark-xl_ku95m_47",
+  checkmark__check: n
+};
+function d({
+  size: e,
+  circleColor: r,
+  checkColor: _
+  // removeMargin
+}) {
+  return /* @__PURE__ */ k("div", { style: {
+    "--circle-color": r,
+    "--check-color": _
+  }, children: /* @__PURE__ */ k("div", { className: c.wrapper, children: /* @__PURE__ */ m(
+    "svg",
+    {
+      className: a(c.checkmark, c[`checkmark-${e}`]),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 52 52",
+      role: "img",
+      "aria-label": "Success",
+      children: [
+        /* @__PURE__ */ k(
+          "circle",
+          {
+            className: c.checkmark__circle,
+            cx: "26",
+            cy: "26",
+            r: "25",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ k(
+          "path",
+          {
+            className: c.checkmark__check,
+            fill: "none",
+            d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  d as AnimatedCheckMark
+};

package/dist/molecules/StatefulButton/StatefulButton.d.ts

@@ -0,0 +1,16 @@
+import { ButtonProps } from '../../atoms/Button/Button';
+export interface StatefulButtonProps extends Omit<ButtonProps, 'children'> {
+    /**
+     * Whether the "completed" (added) state should be shown.
+     */
+    completed: boolean;
+    /**
+     * Label shown before completion.
+     */
+    text?: string;
+    /**
+     * Label shown after completion.
+     */
+    completedText?: string;
+}
+export declare function StatefulButton({ completed, text, completedText, className, size, variant, ...buttonProps }: StatefulButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/StatefulButton/StatefulButton.js

@@ -0,0 +1,37 @@
+import { jsxs as o, Fragment as c, jsx as r } from "react/jsx-runtime";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import { AnimatedCheckMark as d } from "./AnimatedCheckmark.js";
+import { Button as i } from "../../atoms/Button/Button.js";
+import '../../assets/StatefulButton.css';const p = "_statefulButton_1laml_1", B = {
+  statefulButton: p
+};
+function j({
+  completed: t,
+  text: s = "Add",
+  completedText: a = "Added!",
+  className: e,
+  size: n = "md",
+  variant: l = "cta-primary",
+  ...m
+}) {
+  const u = f(B.statefulButton, e);
+  return /* @__PURE__ */ o(
+    i,
+    {
+      size: n,
+      variant: l,
+      className: u,
+      ...m,
+      children: [
+        !t && s,
+        t && /* @__PURE__ */ o(c, { children: [
+          /* @__PURE__ */ r(d, { size: n }),
+          /* @__PURE__ */ r("p", { children: a })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  j as StatefulButton
+};