trepur_components 2.3.8 → 2.3.10

package/lib/components/Timeline/Timeline.stories.d.ts

@@ -1,79 +1,19 @@
-import { Props as imageProps } from '../Image';
 import { Timeline } from '.';
 import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, title, description, bgColour, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {
-        isHorizontal: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        useImages: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        items: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Dot: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            index: number;
+            length: number;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     };
+    parameters: {};
     args: {
-        title: string;
-        description: string;
-        isHorizontal: boolean;
-        reverse: boolean;
-        items: {
-            component: any;
-            centerImageProps: imageProps;
-        }[];
-        textCenter: boolean;
-        useImages: boolean;
-        horizontalComponentClasses: string;
-        isSm: boolean;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

package/lib/components/Timeline/index.d.ts

@@ -1,17 +1,11 @@
-import { Colours } from '../../utils/controls';
+import { HTMLAttributes } from 'react';
 
-export interface Props {
-    id?: string;
-    className?: string;
-    title?: string;
-    description?: string;
-    bgColour?: Colours;
-    isHorizontal?: boolean;
-    items?: object[];
-    reverse?: boolean;
-    textCenter?: boolean;
-    useImages?: boolean;
-    horizontalComponentClasses?: string;
-    isSm?: boolean;
-}
-export declare const Timeline: ({ id, className, title, description, bgColour, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Timeline: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Dot: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        index: number;
+        length: number;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Timeline };

package/lib/components/Timeline/index.js

@@ -1,172 +1,31 @@
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Column as p } from "../Column/index.js";
-import { ComponentWrapper as I } from "../ComponentWrapper/index.js";
-import { Image as v } from "../Image/index.js";
-import { Row as h } from "../Row/index.js";
-import m from "classnames";
-const E = ({
-  id: g,
-  className: y,
-  title: C,
-  description: j,
-  bgColour: _,
-  isHorizontal: o = !1,
-  items: s,
-  reverse: c = !1,
-  textCenter: $,
-  useImages: x = !0,
-  horizontalComponentClasses: N,
-  isSm: r = !1
-}) => {
-  const P = m(y, "w-full list-none pb-4"), A = m(
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import l from "clsx";
+const o = t(({ id: e, className: m, children: i }, d) => /* @__PURE__ */ n("div", { ref: d, id: e, className: m, children: i })), r = t(
+  ({ id: e, children: m }, i) => /* @__PURE__ */ n("div", { ref: i, id: e, className: "flex", children: m })
+), s = t(({ className: e, index: m, length: i }) => /* @__PURE__ */ c("div", { className: "hidden sm:block", children: [
+  /* @__PURE__ */ n(
+    "p",
     {
-      "flex-row justify-between none-reverse": !c && o,
-      "flex-col none-reverse": !c && !o,
-      "flex-row justify-between reverse": c && o,
-      "flex-col reverse": c && !o
-    },
-    y,
-    "relative flex list-none pl-0 status-flow timeline"
-  ), w = m(
-    {
-      "text-center": $,
-      "flex-col items-center justify-between": !c && o,
-      "flex-row none-reverse": !c && !o,
-      "flex-col-reverse items-center": c && o,
-      "flex-row-reverse": c && !o
-    },
-    "relative flex flex-auto flex-row leading-tight status-flow-item"
-  ), k = m(
-    {
-      "horizontal collapse": o && r,
-      horizontal: o && !r,
-      vertical: !o
-    },
-    "mx-auto my-16 h-4 w-4 rounded-full border bg-black text-center"
-  );
-  return /* @__PURE__ */ l(
-    I,
+      className: l("z-10 m-auto mt-12 h-4 w-4 rounded-full", e)
+    }
+  ),
+  /* @__PURE__ */ n(
+    "div",
     {
-      id: g,
-      className: P,
-      title: C,
-      description: j,
-      bgColour: _,
-      children: /* @__PURE__ */ l("div", { className: A, children: s == null ? void 0 : s.map((t, i) => {
-        let a;
-        i % 2 === 0 ? a = !0 : a = !1;
-        let e;
-        s.length - 1 > 0 && (i === 0 ? e = "first-circle" : i === s.length - 1 ? e = "last-circle" : e = "circle");
-        let d;
-        (e === "circle" && r || e === "circle" && !r || e === "last-circle" && r || e === "last-circle" && !r) && (d = "absolute top-0 block h-1/2 border-2 border-solid border-primary");
-        let b;
-        (e === "circle" && r || e === "circle" && !r || e === "first-circle" && r || e === "first-circle" && !r) && (b = "absolute bottom-0 block h-1/2 border-2 border-solid border-primary");
-        let n;
-        e === "circle" && r ? n = "" : e === "circle" && !r ? n = "absolute top-1/2 block border-2 border-solid border-primary" : e === "last-circle" && r ? n = "" : e === "last-circle" && !r && (n = "absolute top-1/2 block border-2 border-solid border-primary");
-        let f;
-        e === "circle" && r ? f = "" : e === "circle" && !r ? f = "absolute top-1/2 block border-2 border-solid border-primary" : e === "first-circle" && r ? f = "" : e === "first-circle" && !r && (f = "absolute top-1/2 block border-2 border-solid border-primary");
-        const B = m(
-          N,
-          "pt-12"
-        );
-        return o ? /* @__PURE__ */ u(
-          p,
-          {
-            id: "timeline-item",
-            className: `${w} mb-8 py-4`,
-            children: [
-              /* @__PURE__ */ l(h, { className: N, children: a && t.component }),
-              /* @__PURE__ */ l(h, { children: x ? /* @__PURE__ */ u(
-                "div",
-                {
-                  id: e,
-                  className: o ? "horizontal my-0 py-0" : "vertical",
-                  children: [
-                    /* @__PURE__ */ l("span", { className: n }),
-                    /* @__PURE__ */ l(
-                      v,
-                      {
-                        ...t.centerImageProps,
-                        className: "relative z-10"
-                      }
-                    ),
-                    /* @__PURE__ */ l("span", { className: f })
-                  ]
-                }
-              ) : /* @__PURE__ */ l("p", { id: e, className: k }) }),
-              /* @__PURE__ */ l(h, { className: B, children: !a && t.component })
-            ]
-          },
-          `horizontal_col_${i + 0}`
-        ) : /* @__PURE__ */ u(
-          h,
-          {
-            id: "timeline-item",
-            className: `${w} py-4`,
-            children: [
-              !r && /* @__PURE__ */ l(
-                p,
-                {
-                  sm: 5,
-                  md: 5,
-                  lg: 5,
-                  xl: 5,
-                  className: "my-auto text-center",
-                  children: a && t.component
-                }
-              ),
-              /* @__PURE__ */ l(
-                p,
-                {
-                  sm: 2,
-                  md: 2,
-                  lg: 2,
-                  xl: 2,
-                  id: "circle-wrapper",
-                  className: "my-auto",
-                  children: x ? /* @__PURE__ */ u("div", { id: e, className: "vertical", children: [
-                    /* @__PURE__ */ l("span", { className: d }),
-                    /* @__PURE__ */ l(
-                      v,
-                      {
-                        ...t.centerImageProps,
-                        className: "relative z-10"
-                      }
-                    ),
-                    /* @__PURE__ */ l("span", { className: b })
-                  ] }) : /* @__PURE__ */ l("p", { id: e, className: k })
-                }
-              ),
-              r && /* @__PURE__ */ l(
-                p,
-                {
-                  sm: 10,
-                  md: 10,
-                  lg: 10,
-                  xl: 10,
-                  className: "my-auto text-center",
-                  children: t.component
-                }
-              ),
-              !r && /* @__PURE__ */ l(
-                p,
-                {
-                  sm: 5,
-                  md: 5,
-                  lg: 5,
-                  xl: 5,
-                  className: "my-auto text-center",
-                  children: !a && t.component
-                }
-              )
-            ]
-          },
-          `vertical_row_${i + 0}`
-        );
-      }) })
+      className: m !== i - 1 ? l("m-auto h-full w-1", e) : "border-r-2 border-transparent"
     }
-  );
-};
+  )
+] })), a = t(({ children: e }) => /* @__PURE__ */ n("div", { className: "my-2 w-full sm:ml-8", children: e }));
+o.displayName = "Timeline";
+r.displayName = "Timeline.Item";
+s.displayName = "Timeline.Dot";
+a.displayName = "Timeline.Content";
+const T = Object.assign(o, {
+  Item: r,
+  Dot: s,
+  Content: a
+});
 export {
-  E as Timeline
+  T as Timeline
 };

