trepur_components 2.3.29 → 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/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/package.json

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