trepur_components 2.3.34 → 2.3.35

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & import('react').RefAttributes<HTMLAnchorElement>> & {
         Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<import('../Image').ImageProps> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
         Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -1,7 +1,7 @@
 import { ImageProps } from '../Image';
 import { HTMLAttributes } from 'react';
 
-declare const ImageCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+declare const ImageCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & import('react').RefAttributes<HTMLAnchorElement>> & {
     Image: import('react').ForwardRefExoticComponent<HTMLAttributes<ImageProps> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
     Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

package/lib/components/ImageCard/index.js

@@ -1,31 +1,29 @@
 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";
-const d = m(({ className: a, children: e, ...r }, n) => /* @__PURE__ */ t(
+import C from "clsx";
+const d = m(({ className: a, children: e, onClick: r, ...g }, c) => /* @__PURE__ */ t("a", { ref: c, className: "", href: "", onClick: r, ...g, children: /* @__PURE__ */ t(
   "div",
   {
-    className: c(
+    className: C(
       "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
       a
     ),
-    ref: n,
-    ...r,
     children: e
   }
-)), 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 }));
+) })), 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 })), n = 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";
+n.displayName = "ImageCard.Text";
 const b = Object.assign(d, {
   Image: s,
   Content: o,
   Title: i,
   Subtitle: l,
-  Text: g
+  Text: n
 });
 export {
   b as ImageCard

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

@@ -17,6 +17,10 @@ export default meta;
 type Story = StoryObj<typeof Pill>;
 export declare const Default: Story;
 export declare const Error: Story;
+export declare const ErrorInverse: Story;
 export declare const Warning: Story;
+export declare const WarningInverse: Story;
 export declare const Success: Story;
+export declare const SuccessInverse: Story;
 export declare const Info: Story;
+export declare const InfoInverse: Story;

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

@@ -7,6 +7,7 @@ export type PillVariant = 'warning' | 'error' | 'info' | 'success';
 export interface PillProps {
     variant?: PillVariant;
     loading?: boolean;
+    inverse?: boolean;
 }
 declare const Pill: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & PillProps & import('react').RefAttributes<HTMLDivElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{

package/lib/components/Pill/index.js

@@ -1,30 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import i from "clsx";
-import { Icon as c } from "../Icon/index.js";
-const s = t(({ children: r, variant: e = "info" }, l) => /* @__PURE__ */ o(
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import s from "clsx";
+import { Icon as a } from "../Icon/index.js";
+const i = r(({ children: o, variant: e = "info", inverse: l = !1 }, f) => /* @__PURE__ */ t(
   "div",
   {
-    ref: l,
-    className: i(
-      "inline-grid grid-flow-col items-center gap-1 rounded-full border px-2 py-0.5",
+    ref: f,
+    className: s(
+      "inline-grid grid-flow-col w-auto py-2 px-4 text-base font-semibold rounded-full gap-2",
       {
-        "border-error-default bg-error-light text-error-default": e === "error",
-        "border-info-default bg-info-light text-info-default": e === "info",
-        "border-success-default bg-success-light text-success-default": e === "success",
-        "border-warning-default bg-warning-light text-warning-default": e === "warning"
+        "border-error-default bg-error-light text-error-default": e === "error" && !l,
+        "border-info-default bg-info-light text-info-default": e === "info" && !l,
+        "border-success-default bg-success-light text-success-default": e === "success" && !l,
+        "border-warning-default bg-warning-light text-warning-default": e === "warning" && !l,
+        "border-error-light bg-error-default text-error-light": e === "error" && l,
+        "border-info-light bg-info-default text-info-light": e === "info" && l,
+        "border-success-light bg-success-default text-success-light": e === "success" && l,
+        "border-warning-light bg-warning-default text-warning-light": e === "warning" && l
       }
     ),
-    children: r
+    children: o
   }
-)), n = t(({ className: r, ...e }, l) => /* @__PURE__ */ o("p", { className: i("text-xs", r), ref: l, ...e })), a = t(({ icon: r }, e) => /* @__PURE__ */ o(c, { size: "xs", ref: e, icon: r }));
-s.displayName = "Pill";
-a.displayName = "Pill.Icon";
-n.displayName = "Chip.Label";
-const u = Object.assign(s, {
-  Icon: a,
-  Label: n
+)), g = r(({ className: o, ...e }, l) => /* @__PURE__ */ t("p", { className: s("text-base my-auto", o), ref: l, ...e })), d = r(({ icon: o }, e) => /* @__PURE__ */ t(a, { className: "my-auto", size: "md", ref: e, icon: o }));
+i.displayName = "Pill";
+d.displayName = "Pill.Icon";
+g.displayName = "Chip.Label";
+const m = Object.assign(i, {
+  Icon: d,
+  Label: g
 });
 export {
-  u as Pill
+  m as Pill
 };

package/lib/components/SplitCard/index.js

@@ -3,7 +3,7 @@ import { createContext as u, forwardRef as o, useMemo as N, useContext as c } fr
 import h from "../../utils/matchMedia.js";
 import { Screens as y } from "../../utils/screens.js";
 import d from "clsx";
-const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobile: e, ...i }, s) => {
+const a = u(null), g = o(({ className: r, children: l, swapDesktop: t, swapMobile: e, ...i }, s) => {
   const f = `(min-width: ${y.md})`, m = h(f), S = N(
     () => ({
       swapDesktop: t,
@@ -21,7 +21,7 @@ const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobil
       children: l
     }
   ) });
-}), g = o(({ className: r, children: l, ...t }, e) => {
+}), x = o(({ className: r, children: l, ...t }, e) => {
   const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
   return /* @__PURE__ */ n(
     "div",
@@ -64,18 +64,18 @@ const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobil
   {
     ref: e,
     className: d(
-      "items-center text-6xl font-semibold tracking-wider md:text-4xl lg:text-6xl",
+      "items-center font-semibold tracking-wider md:text-4xl lg:text-6xl",
       r
     ),
     ...t,
     children: l
   }
 )), v = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n("p", { ref: e, className: d("text-lg", r), ...t, children: l }));
-x.displayName = "SplitCard";
-g.displayName = "SplitCard.LeftContent";
+g.displayName = "SplitCard";
+x.displayName = "SplitCard.LeftContent";
 C.displayName = "SplitCard.RightContent";
-const j = Object.assign(x, {
-  LeftContent: g,
+const j = Object.assign(g, {
+  LeftContent: x,
   RightContent: C,
   Title: M,
   Text: v

package/lib/components/Tubestops/index.js

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

package/package.json

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