trepur_components 2.3.6 → 2.3.8

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

@@ -0,0 +1,17 @@
+import { Colours } from '../../utils/controls';
+
+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;

package/lib/components/Timeline/index.js

@@ -0,0 +1,172 @@
+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(
+    {
+      "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,
+    {
+      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}`
+        );
+      }) })
+    }
+  );
+};
+export {
+  E as Timeline
+};

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

@@ -0,0 +1,87 @@
+import { TimelineV2 } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, description, bgColour, items, }: 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;
+                };
+            };
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+        items: ({
+            preText: string;
+            title: string;
+            subtitle: string;
+            imageProps: {
+                src: string;
+            };
+            children: string;
+        } | {
+            title: string;
+            subtitle: string;
+            imageProps: {
+                src: string;
+            };
+            children: string;
+            preText?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof TimelineV2>;
+export declare const Default: Story;

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

@@ -0,0 +1,20 @@
+import { Colours } from '../../utils/controls';
+import { Props as ImageProps } from '../Image';
+
+interface Item {
+    preText?: string;
+    title?: string;
+    subtitle?: string;
+    children: any;
+    imageProps: ImageProps;
+}
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    description?: string;
+    bgColour?: Colours;
+    items?: Item[];
+}
+export declare const TimelineV2: ({ id, className, title, description, bgColour, items, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+import { Tubestops } from '.';
+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;
+                };
+            };
+        };
+    };
+    args: {
+        items: string[];
+        activeStop: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Tubestops>;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+import { Colours } from '../../utils/controls';
+
+export interface TubestopsProps extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    items?: string[];
+    bgColour?: Colours;
+    activeStop?: number;
+}
+export declare const Tubestops: ({ id, items, activeStop }: TubestopsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Tubestops/index.js

@@ -0,0 +1,44 @@
+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(
+    "p",
+    {
+      className: m(
+        {
+          "font-medium text-success": l + 1 < s,
+          "font-bold text-gold": s === l + 1,
+          "font-medium text-border-light": l + 1 > s
+        },
+        "mt-2 text-center"
+      ),
+      children: n
+    }
+  )
+] }, `tubestop-stop-${l}`)) });
+export {
+  o as Tubestops
+};

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

@@ -0,0 +1,81 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, name, description, imageProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        name: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        description: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        imageProps: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: 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;
+                };
+            };
+        };
+    };
+    args: {
+        imageProps: {
+            title: string;
+            altText: string;
+            src: string;
+        };
+        name: string;
+        description: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,10 @@
+import { Props as imageProps } from '../Image';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    name?: string;
+    description?: string;
+    imageProps?: imageProps;
+}
+export declare const UserIcon: ({ id, className, name, description, imageProps, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/UserIcon/index.js

@@ -0,0 +1,34 @@
+import { jsxs as s, jsx as c } from "react/jsx-runtime";
+import { Image as N } from "../Image/index.js";
+import t from "classnames";
+const x = ({
+  id: n,
+  className: r,
+  name: d,
+  description: e,
+  imageProps: l
+}) => {
+  const m = t(
+    {
+      className: r !== void 0
+    },
+    "flex items-center"
+  );
+  return l = {
+    ...l,
+    src: (l == null ? void 0 : l.src) !== void 0 ? l.src : "",
+    className: t(
+      l == null ? void 0 : l.className,
+      "mr-4 h-12 w-12 shrink-0 rounded-full"
+    )
+  }, /* @__PURE__ */ s("div", { id: n, className: m, children: [
+    /* @__PURE__ */ c(N, { ...l }),
+    /* @__PURE__ */ s("div", { className: "ltr:ml-3 rtl:mr-3", children: [
+      /* @__PURE__ */ c("p", { className: "text-md font-regular", children: d }),
+      /* @__PURE__ */ c("p", { className: "text-sm font-light", children: e })
+    ] })
+  ] });
+};
+export {
+  x as UserIcon
+};

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

@@ -0,0 +1,49 @@
+import { Video } from '.';
+import { StoryObj } from '@storybook/react';
+
+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;
+                };
+            };
+        };
+    };
+    args: {
+        withControls: boolean;
+        autoPlay: boolean;
+        muted: boolean;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Video>;
+export declare const Default: Story;

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

@@ -0,0 +1,15 @@
+export interface Props {
+    id?: string;
+    className?: string;
+    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;

package/lib/components/Video/index.js

@@ -0,0 +1,34 @@
+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" })
+    ]
+  }
+);
+export {
+  y as Video
+};