@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.0

package/dist/components/Tabs/tabs.module.css

@@ -0,0 +1,280 @@
+.container {
+    display: flex;
+    gap: var(--spacing-20);
+}
+
+.tab {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-4);
+    font-family: var(--font-default), sans-serif;
+    background: none;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    color: var(--color-text-primary-disabled);
+    border-top: var(--border-width-sm) solid transparent;
+    border-bottom: var(--border-width-sm) solid transparent;
+    white-space: nowrap;
+    transition:
+        color 0.3s ease,
+        border-color 0.3s ease,
+        padding-left 0.3s ease,
+        padding-right 0.3s ease;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-negative-lg);
+    overflow: hidden;
+    z-index: 1;
+}
+
+.sm {
+    padding: var(--spacing-12) 0;
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    font-family: var(--font-decorative), monospace;
+    color: var(--color-text-primary);
+}
+
+.md {
+    padding: 8px 0 16px;
+    font-size: var(--font-size-heading-md);
+}
+
+.lg {
+    padding: var(--spacing-16) 0 var(--spacing-24);
+    font-size: var(--font-size-display-sm);
+}
+
+.tab:hover,
+.tab:focus {
+    color: var(--color-text-secondary);
+}
+
+.inverted {
+    color: var(--color-text-primary-inverted);
+}
+
+.inverted:hover,
+.inverted:focus {
+    color: var(--border-color-solar);
+}
+
+.disabled {
+    color: var(--color-text-secondary-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.bottom {
+    border-bottom-color: var(--border-color-light);
+}
+
+.top {
+    border-top-color: var(--border-color-light);
+}
+
+.bottom.inverted {
+    border-bottom-color: var(--color-text-primary-inverted);
+}
+
+.top.inverted {
+    border-top-color: var(--color-text-primary-inverted);
+}
+
+.activeTab,
+.activeTab:hover,
+.activeTab:focus {
+    color: var(--color-text-primary);
+    cursor: default;
+}
+
+.activeTab.bottom {
+    border-bottom-color: var(--color-text-primary);
+}
+
+.activeTab.top {
+    border-top-color: var(--color-text-primary);
+}
+
+.activeTab.inverted,
+.activeTab.inverted:hover,
+.activeTab.inverted:focus {
+    color: var(--border-color-solar);
+}
+
+.activeTab.bottom.inverted {
+    border-bottom-color: var(--border-color-solar);
+}
+
+.activeTab.top.inverted {
+    border-top-color: var(--border-color-solar);
+}
+
+.brackets {
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+}
+
+.md.brackets {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.md.tab,
+.lg.tab {
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        opacity: 0;
+        transition:
+            transform 0.3s ease,
+            opacity 0.6s ease;
+    }
+
+    &:before {
+        content: '(';
+        left: 0;
+        transform: translateX(-40px);
+    }
+
+    &:after {
+        content: ')';
+        right: 0;
+        transform: translateX(40px);
+    }
+}
+
+.md.brackets::before,
+.lg.brackets::before {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.md.brackets::after,
+.lg.brackets::after {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+    overflow: hidden;
+
+    & > * {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.md .iconWrap {
+    width: 28px;
+    min-width: 28px;
+    max-width: 28px;
+    height: 28px;
+    max-height: 28px;
+}
+
+.lg .iconWrap {
+    width: 56px;
+    min-width: 56px;
+    max-width: 56px;
+    height: 56px;
+    max-height: 56px;
+}
+
+.tabsTape {
+    position: relative;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.tabsTape::-webkit-scrollbar {
+    display: none;
+}
+
+.tabsWrapper {
+    display: flex;
+    width: 100%;
+    position: relative;
+}
+
+.tabsWrapper::before,
+.tabsWrapper::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 40px;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+}
+
+.tabsWrapper.showFadeLeft::before {
+    opacity: 1;
+}
+
+.tabsWrapper.showFadeRight::after {
+    opacity: 1;
+}
+
+.tabsWrapper::before {
+    left: 0;
+    background: linear-gradient(to right, rgba(255, 255, 255, 1), transparent);
+}
+
+.tabsWrapper::after {
+    right: 0;
+    background: linear-gradient(to left, rgba(255, 255, 255, 1), transparent);
+}
+
+@media (width <= 768px) {
+    .md {
+        padding: var(--spacing-8) 0 var(--spacing-16);
+        font-size: var(--font-size-heading-xs);
+    }
+
+    .md .iconWrap {
+        width: 20px;
+        min-width: 20px;
+        max-width: 20px;
+        height: 20px;
+        max-height: 20px;
+    }
+
+    .md.brackets {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+
+    .lg {
+        padding: var(--spacing-8) 0 var(--spacing-16);
+        font-size: var(--font-size-heading-md);
+    }
+
+    .lg .iconWrap {
+        width: 28px;
+        min-width: 28px;
+        max-width: 28px;
+        height: 28px;
+        max-height: 28px;
+    }
+
+    .brackets {
+        padding-left: var(--spacing-8);
+        padding-right: var(--spacing-8);
+    }
+}

package/dist/components/Tag/Tag.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../styles/typography.module.css.cjs.js"),m=require("../../utils/cn/cn.cjs.js"),d=require("../Icon/Icon.cjs.js"),t=require("./tag.module.css.cjs.js"),g={md:r.default.labelMd,lg:r.default.labelLg},j=({value:n,children:u,active:o,disabled:i,size:s="md",prefixIcon:c,suffixIcon:l,onClick:a})=>e.jsx("button",{className:m.cn(t.default.tag,g[s],{[t.default.active]:o},t.default[s]),disabled:i,onClick:()=>n&&(a==null?void 0:a(n)),children:e.jsxs("div",{className:t.default.content,children:[c&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(d.Icon,{name:c})}),e.jsx("p",{children:u}),l&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(d.Icon,{name:l})})]})});exports.Tag=j;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Tag/tag.module.css"),l=require("../Icon/Icon.cjs.js"),u={md:e.labelMd,lg:e.labelLg},j=({value:c,children:o,active:i,disabled:d,size:t="md",prefixIcon:a,suffixIcon:r,onClick:n})=>s.jsx("button",{className:m.cn(e.tag,u[t],{[e.active]:i},e[t]),disabled:d,onClick:()=>c&&(n==null?void 0:n(c)),children:s.jsxs("div",{className:e.content,children:[a&&s.jsx("div",{className:e.iconWrap,children:s.jsx(l.Icon,{name:a})}),s.jsx("p",{children:o}),r&&s.jsx("div",{className:e.iconWrap,children:s.jsx(l.Icon,{name:r})})]})});exports.Tag=j;

package/dist/components/Tag/Tag.es.js

@@ -1,25 +1,24 @@
 "use client";
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import c from "../../styles/typography.module.css.es.js";
-import { cn as g } from "../../utils/cn/cn.es.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { cn as p } from "../../utils/cn/cn.es.js";
+import a from "../../components/Tag/tag.module.css";
 import { Icon as n } from "../Icon/Icon.es.js";
-import m from "./tag.module.css.es.js";
-const h = {
-  md: c.labelMd,
-  lg: c.labelLg
-}, f = ({ value: a, children: l, active: d, disabled: i, size: e = "md", prefixIcon: o, suffixIcon: s, onClick: t }) => /* @__PURE__ */ r(
+const g = {
+  md: a.labelMd,
+  lg: a.labelLg
+}, v = ({ value: r, children: l, active: o, disabled: d, size: t = "md", prefixIcon: s, suffixIcon: c, onClick: m }) => /* @__PURE__ */ e(
   "button",
   {
-    className: g(m.tag, h[e], { [m.active]: d }, m[e]),
-    disabled: i,
-    onClick: () => a && (t == null ? void 0 : t(a)),
-    children: /* @__PURE__ */ p("div", { className: m.content, children: [
-      o && /* @__PURE__ */ r("div", { className: m.iconWrap, children: /* @__PURE__ */ r(n, { name: o }) }),
-      /* @__PURE__ */ r("p", { children: l }),
-      s && /* @__PURE__ */ r("div", { className: m.iconWrap, children: /* @__PURE__ */ r(n, { name: s }) })
+    className: p(a.tag, g[t], { [a.active]: o }, a[t]),
+    disabled: d,
+    onClick: () => r && (m == null ? void 0 : m(r)),
+    children: /* @__PURE__ */ i("div", { className: a.content, children: [
+      s && /* @__PURE__ */ e("div", { className: a.iconWrap, children: /* @__PURE__ */ e(n, { name: s }) }),
+      /* @__PURE__ */ e("p", { children: l }),
+      c && /* @__PURE__ */ e("div", { className: a.iconWrap, children: /* @__PURE__ */ e(n, { name: c }) })
     ] })
   }
 );
 export {
-  f as Tag
+  v as Tag
 };

package/dist/components/Tag/tag.module.css

@@ -0,0 +1,100 @@
+.tag {
+    position: relative;
+    min-width: min-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-xs);
+    color: var(--color-text-primary);
+    border: 1px solid var(--border-color-alpha-black-10);
+    cursor: pointer;
+    background: none;
+    box-shadow: none;
+    overflow: hidden;
+    box-sizing: border-box;
+    transition: color 0.3s ease;
+}
+
+.md {
+    min-height: 40px;
+    padding: var(--spacing-12) var(--spacing-16);
+}
+
+.lg {
+    min-height: 52px;
+    padding: var(--spacing-18) var(--spacing-20);
+}
+
+.tag::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(93deg, var(--color-indigo-200) 8.06%, var(--color-indigo-400) 160.95%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 0;
+}
+
+.active {
+    color: var(--color-text-primary-inverted);
+    border-color: transparent;
+    cursor: default;
+}
+
+.active::before {
+    opacity: 1;
+}
+
+.tag:disabled {
+    cursor: not-allowed;
+    color: var(--color-text-primary-disabled);
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    gap: var(--spacing-8);
+    z-index: 1;
+}
+
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+    overflow: hidden;
+
+    & > * {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+.labelLg {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-negative-md);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-md);
+}
+
+.labelMd {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-negative-md);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-sm);
+}

package/dist/components/TextButton/TextButton.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../utils/cn/cn.cjs.js"),c=require("../Icon/Icon.cjs.js"),t=require("./textButton.module.css.cjs.js"),v=({size:l="sm",as:o="button",disabled:s=!1,inverted:d=!1,children:i,prefixIcon:n,suffixIcon:a,hideOn:r,...u})=>{const m=t.default[l]||"",j=d?t.default.inverted:"",x=s?t.default.disabled:"";return e.jsx(o,{...u,className:f.cn(t.default.button,j,m,x),disabled:s,"data-hide-on":r,children:e.jsxs("div",{className:t.default.content,children:[n&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(c.Icon,{name:n})}),e.jsx("div",{children:i}),a&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(c.Icon,{name:a})})]})})};exports.TextButton=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),v=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/TextButton/textButton.module.css"),o=require("../Icon/Icon.cjs.js"),b=({size:a="sm",as:i="button",disabled:n=!1,inverted:r=!1,children:l,prefixIcon:t,suffixIcon:c,hideOn:d,...u})=>{const m=e[a]||"",j=r?e.inverted:"",x=n?e.disabled:"";return s.jsx(i,{...u,className:v.cn(e.button,j,m,x),disabled:n,"data-hide-on":d,children:s.jsxs("div",{className:e.content,children:[t&&s.jsx("div",{className:e.iconWrap,children:s.jsx(o.Icon,{name:t})}),s.jsx("div",{children:l}),c&&s.jsx("div",{className:e.iconWrap,children:s.jsx(o.Icon,{name:c})})]})})};exports.TextButton=b;

package/dist/components/TextButton/TextButton.es.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
 import { cn as N } from "../../utils/cn/cn.es.js";
+import s from "../../components/TextButton/textButton.module.css";
 import { Icon as o } from "../Icon/Icon.es.js";
-import s from "./textButton.module.css.es.js";
 const x = ({
   size: i = "sm",
   as: r = "button",

package/dist/components/TextButton/textButton.module.css

@@ -0,0 +1,106 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: var(--border-radius-none);
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition:
+        opacity 0.3s ease,
+        color 0.3s ease;
+    border: none;
+    font-family: var(--font-decorative), monospace;
+    text-transform: uppercase;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-xxl);
+    color: var(--color-text-primary);
+    border-bottom: var(--border-width-sm) solid var(--border-color-dark);
+}
+
+.button[data-hide-on='desktop'] {
+    display: none;
+}
+
+.inverted {
+    color: var(--color-text-primary-inverted);
+    border-bottom-color: var(--border-color-invert);
+}
+
+.button:hover {
+    opacity: 0.85;
+}
+
+.button,
+.button:focus,
+.button:active,
+.button:hover {
+    text-decoration: none;
+}
+
+.disabled:hover,
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    gap: var(--spacing-8);
+    z-index: 1;
+}
+
+.lg {
+    font-size: var(--font-size-sm);
+    min-height: 32px;
+}
+
+.sm {
+    font-size: var(--font-size-xs);
+    min-height: 24px;
+}
+
+.sm .content {
+    gap: var(--spacing-4);
+}
+
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+    overflow: hidden;
+
+    & > * {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.sm .iconWrap {
+    width: 14px;
+    min-width: 14px;
+    max-width: 14px;
+    height: 14px;
+    max-height: 14px;
+}
+
+@media (width <= 768px) {
+    .button[data-hide-on='mobile'] {
+        display: none;
+    }
+    .button[data-hide-on='desktop'] {
+        display: inline-flex;
+    }
+}

package/dist/components/TextInput/TextInput.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),I=require("react"),e=require("./textInput.module.css.cjs.js"),c=require("../../utils/cn/cn.cjs.js"),V=require("../Button/Button.cjs.js"),B=require("../Icon/Icon.cjs.js"),F=require("../Icon/constants.cjs.js"),$=require("../Typography/Typography.cjs.js"),E=({placeholder:_,variant:o="primary",handleChange:r,handleKeyDown:l,disabled:i=!1,buttonText:h="SUBMIT",onButtonClick:s,error:u=!1,errorText:d,active:f=!1,value:p,label:m,type:j="button",showButton:N=!1})=>{const[q,y]=I.useState(!1),[v,T]=I.useState(""),x=typeof p=="string"&&typeof r=="function",a=x?p:v,g=n=>{x?r&&r(n):T(n.target.value)},b=()=>{s&&s(a||"")},S=n=>{n.key==="Enter"&&s&&s(a||""),l&&l(n)};return t.jsxs("div",{className:e.default.root,children:[m&&t.jsx("div",{className:c.cn(e.default.label,a&&e.default.hidden),children:m}),t.jsxs("div",{className:c.cn(e.default.container,e.default[o],{[e.default.focused]:q},{[e.default.disabled]:i},{[e.default.error]:u},{[e.default.active]:f}),children:[t.jsx("div",{className:e.default.input_container,children:t.jsx("input",{className:c.cn(e.default.input,e.default[`input_${o}`],{[e.default.error]:u},{[e.default.active]:f}),disabled:i,placeholder:_,onChange:g,onKeyDown:S,onFocus:()=>y(!0),onBlur:()=>y(!1),value:a,style:{outline:"none"}})}),N&&t.jsx("div",{className:e.default.button_container,children:t.jsx(V.Button,{variant:o==="primary"?"primary":"primary-invert",as:"button",size:"sm",type:j,onClick:b,children:h})})]}),u&&d&&t.jsxs("div",{className:e.default.errorTextContainer,children:[t.jsx(B.Icon,{name:F.EIconName.INFO,className:e.default.errorIcon}),t.jsx($.Typography,{defaultVariant:"labelSm",className:e.default.errorText,children:d})]})]})};exports.TextInput=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),I=require("react"),e=require("../../src/components/TextInput/textInput.module.css"),i=require("../../utils/cn/cn.cjs.js"),V=require("../Button/Button.cjs.js"),B=require("../Icon/Icon.cjs.js"),F=require("../Icon/constants.cjs.js"),E=require("../Typography/Typography.cjs.js"),M=({placeholder:_,variant:c="primary",handleChange:r,handleKeyDown:l,disabled:u=!1,buttonText:h="SUBMIT",onButtonClick:t,error:a=!1,errorText:p,active:d=!1,value:m,label:y,type:j="button",showButton:N=!1})=>{const[v,f]=I.useState(!1),[q,T]=I.useState(""),x=typeof m=="string"&&typeof r=="function",o=x?m:q,g=s=>{x?r&&r(s):T(s.target.value)},b=()=>{t&&t(o||"")},S=s=>{s.key==="Enter"&&t&&t(o||""),l&&l(s)};return n.jsxs("div",{className:e.root,children:[y&&n.jsx("div",{className:i.cn(e.label,o&&e.hidden),children:y}),n.jsxs("div",{className:i.cn(e.container,e[c],{[e.focused]:v},{[e.disabled]:u},{[e.error]:a},{[e.active]:d}),children:[n.jsx("div",{className:e.input_container,children:n.jsx("input",{className:i.cn(e.input,e[`input_${c}`],{[e.error]:a},{[e.active]:d}),disabled:u,placeholder:_,onChange:g,onKeyDown:S,onFocus:()=>f(!0),onBlur:()=>f(!1),value:o,style:{outline:"none"}})}),N&&n.jsx("div",{className:e.button_container,children:n.jsx(V.Button,{variant:c==="primary"?"primary":"primary-invert",as:"button",size:"sm",type:j,onClick:b,children:h})})]}),a&&p&&n.jsxs("div",{className:e.errorTextContainer,children:[n.jsx(B.Icon,{name:F.EIconName.INFO,className:e.errorIcon}),n.jsx(E.Typography,{defaultVariant:"labelSm",className:e.errorText,children:p})]})]})};exports.TextInput=M;

package/dist/components/TextInput/TextInput.es.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import { useState as I } from "react";
-import e from "./textInput.module.css.es.js";
+import e from "../../components/TextInput/textInput.module.css";
 import { cn as c } from "../../utils/cn/cn.es.js";
 import { Button as E } from "../Button/Button.es.js";
 import { Icon as w } from "../Icon/Icon.es.js";