pallote-react 0.11.0 → 0.13.0

package/index.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef } from 'react';
+import React__default, { useState, useEffect, useRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
-import { X, CalendarBlank, Clock, CaretUpDown, ArrowSquareOut } from '@phosphor-icons/react';
+import { X, CalendarBlank, Clock, CaretUpDown, ArrowSquareOut, CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from '@phosphor-icons/react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 const Color = ({
@@ -2830,8 +2830,6 @@ const NavBar = ({
   }, props), /*#__PURE__*/React__default.createElement("div", {
     className: "navbar_main"
   }, /*#__PURE__*/React__default.createElement(HomeLinkComponent, {
-    to: "/",
-    exact: true,
     className: "navbar_logo"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: "https://pallote.com/logos/pallote-logo.svg",
@@ -3275,6 +3273,265 @@ Switch.propTypes = {
   className: PropTypes.node
 };
 
+const TabsContext = /*#__PURE__*/createContext();
+const Tabs = ({
+  direction,
+  dense,
+  hasBorder,
+  className,
+  children
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
+    value: {
+      activeIndex,
+      setActiveIndex
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['tabs', {
+      [`tabs-${direction}`]: direction,
+      'tabs-dense': dense,
+      'tabs-hasBorder': hasBorder
+    }, className])
+  }, children));
+};
+Tabs.propTypes = {
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  dense: PropTypes.bool,
+  hasBorder: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const Tab = ({
+  index,
+  label,
+  className
+}) => {
+  const {
+    activeIndex,
+    setActiveIndex
+  } = useContext(TabsContext);
+  const isSelected = activeIndex === index;
+  return /*#__PURE__*/React__default.createElement("button", {
+    className: classnames(['tab', {
+      'tab-active': isSelected
+    }, className]),
+    role: "tab",
+    "aria-selected": isSelected,
+    "aria-controls": `tabpanel-${index}`,
+    id: `tab-${index}`,
+    tabIndex: isSelected ? 0 : -1,
+    onClick: () => setActiveIndex(index)
+  }, label);
+};
+Tab.propTypes = {
+  label: PropTypes.string,
+  className: PropTypes.node.isRequired
+};
+
+const TableFooter = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames(['table_footer', className])
+  }, props), /*#__PURE__*/React__default.createElement(Select, {
+    dense: true,
+    id: "rows",
+    className: "table_rowSelect"
+  }, /*#__PURE__*/React__default.createElement("option", {
+    value: "1"
+  }, "10"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "25"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "50"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "100"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "All")), /*#__PURE__*/React__default.createElement(Buttons, {
+    className: "table_pagination"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretDoubleLeft, null)), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretLeft, null)), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    size: "sm"
+  }, "1"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "2"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "3"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "\u2026"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "8"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretRight, null)), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretDoubleRight, null))));
+};
+TableFooter.propTypes = {
+  className: PropTypes.node
+};
+
+const DenseContext = /*#__PURE__*/createContext(false);
+const Table = ({
+  striped,
+  hasHover,
+  dense,
+  border,
+  withFooter,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement(DenseContext.Provider, {
+    value: dense
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['table', {
+      'table-striped': striped,
+      'table-hasHover': hasHover,
+      'table-dense': dense,
+      'table-border': border
+    }, className])
+  }, /*#__PURE__*/React__default.createElement("table", _extends({
+    cellPadding: 0,
+    cellSpacing: 0,
+    className: classnames('table_content')
+  }, props), children), withFooter ? /*#__PURE__*/React__default.createElement(TableFooter, {
+    dense: dense ? dense : null
+  }) : null));
+};
+Table.propTypes = {
+  striped: PropTypes.bool,
+  hasHover: PropTypes.bool,
+  dense: PropTypes.bool,
+  border: PropTypes.bool,
+  withFooter: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TableBody = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement("tbody", _extends({
+    className: classnames(['table_body', className])
+  }, props), children);
+};
+TableBody.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TableCellComponentContext = /*#__PURE__*/createContext('td');
+const TableHead = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement(TableCellComponentContext.Provider, {
+    value: "th"
+  }, /*#__PURE__*/React__default.createElement("thead", _extends({
+    className: classnames(['table_head', className])
+  }, props), children));
+};
+TableHead.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TableCell = ({
+  kind = 'default',
+  className,
+  children,
+  ...props
+}) => {
+  const useTableCellComponent = () => useContext(TableCellComponentContext);
+  const Component = useTableCellComponent();
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
+    className: classnames(['table_cell', {
+      [`table_cell-${kind}`]: kind
+    }, className])
+  }, props), children);
+};
+TableCell.propTypes = {
+  kind: PropTypes.oneOf(['default', 'number', 'action']),
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TableRow = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement("tr", _extends({
+    className: classnames(['table_row', className])
+  }, props), children);
+};
+TableRow.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TabsControl = ({
+  className,
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement("div", {
+    role: "tablist",
+    className: classnames(['tabs_controls', className])
+  }, children);
+};
+TabsControl.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TabsPanel = ({
+  index,
+  className,
+  children
+}) => {
+  const {
+    activeIndex
+  } = useContext(TabsContext);
+  const isActive = activeIndex === index;
+  return isActive ? /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['tabs_panel', className]),
+    role: "tabpanel",
+    id: `tabpanel-${index}`,
+    "aria-labelledby": `tab-${index}`,
+    hidden: !isActive
+  }, children) : null;
+};
+TabsPanel.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
 const Tag = ({
   color = 'primary',
   dense,
@@ -3353,4 +3610,4 @@ Textarea.propTypes = {
   className: PropTypes.node
 };
 
-export { Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Color, Display, Divider, Grid, Input, InputLabel, Link$1 as Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Switch, Tag, Text, Textarea };
+export { Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Color, Display, Divider, Grid, Input, InputLabel, Link$1 as Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Tabs, TabsControl, TabsPanel, Tag, Text, Textarea };

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "pallote-react",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "",
   "main": "dist/index.js",
   "styles": "dist/index.css",
   "files": [
     "README.md",
     "index.js",
-    "package.json",
-    "pallote-react-0.6.0.tgz"
+    "package.json"
   ],
   "keywords": [],
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@babel/preset-react": "^7.26.3",