@tecsinapse/cortex-react 1.2.1 → 1.2.2

package/dist/cjs/components/Avatar.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var utils = require('./utils.js');
+
+const Avatar = ({ src, name, className, ...rest }) => {
+  const [hasError, setHasError] = React.useState(false);
+  React.useEffect(() => {
+    setHasError(false);
+  }, [src]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx(
+        "rounded-pill bg-secondary-dark w-mega h-mega flex items-center justify-center cursor-pointer",
+        className
+      )
+    },
+    src && !hasError ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src,
+        alt: name,
+        className: "rounded-pill",
+        onError: () => setHasError(true)
+      }
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base" }, utils.getInitialsName(name))
+  );
+};
+
+exports.Avatar = Avatar;

package/dist/cjs/components/BreadcrumbItem.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var md = require('react-icons/md');
+
+const BreadcrumbItem = ({
+  isLast,
+  Component,
+  componentProps,
+  title
+}) => {
+  return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
+    },
+    title
+  ), !isLast ? /* @__PURE__ */ React.createElement(
+    md.MdOutlineKeyboardDoubleArrowRight,
+    {
+      className: "mt-[0.125rem] text-primary-medium"
+    }
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+};
+
+exports.BreadcrumbItem = BreadcrumbItem;

package/dist/cjs/components/Breadcrumbs.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var Card = require('./Card.js');
+var BreadcrumbItem = require('./BreadcrumbItem.js');
+
+const Breadcrumbs = (props) => {
+  const { breadcrumbs, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Card.Card, { className: "flex gap-x-mili w-full items-center py-mili", ...rest }, breadcrumbs.map((item, index) => {
+    const isLast = index === breadcrumbs.length - 1;
+    return /* @__PURE__ */ React.createElement(
+      BreadcrumbItem.BreadcrumbItem,
+      {
+        key: `${item.title}-${index}`,
+        ...item,
+        isLast
+      }
+    );
+  }));
+};
+
+exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Card.js

@@ -5,15 +5,7 @@ var cortexCore = require('@tecsinapse/cortex-core');
 
 const Card = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cortexCore.card({ className }),
-      ref,
-      ...rest
-    },
-    children
-  );
+  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.card({ className }), ref, ...rest }, children);
 });
 
 exports.Card = Card;

package/dist/cjs/components/Drawer.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Drawer = ({
+  children,
+  onClose,
+  open,
+  position = "right"
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cortexCore.overlay({ show: open }),
+      onClick: () => onClose(false)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cortexCore.drawer({
+        position,
+        open
+      })
+    },
+    children
+  ));
+};
+
+exports.Drawer = Drawer;

package/dist/cjs/components/SearchInput.js

@@ -13,6 +13,8 @@ require('./Tag.js');
 require('./Toggle.js');
 require('./TextArea.js');
 require('@tecsinapse/cortex-core');
+require('react-icons/md');
+require('clsx');
 var ai = require('react-icons/ai');
 var io5 = require('react-icons/io5');
 var useDebouncedState = require('../hooks/useDebouncedState.js');

package/dist/cjs/components/Skeleton.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Skeleton = ({
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx("animate-pulse bg-secondary-light", className)
+    }
+  );
+};
+
+exports.Skeleton = Skeleton;

package/dist/cjs/components/Table.js

@@ -18,6 +18,9 @@ const THeadCell = ({
   className,
   ...rest
 }) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), ...rest }, children);
