npm - aravint-ui-navigation - Versions diffs - 1.0.21 → 1.0.22 - Mend

aravint-ui-navigation 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/Readme.md +71 -218
package/dist/navigation.cjs.js +4 -4
package/dist/navigation.css +1 -1
package/dist/navigation.es.js +120 -51
package/dist/types/components/CustomTabs.d.ts +1 -20
package/dist/types/components/Stepper.d.ts +5 -0
package/dist/types/index.d.ts +3 -1
package/dist/types/types/stepper.d.ts +35 -0
package/dist/types/types/tabs.d.ts +21 -0
package/package.json +1 -1

package/Readme.md CHANGED Viewed

@@ -1,249 +1,102 @@
-# @digitus-fci-oa/button
+# CustomTabs
-A reusable, accessible Button component with support for variants, icons, loading states, and tooltip-enabled icon buttons.
+A reusable, dependency-free React + TypeScript tabs component with numbered badges, sticky tab bar, and mobile-responsive sizing — while preserving the original desktop/tablet look exactly.
-Refer to this URL for npm:
-https://github.com/digitus-git/AFCI_OffAuto/tree/develop_rel_phase1/packages
+## Features
----
+- Controlled or uncontrolled usage (`value`/`onValueChange` or `defaultValue`)
+- Numbered badges per tab (optional)
+- Optional icons per tab
+- Disabled tab support
+- Sticky tab bar (`position: sticky; top: 0`)
+- Active-tab underline-hiding trick (`marginBottom: -1`) to visually merge the active tab with its content panel
+- Responsive breakpoints for tablet (`≤768px`) and phone (`≤480px`) that only affect sizing (padding, font-size, gap, badge size) — colors, borders, and desktop layout are untouched
+- On phones, tabs wrap to a new row instead of overflowing or forcing horizontal scroll
 ## Installation
