aravint-ui-navigation 1.0.38 → 1.0.40

package/Readme.md

@@ -99,4 +99,122 @@ To customize breakpoint values, edit the `@media` blocks inside the component's
 
 - `marginBottom: -1` on the active tab intentionally overlaps the tab bar's bottom border so the active tab visually "merges" into its content panel. This depends on `alignItems: "flex-end"` on the tab list — don't remove that when customizing.
 - The phone-only `flex-wrap: wrap` sets `overflow-x: visible` to explicitly undo the tablet breakpoint's `overflow-x: auto`, since media query rules don't reset each other automatically.
-- If you have a large number of tabs, consider whether wrapping (phone behavior) or horizontal scroll suits your use case better, and adjust the `480px` block accordingly.
+- If you have a large number of tabs, consider whether wrapping (phone behavior) or horizontal scroll suits your use case better, and adjust the `480px` block accordingly.
+
+
+
+----------------------------------------------------------------
+
+
+# Stepper Component
+
+A reusable workflow stepper component for displaying progress through a series of steps.
+
+## Installation
+
+Install the package:
+
+```bash
+npm install @digitus-fci-oa/navigation
+```
+
+## Import Styles
+
+Import the stylesheet once in your application's global CSS file (e.g. `index.css` or `App.css`).
+
+```css
+@import "@digitus-fci-oa/navigation/dist/navigation.css";
+```
+
+## Usage
+
+```tsx
+import React from "react";
+import { Stepper } from "@digitus-fci-oa/navigation";
+
+const steps = [
+  { id: "1", title: "Initiated", date: "21 May 2026", time: "09:40 AM" },
+  { id: "2", title: "RoHS Approval", date: "21 May 2026", time: "09:40 AM" },
+  { id: "3", title: "Planner Approval", date: "21 May 2026", time: "09:40 AM" },
+  { id: "4", title: "Manufacturing Head Approval" },
+  { id: "5", title: "Engineering Head Approval" },
+];
+
+export default function ApprovalTracker() {
+  return (
+    <Stepper
+      steps={steps}
+      currentStep={4}
+    />
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `StepItem[]` | **Required** | List of workflow steps. |
+| `currentStep` | `number` | **Required** | Current active step (starts from `1`). |
+| `completedColor` | `string` | `#059669` | Color of completed steps. |
+| `activeColor` | `string` | `#059669` | Color of the active step. |
+| `pendingColor` | `string` | `#9ca3af` | Color of pending steps. |
+| `lineColor` | `string` | `#e5e7eb` | Color of the connector line. |
+| `showTime` | `boolean` | `true` | Shows or hides the time below each step. |
+| `orientation` | `"horizontal" \| "vertical" \| "responsive"` | `"responsive"` | Stepper layout. |
+
+---
+
+## StepItem
+
+```ts
+interface StepItem {
+  id: string;
+  title: string;
+  date?: string;
+  time?: string;
+}
+```
+
+---
+
+## Example
+
+```tsx
+const steps = [
+  {
+    id: "1",
+    title: "Initiated",
+    date: "21 May 2026",
+    time: "09:40 AM",
+  },
+  {
+    id: "2",
+    title: "RoHS Approval",
+    date: "21 May 2026",
+    time: "09:40 AM",
+  },
+  {
+    id: "3",
+    title: "Planner Approval",
+    date: "21 May 2026",
+    time: "09:40 AM",
+  },
+  {
+    id: "4",
+    title: "Manufacturing Head Approval",
+  },
+];
+```
+
+---
+
+## Notes
+
+- `currentStep` is **1-based**.
+- The first step is treated as the starting point.
+- Completed steps display a check icon.
+- `date` and `time` are optional for each step.
+- When `showTime={false}`, only the date is displayed.

package/dist/navigation.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react");function E(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,i.get?i:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const k=E(g),L=({tabs:t,defaultValue:a,value:s,onValueChange:i,className:n="",tabListClassName:c="",tabButtonClassName:h="",contentClassName:d="",showTabNumbers:o=!0,showContent:l=!0,animated:m=!0})=>{var N;const p=s!==void 0,[_,w]=g.useState(a||((N=t[0])==null?void 0:N.id)||""),u=p?s:_,y=r=>{p||w(r),i==null||i(r)},v=t.find(r=>r.id===u),j={display:"flex",alignItems:"flex-end",borderBottom:"1px solid #059669",position:"sticky",top:0,zIndex:100,flexShrink:0},S={display:"flex",alignItems:"center",fontFamily:"inherit",background:"transparent",cursor:"pointer",outline:"none",transition:"all .2s ease",position:"relative"},x={background:"#E8F7F1",color:"#059669",fontWeight:700,borderTop:"3px solid #059669",borderLeft:"1px solid #059669",borderRight:"1px solid #059669",borderBottom:"1px solid #E8F7F1",borderTopLeftRadius:8,borderTopRightRadius:8,marginBottom:-1,zIndex:2},f={background:"transparent",color:"#2D3748",borderTop:"3px solid transparent",borderLeft:"1px solid transparent",borderRight:"1px solid transparent",borderBottom:"1px solid transparent",borderTopLeftRadius:8,borderTopRightRadius:8},b={background:"#ECFDF5",color:"#059669",fontWeight:700,border:"1px solid #059669"},R={background:"#FFFFFF",color:"#1F2937",fontWeight:"500",border:"1px solid #1F2937"},B={background:"#FFFFFF",border:"1px solid #D9E1E7",borderTop:"none",borderBottomLeftRadius:12,borderBottomRightRadius:12,boxShadow:"0 2px 6px rgba(0,0,0,.05)",transition:m?"opacity .2s ease":void 0,opacity:1,flex:1,overflowY:"auto",minHeight:0};return e.jsxs("div",{className:n,style:{display:"flex",flexDirection:"column",width:"100%",height:"100%",minHeight:0,overflow:"hidden"},children:[e.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react");function E(s){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>s[t]})}}return a.default=s,Object.freeze(a)}const k=E(f),D=({tabs:s,defaultValue:a,value:t,onValueChange:r,className:i="",tabListClassName:n="",tabButtonClassName:b="",contentClassName:p="",showTabNumbers:o=!0,showContent:c=!0,animated:h=!0})=>{var F;const d=t!==void 0,[_,y]=f.useState(a||((F=s[0])==null?void 0:F.id)||""),g=d?t:_,j=l=>{d||y(l),r==null||r(l)},v=s.find(l=>l.id===g),w={display:"flex",alignItems:"flex-end",borderBottom:"1px solid #059669",position:"sticky",top:0,zIndex:100,flexShrink:0},N={display:"flex",alignItems:"center",fontFamily:"inherit",background:"transparent",cursor:"pointer",outline:"none",transition:"all .2s ease",position:"relative"},x={background:"#E8F7F1",color:"#059669",fontWeight:700,borderTop:"3px solid #059669",borderLeft:"1px solid #059669",borderRight:"1px solid #059669",borderBottom:"1px solid #E8F7F1",borderTopLeftRadius:8,borderTopRightRadius:8,marginBottom:-1,zIndex:2},u={background:"transparent",color:"#2D3748",borderTop:"3px solid transparent",borderLeft:"1px solid transparent",borderRight:"1px solid transparent",borderBottom:"1px solid transparent",borderTopLeftRadius:8,borderTopRightRadius:8},m={background:"#ECFDF5",color:"#059669",fontWeight:700,border:"1px solid #059669"},R={background:"#FFFFFF",color:"#1F2937",fontWeight:"500",border:"1px solid #1F2937"},z={background:"#FFFFFF",border:"1px solid #D9E1E7",borderTop:"none",borderBottomLeftRadius:12,borderBottomRightRadius:12,boxShadow:"0 2px 6px rgba(0,0,0,.05)",transition:h?"opacity .2s ease":void 0,opacity:1,flex:1,overflowY:"auto",minHeight:0};return e.jsxs("div",{className:i,style:{display:"flex",flexDirection:"column",width:"100%",height:"100%",minHeight:0,overflow:"hidden"},children:[e.jsx("style",{children:`
         .ctabs-list {
           padding: 0 10px;
           gap: 0px;
@@ -72,4 +72,4 @@
             font-size: 10px;
           }
         }