+const TRowHeader = ({
+  children
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
 const TCell = ({
   children,
   className,
@@ -41,7 +44,7 @@ const Hr = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
 
 exports.Hr = Hr;
 exports.TCell = TCell;
@@ -49,5 +52,6 @@ exports.TFoot = TFoot;
 exports.THead = THead;
 exports.THeadCell = THeadCell;
 exports.TRow = TRow;
+exports.TRowHeader = TRowHeader;
 exports.Table = Table;
 exports.Td = Td;

package/dist/cjs/components/utils.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const getInitialsName = (name) => {
+  const nameSplit = name.split(" ");
+  if (nameSplit.length > 1) {
+    return nameSplit.slice(0, 2).map((name2) => name2[0]).join("");
+  }
+  return name[0];
+};
+
+exports.getInitialsName = getInitialsName;

package/dist/cjs/index.js

@@ -12,6 +12,10 @@ var Tag = require('./components/Tag.js');
 var Toggle = require('./components/Toggle.js');
 var TextArea = require('./components/TextArea.js');
 var Table = require('./components/Table.js');
+var Drawer = require('./components/Drawer.js');
+var Breadcrumbs = require('./components/Breadcrumbs.js');
+var Avatar = require('./components/Avatar.js');
+var Skeleton = require('./components/Skeleton.js');
 
 
 
@@ -38,5 +42,10 @@ exports.TFoot = Table.TFoot;
 exports.THead = Table.THead;
 exports.THeadCell = Table.THeadCell;
 exports.TRow = Table.TRow;
+exports.TRowHeader = Table.TRowHeader;
 exports.Table = Table.Table;
 exports.Td = Table.Td;
+exports.Drawer = Drawer.Drawer;
+exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
+exports.Avatar = Avatar.Avatar;
+exports.Skeleton = Skeleton.Skeleton;

package/dist/esm/components/Avatar.js

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import React from 'react';
+import { getInitialsName } from './utils.js';
+
+const Avatar = ({ src, name, className, ...rest }) => {
+  const [hasError, setHasError] = React.useState(false);
+  React.useEffect(() => {
+    setHasError(false);
+  }, [src]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx(
+        "rounded-pill bg-secondary-dark w-mega h-mega flex items-center justify-center cursor-pointer",
+        className
+      )
+    },
+    src && !hasError ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src,
+        alt: name,
+        className: "rounded-pill",
+        onError: () => setHasError(true)
+      }
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base" }, getInitialsName(name))
+  );
+};
+
+export { Avatar };

package/dist/esm/components/BreadcrumbItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
+
+const BreadcrumbItem = ({
+  isLast,
+  Component,
+  componentProps,
+  title
+}) => {
+  return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
+    },
+    title
+  ), !isLast ? /* @__PURE__ */ React.createElement(
+    MdOutlineKeyboardDoubleArrowRight,
+    {
+      className: "mt-[0.125rem] text-primary-medium"
+    }
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+};
+
+export { BreadcrumbItem };

package/dist/esm/components/Breadcrumbs.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Card } from './Card.js';
+import { BreadcrumbItem } from './BreadcrumbItem.js';
+
+const Breadcrumbs = (props) => {
+  const { breadcrumbs, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Card, { className: "flex gap-x-mili w-full items-center py-mili", ...rest }, breadcrumbs.map((item, index) => {
+    const isLast = index === breadcrumbs.length - 1;
+    return /* @__PURE__ */ React.createElement(
+      BreadcrumbItem,
+      {
+        key: `${item.title}-${index}`,
+        ...item,
+        isLast
+      }
+    );
+  }));
+};
+
+export { Breadcrumbs };

package/dist/esm/components/Card.js

@@ -3,15 +3,7 @@ import { card } from '@tecsinapse/cortex-core';
 
 const Card = forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: card({ className }),
-      ref,
-      ...rest
-    },
-    children
-  );
+  return /* @__PURE__ */ React.createElement("div", { className: card({ className }), ref, ...rest }, children);
 });
 
 export { Card };

package/dist/esm/components/Drawer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { overlay, drawer } from '@tecsinapse/cortex-core';
+
+const Drawer = ({
+  children,
+  onClose,
+  open,
+  position = "right"
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: overlay({ show: open }),
+      onClick: () => onClose(false)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: drawer({
+        position,
+        open
+      })
+    },
+    children
+  ));
+};
+
+export { Drawer };

package/dist/esm/components/SearchInput.js

@@ -11,6 +11,8 @@ import './Tag.js';
 import './Toggle.js';
 import './TextArea.js';
 import '@tecsinapse/cortex-core';
+import 'react-icons/md';
+import 'clsx';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { IoSearchOutline } from 'react-icons/io5';
 import { useDebouncedState } from '../hooks/useDebouncedState.js';

