trepur_components 2.3.18 → 2.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/components/Nav/Nav.stories.d.ts +3 -3
  2. package/lib/components/Nav/index.d.ts +3 -3
  3. package/lib/components/Nav/index.js +74 -60
  4. package/lib/components/SplitCard/SplitCard.stories.d.ts +2 -1
  5. package/lib/components/SplitCard/index.js +41 -39
  6. package/package.json +1 -1
package/lib/components/Nav/Nav.stories.d.ts CHANGED
@@ -4,15 +4,15 @@ import { StoryObj } from '@storybook/react';
4
4
  declare const meta: {
5
5
  title: string;
6
6
  component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').NavContextProps & import('react').RefAttributes<HTMLDivElement>> & {
7
- Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
8
- logo: string;
9
- } & import('react').RefAttributes<HTMLDivElement>>;
7
+ Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
10
8
  DesktopHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
9
+ MobileHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
11
10
  Section: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
12
11
  Logo: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
13
12
  Body: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
14
13
  Folder: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
15
14
  label: string;
15
+ active?: boolean | undefined;
16
16
  } & import('react').RefAttributes<HTMLDivElement>>;
17
17
  };
18
18
  parameters: {
package/lib/components/Nav/index.d.ts CHANGED
@@ -6,15 +6,15 @@ export interface NavContextProps {
6
6
  setExpanded?: (val: boolean) => void;
7
7
  }
8
8
  declare const Nav: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & NavContextProps & import('react').RefAttributes<HTMLDivElement>> & {
9
- Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
10
- logo: string;
11
- } & import('react').RefAttributes<HTMLDivElement>>;
9
+ Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
12
10
  DesktopHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
11
+ MobileHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
13
12
  Section: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
14
13
  Logo: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
15
14
  Body: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
16
15
  Folder: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
17
16
  label: string;
17
+ active?: boolean | undefined;
18
18
  } & import('react').RefAttributes<HTMLDivElement>>;
19
19
  };
20
20
  export { Nav };
