tcce-design-system 0.1.19 → 0.1.20

package/dist/tcce-design-system-components.d.ts

@@ -1170,6 +1170,7 @@ declare interface SpinnerProps {
 export declare interface Step {
     id: string | number;
     label?: string;
+    content?: React.ReactNode | string;
 }
 
 /**

package/dist/tcce-design-system-components.js

@@ -10722,7 +10722,7 @@ function jv(e) {
 const rn = {
   sm: {
     circle: "2rem",
-    fontSize: N[16],
+    fontSize: N[14],
     line: "2px"
   },
   md: {
@@ -10732,7 +10732,7 @@ const rn = {
   },
   lg: {
     circle: "3.25rem",
-    fontSize: N[24],
+    fontSize: N[20],
     line: "3px"
   }
 }, sv = T.div`
@@ -10810,7 +10810,8 @@ const rn = {
     position: absolute;
     ${N[14]}
     font-weight: 500;
-    color: var(--color-main-blue-primary);
+    color: var(--color-main-white);
+    background-color: var(--color-main-blue-primary);
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
     white-space: nowrap;
@@ -10818,11 +10819,23 @@ const rn = {
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: 10;
+    box-shadow: var(--shadow-black-button);
 
-    right: calc(100%);
+    right: calc(100% + 0.75rem);
     top: 50%;
     transform: translateY(-50%);
 
+    /* Arrow pointing to the circle */
+    &::after {
+        content: '';
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 6px solid transparent;
+        border-left-color: var(--color-main-blue-primary);
+    }
+
     ${Pc}:hover & {
         opacity: 1;
     }
@@ -10856,7 +10869,7 @@ const rn = {
             l && (h.key === "Enter" || h.key === " ") && (h.preventDefault(), i(c));
           },
           children: [
-            c + 1,
+            a.content ?? c + 1,
             a.label && n === "vertical" && /* @__PURE__ */ m(uv, { children: a.label })
           ]
         }

package/dist/tcce-design-system-components.umd.cjs

