@caseparts-org/caseblocks 0.0.86 → 0.0.88

package/dist/assets/Tooltip.css

@@ -1 +1 @@
-._content_1wx0f_2{box-shadow:8px 8px 12px #00000026;background-color:#fff;padding:var(--spacing-1);box-sizing:border-box;width:max-content;border:1px solid var(--color-neutrals-neutral-1);border-radius:4px;z-index:9999}
+._content_1ao8d_2{box-shadow:8px 8px 12px #00000026;background-color:#fff;padding:var(--spacing-1);box-sizing:border-box;width:max-content;border:1px solid var(--color-neutrals-neutral-1);border-radius:4px;z-index:9999}

package/dist/atoms/Icon/Icon.js

@@ -1,38 +1,38 @@
 import { jsx as r } from "react/jsx-runtime";
 import { c as n } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as l } from "../HideAt.js";
-import '../../assets/Icon.css';const t = "_wrapper_7uoas_15", o = {
-  "icon-sm": "_icon-sm_7uoas_1",
-  "icon-md": "_icon-md_7uoas_5",
-  "icon-lg": "_icon-lg_7uoas_9",
+import { getHideAtStyles as a } from "../HideAt.js";
+import '../../assets/Icon.css';const t = "_wrapper_1lr8y_15", o = {
+  "icon-sm": "_icon-sm_1lr8y_1",
+  "icon-md": "_icon-md_1lr8y_5",
+  "icon-lg": "_icon-lg_1lr8y_9",
   wrapper: t,
-  "iconColor-inherit": "_iconColor-inherit_7uoas_37",
-  "iconColor-default": "_iconColor-default_7uoas_38",
-  "iconColor-default-inverted": "_iconColor-default-inverted_7uoas_39",
-  "iconColor-secondary": "_iconColor-secondary_7uoas_40",
-  "iconColor-warning": "_iconColor-warning_7uoas_41",
-  "iconColor-error-warning": "_iconColor-error-warning_7uoas_42",
-  "iconColor-success": "_iconColor-success_7uoas_43"
+  "iconColor-inherit": "_iconColor-inherit_1lr8y_37",
+  "iconColor-default": "_iconColor-default_1lr8y_38",
+  "iconColor-default-inverted": "_iconColor-default-inverted_1lr8y_39",
+  "iconColor-secondary": "_iconColor-secondary_1lr8y_40",
+  "iconColor-warning": "_iconColor-warning_1lr8y_41",
+  "iconColor-error-warning": "_iconColor-error-warning_1lr8y_42",
+  "iconColor-success": "_iconColor-success_1lr8y_43"
 };
 function m({
   iconKey: i,
-  size: c = "md",
-  hideAt: s,
-  className: a,
-  colorToken: _ = "inherit",
-  ...e
+  size: l = "md",
+  hideAt: c,
+  className: _,
+  colorToken: e = "inherit",
+  ...s
 }) {
   return /* @__PURE__ */ r(
     "span",
     {
       className: n(
         o.wrapper,
-        o[`icon-${c}`],
-        o[`iconColor-${_}`],
-        l(s),
-        a
+        o[`icon-${l}`],
+        o[`iconColor-${e}`],
+        a(c),
+        _
       ),
-      ...e,
+      ...s,
       children: /* @__PURE__ */ r("i", { className: n(i), "aria-hidden": "true" })
     }
   );

package/dist/atoms/Root/Root.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Root.css';const r = "_root_rz7mq_20", s = {
+import '../../assets/Root.css';const r = "_root_1w7oz_20", s = {
   root: r
 };
 function c({ children: o }) {

package/dist/molecules/CardLink/CardLink.d.ts

@@ -0,0 +1,10 @@
+interface CardLinkProps {
+    href: string;
+    src: string;
+    alt?: string;
+    callout: string;
+    title: string;
+    description: string;
+}
+export default function CardLink({ href, src, alt, callout, title, description }: CardLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/molecules/CardLink/CardLink.js

@@ -0,0 +1,27 @@
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import { Text as r } from "../../atoms/Text/Text.js";
+import { Link as n } from "../../atoms/Link/Link.js";
+import { Image as m } from "../../atoms/Image/Image.js";
+import '../../assets/CardLink.css';const _ = "_card_1yols_1", u = "_cardLink_1yols_24", y = "_callout_1yols_29", T = "_calloutText_1yols_51", g = "_cardImage_1yols_57", p = "_cardBody_1yols_66", h = "_cardTitle_1yols_75", x = "_cardDescription_1yols_83", c = {
+  card: _,
+  cardLink: u,
+  callout: y,
+  calloutText: T,
+  cardImage: g,
+  cardBody: p,
+  cardTitle: h,
+  cardDescription: x
+};
+function z({ href: l = "#", src: s, alt: o = "", callout: t = "Customize", title: d = "Title", description: i = "Customizable part description." }) {
+  return /* @__PURE__ */ a(n, { href: l, unstyled: !0, className: c.cardLink, children: /* @__PURE__ */ e("div", { className: c.card, children: [
+    /* @__PURE__ */ a(m, { src: s, alt: o, className: c.cardImage }),
+    /* @__PURE__ */ a("div", { className: c.callout, children: /* @__PURE__ */ a(r, { size: "xs", weight: "regular", colorToken: "default-inverted", className: c.calloutText, children: t }) }),
+    /* @__PURE__ */ e("div", { className: c.cardBody, children: [
+      /* @__PURE__ */ a(r, { size: "sm", weight: "regular", colorToken: "secondary", className: c.cardTitle, children: d }),
+      /* @__PURE__ */ a(r, { size: "xs", weight: "regular", className: c.cardDescription, children: i })
+    ] })
+  ] }) });
+}
+export {
+  z as default
+};

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

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as CardLink } from './CardLink';
+/**
+ * CardLink
+ *
+ * A molecule presenting a customizable part option:
+ * - Image (decorative/representative) with alt tied to `title`.
+ * - "Customize" callout (uses Text colorToken `default-inverted` over its styled background).
+ * - Title (semibold) + description (secondary token for subdued tone).
+ *
+ * Implicit conventions:
+ * - `src` should be a reasonably sized thumbnail (component does not enforce aspect ratio; CSS module does).
+ * - `title` doubles as accessible alt text; keep it concise.
+ * - Internal Text atoms apply semantic color tokens; prefer editing those tokens over hard-coded colors.
+ */
+declare const meta: Meta<typeof CardLink>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Playground: tweak props interactively. */
+export declare const Playground: Story;
+/** Multiple examples to show varied content lengths and images. */
+export declare const Gallery: Story;
+/** Long description stress test (truncation/overflow behavior). */
+export declare const LongDescription: Story;

package/dist/molecules/CardLink/CardLink.stories.js

@@ -0,0 +1,113 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import t from "./CardLink.js";
+const a = {
+  title: "Case Parts/Molecules/CardLink",
+  component: t,
+  args: {
+    href: "#",
+    src: "https://timely-pika-33be9c.netlify.app/img/fpo_istockphoto-1360227644.jpg",
+    alt: "Image Alt",
+    callout: "Customize",
+    title: "Gaskets",
+    description: "We specialize in built-to-spec compression & magnetic gaskets for walk-ins, drawers, and more."
+  },
+  argTypes: {
+    href: {
+      control: "text",
+      description: "Link URL for the card."
+    },
+    src: {
+      control: "text",
+      description: "Image source URL for the part preview."
+    },
+    alt: {
+      control: "text",
+      description: "Alt text for the image; defaults to empty string if not provided."
+    },
+    callout: {
+      control: "text",
+      description: "Customization callout text."
+    },
+    title: {
+      control: "text",
+      description: "Display title for the part option."
+    },
+    description: {
+      control: "text",
+      description: "Supporting explanatory text."
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Displays a part option with preview image, a customization callout, and descriptive text. Uses internal Text tokens (`default-inverted`, `secondary`)."
+      }
+    }
+  },
+  tags: ["autodocs"]
+}, r = {}, c = {
+  render: () => /* @__PURE__ */ i("div", { style: { display: "grid", gap: 24, gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))" }, children: [
+    /* @__PURE__ */ e(
+      t,
+      {
+        href: "https://dev.caseparts.com/caseblock",
+        src: "https://timely-pika-33be9c.netlify.app/img/fpo_istockphoto-1360227644.jpg",
+        alt: "image alt",
+        callout: "Customize Gasket",
+        title: "How To Customize Gaskets",
+        description: "We specialize in built-to-spec compression & magnetic gaskets for walk-ins, drawers, and more.  Please call us to discuss your specific needs."
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        href: "https://dev.caseparts.com/caseblock",
+        src: "https://timely-pika-33be9c.netlify.app/img/fpo_istockphoto-1360227644.jpg",
+        alt: "image alt",
+        callout: "Customize Warmer Wires",
+        title: "Warmer Wires Customization",
+        description: 'Individually made, built to meet all specifications for any application, and supplied with 18" lead wires.'
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        href: "https://dev.caseparts.com/caseblock",
+        src: "https://timely-pika-33be9c.netlify.app/img/fpo_istockphoto-1360227644.jpg",
+        alt: "image alt",
+        callout: "Customize Heaters",
+        title: "Customizable Heaters",
+        description: "Bent to exact specifications—we can help engineer rod & finned heaters for specific applications."
+      }
+    )
+  ] }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates multiple `CardLink` instances in a responsive grid. Each card illustrates typical variation in image and copy length."
+      }
+    }
+  }
+}, p = {
+  args: {
+    href: "https://dev.caseparts.com/caseblock",
+    src: "https://timely-pika-33be9c.netlify.app/img/fpo_istockphoto-1360227644.jpg",
+    alt: "image alt",
+    callout: "Customize Heaters To Your Specs",
+    title: "Heater Customization For All Applications",
+    description: "We specialize in built-to-spec compression & magnetic gaskets for walk-ins, drawers, and more. . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Use this to observe wrapping and vertical spacing when descriptions become verbose"
+      }
+    }
+  }
+};
+export {
+  c as Gallery,
+  p as LongDescription,
+  r as Playground,
+  a as default
+};

