@ttoss/components 2.0.8 → 2.0.10

package/dist/esm/Modal/index.js

@@ -0,0 +1,65 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-XEYGFSK5.js";
+
+// src/components/Modal/Modal.tsx
+import { css as transformStyleObject } from "@theme-ui/css";
+import { useResponsiveValue, useTheme } from "@ttoss/ui";
+import ReactModal from "react-modal";
+import { jsx } from "react/jsx-runtime";
+ReactModal.defaultStyles = {
+  overlay: {},
+  content: {}
+};
+var Modal = props => {
+  const {
+    theme
+  } = useTheme();
+  const space = theme.space;
+  const padding = useResponsiveValue([space?.["lg"], space?.["xl"], space?.["xl"]]) || 0;
+  const style = {
+    overlay: transformStyleObject({
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: "modal",
+      ...props.style?.overlay
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    })(theme),
+    content: transformStyleObject({
+      /**
+       * Theme
+       */
+      backgroundColor: "surface",
+      padding,
+      border: "default",
+      borderColor: "surface",
+      borderRadius: "default",
+      /**
+       * General
+       */
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      maxHeight: "90%",
+      maxWidth: "90%",
+      ...props.style?.content
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    })(theme)
+  };
+  return /* @__PURE__ */jsx(ReactModal, {
+    ...props,
+    style
+  });
+};
+Modal.setAppElement = ReactModal.setAppElement;
+export { Modal };

package/dist/esm/Search/index.js

@@ -0,0 +1,30 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-XEYGFSK5.js";
+
+// src/components/Search/Search.tsx
+import * as React from "react";
+import { Input } from "@ttoss/ui";
+import { useDebounce } from "@ttoss/react-hooks";
+import { jsx } from "react/jsx-runtime";
+var Search = ({
+  value,
+  defaultValue,
+  loading,
+  onChange,
+  ...props
+}) => {
+  const [text, setText] = React.useState(value ?? defaultValue);
+  const debouncedValue = useDebounce(text, 500);
+  React.useEffect(() => {
+    onChange(debouncedValue);
+  }, [debouncedValue, onChange]);
+  return /* @__PURE__ */jsx(Input, {
+    leadingIcon: loading ? "loading" : "search",
+    defaultValue: text,
+    onChange: e => {
+      return setText(e.target.value);
+    },
+    ...props
+  });
+};
+export { Search };

package/dist/esm/Table/index.js

@@ -0,0 +1,84 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __export, __reExport } from "../chunk-XEYGFSK5.js";
+
+// src/components/Table/index.ts
+var Table_exports2 = {};
+__export(Table_exports2, {
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow
+});
+
+// src/components/Table/Table.tsx
+var Table_exports = {};
+__export(Table_exports, {
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow
+});
+__reExport(Table_exports, react_table_star);
+import { Box } from "@ttoss/ui";
+import * as react_table_star from "@tanstack/react-table";
+import { jsx } from "react/jsx-runtime";
+var Table = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "table",
+    ...props
+  });
+};
+var TableHead = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "thead",
+    ...props
+  });
+};
+var TableBody = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tbody",
+    ...props
+  });
+};
+var TableRow = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tr",
+    ...props
+  });
+};
+var TableCell = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "td",
+    ...props
+  });
+};
+var TableHeader = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "th",
+    ...props
+  });
+};
+var TableCaption = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "caption",
+    ...props
+  });
+};
+var TableFooter = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tfoot",
+    ...props
+  });
+};
+
+// src/components/Table/index.ts
+__reExport(Table_exports2, Table_exports);
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/esm/Toast/index.js