@@ -1790,7 +1790,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pn]+=1);const vr={80:x`
     @media (min-width: 1200px) {
         margin-left: 5rem;
     }
-`,Uy=({children:e,navigationConfig:t,userRoles:n=[],activePath:r,user:o,hasNotifications:s=!1,notificationCount:i,onNotificationClick:a,onUserProfileClick:c,onNavigate:d,onLogout:u,userMenuItems:l=[],contentClassName:h,logoImgCollapsed:m,logoImgExpanded:g})=>p.jsxs(_y,{children:[p.jsx(Qo,{navigationConfig:t,userRoles:n,activePath:r,logoImgCollapsed:m,logoImgExpanded:g,onNavigate:d}),p.jsx(oi,{user:o,hasNotifications:s,notificationCount:i,onNotificationClick:a,onUserProfileClick:c,onLogout:u,userMenuItems:l}),p.jsx(Hy,{className:h,children:e})]}),Wy=e=>p.jsx(gc,{children:p.jsx(Uy,{...e})});function Ky(e,t,n){let r=`${e}=${encodeURIComponent(t)}; path=/; SameSite=Strict; Secure`;if(n){const o=new Date(Date.now()+n*864e5).toUTCString();r+=`; expires=${o}`}document.cookie=r}function Yy(e){return document.cookie.split("; ").reduce((t,n)=>{const r=n.split("=");return r[0]===e?decodeURIComponent(r[1]):t},"")}function Gy(e){document.cookie=`${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`}const an={sm:{circle:"2rem",fontSize:I[16],line:"2px"},md:{circle:"2.5rem",fontSize:I[18],line:"2px"},lg:{circle:"3.25rem",fontSize:I[24],line:"3px"}},Xy=C.div`
+`,Uy=({children:e,navigationConfig:t,userRoles:n=[],activePath:r,user:o,hasNotifications:s=!1,notificationCount:i,onNotificationClick:a,onUserProfileClick:c,onNavigate:d,onLogout:u,userMenuItems:l=[],contentClassName:h,logoImgCollapsed:m,logoImgExpanded:g})=>p.jsxs(_y,{children:[p.jsx(Qo,{navigationConfig:t,userRoles:n,activePath:r,logoImgCollapsed:m,logoImgExpanded:g,onNavigate:d}),p.jsx(oi,{user:o,hasNotifications:s,notificationCount:i,onNotificationClick:a,onUserProfileClick:c,onLogout:u,userMenuItems:l}),p.jsx(Hy,{className:h,children:e})]}),Wy=e=>p.jsx(gc,{children:p.jsx(Uy,{...e})});function Ky(e,t,n){let r=`${e}=${encodeURIComponent(t)}; path=/; SameSite=Strict; Secure`;if(n){const o=new Date(Date.now()+n*864e5).toUTCString();r+=`; expires=${o}`}document.cookie=r}function Yy(e){return document.cookie.split("; ").reduce((t,n)=>{const r=n.split("=");return r[0]===e?decodeURIComponent(r[1]):t},"")}function Gy(e){document.cookie=`${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`}const an={sm:{circle:"2rem",fontSize:I[14],line:"2px"},md:{circle:"2.5rem",fontSize:I[18],line:"2px"},lg:{circle:"3.25rem",fontSize:I[20],line:"3px"}},Xy=C.div`
     display: flex;
     width: 100%;
 `,qy=C.div`
@@ -1865,7 +1865,8 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pn]+=1);const vr={80:x`
     position: absolute;
     ${I[14]}
     font-weight: 500;
-    color: var(--color-main-blue-primary);
+    color: var(--color-main-white);
+    background-color: var(--color-main-blue-primary);
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
     white-space: nowrap;
@@ -1873,12 +1874,24 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pn]+=1);const vr={80:x`
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: 10;
+    box-shadow: var(--shadow-black-button);
 
-    right: calc(100%);
+    right: calc(100% + 0.75rem);
     top: 50%;
     transform: translateY(-50%);
 
+    /* Arrow pointing to the circle */
+    &::after {
+        content: '';
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 6px solid transparent;
+        border-left-color: var(--color-main-blue-primary);
+    }
+
     ${Fc}:hover & {
         opacity: 1;
     }
-`,ev=({steps:e,currentStep:t,orientation:n="horizontal",size:r="md",onStepClick:o,className:s})=>{const i=a=>{o?.(a)};return p.jsx(Xy,{$orientation:n,className:s,children:p.jsx(qy,{$orientation:n,children:e.map((a,c)=>{const d=c===t,u=c<t,l=o!=null;return p.jsxs(f.Fragment,{children:[p.jsx(Zy,{$orientation:n,children:p.jsxs(Fc,{$isActive:d,$isCompleted:u,$size:r,$isClickable:l,onClick:()=>l&&i(c),role:l?"button":void 0,tabIndex:l?0:void 0,"aria-current":d?"step":void 0,"aria-label":a.label,onKeyDown:h=>{l&&(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),i(c))},children:[c+1,a.label&&n==="vertical"&&p.jsx(Qy,{children:a.label})]})}),c<e.length-1&&p.jsx(Jy,{$isCompleted:u,$orientation:n,$size:r})]},a.id)})})})};T.ALLOWED_INPUT_TYPES=ql,T.Aside=wc,T.Badge=Qm,T.BaseInput=zo,T.BrandLogo=Sc,T.Button=Oo,T.ButtonSpinner=Yl,T.Card=Fg,T.CardBody=_g,T.CardFooter=Ug,T.CardHeader=zg,T.Checkbox=Zn,T.CheckboxInput=Ho,T.CheckboxLabel=oc,T.CloseOpenButton=Tc,T.Dialog=hc,T.DialogBody=pc,T.DialogFooter=mc,T.DialogHeader=fc,T.Divider=tg,T.ErrorMessage=jo,T.FormField=J0,T.FullScreenSpinner=Hm,T.Header=oi,T.HeadingBold=An,T.HeadingRegular=nu,T.Icon=W,T.IconWrapperStyles=qn,T.InfoLabel=rg,T.Label=Gn,T.Layout=Wy,T.Link=Dc,T.LinkDisabledStyles=Pc,T.LinkSizeStyles=Ac,T.LinkVariantStyles=Ec,T.MobileOpenBtn=kc,T.Nav=Cc,T.Overlay=bc,T.PasswordInput=tc,T.PinInput=Uo,T.PinInputGroup=Wo,T.RadioInput=Go,T.RadioInputDot=Ko,T.RadioInputLabel=Yo,T.SearchInput=rc,T.SectionSpinner=Wm,T.SelectInput=Ro,T.Sidebar=Qo,T.SidebarContext=qo,T.SidebarHeader=xc,T.SidebarProvider=gc,T.Spinner=Kn,T.Stepper=ev,T.Table=Bc,T.TableCell=ri,T.TableHeaderCell=ni,T.TermsAndConditions=sy,T.Text=We,T.TextAreaInput=_o,T.ToastProvider=Vg,T.baseContentTableStyles=ei,T.baseFieldStyles=ut,T.baseInputStyles=Xn,T.baseTableCellsSizes=ft,T.bodyTextStyles=I,T.createFieldConfig=Zg,T.createInputRefs=lc,T.deleteCookie=Gy,T.disabledStyles=Ze,T.errorStyles=ht,T.flushedStyles=Jl,T.getCookie=Yy,T.getPropsForInputType=Jg,T.handleDigitChange=ic,T.handleKeyDown=sc,T.handlePaste=ac,T.hasPermission=Jo,T.headingBoldStyles=vr,T.headingRegularStyles=Zi,T.isAllowedInputType=Zl,T.normalizeFieldTypes=qe,T.normalizeSelectOptions=qg,T.overlayAnimation=Xo,T.setCookie=Ky,T.sizeStyles=sn,T.slideAnimation=Q0,T.smartAnimation=dc,T.submenuAnimationTopDown=uc,T.tableHoverMixin=Mc,T.tableIconContainerStyles=ti,T.tableResponsiveMixin=Vc,T.tableVariants=$c,T.toast=wg,T.useSidebar=Zo,T.validateCode=H0,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})}));
+`,ev=({steps:e,currentStep:t,orientation:n="horizontal",size:r="md",onStepClick:o,className:s})=>{const i=a=>{o?.(a)};return p.jsx(Xy,{$orientation:n,className:s,children:p.jsx(qy,{$orientation:n,children:e.map((a,c)=>{const d=c===t,u=c<t,l=o!=null;return p.jsxs(f.Fragment,{children:[p.jsx(Zy,{$orientation:n,children:p.jsxs(Fc,{$isActive:d,$isCompleted:u,$size:r,$isClickable:l,onClick:()=>l&&i(c),role:l?"button":void 0,tabIndex:l?0:void 0,"aria-current":d?"step":void 0,"aria-label":a.label,onKeyDown:h=>{l&&(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),i(c))},children:[a.content??c+1,a.label&&n==="vertical"&&p.jsx(Qy,{children:a.label})]})}),c<e.length-1&&p.jsx(Jy,{$isCompleted:u,$orientation:n,$size:r})]},a.id)})})})};T.ALLOWED_INPUT_TYPES=ql,T.Aside=wc,T.Badge=Qm,T.BaseInput=zo,T.BrandLogo=Sc,T.Button=Oo,T.ButtonSpinner=Yl,T.Card=Fg,T.CardBody=_g,T.CardFooter=Ug,T.CardHeader=zg,T.Checkbox=Zn,T.CheckboxInput=Ho,T.CheckboxLabel=oc,T.CloseOpenButton=Tc,T.Dialog=hc,T.DialogBody=pc,T.DialogFooter=mc,T.DialogHeader=fc,T.Divider=tg,T.ErrorMessage=jo,T.FormField=J0,T.FullScreenSpinner=Hm,T.Header=oi,T.HeadingBold=An,T.HeadingRegular=nu,T.Icon=W,T.IconWrapperStyles=qn,T.InfoLabel=rg,T.Label=Gn,T.Layout=Wy,T.Link=Dc,T.LinkDisabledStyles=Pc,T.LinkSizeStyles=Ac,T.LinkVariantStyles=Ec,T.MobileOpenBtn=kc,T.Nav=Cc,T.Overlay=bc,T.PasswordInput=tc,T.PinInput=Uo,T.PinInputGroup=Wo,T.RadioInput=Go,T.RadioInputDot=Ko,T.RadioInputLabel=Yo,T.SearchInput=rc,T.SectionSpinner=Wm,T.SelectInput=Ro,T.Sidebar=Qo,T.SidebarContext=qo,T.SidebarHeader=xc,T.SidebarProvider=gc,T.Spinner=Kn,T.Stepper=ev,T.Table=Bc,T.TableCell=ri,T.TableHeaderCell=ni,T.TermsAndConditions=sy,T.Text=We,T.TextAreaInput=_o,T.ToastProvider=Vg,T.baseContentTableStyles=ei,T.baseFieldStyles=ut,T.baseInputStyles=Xn,T.baseTableCellsSizes=ft,T.bodyTextStyles=I,T.createFieldConfig=Zg,T.createInputRefs=lc,T.deleteCookie=Gy,T.disabledStyles=Ze,T.errorStyles=ht,T.flushedStyles=Jl,T.getCookie=Yy,T.getPropsForInputType=Jg,T.handleDigitChange=ic,T.handleKeyDown=sc,T.handlePaste=ac,T.hasPermission=Jo,T.headingBoldStyles=vr,T.headingRegularStyles=Zi,T.isAllowedInputType=Zl,T.normalizeFieldTypes=qe,T.normalizeSelectOptions=qg,T.overlayAnimation=Xo,T.setCookie=Ky,T.sizeStyles=sn,T.slideAnimation=Q0,T.smartAnimation=dc,T.submenuAnimationTopDown=uc,T.tableHoverMixin=Mc,T.tableIconContainerStyles=ti,T.tableResponsiveMixin=Vc,T.tableVariants=$c,T.toast=wg,T.useSidebar=Zo,T.validateCode=H0,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.1.19",
+    "version": "0.1.20",
     "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
     "author": "BizAppsTotal <bizapps@tcce.biz>",
     "type": "module",