@skalfa/skalfa-component 1.0.45 → 1.0.46

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 (4) hide show
  1. package/dist/nav/Headbar.component.d.ts +3 -1
  2. package/dist/nav/Headbar.component.js +3 -2
  3. package/package.json +1 -1
  4. package/src/nav/Headbar.component.tsx +54 -12
package/dist/nav/Headbar.component.d.ts CHANGED
@@ -4,5 +4,7 @@ export interface HeadbarProps {
4
4
  backHref?: string | boolean;
5
5
  rightContent?: ReactNode;
6
6
  sidebarId?: string;
7
+ /** Use custom class with: "left::", "right::", "title::", "toggle::", "back::". */
8
+ className?: string;
7
9
  }
8
- export declare function HeadbarComponent({ title, backHref, rightContent, sidebarId }: HeadbarProps): import("@types/react").JSX.Element;
10
+ export declare function HeadbarComponent({ title, backHref, rightContent, sidebarId, className, }: HeadbarProps): import("@types/react").JSX.Element;
package/dist/nav/Headbar.component.js CHANGED
@@ -3,12 +3,13 @@
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.HeadbarComponent = HeadbarComponent;
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const _utils_1 = require("@utils");
6
7
  const _contexts_1 = require("@contexts");
7
8
  const skalfa_icon_1 = require("@skalfa/skalfa-icon");
8
9
  const navigation_1 = require("next/navigation");
9
10
  ;
10
- function HeadbarComponent({ title, backHref, rightContent, sidebarId }) {
11
+ function HeadbarComponent({ title, backHref, rightContent, sidebarId, className = "", }) {
11
12
  const router = (0, navigation_1.useRouter)();
12
13
  const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
13
- return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full items-center mt-2 mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 aspect-square flex justify-center items-center cursor-pointer ", onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/sidebar", className: "text-xl" }) })), backHref && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 aspect-square flex justify-center items-center cursor-pointer", onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "text-xl" }) })), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold px-2", children: title })] }), rightContent && (0, jsx_runtime_1.jsx)("div", { children: rightContent })] }));
14
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex justify-between w-full items-center mt-2 mb-4 headbar", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex items-center headbar-left", (0, _utils_1.pcn)(className, "left")), children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle", (0, _utils_1.pcn)(className, "toggle")), onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/sidebar", className: "text-xl headbar-toggle-icon headbar-icon" }) })), backHref && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-back headbar-back-button", (0, _utils_1.pcn)(className, "back")), onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "text-xl headbar-back-icon headbar-icon" }) })), (0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)("text-lg font-bold px-2 headbar-title", (0, _utils_1.pcn)(className, "title")), children: title })] }), rightContent && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("headbar-right", (0, _utils_1.pcn)(className, "right")), children: rightContent }))] }));
14
15
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.45",
3
+ "version": "1.0.46",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/nav/Headbar.component.tsx CHANGED
@@ -1,41 +1,83 @@
1
1
  "use client"
2
+ import { cn, pcn } from "@utils";
2
3
  import { useToggleContext } from "@contexts";
3
4
  import { Icon, type IconName } from "@skalfa/skalfa-icon";
4
-
5
-
6
5
  import { useRouter } from "next/navigation";
7
6
  import { ReactNode } from "react";
8
7
 
9
8
 
10
9
 
10
+ type CT = "base" | "left" | "right" | "title" | "toggle" | "back";
11
+
11
12
  export interface HeadbarProps {
12
13
  title ?: string;
13
14
  backHref ?: string | boolean;
14
15
  rightContent ?: ReactNode;
15
16
  sidebarId ?: string;
17
+
18
+ /** Use custom class with: "left::", "right::", "title::", "toggle::", "back::". */
19
+ className ?: string;
16
20
  };
17
21
 
18
22
 
19
- export function HeadbarComponent({ title, backHref, rightContent, sidebarId }: HeadbarProps) {
23
+
24
+ export function HeadbarComponent({
25
+ title,
26
+ backHref,
27
+ rightContent,
28
+ sidebarId,
29
+ className = "",
30
+ }: HeadbarProps) {
20
31
  const router = useRouter();
21
- const { toggle, setToggle } = useToggleContext()
32
+ const { toggle, setToggle } = useToggleContext();
22
33
 
23
34
  return (
24
- <div className="flex justify-between w-full items-center mt-2 mb-4">
25
- <div className="flex items-center">
35
+ <div
36
+ className={cn(
37
+ "flex justify-between w-full items-center mt-2 mb-4 headbar",
38
+ pcn<CT>(className, "base")
39
+ )}
40
+ >
41
+ <div className={cn("flex items-center headbar-left", pcn<CT>(className, "left"))}>
26
42
  {toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && (
27
- <div className="w-8 aspect-square flex justify-center items-center cursor-pointer " onClick={() => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`])}>
28
- <Icon icon="solid/sidebar" className="text-xl" />
43
+ <div
44
+ className={cn(
45
+ "w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle",
46
+ pcn<CT>(className, "toggle")
47
+ )}
48
+ onClick={() =>
49
+ setToggle(
50
+ `SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`,
51
+ !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]
52
+ )
53
+ }
54
+ >
55
+ <Icon icon="solid/sidebar" className="text-xl headbar-toggle-icon headbar-icon" />
29
56
  </div>
30
57
  )}
31
58
  {backHref && (
32
- <div className="w-8 aspect-square flex justify-center items-center cursor-pointer" onClick={() => typeof backHref != "boolean" ? router.push(backHref) : router.back()}>
33
- <Icon icon="solid/chevron-left" className="text-xl" />
59
+ <div
60
+ className={cn(
61
+ "w-8 aspect-square flex justify-center items-center cursor-pointer headbar-back headbar-back-button",
62
+ pcn<CT>(className, "back")
63
+ )}
64
+ onClick={() =>
65
+ typeof backHref != "boolean" ? router.push(backHref) : router.back()
66
+ }
67
+ >
68
+ <Icon icon="solid/chevron-left" className="text-xl headbar-back-icon headbar-icon" />
34
69
  </div>
35
70
  )}
36
- <p className="text-lg font-bold px-2">{title}</p>
71
+ <p className={cn("text-lg font-bold px-2 headbar-title", pcn<CT>(className, "title"))}>
72
+ {title}
73
+ </p>
37
74
  </div>
38
- {rightContent && <div>{rightContent}</div>}
75
+ {rightContent && (
76
+ <div className={cn("headbar-right", pcn<CT>(className, "right"))}>
77
+ {rightContent}
78
+ </div>
79
+ )}
39
80
  </div>
40
81
  );
41
82
  }
83
+