@caseparts-org/caseblocks 0.0.11 → 0.0.15

package/dist/assets/SearchBox.css

@@ -1 +1 @@
-._button_j66cf_1{box-sizing:border-box;cursor:pointer;width:var(--spacing-2-5);height:var(--spacing-2-5);padding:var(--spacing-0-5);border-width:0;border-radius:0px var(--spacing-0-125) var(--spacing-0-125) 0px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:inherit;color:var(--icons-icon-search)}._text_j66cf_16{flex:1;position:relative;border:none;outline:none;font-family:var(--font-family-body);font-weight:var(--font-weight-light);font-size:var(--font-size-sm);line-height:var(--line-height-sm);background:transparent;color:var(--text-text-search-bar)}._text_j66cf_16::placeholder{font-style:italic}._input_j66cf_31{flex:1;padding:0px 0px 0px var(--spacing-0-25)}._inputSearch_j66cf_35{flex:1;border-radius:var(--spacing-0-125)}._searchfield_j66cf_39{flex:1;height:var(--spacing-2-5);border-radius:var(--spacing-2-5);overflow:hidden;background-color:var(--surface-surface-search-bar)}._searchBox_j66cf_46{flex:1;width:100%;min-width:250px;max-width:392px;height:var(--spacing-2-5);position:relative;border-radius:var(--spacing-2-5);overflow:hidden;text-align:left;background-color:var(--surface-surface-search-bar)}
+._button_8serw_1{box-sizing:border-box;cursor:pointer;width:var(--spacing-2-5);height:var(--spacing-2-5);padding:var(--spacing-0-5);border-width:0;border-radius:0px var(--spacing-0-125) var(--spacing-0-125) 0px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:inherit;color:var(--icons-icon-search)}._text_8serw_16{flex:1;position:relative;border:none;border-radius:40px;outline:none;font-family:var(--font-family-body);font-weight:var(--font-weight-light);font-size:var(--font-size-sm);line-height:var(--line-height-sm);background:var(--surface-surface-searchBar, #f6f6f6);color:var(--text-text-search-bar)}._text_8serw_16::placeholder{font-style:italic}._input_8serw_32{flex:1;padding:0px 0px 0px var(--spacing-0-25)}._inputSearch_8serw_36{flex:1;border-radius:var(--spacing-0-125)}._searchfield_8serw_40{flex:1;height:var(--spacing-2-5);border-radius:var(--spacing-2-5);overflow:hidden;background-color:var(--surface-surface-search-bar)}._searchBox_8serw_47{flex:1;width:100%;min-width:250px;height:var(--spacing-2-5);position:relative;border-radius:var(--spacing-2-5);overflow:hidden;text-align:left;background-color:var(--surface-surface-search-bar)}

package/dist/assets/Tooltip.css

@@ -0,0 +1 @@
+._tooltip_mtsuw_1{box-shadow:8px 8px 12px #00000026;background-color:var(--color-neutrals-neutral-1)}._content_mtsuw_5{padding:var(--spacing-1)}.popup-content{margin:auto;background:#fff;width:50%;padding:5px;border:1px solid #d7d7d7}[role=tooltip].popup-content{width:200px;box-shadow:0 0 3px #00000029;border-radius:5px}.popup-overlay{background:#00000080}[data-popup=tooltip].popup-overlay{background:transparent}.popup-arrow{-webkit-filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));color:#fff;stroke-width:2px;stroke:#d7d7d7;stroke-dasharray:30px;stroke-dashoffset:-54px;left:0;right:0;top:0;bottom:0}

package/dist/atoms/Icon/Icon.js

@@ -1,33 +1,33 @@
 import { jsx as r } from "react/jsx-runtime";
-import { c as l } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as _ } from "../HideAt.js";
-import '../../assets/Icon.css';const e = {
-  "icon-sm": "_icon-sm_flrgw_1",
-  "icon-md": "_icon-md_flrgw_6",
-  "icon-lg": "_icon-lg_flrgw_11"
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as e } from "../HideAt.js";
+import '../../assets/Icon.css';const l = {
+  "icon-sm": "_icon-sm_nwr4s_1",
+  "icon-md": "_icon-md_nwr4s_6",
+  "icon-lg": "_icon-lg_nwr4s_11"
 };
-function d({
+function a({
   iconKey: o,
-  size: c = "md",
-  hideAt: i,
-  className: n,
-  ...s
+  size: n = "md",
+  hideAt: s,
+  className: c,
+  ...i
 }) {
   const [t, m] = o.split(" ");
   return /* @__PURE__ */ r(
     "i",
     {
-      className: l(
+      className: _(
         t,
         m,
-        e[`icon-${c}`],
-        _(i),
-        n
+        l[`icon-${n}`],
+        e(s),
+        c
       ),
-      ...s
+      ...i
     }
   );
 }
 export {
-  d as Icon
+  a as Icon
 };

package/dist/atoms/Input/Input.d.ts

@@ -3,4 +3,4 @@ import { HideAtProps } from '../HideAt';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HideAtProps {
     label: string | null;
 }
-export declare function Input({ label, hideAt, className, ...otherProps }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/atoms/Input/Input.js

@@ -1,24 +1,26 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as r } from "../HideAt.js";
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import m from "react";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as o } from "../HideAt.js";
 import '../../assets/Input.css';const u = "_input_1fwgs_1", e = {
   "input-container": "_input-container_1fwgs_1",
   input: u
-};
-function f({ label: n, hideAt: s, className: c, ...t }) {
-  return /* @__PURE__ */ p("div", { className: e["input-container"], children: [
+}, l = m.forwardRef(
+  ({ label: n, hideAt: s, className: p, ...t }, r) => /* @__PURE__ */ a("div", { className: e["input-container"], children: [
     n && /* @__PURE__ */ i("label", { htmlFor: t.name, children: n }),
     /* @__PURE__ */ i(
       "input",
       {
+        ref: r,
         id: t.name,
         type: "text",
-        className: m(e.input, r(s), c),
+        className: c(e.input, o(s), p),
         ...t
       }
     )
-  ] });
-}
+  ] })
+);
+l.displayName = "Input";
 export {
-  f as Input
+  l as Input
 };

package/dist/atoms/Input/Input.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react';
-import { Input } from './Input';
 declare const meta: {
     title: string;
-    component: typeof Input;
+    component: import('react').ForwardRefExoticComponent<import('./Input').InputProps & import('react').RefAttributes<HTMLInputElement>>;
     parameters: {
         layout: string;
     };

package/dist/molecules/Account/Account.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { HideAtProps } from '../../atoms/HideAt';
 /** Base props shared by all account types */
 export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
@@ -9,5 +10,7 @@ export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, Hide
         /** The account user's initials. */
         initials: string;
     };
+    accountRoute: string;
+    onLoginClick: () => void;
 }
 export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Account/Account.js

@@ -1,66 +1,89 @@
-import { jsx as i, jsxs as r } from "react/jsx-runtime";
-import { getHideAtStyles as d } from "../../atoms/HideAt.js";
-import { Icon as g } from "../../atoms/Icon/Icon.js";
-import { Text as n } from "../../atoms/Text/Text.js";
-import { Avatar as c } from "../Avatar/Avatar.js";
-import { Flex as t } from "../../atoms/Flex/Flex.js";
-import { Button as f } from "../../atoms/Button/Button.js";
-import { c as a } from "../../clsx-OuTLNxxd.js";
-import { Link as u } from "../../atoms/Link/Link.js";
-import '../../assets/Account.css';const h = "_loggedIn_iiyge_1", x = "_customer_iiyge_5", o = {
-  loggedIn: h,
-  customer: x
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { getHideAtStyles as o } from "../../atoms/HideAt.js";
+import { Icon as f } from "../../atoms/Icon/Icon.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { Avatar as a } from "../Avatar/Avatar.js";
+import { Flex as r } from "../../atoms/Flex/Flex.js";
+import { Button as h } from "../../atoms/Button/Button.js";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import { Link as x } from "../../atoms/Link/Link.js";
+import '../../assets/Account.css';const u = "_loggedIn_1uin2_1", t = {
+  loggedIn: u
 };
 function A(e) {
   return e.account !== void 0;
 }
-function H(e) {
-  return A(e) ? /* @__PURE__ */ i(I, { ...e }) : /* @__PURE__ */ i(p, { ...e });
+function w(e) {
+  return A(e) ? /* @__PURE__ */ i(I, { ...e }) : /* @__PURE__ */ i(k, { ...e });
 }
 function I({
   account: e,
-  className: m,
-  hideAt: s,
-  ...l
+  accountRoute: l,
+  onLoginClick: y,
+  className: d,
+  hideAt: g,
+  ...c
 }) {
-  return /* @__PURE__ */ r(
-    t,
+  return /* @__PURE__ */ n(
+    r,
     {
       flexDirection: "row",
       alignItems: "center",
-      className: a(o.loggedIn, d(s), m),
-      ...l,
+      className: s(t.loggedIn, o(g), d),
+      ...c,
       children: [
-        /* @__PURE__ */ r(
-          t,
+        /* @__PURE__ */ n(
+          r,
           {
             flexDirection: "column",
             alignItems: "flex-end",
             hideAt: ["sm", "md"],
-            className: o.customer,
+            className: t.customer,
             children: [
-              /* @__PURE__ */ r(n, { size: "xxs", children: [
+              /* @__PURE__ */ n(m, { size: "xxs", children: [
                 "Acct: ",
                 e == null ? void 0 : e.number
               ] }),
-              /* @__PURE__ */ i(u, { href: "#", children: /* @__PURE__ */ r(n, { size: "sm", variant: "display", children: [
+              /* @__PURE__ */ i(x, { href: l, children: /* @__PURE__ */ n(m, { size: "sm", variant: "display", children: [
                 "Hello ",
                 e == null ? void 0 : e.name
               ] }) })
             ]
           }
         ),
-        /* @__PURE__ */ i(c, { initials: e.initials })
+        /* @__PURE__ */ i(a, { initials: e.initials, accountRoute: l })
       ]
     }
   );
 }
-function p(e) {
-  return /* @__PURE__ */ r(t, { flexDirection: "row", alignItems: "center", ...e, children: [
-    /* @__PURE__ */ i(f, { size: "sm", variant: "primary", hideAt: ["sm", "md"], children: "Sign In / Register" }),
-    /* @__PURE__ */ i(g, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
-  ] });
+function k(e) {
+  return /* @__PURE__ */ n(
+    r,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      ...e,
+      className: s(
+        t.unauthenticated,
+        o(e.hideAt),
+        e.className
+      ),
+      children: [
+        /* @__PURE__ */ i(
+          h,
+          {
+            onClick: e.onLoginClick,
+            size: "sm",
+            variant: "primary",
+            hideAt: ["sm", "md"],
+            children: "Sign In / Register"
+          }
+        ),
+        /* @__PURE__ */ i(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+      ]
+    }
+  );
 }
 export {
-  H as Account
+  w as Account
 };

package/dist/molecules/Account/Account.stories.js

@@ -1,5 +1,5 @@
 import { Account as t } from "./Account.js";
-const a = {
+const c = {
   title: "Case Parts/Molecules/Account",
   component: t,
   parameters: {
@@ -9,18 +9,25 @@ const a = {
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
 }, n = {
-  args: {}
-}, o = {
+  args: {
+    accountRoute: "/account",
+    onLoginClick: () => {
+    }
+  }
+}, a = {
   args: {
     account: {
       name: "Ringo",
       initials: "RS",
       number: "123456789012"
+    },
+    accountRoute: "/account",
+    onLoginClick: () => {
     }
   }
 };
 export {
-  o as Authenticated,
+  a as Authenticated,
   n as Unauthenticated,
-  a as default
+  c as default
 };

package/dist/molecules/Avatar/Avatar.d.ts

@@ -2,5 +2,6 @@ import { HideAtProps } from '../../atoms/HideAt';
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
     /** The user's initials (2 characters) */
     initials: string;
+    accountRoute: string;
 }
-export declare function Avatar({ initials, className, hideAt, ...otherProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ initials, accountRoute, className, hideAt, ...otherProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Avatar/Avatar.js

@@ -1,35 +1,37 @@
-import { jsx as s } from "react/jsx-runtime";
-import { Flex as i } from "../../atoms/Flex/Flex.js";
-import { getHideAtStyles as m } from "../../atoms/HideAt.js";
-import { c as n } from "../../clsx-OuTLNxxd.js";
-import { t } from "../../Text.module-smM1g1J4.js";
-import '../../assets/Avatar.css';const c = "_avatar_1x5y3_1", l = {
-  avatar: c
+import { jsx as t } from "react/jsx-runtime";
+import { Flex as m } from "../../atoms/Flex/Flex.js";
+import { Link as n } from "../../atoms/Link/Link.js";
+import { getHideAtStyles as c } from "../../atoms/HideAt.js";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { t as r } from "../../Text.module-smM1g1J4.js";
+import '../../assets/Avatar.css';const f = "_avatar_vwzwk_1", p = {
+  avatar: f
 };
-function d({
-  initials: r,
-  className: e,
-  hideAt: a,
-  ...o
+function h({
+  initials: e,
+  accountRoute: a,
+  className: o,
+  hideAt: i,
+  ...s
 }) {
-  return /* @__PURE__ */ s(
-    i,
+  return /* @__PURE__ */ t(n, { href: a, children: /* @__PURE__ */ t(
+    m,
     {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      className: n(
-        l.avatar,
-        t["text-display"],
-        t["text-md"],
-        m(a),
-        e
+      className: l(
+        p.avatar,
+        r["text-display"],
+        r["text-md"],
+        c(i),
+        o
       ),
-      ...o,
-      children: r.substring(0, 2)
+      ...s,
+      children: e.substring(0, 2)
     }
-  );
+  ) });
 }
 export {
-  d as Avatar
+  h as Avatar
 };

package/dist/molecules/Avatar/Avatar.stories.js

@@ -9,7 +9,10 @@ const e = {
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
 }, o = {
-  args: { initials: "RS" }
+  args: {
+    initials: "RS",
+    accountRoute: "/account"
+  }
 };
 export {
   o as Default,

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface cartProps extends React.HtmlHTMLAttributes<HTMLButtonElement> {
+    onClick: () => void;
+    cartItemCount: number;
+}
+export declare function Cart({ onClick, cartItemCount, ...otherProps }: cartProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/molecules/Cart/Cart.js

@@ -0,0 +1,23 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { Icon as i } from "../../atoms/Icon/Icon.js";
+import { Text as a } from "../../atoms/Text/Text.js";
+import '../../assets/Cart.css';const e = "_cart_jjkwa_1", p = "_count_jjkwa_8", o = {
+  cart: e,
+  count: p
+};
+function j({ onClick: r, cartItemCount: c, ...n }) {
+  return /* @__PURE__ */ s("button", { onClick: r, className: o.cart, ...n, children: [
+    /* @__PURE__ */ t(
+      i,
+      {
+        iconKey: "fa-kit fa-shoppingcart-empty",
+        title: "Shopping Cart",
+        size: "lg"
+      }
+    ),
+    c > 0 && /* @__PURE__ */ t("div", { className: o.count, children: /* @__PURE__ */ t(a, { size: "xxs", children: c }) })
+  ] });
+}
+export {
+  j as Cart
+};

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+import { Cart } from './Cart';
+declare const meta: {
+    title: string;
+    component: typeof Cart;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const EmptyCart: Story;
+export declare const CartWithItems: Story;

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

@@ -0,0 +1,24 @@
+import { Cart as t } from "./Cart.js";
+const e = {
+  title: "Case Parts/Molecules/Cart",
+  component: t,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+}, r = {
+  args: {
+    cartItemCount: 0,
+    onClick: () => alert("Cart clicked")
+  }
+}, o = {
+  args: {
+    cartItemCount: 15,
+    onClick: () => alert("Cart clicked")
+  }
+};
+export {
+  o as CartWithItems,
+  r as EmptyCart,
+  e as default
+};

package/dist/molecules/HamburgerMenu/HamburgerMenu.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { HideAtProps } from '../../atoms/HideAt';
+interface HamburgerMenuProps extends HideAtProps {
+    children: React.ReactNode;
+}
+export declare function HamburgerMenu({ hideAt, children }: HamburgerMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/molecules/HamburgerMenu/HamburgerMenu.js

@@ -0,0 +1,63 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useState as u, useRef as l, useEffect as f } from "react";
+import { getHideAtStyles as d } from "../../atoms/HideAt.js";
+import { Flex as p } from "../../atoms/Flex/Flex.js";
+import { Icon as _ } from "../../atoms/Icon/Icon.js";
+import { c as b } from "../../clsx-OuTLNxxd.js";
+import '../../assets/HamburgerMenu.css';const C = "_hamburgerContainer_b84wp_1", g = "_menuIcon_b84wp_4", h = "_menuContent_b84wp_8", v = "_closeContainer_b84wp_22", w = "_overlay_b84wp_41", t = {
+  hamburgerContainer: C,
+  menuIcon: g,
+  menuContent: h,
+  closeContainer: v,
+  overlay: w
+};
+function j({ hideAt: s, children: c }) {
+  const [e, r] = u(!1), a = l(null);
+  return f(() => {
+    if (!e) return;
+    function n(i) {
+      a.current && !a.current.contains(i.target) && r(!1);
+    }
+    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, [e]), /* @__PURE__ */ m(
+    "div",
+    {
+      ref: a,
+      className: b(t.hamburgerContainer, d(s)),
+      children: [
+        e && /* @__PURE__ */ o(
+          "div",
+          {
+            className: t.overlay,
+            onClick: () => r(!1),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ o(
+          p,
+          {
+            flexDirection: "row",
+            className: t.menuIcon,
+            onClick: () => r((n) => !n),
+            "aria-expanded": e,
+            "aria-controls": "hamburger-menu-content",
+            role: "button",
+            children: /* @__PURE__ */ o(_, { iconKey: "fa-kit fa-bars", title: "Menu", size: "lg" })
+          }
+        ),
+        e && /* @__PURE__ */ o(
+          "div",
+          {
+            id: "hamburger-menu-content",
+            className: t.menuContent,
+            role: "menu",
+            children: c
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  j as HamburgerMenu
+};