@webority/ui-react 0.77.2 → 0.78.0

package/dist/components/AppTimeline.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`feed`,`progress`],o=[`vertical`,`horizontal`],s=[`neutral`,`success`,`warning`,`danger`,`info`],c={done:`check`,current:`clock`,"on-hold":`lock`,rejected:`x`,cancelled:`minus`,skipped:`arrow-right`,upcoming:null},l=e=>typeof e==`string`&&(/^https?:[/][/]/i.test(e)||e.startsWith(`/`)&&e[1]!==`/`&&e[1]!==`\\`)&&![...e].some(e=>e.charCodeAt(0)<=32||e.charCodeAt(0)===127);function u(e){if(!(e.byHref==null||e.byHref===``)){if(!l(e.byHref))throw Error(`<AppTimeline> items[].byHref must be a path starting with one '/', or an http:// or https:// address, with no spaces.`);if(!e.by)throw Error(`<AppTimeline> items[].byHref links the by name, so the item needs by.`)}}var d=e=>e.byHref?r(`a`,{className:`timeline-by-link`,href:e.byHref,children:e.by}):e.by;function f({items:l=[],variant:f=`feed`,orientation:p=`vertical`,size:m,className:h=``,style:g,..._}){t(`AppTimeline`,_),e(`AppTimeline`,`variant`,f,a),e(`AppTimeline`,`orientation`,p,o);for(let t of l)e(`AppTimeline`,`items[].tone`,t.tone,s),u(t),f===`progress`&&e(`AppTimeline`,`items[].status`,t.status,Object.keys(c));let v=f===`progress`,y=`timeline${v?` timeline--progress`:``}${p===`horizontal`?` timeline--horizontal`:``}${h?` ${h}`:``}`,b=typeof m==`number`&&m>0?m:void 0,x=b?Math.round(b*.54):v?13:12;return r(`ol`,{className:y,style:b?{...g,"--wui-timeline-dot":`${b}px`}:g,..._,children:l.map((e,t)=>{let a=v?e.status:void 0,o=a?` is-${a}`:``,s=e.tone&&e.tone!==`neutral`?` ${e.tone}`:``,l=v?e.icon??(a?c[a]:void 0):e.icon||`circle`;return i(`li`,{className:`timeline-item${o}${s}`,children:[r(`span`,{className:`timeline-dot`,children:l?r(n,{name:l,size:x}):null}),i(`div`,{className:`timeline-body`,children:[v?i(`div`,{className:`timeline-head`,children:[r(`div`,{className:`timeline-title`,children:e.title}),(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]})]}):r(`div`,{className:`timeline-title`,children:e.title}),e.description&&r(`div`,{className:`timeline-desc`,children:e.description}),!v&&(e.at||e.time||e.by)&&i(`div`,{className:`timeline-meta`,children:[(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]}),e.by&&r(`span`,{className:`timeline-by`,children:d(e)})]}),v&&e.by&&r(`div`,{className:`timeline-meta`,children:r(`span`,{className:`timeline-by`,children:d(e)})}),e.note&&r(`p`,{className:`timeline-note`,children:e.note})]})]},e.key??`${e.at}-${t}`)})})}export{f as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`feed`,`progress`,`steps`],o=[`vertical`,`horizontal`],s=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],c=[`neutral`,`success`,`warning`,`danger`,`info`],l=[`sm`,`md`,`lg`],u={done:`check`,current:`clock`,"on-hold":`lock`,rejected:`x`,cancelled:`minus`,skipped:`arrow-right`,upcoming:null},d=e=>typeof e==`string`&&(/^https?:[/][/]/i.test(e)||e.startsWith(`/`)&&e[1]!==`/`&&e[1]!==`\\`)&&![...e].some(e=>e.charCodeAt(0)<=32||e.charCodeAt(0)===127);function f(e){if(!(e.byHref==null||e.byHref===``)){if(!d(e.byHref))throw Error(`<AppTimeline> items[].byHref must be a path starting with one '/', or an http:// or https:// address, with no spaces.`);if(!e.by)throw Error(`<AppTimeline> items[].byHref links the by name, so the item needs by.`)}}var p=e=>e.byHref?r(`a`,{className:`timeline-by-link`,href:e.byHref,children:e.by}):e.by;function m({items:d=[],variant:m=`feed`,orientation:h,iconVariant:g,size:_,className:v=``,style:y,...b}){t(`AppTimeline`,b),e(`AppTimeline`,`variant`,m,a),e(`AppTimeline`,`orientation`,h,o),e(`AppTimeline`,`iconVariant`,g,s),e(`AppTimeline`,`size`,typeof _==`string`?_:null,l);for(let t of d)e(`AppTimeline`,`items[].tone`,t.tone,c),f(t),m===`progress`&&e(`AppTimeline`,`items[].status`,t.status,Object.keys(u));let x=m===`progress`,S=m===`steps`,C=h===`horizontal`,w=g??(S?`bulk`:void 0),T=typeof _==`string`&&l.includes(_)?_:`md`,E=typeof _==`number`&&_>0?_:void 0,D=!E&&T!==`md`?` wui-timeline--${T}`:``,O=`${S?`timeline wui-timeline--steps${h===`vertical`?` wui-timeline--steps-vertical`:``}`:`timeline${x?` timeline--progress`:``}${C?` timeline--horizontal`:``}`}${D}${v?` ${v}`:``}`,k=S?E?Math.round(E*.43):{sm:19,md:24,lg:31}[T]:E?Math.round(E*.54):x?{sm:10,md:13,lg:17}[T]:{sm:10,md:12,lg:17}[T];return r(`ol`,{className:O,style:E?{...y,"--wui-timeline-dot":`${E}px`}:y,...b,children:d.map((e,t)=>{let a=e.tone&&e.tone!==`neutral`?` ${e.tone}`:``;if(S){let o=e.eyebrow??`Step ${t+1}`;return i(`li`,{className:`timeline-item${a}`,children:[r(`span`,{className:`timeline-dot`,children:e.icon?r(n,{name:e.icon,size:k,variant:w}):null}),i(`div`,{className:`timeline-body`,children:[o!==``&&r(`div`,{className:`wui-timeline-eyebrow`,children:o}),r(`div`,{className:`timeline-title`,children:e.title}),e.description&&r(`div`,{className:`timeline-desc`,children:e.description})]})]},e.key??`${e.at}-${t}`)}let o=x?e.status:void 0,s=o?` is-${o}`:``,c=x?e.icon??(o?u[o]:void 0):e.icon||`circle`;return i(`li`,{className:`timeline-item${s}${a}`,children:[r(`span`,{className:`timeline-dot`,children:c?r(n,{name:c,size:k,variant:w}):null}),i(`div`,{className:`timeline-body`,children:[x?i(`div`,{className:`timeline-head`,children:[r(`div`,{className:`timeline-title`,children:e.title}),(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]})]}):r(`div`,{className:`timeline-title`,children:e.title}),e.description&&r(`div`,{className:`timeline-desc`,children:e.description}),!x&&(e.at||e.time||e.by)&&i(`div`,{className:`timeline-meta`,children:[(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]}),e.by&&r(`span`,{className:`timeline-by`,children:p(e)})]}),x&&e.by&&r(`div`,{className:`timeline-meta`,children:r(`span`,{className:`timeline-by`,children:p(e)})}),e.note&&r(`p`,{className:`timeline-note`,children:e.note})]})]},e.key??`${e.at}-${t}`)})})}export{m as default};

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

