@payfit/unity-components 2.12.10 → 2.13.0

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

@@ -0,0 +1,18 @@
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { useTimelineContext as l } from "../Timeline.context.js";
+import { useIsHorizontalDesktop as a } from "../Timeline.utils.js";
+import { timelineContent as f } from "../Timeline.variants.js";
+import { TimelineStepContentProvider as c } from "./TimelineStepContent.context.js";
+const C = d(({ className: o, children: r, statusSlot: e, actionSlot: n }, t) => {
+  const { orientation: m } = l(), p = a();
+  return /* @__PURE__ */ i(c, { statusSlot: e, children: /* @__PURE__ */ s("div", { ref: t, className: f({ orientation: m, className: o }), children: [
+    r,
+    p && e && /* @__PURE__ */ i("div", { "aria-hidden": "true", children: e }),
+    n
+  ] }) });
+});
+C.displayName = "TimelineStepContent";
+export {
+  C as TimelineStepContent
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type TimelineStepDescriptionProps = {
+    /**
+     * Description text
+     */
+    children?: ReactNode;
+};
+/**
+ * TimelineStepDescription displays detailed description for a timeline step
+ */
+export declare const TimelineStepDescription: import('react').ForwardRefExoticComponent<TimelineStepDescriptionProps & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { Text as i } from "../../text/Text.js";
+const n = t(({ children: r }, e) => /* @__PURE__ */ o(i, { ref: e, variant: "body", color: "content.neutral", children: r }));
+n.displayName = "TimelineStepDescription";
+export {
+  n as TimelineStepDescription
+};

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { TextProps } from '../../text/Text.js';
+export type TimelineStepHeaderProps = {
+    /**
+     * Label title
+     */
+    title: string;
+    /**
+     * Optional subtitle
+     */
+    subtitle?: ReactNode;
+    /**
+     * Optional header element type
+     * @default h3
+     */
+    asHeader?: Extract<TextProps['asElement'], 'h3' | 'h4' | 'h5' | 'h6'>;
+};
+/**
+ * TimelineStepHeader groups title and subtitle together with no gap
+ * This matches the Figma design "Label container"
+ * The statusSlot from TimelineStepContent is displayed next to the title in vertical orientation
+ * or horizontal mobile, but not in horizontal desktop (where it appears at the bottom)
+ */
+export declare const TimelineStepHeader: import('react').ForwardRefExoticComponent<TimelineStepHeaderProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { Text as l } from "../../text/Text.js";
+import { useIsHorizontalDesktop as d } from "../Timeline.utils.js";
+import { useTimelineStepContext as c } from "./TimelineStep.context.js";
+import { useTimelineStepContentContext as p } from "./TimelineStepContent.context.js";
+const f = u(({ title: i, subtitle: t, asHeader: n = "h3" }, s) => {
+  const { statusSlot: o } = p(), { labelId: a } = c(), m = !d() && o;
+  return /* @__PURE__ */ r(
+    "header",
+    {
+      ref: s,
+      className: "uy:flex uy:flex-col uy:gap-0 uy:items-start uy:w-full",
+      children: [
+        /* @__PURE__ */ r("div", { className: "uy:flex uy:gap-100 uy:items-start uy:w-full", children: [
+          /* @__PURE__ */ e(
+            l,
+            {
+              variant: "bodyStrong",
+              color: "content.neutral",
+              className: "uy:flex-1",
+              asElement: n,
+              id: a,
+              children: i
+            }
+          ),
+          m && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: o })
+        ] }),
+        t && /* @__PURE__ */ e(l, { variant: "bodySmall", color: "content.neutral.lowest", children: t })
+      ]
+    }
+  );
+});
+f.displayName = "TimelineStepHeader";
+export {
+  f as TimelineStepHeader
+};