package/lib/components/Nav/index.js CHANGED
@@ -1,82 +1,96 @@
1
- import { jsx as e, jsxs as d, Fragment as h } from "react/jsx-runtime";
2
- import { createContext as y, forwardRef as o, useState as c, useMemo as b, useContext as m, useRef as C } from "react";
3
- import { HamburgerIcon as H } from "../HamburgerIcon/index.js";
4
- import { faChevronDown as k } from "@fortawesome/fontawesome-free-solid";
5
- import p from "clsx";
6
- import { Icon as w } from "../Icon/index.js";
7
- const l = y(null), v = o(({ children: a }, s) => {
8
- const [r, t] = c(!1), n = b(
1
+ import { jsx as e, jsxs as n, Fragment as y } from "react/jsx-runtime";
2
+ import { createContext as H, forwardRef as r, useState as c, useMemo as C, useContext as m, useRef as k } from "react";
3
+ import { HamburgerIcon as w } from "../HamburgerIcon/index.js";
4
+ import { faChevronDown as M } from "@fortawesome/fontawesome-free-solid";
5
+ import l from "clsx";
6
+ import { Icon as j } from "../Icon/index.js";
7
+ const i = H(null), p = r(({ children: a }, s) => {
8
+ const [t, o] = c(!1), d = C(
9
9
  () => ({
10
- expanded: r,
11
- setExpanded: t
10
+ expanded: t,
11
+ setExpanded: o
12
12
  }),
13
- [r, t]
13
+ [t, o]
14
14
  );
15
- return /* @__PURE__ */ e(l.Provider, { value: n, children: /* @__PURE__ */ e("div", { children: a }) });
16
- }), N = o(({ children: a, logo: s }, r) => {
17
- const { setExpanded: t, expanded: n } = m(l) || {};
18
- return /* @__PURE__ */ d("div", { ref: r, className: p("relative h-24 w-full bg-nav-bg px-2 py-2"), children: [
19
- /* @__PURE__ */ d("div", { className: "flex h-full md:hidden", children: [
20
- /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
21
- H,
22
- {
23
- variant: "ghost",
24
- onClick: () => t == null ? void 0 : t(!n),
25
- className: "aspect-square"
26
- }
27
- ) }),
28
- /* @__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: s }) })
29
- ] }),
30
- a
15
+ return /* @__PURE__ */ e(i.Provider, { value: d, children: /* @__PURE__ */ e("div", { children: a }) });
16
+ }), v = r(
17
+ ({ children: a }, s) => /* @__PURE__ */ e(
18
+ "div",
19
+ {
20
+ ref: s,
21
+ className: l("relative h-24 w-full bg-nav-bg px-2 py-2"),
22
+ children: a
23
+ }
24
+ )
25
+ ), N = r(({ children: a }, s) => {
26
+ const { setExpanded: t, expanded: o } = m(i) || {};
27
+ return /* @__PURE__ */ n("div", { ref: s, className: "flex h-full md:hidden", children: [
28
+ /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
29
+ w,
30
+ {
31
+ variant: "ghost",
32
+ onClick: () => t == null ? void 0 : t(!o),
33
+ className: "aspect-square"
34
+ }
35
+ ) }),
36
+ /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: a })
31
37
  ] });
32
- }), g = o(
33
- ({ children: a }, s) => {
34
- const { expanded: r } = m(l) || {};
35
- return r ? /* @__PURE__ */ e("div", { className: "h-screen bg-nav-bg 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, {});
36
- }
37
- ), f = o(({ children: a }, s) => /* @__PURE__ */ e(
38
+ }), g = r(({ children: a }, s) => /* @__PURE__ */ e(
38
39
  "div",
39
40
  {
40
41
  ref: s,
41
42
  className: "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
42
43
  children: a
43
44
  }
44
- )), x = o(
45
+ )), f = r(
46
+ ({ children: a }, s) => {
47
+ const { expanded: t } = m(i) || {};
48
+ return t ? /* @__PURE__ */ e("div", { className: "h-screen bg-nav-bg 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(y, {});
49
+ }
50
+ ), u = r(
45
51
  ({ children: a }, s) => /* @__PURE__ */ e("div", { ref: s, className: "my-4 md:flex md:gap-4 lg:gap-8", children: a })
46
- ), u = o(({ label: a, children: s }) => {
47
- const [r, t] = c(!1), n = C(null);
48
- return /* @__PURE__ */ d(
52
+ ), x = r(({ label: a, children: s, active: t = !1 }) => {
53
+ const [o, d] = c(!1), b = k(null);
54
+ return /* @__PURE__ */ n(
49
55
  "div",
50
56
  {
51
- ref: n,
52
- onClick: () => t(!0),
53
- onMouseLeave: () => t(!1),
54
- className: "relative m-auto text-xl font-normal tracking-wider text-nav-text hover:cursor-pointer",
57
+ ref: b,
58
+ onClick: () => d(!0),
59
+ onMouseLeave: () => d(!1),
60
+ className: l(
61
+ "relative m-auto text-xl tracking-wider text-nav-text hover:cursor-pointer",
62
+ {
63
+ "font-bold": t,
64
+ "font-normal": !t
65
+ }
66
+ ),
55
67
  children: [
56
- /* @__PURE__ */ d("div", { className: "flex items-center gap-px ", children: [
68
+ /* @__PURE__ */ n("div", { className: "flex items-center gap-px ", children: [
57
69
  /* @__PURE__ */ e("p", { children: a }),
58
- /* @__PURE__ */ e(w, { icon: k })
70
+ /* @__PURE__ */ e(j, { icon: M })
59
71
  ] }),
60
- r && /* @__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: s }) })
72
+ 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: s }) })
61
73
  ]
62
74
  }
63
75
  );
64
- }), i = o(({ className: a, src: s, ...r }, t) => /* @__PURE__ */ e("img", { className: p("h-20", a), ref: t, src: s, ...r }));
65
- v.displayName = "Nav";
66
- N.displayName = "Nav.Header";
67
- f.displayName = "Nav.DesktopHeader";
68
- i.displayName = "Nav.Logo";
69
- x.displayName = "Nav.Section";
70
- g.displayName = "Nav.Body";
71
- u.displayName = "Nav.Folder";
72
- const I = Object.assign(v, {
73
- Header: N,
74
- DesktopHeader: f,
75
- Section: x,
76
- Logo: i,
77
- Body: g,
78
- Folder: u
76
+ }), h = r(({ className: a, src: s, ...t }, o) => /* @__PURE__ */ e("img", { className: l("h-20", a), ref: o, src: s, ...t }));
77
+ p.displayName = "Nav";
78
+ v.displayName = "Nav.Header";
79
+ g.displayName = "Nav.DesktopHeader";
80
+ N.displayName = "Nav.MobileHeader";
81
+ h.displayName = "Nav.Logo";
82
+ u.displayName = "Nav.Section";
83
+ f.displayName = "Nav.Body";
84
+ x.displayName = "Nav.Folder";
85
+ const R = Object.assign(p, {
86
+ Header: v,
87
+ DesktopHeader: g,
88
+ MobileHeader: N,
89
+ Section: u,
90
+ Logo: h,
91
+ Body: f,
92
+ Folder: x
79
93
  });
80
94
  export {
81
- I as Nav
95
+ R as Nav
82
96
  };
package/lib/components/SplitCard/SplitCard.stories.d.ts CHANGED
@@ -10,10 +10,11 @@ declare const meta: {
10
10
  Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
11
11
  };
12
12
  args: {
13
- swapDesktop: true;
14
13
  children: import("react/jsx-runtime").JSX.Element[];
15
14
  };
16
15
  };
17
16
  export default meta;
18
17
  type Story = StoryObj<typeof SplitCard>;
19
18
  export declare const Default: Story;
19
+ export declare const swapDesktop: Story;
20
+ export declare const swapMobile: Story;
package/lib/components/SplitCard/index.js CHANGED
@@ -1,82 +1,84 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { createContext as g, forwardRef as l, useMemo as N, useContext as p } from "react";
1
+ import { jsx as n } from "react/jsx-runtime";
2
+ import { createContext as u, forwardRef as d, useMemo as N, useContext as c } from "react";
3
3
  import h from "../../utils/matchMedia.js";
4
- import { Screens as M } from "../../utils/screens.js";
5
- import a from "clsx";
6
- const m = g(null), x = l(({ id: i, className: e, children: r, swapDesktop: t, swapMobile: n, ...o }, d) => {
7
- const S = `(min-width: ${M.md})`, c = h(S), u = N(
4
+ import { Screens as y } from "../../utils/screens.js";
5
+ import p from "clsx";
6
+ const a = u(null), x = d(({ id: l, className: e, children: r, swapDesktop: t, swapMobile: i, ...s }, o) => {
7
+ const f = `(min-width: ${y.md})`, m = h(f), S = N(
8
8
  () => ({
9
9
  swapDesktop: t,
10
- swapMobile: n,
11
- isMd: c
10
+ swapMobile: i,
11
+ isMd: m
12
12
  }),
13
- [t, n, c]
13
+ [t, i, m]
14
14
  );
15
- return /* @__PURE__ */ s(m.Provider, { value: u, children: /* @__PURE__ */ s(
15
+ return /* @__PURE__ */ n(a.Provider, { value: S, children: /* @__PURE__ */ n(
16
16
  "div",
17
17
  {
18
- ref: d,
19
- ...o,
20
- className: a("grid grid-cols-1 md:grid-cols-2", e),
18
+ ref: o,
19
+ ...s,
20
+ className: p("grid grid-cols-1 md:grid-cols-2", e),
21
21
  children: r
22
22
  }
23
23
  ) });
24
- }), C = l(({ className: i, children: e, ...r }, t) => {
25
- const { swapDesktop: n, swapMobile: o, isMd: d } = p(m) || {};
26
- return /* @__PURE__ */ s(
24
+ }), g = d(({ className: l, children: e, ...r }, t) => {
25
+ const { swapDesktop: i, swapMobile: s, isMd: o } = c(a) || {};
26
+ return /* @__PURE__ */ n(
27
27
  "div",
28
28
  {
29
29
  ref: t,
30
30
  ...r,
31
- className: a(
32
- "mx-auto flex items-center p-8 py-12 text-center md:p-12 lg:p-20",
31
+ className: p(
32
+ "mx-auto flex items-center px-4 py-2 text-center md:p-8 lg:py-12",
33
33
  {
34
- "md:order-last": n,
35
- "order-last": !d && o
34
+ "md:order-last lg:pl-12 lg:pr-20": i,
35
+ "lg:pl-20 lg:pr-12": !i,
36
+ "order-last": !o && s
36
37
  },
37
- i
38
+ l
38
39
  ),
39
40
  children: e
40
41
  }
41
42
  );
42
- }), f = l(({ className: i, children: e, ...r }, t) => {
43
- const { swapDesktop: n, swapMobile: o, isMd: d } = p(m) || {};
44
- return /* @__PURE__ */ s(
43
+ }), C = d(({ className: l, children: e, ...r }, t) => {
44
+ const { swapDesktop: i, swapMobile: s, isMd: o } = c(a) || {};
45
+ return /* @__PURE__ */ n(
45
46
  "div",
46
47
  {
47
48
  ref: t,
48
49
  ...r,
49
- className: a(
50
- "flex h-full items-center p-8 text-center md:p-12 lg:p-20",
50
+ className: p(
51
+ "flex h-full items-center px-4 py-2 text-center md:p-8 lg:py-12",
51
52
  {
52
- "md:order-first": n,
53
- "order-first": !d && o
53
+ "md:order-first lg:pl-20 lg:pr-12": i,
54
+ "lg:pl-12 lg:pr-20": !i,
55
+ "order-first": !o && s
54
56
  },
55
- i
57
+ l
56
58
  ),
57
59
  children: e
58
60
  }
59
61
  );
60
- }), v = l(({ className: i, children: e, ...r }, t) => /* @__PURE__ */ s(
62
+ }), M = d(({ className: l, children: e, ...r }, t) => /* @__PURE__ */ n(
61
63
  "p",
62
64
  {
63
65
  ref: t,
64
- className: a(
66
+ className: p(
65
67
  "items-center text-6xl font-semibold tracking-wider md:text-4xl lg:text-6xl",
66
- i
68
+ l
67
69
  ),
68
70
  ...r,
69
71
  children: e
70
72
  }
71
- )), w = l(({ className: i, children: e, ...r }, t) => /* @__PURE__ */ s("p", { ref: t, className: a("text-lg", i), ...r, children: e }));
73
+ )), v = d(({ className: l, children: e, ...r }, t) => /* @__PURE__ */ n("p", { ref: t, className: p("text-lg", l), ...r, children: e }));
72
74
  x.displayName = "SplitCard";
73
- C.displayName = "SplitCard.LeftContent";
74
- f.displayName = "SplitCard.RightContent";
75
+ g.displayName = "SplitCard.LeftContent";
76
+ C.displayName = "SplitCard.RightContent";
75
77
  const k = Object.assign(x, {
76
- LeftContent: C,
77
- RightContent: f,
78
- Title: v,
79
- Text: w
78
+ LeftContent: g,
79
+ RightContent: C,
80
+ Title: M,
81
+ Text: v
80
82
  });
81
83
  export {
82
84
  k as SplitCard
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trepur_components",
3
- "version": "2.3.18",
3
+ "version": "2.3.20",
4
4
  "description": "component lib",
5
5
  "author": "trepur_ttenneb",
6
6
  "private": false,