trepur_components 2.4.1 → 2.4.3

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

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react';
+import { Search } from '.';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        leftIconProps: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        rightIconProps: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        placeholder: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        text: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+    args: {
+        placeholder: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Search>;
+export declare const Default: Story;

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

@@ -1,4 +1,5 @@
-import { IconProps } from 'src/components/Icon';
+import { IconProps } from '../Icon';
+
 export interface Props {
     id?: string;
     className?: string;

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

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+import { Select } from '.';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & {
+            value: string;
+        } & import('react').RefAttributes<HTMLLIElement>>;
+    };
+    parameters: {};
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;

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

@@ -1,11 +1,18 @@
-export interface SelectProps {
-    id?: string;
-    className?: string;
-    options: string[];
-    label: string;
-    value?: string;
-    onClick?: any;
-    fullWidth?: boolean;
-    required?: boolean;
+import { HTMLAttributes } from 'react';
+
+export interface SelectContextProps {
+    loading?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onChange?: (value: string) => void;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    internalValue: string;
+    setInternalValue: (val: string) => void;
 }
-export declare const Select: ({ id, className, options, value, label, onClick, required, fullWidth }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+        value: string;
+    } & import('react').RefAttributes<HTMLLIElement>>;
+};
+export { Select };

package/lib/components/Select/index.js

@@ -1,68 +1,149 @@
-import { jsxs as r, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { Icon as D } from "../Icon/index.js";
-import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
-import s from "classnames";
-const A = ({
-  id: h,
-  className: m,
-  options: l,
-  value: a,
-  label: f,
-  onClick: w,
-  required: x = !1,
-  fullWidth: c = !1
-}) => {
-  const [n, i] = d(!1), [u, b] = d(
-    a !== void 0 ? a : l == null ? void 0 : l[0]
-  ), p = (t) => {
-    w(t.target.textContent), b(t.target.textContent), i(!1);
-  }, o = s({
-    "w-full": c,
-    "sm:w-72": !c
-  }), g = s(
-    o,
-    m,
-    "w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4"
-  ), v = s(
-    o,
-    "absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll"
-  ), C = "bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2";
-  return /* @__PURE__ */ r(y, { children: [
-    /* @__PURE__ */ r(
-      "div",
-      {
-        id: h,
-        className: g,
-        onClick: () => {
-          i(!n);
-        },
-        children: [
-          /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ r("div", { className: "absolute mt-2 flex bg-white text-xs font-thin", children: [
-              /* @__PURE__ */ e("p", { children: f }),
-              x && /* @__PURE__ */ e("p", { className: "font-semiBold text-error", children: " *" })
-            ] }),
-            /* @__PURE__ */ e("p", { className: "border-ink text-ink flex justify-between rounded-xl bg-white pb-1 pt-6", children: u })
-          ] }),
-          /* @__PURE__ */ e(D, { colour: "ink", icon: j })
-        ]
-      }
-    ),
-    n && /* @__PURE__ */ e("div", { className: s("relative z-20", o), children: /* @__PURE__ */ e("ul", { className: v, children: l == null ? void 0 : l.map((t, N) => /* @__PURE__ */ e(
-      "li",
-      {
-        className: C,
-        value: t,
-        onClick: (k) => {
-          p(k);
-        },
-        children: t
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as i, useState as N, useCallback as b, useEffect as M, createContext as V, useContext as p } from "react";
+import c from "clsx";
+import { Input as u } from "../Input/index.js";
+import { Card as z } from "../Card/index.js";
+import { Button as y } from "../Button/index.js";
+import { faCaretDown as A } from "@fortawesome/fontawesome-free-solid";
+const m = V(null), v = i(
+  ({
+    id: l,
+    open: a,
+    defaultOpen: r,
+    onOpenChange: t,
+    onChange: e,
+    className: n,
+    children: d,
+    loading: k,
+    ...T
+  }) => {
+    const [h, B] = N(a ?? r), [f, S] = N(""), x = b(
+      (s) => {
+        B(s), t == null || t(s);
       },
-      `key_${N}`
-    )) }) })
-  ] });
-};
+      [t]
+    ), D = {
+      loading: k,
+      open: h,
+      setOpen: x,
+      internalValue: f,
+      setInternalValue: S
+    };
+    M(
+      () => x(a ?? r ?? !1),
+      [a, r, x]
+    );
+    const L = b(
+      (s) => {
+        f.includes(s) ? (S(""), e == null || e("")) : (S(s), e == null || e(s));
+      },
+      [f, e]
+    );
+    return /* @__PURE__ */ o(m.Provider, { value: D, children: /* @__PURE__ */ I("div", { className: "grid gap-1", children: [
+      /* @__PURE__ */ o(
+        w,
+        {
+          id: l,
+          className: n,
+          onChange: () => L,
+          ...T,
+          children: d
+        }
+      ),
+      /* @__PURE__ */ o(g, { children: d })
+    ] }) });
+  }
+), E = i(({ className: l, ...a }, r) => {
+  const { open: t, setOpen: e } = p(m) || {};
+  return /* @__PURE__ */ o(
+    y,
+    {
+      ref: r,
+      className: l,
+      "aria-label": "toggle open",
+      onClick: () => e == null ? void 0 : e(!t),
+      variant: "ghost",
+      size: "sm",
+      ...a,
+      children: /* @__PURE__ */ o(
+        y.Icon,
+        {
+          className: c("transition-transform duration-300 ease-in-out", {
+            "rotate-180 transform": t
+          }),
+          icon: A
+        }
+      )
+    }
+  );
+}), w = i(({ className: l }, a) => {
+  const { open: r, setOpen: t, internalValue: e } = p(m) || {};
+  return /* @__PURE__ */ I(
+    u,
+    {
+      className: c(
+        "w-full rounded-md bg-white caret-transparent ",
+        l
+      ),
+      ref: a,
+      "data-open": r,
+      placeholder: "boo",
+      value: e ?? "",
+      children: [
+        /* @__PURE__ */ o(u.Label, { children: "sdfgh" }),
+        /* @__PURE__ */ o(
+          u.Wrapper,
+          {
+            onClick: () => t == null ? void 0 : t(!r),
+            onBlur: () => t == null ? void 0 : t(!1),
+            className: c(
+              "caret-transparent rounded hover:cursor-pointer data-[open=true]:border-primary data-[open=true]:ring-1 data-[open=true]:ring-primary",
+              l
+            ),
+            children: /* @__PURE__ */ o(u.Actions, { children: /* @__PURE__ */ o(E, {}) })
+          }
+        )
+      ]
+    }
+  );
+}), g = i(({ children: l, className: a, ...r }, t) => {
+  const { open: e } = p(m) || {};
+  return e ? /* @__PURE__ */ o(
+    z,
+    {
+      ref: t,
+      className: c(
+        "!px-0 data-[state=open]:animate-in w-full data-[state=open]:fade-in-0",
+        a
+      ),
+      ...r,
+      children: /* @__PURE__ */ o("ul", { children: l })
+    }
+  ) : null;
+}), j = i(({ children: l, value: a, className: r, ...t }, e) => {
+  const { setInternalValue: n } = p(m) || {};
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      ref: e,
+      className: c(
+        "hover:cursor-pointer hover:bg-gray-100 w-full py-2 px-4",
+        r
+      ),
+      value: a,
+      onMouseDown: (d) => n == null ? void 0 : n(d.target.innerHTML),
+      ...t,
+      children: l
+    }
+  );
+});
+v.displayName = "Select";
+g.displayName = "Select.Content";
+w.displayName = "Select.Trigger";
+j.displayName = "Select.Item";
+const J = Object.assign(v, {
+  Item: j
+});
 export {
-  A as Select
+  J as Select
 };

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { Showcase } from '.';
+
+declare const meta: {
+    title: string;
+    component: ({ title, subTitle, description, size, iconProps }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        title: string;
+        subTitle: string;
+        description: string;
+        bgColour: "white";
+        size: "large";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Showcase>;
+export declare const Default: Story;

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

@@ -1,5 +1,6 @@
-import { IconProps } from 'src/components/Icon';
+import { IconProps } from '../Icon';
 import { Colours } from '../../utils/controls';
+
 export interface Props {
     id: string;
     className?: string;

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

@@ -0,0 +1,40 @@
+import { StoryObj } from '@storybook/react';
+import { SideNav } from '.';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, children, showNav, leftExpand }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
+    };
+    argTypes: {
+        bgColour: {
+            type: {
+                name: "string";
+                required: false;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: string;
+        };
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+        showNav: true;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof SideNav>;
+export declare const Default: Story;

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

@@ -1,4 +1,5 @@
 import { Colours } from '../../utils/controls';
+
 export interface Props {
     id: string;
     className: string;

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

@@ -0,0 +1,83 @@
+import { StoryObj } from '@storybook/react';
+import { SocialButton } from '.';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, onClick, type, href, openInNewTab }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        onClick: {
+            type: {
+                name: "function";
+                required: false;
+            };
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        type: {
+            type: {
+                name: "string";
+                required: false;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: {
+                type: string;
+            };
+        };
+        href: {
+            type: {
+                name: "string";
+                required: false;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        openInNewTab: {
+            type: {
+                name: "boolean";
+                required: false;
+            };
+            description: string;
+            defaultValue: string;
+        };
+    };
+    args: {
+        type: "facebook";
+        href: string;
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof SocialButton>;
+export declare const Default: Story;

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

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 export interface Props {
     id?: string;
     className?: string;

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

@@ -0,0 +1,21 @@
+import { SplitCard } from './';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').SplitCardContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        LeftContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        RightContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof SplitCard>;
+export declare const Default: Story;
+export declare const swapDesktop: Story;
+export declare const swapMobile: Story;
+export declare const loading: Story;

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+
 export interface SplitCardContextProps {
     swapDesktop?: boolean;
     swapMobile?: boolean;

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+import { Stars } from '.';
+
+declare const meta: {
+    title: string;
+    component: any;
+    args: {
+        stars: number;
+        size: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Stars>;
+export declare const Default: Story;

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+import { Testimonial } from '.';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Section: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Position: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Date: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        AuthorDetails: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Testimonial>;
+export declare const Default: Story;

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { ImageProps } from 'src/components/Image';
+import { ImageProps } from '../Image';
+
 declare const Testimonial: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
     Image: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
     Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+import { TextArea } from '.';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').TextAreaContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            required?: boolean;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        Box: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Validation: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    args: {
+        placeholder: string;
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+
 export interface TextAreaContextProps {
     autoComplete?: string;
     disabled?: boolean;

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+import { Timeline } from '.';
+
+declare const meta: {
+    title: 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: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const Default: Story;

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+
 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> & {

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

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+import { Tubestops } from '.';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').TubestopsContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & 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>>;
+        Controls: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Body: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            stopId: number;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Tubestops>;
+export declare const Default: Story;

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+
 export interface TubestopsContextProps {
     totalStops?: number;
     setTotalStops?: (stop: number) => void;