package/dist/molecules/Cart/Cart.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Icon as s } from "../../atoms/Icon/Icon.js";
+import { Icon as m } from "../../atoms/Icon/Icon.js";
 import { Text as a } from "../../atoms/Text/Text.js";
 import { Link as u } from "../../atoms/Link/Link.js";
 import { Button as f } from "../../atoms/Button/Button.js";
@@ -7,40 +7,38 @@ import { Tooltip as g } from "../Tooltip/Tooltip.js";
 import { Pricing as v } from "../Pricing/Pricing.js";
 import { QuantityInput as w } from "../QuantityInput/QuantityInput.js";
 import { Availability as x } from "../Availability/Availability.js";
-import '../../assets/Cart.css';const b = "_cart_11wxn_2", y = "_count_11wxn_9", N = "_cartTooltip_11wxn_24", z = "_cartContainer_11wxn_27", C = "_cartItems_11wxn_35", k = "_topRow_11wxn_57", T = "_itemInfo_11wxn_63", R = "_purchaseInformation_11wxn_68", L = "_itemManagement_11wxn_75", M = "_removeItem_11wxn_93", P = "_noItems_11wxn_101", S = "_subtotal_11wxn_108", i = {
+import '../../assets/Cart.css';const b = "_cart_11wxn_2", y = "_count_11wxn_9", N = "_cartTooltip_11wxn_24", C = "_cartContainer_11wxn_27", z = "_cartItems_11wxn_35", k = "_topRow_11wxn_57", T = "_itemInfo_11wxn_63", L = "_purchaseInformation_11wxn_68", M = "_itemManagement_11wxn_75", R = "_removeItem_11wxn_93", P = "_noItems_11wxn_101", S = "_subtotal_11wxn_108", i = {
   cart: b,
   count: y,
   cartTooltip: N,
-  cartContainer: z,
-  cartItems: C,
+  cartContainer: C,
+  cartItems: z,
   topRow: k,
   itemInfo: T,
-  purchaseInformation: R,
-  itemManagement: L,
-  removeItem: M,
+  purchaseInformation: L,
+  itemManagement: M,
+  removeItem: R,
   noItems: P,
   subtotal: S
 };
-function O({
+function U({
   cart: o,
-  onItemQtyChange: m,
+  onItemQtyChange: s,
   onItemDelete: c,
   onCheckout: l,
   subtotal: r,
   contactHref: d,
-  contactLinkBehavior: p,
-  itemPriceLabel: h,
+  contactLinkBehavior: h,
+  itemPriceLabel: p,
   ..._
 }) {
   return o = o || { items: [] }, /* @__PURE__ */ t(
     g,
     {
       tooltipClassName: i.cartTooltip,
-      repositionOnResize: !0,
-      keepTooltipInside: !0,
       trigger: /* @__PURE__ */ n("button", { className: i.cart, tabIndex: 0, ..._, children: [
         /* @__PURE__ */ t(
-          s,
+          m,
           {
             iconKey: "fa-kit fa-shoppingcart-empty",
             title: "Shopping Cart",
@@ -49,7 +47,7 @@ function O({
         ),
         o.items.length > 0 && /* @__PURE__ */ t("div", { className: i.count, children: /* @__PURE__ */ t(a, { size: "xxs", children: o.items.length }) })
       ] }),
-      position: "bottom left",
+      placement: "bottom",
       on: "click",
       children: /* @__PURE__ */ n("div", { className: i.cartContainer, children: [
         /* @__PURE__ */ t(a, { size: "2xl", children: "Cart" }),
@@ -65,7 +63,7 @@ function O({
                     e.itemId
                   ] })
                 ] }),
-                /* @__PURE__ */ t("button", { onClick: () => c(e), className: i.removeItem, children: /* @__PURE__ */ t(s, { iconKey: "fa-regular fa-trash", size: "sm" }) })
+                /* @__PURE__ */ t("button", { onClick: () => c(e), className: i.removeItem, children: /* @__PURE__ */ t(m, { iconKey: "fa-regular fa-trash", size: "sm" }) })
               ] }),
               /* @__PURE__ */ n("div", { className: i.itemManagement, children: [
                 /* @__PURE__ */ n("div", { className: i.purchaseInformation, children: [
@@ -75,12 +73,12 @@ function O({
                       availId: e.availabilityId || "",
                       availDescription: e.availability || "",
                       contactHref: d || "",
-                      contactLinkBehavior: p || "new-tab"
+                      contactLinkBehavior: h || "new-tab"
                     }
                   ),
-                  /* @__PURE__ */ t(v, { pricingLabel: h || "List Price", price: e.price })
+                  /* @__PURE__ */ t(v, { pricingLabel: p || "List Price", price: e.price })
                 ] }),
-                /* @__PURE__ */ t(w, { quantity: e.quantity, onQuantityChange: (I) => m(e, I), size: "sm" })
+                /* @__PURE__ */ t(w, { quantity: e.quantity, onQuantityChange: (I) => s(e, I), size: "sm" })
               ] })
             ] })
           ] }, e.id)
