@bbki.ng/components 1.4.7 → 1.4.8

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { EventHandler } from 'react';
+import React, { EventHandler, ReactElement } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -76,6 +76,13 @@ declare type PanelProps = {
 };
 declare const Panel: (props: PanelProps) => JSX.Element;
 
+declare type PageProps = {
+    nav: ReactElement;
+    main: ReactElement;
+    footer: ReactElement;
+};
+declare const Page: (props: PageProps) => JSX.Element;
+
 declare type PopConfirmProps = {
     onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
     onCancel?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
@@ -86,4 +93,4 @@ declare type PopConfirmProps = {
 };
 declare const PopConfirm: (props: PopConfirmProps) => JSX.Element;
 
-export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Tag, TagProps, Tags };
+export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Tag, TagProps, Tags };

package/dist/index.js

@@ -66,6 +66,7 @@ __export(src_exports, {
   LinkColor: () => LinkColor,
   Logo: () => Logo,
   Nav: () => Nav,
+  Page: () => Page,
   Panel: () => Panel,
   PopConfirm: () => PopConfirm,
   Tag: () => Tag,
@@ -172,6 +173,11 @@ var HOVER_COLOR_MAPPING = {
   ["red" /* RED */]: "hover:bg-red-100",
   ["gray" /* GRAY */]: "hover:bg-gray-100"
 };
+var FOCUS_BG_COLOR_MAPPING = {
+  ["blue" /* BLUE */]: "focus:bg-blue-600",
+  ["red" /* RED */]: "focus:bg-red-500",
+  ["gray" /* GRAY */]: "focus:bg-gray-400"
+};
 var Link = (props) => {
   const _a = props, {
     color = "blue" /* BLUE */,
@@ -184,7 +190,7 @@ var Link = (props) => {
     "className",
     "children"
   ]);
-  const linkCls = (0, import_classnames2.default)(COLOR_MAPPING[color], className, "rounded", "no-underline", "transition-colors", HOVER_COLOR_MAPPING[color]);
+  const linkCls = (0, import_classnames2.default)(className, "rounded", "no-underline", "transition-colors", "focus:text-white", COLOR_MAPPING[color], HOVER_COLOR_MAPPING[color], FOCUS_BG_COLOR_MAPPING[color]);
   if (external) {
     return /* @__PURE__ */ import_react3.default.createElement("a", {
       href: props.to,
@@ -266,20 +272,35 @@ var Panel = (props) => {
   }, children);
 };
 
-// src/pop-confirm/PopConfirm.tsx
+// src/page/Page.tsx
 var import_react8 = __toESM(require("react"));
+var Page = (props) => {
+  const { nav, main, footer } = props;
+  return /* @__PURE__ */ import_react8.default.createElement("main", {
+    className: "flex flex-col h-full"
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    className: `flx-grow-0 w-full sticky top-0 z-50`
+  }, nav), /* @__PURE__ */ import_react8.default.createElement("section", {
+    className: "flex-grow flex-shrink-0 px-6"
+  }, main), footer && /* @__PURE__ */ import_react8.default.createElement("footer", {
+    className: "flex-grow-0 flex-shrink-0 flex items-center justify-center h-64"
+  }, footer));
+};
+
+// src/pop-confirm/PopConfirm.tsx
+var import_react9 = __toESM(require("react"));
 var PopConfirm = (props) => {
   const { onOk, onCancel, children, content, className } = props;
-  return /* @__PURE__ */ import_react8.default.createElement(Panel, {
+  return /* @__PURE__ */ import_react9.default.createElement(Panel, {
     className
-  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "mb-32"
-  }, children || content), /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, children || content), /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "flex justify-end"
-  }, onCancel && /* @__PURE__ */ import_react8.default.createElement(Button, {
+  }, onCancel && /* @__PURE__ */ import_react9.default.createElement(Button, {
     onClick: onCancel,
     type: "normal" /* NORMAL */
-  }, "Cancel"), onOk && /* @__PURE__ */ import_react8.default.createElement(Button, {
+  }, "Cancel"), onOk && /* @__PURE__ */ import_react9.default.createElement(Button, {
     onClick: onOk,
     className: "ml-16",
     type: "primary" /* PRIMARY */
@@ -296,6 +317,7 @@ module.exports = __toCommonJS(src_exports);
   LinkColor,
   Logo,
   Nav,
+  Page,
   Panel,
   PopConfirm,
   Tag,

package/dist/index.mjs

@@ -130,6 +130,11 @@ var HOVER_COLOR_MAPPING = {
   ["red" /* RED */]: "hover:bg-red-100",
   ["gray" /* GRAY */]: "hover:bg-gray-100"
 };
+var FOCUS_BG_COLOR_MAPPING = {
+  ["blue" /* BLUE */]: "focus:bg-blue-600",
+  ["red" /* RED */]: "focus:bg-red-500",
+  ["gray" /* GRAY */]: "focus:bg-gray-400"
+};
 var Link = (props) => {
   const _a = props, {
     color = "blue" /* BLUE */,
@@ -142,7 +147,7 @@ var Link = (props) => {
     "className",
     "children"
   ]);
-  const linkCls = classNames2(COLOR_MAPPING[color], className, "rounded", "no-underline", "transition-colors", HOVER_COLOR_MAPPING[color]);
+  const linkCls = classNames2(className, "rounded", "no-underline", "transition-colors", "focus:text-white", COLOR_MAPPING[color], HOVER_COLOR_MAPPING[color], FOCUS_BG_COLOR_MAPPING[color]);
   if (external) {
     return /* @__PURE__ */ React4.createElement("a", {
       href: props.to,
@@ -224,20 +229,35 @@ var Panel = (props) => {
   }, children);
 };
 
-// src/pop-confirm/PopConfirm.tsx
+// src/page/Page.tsx
 import React9 from "react";
+var Page = (props) => {
+  const { nav, main, footer } = props;
+  return /* @__PURE__ */ React9.createElement("main", {
+    className: "flex flex-col h-full"
+  }, /* @__PURE__ */ React9.createElement("div", {
+    className: `flx-grow-0 w-full sticky top-0 z-50`
+  }, nav), /* @__PURE__ */ React9.createElement("section", {
+    className: "flex-grow flex-shrink-0 px-6"
+  }, main), footer && /* @__PURE__ */ React9.createElement("footer", {
+    className: "flex-grow-0 flex-shrink-0 flex items-center justify-center h-64"
+  }, footer));
+};
+
+// src/pop-confirm/PopConfirm.tsx
+import React10 from "react";
 var PopConfirm = (props) => {
   const { onOk, onCancel, children, content, className } = props;
-  return /* @__PURE__ */ React9.createElement(Panel, {
+  return /* @__PURE__ */ React10.createElement(Panel, {
     className
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: "mb-32"
-  }, children || content), /* @__PURE__ */ React9.createElement("div", {
+  }, children || content), /* @__PURE__ */ React10.createElement("div", {
     className: "flex justify-end"
-  }, onCancel && /* @__PURE__ */ React9.createElement(Button, {
+  }, onCancel && /* @__PURE__ */ React10.createElement(Button, {
     onClick: onCancel,
     type: "normal" /* NORMAL */
-  }, "Cancel"), onOk && /* @__PURE__ */ React9.createElement(Button, {
+  }, "Cancel"), onOk && /* @__PURE__ */ React10.createElement(Button, {
     onClick: onOk,
     className: "ml-16",
     type: "primary" /* PRIMARY */
@@ -252,6 +272,7 @@ export {
   LinkColor,
   Logo,
   Nav,
+  Page,
   Panel,
   PopConfirm,
   Tag,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",