@@ -0,0 +1,35 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-XEYGFSK5.js";
+
+// src/components/Toast/Toast.tsx
+import * as React from "react";
+import { Box } from "@ttoss/ui";
+import { ToastContainer as ReactToastifyToastContainer, toast } from "react-toastify";
+import { injectStyle } from "react-toastify/dist/inject-style";
+import { jsx } from "react/jsx-runtime";
+var ToastContainer = props => {
+  React.useEffect(() => {
+    injectStyle();
+  }, []);
+  return /* @__PURE__ */jsx(Box, {
+    sx: ({
+      colors,
+      fonts
+    }) => {
+      return {
+        "--toastify-color-light": "#fff",
+        "--toastify-color-dark": "#121212",
+        "--toastify-color-info": colors?.info || "#3498db",
+        "--toastify-color-success": colors?.success || "#07bc0c",
+        "--toastify-color-warning": "#f1c40f",
+        "--toastify-color-error": "#e74c3c",
+        "--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
+        "--toastify-font-family": fonts.body
+      };
+    },
+    children: /* @__PURE__ */jsx(ReactToastifyToastContainer, {
+      ...props
+    })
+  });
+};
+export { ToastContainer, toast };

package/dist/esm/chunk-XEYGFSK5.js

@@ -0,0 +1,29 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+export { __export, __reExport, __publicField };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ttoss/components",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "React components for ttoss ecosystem.",
+  "license": "MIT",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -55,8 +56,7 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": false,
   "dependencies": {
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-hooks": "^2.0.2",
-    "@ttoss/ui": "^5.0.6"
+    "@ttoss/react-hooks": "^2.0.4",
+    "@ttoss/ui": "^5.0.8"
   },
   "devDependencies": {
     "@types/jest": "^29.5.13",
@@ -84,11 +84,11 @@
     "react": "^18.3.1",
     "tsup": "^8.3.0",
     "tsx": "^4.6.2",
-    "@ttoss/config": "^1.33.0",
-    "@ttoss/react-icons": "^0.4.2",
-    "@ttoss/react-hooks": "^2.0.2",
-    "@ttoss/test-utils": "^2.1.15",
-    "@ttoss/ui": "^5.0.6"
+    "@ttoss/config": "^1.34.1",
+    "@ttoss/react-icons": "^0.4.4",
+    "@ttoss/react-hooks": "^2.0.4",
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/ui": "^5.0.8"
   },
   "keywords": [
     "React",

package/src/components/Accordion/Accordion.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import {
-  AccordionItem,
-  AccordionItemButton,
-  AccordionItemHeading,
-  AccordionItemPanel,
-  Accordion as ReactAccessibleAccordion,
-} from 'react-accessible-accordion';
-import { Box, BoxProps, useTheme } from '@ttoss/ui';
-import { css as createClassName } from '@emotion/css';
-import { css as transformStyleObject } from '@theme-ui/css';
-
-export type AccordionProps = BoxProps & {
-  // https://github.com/springload/react-accessible-accordion#accordion
-  allowMultipleExpanded?: boolean;
-  allowZeroExpanded?: boolean;
-  preExpanded?: string[];
-  /**
-   * Callback which is invoked when items are expanded or collapsed. Gets passed uuids of the currently expanded AccordionItems.
-   */
-  onChange?: (args: string[]) => void;
-};
-
-export const Accordion = ({
-  children,
-  allowMultipleExpanded,
-  allowZeroExpanded,
-  preExpanded,
-  onChange,
-  ...boxProps
-}: AccordionProps) => {
-  const { theme } = useTheme();
-
-  const className = React.useMemo(() => {
-    const styles = transformStyleObject({
-      '.accordion__item': {
-        marginBottom: 3,
-      },
-      '.accordion__heading': {
-        padding: 'md',
-        border: '1px solid',
-        borderColor: 'black',
-      },
-      '.accordion__button': {},
-      '.accordion__panel': {
-        padding: 2,
-      },
-    })(theme);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return createClassName(styles as any);
-  }, [theme]);
-
-  return (
-    <Box variant="accordion" className={className} {...boxProps}>
-      <ReactAccessibleAccordion
-        {...{
-          allowMultipleExpanded,
-          allowZeroExpanded,
-          preExpanded,
-          onChange,
-        }}
-      >
-        {children}
-      </ReactAccessibleAccordion>
-    </Box>
-  );
-};
-
-export {
-  AccordionItem,
-  AccordionItemButton,
-  AccordionItemHeading,
-  AccordionItemPanel,
-};

package/src/components/Accordion/index.ts

@@ -1 +0,0 @@
-export * from './Accordion';

package/src/components/Drawer/Drawer.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Box, type BoxProps } from '@ttoss/ui';
-import { css as createClassName } from '@emotion/css';
-import DrawerUi from 'react-modern-drawer';
-
-type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
-
-export type DrawerProps = DrawerUiProps & {
-  sx?: BoxProps['sx'];
-};
-
-/**
- * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
- */
-const reactModernDrawerClassName = createClassName(`
-.EZDrawer .EZDrawer__checkbox {
-    display: none;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
-    display: block;
-    opacity: 1;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
-    visibility: visible;
-    transform: translate3d(0, 0, 0) !important;
-}
-.EZDrawer .EZDrawer__overlay {
-    display: none;
-    height: 100vh;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-}
-.EZDrawer .EZDrawer__container {
-    position: fixed;
-    visibility: hidden;
-    background: white;
-    transition: all;
-    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
-}`);
-
-export const Drawer = ({ children, sx, ...props }: DrawerProps) => {
-  return (
-    <DrawerUi {...props} className={reactModernDrawerClassName}>
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          ...sx,
-        }}
-      >
-        {children}
-      </Box>
-    </DrawerUi>
-  );
-};

