@zenpatient-org/healthspan-marketing-ui 0.2.67 → 0.2.69

package/dist/components/Button/Button.d.ts

@@ -2,7 +2,7 @@ import { default as React, ElementType, ButtonHTMLAttributes, AnchorHTMLAttribut
 import { EIconName } from '../Icon';
 import { TAnalyticsEvent } from '../../types/analytics';
 
-export type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'muted' | 'muted-invert' | 'ghost';
+export type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'tertiary' | 'muted' | 'muted-invert' | 'ghost';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 interface BaseButtonProps {
     variant?: ButtonVariant;

package/dist/components/Button/button.module.css

@@ -39,6 +39,11 @@
     color: var(--color-text-primary);
 }
 
+.tertiary {
+    background-color: var(--color-bg-fill-brand-indigo);
+    color: var(--color-text-primary);
+}
+
 .muted {
     background-color: transparent;
     color: var(--color-text-primary);

package/dist/components/Profile/Profile.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../Typography/Typography.cjs.js"),i=require("./utils.cjs.js"),s=require("../../src/components/Profile/styles.module.css"),m=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),p={xl:"profileXl",lg:"profileLg",md:"profileMd",sm:"profileSm"},u=({firstName:o,lastName:r,image:a,size:n="md",editable:t=!1,onEdit:c})=>e.jsxs("div",{className:s.root,"data-size":n,children:[a?e.jsx("div",{className:s.imageContainer,children:e.jsx("img",{src:a,alt:i.getFullName({firstName:o,lastName:r}),className:s.image})}):e.jsx("div",{className:s.textContainer,children:e.jsx(l.Typography,{defaultVariant:p[n],className:s.name,children:i.getInitials({firstName:o,lastName:r})})}),t&&n!=="sm"&&e.jsx("div",{className:s.editableContainer,onClick:c,children:e.jsx(m.Icon,{name:d.EIconName.PLUS,className:s.editableIcon})})]});exports.Profile=u;

package/dist/components/Profile/Profile.d.ts

@@ -0,0 +1,10 @@
+export type ProfileProps = {
+    firstName: string;
+    lastName: string;
+    image?: string;
+    size?: ProfileSizeVariant;
+    editable?: boolean;
+    onEdit?: () => void;
+};
+export type ProfileSizeVariant = 'xl' | 'lg' | 'md' | 'sm';
+export declare const Profile: ({ firstName, lastName, image, size, editable, onEdit }: ProfileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Profile/Profile.es.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { Typography as n } from "../Typography/Typography.es.js";
+import { getFullName as c, getInitials as d } from "./utils.es.js";
+import e from "../../components/Profile/styles.module.css";
+import { Icon as p } from "../Icon/Icon.es.js";
+import { EIconName as f } from "../Icon/constants.es.js";
+const g = {
+  xl: "profileXl",
+  lg: "profileLg",
+  md: "profileMd",
+  sm: "profileSm"
+}, u = ({ firstName: i, lastName: o, image: l, size: r = "md", editable: m = !1, onEdit: s }) => /* @__PURE__ */ t("div", { className: e.root, "data-size": r, children: [
+  l ? /* @__PURE__ */ a("div", { className: e.imageContainer, children: /* @__PURE__ */ a("img", { src: l, alt: c({ firstName: i, lastName: o }), className: e.image }) }) : /* @__PURE__ */ a("div", { className: e.textContainer, children: /* @__PURE__ */ a(n, { defaultVariant: g[r], className: e.name, children: d({ firstName: i, lastName: o }) }) }),
+  m && r !== "sm" && /* @__PURE__ */ a("div", { className: e.editableContainer, onClick: s, children: /* @__PURE__ */ a(p, { name: f.PLUS, className: e.editableIcon }) })
+] });
+export {
+  u as Profile
+};

package/dist/components/Profile/index.d.ts

@@ -0,0 +1 @@
+export { Profile } from './Profile';

package/dist/components/Profile/styles.module.css

@@ -0,0 +1,106 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 0 auto;
+    justify-content: center;
+    position: relative;
+    border-radius: var(--border-radius-full);
+    overflow: hidden;
+}
+
+.root[data-size="xl"] {
+    width: 96px;
+    height: 96px;
+
+    & .editableIcon {
+        width: 24px;
+        height: 24px;
+        padding: 3px;
+    }
+}
+
+.root[data-size="lg"] {
+    width: 64px;
+    height: 64px;
+
+    & .editableIcon {
+        width: 16px;
+        height: 16px;
+        padding: 2px;
+    }
+}
+
+.root[data-size="md"] {
+    width: 48px;
+    height: 48px;
+
+    & .editableIcon {
+        width: 12px;
+        height: 12px;
+        padding: 1px;
+    }
+}
+
+.root[data-size="sm"] {
+    width: 32px;
+    height: 32px;
+}
+
+.imageContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius-full);
+    border: var(--border-width-sm) solid #F8F4EE;
+    overflow: hidden;
+}
+
+.image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius-full);
+    overflow: hidden;
+    background-color: var(--color-bg-fill-primary);
+}
+
+.name {
+    color: var(--color-text-primary-inverted);
+}
+
+.editableContainer {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 31%;
+    background-color: rgba(20, 18, 16, 0.80);
+    cursor: pointer;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+.root:hover .editableContainer {
+    display: flex;
+}
+
+.editableIcon {
+    color: #FFFEFC;
+}

package/dist/components/Profile/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=({firstName:t,lastName:n})=>!t&&!n?"":`${t||""} ${n||""}`.trim(),o=({firstName:t,lastName:n})=>{const r=(t==null?void 0:t.charAt(0).toUpperCase())||"",e=(n==null?void 0:n.charAt(0).toUpperCase())||"";return`${r} ${e}`.trim()};exports.getFullName=i;exports.getInitials=o;

package/dist/components/Profile/utils.d.ts

@@ -0,0 +1,7 @@
+type NameParts = {
+    firstName?: string;
+    lastName?: string;
+};
+export declare const getFullName: ({ firstName, lastName }: NameParts) => string;
+export declare const getInitials: ({ firstName, lastName }: NameParts) => string;
+export {};

package/dist/components/Profile/utils.es.js

@@ -0,0 +1,8 @@
+const c = ({ firstName: t, lastName: n }) => !t && !n ? "" : `${t || ""} ${n || ""}`.trim(), i = ({ firstName: t, lastName: n }) => {
+  const r = (t == null ? void 0 : t.charAt(0).toUpperCase()) || "", o = (n == null ? void 0 : n.charAt(0).toUpperCase()) || "";
+  return `${r} ${o}`.trim();
+};
+export {
+  c as getFullName,
+  i as getInitials
+};

package/dist/components/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ElementType } from 'react';
 