-```bash
-npm install @digitus-fci-oa/button
-```
----
+Copy `CustomTabs.tsx` into your project (e.g. `src/components/CustomTabs.tsx`). No extra dependencies — just React.
-## Usage
+## Basic Usage
 ```tsx
-import { Button } from '@digitus-fci-oa/button';
-import { Save, Trash2, X, Pencil } from 'lucide-react';
-export function TestButton() {
-  return (
-    <div style={{ display: "flex", gap: "10px", padding: "20px" }}>
-      <Button variant="save" leftIcon={<Save size={14} />} loading={saveLoading}>
-        Save
-      </Button>
-      <Button variant="update" rightIcon={<Save size={14} />}>
-        Update
-      </Button>
-      <Button variant="delete" leftIcon={<Trash2 size={14} />}>
-        Delete
-      </Button>
-      <Button variant="cancel" leftIcon={<X size={14} />}>
-        Cancel
-      </Button>
-      {/* Icon-only button with tooltip */}
-      <Button
-        variant="update"
-        size="icon"
-        iconButton
-        tooltipLabel="Edit record"
-      >
-        <Pencil size={16} />
-      </Button>
+import CustomTabs, { TabItem } from "@digitus-fci-oa/navigation";
-    </div>
-  );
-}
-```
-export default function Example() {
- const [open, setOpen] = useState(false);
+const tabs: TabItem[] = [
+  { id: "overview", label: "Overview", content: <OverviewPanel /> },
+  { id: "details", label: "Details", content: <DetailsPanel /> },
+  { id: "history", label: "History", content: <HistoryPanel />, disabled: true },
+];
-  const handleExport = async (
-    type: "xlsx" | "csv" | "pdf"
-  ) => {
-    console.log(type);
-  };
+function App() {
+  const [activeTab, setActiveTab] = useState("overview");
   return (
-     <ExportButton
-                open={open}
-                setOpen={setOpen}
-                onExport={handleExportClick}
-                 buttonClassName="
-                      flex items-center
-                      gap-[2px]
-                      bg-[hsla(161,94%,30%,1)]
-                      h-[30px]
-                      px-3
-                      rounded-[8px]
-                      text-white
-                      text-xs
-                      font-medium
-                    "
-                buttonIcon={
-                      <>
-                        <Download className="w-4 h-4 text-white" />
-                        <span className="text-white">Export</span>
-                      </>
-                    }
-                items={{
-                  xlsx: {
-                    label: "XLSX",
-                    icon: <FileSpreadsheet />,
-                    iconClassName: "text-green-600",
-                    textClassName: "text-green-600",
-                    iconWidth: "w-5",
-                    iconHeight: "h-5",
-                  },
-                  csv: {
-                    label: "CSV",
-                    icon: <FileText />,
-                    iconClassName: "text-blue-600",
-                    textClassName: "text-blue-600",
-                    iconWidth: "w-5",
-                    iconHeight: "h-5",
-                  },
-                  pdf: {
-                    label: "PDF",
-                    icon: <FileText />,
-                    iconClassName: "text-red-600",
-                    textClassName: "text-red-600",
-                    iconWidth: "w-5",
-                    iconHeight: "h-5",
-                  },
-                }}
-              />
+    <div className="h-screen bg-gray-50 flex flex-col">
+      <div className="flex-1 min-h-0">
+        <CustomTabs
+          tabs={tabs}
+          value={activeTab}
+          onValueChange={setActiveTab}
+          showTabNumbers
+          className="h-full"
+          tabListClassName="bg-white"
+        />
+      </div>
+    </div>
   );
 }
 ```
----
----
 ## Props
-| Prop           | Type              | Default     | Description                                                                 |
-|----------------|-------------------|-------------|-----------------------------------------------------------------------------|
-| `variant`      | `string`          | `"default"` | Button style: `save`, `update`, `delete`, `cancel`                          |
-| `size`         | `string`          | `"default"` | Button size: `default`, `sm`, `lg`, `icon`, `xs`                            |
-| `loading`      | `boolean`         | `false`     | Shows a loading spinner and disables the button                             |
-| `leftIcon`     | `React.ReactNode` | `undefined` | Icon displayed to the left of the label                                     |
-| `rightIcon`    | `React.ReactNode` | `undefined` | Icon displayed to the right of the label                                    |
-| `iconButton`   | `boolean`         | `false`     | Wraps the button in a tooltip provider (use with `tooltipLabel`)            |
-| `tooltipLabel` | `string`          | `undefined` | Tooltip text shown on hover when `iconButton` is `true`                     |
-| `onClick`      | `() => void`      | `undefined` | Click handler                                                               |
-| `children`     | `React.ReactNode` | —           | Button label text or icon content                                           |
-| `disabled`     | `boolean`         | `false`     | Disables the button                                                         |
-| `className`    | `string`          | `undefined` | Additional CSS classes (Tailwind supported)                                 |
-| `style`        | `CSSProperties`   | `undefined` | Inline styles (merged on top of variant styles)                             |
-| `open`        | `boolean`        |                   |Controls dropdown visibility |
-| `setOpen`     | `Dispatch<SetStateAction<boolean>>`       | Updates dropdown state |
-| `onExport`    |     `(type) => void`                      | Export callback |
-| `buttonLabel`  | `string` |                               |     Button label |
-| `buttonIcon`  | `ReactNode` |                             |   Optional button icon |
-| `items`       | `Record` |                                |    Export menu items |
-| `className`   | `string` |                                |   Additional classes |
----
-## Variants
-| Variant   | Color            | Description                      |
-|-----------|------------------|----------------------------------|
-| `default` | Blue (`#3B82F6`) | General-purpose action           |
-| `save`    | Navy (`#003B71`) | Primary save / create action     |
-| `update`  | Navy (`#003B71`) | Edit / update action             |
-| `delete`  | Red (`#FF6070`)  | Destructive / remove action      |
-| `cancel`  | White / bordered | Dismiss / abort action           |
----
-## Sizes
-| Size      | Height | Description                        |
-|-----------|--------|------------------------------------|
-| `default` | 40px   | Standard button                    |
-| `sm`      | 36px   | Compact button                     |
-| `lg`      | 44px   | Large button                       |
-| `icon`    | 40×40px| Square icon-only button            |
-| `xs`      | 20px   | Extra-small button (e.g. in tables)|
----
-## Icon Support
-Icons can be placed on the **left** or **right** side of the button label using `leftIcon` and `rightIcon` props. Works with any icon library (e.g. [lucide-react](https://lucide.dev/)).
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tabs` | `TabItem[]` | — | **Required.** Array of tab definitions. |
+| `defaultValue` | `string` | first tab's `id` | Initial active tab (uncontrolled mode). |
+| `value` | `string` | — | Active tab id (controlled mode). Providing this switches the component to controlled. |
+| `onValueChange` | `(value: string) => void` | — | Called when the user selects a tab. |
+| `className` | `string` | `""` | Class on the outer wrapper. |
+| `tabListClassName` | `string` | `""` | Class on the tab bar container. |
+| `tabButtonClassName` | `string` | `""` | Class on each tab button. |
+| `contentClassName` | `string` | `""` | Class on the content panel. |
+| `showTabNumbers` | `boolean` | `true` | Show/hide the numbered badge on each tab. |
+| `showContent` | `boolean` | `true` | Show/hide the content panel entirely (render tab bar only). |
+| `animated` | `boolean` | `true` | Enables the opacity transition on the content panel. |
-```tsx
-import { Pencil } from 'lucide-react';
-<Button variant="update" leftIcon={<Pencil size={14} />}>
-  Edit
-</Button>
-```
+### `TabItem`
----
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | **Required.** Unique tab identifier. |
+| `label` | `string` | **Required.** Tab display text. |
+| `content` | `React.ReactNode` | Content rendered when this tab is active. |
+| `disabled` | `boolean` | Disables selection of this tab. |
+| `icon` | `React.ReactNode` | Optional icon rendered before the label. |
-## Loading State
+## Controlled vs Uncontrolled
-Pass `loading={true}` to show a spinner and automatically disable the button during async operations.
+- **Uncontrolled:** omit `value`. The component manages its own active tab internally, seeded by `defaultValue` (or the first tab).
+- **Controlled:** pass `value` + `onValueChange`. You own the active-tab state; the component only reports selection events.
-```tsx
-const [saving, setSaving] = useState(false);
-<Button
-  variant="save"
-  loading={saving}
-  onClick={() => setSaving(true)}
-  leftIcon={<Save size={14} />}
->
-  Save
-</Button>
-```
+## Styling Approach
-## Supported Export Types
+Colors, borders, radii, and the sticky/active-tab layout tricks are set as **inline styles** and are the same across all screen sizes — this is what keeps the desktop/tablet appearance unchanged.
-- XLSX
-- CSV
-- PDF
----
-## Features
+Only size-related properties (`padding`, `font-size`, `gap`, badge `width`/`height`) live in an injected `<style>` block using CSS classes (`.ctabs-list`, `.ctabs-btn`, `.ctabs-badge`, `.ctabs-label`), because inline styles can't respond to `@media` queries. This block ships inside the component, so no external CSS file is required.
-- Reusable dropdown export button
-- TailwindCSS support
-- Custom icons
-- Controlled open state
-- Lightweight and reusable
----
-## Icon Button with Tooltip
-Set `iconButton={true}` to wrap the button in a tooltip. Pass `tooltipLabel` to set the tooltip text. Pair with `size="icon"` for a square icon-only button.
-```tsx
-import { Trash2 } from 'lucide-react';
-<Button
-  variant="delete"
-  size="icon"
-  iconButton
-  tooltipLabel="Delete record"
-  onClick={handleDelete}
->
-  <Trash2 size={16} />
-</Button>
-```
+### Breakpoints
-> **Note:** `tooltipLabel` only displays when `iconButton` is `true`. If `tooltipLabel` is omitted while `iconButton` is `true`, the tooltip trigger is still rendered but no tooltip content is shown.
+| Breakpoint | Behavior |
+|---|---|
+| Desktop (default) | Original sizing: `8px 20px` padding, `14px` font, `20px` badges. |
+| Tablet (`≤768px`) | Slightly reduced padding/font/badge size. Tab bar scrolls horizontally if tabs overflow. |
+| Phone (`≤480px`) | Further reduced padding/font/badge size. Tab bar **wraps** to a new row instead of scrolling, so every label stays fully visible. |
----
+To customize breakpoint values, edit the `@media` blocks inside the component's `<style>` tag directly.
-## License
+## Notes / Gotchas
-MIT
+- `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.

package/dist/navigation.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("react"),D=({tabs:o,defaultValue:p,value:a,onValueChange:i,className:c="",tabListClassName:x="",tabButtonClassName:b="",contentClassName:g="",showTabNumbers:h=!0,showContent:f=!0,animated:u=!0})=>{var l;const r=a!==void 0,[m,y]=B.useState(p||((l=o[0])==null?void 0:l.id)||""),n=r?a:m,w=e=>{r||y(e),i==null||i(e)},d=o.find(e=>e.id===n),F={display:"flex",alignItems:"flex-end",borderBottom:"1px solid #059669",position:"sticky",top:0,zIndex:100,flexShrink:0},v={display:"flex",alignItems:"center",fontFamily:"inherit",background:"transparent",cursor:"pointer",outline:"none",transition:"all .2s ease",position:"relative"},T={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},k={background:"transparent",color:"#2D3748",borderTop:"3px solid transparent",borderLeft:"1px solid transparent",borderRight:"1px solid transparent",borderBottom:"1px solid transparent",borderTopLeftRadius:8,borderTopRightRadius:8},R={background:"#FFFFFF",color:"#059669",fontWeight:700,border:"1px solid #059669"},S={background:"#FFFFFF",color:"#374151",fontWeight:"500",border:"1px solid #D1D5DB"},j={background:"#FFFFFF",border:"1px solid #D9E1E7",borderTop:"none",borderBottomLeftRadius:12,borderBottomRightRadius:12,boxShadow:"0 2px 6px rgba(0,0,0,.05)",transition:u?"opacity .2s ease":void 0,opacity:1,flex:1,overflowY:"auto",minHeight:0};return t.jsxs("div",{className:c,style:{display:"flex",flexDirection:"column",width:"100%",height:"100%",minHeight:0,overflow:"hidden"},children:[t.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),z=({tabs:i,defaultValue:d,value:s,onValueChange:a,className:o="",tabListClassName:n="",tabButtonClassName:b="",contentClassName:c="",showTabNumbers:r=!0,showContent:l=!0,animated:m=!0})=>{var S;const p=s!==void 0,[_,w]=v.useState(d||((S=i[0])==null?void 0:S.id)||""),f=p?s:_,y=t=>{p||w(t),a==null||a(t)},u=i.find(t=>t.id===f),j={display:"flex",alignItems:"flex-end",borderBottom:"1px solid #059669",position:"sticky",top:0,zIndex:100,flexShrink:0},F={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},g={background:"transparent",color:"#2D3748",borderTop:"3px solid transparent",borderLeft:"1px solid transparent",borderRight:"1px solid transparent",borderBottom:"1px solid transparent",borderTopLeftRadius:8,borderTopRightRadius:8},h={background:"#ECFDF5",color:"#059669",fontWeight:700,border:"1px solid #059669"},T={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:o,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;
@@ -10,7 +10,7 @@
         .ctabs-btn {
           padding: 4px 20px;
-          font-size: 14px;
+          font-size: 13px;
           font-weight: 500;
           gap: 8px;
           white-space: nowrap;
@@ -21,7 +21,7 @@
           width: 20px;
           height: 20px;
           border-radius: 4px;
-          font-size: 12px;
+          font-size: 10px;
           font-weight: 600;
           flex-shrink: 0;
           display: flex;
@@ -72,4 +72,4 @@
             font-size: 10px;
           }
         }
-      `}),t.jsx("div",{style:F,className:`ctabs-list ${x}`,children:o.map((e,z)=>{const s=n===e.id;return t.jsxs("button",{role:"tab","aria-selected":s,disabled:e.disabled,onClick:()=>!e.disabled&&w(e.id),style:{...v,...s?T:k,opacity:e.disabled?.5:1,cursor:e.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${b}`,children:[h&&t.jsx("span",{className:"ctabs-badge",style:s?R:S,children:z+1}),e.icon,t.jsx("span",{className:"ctabs-label",children:e.label})]},e.id)})}),f&&d&&t.jsx("div",{style:j,className:g,children:d.content})]})};exports.CustomTabs=D;
+      `}),e.jsx("div",{style:j,className:`ctabs-list ${n}`,children:i.map((t,R)=>{const N=f===t.id;return e.jsxs("button",{role:"tab","aria-selected":N,disabled:t.disabled,onClick:()=>!t.disabled&&y(t.id),style:{...F,...N?x:g,opacity:t.disabled?.5:1,cursor:t.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${b}`,children:[r&&e.jsx("span",{className:"ctabs-badge",style:N?h:T,children:R+1}),t.icon,e.jsx("span",{className:"ctabs-label",children:t.label})]},t.id)})}),l&&u&&e.jsx("div",{style:B,className:c,children:u.content})]})},L=()=>e.jsx("svg",{viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M2 6.2L4.6 8.8L10 3",stroke:"#ffffff",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})}),k=v.memo(({computed:i,showTime:d})=>{const{step:s,index:a,status:o}=i,n=["rs-stepper__circle",o==="completed"?"rs-stepper__circle--completed":"",o==="active"?"rs-stepper__circle--active":""].filter(Boolean).join(" "),b=["rs-stepper__title",o==="pending"?"rs-stepper__title--pending":"",o==="active"?"rs-stepper__title--active":""].filter(Boolean).join(" "),c=a!==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:c?a:null}),o==="completed"&&e.jsx("span",{className:"rs-stepper__check","aria-hidden":"true",children:e.jsx(L,{})})]}),e.jsx("div",{className:b,children:s.title}),s.date&&e.jsx("div",{className:"rs-stepper__date",children:s.date}),d&&s.time&&e.jsx("div",{className:"rs-stepper__time",children:s.time})]})});k.displayName="StepCircle";const E=({steps:i,currentStep:d,completedColor:s="#059669",pendingColor:a="#9ca3af",activeColor:o="#059669",lineColor:n="#e5e7eb",showTime:b=!0,orientation:c="responsive"})=>{const r=i.length,l=d>r,m=Math.max(1,Math.min(d,r)),p=l?Math.max(0,r-1):Math.max(0,Math.min(r-1,m-1)),_=v.useMemo(()=>i.map((x,g)=>{let h="pending";return l||g<p?h="completed":g===p&&(h="active"),{step:x,index:g,status:h}}),[i,p,l]),w=r>0?100/r/2:0,f=r>1?l?100:p/(r-1)*100:0,y=l||m>1?s:n,u=l||m>r?s:n,j={"--rs-completed-color":s,"--rs-pending-color":a,"--rs-active-color":o,"--rs-line-color":n,"--rs-half-step":`${w}%`,"--rs-progress":`${f}%`,"--rs-left-side-color":y,"--rs-right-side-color":u};if(r===0)return null;const F=c==="vertical"?"rs-stepper--vertical":c==="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 ${F}`,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(k,{computed:x,showTime:b},x.step.id))]})})})]})},I=v.memo(E);exports.CustomTabs=z;exports.Stepper=I;

package/dist/navigation.css CHANGED Viewed

	@@ -1 +1 @@
1	- /! tailwindcss v4.3.2 \| MIT License \| https://tailwindcss.com /@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-outline-style:solid;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-green-600:oklch(62.7% .194 149.214);--color-blue-600:oklch(54.6% .245 262.881);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--font-weight-medium:500;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.sticky{position:sticky}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-\[30px\]{height:30px}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-\[2px\]{gap:2px}.rounded-\[8px\]{border-radius:8px}.border{border-style:var(--tw-border-style);border-width:1px}.bg-\[hsla\(161\,94\%\,30\%\,1\)\]{background-color:#059467}.px-3{padding-inline:calc(var(--spacing) * 3)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-blue-600{color:var(--color-blue-600)}.text-green-600{color:var(--color-green-600)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}@property --tw-rotate-x{syntax:"";inherits:false}@property --tw-rotate-y{syntax:"";inherits:false}@property --tw-rotate-z{syntax:"";inherits:false}@property --tw-skew-x{syntax:"";inherits:false}@property --tw-skew-y{syntax:"";inherits:false}@property --tw-border-style{syntax:"";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"";inherits:false}@property --tw-outline-style{syntax:"";inherits:false;initial-value:solid}@property --tw-ease{syntax:"*";inherits:false}
1	+ /! tailwindcss v4.3.2 \| MIT License \| https://tailwindcss.com /@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-50:oklch(98.5% .002 247.839);--color-white:#fff;--spacing:.25rem;--font-weight-bold:700;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.sticky{position:sticky}.mx-2{margin-inline:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.h-full{height:100%}.h-screen{height:100vh}.min-h-0{min-height:0}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\[\#E5E7EB\]{border-color:#e5e7eb}.bg-\[\#F9FAFB\]{background-color:#f9fafb}.bg-gray-50{background-color:var(--color-gray-50)}.bg-white{background-color:var(--color-white)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-\[14px\]{font-size:14px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.shadow-\[0px_2px_4px_-1px_\#00000008\,0px_4px_6px_-1px_\#0000000D\]{--tw-shadow:0px 2px 4px -1px var(--tw-shadow-color,#00000008), 0px 4px 6px -1px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}@property --tw-rotate-x{syntax:"";inherits:false}@property --tw-rotate-y{syntax:"";inherits:false}@property --tw-rotate-z{syntax:"";inherits:false}@property --tw-skew-x{syntax:"";inherits:false}@property --tw-skew-y{syntax:"";inherits:false}@property --tw-border-style{syntax:"";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"";inherits:false}@property --tw-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"";inherits:false}@property --tw-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"";inherits:false}@property --tw-inset-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"";inherits:false;initial-value:solid}@property --tw-ease{syntax:"";inherits:false}.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}}

package/dist/navigation.es.js CHANGED Viewed

@@ -1,24 +1,24 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { useState as I } from "react";
-const E = ({
-  tabs: o,
-  defaultValue: c,
-  value: a,
-  onValueChange: i,
-  className: b = "",
-  tabListClassName: x = "",
-  tabButtonClassName: h = "",
-  contentClassName: g = "",
-  showTabNumbers: f = !0,
-  showContent: m = !0,
-  animated: u = !0
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useState as E, memo as T, useMemo as I } from "react";
+const W = ({
+  tabs: i,
+  defaultValue: d,
+  value: s,
+  onValueChange: a,
+  className: o = "",
+  tabListClassName: n = "",
+  tabButtonClassName: b = "",
+  contentClassName: m = "",
+  showTabNumbers: r = !0,
+  showContent: l = !0,
+  animated: f = !0
 }) => {
-  var l;
-  const r = a !== void 0, [w, y] = I(
-    c || ((l = o[0]) == null ? void 0 : l.id) || ""
-  ), n = r ? a : w, F = (t) => {
-    r || y(t), i == null || i(t);
-  }, d = o.find((t) => t.id === n), v = {
+  var S;
+  const p = s !== void 0, [_, w] = E(
+    d || ((S = i[0]) == null ? void 0 : S.id) || ""
+  ), v = p ? s : _, y = (t) => {
+    p || w(t), a == null || a(t);
+  }, u = i.find((t) => t.id === v), F = {
     display: "flex",
     alignItems: "flex-end",
     borderBottom: "1px solid #059669",
@@ -26,8 +26,7 @@ const E = ({
     top: 0,
     zIndex: 100,
     flexShrink: 0
-    // padding + gap now come from .ctabs-list (responsive)
-  }, T = {
+  }, k = {
     display: "flex",
     alignItems: "center",
     fontFamily: "inherit",
@@ -36,8 +35,7 @@ const E = ({
     outline: "none",
     transition: "all .2s ease",
     position: "relative"
-    // padding + font-size + gap now come from .ctabs-btn (responsive)
-  }, k = {
+  }, c = {
     background: "#E8F7F1",
     color: "#059669",
     fontWeight: 700,
@@ -50,7 +48,7 @@ const E = ({
     borderTopRightRadius: 8,
     marginBottom: -1,
     zIndex: 2
-  }, R = {
+  }, g = {
     background: "transparent",
     color: "#2D3748",
     borderTop: "3px solid transparent",
@@ -59,33 +57,33 @@ const E = ({
     borderBottom: "1px solid transparent",
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8
-  }, S = {
-    background: "#FFFFFF",
+  }, x = {
+    background: "#ECFDF5",
     color: "#059669",
     fontWeight: 700,
     border: "1px solid #059669"
   }, z = {
     background: "#FFFFFF",
-    color: "#374151",
+    color: "#1F2937",
     fontWeight: "500",
-    border: "1px solid #D1D5DB"
-  }, B = {
+    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: u ? "opacity .2s ease" : void 0,
+    transition: f ? "opacity .2s ease" : void 0,
     opacity: 1,
     flex: 1,
     overflowY: "auto",
     minHeight: 0
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: b,
+      className: o,
       style: {
         display: "flex",
         flexDirection: "column",
@@ -107,7 +105,7 @@ const E = ({
         .ctabs-btn {
           padding: 4px 20px;
-          font-size: 14px;
+          font-size: 13px;
           font-weight: 500;
           gap: 8px;
           white-space: nowrap;
@@ -118,7 +116,7 @@ const E = ({
           width: 20px;
           height: 20px;
           border-radius: 4px;
-          font-size: 12px;
+          font-size: 10px;
           font-weight: 600;
           flex-shrink: 0;
           display: flex;
@@ -173,31 +171,31 @@ const E = ({
         /* @__PURE__ */ e(
           "div",
           {
-            style: v,
-            className: `ctabs-list ${x}`,
-            children: o.map((t, D) => {
-              const s = n === t.id;
-              return /* @__PURE__ */ p(
+            style: F,
+            className: `ctabs-list ${n}`,
+            children: i.map((t, L) => {
+              const N = v === t.id;
+              return /* @__PURE__ */ h(
                 "button",
                 {
                   role: "tab",
-                  "aria-selected": s,
+                  "aria-selected": N,
                   disabled: t.disabled,
-                  onClick: () => !t.disabled && F(t.id),
+                  onClick: () => !t.disabled && y(t.id),
                   style: {
-                    ...T,
-                    ...s ? k : R,
+                    ...k,
+                    ...N ? c : g,
                     opacity: t.disabled ? 0.5 : 1,
                     cursor: t.disabled ? "not-allowed" : "pointer"
                   },
-                  className: `ctabs-btn ${h}`,
+                  className: `ctabs-btn ${b}`,
                   children: [
-                    f && /* @__PURE__ */ e(
+                    r && /* @__PURE__ */ e(
                       "span",
                       {
                         className: "ctabs-badge",
-                        style: s ? S : z,
-                        children: D + 1
+                        style: N ? x : z,
+                        children: L + 1
                       }
                     ),
                     t.icon,
@@ -209,11 +207,82 @@ const E = ({
             })
           }
         ),
-        m && d && /* @__PURE__ */ e("div", { style: B, className: g, children: d.content })
+        l && u && /* @__PURE__ */ e("div", { style: R, className: m, children: u.content })
       ]
     }
   );
-};
+}, C = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+  "path",
+  {
+    d: "M2 6.2L4.6 8.8L10 3",
+    stroke: "#ffffff",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) }), B = T(({ computed: i, showTime: d }) => {
+  const { step: s, index: a, status: o } = i, n = [
+    "rs-stepper__circle",
+    o === "completed" ? "rs-stepper__circle--completed" : "",
+    o === "active" ? "rs-stepper__circle--active" : ""
+  ].filter(Boolean).join(" "), b = [
+    "rs-stepper__title",
+    o === "pending" ? "rs-stepper__title--pending" : "",
+    o === "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(C, {}) })
+    ] }),
+    /* @__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 })
+  ] });
+});
+B.displayName = "StepCircle";
+const M = ({
+  steps: i,
+  currentStep: d,
+  completedColor: s = "#059669",
+  pendingColor: a = "#9ca3af",
+  activeColor: o = "#059669",
+  lineColor: n = "#e5e7eb",
+  showTime: b = !0,
+  orientation: m = "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)), _ = I(
+    () => i.map((c, g) => {
+      let x = "pending";
+      return l || g < p ? x = "completed" : g === p && (x = "active"), { step: c, 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,
+    "--rs-line-color": n,
+    "--rs-half-step": `${w}%`,
+    "--rs-progress": `${v}%`,
+    "--rs-left-side-color": y,
+    "--rs-right-side-color": u
+  };
+  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 Progress" }),
+    /* @__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: [
+      /* @__PURE__ */ e("div", { className: "rs-stepper__track", children: /* @__PURE__ */ e("div", { className: "rs-stepper__progress" }) }),
+      _.map((c) => /* @__PURE__ */ e(
+        B,
+        {
+          computed: c,
+          showTime: b
+        },
+        c.step.id
+      ))
+    ] }) }) })
+  ] });
+}, $ = T(M);
 export {
-  E as CustomTabs
+  W as CustomTabs,
+  $ as Stepper
 };

package/dist/types/components/CustomTabs.d.ts CHANGED Viewed

@@ -1,23 +1,4 @@
 import React from "react";
-export interface TabItem {
-    id: string;
-    label: string;
-    content?: React.ReactNode;
-    disabled?: boolean;
-    icon?: React.ReactNode;
-}
-export interface CustomTabsProps {
-    tabs: TabItem[];
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    className?: string;
-    tabListClassName?: string;
-    tabButtonClassName?: string;
-    contentClassName?: string;
-    showTabNumbers?: boolean;
-    showContent?: boolean;
-    animated?: boolean;
-}
+import type { CustomTabsProps } from "../types/tabs";
 declare const CustomTabs: React.FC<CustomTabsProps>;
 export default CustomTabs;

package/dist/types/components/Stepper.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Stepper.css";
+import { StepperProps } from "../types/stepper";
+declare const _default: React.NamedExoticComponent<StepperProps>;
+export default _default;

package/dist/types/index.d.ts CHANGED Viewed

@@ -1,3 +1,5 @@
 import "./index.css";
 export { default as CustomTabs } from "./components/CustomTabs";
-export type { TabItem, CustomTabsProps, } from "./components/CustomTabs";
+export type { TabItem, CustomTabsProps, } from "./types/tabs";
+export { default as Stepper } from "./components/Stepper";
+export type { StepItem, StepperProps } from "./types/stepper";

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

@@ -0,0 +1,35 @@
+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;
+}

package/dist/types/types/tabs.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import React from "react";
+export interface TabItem {
+    id: string;
+    label: string;
+    content?: React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface CustomTabsProps {
+    tabs: TabItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    tabListClassName?: string;
+    tabButtonClassName?: string;
+    contentClassName?: string;
+    showTabNumbers?: boolean;
+    showContent?: boolean;
+    animated?: boolean;
+}

package/package.json CHANGED Viewed

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