package/lib/components/Tubestops/Tubestops.stories.d.ts

@@ -3,50 +3,15 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, items, activeStop }: import('.').TubestopsProps) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        items: {
-            description: string;
-        };
-        activeStop: {
-            description: string;
-        };
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').TubestopsContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Stop: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            stopId: number;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };
     args: {
-        items: string[];
         activeStop: number;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

package/lib/components/Tubestops/index.d.ts

@@ -1,8 +1,15 @@
-import { Colours } from '../../utils/controls';
+import { HTMLAttributes } from 'react';
 
-export interface TubestopsProps extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-    items?: string[];
-    bgColour?: Colours;
+export interface TubestopsContextProps {
+    stops?: number;
     activeStop?: number;
+    currentStop?: number;
+    setCurrentStop?: (stop: number) => void;
 }
-export declare const Tubestops: ({ id, items, activeStop }: TubestopsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tubestops: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & TubestopsContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Stop: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        stopId: number;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { Tubestops };

package/lib/components/Tubestops/index.js

@@ -1,44 +1,77 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import m from "classnames";
-const o = ({ id: d, items: r, activeStop: s = 1 }) => /* @__PURE__ */ e("div", { id: d, className: "flex py-4", children: r == null ? void 0 : r.map((n, l) => /* @__PURE__ */ t("div", { className: "w-full min-w-[120px]", children: [
-  /* @__PURE__ */ e(
-    "div",
-    {
-      className: m({
-        "ml-1/2 mt-4 h-1 w-full bg-border-light": l >= s - 1 && l < r.length - 1,
-        "ml-1/2 mt-4 h-1 w-full bg-success": l < s - 1 && l < r.length - 1
-      })
-    }
-  ),
-  /* @__PURE__ */ e(
-    "p",
-    {
-      className: m(
-        {
-          "-mt-4 bg-success": l + 1 < s,
-          "-mt-4 bg-gold": s === l + 1,
-          "-mt-4 bg-border-light": l + 1 > s,
-          "mt-1": l === r.length - 1
-        },
-        "z-10 mx-auto h-6 w-6 rounded-full"
-      )
-    }
-  ),
-  /* @__PURE__ */ e(
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { createContext as b, forwardRef as m, useState as x, Children as C, useMemo as f, useContext as c } from "react";
+import l from "clsx";
+const i = b(null), v = b(
+  null
+), T = m(({ className: n, children: t, activeStop: r = 0 }, s) => {
+  const [e, o] = x(r), a = C.count(t), p = f(
+    () => ({
+      stops: a ?? 0,
+      currentStop: e,
+      setCurrentStop: o
+    }),
+    [e, o]
+  );
+  return /* @__PURE__ */ u(i.Provider, { value: p, children: /* @__PURE__ */ u("div", { ref: s, className: l("flex py-4", n), children: t }) });
+}), N = m(({ className: n, stopId: t = 0, children: r }, s) => {
+  const { currentStop: e = 0, stops: o = 0 } = c(i) || {}, [a] = x(t), p = f(
+    () => ({
+      stopNumber: a
+    }),
+    [a]
+  );
+  return /* @__PURE__ */ u(v.Provider, { value: p, children: /* @__PURE__ */ d("div", { ref: s, className: l(n, "w-full min-w-[120px]"), children: [
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: l({
+          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-future": t >= e && t < o,
+          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-complete": t < e && t < o
+        })
+      }
+    ),
+    /* @__PURE__ */ u(
+      "p",
+      {
+        className: l(
+          {
+            "relative z-20 -mt-4 bg-tubestop-station-complete": t < e,
+            "relative z-20 -mt-4 bg-tubestop-station-active": e === t,
+            "relative z-20 -mt-4 bg-tubestop-station-future": t > e,
+            "mt-1": t === o
+          },
+          "z-10 mx-auto h-6 w-6 rounded-full"
+        )
+      }
+    ),
+    r
+  ] }) });
+}), S = m(({ className: n, children: t }, r) => {
+  const { currentStop: s = 0 } = c(i) || {}, { stopNumber: e = 0 } = c(v) || {};
+  return /* @__PURE__ */ u(
     "p",
     {
-      className: m(
+      ref: r,
+      className: l(
+        "mt-2 text-center",
         {
-          "font-medium text-success": l + 1 < s,
-          "font-bold text-gold": s === l + 1,
-          "font-medium text-border-light": l + 1 > s
+          "font-medium text-tubestop-text-complete": e < s,
+          "font-bold text-tubestop-text-active": s === e,
+          "font-medium text-tubestop-text-future": e > s
         },
-        "mt-2 text-center"
+        n
       ),
-      children: n
+      children: t
     }
-  )
-] }, `tubestop-stop-${l}`)) });
+  );
+});
+T.displayName = "Tubestop";
+N.displayName = "Tubestops.Stop";
+S.displayName = "Tubestops.Text";
+const y = Object.assign(T, {
+  Stop: N,
+  Text: S
+});
 export {
-  o as Tubestops
+  y as Tubestops
 };

package/lib/components/Video/Video.stories.d.ts

@@ -1,49 +1,23 @@
-import { Video } from '.';
 import { StoryObj } from '@storybook/react';
+import { Video } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, autoPlay, muted, poster, mp4File, webmFile, ogvFile, height, width, withControls, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLVideoElement> & import('./').VideoProps & import('react').RefAttributes<HTMLVideoElement>> & {
+        File: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLSourceElement> & {
+            src: string;
+            type: "video/mp4" | "video/webm" | "video/ogv";
+        } & import('react').RefAttributes<HTMLSourceElement>>;
     };
     args: {
-        withControls: boolean;
-        autoPlay: boolean;
-        muted: boolean;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;
 type Story = StoryObj<typeof Video>;
 export declare const Default: Story;
+export declare const Mp4: Story;
+export declare const withControls: Story;
+export declare const Muted: Story;
+export declare const autoPlay: Story;
+export declare const withPoster: Story;

package/lib/components/Video/index.d.ts

@@ -1,15 +1,18 @@
-export interface Props {
-    id?: string;
-    className?: string;
+import { HTMLAttributes } from 'react';
+
+export interface VideoProps {
     autoPlay?: boolean;
     muted?: boolean;
     poster?: string;
     mp4File?: string;
     webmFile?: string;
-    ogvFile?: string;
-    height?: string;
-    width?: string;
     withControls?: boolean;
     withPoster?: boolean;
 }
-export declare const Video: ({ id, className, autoPlay, muted, poster, mp4File, webmFile, ogvFile, height, width, withControls, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Video: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLVideoElement> & VideoProps & import('react').RefAttributes<HTMLVideoElement>> & {
+    File: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSourceElement> & {
+        src: string;
+        type: 'video/mp4' | 'video/webm' | 'video/ogv';
+    } & import('react').RefAttributes<HTMLSourceElement>>;
+};
+export { Video };

package/lib/components/Video/index.js

@@ -1,34 +1,32 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-const y = ({
-  id: s,
-  className: c,
-  autoPlay: t,
-  muted: d,
-  poster: i,
-  mp4File: p,
-  webmFile: r,
-  ogvFile: e,
-  height: n,
-  width: u,
-  withControls: v
-}) => /* @__PURE__ */ m(
-  "video",
-  {
-    id: s,
-    className: c,
-    poster: i,
-    width: u,
-    height: n,
-    controls: v,
-    autoPlay: t,
-    muted: d,
-    children: [
-      /* @__PURE__ */ o("source", { src: p, type: "video/mp4" }),
-      r !== null && /* @__PURE__ */ o("source", { src: r, type: "video/webm" }),
-      e !== void 0 && /* @__PURE__ */ o("source", { src: e, type: "video/ogg" })
-    ]
-  }
-);
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+const a = r(
+  ({
+    children: e,
+    poster: o,
+    withControls: s = !1,
+    autoPlay: i = !1,
+    muted: d = !1,
+    ...f
+  }, m) => /* @__PURE__ */ l(
+    "video",
+    {
+      className: "h-full w-full max-w-[800px]",
+      ref: m,
+      poster: o,
+      controls: s,
+      autoPlay: i,
+      muted: d,
+      ...f,
+      children: e
+    }
+  )
+), t = r(({ src: e, type: o, ...s }, i) => /* @__PURE__ */ l("source", { ref: i, src: e, type: o, ...s }));
+a.displayName = "Video";
+t.displayName = "Video.File";
+const p = Object.assign(a, {
+  File: t
+});
 export {
-  y as Video
+  p as Video
 };