@payfit/unity-components 2.12.9 → 2.13.0

package/dist/esm/components/timeline/Timeline.context.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Global Timeline configuration context
+ * Provides orientation and type to all nested Timeline components (TimelineStep, TimelineMarker, etc.)
+ *
+ * Note: This context is separate from TimelineStepContentContext to maintain single responsibility:
+ * - TimelineContext: Global configuration (orientation, type) - used by all components
+ * - TimelineStepContentContext: Content-specific data (statusSlot) - used only within TimelineStepContent
+ */
+export interface TimelineContextValue {
+    orientation: 'vertical' | 'horizontal';
+    type: 'default' | 'numbered';
+}
+export declare const TimelineContext: import('react').Context<TimelineContextValue | null>;
+export declare function TimelineProvider({ children, orientation, type, }: PropsWithChildren<TimelineContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useTimelineContext(): TimelineContextValue;

package/dist/esm/components/timeline/Timeline.context.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as r, useContext as m } from "react";
+const t = r(null);
+function s({
+  children: e,
+  orientation: n,
+  type: o
+}) {
+  return /* @__PURE__ */ i(t.Provider, { value: { orientation: n, type: o }, children: e });
+}
+function c() {
+  const e = m(t);
+  if (!e)
+    throw new Error(
+      "useTimelineContext must be used within a Timeline component. Make sure to wrap your TimelineStep components with <Timeline>."
+    );
+  return e;
+}
+export {
+  t as TimelineContext,
+  s as TimelineProvider,
+  c as useTimelineContext
+};

package/dist/esm/components/timeline/Timeline.d.ts

@@ -0,0 +1,49 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ReactNode } from 'react';
+import { timeline } from './Timeline.variants.js';
+export type TimelineProps = {
+    /**
+     * Accessible label for the timeline (required for screen readers)
+     * @example "Order progress" | "Setup steps" | "Declaration timeline"
+     */
+    'aria-label': string;
+    /**
+     * Custom progress description for screen readers (visually hidden)
+     * Optional. Provides context about overall progress in the timeline.
+     * @example "Step 2 of 4, 1 completed" | "3 out of 5 steps completed"
+     */
+    customProgressLabel?: string;
+    /**
+     * Orientation of the timeline
+     * @default 'vertical'
+     */
+    orientation?: VariantProps<typeof timeline>['orientation'];
+    /**
+     * Type of timeline markers
+     * @default 'default'
+     */
+    type?: 'default' | 'numbered';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Timeline steps
+     */
+    children?: ReactNode;
+};
+/**
+ * Timeline component displays chronological events in vertical or horizontal orientation
+ * @example
+ * ```tsx
+ * <Timeline orientation="vertical" type="numbered">
+ *   <TimelineStep state="completed" stepNumber={1}>
+ *     <TimelineStepHeader title="Step 1" subtitle="January 15, 2024" />
+ *     <TimelineStepDescription>
+ *       Description of the step
+ *     </TimelineStepDescription>
+ *   </TimelineStep>
+ * </Timeline>
+ * ```
+ */
+export declare const Timeline: import('react').ForwardRefExoticComponent<TimelineProps & import('react').RefAttributes<HTMLOListElement | HTMLUListElement>>;

package/dist/esm/components/timeline/Timeline.js