package/dist/esm/components/timeline/parts/check.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "check" }, /* @__PURE__ */ e.createElement("path", { clipRule: "evenodd", d: "M16.0669 5.80806C16.311 6.05214 16.311 6.44786 16.0669 6.69194L8.56694 14.1919C8.32286 14.436 7.92714 14.436 7.68306 14.1919L4.55806 11.0669C4.31398 10.8229 4.31398 10.4271 4.55806 10.1831C4.80214 9.93898 5.19786 9.93898 5.44194 10.1831L8.125 12.8661L15.1831 5.80806C15.4271 5.56398 15.8229 5.56398 16.0669 5.80806Z", fill: "white", fillRule: "evenodd", id: "Vector" })));
+export {
+  l as default
+};

package/dist/esm/hooks/use-breakpoint-listener.d.ts

@@ -1,2 +1,36 @@
 export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare function useBreakpointListener(): Breakpoint;
+/**
+ * Desktop breakpoints (md, lg, xl)
+ */
+export declare const DESKTOP_BREAKPOINTS: readonly ["md", "lg", "xl"];
+/**
+ * Mobile breakpoints (xs, sm)
+ */
+export declare const MOBILE_BREAKPOINTS: readonly ["xs", "sm"];
+/**
+ * Desktop breakpoint type
+ */
+export type DesktopBreakpoint = (typeof DESKTOP_BREAKPOINTS)[number];
+/**
+ * Mobile breakpoint type
+ */
+export type MobileBreakpoint = (typeof MOBILE_BREAKPOINTS)[number];
+/**
+ * Type guard to check if a breakpoint is a desktop breakpoint (md, lg, xl)
+ * @example
+ * const breakpoint = useBreakpointListener()
+ * if (isDesktopBreakpoint(breakpoint)) {
+ *   // Desktop layout
+ * }
+ */
+export declare const isDesktopBreakpoint: (breakpoint: Breakpoint) => breakpoint is DesktopBreakpoint;
+/**
+ * Type guard to check if a breakpoint is a mobile breakpoint (xs, sm)
+ * @example
+ * const breakpoint = useBreakpointListener()
+ * if (isMobileBreakpoint(breakpoint)) {
+ *   // Mobile layout
+ * }
+ */
+export declare const isMobileBreakpoint: (breakpoint: Breakpoint) => breakpoint is MobileBreakpoint;

package/dist/esm/hooks/use-breakpoint-listener.js

@@ -1,14 +1,26 @@
-import { useMediaQuery as r } from "./use-media-query.js";
-const s = (e) => {
+import { useMediaQuery as n } from "./use-media-query.js";
+const i = (e) => {
   const t = getComputedStyle(document.documentElement).getPropertyValue(
     `--uy-breakpoint-${e}`
   );
   return parseInt(t.replace("px", ""), 10);
-}, n = (e) => `(min-width: ${s(e)}px)`;
+}, r = (e) => `(min-width: ${i(e)}px)`;
 function a() {
-  const e = r(n("xl")), t = r(n("lg")), u = r(n("md")), o = r(n("sm"));
-  return e ? "xl" : t ? "lg" : u ? "md" : o ? "sm" : "xs";
+  const e = n(r("xl")), t = n(r("lg")), s = n(r("md")), o = n(r("sm"));
+  return e ? "xl" : t ? "lg" : s ? "md" : o ? "sm" : "xs";
 }
+const u = [
+  "md",
+  "lg",
+  "xl"
+], c = [
+  "xs",
+  "sm"
+], m = (e) => u.includes(e), p = (e) => c.includes(e);
 export {
+  u as DESKTOP_BREAKPOINTS,
+  c as MOBILE_BREAKPOINTS,
+  m as isDesktopBreakpoint,
+  p as isMobileBreakpoint,
   a as useBreakpointListener
 };

package/dist/esm/index.d.ts

@@ -179,6 +179,10 @@ export * from './components/task-menu/parts/TaskGroup.js';
 export * from './components/text-area/TextArea.js';
 export * from './components/text/Text.js';
 export * from './components/text/Text.variants.js';
+export * from './components/timeline/Timeline.js';
+export * from './components/timeline/parts/TimelineStep.js';
+export * from './components/timeline/parts/TimelineStepHeader.js';
+export * from './components/timeline/parts/TimelineStepDescription.js';
 export * from './components/toast/ToastManager.js';
 export * from './components/toast/toast.js';
 export * from './components/toggle-switch-group/ToggleSwitchGroup.js';