@caseparts-org/caseblocks 0.0.111 → 0.0.112

package/dist/assets/Account.css

@@ -1 +1 @@
-._loggedIn_w7zna_1{flex-shrink:0;gap:var(--spacing-spacing-2xs);cursor:pointer;transition:all .3s linear;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--spacing-spacing-3xs)}._customer_w7zna_12>a,._customer_w7zna_12>a:hover{text-decoration:none}._loggedIn_w7zna_1:hover{background-color:#f3f3f3;border-radius:var(--border-radius-md)}._placeholder_w7zna_21{height:30px;width:120px}@media (max-width:1280px){._placeholder_w7zna_21{width:30px;height:30px}}
+._loggedIn_1sipy_1{flex-shrink:0;gap:var(--spacing-spacing-2xs);cursor:pointer;transition:all .3s linear;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--spacing-spacing-3xs)}._customer_1sipy_12>a,._customer_1sipy_12>a:hover{text-decoration:none}._loggedIn_1sipy_1:hover{background-color:#f3f3f3;border-radius:var(--border-radius-md)}._placeholder_1sipy_21{width:32px;width:120px}@media (max-width:1280px){._placeholder_1sipy_21{width:32px;height:32px;background-color:#f3f3f3;border-radius:100%}}

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

@@ -7,8 +7,10 @@ export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, Hide
         number: string;
         /** The account user's name. */
         name: string;
-        /** The account user's initials. */
-        initials: string;
+        /** The account user's initials. Used when no custom avatar JSX is provided. */
+        initials?: string;
+        /** Optional custom avatar content. If provided, it will be rendered instead of the default Avatar. */
+        avatar?: React.ReactNode;
     };
     onLoginClick: () => void;
     /** Optional content to show when clicking the authenticated container */

package/dist/molecules/Account/Account.js

@@ -1,40 +1,40 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { getHideAtStyles as a } from "../../atoms/HideAt.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { getHideAtStyles as m } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
 import { Text as c } from "../../atoms/Text/Text.js";
-import { Avatar as h } from "../Avatar/Avatar.js";
+import { Avatar as u } from "../Avatar/Avatar.js";
 import { Flex as d } from "../../atoms/Flex/Flex.js";
 import { Button as p } from "../../atoms/Button/Button.js";
 import { Popover as A } from "../../atoms/Popover/Popover.js";
 import { c as g } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Account.css';const x = "_loggedIn_w7zna_1", v = "_customer_w7zna_12", I = "_placeholder_w7zna_21", t = {
+import '../../assets/Account.css';const x = "_loggedIn_1sipy_1", v = "_customer_1sipy_12", I = "_placeholder_1sipy_21", o = {
   loggedIn: x,
   customer: v,
   placeholder: I
 };
-function z(i) {
+function y(i) {
   return i.account !== void 0;
 }
-function T(i) {
-  return i.isAccountLoading ? /* @__PURE__ */ o("div", { className: t.placeholder }) : z(i) ? /* @__PURE__ */ o(_, { ...i }) : /* @__PURE__ */ o(N, { ...i });
+function j(i) {
+  return i.isAccountLoading ? /* @__PURE__ */ t("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ t(_, { ...i }) : /* @__PURE__ */ t(N, { ...i });
 }
 function _(i) {
   const {
     account: e,
     className: r,
     hideAt: s,
-    popoverContent: m,
-    isAccountLoading: u,
+    popoverContent: a,
+    isAccountLoading: h,
     ...l
   } = i;
-  return m ? /* @__PURE__ */ o(
+  return a ? /* @__PURE__ */ t(
     A,
     {
       position: "bottom right",
       trigger: /* @__PURE__ */ n(
         "div",
         {
-          className: g(t.loggedIn, a(s), r),
+          className: g(o.loggedIn, m(s), r),
           ...l,
           children: [
             /* @__PURE__ */ n(
@@ -43,7 +43,7 @@ function _(i) {
                 flexDirection: "column",
                 alignItems: "flex-end",
                 hideAt: ["sm", "md"],
-                className: t.customer,
+                className: o.customer,
                 children: [
                   /* @__PURE__ */ n(c, { size: "xxs", children: [
                     "Acct: ",
@@ -56,16 +56,16 @@ function _(i) {
                 ]
               }
             ),
-            /* @__PURE__ */ o(h, { initials: e.initials })
+            e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
           ]
         }
       ),
-      children: m
+      children: a
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: g(t.loggedIn, a(s), r),
+      className: g(o.loggedIn, m(s), r),
       ...l,
       children: [
         /* @__PURE__ */ n(
@@ -74,7 +74,7 @@ function _(i) {
             flexDirection: "column",
             alignItems: "flex-end",
             hideAt: ["sm", "md"],
-            className: t.customer,
+            className: o.customer,
             children: [
               /* @__PURE__ */ n(c, { size: "xxs", children: [
                 "Acct: ",
@@ -87,7 +87,7 @@ function _(i) {
             ]
           }
         ),
-        /* @__PURE__ */ o(h, { initials: e.initials })
+        e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
       ]
     }
   );
@@ -97,8 +97,8 @@ function N(i) {
     onLoginClick: e,
     className: r,
     hideAt: s,
-    popoverContent: m,
-    isAccountLoading: u,
+    popoverContent: a,
+    isAccountLoading: h,
     ...l
   } = i;
   return /* @__PURE__ */ n(
@@ -108,12 +108,12 @@ function N(i) {
       alignItems: "center",
       ...l,
       className: g(
-        t.unauthenticated,
-        a(s),
+        o.unauthenticated,
+        m(s),
         r
       ),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           p,
           {
             onClick: e,
@@ -123,11 +123,11 @@ function N(i) {
             children: "Sign In / Register"
           }
         ),
-        /* @__PURE__ */ o(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+        /* @__PURE__ */ t(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
       ]
     }
   );
 }
 export {
-  T as Account
+  j as Account
 };

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

@@ -12,3 +12,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Unauthenticated: Story;
 export declare const Authenticated: Story;
+export declare const AuthenticatedWithCustomAvatar: Story;

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

@@ -1,19 +1,20 @@
-import { Account as t } from "./Account.js";
-const o = {
+import { jsx as t } from "react/jsx-runtime";
+import { Account as a } from "./Account.js";
+const e = {
   title: "Case Parts/Molecules/Account",
-  component: t,
+  component: a,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered"
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, e = {
+}, c = {
   args: {
     onLoginClick: () => {
     }
   }
-}, a = {
+}, s = {
   args: {
     account: {
       name: "Ringo",
@@ -23,9 +24,27 @@ const o = {
     onLoginClick: () => {
     }
   }
+}, i = {
+  args: {
+    account: {
+      name: "Ringo",
+      number: "123456789012",
+      avatar: /* @__PURE__ */ t(
+        "img",
+        {
+          src: "https://avatars.githubusercontent.com/u/9919?s=80&v=4",
+          alt: "Custom Avatar",
+          style: { width: 32, height: 32, borderRadius: 9999 }
+        }
+      )
+    },
+    onLoginClick: () => {
+    }
+  }
 };
 export {
-  a as Authenticated,
-  e as Unauthenticated,
-  o as default
+  s as Authenticated,
+  i as AuthenticatedWithCustomAvatar,
+  c as Unauthenticated,
+  e as default
 };

package/package.json

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