package/src/components/Drawer/index.ts

@@ -1 +0,0 @@
-export * from './Drawer';

package/src/components/InstallPwa/InstallPwa.tsx

@@ -1,70 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react';
-import { Button, Flex, Text } from '@ttoss/ui';
-
-export type InstallPwaUiProps = {
-  onInstall: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-export const InstallPwaUi = ({ onInstall }: InstallPwaUiProps) => {
-  return (
-    <Flex
-      sx={{
-        position: 'absolute',
-        bottom: 4,
-        width: '100%',
-        justifyContent: 'center',
-      }}
-    >
-      <Flex
-        sx={{
-          backgroundColor: 'background',
-          justifyContent: 'center',
-          alignItems: 'center',
-          gap: 3,
-          width: 'auto',
-          border: '1px solid',
-          borderColor: 'muted',
-          borderRadius: 1,
-          padding: 4,
-        }}
-      >
-        <Text>Deseja instalar o nosso aplicativo?</Text>
-        <Button onClick={onInstall}>Instalar</Button>
-      </Flex>
-    </Flex>
-  );
-};
-
-export const InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React.useState(false);
-  const [promptInstall, setPromptInstall] = React.useState<any>(null);
-
-  React.useEffect(() => {
-    const handler = (e: any) => {
-      e.preventDefault();
-      setSupportsPwa(true);
-      setPromptInstall(e);
-    };
-
-    window.addEventListener('beforeinstallprompt', handler);
-
-    return () => {
-      return window.removeEventListener('transitionend', handler);
-    };
-  }, []);
-
-  const onInstall = (e: any) => {
-    e.preventDefault();
-    if (!promptInstall) {
-      return;
-    }
-    promptInstall.prompt();
-  };
-
-  if (!supportsPwa) {
-    return null;
-  }
-
-  return <InstallPwaUi onInstall={onInstall} />;
-};

package/src/components/InstallPwa/index.ts

@@ -1 +0,0 @@
-export * from './InstallPwa';

package/src/components/List/List.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export interface ListProps extends React.HTMLProps<HTMLUListElement> {
-  children: React.ReactNode;
-}
-
-export const List = React.forwardRef<HTMLUListElement, ListProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <ul {...props} ref={ref}>
-        {children}
-      </ul>
-    );
-  }
-);
-
-List.displayName = 'List';

