@bbki.ng/components 1.4.8 → 1.5.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { EventHandler, ReactElement } from 'react';
+import React, { EventHandler, ReactElement, CSSProperties } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -93,4 +93,34 @@ 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, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Tag, TagProps, Tags };
+declare type TableProps = {
+    rowCount: number;
+    rowRenderer: (index: number) => any;
+    headerRenderer?: () => any;
+    className?: string;
+};
+declare const Table: {
+    (props: TableProps): JSX.Element;
+    HCell(props: {
+        children: any;
+        style?: CSSProperties;
+    }): JSX.Element;
+    Cell(props: {
+        children: any;
+        style?: CSSProperties;
+    }): JSX.Element;
+};
+
+declare enum SkeletonColor {
+    BLUE = "blue",
+    RED = "red",
+    GRAY = "gray"
+}
+declare type SkeletonProps = {
+    width?: number;
+    height?: number;
+    bgColor?: SkeletonColor;
+};
+declare const Skeleton: (props: SkeletonProps) => JSX.Element;
+
+export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags };

package/dist/index.js

@@ -69,6 +69,9 @@ __export(src_exports, {
   Page: () => Page,
   Panel: () => Panel,
   PopConfirm: () => PopConfirm,
+  Skeleton: () => Skeleton,
+  SkeletonColor: () => SkeletonColor,
+  Table: () => Table,
   Tag: () => Tag,
   Tags: () => Tags
 });
@@ -81,7 +84,7 @@ var Article = (props) => {
   return /* @__PURE__ */ import_react.default.createElement("div", {
     className: (0, import_classnames.default)("article", className)
   }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "text-[2.25rem]"
+    className: "text-[2.25rem] leading-none"
   }, title), /* @__PURE__ */ import_react.default.createElement("hr", {
     className: "my-64 border-gray-200"
   }), /* @__PURE__ */ import_react.default.createElement("div", {
@@ -306,6 +309,45 @@ var PopConfirm = (props) => {
     type: "primary" /* PRIMARY */
   }, "OK")));
 };
+
+// src/table/Table.tsx
+var import_react10 = __toESM(require("react"));
+var Table = (props) => {
+  const { rowCount, rowRenderer, headerRenderer, className } = props;
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(/* @__PURE__ */ import_react10.default.createElement("tr", {
+      key: i
+    }, rowRenderer(i)));
+  }
+  return /* @__PURE__ */ import_react10.default.createElement("table", {
+    className
+  }, headerRenderer && /* @__PURE__ */ import_react10.default.createElement("thead", null, /* @__PURE__ */ import_react10.default.createElement("tr", null, headerRenderer())), /* @__PURE__ */ import_react10.default.createElement("tbody", null, rows));
+};
+Table.HCell = (props) => /* @__PURE__ */ import_react10.default.createElement("th", __spreadValues({}, props), props.children);
+Table.Cell = (props) => /* @__PURE__ */ import_react10.default.createElement("td", __spreadValues({}, props), props.children);
+
+// src/skeleton/Seleton.tsx
+var import_classnames5 = __toESM(require("classnames"));
+var import_react11 = __toESM(require("react"));
+var SkeletonColor = /* @__PURE__ */ ((SkeletonColor2) => {
+  SkeletonColor2["BLUE"] = "blue";
+  SkeletonColor2["RED"] = "red";
+  SkeletonColor2["GRAY"] = "gray";
+  return SkeletonColor2;
+})(SkeletonColor || {});
+var COLOR_MAPPING2 = {
+  ["blue" /* BLUE */]: "bg-blue-100",
+  ["red" /* RED */]: "bg-red-100",
+  ["gray" /* GRAY */]: "bg-gray-100"
+};
+var Skeleton = (props) => {
+  const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
+  return /* @__PURE__ */ import_react11.default.createElement("div", {
+    className: (0, import_classnames5.default)(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
+    style: { width, height }
+  });
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -320,6 +362,9 @@ module.exports = __toCommonJS(src_exports);
   Page,
   Panel,
   PopConfirm,
+  Skeleton,
+  SkeletonColor,
+  Table,
   Tag,
   Tags
 });

package/dist/index.mjs

@@ -38,7 +38,7 @@ var Article = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className: classNames("article", className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "text-[2.25rem]"
+    className: "text-[2.25rem] leading-none"
   }, title), /* @__PURE__ */ React.createElement("hr", {
     className: "my-64 border-gray-200"
   }), /* @__PURE__ */ React.createElement("div", {
@@ -263,6 +263,45 @@ var PopConfirm = (props) => {
     type: "primary" /* PRIMARY */
   }, "OK")));
 };
+
+// src/table/Table.tsx
+import React11 from "react";
+var Table = (props) => {
+  const { rowCount, rowRenderer, headerRenderer, className } = props;
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(/* @__PURE__ */ React11.createElement("tr", {
+      key: i
+    }, rowRenderer(i)));
+  }
+  return /* @__PURE__ */ React11.createElement("table", {
+    className
+  }, headerRenderer && /* @__PURE__ */ React11.createElement("thead", null, /* @__PURE__ */ React11.createElement("tr", null, headerRenderer())), /* @__PURE__ */ React11.createElement("tbody", null, rows));
+};
+Table.HCell = (props) => /* @__PURE__ */ React11.createElement("th", __spreadValues({}, props), props.children);
+Table.Cell = (props) => /* @__PURE__ */ React11.createElement("td", __spreadValues({}, props), props.children);
+
+// src/skeleton/Seleton.tsx
+import classNames5 from "classnames";
+import React12 from "react";
+var SkeletonColor = /* @__PURE__ */ ((SkeletonColor2) => {
+  SkeletonColor2["BLUE"] = "blue";
+  SkeletonColor2["RED"] = "red";
+  SkeletonColor2["GRAY"] = "gray";
+  return SkeletonColor2;
+})(SkeletonColor || {});
+var COLOR_MAPPING2 = {
+  ["blue" /* BLUE */]: "bg-blue-100",
+  ["red" /* RED */]: "bg-red-100",
+  ["gray" /* GRAY */]: "bg-gray-100"
+};
+var Skeleton = (props) => {
+  const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
+  return /* @__PURE__ */ React12.createElement("div", {
+    className: classNames5(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
+    style: { width, height }
+  });
+};
 export {
   Article,
   Breadcrumb,
@@ -275,6 +314,9 @@ export {
   Page,
   Panel,
   PopConfirm,
+  Skeleton,
+  SkeletonColor,
+  Table,
   Tag,
   Tags
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.4.8",
+  "version": "1.5.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -34,6 +34,7 @@
   },
   "peerDependencies": {
     "classnames": "^2.3.1",
-    "react-router-dom": "5.3.0"
+    "react-router-dom": "5.3.0",
+    "@tailwindcss/typography": "^0.5.0"
   }
 }