package/dist/esm/components/Skeleton.js

@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const Skeleton = ({
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx("animate-pulse bg-secondary-light", className)
+    }
+  );
+};
+
+export { Skeleton };

package/dist/esm/components/Table.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { tHead, tRow, tHeadCell, tCell, tFoot, tRoot, hr } from '@tecsinapse/cortex-core';
+import { tHead, tRow, tHeadCell, hr, tCell, tFoot, tRoot } from '@tecsinapse/cortex-core';
 
 const THead = ({
   children,
@@ -16,6 +16,9 @@ const THeadCell = ({
   className,
   ...rest
 }) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
+const TRowHeader = ({
+  children
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
 const TCell = ({
   children,
   className,
@@ -39,6 +42,6 @@ const Hr = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
 
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td };
+export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };

package/dist/esm/components/utils.js

@@ -0,0 +1,9 @@
+const getInitialsName = (name) => {
+  const nameSplit = name.split(" ");
+  if (nameSplit.length > 1) {
+    return nameSplit.slice(0, 2).map((name2) => name2[0]).join("");
+  }
+  return name[0];
+};
+
+export { getInitialsName };

package/dist/esm/index.js

@@ -9,4 +9,8 @@ export { Snackbar } from './components/Snackbar.js';
 export { Tag } from './components/Tag.js';
 export { Toggle } from './components/Toggle.js';
 export { TextArea } from './components/TextArea.js';
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td } from './components/Table.js';
+export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
+export { Drawer } from './components/Drawer.js';
+export { Breadcrumbs } from './components/Breadcrumbs.js';
+export { Avatar } from './components/Avatar.js';
+export { Skeleton } from './components/Skeleton.js';

package/dist/types/components/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    name: string;
+}
+export declare const Avatar: ({ src, name, className, ...rest }: AvatarProps) => JSX.Element;
+export {};

package/dist/types/components/BreadcrumbItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BreadcrumbType } from '../components';
+interface BreadcrumbItemProps extends BreadcrumbType {
+    isLast: boolean;
+}
+export declare const BreadcrumbItem: ({ isLast, Component, componentProps, title, }: BreadcrumbItemProps) => JSX.Element;
+export {};

package/dist/types/components/Breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import React, { ElementType } from 'react';
+export interface BreadcrumbType {
+    title: string;
+    Component: ElementType;
+    componentProps?: any;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
+    breadcrumbs: BreadcrumbType[];
+}
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;

package/dist/types/components/Card.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface CardProps {
-    children: JSX.Element;
+    children?: React.ReactNode;
 }
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/components/Drawer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DrawerProps {
+    open: boolean;
+    onClose: (open: boolean) => void;
+    position?: 'left' | 'right';
+    children?: React.ReactNode;
+}
+export declare const Drawer: ({ children, onClose, open, position, }: DrawerProps) => JSX.Element;
+export {};

package/dist/types/components/Skeleton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Skeleton: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/dist/types/components/Table.d.ts

@@ -5,6 +5,7 @@ interface TableCommon {
 export declare const THead: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
 export declare const TRow: ({ children, className, ...rest }: TableCommon & React.HTMLAttributes<HTMLTableRowElement>) => JSX.Element;
 export declare const THeadCell: ({ children, className, ...rest }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export declare const TRowHeader: ({ children, }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export declare const TCell: ({ children, className, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export declare const TFoot: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
 export declare const Table: ({ children, className, ...rest }: TableCommon & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;

package/dist/types/components/index.d.ts

@@ -10,3 +10,7 @@ export * from './Tag';
 export * from './Toggle';
 export * from './TextArea';
 export * from './Table';
+export * from './Drawer';
+export * from './Breadcrumbs';
+export * from './Avatar';
+export * from './Skeleton';

package/dist/types/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const getInitialsName: (name: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -34,5 +34,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "dc62ed9d05cd238fc3f65dee50c5fef4a3d615e0"
+  "gitHead": "6d7f265c8000b3a2a970efb0116483e5af4828b0"
 }