trepur_components 2.3.30 → 2.3.32

package/lib/components/Link/index.js

@@ -0,0 +1,50 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { Icon as p } from "../Icon/index.js";
+import s from "clsx";
+const c = a(
+  ({
+    className: e,
+    children: o,
+    loading: t = !1,
+    variant: r = "primary",
+    size: n = "sm",
+    href: m,
+    target: g,
+    ...u
+  }) => /* @__PURE__ */ b("div", { className: "inline-block", children: /* @__PURE__ */ b(
+    "a",
+    {
+      href: m,
+      target: g,
+      className: s(
+        "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": 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,
+          "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": 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"
+        },
+        e
+      ),
+      ...u,
+      children: !t && o
+    }
+  ) })
+), i = a(({ className: e, ...o }, t) => /* @__PURE__ */ b("p", { className: s("text-md", e), ref: t, ...o })), d = a(({ icon: e }, o) => /* @__PURE__ */ b(p, { size: "md", ref: o, icon: e }));
+c.displayName = "Link";
+d.displayName = "Link.Icon";
+i.displayName = "Link.Label";
+const v = Object.assign(c, {
+  Icon: d,
+  Label: i
+});
+export {
+  v as Link
+};

package/lib/components/Nav/index.js

@@ -1,37 +1,37 @@
 import { jsx as e, jsxs as p, Fragment as H } from "react/jsx-runtime";
-import { createContext as C, forwardRef as l, useState as v, useMemo as k, useContext as c, useRef as w } from "react";
+import { createContext as w, forwardRef as l, useState as v, useMemo as C, useContext as m, useRef as k } from "react";
 import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
 import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
-import d from "clsx";
+import n from "clsx";
 import { Icon as D } from "../Icon/index.js";
 import { NavItem as F } from "../NavItem/index.js";