@@ -95,5 +93,5 @@ function O({
   );
 }
 export {
-  O as ShoppingCart
+  U as ShoppingCart
 };

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -28,7 +28,7 @@ function z({
             }
           )
         ] }) }),
-        position: "bottom center",
+        placement: "bottom",
         children: /* @__PURE__ */ e("ul", { className: l.submenuTooltip, children: i.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: r.route, children: /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
       },
       i.id

package/dist/molecules/Tooltip/Tooltip.d.ts

@@ -1,11 +1,12 @@
 import { default as React } from 'react';
-import { PopupProps } from 'reactjs-popup/dist/types';
-/**
- * Tooltip component that wraps reactjs-popup's Popup,
- * applying consistent styling for all tooltips/popups.
- */
-export type TooltipProps = PopupProps & {
+import { TippyProps } from '@tippyjs/react';
+export type TooltipProps = Omit<TippyProps, "content" | "children" | "trigger"> & {
     tooltipClassName?: string;
     contentClassName?: string;
+    trigger: React.ReactElement;
+    on?: "click" | "mouseenter focus";
+    children: React.ReactNode;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
 };
-export declare const Tooltip: React.FC<TooltipProps>;
+export declare function Tooltip({ tooltipClassName, contentClassName, trigger, children, on, mouseEnterDelay, mouseLeaveDelay, ...tippyProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;