-      `}),e.jsx("div",{style:j,className:`ctabs-list ${c}`,children:t.map((r,z)=>{const F=u===r.id;return e.jsxs("button",{role:"tab","aria-selected":F,disabled:r.disabled,onClick:()=>!r.disabled&&y(r.id),style:{...S,...F?x:f,opacity:r.disabled?.5:1,cursor:r.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${h}`,children:[o&&e.jsx("span",{className:"ctabs-badge",style:F?b:R,children:z+1}),r.icon,e.jsx("span",{className:"ctabs-label",children:r.label})]},r.id)})}),l&&v&&e.jsx("div",{style:B,className:d,children:v.content})]})},M=t=>k.createElement("svg",{viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},k.createElement("path",{d:"M2 6.2L4.6 8.8L10 3",stroke:"#ffffff",strokeWidth:1.6,strokeLinecap:"round",strokeLinejoin:"round"})),T=g.memo(({computed:t,showTime:a})=>{const{step:s,index:i,status:n}=t,c=["rs-stepper__circle",n==="completed"?"rs-stepper__circle--completed":"",n==="active"?"rs-stepper__circle--active":""].filter(Boolean).join(" "),h=["rs-stepper__title",n==="pending"?"rs-stepper__title--pending":"",n==="active"?"rs-stepper__title--active":""].filter(Boolean).join(" "),d=i!==0;return e.jsxs("div",{className:"rs-stepper__step",children:[e.jsxs("div",{className:"rs-stepper__circle-wrap",children:[e.jsx("div",{className:c,children:d?i:null}),n==="completed"&&e.jsx("span",{className:"rs-stepper__check","aria-hidden":"true",children:e.jsx(M,{})})]}),e.jsx("div",{className:h,children:s.title}),s.date&&e.jsx("div",{className:"rs-stepper__date",children:s.date}),a&&s.time&&e.jsx("div",{className:"rs-stepper__time",children:s.time})]})});T.displayName="StepCircle";const I=({steps:t,currentStep:a,completedColor:s="#059669",pendingColor:i="#9ca3af",activeColor:n="#059669",lineColor:c="#e5e7eb",showTime:h=!0,orientation:d="responsive"})=>{const o=t.length,l=a>o,m=Math.max(1,Math.min(a,o)),p=l?Math.max(0,o-1):Math.max(0,Math.min(o-1,m-1)),_=g.useMemo(()=>t.map((x,f)=>{let b="pending";return l||f<p?b="completed":f===p&&(b="active"),{step:x,index:f,status:b}}),[t,p,l]),w=o>0?100/o/2:0,u=o>1?l?100:p/(o-1)*100:0,y=l||m>1?s:c,v=l||m>o?s:c,j={"--rs-completed-color":s,"--rs-pending-color":i,"--rs-active-color":n,"--rs-line-color":c,"--rs-half-step":`${w}%`,"--rs-progress":`${u}%`,"--rs-left-side-color":y,"--rs-right-side-color":v};if(o===0)return null;const S=d==="vertical"?"rs-stepper--vertical":d==="horizontal"?"rs-stepper--horizontal":"rs-stepper--responsive";return e.jsxs("div",{className:"border border-[#E5E7EB] py-2 mx-2 rounded-lg bg-[#F9FAFB] shadow-[0px_2px_4px_-1px_#00000008,0px_4px_6px_-1px_#0000000D]",children:[e.jsx("div",{className:"pl-2 pt-2 pb-3 text-[14px] font-bold",children:"Workflow Progresss"}),e.jsx("div",{className:`rs-stepper ${S}`,style:j,children:e.jsx("div",{className:"rs-stepper__scroll",children:e.jsxs("div",{className:"rs-stepper__row",children:[e.jsx("div",{className:"rs-stepper__track",children:e.jsx("div",{className:"rs-stepper__progress"})}),_.map(x=>e.jsx(T,{computed:x,showTime:h},x.step.id))]})})})]})},C=g.memo(I);exports.CustomTabs=L;exports.Stepper=C;
+      `}),e.jsx("div",{style:w,className:`ctabs-list ${n}`,children:s.map((l,B)=>{const S=g===l.id;return e.jsxs("button",{role:"tab","aria-selected":S,disabled:l.disabled,onClick:()=>!l.disabled&&j(l.id),style:{...N,...S?x:u,opacity:l.disabled?.5:1,cursor:l.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${b}`,children:[o&&e.jsx("span",{className:"ctabs-badge",style:S?m:R,children:B+1}),l.icon,e.jsx("span",{className:"ctabs-label",children:l.label})]},l.id)})}),c&&v&&e.jsx("div",{style:z,className:p,children:v.content})]})},L=s=>k.createElement("svg",{viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s},k.createElement("path",{d:"M2 6.2L4.6 8.8L10 3",stroke:"#ffffff",strokeWidth:1.6,strokeLinecap:"round",strokeLinejoin:"round"})),T=f.memo(({computed:s,showTime:a})=>{const{step:t,index:r,status:i}=s,n=["rs-stepper__circle",i==="completed"?"rs-stepper__circle--completed":"",i==="active"?"rs-stepper__circle--active":""].filter(Boolean).join(" "),b=["rs-stepper__title",i==="pending"?"rs-stepper__title--pending":"",i==="active"?"rs-stepper__title--active":""].filter(Boolean).join(" "),p=r!==0;return e.jsxs("div",{className:"rs-stepper__step",children:[e.jsxs("div",{className:"rs-stepper__circle-wrap",children:[e.jsx("div",{className:n,children:p?r:null}),i==="completed"&&e.jsx("span",{className:"rs-stepper__check","aria-hidden":"true",children:e.jsx(L,{})})]}),e.jsx("div",{className:b,children:t.title}),t.date&&e.jsx("div",{className:"rs-stepper__date",children:t.date}),a&&t.time&&e.jsx("div",{className:"rs-stepper__time",children:t.time})]})});T.displayName="StepCircle";const C=({steps:s,currentStep:a,completedColor:t="#059669",pendingColor:r="#9ca3af",activeColor:i="#059669",lineColor:n="#e5e7eb",showTime:b=!0,orientation:p="responsive"})=>{const o=s.length,c=a>o,h=Math.max(1,Math.min(a,o)),d=c?Math.max(0,o-1):Math.max(0,Math.min(o-1,h-1)),_=f.useMemo(()=>s.map((x,u)=>{let m="pending";return c||u<d?m="completed":u===d&&(m="active"),{step:x,index:u,status:m}}),[s,d,c]),y=o>0?100/o/2:0,g=o>1?c?100:d/(o-1)*100:0,j=c||h>1?t:n,v=c||h>o?t:n,w={"--rs-completed-color":t,"--rs-pending-color":r,"--rs-active-color":i,"--rs-line-color":n,"--rs-half-step":`${y}%`,"--rs-progress":`${g}%`,"--rs-left-side-color":j,"--rs-right-side-color":v};if(o===0)return null;const N=p==="vertical"?"rs-stepper--vertical":p==="horizontal"?"rs-stepper--horizontal":"rs-stepper--responsive";return e.jsxs("div",{className:"border border-[#E5E7EB] py-2 mx-2 rounded-lg bg-[#F9FAFB] shadow-[0px_2px_4px_-1px_#00000008,0px_4px_6px_-1px_#0000000D]",children:[e.jsx("div",{className:"pl-2 pt-2 pb-3 text-[14px] font-bold",children:"Workflow Progress"}),e.jsx("div",{className:`rs-stepper ${N}`,style:w,children:e.jsx("div",{className:"rs-stepper__scroll",children:e.jsxs("div",{className:"rs-stepper__row",children:[e.jsx("div",{className:"rs-stepper__track",children:e.jsx("div",{className:"rs-stepper__progress"})}),_.map(x=>e.jsx(T,{computed:x,showTime:b},x.step.id))]})})})]})},M=f.memo(C),I=({rows:s,className:a="mt-2 mx-2"})=>e.jsx("div",{className:`summary-detail-card ${a}`.trim(),children:s.map((t,r)=>e.jsx("div",{className:"summary-detail-card__row",children:t.map((i,n)=>e.jsxs("div",{className:"summary-detail-card__field",style:{"--dc-span":i.span??1},children:[e.jsx("p",{className:"summary-detail-card__label",children:i.label}),e.jsx("p",{className:`summary-detail-card__value${i.size==="lg"?" summary-detail-card__value--lg":""}`,children:i.value})]},n))},r))}),$=({title:s,description:a,icon:t,className:r=""})=>e.jsxs("div",{className:`flex flex-col items-center justify-center py-4 px-4 text-center ${r}`,children:[t&&e.jsx("div",{className:"mb-2",children:t}),e.jsx("div",{className:"text-[14px] font-semibold text-[#34343F]",children:s}),e.jsx("p",{className:"mt-2 max-w-[650px] text-[12px] leading-2 text-[#A19D9D]",children:a})]});exports.CustomTabs=D;exports.EmptyState=$;exports.Stepper=M;exports.SummaryDetailsCard=I;

