aravint-ui-navigation 1.0.40 → 1.0.42

package/Readme.md

@@ -217,4 +217,146 @@ const steps = [
 - 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.
+- When `showTime={false}`, only the date is displayed.
+
+
+-----------------------------------------------------------------
+# SummaryDetailsCard
+
+Reusable, responsive summary card — rows of label/value fields separated
+by dividers (e.g. PNC/RDR detail header, ticket summary, order details).
+
+## Usage
+
+```tsx
+import  { DetailRow, SummaryDetailsCard } from "@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";
+
+const rows: DetailRow[] = [
+  [
+    { label: 'Title', value: 'Title will be show here' },
+    { label: 'Remark', value: 'Remark will be show here...'},
+  ],
+  [
+    { label: 'PNC Number', value: 'PNC-2026-0001' },
+    { label: 'PNC Date', value: '26-06-2026 11:00AM' },
+    { label: 'Requester', value: 'Prakash Kumar' },
+    { label: 'Flag Name', value: 'M/L, F' },
+  ],
+  [
+    { label: 'Pending With', value: 'RoHS Team' },
+    { label: 'Created On', value: '26-06-2026 11:00AM' },
+    { label: 'Last Updated', value: '27-06-2026 10:00 AM' },
+  ],
+];
+
+<SummaryDetailsCard rows={rows} />
+```
+
+## Props
+
+| Prop        | Type          | Default        | Description                                    |
+| ----------- | ------------- | -------------- | ----------------------------------------------- |
+| `rows`      | `DetailRow[]` | —              | Rows of fields, top to bottom, each row on its own divider-separated line |
+| `className` | `string`      | `'mt-2 mx-2'`  | Extra classes on the outer card                |
+
+### Field (`DetailRow` = `DetailField[]`)
+
+| Prop    | Type                | Default     | Description                                                                       |
+| ------- | ------------------- | ----------- | ------------------------------------------------------------------------------------ |
+| `label` | `string`            | —           | Small uppercase label                                                             |
+| `value` | `ReactNode`         | —           | The value to display                                                              |
+| `size`  | `'default' \| 'lg'` | `'default'` | `'lg'` for hero fields like Title/Remark                                          |
+| `span`  | `1 \| 2 \| 3 \| 4`  | `1`         | How many of the 4 grid columns this field occupies (desktop/tablet — mobile is always full width) |
+
+## Layout
+
+- Every row uses the same fixed 4-column grid, so fields stay aligned
+  across rows regardless of how many fields a row has.
+- Below 640px, the grid collapses to a single column and every field
+  goes full width, regardless of its `span`.
+- Styled with plain CSS (`SummaryDetailsCard.css`), not Tailwind
+  utilities, so it renders correctly no matter what the consuming app's
+  Tailwind (or non-Tailwind) setup looks like. Colors/spacing are
+  theme-able via CSS variables on `.summary-detail-card`.
+
+
+
+------------------------------------------------------------------
+# EmptyState
+
+A reusable component for displaying an empty state message when no data or content is available.
+
+## Features
+
+- Reusable and customizable
+- Optional icon support
+- Custom title and description
+- Supports additional CSS classes
+- Responsive design using Tailwind CSS
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string` | Yes | Title displayed in the empty state. |
+| `description` | `string \| React.ReactNode` | Yes | Description displayed below the title. |
+| `icon` | `React.ReactNode` | No | Optional icon or illustration. |
+| `className` | `string` | No | Additional CSS classes for the container. |
+
+## Usage
+
+```tsx
+import { EmptyState } from "@your-package/navigation";
+
+<EmptyState
+  title="No Confirmation Received"
+  description="No confirmation has been received for this request yet. Once the respective team confirms the action, the details will be displayed here."
+/>
+```
+
+### With an Icon
+
+```tsx
+import { EmptyState } from "@digitus-fci-oa/navigation";
+import { InfoIcon } from "./InfoIcon";
+
+<EmptyState
+  icon={<InfoIcon />}
+  title="No Data Found"
+  description="There are no records available."
+/>
+```
+
+## Example
+
+```tsx
+<EmptyState
+  title="No Confirmation Received"
+  description={
+    <>
+      No confirmation has been received for this request yet.
+      <br />
+      Once the respective team confirms the action, the details will be displayed here.
+    </>
+  }
+/>
+```
+
+## Output
+
+Displays a centered empty state containing:
+- Optional icon
+- Title
+- Description
+
+
+-----------------------------------------------------------------

package/dist/navigation.cjs.js

@@ -1,4 +1,4 @@
-"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:`
+"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 i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(a,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return a.default=s,Object.freeze(a)}const k=E(f),D=({tabs:s,defaultValue:a,value:t,onValueChange:i,className:r="",tabListClassName:n="",tabButtonClassName:b="",contentClassName:p="",showTabNumbers:l=!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=o=>{d||y(o),i==null||i(o)},v=s.find(o=>o.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"},z={background:"#FFFFFF",color:"#1F2937",fontWeight:"500",border:"1px solid #1F2937"},R={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:r,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: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;
+      `}),e.jsx("div",{style:w,className:`ctabs-list ${n}`,children:s.map((o,B)=>{const S=g===o.id;return e.jsxs("button",{role:"tab","aria-selected":S,disabled:o.disabled,onClick:()=>!o.disabled&&j(o.id),style:{...N,...S?x:u,opacity:o.disabled?.5:1,cursor:o.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${b}`,children:[l&&e.jsx("span",{className:"ctabs-badge",style:S?m:z,children:B+1}),o.icon,e.jsx("span",{className:"ctabs-label",children:o.label})]},o.id)})}),c&&v&&e.jsx("div",{style:R,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:i,status:r}=s,n=["rs-stepper__circle",r==="completed"?"rs-stepper__circle--completed":"",r==="active"?"rs-stepper__circle--active":""].filter(Boolean).join(" "),b=["rs-stepper__title",r==="pending"?"rs-stepper__title--pending":"",r==="active"?"rs-stepper__title--active":""].filter(Boolean).join(" "),p=i!==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?i:null}),r==="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:i="#9ca3af",activeColor:r="#059669",lineColor:n="#e5e7eb",showTime:b=!0,orientation:p="responsive"})=>{const l=s.length,c=a>l,h=Math.max(1,Math.min(a,l)),d=c?Math.max(0,l-1):Math.max(0,Math.min(l-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=l>0?100/l/2:0,g=l>1?c?100:d/(l-1)*100:0,j=c||h>1?t:n,v=c||h>l?t:n,w={"--rs-completed-color":t,"--rs-pending-color":i,"--rs-active-color":r,"--rs-line-color":n,"--rs-half-step":`${y}%`,"--rs-progress":`${g}%`,"--rs-left-side-color":j,"--rs-right-side-color":v};if(l===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,i)=>e.jsx("div",{className:"summary-detail-card__row",children:t.map((r,n)=>e.jsxs("div",{className:"summary-detail-card__field",style:{"--dc-span":r.span??1},children:[e.jsx("p",{className:"summary-detail-card__label",children:r.label}),e.jsx("p",{className:`summary-detail-card__value${r.size==="lg"?" summary-detail-card__value--lg":""}`,children:r.value})]},n))},i))}),$=({title:s,description:a,icon:t,className:i="",children:r})=>e.jsxs("div",{className:`flex flex-col items-center justify-center py-4 px-4 text-center ${i}`,children:[t&&e.jsx("div",{className:"mb-2",children:t}),e.jsx("div",{className:"text-[14px] font-semibold text-[#34343F]",children:s}),(a||r)&&e.jsx("p",{className:"mt-2 max-w-[650px]",style:{fontSize:"12px",lineHeight:1.6,color:"#A19D9D"},children:r??a})]});exports.CustomTabs=D;exports.EmptyState=$;exports.Stepper=M;exports.SummaryDetailsCard=I;