-const i = C(null), N = l(({ className: t, children: r, loading: a }, s) => {
-  const [o, n] = v(!1), m = k(
+const i = w(null), N = l(({ className: t, children: r, loading: a }, o) => {
+  const [s, d] = v(!1), c = C(
     () => ({
-      expanded: o,
-      setExpanded: n,
+      expanded: s,
+      setExpanded: d,
       loading: a
     }),
-    [o, n, a]
+    [s, d, a]
   );
-  return /* @__PURE__ */ e(i.Provider, { value: m, children: /* @__PURE__ */ e("div", { className: t, ref: s, children: r }) });
+  return /* @__PURE__ */ e(i.Provider, { value: c, children: /* @__PURE__ */ e("div", { className: t, ref: o, children: r }) });
 }), f = l(
   ({ className: t, children: r }, a) => /* @__PURE__ */ e(
     "div",
     {
       ref: a,
-      className: d("relative h-24 w-full bg-nav-bg px-2 py-2", t),
+      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", t),
       children: r
     }
   )
 ), g = l(({ className: t, children: r }, a) => {
-  const { loading: s, setExpanded: o, expanded: n } = c(i) || {};
-  return /* @__PURE__ */ p("div", { ref: a, className: d("flex h-full md:hidden", t), children: [
-    !s && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
+  const { loading: o, setExpanded: s, expanded: d } = m(i) || {};
+  return /* @__PURE__ */ p("div", { ref: a, className: n("flex h-full md:hidden", t), children: [
+    !o && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
       M,
       {
         variant: "ghost",
-        onClick: () => o == null ? void 0 : o(!n),
+        onClick: () => s == null ? void 0 : s(!d),
         className: "aspect-square"
       }
     ) }),
@@ -41,7 +41,7 @@ const i = C(null), N = l(({ className: t, children: r, loading: a }, s) => {
   "div",
   {
     ref: a,
-    className: d(
+    className: n(
       "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
       t
     ),
@@ -49,12 +49,12 @@ const i = C(null), N = l(({ className: t, children: r, loading: a }, s) => {
   }
 )), x = l(
   ({ className: t, children: r }, a) => {
-    const { expanded: s } = c(i) || {};
-    return s ? /* @__PURE__ */ e(
+    const { expanded: o } = m(i) || {};
+    return o ? /* @__PURE__ */ e(
       "div",
       {
         ref: a,
-        className: d(
+        className: n(
           "h-screen bg-nav-bg px-8 pb-12 pt-2 md:hidden",
           t
         ),
@@ -64,55 +64,56 @@ const i = C(null), N = l(({ className: t, children: r, loading: a }, s) => {
   }
 ), h = l(
   ({ className: t, children: r }, a) => {
-    const { loading: s } = c(i) || {};
-    return s ? /* @__PURE__ */ e(
+    const { loading: o } = m(i) || {};
+    return o ? /* @__PURE__ */ e(
       "div",
       {
         ref: a,
-        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
-        children: [...Array(5)].map((o, n) => /* @__PURE__ */ e(F, { loading: !0 }, n))
+        className: n("my-4 md:flex md:gap-4 lg:gap-6", t),
+        children: [...Array(5)].map((s, d) => /* @__PURE__ */ e(F, { loading: !0 }, d))
       }
     ) : /* @__PURE__ */ e(
       "div",
       {
         ref: a,
-        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
+        className: n("my-4 md:flex md:gap-4 lg:gap-6", t),
         children: r
       }
     );
   }
-), b = l(({ className: t, label: r, children: a, active: s = !1 }) => {
-  const [o, n] = v(!1), m = w(null);
+), b = l(({ className: t, label: r, children: a, active: o = !1 }) => {
+  const [s, d] = v(!1), c = k(null);
   return /* @__PURE__ */ p(
     "div",
     {
-      ref: m,
-      onClick: () => n(!0),
-      onMouseLeave: () => n(!1),
-      className: d(
-        "relative m-auto py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
+      ref: c,
+      onMouseEnter: () => d(!0),
+      onMouseLeave: () => d(!1),
+      onClick: () => d(!s),
+      className: n(
+        "relative m-auto py-0 text-nav-text md:after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
         {
-          "font-bold": s,
-          "font-light": !s
+          "font-bold": o,
+          "font-light": !o
         },
         t
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ p("div", { className: "flex justify-center items-center gap-1", children: [
           /* @__PURE__ */ e("p", { className: "text-lg", children: r }),
           /* @__PURE__ */ e(D, { size: "xs", icon: j })
         ] }),
-        o && /* @__PURE__ */ e("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: a }) })
+        s && /* @__PURE__ */ e("div", { className: "rounded-md md:absolute md:-left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "rounded-md grid grid-cols-1 gap-y-2 bg-nav-bg px-1 py-2 w-full", children: a }) })
       ]
     }
   );
-}), y = l(({ className: t, src: r, ...a }, s) => {
-  const { loading: o } = c(i) || {};
-  return o ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
+}), y = l(({ className: t, src: r, ...a }, o) => {
+  const { loading: s } = m(i) || {};
+  return s ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
     "img",
     {
-      className: d("h-20 flex-none", t),
-      ref: s,
+      className: n("h-20 flex-none", t),
+      ref: o,
       src: r,
       ...a
     }
@@ -126,7 +127,7 @@ y.displayName = "Nav.Logo";
 h.displayName = "Nav.Section";
 x.displayName = "Nav.Body";
 b.displayName = "Nav.Folder";
-const A = Object.assign(N, {
+const q = Object.assign(N, {
   Header: f,
   DesktopHeader: u,
   MobileHeader: g,
@@ -136,5 +137,5 @@ const A = Object.assign(N, {
   Folder: b
 });
 export {
-  A as Nav
+  q as Nav
 };

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

@@ -7,6 +7,7 @@ declare const meta: {
         href?: string | undefined;
         active?: boolean | undefined;
         loading?: boolean | undefined;
+        isInFolder?: boolean | undefined;
     } & import('react').RefAttributes<HTMLAnchorElement>> & {
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };

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

@@ -4,6 +4,7 @@ declare const NavItem: import('react').ForwardRefExoticComponent<HTMLAttributes<
     href?: string | undefined;
     active?: boolean | undefined;
     loading?: boolean | undefined;
+    isInFolder?: boolean | undefined;
 } & import('react').RefAttributes<HTMLAnchorElement>> & {
     Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
 };

package/lib/components/NavItem/index.js

@@ -1,28 +1,39 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
 import n from "clsx";
-const l = o(({ loading: t = !1, active: e, children: r, className: m, href: f, ...i }, c) => t ? /* @__PURE__ */ a("div", { className: "m-auto", children: /* @__PURE__ */ a("div", { className: "h-7 w-20 animate-pulse rounded-md bg-gray-300" }) }) : /* @__PURE__ */ a(
-  "a",
-  {
-    href: f,
-    ref: c,
-    className: n(
-      "m-auto inline-block py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
-      {
-        "font-bold": e,
-        "font-light": !e
-      },
-      m
-    ),
-    ...i,
-    children: r
-  }
-)), s = o(({ className: t, ...e }, r) => /* @__PURE__ */ a(
+const l = o(
+  ({
+    loading: t = !1,
+    active: a,
+    children: r,
+    className: m,
+    href: i,
+    isInFolder: f = !1,
+    ...c
+  }, d) => t ? /* @__PURE__ */ e("div", { className: "m-auto", children: /* @__PURE__ */ e("div", { className: "h-7 w-20 animate-pulse rounded-md bg-gray-300" }) }) : /* @__PURE__ */ e(
+    "a",
+    {
+      href: i,
+      ref: d,
+      className: n(
+        "group text-center w-full m-auto inline-block py-0 text-nav-text",
+        {
+          "font-bold": a,
+          "font-light": !a,
+          "rounded-md hover:bg-gray-300 py-1": f
+        },
+        m
+      ),
+      ...c,
+      children: /* @__PURE__ */ e("span", { className: "text-center inline-block after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out group-hover:cursor-pointer group-hover:after:scale-x-100", children: r })
+    }
+  )
+), s = o(({ className: t, ...a }, r) => /* @__PURE__ */ e(
   "p",
   {
     className: n("flex-none text-nowrap text-lg", t),
     ref: r,
-    ...e
+    ...a
   }
 ));
 l.displayName = "NavItem";

package/lib/components/index.d.ts

@@ -12,6 +12,7 @@ import { NavItem } from './NavItem';
 import { Nav } from './Nav';
 import { Modal } from './Modal';
 import { MenuButton } from './MenuButton';
+import { Link } from './Link';
 import { Input } from './Input';
 import { ImageCard } from './ImageCard';
 import { Image } from './Image';
@@ -35,4 +36,4 @@ import { Breadcrumbs } from './Breadcrumbs';
 import { AlertBar } from './AlertBar';
 import { Accordion } from './Accordion';
 
-export { Accordion, AlertBar, Breadcrumbs, Button, CalendarComponent, Card, Checkbox, Carousel, CarouselThumbnail, Collapsible, Counter, DetailUpdater, Dialog, Dropdown, Form, Footer, FooterNav, Greeting, Icon, Image, ImageCard, Input, MenuButton, Modal, Nav, NavItem, Pill, Search, Select, SplitCard, Stars, Testimonial, TextArea, Timeline, Tubestops, Video };
+export { Accordion, AlertBar, Breadcrumbs, Button, CalendarComponent, Card, Checkbox, Carousel, CarouselThumbnail, Collapsible, Counter, DetailUpdater, Dialog, Dropdown, Form, Footer, FooterNav, Greeting, Icon, Image, ImageCard, Input, Link, MenuButton, Modal, Nav, NavItem, Pill, Search, Select, SplitCard, Stars, Testimonial, TextArea, Timeline, Tubestops, Video };

package/lib/index.js

@@ -12,28 +12,29 @@ import { Counter as S } from "./components/Counter/index.js";
 import { DetailUpdater as v } from "./components/DetailUpdater/index.js";
 import { Dialog as D } from "./components/Dialog/index.js";
 import { Dropdown as N } from "./components/Dropdown/index.js";
-import { Form as k } from "./components/Form/index.js";
+import { Form as M } from "./components/Form/index.js";
 import { Footer as G } from "./components/Footer/index.js";
-import { FooterNav as U } from "./components/FooterNav/index.js";
-import { Greeting as j } from "./components/Greeting/index.js";
-import { Icon as y } from "./components/Icon/index.js";
-import { Image as E } from "./components/Image/index.js";
-import { ImageCard as J } from "./components/ImageCard/index.js";
-import { Input as L } from "./components/Input/index.js";
-import { MenuButton as Q } from "./components/MenuButton/index.js";
-import { Modal as W } from "./components/Modal/index.js";
-import { Nav as Y } from "./components/Nav/index.js";
-import { NavItem as _ } from "./components/NavItem/index.js";
-import { Pill as oo } from "./components/Pill/index.js";
-import { Search as eo } from "./components/Search/index.js";
-import { Select as mo } from "./components/Select/index.js";
-import { SplitCard as xo } from "./components/SplitCard/index.js";
-import { Stars as ao } from "./components/Stars/index.js";
-import { Testimonial as no } from "./components/Testimonial/index.js";
-import { TextArea as uo } from "./components/TextArea/index.js";
-import { Timeline as so } from "./components/Timeline/index.js";
-import { Tubestops as bo } from "./components/Tubestops/index.js";
-import { Video as To } from "./components/Video/index.js";
+import { FooterNav as P } from "./components/FooterNav/index.js";
+import { Greeting as V } from "./components/Greeting/index.js";
+import { Icon as q } from "./components/Icon/index.js";
+import { Image as z } from "./components/Image/index.js";
+import { ImageCard as H } from "./components/ImageCard/index.js";
+import { Input as K } from "./components/Input/index.js";
+import { Link as Q } from "./components/Link/index.js";
+import { MenuButton as W } from "./components/MenuButton/index.js";
+import { Modal as Y } from "./components/Modal/index.js";
+import { Nav as _ } from "./components/Nav/index.js";
+import { NavItem as oo } from "./components/NavItem/index.js";
+import { Pill as eo } from "./components/Pill/index.js";
+import { Search as mo } from "./components/Search/index.js";
+import { Select as xo } from "./components/Select/index.js";
+import { SplitCard as ao } from "./components/SplitCard/index.js";
+import { Stars as no } from "./components/Stars/index.js";
+import { Testimonial as uo } from "./components/Testimonial/index.js";
+import { TextArea as so } from "./components/TextArea/index.js";
+import { Timeline as bo } from "./components/Timeline/index.js";
+import { Tubestops as To } from "./components/Tubestops/index.js";
+import { Video as Bo } from "./components/Video/index.js";
 export {
   e as Accordion,
   m as AlertBar,
@@ -50,25 +51,26 @@ export {
   D as Dialog,
   N as Dropdown,
   G as Footer,
-  U as FooterNav,
-  k as Form,
-  j as Greeting,
-  y as Icon,
-  E as Image,
-  J as ImageCard,
-  L as Input,
-  Q as MenuButton,
-  W as Modal,
-  Y as Nav,
-  _ as NavItem,
-  oo as Pill,
-  eo as Search,
-  mo as Select,
-  xo as SplitCard,
-  ao as Stars,
-  no as Testimonial,
-  uo as TextArea,
-  so as Timeline,
-  bo as Tubestops,
-  To as Video
+  P as FooterNav,
+  M as Form,
+  V as Greeting,
+  q as Icon,
+  z as Image,
+  H as ImageCard,
+  K as Input,
+  Q as Link,
+  W as MenuButton,
+  Y as Modal,
+  _ as Nav,
+  oo as NavItem,
+  eo as Pill,
+  mo as Search,
+  xo as Select,
+  ao as SplitCard,
+  no as Stars,
+  uo as Testimonial,
+  so as TextArea,
+  bo as Timeline,
+  To as Tubestops,
+  Bo as Video
 };

package/package.json

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