@@ -1,5 +1,5 @@
 /**
- * A chronological activity feed OR a status-progress tracker.
+ * A chronological activity feed, a status-progress tracker, or a numbered process.
  *
  * - `variant="feed"` (default) — an audit trail / sign-off history / status log.
  *   Each entry is a toned dot on a continuous vertical rail, with a title, a
@@ -10,39 +10,43 @@
  *   or a hollow ring (upcoming); the rail is drawn per segment so the path
  *   between two completed steps reads as filled. The timestamp is pinned to the
  *   top-right of the step.
+ * - `variant="steps"` — a numbered process: large tinted icon discs joined by a dashed line, each with an eyebrow, title and description. A row from md up, a column on phones.
  *
  * The rail is drawn so it cannot break into disconnected segments when an entry
  * wraps to two lines — the failure that makes most hand-rolled timelines look
  * broken with real data.
  *
  * @param {object} props
- * @param {{ key?: string, icon?: string,
+ * @param {{ key?: string, icon?: string, eyebrow?: import('react').ReactNode,
  *   tone?: 'neutral'|'success'|'warning'|'danger'|'info',
  *   status?: 'upcoming'|'current'|'done'|'on-hold'|'rejected'|'cancelled'|'skipped',
  *   title: import('react').ReactNode, description?: import('react').ReactNode,
  *   at?: string, atTitle?: string, time?: string, by?: string, byHref?: string, note?: string }[]} props.items
- *   Feed variant: newest first. Progress variant: first stage first.
+ *   Feed variant: newest first. Progress variant: first stage first. Steps variant: first step first.
  *   `status` drives the dot + rail in the progress variant; `description` is a
  *   plain inline subtext under the title (distinct from the boxed `note`).
+ *   Steps variant: the label above the title; omitted it reads `Step 1`, `Step 2`…, an empty string hides it.
  *   `at` is the date and `time` an optional time-of-day shown beside it — both are
  *   pre-formatted strings the caller owns (IST, DD-MMM-YYYY / HH:mm); pass either or both.
  *   `atTitle` is the full date and time shown on hover over `at`, such as `14 Oct 2026, 4:05 pm`; omit it for no tooltip.
  *   `byHref` links the `by` name (a path starting with one `/`, or an `http://` / `https://` address);
  *   any other value, or `byHref` without `by`, throws.
- * @param {'feed'|'progress'} [props.variant] Layout mode. Defaults to `feed`.
- * @param {'vertical'|'horizontal'} [props.orientation] Rail direction — vertical (default) stacks
- *   items top-to-bottom; horizontal lays dots in a row with the body beneath each. Orthogonal to
- *   `variant`, so both feed and progress can run horizontally.
- * @param {number} [props.size] Dot diameter in px (default 24). The rail, halo
- *   and glyph scale from it, so the whole timeline grows/shrinks in proportion.
+ * @param {'feed'|'progress'|'steps'} [props.variant] Layout mode. Defaults to `feed`.
+ *   `steps`: a numbered process: large tinted icon discs joined by a dashed line, each with an eyebrow, title and description. A row from md up, a column on phones.
+ * @param {'vertical'|'horizontal'} [props.orientation] Feed and progress: vertical (default) or horizontal.
+ *   Steps: a row from md up and a column below; `vertical` keeps the column at every width.
+ *   Horizontal lays dots in a row with the body beneath each. Orthogonal to `variant` for feed and progress.
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant] The iconsax style of the dot icons. Defaults to bulk for steps and linear otherwise.
+ * @param {'sm'|'md'|'lg'|number} [props.size] A preset, or the dot diameter in px. sm, md (default) and lg set the dot (feed and progress 18, 24 and 32px; steps 44, 56 and 72px) and scale the text and spacing to match. A px number sets only the dot, and the glyph follows it.
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style] Inline style on the list;
  *   the `size` var is merged into it.
  */
-export default function AppTimeline({ items, variant, orientation, size, className, style, ...rest }: {
+export default function AppTimeline({ items, variant, orientation, iconVariant, size, className, style, ...rest }: {
     items: {
         key?: string;
         icon?: string;
+        eyebrow?: import('react').ReactNode;
         tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
         status?: 'upcoming' | 'current' | 'done' | 'on-hold' | 'rejected' | 'cancelled' | 'skipped';
         title: import('react').ReactNode;
@@ -54,9 +58,10 @@ export default function AppTimeline({ items, variant, orientation, size, classNa
         byHref?: string;
         note?: string;
     }[];
-    variant?: 'feed' | 'progress';
+    variant?: 'feed' | 'progress' | 'steps';
     orientation?: 'vertical' | 'horizontal';
-    size?: number;
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    size?: 'sm' | 'md' | 'lg' | number;
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.77.2",
+  "version": "0.78.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.77.2",
-    "@webority/ui-elements": "0.77.2"
+    "@webority/theme": "0.78.0",
+    "@webority/ui-elements": "0.78.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",