@@ -0,0 +1,37 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { useId as c } from "react-aria";
+import { TimelineProvider as p } from "./Timeline.context.js";
+import { timeline as u } from "./Timeline.variants.js";
+const v = f(
+  ({
+    "aria-label": o,
+    customProgressLabel: i,
+    orientation: r = "vertical",
+    type: l = "default",
+    className: s,
+    children: n
+  }, e) => {
+    const m = c();
+    return /* @__PURE__ */ d(p, { orientation: r, type: l, children: [
+      i && /* @__PURE__ */ a("div", { id: m, className: "uy:sr-only", children: i }),
+      /* @__PURE__ */ a(
+        l === "numbered" ? "ol" : "ul",
+        {
+          ref: (t) => {
+            typeof e == "function" ? e(t) : e && (e.current = t);
+          },
+          className: u({ orientation: r, className: s }),
+          "aria-label": o,
+          "aria-describedby": i ? m : void 0,
+          "aria-orientation": r,
+          children: n
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "Timeline";
+export {
+  v as Timeline
+};

package/dist/esm/components/timeline/Timeline.utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook that returns true if the Timeline is in horizontal orientation on desktop breakpoints
+ * Used to determine statusSlot positioning:
+ * - Horizontal + Desktop: statusSlot at bottom of content
+ * - Other cases: statusSlot next to title
+ */
+export declare const useIsHorizontalDesktop: () => boolean;

package/dist/esm/components/timeline/Timeline.utils.js

@@ -0,0 +1,9 @@
+import { useBreakpointListener as e, isDesktopBreakpoint as n } from "../../hooks/use-breakpoint-listener.js";
+import { useTimelineContext as r } from "./Timeline.context.js";
+const p = () => {
+  const { orientation: o } = r(), t = e();
+  return o === "horizontal" && n(t);
+};
+export {
+  p as useIsHorizontalDesktop
+};

package/dist/esm/components/timeline/Timeline.variants.d.ts

@@ -0,0 +1,169 @@
+export declare const timeline: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "uy:flex uy:list-none uy:m-0 uy:p-0", {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "uy:flex uy:list-none uy:m-0 uy:p-0", unknown, unknown, undefined>>;
+export declare const timelineStep: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "uy:flex uy:m-0 uy:p-0 uy:gap-200", {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "uy:flex uy:m-0 uy:p-0 uy:gap-200", unknown, unknown, undefined>>;
+export declare const timelineMarker: import('tailwind-variants').TVReturnType<{
+    state: {
+        completed: {
+            ball: string;
+            line: string;
+            icon: string;
+        };
+        current: {
+            ball: string;
+            line: string;
+            number: string;
+        };
+        pending: {
+            ball: string;
+            line: string;
+            number: string;
+        };
+    };
+    type: {
+        default: {};
+        numbered: {
+            ball: string;
+        };
+    };
+    orientation: {
+        vertical: {
+            container: string;
+            line: string;
+        };
+        horizontal: {
+            container: string;
+            line: string;
+        };
+    };
+}, {
+    container: string;
+    ball: string[];
+    line: string;
+    icon: string;
+    number: string[];
+}, undefined, {
+    state: {
+        completed: {
+            ball: string;
+            line: string;
+            icon: string;
+        };
+        current: {
+            ball: string;
+            line: string;
+            number: string;
+        };
+        pending: {
+            ball: string;
+            line: string;
+            number: string;
+        };
+    };
+    type: {
+        default: {};
+        numbered: {
+            ball: string;
+        };
+    };
+    orientation: {
+        vertical: {
+            container: string;
+            line: string;
+        };
+        horizontal: {
+            container: string;
+            line: string;
+        };
+    };
+}, {
+    container: string;
+    ball: string[];
+    line: string;
+    icon: string;
+    number: string[];
+}, import('tailwind-variants').TVReturnType<{
+    state: {
+        completed: {
+            ball: string;
+            line: string;
+            icon: string;
+        };
+        current: {
+            ball: string;
+            line: string;
+            number: string;
+        };
+        pending: {
+            ball: string;
+            line: string;
+            number: string;
+        };
+    };
+    type: {
+        default: {};
+        numbered: {
+            ball: string;
+        };
+    };
+    orientation: {
+        vertical: {
+            container: string;
+            line: string;
+        };
+        horizontal: {
+            container: string;
+            line: string;
+        };
+    };
+}, {
+    container: string;
+    ball: string[];
+    line: string;
+    icon: string;
+    number: string[];
+}, undefined, unknown, unknown, undefined>>;
+export declare const timelineContent: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "uy:flex uy:flex-col uy:gap-100 uy:items-start", {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "uy:flex uy:flex-col uy:gap-100 uy:items-start", unknown, unknown, undefined>>;

package/dist/esm/components/timeline/Timeline.variants.js

@@ -0,0 +1,121 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const r = e({
+  base: "uy:flex uy:list-none uy:m-0 uy:p-0",
+  variants: {
+    orientation: {
+      vertical: "uy:flex-col",
+      // Horizontal: vertical on mobile (xs/sm), horizontal on desktop (md+)
+      horizontal: "uy:flex-col uy:md:flex-row"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), u = e({
+  base: "uy:flex uy:m-0 uy:p-0 uy:gap-200",
+  variants: {
+    orientation: {
+      vertical: "uy:flex-row uy:w-full uy:items-stretch",
+      // Horizontal: renders as vertical on mobile, horizontal on desktop
+      horizontal: "uy:flex-row uy:w-full uy:items-stretch uy:md:flex-col uy:md:flex-1 uy:md:min-w-0 uy:md:w-auto"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), n = e({
+  slots: {
+    container: "uy:flex uy:items-center uy:w-300",
+    ball: [
+      "uy:flex uy:items-center uy:justify-center",
+      "uy:w-250 uy:h-250 uy:rounded-full",
+      "uy:border-2 uy:border-solid",
+      "uy:flex-shrink-0"
+    ],
+    line: "uy:flex-1",
+    icon: "uy:w-250 uy:h-250",
+    number: [
+      "uy:typography-body-small-strong",
+      "uy:flex uy:items-center uy:justify-center",
+      "uy:w-full uy:h-full"
+    ]
+  },
+  variants: {
+    state: {
+      completed: {
+        ball: "uy:bg-surface-primary-active uy:border-transparent uy:w-300 uy:h-300",
+        line: "uy:border-border-primary uy:border-solid",
+        icon: "uy:text-content-inverted"
+      },
+      current: {
+        ball: "uy:bg-transparent uy:border-border-primary-enabled",
+        line: "uy:border-border-neutral uy:border-dashed",
+        number: "uy:text-content-primary-active"
+      },
+      pending: {
+        ball: "uy:bg-transparent uy:border-border-neutral",
+        line: "uy:border-border-neutral uy:border-dashed",
+        number: "uy:text-content-neutral-lowest"
+      }
+    },
+    type: {
+      default: {},
+      numbered: {
+        // Numbered type always uses 24px balls (w-300 h-300) to accommodate numbers
+        ball: "uy:w-300 uy:h-300"
+      }
+    },
+    orientation: {
+      vertical: {
+        container: "uy:flex-col uy:self-stretch",
+        line: "uy:min-h-200 uy:w-0 uy:border-l-2"
+      },
+      // Horizontal: renders as vertical on mobile, horizontal on desktop
+      horizontal: {
+        container: "uy:flex-col uy:self-stretch uy:md:flex-row uy:md:w-full uy:md:h-300 uy:md:self-auto",
+        line: "uy:min-h-200 uy:w-0 uy:border-l-2 uy:md:min-h-0 uy:md:min-w-200 uy:md:h-0 uy:md:w-auto uy:md:border-l-0 uy:md:border-t-2"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      state: "current",
+      type: "numbered",
+      className: {
+        ball: "uy:bg-surface-primary uy:border-transparent",
+        number: "uy:text-content-inverted-active"
+      }
+    },
+    {
+      state: "pending",
+      type: "numbered",
+      className: {
+        ball: "uy:bg-surface-neutral-lowest uy:border-border-neutral-low",
+        number: "uy:text-content-neutral"
+      }
+    }
+  ],
+  defaultVariants: {
+    state: "pending",
+    type: "default",
+    orientation: "vertical"
+  }
+}), y = e({
+  base: "uy:flex uy:flex-col uy:gap-100 uy:items-start",
+  variants: {
+    orientation: {
+      vertical: "uy:flex-1 uy:pb-300",
+      // Horizontal: renders as vertical on mobile (pb-300), horizontal on desktop (pr-400)
+      horizontal: "uy:flex-1 uy:pb-300 uy:md:pb-0 uy:md:pr-400"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+export {
+  r as timeline,
+  y as timelineContent,
+  n as timelineMarker,
+  u as timelineStep
+};

package/dist/esm/components/timeline/parts/TimelineMarker.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { timelineMarker } from '../Timeline.variants.js';
+export type TimelineMarkerProps = {
+    /**
+     * State of the timeline step
+     * @default 'pending'
+     */
+    state?: VariantProps<typeof timelineMarker>['state'];
+    /**
+     * Step number to display (for numbered timelines)
+     */
+    stepNumber?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+};
+/**
+ * TimelineMarker displays the visual indicator for a timeline step
+ * Shows a check icon when completed, a number for numbered timelines, or an empty circle
+ */
+export declare const TimelineMarker: import('react').ForwardRefExoticComponent<TimelineMarkerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/timeline/parts/TimelineMarker.js

@@ -0,0 +1,26 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { useTimelineContext as N } from "../Timeline.context.js";
+import { timelineMarker as k } from "../Timeline.variants.js";
+import v from "./check.svg.js";
+const x = f(
+  ({ state: i = "pending", stepNumber: r, className: m }, t) => {
+    const { type: n, orientation: s } = N(), { container: d, icon: l, ball: c, number: h, line: p } = k({
+      state: i,
+      type: n,
+      orientation: s,
+      className: m
+    }), a = i === "completed", u = n === "numbered" && !a && r !== void 0;
+    return /* @__PURE__ */ o("div", { ref: t, className: d(), "aria-hidden": "true", children: [
+      /* @__PURE__ */ o("div", { className: c(), children: [
+        a && /* @__PURE__ */ e(v, { className: l(), "aria-hidden": "true" }),
+        u && /* @__PURE__ */ e("span", { className: h(), "aria-hidden": "true", children: r })
+      ] }),
+      /* @__PURE__ */ e("div", { className: p(), "data-timeline-line": !0 })
+    ] });
+  }
+);
+x.displayName = "TimelineMarker";
+export {
+  x as TimelineMarker
+};

package/dist/esm/components/timeline/parts/TimelineStep.context.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type TimelineStepContextValue = {
+    /**
+     * Unique ID for the step label, used for aria-labelledby
+     */
+    labelId: string;
+};
+export declare function TimelineStepProvider({ labelId, children, }: {
+    labelId: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTimelineStepContext(): TimelineStepContextValue;
+export {};

package/dist/esm/components/timeline/parts/TimelineStep.context.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as o, useContext as r } from "react";
+const t = o(null);
+function l({
+  labelId: e,
+  children: n
+}) {
+  return /* @__PURE__ */ i(t.Provider, { value: { labelId: e }, children: n });
+}
+function p() {
+  const e = r(t);
+  if (!e)
+    throw new Error(
+      "useTimelineStepContext must be used within TimelineStepProvider"
+    );
+  return e;
+}
+export {
+  l as TimelineStepProvider,
+  p as useTimelineStepContext
+};

package/dist/esm/components/timeline/parts/TimelineStep.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export type TimelineStepProps = {
+    /**
+     * State of the timeline step
+     * @default 'pending'
+     */
+    state?: 'completed' | 'current' | 'pending';
+    /**
+     * Step number for numbered timelines
+     */
+    stepNumber?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Optional status slot to display next to the title (vertical orientation or horizontal mobile)
+     * or at the bottom of the content (horizontal desktop)
+     * Typically a Badge component, but can be any ReactNode
+     */
+    statusSlot?: ReactNode;
+    /**
+     * Optional action slot for links or actions
+     * Displayed after the description and statusSlot
+     * Typically a Link component, but can be any ReactNode
+     */
+    actionSlot?: ReactNode;
+    /**
+     * Step content (typically TimelineStepHeader, TimelineStepDescription, etc.)
+     */
+    children?: ReactNode;
+};
+/**
+ * TimelineStep represents a single step in the timeline
+ * Automatically renders the TimelineMarker with the correct state and stepNumber
+ * Announces the step status to screen readers using i18n translations
+ */
+export declare const TimelineStep: import('react').ForwardRefExoticComponent<TimelineStepProps & import('react').RefAttributes<HTMLLIElement>>;

package/dist/esm/components/timeline/parts/TimelineStep.js

@@ -0,0 +1,52 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { forwardRef as g, useId as o } from "react";
+import { useIntl as y } from "react-intl";
+import { useTimelineContext as M } from "../Timeline.context.js";
+import { timelineStep as b } from "../Timeline.variants.js";
+import { TimelineMarker as T } from "./TimelineMarker.js";
+import { TimelineStepProvider as I } from "./TimelineStep.context.js";
+import { TimelineStepContent as S } from "./TimelineStepContent.js";
+const x = g(
+  ({
+    state: t = "pending",
+    stepNumber: s,
+    className: m,
+    statusSlot: a,
+    actionSlot: l,
+    children: d
+  }, p) => {
+    const i = y(), { orientation: c } = M(), n = o(), r = o(), f = {
+      completed: i.formatMessage({
+        id: "unity:component:timeline:state:completed",
+        defaultMessage: "Completed"
+      }),
+      current: i.formatMessage({
+        id: "unity:component:timeline:state:current",
+        defaultMessage: "In progress"
+      }),
+      pending: i.formatMessage({
+        id: "unity:component:timeline:state:pending",
+        defaultMessage: "Pending"
+      })
+    };
+    return /* @__PURE__ */ u(
+      "li",
+      {
+        ref: p,
+        className: b({ orientation: c, className: m }),
+        "aria-current": t === "current" ? "step" : void 0,
+        "aria-labelledby": n,
+        "aria-describedby": r,
+        children: [
+          /* @__PURE__ */ e(T, { state: t, stepNumber: s }),
+          /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: f[t] }),
+          /* @__PURE__ */ e(I, { labelId: n, children: /* @__PURE__ */ e(S, { statusSlot: a, actionSlot: l, children: d }) })
+        ]
+      }
+    );
+  }
+);
+x.displayName = "TimelineStep";
+export {
+  x as TimelineStep
+};

package/dist/esm/components/timeline/parts/TimelineStepContent.context.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren, ReactNode } from 'react';
+/**
+ * TimelineStepContent-specific context
+ * Provides content data (statusSlot) to nested components like TimelineStepHeader
+ *
+ * Note: This context is separate from TimelineContext to maintain single responsibility:
+ * - TimelineContext: Global configuration (orientation, type) - used by all components
+ * - TimelineStepContentContext: Content-specific data (statusSlot) - scoped to TimelineStepContent only
+ *
+ * This separation ensures that content-level data doesn't pollute the global Timeline context
+ * and allows TimelineStepContent to manage its own internal state independently.
+ */
+export interface TimelineStepContentContextValue {
+    statusSlot?: ReactNode;
+}
+export declare const TimelineStepContentContext: import('react').Context<TimelineStepContentContextValue | null>;
+export declare function TimelineStepContentProvider({ children, statusSlot, }: PropsWithChildren<TimelineStepContentContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useTimelineStepContentContext(): TimelineStepContentContextValue;

package/dist/esm/components/timeline/parts/TimelineStepContent.context.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as i, createContext as r } from "react";
+const t = r(null);
+function C({
+  children: e,
+  statusSlot: n
+}) {
+  return /* @__PURE__ */ o(t.Provider, { value: { statusSlot: n }, children: e });
+}
+function l() {
+  const e = i(t);
+  if (!e)
+    throw new Error(
+      "useTimelineStepContentContext must be used within TimelineStepContent"
+    );
+  return e;
+}
+export {
+  t as TimelineStepContentContext,
+  C as TimelineStepContentProvider,
+  l as useTimelineStepContentContext
+};

package/dist/esm/components/timeline/parts/TimelineStepContent.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export type TimelineStepContentProps = {
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Content to display (typically TimelineStepHeader, TimelineStepDescription, etc.)
+     */
+    children?: ReactNode;
+    /**
+     * Optional status slot to display next to the title (vertical orientation or horizontal mobile)
+     * or at the bottom of the content (horizontal desktop)
+     * Typically a Badge component, but can be any ReactNode
+     */
+    statusSlot?: ReactNode;
+    /**
+     * Optional action slot for links or actions
+     * Displayed after the description and statusSlot
+     * Typically a Link component, but can be any ReactNode
+     */
+    actionSlot?: ReactNode;
+};
+/**
+ * TimelineStepContent wraps the content area of a timeline step
+ */
+export declare const TimelineStepContent: import('react').ForwardRefExoticComponent<TimelineStepContentProps & import('react').RefAttributes<HTMLDivElement>>;