package/src/components/List/ListItem.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-  children: React.ReactNode;
-}
-
-export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  (props, ref) => {
-    const { children, ...rest } = props;
-    return (
-      <li {...rest} ref={ref}>
-        {children}
-      </li>
-    );
-  }
-);
-
-ListItem.displayName = 'ListItem';

package/src/components/List/index.ts

@@ -1,2 +0,0 @@
-export * from './List';
-export * from './ListItem';

package/src/components/Markdown/Markdown.tsx

@@ -1,23 +0,0 @@
-import { BaseStyles, FlexProps } from '@ttoss/ui';
-import ReactMarkdown, { Options } from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-
-export type MarkdownProps = Options & {
-  children: string;
-  sx?: FlexProps['sx'];
-};
-
-export const Markdown = ({ children, sx, ...props }: MarkdownProps) => {
-  return (
-    <BaseStyles sx={sx}>
-      <ReactMarkdown
-        rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[remarkGfm]}
-        {...props}
-      >
-        {children}
-      </ReactMarkdown>
-    </BaseStyles>
-  );
-};

package/src/components/Markdown/index.ts

@@ -1 +0,0 @@
-export * from './Markdown';

package/src/components/Menu/Menu.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import {
-  Box,
-  BoxProps,
-  Flex,
-  Image,
-  Text,
-  useResponsiveValue,
-} from '@ttoss/ui';
-import { Drawer } from '../Drawer';
-import { Icon, IconifyIcon } from '@ttoss/react-icons';
-
-export type MenuProps = {
-  onClose: () => void;
-  onOpen: () => void;
-  isOpen: boolean;
-  children: React.ReactNode;
-  srcLogo?: string;
-  sx?: BoxProps['sx'];
-  /**
-   * Default direction: `left`
-   */
-  direction?: 'left' | 'right';
-  /**
-   * Default size: `100%`
-   */
-  sizeOnMobile?: string | number;
-  /**
-   * Default size: `300px`
-   */
-  sizeOnDesktop?: string | number;
-  /**
-   * Default icon: `menu-open`
-   */
-  menuIcon?: IconifyIcon | string;
-};
-
-export const Menu = ({
-  children,
-  srcLogo,
-  onClose,
-  onOpen,
-  isOpen,
-  sx,
-  direction = 'left',
-  sizeOnDesktop = '300px',
-  sizeOnMobile = '100%',
-  menuIcon = 'menu-open',
-}: MenuProps) => {
-  const responsiveSize = useResponsiveValue([sizeOnMobile, sizeOnDesktop]);
-
-  return (
-    <>
-      <Text sx={{ cursor: 'pointer' }} onClick={onOpen}>
-        <Icon icon={menuIcon} />
-      </Text>
-
-      <Drawer size={responsiveSize} direction={direction} open={isOpen}>
-        <Box
-          sx={{
-            position: 'fixed',
-            height: '100%',
-            backgroundColor: 'background',
-            width: '100%',
-            maxWidth: 'md',
-            right: 0,
-            boxShadow: 'lg',
-            paddingX: 'xl',
-            paddingTop: 'lg',
-            paddingBottom: '2xl',
-            ...sx,
-          }}
-        >
-          <Flex sx={{ justifyContent: 'space-between' }}>
-            <Image
-              src={srcLogo}
-              sx={{
-                maxWidth: '200px',
-                height: '44px',
-                objectFit: 'cover',
-              }}
-            />
-
-            <Text
-              sx={{
-                marginLeft: 'auto',
-                fontSize: '2xl',
-                alignSelf: 'center',
-                flexShrink: 0,
-                cursor: 'pointer',
-                lineHeight: 0,
-              }}
-              role="button"
-              onClick={onClose}
-            >
-              <Icon icon="close" />
-            </Text>
-          </Flex>
-
-          <Box sx={{ paddingTop: '3xl' }} as="nav">
-            {children}
-          </Box>
-        </Box>
-      </Drawer>
-    </>
-  );
-};

package/src/components/Menu/index.ts

@@ -1 +0,0 @@
-export * from './Menu';