package/dist/navigation.es.js

@@ -1,25 +1,25 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import * as T from "react";
-import { useState as C, memo as B, useMemo as D } from "react";
+import { useState as C, memo as z, useMemo as D } from "react";
 const W = ({
-  tabs: s,
+  tabs: r,
   defaultValue: l,
   value: t,
   onValueChange: i,
-  className: r = "",
+  className: s = "",
   tabListClassName: n = "",
   tabButtonClassName: h = "",
   contentClassName: b = "",
   showTabNumbers: o = !0,
-  showContent: d = !0,
+  showContent: c = !0,
   animated: f = !0
 }) => {
   var k;
   const p = t !== void 0, [_, y] = C(
-    l || ((k = s[0]) == null ? void 0 : k.id) || ""
+    l || ((k = r[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 = {
+  }, v = r.find((a) => a.id === u), N = {
     display: "flex",
     alignItems: "flex-end",
     borderBottom: "1px solid #059669",
@@ -81,10 +81,10 @@ const W = ({
     overflowY: "auto",
     minHeight: 0
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: r,
+      className: s,
       style: {
         display: "flex",
         flexDirection: "column",
@@ -174,9 +174,9 @@ const W = ({
           {
             style: N,
             className: `ctabs-list ${n}`,
-            children: s.map((a, L) => {
+            children: r.map((a, L) => {
               const F = u === a.id;
-              return /* @__PURE__ */ c(
+              return /* @__PURE__ */ d(
                 "button",
                 {
                   role: "tab",
@@ -208,63 +208,63 @@ const W = ({
             })
           }
         ),
-        d && v && /* @__PURE__ */ e("div", { style: E, className: b, children: v.content })
+        c && v && /* @__PURE__ */ e("div", { style: E, className: b, children: v.content })
       ]
     }
   );
-}, 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 = [
+}, I = (r) => /* @__PURE__ */ T.createElement("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ T.createElement("path", { d: "M2 6.2L4.6 8.8L10 3", stroke: "#ffffff", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })), B = z(({ computed: r, showTime: l }) => {
+  const { step: t, index: i, status: s } = r, n = [
     "rs-stepper__circle",
-    r === "completed" ? "rs-stepper__circle--completed" : "",
-    r === "active" ? "rs-stepper__circle--active" : ""
+    s === "completed" ? "rs-stepper__circle--completed" : "",
+    s === "active" ? "rs-stepper__circle--active" : ""
   ].filter(Boolean).join(" "), h = [
     "rs-stepper__title",
-    r === "pending" ? "rs-stepper__title--pending" : "",
-    r === "active" ? "rs-stepper__title--active" : ""
+    s === "pending" ? "rs-stepper__title--pending" : "",
+    s === "active" ? "rs-stepper__title--active" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ c("div", { className: "rs-stepper__step", children: [
-    /* @__PURE__ */ c("div", { className: "rs-stepper__circle-wrap", children: [
+  return /* @__PURE__ */ d("div", { className: "rs-stepper__step", children: [
+    /* @__PURE__ */ d("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, {}) })
+      s === "completed" && /* @__PURE__ */ e("span", { className: "rs-stepper__check", "aria-hidden": "true", children: /* @__PURE__ */ e(I, {}) })
     ] }),
     /* @__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 })
   ] });
 });
-z.displayName = "StepCircle";
+B.displayName = "StepCircle";
 const $ = ({
-  steps: s,
+  steps: r,
   currentStep: l,
   completedColor: t = "#059669",
   pendingColor: i = "#9ca3af",
-  activeColor: r = "#059669",
+  activeColor: s = "#059669",
   lineColor: n = "#e5e7eb",
   showTime: h = !0,
   orientation: b = "responsive"
 }) => {
-  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) => {
+  const o = r.length, c = l > o, f = Math.max(1, Math.min(l, o)), p = c ? Math.max(0, o - 1) : Math.max(0, Math.min(o - 1, f - 1)), _ = D(
+    () => r.map((m, g) => {
       let x = "pending";
-      return d || g < p ? x = "completed" : g === p && (x = "active"), { step: m, index: g, status: x };
+      return c || g < p ? x = "completed" : g === p && (x = "active"), { step: m, index: g, status: x };
     }),
-    [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 = {
+    [r, p, c]
+  ), y = o > 0 ? 100 / o / 2 : 0, u = o > 1 ? c ? 100 : p / (o - 1) * 100 : 0, w = c || f > 1 ? t : n, v = c || f > o ? t : n, N = {
     "--rs-completed-color": t,
     "--rs-pending-color": i,
-    "--rs-active-color": r,
+    "--rs-active-color": s,
     "--rs-line-color": n,
     "--rs-half-step": `${y}%`,
     "--rs-progress": `${u}%`,
     "--rs-left-side-color": w,
     "--rs-right-side-color": v
   };
-  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: [
+  return o === 0 ? null : /* @__PURE__ */ d("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 ${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__ */ d("div", { className: "rs-stepper__row", children: [
       /* @__PURE__ */ e("div", { className: "rs-stepper__track", children: /* @__PURE__ */ e("div", { className: "rs-stepper__progress" }) }),
       _.map((m) => /* @__PURE__ */ e(
-        z,
+        B,
         {
           computed: m,
           showTime: h
@@ -273,48 +273,57 @@ const $ = ({
       ))
     ] }) }) })
   ] });
-}, P = B($), A = ({
-  rows: s,
+}, P = z($), H = ({
+  rows: r,
   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,
+}) => /* @__PURE__ */ e("div", { className: `summary-detail-card ${l}`.trim(), children: r.map((t, i) => /* @__PURE__ */ e("div", { className: "summary-detail-card__row", children: t.map((s, n) => /* @__PURE__ */ d(
+  "div",
+  {
+    className: "summary-detail-card__field",
+    style: { "--dc-span": s.span ?? 1 },
+    children: [
+      /* @__PURE__ */ e("p", { className: "summary-detail-card__label", children: s.label }),
+      /* @__PURE__ */ e(
+        "p",
+        {
+          className: `summary-detail-card__value${s.size === "lg" ? " summary-detail-card__value--lg" : ""}`,
+          children: s.value
+        }
+      )
+    ]
+  },
+  n
+)) }, i)) }), A = ({
+  title: r,
   description: l,
   icon: t,
-  className: i = ""
-}) => /* @__PURE__ */ c(
+  className: i = "",
+  children: s
+}) => /* @__PURE__ */ d(
   "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 })
+      /* @__PURE__ */ e("div", { className: "text-[14px] font-semibold text-[#34343F]", children: r }),
+      (l || s) && /* @__PURE__ */ e(
+        "p",
+        {
+          className: "mt-2 max-w-[650px]",
+          style: {
+            fontSize: "12px",
+            lineHeight: 1.6,
+            color: "#A19D9D"
+          },
+          children: s ?? l
+        }
+      )
     ]
   }
 );
 export {
   W as CustomTabs,
-  H as EmptyState,
+  A as EmptyState,
   P as Stepper,
-  A as SummaryDetailsCard
+  H as SummaryDetailsCard
 };

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

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

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

@@ -1,23 +1,5 @@
 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/package.json

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