trepur_components 2.3.28 → 2.3.30

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

@@ -3,7 +3,7 @@ import { Button } from './';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<((import('react').HTMLAttributes<HTMLButtonElement> | import('react').HTMLAttributes<HTMLAnchorElement>) & import('./').ButtonProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & import('./').ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
         Icon: import('react').ForwardRefExoticComponent<{
             icon: any;
         } & import('react').RefAttributes<SVGSVGElement>>;
@@ -23,7 +23,7 @@ export declare const Bordered: Story;
 export declare const Ghost: Story;
 export declare const Basic: Story;
 export declare const Loading: Story;
-export declare const Link: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const Large: Story;
+export declare const Disabled: Story;

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

@@ -4,12 +4,12 @@ export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'basic';
     disabled?: boolean;
     loading?: boolean;
-    type?: 'button' | 'link' | 'submit';
+    type?: 'button' | 'submit';
     href?: string;
     target?: string;
     size?: 'sm' | 'md' | 'lg';
 }
-declare const Button: import('react').ForwardRefExoticComponent<((HTMLAttributes<HTMLButtonElement> | HTMLAttributes<HTMLAnchorElement>) & ButtonProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
+declare const Button: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{
         icon: any;
     } & import('react').RefAttributes<SVGSVGElement>>;

package/lib/components/Button/index.js

@@ -1,50 +1,51 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { Icon as g } from "../Icon/index.js";
-import s from "clsx";
-const l = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "button", ...e, children: o })), x = n(({ children: o, ...e }) => /* @__PURE__ */ r("div", { className: "inline-block", children: /* @__PURE__ */ r("a", { type: "button", className: "inline-grid", ...e, children: o }) })), c = n(
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Icon as p } from "../Icon/index.js";
+import c from "clsx";
+const u = s(
   ({
     className: o,
     children: e,
     loading: t = !1,
-    variant: b = "primary",
-    type: i = "button",
-    href: m,
-    target: p,
-    size: a = "md"
-  }) => /* @__PURE__ */ r(
-    i === "button" ? l : x,
+    variant: r = "primary",
+    type: g = "button",
+    disabled: b,
+    size: n = "md",
+    ...i
+  }) => /* @__PURE__ */ a(
+    "button",
     {
-      href: m,
-      target: p,
-      disabled: t,
-      className: s(
+      "aria-disabled": b,
+      disabled: t || b,
+      type: g,
+      className: c(
         "flex items-center gap-3 rounded border text-center",
         {
           "duration-200": !t,
-          "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active": b === "primary" && !t,
-          "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active": b === "secondary" && !t,
-          "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": b === "ghost" && !t,
-          "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": b === "bordered" && !t,
-          "border-button-basic-border bg-button-basic-bg text-button-basic-text hover:bg-button-basic-hover active:bg-button-basic-active": b === "basic" && !t,
+          "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active": r === "primary" && !t && !b,
+          "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active": r === "secondary" && !t,
+          "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": r === "ghost" && !t,
+          "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": r === "bordered" && !t,
+          "border-button-basic-border bg-button-basic-bg text-button-basic-text hover:bg-button-basic-hover active:bg-button-basic-active": r === "basic" && !t,
           "w-40 animate-pulse border-loading bg-loading": t,
-          "px-12 py-3 text-base font-normal leading-4": a === "sm",
-          "px-12 py-3 text-lg font-normal leading-8": a === "md",
-          "px-12 py-4 text-xl font-normal leading-8": a === "lg"
+          "px-12 py-3 text-base font-normal leading-4": n === "sm",
+          "px-12 py-3 text-lg font-normal leading-8": n === "md",
+          "px-12 py-4 text-xl font-normal leading-8": n === "lg"
         },
         o
       ),
+      ...i,
       children: !t && e
     }
   )
-), u = n(({ className: o, ...e }, t) => /* @__PURE__ */ r("p", { className: s("text-md", o), ref: t, ...e })), d = n(({ icon: o }, e) => /* @__PURE__ */ r(g, { size: "md", ref: e, icon: o }));
-c.displayName = "Button";
-d.displayName = "Button.Icon";
-u.displayName = "Button.Label";
-const N = Object.assign(c, {
-  Icon: d,
-  Label: u
+), d = s(({ className: o, ...e }, t) => /* @__PURE__ */ a("p", { className: c("text-md", o), ref: t, ...e })), m = s(({ icon: o }, e) => /* @__PURE__ */ a(p, { size: "md", ref: e, icon: o }));
+u.displayName = "Button";
+m.displayName = "Button.Icon";
+d.displayName = "Button.Label";
+const v = Object.assign(u, {
+  Icon: m,
+  Label: d
 });
 export {
-  N as Button
+  v as Button
 };

package/lib/components/Carousel/index.js

@@ -1,12 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
-import { createContext as I, forwardRef as h, useState as k, useMemo as K, useContext as b } from "react";
+import { createContext as I, forwardRef as h, useState as S, useMemo as K, useContext as b } from "react";
 import { Icon as j } from "../Icon/index.js";
 import { faChevronRight as L, faChevronLeft as O, faCircle as T } from "@fortawesome/fontawesome-free-solid";
 import m from "clsx";
 import "../../node_modules/keen-slider/keen-slider.min.css.js";
 import { useKeenSlider as $ } from "../../node_modules/keen-slider/react.js";
 import { WheelControls as M } from "./utils.js";
-const g = I(null), A = h(
+const N = I(null), A = h(
   ({
     breakpoints: s,
     children: t,
@@ -17,7 +17,7 @@ const g = I(null), A = h(
     spacing: c,
     ...i
   }, y) => {
-    const [f, u] = k(1), [x, l] = k(!1), [C, p] = $(
+    const [f, u] = S(1), [x, l] = S(!1), [C, p] = $(
       {
         breakpoints: s,
         loop: e,
@@ -34,7 +34,7 @@ const g = I(null), A = h(
         }
       },
       [M]
-    ), w = K(
+    ), g = K(
       () => ({
         sliderRef: C,
         instanceRef: p,
@@ -52,14 +52,14 @@ const g = I(null), A = h(
         n,
         x
       ]
-    ), N = (d) => {
+    ), w = (d) => {
       var v;
       d.key === "Tab" && ((v = p.current) == null || v.next());
     };
-    return /* @__PURE__ */ o(g.Provider, { value: w, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o(N.Provider, { value: g, children: /* @__PURE__ */ o(
       "div",
       {
-        onKeyDown: N,
+        onKeyDown: w,
         className: m("navigation-wrapper w-full", a),
         ref: y,
         ...i,
@@ -79,7 +79,7 @@ const g = I(null), A = h(
     children: s
   }
 )), P = h(({ className: s, children: t, ...a }) => {
-  const { sliderRef: e } = b(g) || {};
+  const { sliderRef: e } = b(N) || {};
   return /* @__PURE__ */ o(
     "div",
     {
@@ -90,13 +90,13 @@ const g = I(null), A = h(
     }
   );
 }), R = h(({ className: s, rightArrow: t = !1, ...a }, e) => {
-  const { instanceRef: n } = b(g) || {};
+  const { instanceRef: n } = b(N) || {};
   return /* @__PURE__ */ o(
     "div",
     {
       ref: e,
       className: m(
-        "my-auto text-carousel-arrow-default hover:cursor-pointer hover:text-carousel-arrow-hover",
+        "hidden md:block my-auto text-carousel-arrow-default hover:cursor-pointer hover:text-carousel-arrow-hover",
         s
       ),
       onClick: (r) => {
@@ -114,18 +114,18 @@ const g = I(null), A = h(
     loop: n,
     currentSlide: r = 1,
     perView: c = 1
-  } = b(g) || {}, i = (x = (u = (f = (y = e == null ? void 0 : e.current) == null ? void 0 : y.track) == null ? void 0 : f.details) == null ? void 0 : u.slides) == null ? void 0 : x.length;
-  return /* @__PURE__ */ o("div", { className: m("flex justify-center", s), children: [...Array(i).keys()].map((l) => {
-    var w, N, d, v;
-    const C = ((v = (d = (N = (w = e == null ? void 0 : e.current) == null ? void 0 : w.track) == null ? void 0 : N.details) == null ? void 0 : d.slides) == null ? void 0 : v.length) ?? 1, p = n ? r + c <= C ? l >= r && l < r + c : l >= r || r + c - C - 1 >= l : r === l;
+  } = b(N) || {}, i = (x = (u = (f = (y = e == null ? void 0 : e.current) == null ? void 0 : y.track) == null ? void 0 : f.details) == null ? void 0 : u.slides) == null ? void 0 : x.length;
+  return /* @__PURE__ */ o("div", { className: m("flex justify-center gap-0.5 pt-2", s), children: [...Array(i).keys()].map((l) => {
+    var g, w, d, v;
+    const C = ((v = (d = (w = (g = e == null ? void 0 : e.current) == null ? void 0 : g.track) == null ? void 0 : w.details) == null ? void 0 : d.slides) == null ? void 0 : v.length) ?? 1, p = n ? r + c <= C ? l >= r && l < r + c : l >= r || r + c - C - 1 >= l : r === l;
     return /* @__PURE__ */ o(
       "button",
       {
         ref: a,
         type: "button",
         onClick: () => {
-          var S;
-          (S = e.current) == null || S.moveToIdx(l);
+          var k;
+          (k = e.current) == null || k.moveToIdx(l);
         },
         "aria-label": `carousel-button${t.id ? `-${t.id}` : ""}`,
         children: /* @__PURE__ */ o(
@@ -136,7 +136,7 @@ const g = I(null), A = h(
               p ? "text-carousel-dots-active" : "text-carousel-dots-default"
             ),
             icon: T,
-            size: "2x"
+            size: "xl"
           }
         )
       },

package/lib/components/ImageCard/index.js

@@ -1,11 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { Image as p } from "../Image/index.js";
-import C from "clsx";
+import c from "clsx";
 const d = m(({ className: a, children: e, ...r }, n) => /* @__PURE__ */ t(
   "div",
   {
-    className: C(
+    className: c(
       "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
       a
     ),
@@ -13,14 +13,14 @@ const d = m(({ className: a, children: e, ...r }, n) => /* @__PURE__ */ t(
     ...r,
     children: e
   }
-)), s = m(({ src: a, ...e }) => /* @__PURE__ */ t("div", { className: "h-64", children: /* @__PURE__ */ t(p, { src: a, ...e }) })), o = m(({ children: a, ...e }, r) => /* @__PURE__ */ t("div", { className: "px-2 pb-4 pt-2", ref: r, ...e, children: a })), i = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-lg", ref: e, ...a })), l = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-sm", ref: e, ...a })), g = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
+)), s = m(({ src: a, ...e }) => /* @__PURE__ */ t("div", { className: "h-64 object-cover", children: /* @__PURE__ */ t(p, { src: a, ...e }) })), o = m(({ children: a, ...e }, r) => /* @__PURE__ */ t("div", { className: "px-2 pb-4 pt-2", ref: r, ...e, children: a })), i = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-lg", ref: e, ...a })), l = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-sm", ref: e, ...a })), g = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
 d.displayName = "ImageCard";
 s.displayName = "ImageCard.Image";
 i.displayName = "ImageCard.Title";
 l.displayName = "ImageCard.Subtitle";
 o.displayName = "ImageCard.Content";
 g.displayName = "ImageCard.Text";
-const f = Object.assign(d, {
+const b = Object.assign(d, {
   Image: s,
   Content: o,
   Title: i,
@@ -28,5 +28,5 @@ const f = Object.assign(d, {
   Text: g
 });
 export {
-  f as ImageCard
+  b as ImageCard
 };

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

@@ -0,0 +1,30 @@
+import { Link } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & import('.').LinkProps & import('react').RefAttributes<HTMLAnchorElement>> & {
+        Icon: import('react').ForwardRefExoticComponent<{
+            icon: any;
+        } & import('react').RefAttributes<SVGSVGElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
+    args: {
+        variant: "primary";
+        href: string;
+        target: string;
+        children: import("react/jsx-runtime").JSX.Element[];
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Bordered: Story;
+export declare const Ghost: Story;
+export declare const Basic: Story;
+export declare const Loading: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+
+export interface LinkProps {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'basic';
+    loading?: boolean;
+    href?: string;
+    target?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Link: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & LinkProps & import('react').RefAttributes<HTMLAnchorElement>> & {
+    Icon: import('react').ForwardRefExoticComponent<{
+        icon: any;
+    } & import('react').RefAttributes<SVGSVGElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { Link };

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

@@ -4,13 +4,18 @@ import { StoryObj } from '@storybook/react';
 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: {
-        activeStop: number;
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };

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

@@ -1,15 +1,22 @@
 import { HTMLAttributes } from 'react';
 
 export interface TubestopsContextProps {
-    stops?: number;
+    totalStops?: number;
+    setTotalStops?: (stop: number) => void;
     activeStop?: number;
     currentStop?: number;
     setCurrentStop?: (stop: number) => void;
 }
 declare const Tubestops: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & TubestopsContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & 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>>;
+    Controls: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Body: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        stopId: number;
+    } & import('react').RefAttributes<HTMLDivElement>>;
 };
 export { Tubestops };

package/lib/components/Tubestops/index.js

@@ -1,63 +1,105 @@
-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(
+import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import { createContext as T, forwardRef as r, useState as d, useMemo as f, useContext as c, Children as z } from "react";
+import a from "clsx";
+import { Button as b } from "../Button/index.js";
+const p = T(null), N = T(
   null
-), T = m(({ className: n, children: t, activeStop: r = 0 }, s) => {
-  const [e, o] = x(r), a = C.count(t), p = f(
+), v = r(({ className: n, children: t, activeStop: s = 1 }, e) => {
+  const [o, u] = d(s), [i, m] = d(0), j = f(
     () => ({
-      stops: a ?? 0,
-      currentStop: e,
-      setCurrentStop: o
+      totalStops: i ?? 0,
+      setTotalStops: m,
+      currentStop: o,
+      setCurrentStop: u
     }),
-    [e, o]
+    [o, u, i, m]
   );
-  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(
+  return /* @__PURE__ */ l(p.Provider, { value: j, children: /* @__PURE__ */ l("div", { ref: e, className: n, children: t }) });
+}), S = r(({ className: n, children: t }, s) => {
+  const { setTotalStops: e } = c(p) || {}, o = z.count(t);
+  return e == null || e(o), /* @__PURE__ */ l("div", { ref: s, className: a("flex py-4", n), children: t });
+}), h = r(({ className: n, children: t }, s) => /* @__PURE__ */ l("div", { ref: s, className: a("", n), children: t })), y = r(({ className: n, stopId: t, children: s }, e) => {
+  const { currentStop: o = 0 } = c(p) || {};
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: e,
+      className: a("", n, {
+        block: o === t,
+        hidden: o !== t
+      }),
+      children: s
+    }
+  );
+}), C = r(({ className: n }, t) => {
+  const {
+    setCurrentStop: s,
+    currentStop: e = 0,
+    totalStops: o = 0
+  } = c(p) || {};
+  return /* @__PURE__ */ x("div", { ref: t, className: a("flex justify-between", n), children: [
+    /* @__PURE__ */ l(
+      b,
+      {
+        disabled: e === 1,
+        onClick: () => e > 1 && (s == null ? void 0 : s(e - 1)),
+        children: /* @__PURE__ */ l(b.Label, { children: "Previous" })
+      }
+    ),
+    /* @__PURE__ */ l(
+      b,
+      {
+        disabled: e === o,
+        onClick: () => e < o && (s == null ? void 0 : s(e + 1)),
+        children: /* @__PURE__ */ l(b.Label, { children: "Next" })
+      }
+    )
+  ] });
+}), w = r(({ className: n, stopId: t = 0, children: s }, e) => {
+  const { currentStop: o = 0, totalStops: u = 0 } = c(p) || {}, [i] = d(t), m = f(
     () => ({
-      stopNumber: a
+      stopNumber: i
     }),
-    [a]
+    [i]
   );
-  return /* @__PURE__ */ u(v.Provider, { value: p, children: /* @__PURE__ */ d("div", { ref: s, className: l(n, "w-full min-w-[120px]"), children: [
-    /* @__PURE__ */ u(
+  return /* @__PURE__ */ l(N.Provider, { value: m, children: /* @__PURE__ */ x("div", { ref: e, className: a(n, "w-full min-w-[120px]"), children: [
+    /* @__PURE__ */ l(
       "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
+        className: a({
+          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-future": t >= o && t < u,
+          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-complete": t < o && t < u
         })
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ l(
       "p",
       {
-        className: l(
+        className: a(
           {
-            "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
+            "relative z-20 -mt-4 bg-tubestop-station-complete": t < o,
+            "relative z-20 -mt-4 bg-tubestop-station-active": o === t,
+            "relative z-20 -mt-4 bg-tubestop-station-future": t > o,
+            "mt-1": t === u
           },
           "z-10 mx-auto h-6 w-6 rounded-full"
         )
       }
     ),
-    r
+    s
   ] }) });
-}), S = m(({ className: n, children: t }, r) => {
-  const { currentStop: s = 0 } = c(i) || {}, { stopNumber: e = 0 } = c(v) || {};
-  return /* @__PURE__ */ u(
+}), g = r(({ className: n, children: t }, s) => {
+  const { currentStop: e = 0 } = c(p) || {}, { stopNumber: o = 0 } = c(N) || {};
+  return /* @__PURE__ */ l(
     "p",
     {
-      ref: r,
-      className: l(
+      ref: s,
+      className: a(
         "mt-2 text-center",
         {
-          "font-medium text-tubestop-text-complete": e < s,
-          "font-bold text-tubestop-text-active": s === e,
-          "font-medium text-tubestop-text-future": e > s
+          "font-medium text-tubestop-text-complete": o < e,
+          "font-bold text-tubestop-text-active": e === o,
+          "font-medium text-tubestop-text-future": o > e
         },
         n
       ),
@@ -65,13 +107,21 @@ const i = b(null), v = b(
     }
   );
 });
-T.displayName = "Tubestop";
-N.displayName = "Tubestops.Stop";
-S.displayName = "Tubestops.Text";
-const y = Object.assign(T, {
-  Stop: N,
-  Text: S
+v.displayName = "Tubestop";
+S.displayName = "Tubestops.Header";
+w.displayName = "Tubestops.Stop";
+g.displayName = "Tubestops.Text";
+C.displayName = "Tubestops.Controls";
+h.displayName = "Tubestops.Body";
+y.displayName = "Tubestops.Content";
+const L = Object.assign(v, {
+  Header: S,
+  Stop: w,
+  Text: g,
+  Controls: C,
+  Body: h,
+  Content: y
 });
 export {
-  y as Tubestops
+  L as Tubestops
 };

package/lib/documentation/components/ThemeColours.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+
+interface PaletteContextProps {
+    prefix?: string;
+    record: Record<string, string>;
+}
+interface PaletteGroupProps {
+    config: Record<string, Record<string, string>>;
+}
+interface SwatchContextProps {
+    swatchId: string;
+    swatch: string;
+}
+export declare const Palette: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & PaletteContextProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const PaletteGroup: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement> & PaletteContextProps & import('react').RefAttributes<HTMLDivElement> & PaletteGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Swatch: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & SwatchContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Canvas: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export {};

package/lib/styles/themes/local.css

@@ -71,6 +71,13 @@ body {
   --color-button-bordered-text: #000000;
   --color-button-bordered-hover: #5f5f5f;
 
+  /* Carousel */
+  --color-carousel-dots-active: #1a1dd9;
+  --color-carousel-dots-default: #2c2525;
+  --color-carousel-dots-hover: #1a1dd9;
+  --color-carousel-arrow-default: #31a3dd;
+  --color-carousel-arrow-hover: #ae127a;
+
   /* Footer */
   --color-footer-bg: #1b54c6;
   --color-footer-text: #ffffff;
@@ -88,13 +95,6 @@ body {
   --color-tubestop-text-complete: #c9c8c8;
   --color-tubestop-text-future: #5b5b5b;
 
-  /* Carousel */
-  --color-carousel-dots-active: #1a1dd9;
-  --color-carousel-dots-default: #2c2525;
-  --color-carousel-dots-hover: #1a1dd9;
-  --color-carousel-arrow-default: #31a3dd;
-  --color-carousel-arrow-hover: #ae127a;
-
   /* Nav */
   --color-nav: #ae127a;
 }

package/lib/styles/themes/penrithmrt.css

@@ -48,12 +48,12 @@ body.theme-penrithmrt {
   --color-button-basic-hover: #cecece;
 
   /* Carousel */
-  --color-carousel-arrow-default: '#3c2f71';
-  --color-carousel-arrow-hover: '#e94439';
-  --color-carousel-dots-default: '#3c2f71';
-  --color-carousel-dots-active: '#e94439';
-  --color-carousel-dots-hover: '#e94439';
-  
+  --color-carousel-arrow-default: #3c2f71;
+  --color-carousel-arrow-hover: #e94439;
+  --color-carousel-dots-default: #3c2f71;
+  --color-carousel-dots-active: #e94439;
+  --color-carousel-dots-hover: #e94439;
+
   /* Footer */
   --color-footer-bg: #1b54c6;
   --color-footer-text: #ffffff;

package/lib/tailwind/colors.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sort-keys */
 export default {
   primary: 'var(--color-primary)',
   secondary: 'var(--color-secondary)',
@@ -75,7 +74,7 @@ export default {
       hover: 'var(--color-carousel-arrow-hover)'
     },
     dots: {
-      default: 'var(--color-carousel-dots-inactive)',
+      default: 'var(--color-carousel-dots-default)',
       active: 'var(--color-carousel-dots-active)',
       hover: 'var(--color-carousel-dots-hover)'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.28",
+  "version": "2.3.30",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,