trepur_components 2.3.10 → 2.3.11

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

@@ -3,7 +3,7 @@ import { AlertBar } from './';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').AlertBarProps & import('react').RefAttributes<HTMLDivElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').AlertbarContextProps & import('react').RefAttributes<HTMLDivElement>> & {
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
         Icon: import('react').ForwardRefExoticComponent<{
             icon: any;
@@ -22,3 +22,4 @@ export declare const Success: Story;
 export declare const Warning: Story;
 export declare const Info: Story;
 export declare const Dismiss: Story;
+export declare const Loading: Story;

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

@@ -1,12 +1,11 @@
 import { HTMLAttributes } from 'react';
 
-export interface AlertBarProps {
-    id?: string;
-    className?: string;
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+export interface AlertbarContextProps {
+    variant?: 'success' | 'warning' | 'error' | 'info';
     loading?: boolean;
+    dismiss?: boolean;
 }
-declare const AlertBar: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & AlertBarProps & import('react').RefAttributes<HTMLDivElement>> & {
+declare const AlertBar: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & AlertbarContextProps & import('react').RefAttributes<HTMLDivElement>> & {
     Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     Icon: import('react').ForwardRefExoticComponent<{
         icon: any;

package/lib/components/AlertBar/index.js

@@ -1,36 +1,66 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { faExclamation as g } from "@fortawesome/fontawesome-free-solid";
-import u from "clsx";
-import { Button as p } from "../Button/index.js";
-import { Icon as o } from "../Icon/index.js";
-const s = l(
-  ({ id: e, className: a, children: f, variant: r = "default", loading: x, ...m }, d) => /* @__PURE__ */ t(
-    "div",
-    {
-      id: e,
-      className: u("flex w-full items-center gap-x-4 px-8 py-2", {
-        "": r === "default",
-        "border-error-default bg-error-light text-error-default": r === "error",
-        "border-info-default bg-info-light text-info-default": r === "info",
-        "border-success-default bg-success-light text-success-default": r === "success",
-        "border-warning-default bg-warning-light text-warning-default": r === "warning"
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as b, forwardRef as s, useMemo as h, useContext as l } from "react";
+import { faCrosshairs as A } from "@fortawesome/fontawesome-free-solid";
+import B from "clsx";
+import { Button as N } from "../Button/index.js";
+import { Icon as c } from "../Icon/index.js";
+const o = b(null), f = s(
+  ({
+    className: a,
+    children: t,
+    variant: e = "info",
+    dismiss: n = !1,
+    loading: i = !1,
+    ...g
+  }, p) => {
+    const x = h(
+      () => ({
+        dismiss: n,
+        loading: i
       }),
-      ref: d,
-      ...m,
-      children: f
+      [n, i]
+    );
+    return /* @__PURE__ */ r(o.Provider, { value: x, children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: B("flex w-full items-center gap-x-2 px-8 py-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"
+        }),
+        ref: p,
+        ...g,
+        children: t
+      }
+    ) });
+  }
+), d = s(({ ...a }, t) => {
+  const { loading: e } = l(o) || {};
+  return e ? /* @__PURE__ */ r("p", { className: "bg-loading h-6 w-40 animate-pulse rounded-lg" }) : /* @__PURE__ */ r(
+    "p",
+    {
+      className: "text-md text-light-grey flex-1 truncate",
+      ref: t,
+      ...a
     }
-  )
-), i = l(({ ...e }, a) => /* @__PURE__ */ t("p", { className: "text-md text-light-grey flex-1 truncate", ref: a, ...e })), n = l(({ icon: e }, a) => /* @__PURE__ */ t(o, { ref: a, icon: e })), c = l(({ ...e }) => /* @__PURE__ */ t(p, { variant: "ghost", ...e, children: /* @__PURE__ */ t(o, { icon: g }) }));
-s.displayName = "AlertBar";
-i.displayName = "AlertBar.Label";
-n.displayName = "AlertBar.Icon";
-c.displayName = "AlertBar.Dismiss";
-const y = Object.assign(s, {
-  Label: i,
-  Icon: n,
-  Dismiss: c
+  );
+}), m = s(({ icon: a }, t) => {
+  const { loading: e } = l(o) || {};
+  return e ? /* @__PURE__ */ r("span", { className: "bg-loading h-6 w-6 animate-pulse rounded-lg" }) : /* @__PURE__ */ r(c, { ref: t, icon: a });
+}), u = s(({ ...a }) => {
+  const { loading: t = !1 } = l(o) || {};
+  return /* @__PURE__ */ r(N, { loading: t, variant: "ghost", ...a, children: /* @__PURE__ */ r(c, { icon: A }) });
+});
+f.displayName = "AlertBar";
+d.displayName = "AlertBar.Label";
+m.displayName = "AlertBar.Icon";
+u.displayName = "AlertBar.Dismiss";
+const j = Object.assign(f, {
+  Label: d,
+  Icon: m,
+  Dismiss: u
 });
 export {
-  y as AlertBar
+  j as AlertBar
 };

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

@@ -3,11 +3,11 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLUListElement> & import('.').BreadcrumbsProps & import('react').RefAttributes<HTMLUListElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLUListElement> & import('.').BreadcrumbsContextProps & import('react').RefAttributes<HTMLUListElement>> & {
         Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & import('react').RefAttributes<HTMLLIElement>>;
-        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & {
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & {
             href: string;
-        } & import('react').RefAttributes<HTMLParagraphElement>>;
+        } & import('react').RefAttributes<HTMLAnchorElement>>;
     };
     args: {
         children: import("react/jsx-runtime").JSX.Element[];

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

@@ -1,17 +1,15 @@
 import { HTMLAttributes } from 'react';
 
-export interface BreadcrumbsProps {
-    id?: string;
-    className?: string;
-    links?: Array<{
-        name: string;
-        href: string;
-    }>;
+export interface BreadcrumbsContextProps {
+    allLinks?: any;
+}
+export interface BreadcrumbsItemContextProps {
+    isLast?: boolean;
 }
-declare const Breadcrumbs: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & BreadcrumbsProps & import('react').RefAttributes<HTMLUListElement>> & {
+declare const Breadcrumbs: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & BreadcrumbsContextProps & import('react').RefAttributes<HTMLUListElement>> & {
     Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import('react').RefAttributes<HTMLLIElement>>;
-    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & {
         href: string;
-    } & import('react').RefAttributes<HTMLParagraphElement>>;
+    } & import('react').RefAttributes<HTMLAnchorElement>>;
 };
 export { Breadcrumbs };

package/lib/components/Breadcrumbs/index.js

@@ -1,16 +1,49 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-const c = s(({ children: e, ...r }, m) => /* @__PURE__ */ a("ul", { className: "flex gap-2", ...r, children: e })), t = s(({ children: e, ...r }, m) => /* @__PURE__ */ n("li", { className: "flex items-center gap-2", ...r, children: [
-  e,
-  /* @__PURE__ */ a("p", { children: "/" })
-] })), l = s(({ children: e, href: r, ...m }, o) => /* @__PURE__ */ a("p", { className: "px-1 py-1", children: /* @__PURE__ */ a("a", { className: "text-facebook hover:underline", href: r, children: e }) }));
-c.displayName = "Breadcrumbs";
-t.displayName = "Breadcrumbs.Item";
-l.displayName = "Breadcrumbs.Label";
-const b = Object.assign(c, {
-  Item: t,
-  Label: l
+import { jsx as s, jsxs as v } from "react/jsx-runtime";
+import { createContext as i, forwardRef as m, useMemo as b, useContext as x, Children as I } from "react";
+const f = i(null), B = i(null), N = m(({ children: e, ...r }, t) => {
+  const a = b(
+    () => ({
+      allLinks: e
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ s(f.Provider, { value: a, children: /* @__PURE__ */ s("ul", { ref: t, className: "flex gap-2", ...r, children: e }) });
+}), L = m(({ children: e, ...r }, t) => {
+  const { allLinks: a } = x(f) || {}, n = I.toArray(a), c = n.findIndex(
+    (o) => {
+      var l, u, p, d;
+      return ((p = (u = (l = o == null ? void 0 : o.props) == null ? void 0 : l.children) == null ? void 0 : u.props) == null ? void 0 : p.children) === ((d = e == null ? void 0 : e.props) == null ? void 0 : d.children);
+    }
+  ) === n.length - 1, C = b(
+    () => ({
+      isLast: c
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ s(B.Provider, { value: C, children: /* @__PURE__ */ v("li", { ref: t, className: "flex items-center gap-2", ...r, children: [
+    e,
+    !c && /* @__PURE__ */ s("p", { children: "/" })
+  ] }) });
+}), y = m(({ children: e, href: r, ...t }, a) => {
+  const { isLast: n } = x(B) || {};
+  return n ? /* @__PURE__ */ s("p", { className: "px-1 py-1 font-bold underline underline-offset-4", children: e }) : /* @__PURE__ */ s("p", { className: "px-1 py-1", children: /* @__PURE__ */ s(
+    "a",
+    {
+      ref: a,
+      className: "text-facebook hover:underline",
+      href: r,
+      ...t,
+      children: e
+    }
+  ) });
+});
+N.displayName = "Breadcrumbs";
+L.displayName = "Breadcrumbs.Item";
+y.displayName = "Breadcrumbs.Label";
+const P = Object.assign(N, {
+  Item: L,
+  Label: y
 });
 export {
-  b as Breadcrumbs
+  P as Breadcrumbs
 };

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

@@ -1,9 +1,9 @@
-import { Button } from '.';
 import { StoryObj } from '@storybook/react';
+import { Button } from './';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & import('.').ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & import('./').ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
         Icon: import('react').ForwardRefExoticComponent<{
             icon: any;
         } & import('react').RefAttributes<SVGSVGElement>>;
@@ -18,3 +18,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Bordered: Story;
+export declare const Ghost: Story;
+export declare const Loading: Story;

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

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
 
 export interface ButtonProps {
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'bordered';
     disabled?: boolean;
+    loading?: boolean;
 }
 declare const Button: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{

package/lib/components/Button/index.js

@@ -1,30 +1,43 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import { Icon as m } from "../Icon/index.js";
-import b from "clsx";
-const a = n(({ className: t, children: o, variant: e = "primary", disabled: d, ...u }) => /* @__PURE__ */ r(
-  "button",
-  {
-    className: b(
-      "flex items-center gap-2 rounded-lg border px-4 py-2 text-center text-sm duration-200",
-      {
-        "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active": e === "primary",
-        "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active": e === "secondary",
-        "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": e === "ghost"
-      },
-      t
-    ),
-    ...u,
-    children: o
-  }
-)), s = n(({ className: t, ...o }, e) => /* @__PURE__ */ r("p", { className: b("text-md", t), ref: e, ...o })), c = n(({ icon: t }, o) => /* @__PURE__ */ r(m, { size: "md", ref: o, icon: t }));
+import s from "clsx";
+const a = n(
+  ({
+    className: o,
+    children: e,
+    loading: t = !1,
+    variant: r = "primary",
+    disabled: g,
+    ...d
+  }) => /* @__PURE__ */ b(
+    "button",
+    {
+      disabled: t,
+      className: s(
+        "flex h-[38px] items-center gap-2 rounded-lg border px-4 py-2 text-center text-sm",
+        {
+          "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": r === "primary" && !t,
+          "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,
+          "w-40 animate-pulse border-loading bg-loading": t
+        },
+        o
+      ),
+      ...d,
+      children: !t && e
+    }
+  )
+), u = n(({ className: o, ...e }, t) => /* @__PURE__ */ b("p", { className: s("text-md", o), ref: t, ...e })), c = n(({ icon: o }, e) => /* @__PURE__ */ b(m, { size: "md", ref: e, icon: o }));
 a.displayName = "Button";
 c.displayName = "Button.Icon";
-s.displayName = "Button.Label";
-const x = Object.assign(a, {
+u.displayName = "Button.Label";
+const y = Object.assign(a, {
   Icon: c,
-  Label: s
+  Label: u
 });
 export {
-  x as Button
+  y as Button
 };

package/lib/components/Collapsible/index.js

@@ -59,7 +59,7 @@ const n = w(null), c = o(({ id: e, className: l, children: t, loading: s, ...i }
       ),
       ref: t,
       ...l,
-      children: /* @__PURE__ */ a("div", { className: "pb-4", children: e })
+      children: e
     }
   );
 }), h = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "text-xs md:text-sm", ref: l, ...e }));

package/lib/components/HamburgerIcon/index.js

@@ -1,13 +1,13 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as d, useState as f } from "react";
-import { Button as g } from "../Button/index.js";
+import { forwardRef as g, useState as d } from "react";
+import { Button as f } from "../Button/index.js";
 import o from "clsx";
-const n = d(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
-  const [t, m] = f(!1), p = (s) => {
+const n = g(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
+  const [t, m] = d(!1), p = (s) => {
     m(!t), a == null || a(s);
   };
   return /* @__PURE__ */ r(
-    g,
+    f,
     {
       className: o("stroke-white", i),
       ref: l,
@@ -23,7 +23,7 @@ const n = d(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
             {
               "fill-button-primary-text": e === "primary",
               "fill-button-secondary-text": e === "secondary",
-              "fill-button-ghost-text": e === "ghost"
+              "fill-button-ghost-text stroke-button-ghost-text": e === "ghost"
             }
           ),
           width: "24",

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

@@ -8,8 +8,7 @@ declare const meta: {
             logo: string;
         } & import('react').RefAttributes<HTMLDivElement>>;
         DesktopHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-        LeftSection: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-        RightSection: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Section: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Logo: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
         Body: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Folder: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {

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

@@ -10,8 +10,7 @@ declare const Nav: import('react').ForwardRefExoticComponent<HTMLAttributes<HTML
         logo: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
     DesktopHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-    LeftSection: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-    RightSection: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Section: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Logo: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
     Body: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Folder: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {

package/lib/components/Nav/index.js

@@ -1,81 +1,80 @@
-import { jsx as e, jsxs as d, Fragment as y } from "react/jsx-runtime";
-import { createContext as b, forwardRef as n, useState as c, useMemo as w, useContext as m, useRef as C } from "react";
+import { jsx as e, jsxs as n, Fragment as h } from "react/jsx-runtime";
+import { createContext as y, forwardRef as d, useState as c, useMemo as b, useContext as m, useRef as C } from "react";
 import { HamburgerIcon as H } from "../HamburgerIcon/index.js";
-import { faChevronDown as L } from "@fortawesome/fontawesome-free-solid";
+import { faChevronDown as k } from "@fortawesome/fontawesome-free-solid";
 import p from "clsx";
-import { Icon as S } from "../Icon/index.js";
-const i = b(null), v = n(({ children: a }, s) => {
-  const [r, t] = c(!1), o = w(
+import { Icon as w } from "../Icon/index.js";
+const l = y(null), v = d(({ children: a }, r) => {
+  const [t, s] = c(!1), o = b(
     () => ({
-      expanded: r,
-      setExpanded: t
+      expanded: t,
+      setExpanded: s
     }),
-    [r, t]
+    [t, s]
   );
-  return /* @__PURE__ */ e(i.Provider, { value: o, children: /* @__PURE__ */ e("div", { children: a }) });
-}), N = n(({ children: a, logo: s }, r) => {
-  const { setExpanded: t, expanded: o } = m(i) || {};
-  return /* @__PURE__ */ d("div", { ref: r, className: p("relative h-20 w-full bg-nav px-2 py-2"), children: [
-    /* @__PURE__ */ d("div", { className: "flex h-full md:hidden", children: [
+  return /* @__PURE__ */ e(l.Provider, { value: o, children: /* @__PURE__ */ e("div", { children: a }) });
+}), N = d(({ children: a, logo: r }, t) => {
+  const { setExpanded: s, expanded: o } = m(l) || {};
+  return /* @__PURE__ */ n("div", { ref: t, className: p("bg-nav-bg relative h-20 w-full px-2 py-2"), children: [
+    /* @__PURE__ */ n("div", { className: "flex h-full md:hidden", children: [
       /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
         H,
         {
-          onClick: () => t == null ? void 0 : t(!o),
+          onClick: () => s == null ? void 0 : s(!o),
           className: "aspect-square"
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-full w-28 -translate-x-1/2 -translate-y-1/2 transform", children: /* @__PURE__ */ e(l, { src: s }) })
+      /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: /* @__PURE__ */ e(i, { src: r }) })
     ] }),
     a
   ] });
-}), f = n(
-  ({ children: a }, s) => {
-    const { expanded: r } = m(i) || {};
-    return r ? /* @__PURE__ */ e("div", { className: "h-screen bg-nav px-8 pb-12 pt-20 md:hidden", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: a }) }) : /* @__PURE__ */ e(y, {});
+}), f = d(
+  ({ children: a }, r) => {
+    const { expanded: t } = m(l) || {};
+    return t ? /* @__PURE__ */ e("div", { className: "bg-nav-bg h-screen px-8 pb-12 pt-2 md:hidden", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: a }) }) : /* @__PURE__ */ e(h, {});
   }
-), u = n(({ children: a }, s) => /* @__PURE__ */ e("div", { className: "hidden grid-cols-7 gap-8 md:grid", children: a })), x = n(({ children: a }, s) => /* @__PURE__ */ e("div", { className: "col-span-3 my-4 justify-between text-center md:flex", children: a })), g = n(({ label: a, children: s }) => {
-  const [r, t] = c(!1), o = C(null);
-  return /* @__PURE__ */ d(
+), g = d(({ children: a }, r) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: r,
+    className: "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
+    children: a
+  }
+)), x = d(
+  ({ children: a }, r) => /* @__PURE__ */ e("div", { className: "my-4 md:flex md:gap-4 lg:gap-8", children: a })
+), u = d(({ label: a, children: r }) => {
+  const [t, s] = c(!1), o = C(null);
+  return /* @__PURE__ */ n(
     "div",
     {
       ref: o,
-      onClick: () => t(!0),
-      onMouseLeave: () => t(!1),
-      className: "mx-auto text-xl font-normal tracking-wider text-white hover:cursor-pointer",
+      onClick: () => s(!0),
+      onMouseLeave: () => s(!1),
+      className: "text-nav-text mx-auto text-xl font-normal tracking-wider hover:cursor-pointer",
       children: [
-        /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n("div", { className: "flex items-center gap-px", children: [
           /* @__PURE__ */ e("p", { children: a }),
-          /* @__PURE__ */ e(S, { icon: L })
+          /* @__PURE__ */ e(w, { icon: k })
         ] }),
-        r && /* @__PURE__ */ e("div", { className: "mb:pb-2 grid grid-cols-1 bg-nav md:gap-5 md:pt-8", children: s })
+        t && /* @__PURE__ */ e("div", { className: "mb:pb-2 bg-nav-bg grid grid-cols-1 md:gap-5 md:pt-8", children: r })
       ]
     }
   );
-}), l = n(({ className: a, src: s, ...r }, t) => /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
-  "img",
-  {
-    className: p("rounded-full", a),
-    ref: t,
-    src: s,
-    ...r
-  }
-) })), h = n(({ children: a }, s) => /* @__PURE__ */ e("div", { className: "col-span-3 my-4 justify-between text-center md:flex", children: a }));
+}), i = d(({ className: a, src: r, ...t }, s) => /* @__PURE__ */ e("img", { className: p("h-16", a), ref: s, src: r, ...t }));
 v.displayName = "Nav";
 N.displayName = "Nav.Header";
-u.displayName = "Nav.DesktopHeader";
-l.displayName = "Nav.Logo";
-x.displayName = "Nav.LeftSection";
-h.displayName = "Nav.RightSection";
+g.displayName = "Nav.DesktopHeader";
+i.displayName = "Nav.Logo";
+x.displayName = "Nav.Section";
 f.displayName = "Nav.Body";
-g.displayName = "Nav.Folder";
+u.displayName = "Nav.Folder";
 const I = Object.assign(v, {
   Header: N,
-  DesktopHeader: u,
-  LeftSection: x,
-  RightSection: h,
-  Logo: l,
+  DesktopHeader: g,
+  Section: x,
+  Logo: i,
   Body: f,
-  Folder: g
+  Folder: u
 });
 export {
   I as Nav

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

@@ -9,7 +9,6 @@ declare const meta: {
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };
     args: {
-        className: string;
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };

package/lib/components/NavItem/index.js

@@ -1,24 +1,31 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
-import i from "clsx";
-const s = o(({ children: t, className: a, href: e, ...l }, n) => /* @__PURE__ */ r(
+import f from "clsx";
+const n = o(({ children: t, className: e, href: a, ...m }, l) => /* @__PURE__ */ r(
   "a",
   {
-    href: e,
-    ref: n,
-    className: i(
-      "mx-auto h-8 py-0 text-white after:block after:scale-x-0 after:border-b-4 after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
-      a
+    href: a,
+    ref: l,
+    className: f(
+      "text-nav-text after:border-nav-text mx-auto h-8 py-0 after:block after:scale-x-0 after:border-b-4 after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
+      e
     ),
-    ...l,
+    ...m,
     children: t
   }
-)), m = o(({ className: t, ...a }, e) => /* @__PURE__ */ r("p", { className: "text-xl font-normal tracking-wider", ref: e, ...a }));
-s.displayName = "NavItem";
-m.displayName = "NavItem.Label";
-const N = Object.assign(s, {
-  Label: m
+)), s = o(({ className: t, ...e }, a) => /* @__PURE__ */ r(
+  "p",
+  {
+    className: "flex-none text-nowrap text-xl font-normal tracking-wider",
+    ref: a,
+    ...e
+  }
+));
+n.displayName = "NavItem";
+s.displayName = "NavItem.Label";
+const p = Object.assign(n, {
+  Label: s
 });
 export {
-  N as NavItem
+  p as NavItem
 };

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

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react';
 export type PickU<T, K extends keyof T> = T extends any ? {
     [P in K]: T[P];
 } : never;
-export type PillVariant = 'default' | 'warning' | 'error' | 'info' | 'success';
+export type PillVariant = 'warning' | 'error' | 'info' | 'success';
 export interface PillProps {
     variant?: PillVariant;
     loading?: boolean;

package/lib/components/Pill/index.js

@@ -1,31 +1,30 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import s from "clsx";
-import { Icon as a } from "../Icon/index.js";
-const i = t(({ children: l, variant: e = "default" }, r) => /* @__PURE__ */ o(
+import i from "clsx";
+import { Icon as c } from "../Icon/index.js";
+const s = t(({ children: r, variant: e = "info" }, l) => /* @__PURE__ */ o(
   "div",
   {
-    ref: r,
-    className: s(
+    ref: l,
+    className: i(
       "inline-grid grid-flow-col items-center gap-1 rounded-full border px-2 py-0.5",
       {
-        "": e === "default",
         "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"
       }
     ),
-    children: l
+    children: r
   }
-)), d = t(({ className: l, ...e }, r) => /* @__PURE__ */ o("p", { className: s("text-xs", l), ref: r, ...e })), n = t(({ icon: l }, e) => /* @__PURE__ */ o(a, { size: "xs", ref: e, icon: l }));
-i.displayName = "Pill";
-n.displayName = "Pill.Icon";
-d.displayName = "Chip.Label";
-const m = Object.assign(i, {
-  Icon: n,
-  Label: d
+)), 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
 });
 export {
-  m as Pill
+  u as Pill
 };

package/lib/styles/global.css

@@ -1,66 +1,10 @@
 @import './themes/local.css';
-@import './themes/test.css';
+@import './themes/penrithmrt.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-ExtraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Sora';
-  src: url('../fonts/Sora/static/Sora-ExtraBold.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-}
-
 .slick-track {
   display: flex !important;
 }

package/lib/styles/themes/local.css

@@ -33,6 +33,8 @@ body {
   --color-secondary: #e2e2e2;
   --color-tertiary: #921457;
 
+  --color-loading: #a3a3a3;
+
   /* pill */
   --color-error-default: #b91c1c;
   --color-warning-default: #a16207;
@@ -61,7 +63,13 @@ body {
   --color-button-ghost-border: #ffffff00;
   --color-button-ghost-bg: #0055ff00;
   --color-button-ghost-text: #000000;
-  --color-button-ghost-hover: #5f5f5f;
+  --color-button-ghost-hover: #bdbdbd;
+
+  --color-button-bordered-active: #242424;
+  --color-button-bordered-border: #9d9d9d;
+  --color-button-bordered-bg: #0055ff00;
+  --color-button-bordered-text: #000000;
+  --color-button-bordered-hover: #5f5f5f;
 
   /* Footer */
   --color-footer-bg: #1b54c6;

package/lib/styles/themes/penrithmrt.css

@@ -0,0 +1,101 @@
+body.theme-penrithmrt {
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-linkedin: #0e76a8;
+
+  --color-primary: #3C2F71;
+  --color-secondary: #c71f1f;
+  --color-tertiary: #921457;
+
+  --color-loading: #a3a3a3;
+
+  /* pill */
+  --color-error-default: #b91c1c;
+  --color-warning-default: #a16207;
+  --color-success-default: #047857;
+  --color-info-default: #0369a1;
+
+  --color-error-light: #fca5a5;
+  --color-warning-light: #fde047;
+  --color-success-light: #6ee7b7;
+  --color-info-light: #7dd3fc;
+
+  /* Button */
+  --color-button-primary-active: #3C2F71;
+  --color-button-primary-border: #3C2F71;
+  --color-button-primary-bg: #3C2F71;
+  --color-button-primary-text: #ffffff;
+  --color-button-primary-hover: #3C2F71;
+
+  --color-button-secondary-active: #c71f1f;
+  --color-button-secondary-border: #c71f1f;
+  --color-button-secondary-bg: #c71f1f;
+  --color-button-secondary-text: #ffffff;
+  --color-button-secondary-hover: #c71f1f;
+
+  --color-button-ghost-active: #242424;
+  --color-button-ghost-border: #ffffff00;
+  --color-button-ghost-bg: #0055ff00;
+  --color-button-ghost-text: #3C2F71;
+  --color-button-ghost-hover: #bdbdbd;
+
+  --color-button-bordered-active: #242424;
+  --color-button-bordered-border: #9d9d9d;
+  --color-button-bordered-bg: #0055ff00;
+  --color-button-bordered-text: #000000;
+  --color-button-bordered-hover: #5f5f5f;
+
+  /* Footer */
+  --color-footer-bg: #1b54c6;
+  --color-footer-text: #ffffff;
+
+  /* Star */
+  --color-star: #f5bf1f;
+
+  /* Tubestops */
+  --color-tubestop-station-active: #57e31b;
+  --color-tubestop-station-complete: #c9c8c8;
+  --color-tubestop-station-future: #5a4f45;
+  --color-tubestop-line-complete: #c9c8c8;
+  --color-tubestop-line-future: #707070;
+  --color-tubestop-text-active: #000000;
+  --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-bg: #c8c6c6;
+  --color-nav-text: #3C2F71;
+}

package/lib/tailwind/colors.ts

@@ -4,7 +4,11 @@ export default {
   secondary: 'var(--color-secondary)',
   tertiary: 'var(--color-tertiary)',
   star: 'var(--color-star)',
-  nav: 'var(--color-nav)',
+  nav: {
+    bg: 'var(--color-nav-bg)',
+    text: 'var(--color-nav-text)',
+  },
+  loading: 'var(--color-loading)',
   footer: {
     bg: 'var(--color-footer-bg)',
     text: 'var(--color-footer-text)',
@@ -47,6 +51,13 @@ export default {
       text: 'var(--color-button-ghost-text)',
       hover: 'var(--color-button-ghost-hover)',
     },
+    bordered: {
+      active: 'var(--color-button-bordered-active)',
+      border: 'var(--color-button-bordered-border)',
+      bg: 'var(--color-button-bordered-bg)',
+      text: 'var(--color-button-bordered-text)',
+      hover: 'var(--color-button-bordered-hover)',
+    },
   },
   tubestop: {
     station: {

package/package.json

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

package/lib/styles/themes/test.css

@@ -1,28 +0,0 @@
-body.theme-test {
-  --color-primary: #0036a0;
-  --color-secondary: #0036a0;
-  --color-tertiary: #0036a0;
-  --color-ink: #0036a0;
-  --color-transparent: #0036a0;
-  --color-white: #0036a0;
-  --color-black: #0036a0;
-  --color-red: #0036a0;
-  --color-grey: #0036a0;
-  --color-light-grey: #0036a0;
-  --color-lightest-grey: #0036a0;
-  --color-primary-strict: #0036a0;
-  --color-border: #0036a0;
-  --color-border-lightest: #0036a0;
-  --color-border-light: #0036a0;
-  --color-border-dark: #0036a0;
-
-  --color-error-default: #0036a0;
-  --color-warning-default: #0036a0;
-  --color-success-default: #0036a0;
-  --color-info-default: #0036a0;
-
-  --color-error-light: #0036a0;
-  --color-warning-light: #0036a0;
-  --color-success-light: #0036a0;
-  --color-info-light: #0036a0;
-}