-export type TypographyVariant = 'displayXl' | 'displayLg' | 'displayMd' | 'displaySm' | 'displayXs' | 'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'headingXxs' | 'preambleLg' | 'preambleMd' | 'preambleSm' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs' | 'linkLg' | 'linkMd' | 'linkSm' | 'linkXs' | 'labelXl' | 'labelLg' | 'labelMd' | 'labelSm' | 'labelXs';
+export type TypographyVariant = 'displayXl' | 'displayLg' | 'displayMd' | 'displaySm' | 'displayXs' | 'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'headingXxs' | 'preambleLg' | 'preambleMd' | 'preambleSm' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs' | 'linkLg' | 'linkMd' | 'linkSm' | 'linkXs' | 'labelXl' | 'labelLg' | 'labelMd' | 'labelSm' | 'labelXs' | 'profileXl' | 'profileLg' | 'profileMd' | 'profileSm';
 type FontWeight = 'regular' | 'medium';
 export interface TypographyProps {
     defaultVariant: TypographyVariant;

package/dist/components/Typography/typography.module.css

@@ -284,6 +284,51 @@
     letter-spacing: var(--letter-spacing-xl);
 }
 
+.profileXl {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-heading-lg);
+}
+
+.profileLg {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-xxl);
+}
+
+.profileMd {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-lg);
+}
+
+.profileSm {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-xs);
+}
+
+.profileXs {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-3xs);
+}
+
 .weightRegular {
     font-weight: var(--font-weight-regular);
 }
@@ -591,6 +636,42 @@
         letter-spacing: var(--letter-spacing-xl);
     }
 
+    .profileXl {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-heading-lg);
+    }
+    
+    .profileLg {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-xxl);
+    }
+    
+    .profileMd {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-lg);
+    }
+    
+    .profileSm {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-xs);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-xs);
+    }
+
     .weightRegular {
         font-weight: var(--font-weight-regular);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.67",
+    "version": "0.2.69",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -341,6 +341,11 @@
             "import": "./dist/components/FilterError/FilterError.es.js",
             "require": "./dist/components/FilterError/FilterError.cjs.js"
         },
+        "./Profile": {
+            "types": "./dist/components/Profile/Profile.d.ts",
+            "import": "./dist/components/Profile/Profile.es.js",
+            "require": "./dist/components/Profile/Profile.cjs.js"
+        },
         "./CallbackModule": {
             "types": "./dist/modules/Callback/Callback.d.ts",
             "import": "./dist/modules/Callback/Callback.es.js",