package/dist/navigation.css

@@ -1 +1 @@
-.rs-stepper{--rs-completed-color: #059669;--rs-pending-color: #9ca3af;--rs-active-color: #059669;--rs-line-color: #e5e7eb;--rs-half-step: 0%;--rs-progress: 0%;--rs-left-side-color: var(--rs-line-color);--rs-right-side-color: var(--rs-line-color);position:relative;width:100%;box-sizing:border-box}.rs-stepper *{box-sizing:border-box}.rs-stepper__scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.rs-stepper__row{position:relative;display:flex;align-items:flex-start;width:max-content;min-width:100%}.rs-stepper__track{position:absolute;top:26px;left:var(--rs-half-step);right:var(--rs-half-step);height:3px;background-color:transparent;transform:translateY(-1px);z-index:0}.rs-stepper__track:before{content:"";position:absolute;top:0;left:calc(-1 * (var(--rs-half-step)));right:calc(-1 * (var(--rs-half-step)));height:100%;background-image:linear-gradient(to right,var(--rs-left-side-color) 0,var(--rs-left-side-color) calc(var(--rs-half-step)),var(--rs-line-color) calc(var(--rs-half-step)),var(--rs-line-color) calc(100% - (var(--rs-half-step))),var(--rs-right-side-color) calc(100% - (var(--rs-half-step))),var(--rs-right-side-color) 100%);z-index:0}.rs-stepper__progress{position:absolute;top:0;left:0;width:var(--rs-progress);height:100%;background-color:var(--rs-completed-color);z-index:1;transition:width .3s ease,height .3s ease}.rs-stepper--vertical .rs-stepper__progress{position:relative;left:auto;width:100%}.rs-stepper__step{position:relative;z-index:1;flex:1 1 0;min-width:120px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0}.rs-stepper__circle-wrap{position:relative;width:48px;height:48px;flex-shrink:0}.rs-stepper__circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background-color:#fff;border:2px solid var(--rs-line-color);color:var(--rs-pending-color);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease}.rs-stepper__circle--completed{background-color:var(--rs-completed-color);border-color:var(--rs-completed-color);color:#fff}.rs-stepper__circle--active{background-color:#fff;border-color:var(--rs-active-color);color:var(--rs-active-color);box-shadow:0 0 0 4px #d4e3e0}.rs-stepper__check{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background-color:var(--rs-completed-color);border:2px solid #ffffff;display:flex;align-items:center;justify-content:center}.rs-stepper__check svg{width:10px;height:10px;display:block}.rs-stepper__title{margin-top:12px;font-size:12px;font-weight:700;line-height:1.3;color:#1e293b;max-width:140px}.rs-stepper__title--pending{color:var(--rs-pending-color);font-weight:600}.rs-stepper__title--active{color:var(--rs-active-color)}.rs-stepper__date,.rs-stepper__time{margin-top:2px;font-size:10px;line-height:1.3;color:#6b7280}@media(max-width:640px){.rs-stepper__step{min-width:96px}.rs-stepper__circle-wrap,.rs-stepper__circle{width:44px;height:44px}.rs-stepper__track{top:22px}.rs-stepper__circle{font-size:15px}.rs-stepper__title{font-size:12.5px;max-width:110px}.rs-stepper__date,.rs-stepper__time{font-size:11px}}.rs-stepper--vertical .rs-stepper__scroll{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.rs-stepper--vertical .rs-stepper__row{flex-direction:column;align-items:flex-start;padding-left:2px;min-width:0;width:fit-content}.rs-stepper--vertical .rs-stepper__track{top:var(--rs-half-step);bottom:var(--rs-half-step);left:28px;right:auto;width:2px;height:auto;transform:translate(-1px)}.rs-stepper--vertical .rs-stepper__track:before{content:"";position:absolute;left:0;top:calc(-1 * (var(--rs-half-step) / 2));bottom:calc(-1 * (var(--rs-half-step) / 2));width:100%;background-image:linear-gradient(to bottom,var(--rs-left-side-color) 0,var(--rs-left-side-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) 100%);z-index:0}.rs-stepper--vertical .rs-stepper__progress{width:100%;height:var(--rs-progress)}.rs-stepper--vertical .rs-stepper__step{flex-direction:row;align-items:flex-start;text-align:left;width:100%;min-width:0;padding:0 0 32px}.rs-stepper--vertical .rs-stepper__step:last-child{padding-bottom:0}.rs-stepper--vertical .rs-stepper__title,.rs-stepper--vertical .rs-stepper__date,.rs-stepper--vertical .rs-stepper__time{margin-top:0;text-align:left;max-width:none}.rs-stepper--vertical .rs-stepper__title{margin-left:16px;padding-top:6px}.rs-stepper--vertical .rs-stepper__date,.rs-stepper--vertical .rs-stepper__time{margin-left:16px}@media(max-width:640px){.rs-stepper--vertical .rs-stepper__track{left:22px}.rs-stepper--responsive .rs-stepper__scroll,.rs-stepper--vertical .rs-stepper__scroll{max-height:min(70dvh,24rem);overflow-y:auto;overflow-x:hidden;padding-right:.25rem}}@media(max-width:640px){.rs-stepper--responsive .rs-stepper__row{flex-direction:column;align-items:flex-start;min-width:0;width:fit-content;padding-left:2px}.rs-stepper--responsive .rs-stepper__track{top:var(--rs-half-step);bottom:var(--rs-half-step);left:24px;right:auto;width:2px;height:auto;transform:translate(-1px)}.rs-stepper--responsive .rs-stepper__track:before{content:"";position:absolute;left:0;top:calc(-1 * (var(--rs-half-step) / 2));bottom:calc(-1 * (var(--rs-half-step) / 2));width:100%;background-image:linear-gradient(to bottom,var(--rs-left-side-color) 0,var(--rs-left-side-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) 100%);z-index:0}.rs-stepper--responsive .rs-stepper__progress{position:relative;left:auto;width:100%;height:var(--rs-progress)}.rs-stepper--responsive .rs-stepper__step{flex-direction:row;align-items:flex-start;text-align:left;width:100%;min-width:0;padding:0 0 32px}.rs-stepper--responsive .rs-stepper__step:last-child{padding-bottom:0}.rs-stepper--responsive .rs-stepper__title,.rs-stepper--responsive .rs-stepper__date,.rs-stepper--responsive .rs-stepper__time{margin-top:0;text-align:left;max-width:none}.rs-stepper--responsive .rs-stepper__title{margin-left:16px;padding-top:4px}.rs-stepper--responsive .rs-stepper__date,.rs-stepper--responsive .rs-stepper__time{margin-left:16px}}
+.rs-stepper{--rs-completed-color: #059669;--rs-pending-color: #9ca3af;--rs-active-color: #059669;--rs-line-color: #e5e7eb;--rs-half-step: 0%;--rs-progress: 0%;--rs-left-side-color: var(--rs-line-color);--rs-right-side-color: var(--rs-line-color);position:relative;width:100%;box-sizing:border-box}.rs-stepper *{box-sizing:border-box}.rs-stepper__scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.rs-stepper__row{position:relative;display:flex;align-items:flex-start;width:max-content;min-width:100%}.rs-stepper__track{position:absolute;top:26px;left:var(--rs-half-step);right:var(--rs-half-step);height:3px;background-color:transparent;transform:translateY(-1px);z-index:0}.rs-stepper__track:before{content:"";position:absolute;top:0;left:calc(-1 * (var(--rs-half-step)));right:calc(-1 * (var(--rs-half-step)));height:100%;background-image:linear-gradient(to right,var(--rs-left-side-color) 0,var(--rs-left-side-color) calc(var(--rs-half-step)),var(--rs-line-color) calc(var(--rs-half-step)),var(--rs-line-color) calc(100% - (var(--rs-half-step))),var(--rs-right-side-color) calc(100% - (var(--rs-half-step))),var(--rs-right-side-color) 100%);z-index:0}.rs-stepper__progress{position:absolute;top:0;left:0;width:var(--rs-progress);height:100%;background-color:var(--rs-completed-color);z-index:1;transition:width .3s ease,height .3s ease}.rs-stepper--vertical .rs-stepper__progress{position:relative;left:auto;width:100%}.rs-stepper__step{position:relative;z-index:1;flex:1 1 0;min-width:120px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0}.rs-stepper__circle-wrap{position:relative;width:48px;height:48px;flex-shrink:0}.rs-stepper__circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background-color:#fff;border:2px solid var(--rs-line-color);color:var(--rs-pending-color);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease}.rs-stepper__circle--completed{background-color:var(--rs-completed-color);border-color:var(--rs-completed-color);color:#fff}.rs-stepper__circle--active{background-color:#fff;border-color:var(--rs-active-color);color:var(--rs-active-color);box-shadow:0 0 0 4px #d4e3e0}.rs-stepper__check{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background-color:var(--rs-completed-color);border:2px solid #ffffff;display:flex;align-items:center;justify-content:center}.rs-stepper__check svg{width:10px;height:10px;display:block}.rs-stepper__title{margin-top:12px;font-size:12px;font-weight:700;line-height:1.3;color:#1e293b;max-width:140px}.rs-stepper__title--pending{color:var(--rs-pending-color);font-weight:600}.rs-stepper__title--active{color:var(--rs-active-color)}.rs-stepper__date,.rs-stepper__time{margin-top:2px;font-size:10px;line-height:1.3;color:#6b7280}@media(max-width:640px){.rs-stepper__step{min-width:96px}.rs-stepper__circle-wrap,.rs-stepper__circle{width:44px;height:44px}.rs-stepper__track{top:22px}.rs-stepper__circle{font-size:15px}.rs-stepper__title{font-size:12.5px;max-width:110px}.rs-stepper__date,.rs-stepper__time{font-size:11px}}.rs-stepper--vertical .rs-stepper__scroll{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.rs-stepper--vertical .rs-stepper__row{flex-direction:column;align-items:flex-start;padding-left:2px;min-width:0;width:fit-content}.rs-stepper--vertical .rs-stepper__track{top:var(--rs-half-step);bottom:var(--rs-half-step);left:28px;right:auto;width:2px;height:auto;transform:translate(-1px)}.rs-stepper--vertical .rs-stepper__track:before{content:"";position:absolute;left:0;top:calc(-1 * (var(--rs-half-step) / 2));bottom:calc(-1 * (var(--rs-half-step) / 2));width:100%;background-image:linear-gradient(to bottom,var(--rs-left-side-color) 0,var(--rs-left-side-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) 100%);z-index:0}.rs-stepper--vertical .rs-stepper__progress{width:100%;height:var(--rs-progress)}.rs-stepper--vertical .rs-stepper__step{flex-direction:row;align-items:flex-start;text-align:left;width:100%;min-width:0;padding:0 0 32px}.rs-stepper--vertical .rs-stepper__step:last-child{padding-bottom:0}.rs-stepper--vertical .rs-stepper__title,.rs-stepper--vertical .rs-stepper__date,.rs-stepper--vertical .rs-stepper__time{margin-top:0;text-align:left;max-width:none}.rs-stepper--vertical .rs-stepper__title{margin-left:16px;padding-top:6px}.rs-stepper--vertical .rs-stepper__date,.rs-stepper--vertical .rs-stepper__time{margin-left:16px}@media(max-width:640px){.rs-stepper--vertical .rs-stepper__track{left:22px}.rs-stepper--responsive .rs-stepper__scroll,.rs-stepper--vertical .rs-stepper__scroll{max-height:min(70dvh,24rem);overflow-y:auto;overflow-x:hidden;padding-right:.25rem}}@media(max-width:640px){.rs-stepper--responsive .rs-stepper__row{flex-direction:column;align-items:flex-start;min-width:0;width:fit-content;padding-left:2px}.rs-stepper--responsive .rs-stepper__track{top:var(--rs-half-step);bottom:var(--rs-half-step);left:24px;right:auto;width:2px;height:auto;transform:translate(-1px)}.rs-stepper--responsive .rs-stepper__track:before{content:"";position:absolute;left:0;top:calc(-1 * (var(--rs-half-step) / 2));bottom:calc(-1 * (var(--rs-half-step) / 2));width:100%;background-image:linear-gradient(to bottom,var(--rs-left-side-color) 0,var(--rs-left-side-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(var(--rs-half-step) / 2),var(--rs-line-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) calc(100% - (var(--rs-half-step) / 2)),var(--rs-right-side-color) 100%);z-index:0}.rs-stepper--responsive .rs-stepper__progress{position:relative;left:auto;width:100%;height:var(--rs-progress)}.rs-stepper--responsive .rs-stepper__step{flex-direction:row;align-items:flex-start;text-align:left;width:100%;min-width:0;padding:0 0 32px}.rs-stepper--responsive .rs-stepper__step:last-child{padding-bottom:0}.rs-stepper--responsive .rs-stepper__title,.rs-stepper--responsive .rs-stepper__date,.rs-stepper--responsive .rs-stepper__time{margin-top:0;text-align:left;max-width:none}.rs-stepper--responsive .rs-stepper__title{margin-left:16px;padding-top:4px}.rs-stepper--responsive .rs-stepper__date,.rs-stepper--responsive .rs-stepper__time{margin-left:16px}}.summary-detail-card{--summary-detail-card-border: #E5E7EB;--summary-detail-card-bg: #F9FAFB;--summary-detail-card-label-color: #94a3b8;--summary-detail-card-value-color: #0f172a;--summary-detail-card-radius: .75rem;--summary-detail-card-row-padding-y: 1rem;--summary-detail-card-row-padding-x: 1rem;--summary-detail-card-gap-x: 1.5rem;--summary-detail-card-gap-y: 1rem;border-radius:var(--summary-detail-card-radius);border:1px solid var(--summary-detail-card-border);background:var(--summary-detail-card-bg);box-sizing:border-box}.summary-detail-card *,.summary-detail-card *:before,.summary-detail-card *:after{box-sizing:border-box}.summary-detail-card__row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--summary-detail-card-gap-y) var(--summary-detail-card-gap-x);padding:var(--summary-detail-card-row-padding-y) var(--summary-detail-card-row-padding-x)}.summary-detail-card__row+.summary-detail-card__row{border-top:1px solid var(--summary-detail-card-border)}.summary-detail-card__field{grid-column:span var(--dc-span, 1);min-width:0}.summary-detail-card__label{margin:0;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--summary-detail-card-label-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.summary-detail-card__value{margin:.25rem 0 0;font-size:.875rem;font-weight:700;color:var(--summary-detail-card-value-color);overflow-wrap:break-word}.summary-detail-card__value--lg{font-size:1rem}@media(min-width:640px){.summary-detail-card{--summary-detail-card-row-padding-y: .4rem;--summary-detail-card-row-padding-x: 1rem}.summary-detail-card__label{font-size:11px}.summary-detail-card__value{font-size:13px}.summary-detail-card__value--lg{font-size:.875rem}}@media(max-width:639px){.summary-detail-card__row{grid-template-columns:1fr}.summary-detail-card__field{grid-column:1 / -1}}

package/dist/navigation.es.js

@@ -1,25 +1,25 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as T from "react";
-import { useState as I, memo as B, useMemo as C } from "react";
-const $ = ({
-  tabs: i,
-  defaultValue: d,
-  value: s,
-  onValueChange: a,
-  className: o = "",
+import { useState as C, memo as B, useMemo as D } from "react";
+const W = ({
+  tabs: s,
+  defaultValue: l,
+  value: t,
+  onValueChange: i,
+  className: r = "",
   tabListClassName: n = "",
-  tabButtonClassName: b = "",
-  contentClassName: m = "",
-  showTabNumbers: r = !0,
-  showContent: l = !0,
+  tabButtonClassName: h = "",
+  contentClassName: b = "",
+  showTabNumbers: o = !0,
+  showContent: d = !0,
   animated: f = !0
 }) => {
   var k;
-  const p = s !== void 0, [_, w] = I(
-    d || ((k = i[0]) == null ? void 0 : k.id) || ""
-  ), v = p ? s : _, y = (t) => {
-    p || w(t), a == null || a(t);
-  }, u = i.find((t) => t.id === v), F = {
+  const p = t !== void 0, [_, y] = C(
+    l || ((k = s[0]) == null ? void 0 : k.id) || ""
+  ), u = p ? t : _, w = (a) => {
+    p || y(a), i == null || i(a);
+  }, v = s.find((a) => a.id === u), N = {
     display: "flex",
     alignItems: "flex-end",
     borderBottom: "1px solid #059669",
@@ -36,7 +36,7 @@ const $ = ({
     outline: "none",
     transition: "all .2s ease",
     position: "relative"
-  }, c = {
+  }, m = {
     background: "#E8F7F1",
     color: "#059669",
     fontWeight: 700,
@@ -63,7 +63,7 @@ const $ = ({
     color: "#059669",
     fontWeight: 700,
     border: "1px solid #059669"
-  }, z = {
+  }, R = {
     background: "#FFFFFF",
     color: "#1F2937",
     fontWeight: "500",
@@ -81,10 +81,10 @@ const $ = ({
     overflowY: "auto",
     minHeight: 0
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: o,
+      className: r,
       style: {
         display: "flex",
         flexDirection: "column",
@@ -172,109 +172,149 @@ const $ = ({
         /* @__PURE__ */ e(
           "div",
           {
-            style: F,
+            style: N,
             className: `ctabs-list ${n}`,
-            children: i.map((t, L) => {
-              const N = v === t.id;
-              return /* @__PURE__ */ h(
+            children: s.map((a, L) => {
+              const F = u === a.id;
+              return /* @__PURE__ */ c(
                 "button",
                 {
                   role: "tab",
-                  "aria-selected": N,
-                  disabled: t.disabled,
-                  onClick: () => !t.disabled && y(t.id),
+                  "aria-selected": F,
+                  disabled: a.disabled,
+                  onClick: () => !a.disabled && w(a.id),
                   style: {
                     ...S,
-                    ...N ? c : g,
-                    opacity: t.disabled ? 0.5 : 1,
-                    cursor: t.disabled ? "not-allowed" : "pointer"
+                    ...F ? m : g,
+                    opacity: a.disabled ? 0.5 : 1,
+                    cursor: a.disabled ? "not-allowed" : "pointer"
                   },
-                  className: `ctabs-btn ${b}`,
+                  className: `ctabs-btn ${h}`,
                   children: [
-                    r && /* @__PURE__ */ e(
+                    o && /* @__PURE__ */ e(
                       "span",
                       {
                         className: "ctabs-badge",
-                        style: N ? x : z,
+                        style: F ? x : R,
                         children: L + 1
                       }
                     ),
-                    t.icon,
-                    /* @__PURE__ */ e("span", { className: "ctabs-label", children: t.label })
+                    a.icon,
+                    /* @__PURE__ */ e("span", { className: "ctabs-label", children: a.label })
                   ]
                 },
-                t.id
+                a.id
               );
             })
           }
         ),
-        l && u && /* @__PURE__ */ e("div", { style: E, className: m, children: u.content })
+        d && v && /* @__PURE__ */ e("div", { style: E, className: b, children: v.content })
       ]
     }
   );
-}, M = (i) => /* @__PURE__ */ T.createElement("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i }, /* @__PURE__ */ T.createElement("path", { d: "M2 6.2L4.6 8.8L10 3", stroke: "#ffffff", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })), R = B(({ computed: i, showTime: d }) => {
-  const { step: s, index: a, status: o } = i, n = [
+}, I = (s) => /* @__PURE__ */ T.createElement("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...s }, /* @__PURE__ */ T.createElement("path", { d: "M2 6.2L4.6 8.8L10 3", stroke: "#ffffff", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })), z = B(({ computed: s, showTime: l }) => {
+  const { step: t, index: i, status: r } = s, n = [
     "rs-stepper__circle",
-    o === "completed" ? "rs-stepper__circle--completed" : "",
-    o === "active" ? "rs-stepper__circle--active" : ""
-  ].filter(Boolean).join(" "), b = [
+    r === "completed" ? "rs-stepper__circle--completed" : "",
+    r === "active" ? "rs-stepper__circle--active" : ""
+  ].filter(Boolean).join(" "), h = [
     "rs-stepper__title",
-    o === "pending" ? "rs-stepper__title--pending" : "",
-    o === "active" ? "rs-stepper__title--active" : ""
+    r === "pending" ? "rs-stepper__title--pending" : "",
+    r === "active" ? "rs-stepper__title--active" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("div", { className: "rs-stepper__step", children: [
-    /* @__PURE__ */ h("div", { className: "rs-stepper__circle-wrap", children: [
-      /* @__PURE__ */ e("div", { className: n, children: a !== 0 ? a : null }),
-      o === "completed" && /* @__PURE__ */ e("span", { className: "rs-stepper__check", "aria-hidden": "true", children: /* @__PURE__ */ e(M, {}) })
+  return /* @__PURE__ */ c("div", { className: "rs-stepper__step", children: [
+    /* @__PURE__ */ c("div", { className: "rs-stepper__circle-wrap", children: [
+      /* @__PURE__ */ e("div", { className: n, children: i !== 0 ? i : null }),
+      r === "completed" && /* @__PURE__ */ e("span", { className: "rs-stepper__check", "aria-hidden": "true", children: /* @__PURE__ */ e(I, {}) })
     ] }),
-    /* @__PURE__ */ e("div", { className: b, children: s.title }),
-    s.date && /* @__PURE__ */ e("div", { className: "rs-stepper__date", children: s.date }),
-    d && s.time && /* @__PURE__ */ e("div", { className: "rs-stepper__time", children: s.time })
+    /* @__PURE__ */ e("div", { className: h, children: t.title }),
+    t.date && /* @__PURE__ */ e("div", { className: "rs-stepper__date", children: t.date }),
+    l && t.time && /* @__PURE__ */ e("div", { className: "rs-stepper__time", children: t.time })
   ] });
 });
-R.displayName = "StepCircle";
-const j = ({
-  steps: i,
-  currentStep: d,
-  completedColor: s = "#059669",
-  pendingColor: a = "#9ca3af",
-  activeColor: o = "#059669",
+z.displayName = "StepCircle";
+const $ = ({
+  steps: s,
+  currentStep: l,
+  completedColor: t = "#059669",
+  pendingColor: i = "#9ca3af",
+  activeColor: r = "#059669",
   lineColor: n = "#e5e7eb",
-  showTime: b = !0,
-  orientation: m = "responsive"
+  showTime: h = !0,
+  orientation: b = "responsive"
 }) => {
-  const r = i.length, l = d > r, f = Math.max(1, Math.min(d, r)), p = l ? Math.max(0, r - 1) : Math.max(0, Math.min(r - 1, f - 1)), _ = C(
-    () => i.map((c, g) => {
+  const o = s.length, d = l > o, f = Math.max(1, Math.min(l, o)), p = d ? Math.max(0, o - 1) : Math.max(0, Math.min(o - 1, f - 1)), _ = D(
+    () => s.map((m, g) => {
       let x = "pending";
-      return l || g < p ? x = "completed" : g === p && (x = "active"), { step: c, index: g, status: x };
+      return d || g < p ? x = "completed" : g === p && (x = "active"), { step: m, index: g, status: x };
     }),
-    [i, p, l]
-  ), w = r > 0 ? 100 / r / 2 : 0, v = r > 1 ? l ? 100 : p / (r - 1) * 100 : 0, y = l || f > 1 ? s : n, u = l || f > r ? s : n, F = {
-    "--rs-completed-color": s,
-    "--rs-pending-color": a,
-    "--rs-active-color": o,
+    [s, p, d]
+  ), y = o > 0 ? 100 / o / 2 : 0, u = o > 1 ? d ? 100 : p / (o - 1) * 100 : 0, w = d || f > 1 ? t : n, v = d || f > o ? t : n, N = {
+    "--rs-completed-color": t,
+    "--rs-pending-color": i,
+    "--rs-active-color": r,
     "--rs-line-color": n,
-    "--rs-half-step": `${w}%`,
-    "--rs-progress": `${v}%`,
-    "--rs-left-side-color": y,
-    "--rs-right-side-color": u
+    "--rs-half-step": `${y}%`,
+    "--rs-progress": `${u}%`,
+    "--rs-left-side-color": w,
+    "--rs-right-side-color": v
   };
-  return r === 0 ? null : /* @__PURE__ */ h("div", { className: "border border-[#E5E7EB] py-2 mx-2 rounded-lg bg-[#F9FAFB] shadow-[0px_2px_4px_-1px_#00000008,0px_4px_6px_-1px_#0000000D]", children: [
-    /* @__PURE__ */ e("div", { className: "pl-2 pt-2 pb-3 text-[14px] font-bold", children: "Workflow Progresss" }),
-    /* @__PURE__ */ e("div", { className: `rs-stepper ${m === "vertical" ? "rs-stepper--vertical" : m === "horizontal" ? "rs-stepper--horizontal" : "rs-stepper--responsive"}`, style: F, children: /* @__PURE__ */ e("div", { className: "rs-stepper__scroll", children: /* @__PURE__ */ h("div", { className: "rs-stepper__row", children: [
+  return o === 0 ? null : /* @__PURE__ */ c("div", { className: "border border-[#E5E7EB] py-2 mx-2 rounded-lg bg-[#F9FAFB] shadow-[0px_2px_4px_-1px_#00000008,0px_4px_6px_-1px_#0000000D]", children: [
+    /* @__PURE__ */ e("div", { className: "pl-2 pt-2 pb-3 text-[14px] font-bold", children: "Workflow Progress" }),
+    /* @__PURE__ */ e("div", { className: `rs-stepper ${b === "vertical" ? "rs-stepper--vertical" : b === "horizontal" ? "rs-stepper--horizontal" : "rs-stepper--responsive"}`, style: N, children: /* @__PURE__ */ e("div", { className: "rs-stepper__scroll", children: /* @__PURE__ */ c("div", { className: "rs-stepper__row", children: [
       /* @__PURE__ */ e("div", { className: "rs-stepper__track", children: /* @__PURE__ */ e("div", { className: "rs-stepper__progress" }) }),
-      _.map((c) => /* @__PURE__ */ e(
-        R,
+      _.map((m) => /* @__PURE__ */ e(
+        z,
         {
-          computed: c,
-          showTime: b
+          computed: m,
+          showTime: h
         },
-        c.step.id
+        m.step.id
       ))
     ] }) }) })
   ] });
-}, P = B(j);
+}, P = B($), A = ({
+  rows: s,
+  className: l = "mt-2 mx-2"
+}) => (
+  // <div className="border border-[#E5E7EB] py-2 mx-2 rounded-lg bg-[#F9FAFB] shadow-[0px_2px_4px_-1px_#00000008,0px_4px_6px_-1px_#0000000D]">
+  /* @__PURE__ */ e("div", { className: `summary-detail-card ${l}`.trim(), children: s.map((t, i) => /* @__PURE__ */ e("div", { className: "summary-detail-card__row", children: t.map((r, n) => /* @__PURE__ */ c(
+    "div",
+    {
+      className: "summary-detail-card__field",
+      style: { "--dc-span": r.span ?? 1 },
+      children: [
+        /* @__PURE__ */ e("p", { className: "summary-detail-card__label", children: r.label }),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            className: `summary-detail-card__value${r.size === "lg" ? " summary-detail-card__value--lg" : ""}`,
+            children: r.value
+          }
+        )
+      ]
+    },
+    n
+  )) }, i)) })
+), H = ({
+  title: s,
+  description: l,
+  icon: t,
+  className: i = ""
+}) => /* @__PURE__ */ c(
+  "div",
+  {
+    className: `flex flex-col items-center justify-center py-4 px-4 text-center ${i}`,
+    children: [
+      t && /* @__PURE__ */ e("div", { className: "mb-2", children: t }),
+      /* @__PURE__ */ e("div", { className: "text-[14px] font-semibold text-[#34343F]", children: s }),
+      /* @__PURE__ */ e("p", { className: "mt-2 max-w-[650px] text-[12px] leading-2 text-[#A19D9D]", children: l })
+    ]
+  }
+);
 export {
-  $ as CustomTabs,
-  P as Stepper
+  W as CustomTabs,
+  H as EmptyState,
+  P as Stepper,
+  A as SummaryDetailsCard
 };

package/dist/types/components/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface EmptyStateProps {
+    title: string;
+    description: string | React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/dist/types/components/SummaryDetailsCard.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { SummaryDetailsCardProps } from '../types/SummaryDetailsCard';
+import './SummaryDetailsCard.css';
+/**
+ * SummaryDetailsCard
+ *
+ * A reusable, responsive "record summary" card: stacked rows of
+ * label/value fields separated by dividers, used for things like
+ * RDR / PNC detail headers, ticket summaries, order details, etc.
+ *
+ * Every row shares the same fixed 4-column grid, so fields stay
+ * vertically aligned across rows regardless of how many fields a given
+ * row has (a 3-field row doesn't stretch to fill the space differently
+ * than a 4-field row above/below it). Each field can opt into spanning
+ * more than 1 column via `field.span`. On mobile the grid collapses to
+ * a single column and every field goes full width.
+ *
+ * Styled with plain CSS (SummaryDetailsCard.css) rather than Tailwind utility
+ * classes, so it renders correctly regardless of the consuming app's
+ * Tailwind content-scan config — safe to use across projects/packages.
+ */
+export declare const SummaryDetailsCard: React.FC<SummaryDetailsCardProps>;
+export default SummaryDetailsCard;

package/dist/types/icons/icon.d.ts

@@ -1,3 +1,2 @@
-import HamburgerIcon from './DefaultHamburgerIcon.svg?react';
 import CheckIcon from "./CheckIcon.svg?react";
-export { HamburgerIcon, CheckIcon };
+export { CheckIcon };

package/dist/types/index.d.ts

@@ -1,6 +1,10 @@
 import "./index.css";
 import "./components/Stepper.css";
+import "./components/SummaryDetailsCard.css";
 export { default as CustomTabs } from "./components/CustomTabs";
 export type { TabItem, CustomTabsProps, } from "./types/tabs";
 export { default as Stepper } from "./components/Stepper";
 export type { StepItem, StepperProps } from "./types/stepper";
+export { default as SummaryDetailsCard } from "./components/SummaryDetailsCard";
+export type { SummaryDetailField, DetailRow, SummaryDetailsCardProps } from "./types/SummaryDetailsCard";
+export { default as EmptyState } from "./components/EmptyState";

package/dist/types/types/SummaryDetailsCard.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface SummaryDetailField {
+    label: string;
+    value: ReactNode;
+    size?: 'default' | 'lg';
+    span?: 1 | 2 | 3 | 4;
+}
+export type DetailRow = SummaryDetailField[];
+export interface SummaryDetailsCardProps {
+    rows: DetailRow[];
+    className?: string;
+}

package/dist/types/types/stepper.d.ts

@@ -1,35 +1,26 @@
 export interface StepItem {
-    /** Unique identifier for the step */
     id: string;
-    /** Label shown under the circle */
     title: string;
-    /** Optional date shown under the title (e.g. "21 May 2026") */
     date?: string;
-    /** Optional time shown under the date (e.g. "09:40 AM") */
     time?: string;
 }
 export interface StepperProps {
-    /** Ordered list of steps to render */
     steps: StepItem[];
-    /**
-     * Index of the current (active) step, 1-based, matching the numbering
-     * shown inside the circles. Steps with index < currentStep are treated
-     * as completed, the step === currentStep is treated as active/current,
-     * and steps > currentStep are treated as upcoming.
-     *
-     * Example: currentStep={3} means step 1 and 2 are completed, step 3 is
-     * active, and the rest are upcoming.
-     */
     currentStep: number;
-    /** Fill color for completed step circles and their connecting lines. Default: #059669 */
     completedColor?: string;
-    /** Color for upcoming step circles, numbers, titles and connecting lines. Default: #9CA3AF */
     pendingColor?: string;
-    /** Border/number/title color for the current/active step. Default: #059669 */
     activeColor?: string;
-    /** Base color for the connecting line track behind the circles. Default: #E5E7EB */
     lineColor?: string;
-    /** Whether to render the optional `time` field under `date`. Default: true */
     showTime?: boolean;
     orientation?: string;
 }
+export type StepStatus = "completed" | "active" | "pending";
+export interface ComputedStep {
+    step: StepItem;
+    index: number;
+    status: StepStatus;
+}
+export interface StepCircleProps {
+    computed: ComputedStep;
+    showTime: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aravint-ui-navigation",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "main": "dist/navigation.cjs.js",
   "module": "dist/navigation.es.js",
   "types": "dist/types/index.d.ts",