@ttoss/components 1.18.0 → 1.21.0

package/dist/esm/index.js

@@ -3,8 +3,64 @@
 // tsup.inject.js
 import * as React from "react";
 
-// src/components/InstallPwa/InstallPwa.tsx
+// src/components/Accordion/Accordion.tsx
 import * as React2 from "react";
+import {
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Accordion as ReactAccessibleAccordion
+} from "react-accessible-accordion";
+import { Box, useTheme } from "@ttoss/ui";
+import { css as createClassName } from "@emotion/css";
+import { css as transformStyleObject } from "@theme-ui/css";
+var Accordion = ({
+  children,
+  allowMultipleExpanded,
+  allowZeroExpanded,
+  preExpanded,
+  onChange,
+  ...boxProps
+}) => {
+  const { theme } = useTheme();
+  const className = React2.useMemo(() => {
+    const styles = transformStyleObject({
+      ".accordion__item": {
+        marginBottom: 3
+      },
+      ".accordion__heading": {
+        padding: 2,
+        border: "1px solid",
+        borderColor: "black"
+      },
+      ".accordion__button": {},
+      ".accordion__panel": {
+        padding: 2
+      }
+    })(theme);
+    return createClassName(styles);
+  }, [theme]);
+  return /* @__PURE__ */ React2.createElement(Box, {
+    variant: "accordion",
+    className,
+    ...boxProps
+  }, /* @__PURE__ */ React2.createElement(ReactAccessibleAccordion, {
+    ...{
+      allowMultipleExpanded,
+      allowZeroExpanded,
+      preExpanded,
+      onChange
+    }
+  }, children));
+};
+Accordion.Item = AccordionItem;
+Accordion.ItemButton = AccordionItemButton;
+Accordion.ItemHeading = AccordionItemHeading;
+Accordion.ItemPanel = AccordionItemPanel;
+
+// src/components/InstallPwa/InstallPwa.tsx
+import * as React3 from "react";
 
 // src/components/InstallPwa/InstallPwaUi.tsx
 import { Button, Flex, Text } from "@ttoss/ui";
@@ -35,9 +91,9 @@ var InstallPwaUi = ({ onInstall }) => {
 
 // src/components/InstallPwa/InstallPwa.tsx
 var InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React2.useState(false);
-  const [promptInstall, setPromptInstall] = React2.useState(null);
-  React2.useEffect(() => {
+  const [supportsPwa, setSupportsPwa] = React3.useState(false);
+  const [promptInstall, setPromptInstall] = React3.useState(null);
+  React3.useEffect(() => {
     const handler = (e) => {
       e.preventDefault();
       setSupportsPwa(true);
@@ -56,21 +112,21 @@ var InstallPwa = () => {
   if (!supportsPwa) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
+  return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
     onInstall
   });
 };
 
 // src/components/Modal/Modal.tsx
-import { useResponsiveValue, useTheme } from "@ttoss/ui";
+import { useResponsiveValue, useTheme as useTheme2 } from "@ttoss/ui";
 import ReactModal from "react-modal";
 ReactModal.defaultStyles = {
   overlay: {},
   content: {}
 };
 var Modal = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { theme } = useTheme();
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { theme } = useTheme2();
   const padding = useResponsiveValue([
     (_a = theme.space) == null ? void 0 : _a[2],
     (_b = theme.space) == null ? void 0 : _b[3],
@@ -91,7 +147,7 @@ var Modal = (props) => {
       ...(_d = props.style) == null ? void 0 : _d.overlay
     },
     content: {
-      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      backgroundColor: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
       padding,
       WebkitOverflowScrolling: "touch",
       overflow: "auto",
@@ -100,11 +156,12 @@ var Modal = (props) => {
       left: "0px",
       right: "0px",
       bottom: "0px",
-      border: "1px solid #ccc",
+      border: "2px solid",
+      borderColor: ((_h = (_g = theme.rawColors) == null ? void 0 : _g.muted) == null ? void 0 : _h.toString()) || "#fff",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      ...(_g = props.style) == null ? void 0 : _g.content
+      ...(_i = props.style) == null ? void 0 : _i.content
     }
   };
   return /* @__PURE__ */ React.createElement(ReactModal, {
@@ -113,7 +170,36 @@ var Modal = (props) => {
   });
 };
 Modal.setAppElement = ReactModal.setAppElement;
+
+// src/components/Toast/Toast.tsx
+import { Box as Box2 } from "@ttoss/ui";
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  ToastContainerProps,
+  toast
+} from "react-toastify";
+import "react-toastify/dist/ReactToastify.min.css";
+var ToastContainer = (props) => {
+  return /* @__PURE__ */ React.createElement(Box2, {
+    sx: ({ colors, fonts }) => ({
+      "--toastify-color-light": "#fff",
+      "--toastify-color-dark": "#121212",
+      "--toastify-color-info": (colors == null ? void 0 : colors.info) || "#3498db",
+      "--toastify-color-success": (colors == null ? void 0 : colors.success) || "#07bc0c",
+      "--toastify-color-warning": "#f1c40f",
+      "--toastify-color-error": "#e74c3c",
+      "--toastify-color-progress-light": `linear-gradient(to right, ${colors == null ? void 0 : colors.primary}, ${colors == null ? void 0 : colors.secondary})`,
+      "--toastify-font-family": fonts.body
+    })
+  }, /* @__PURE__ */ React.createElement(ReactToastifyToastContainer, {
+    ...props
+  }));
+};
 export {
+  Accordion,
   InstallPwa,
-  Modal
+  Modal,
+  ToastContainer,
+  ToastContainerProps,
+  toast
 };

package/dist/index.d.ts

@@ -1,4 +1,289 @@
+import * as react_accessible_accordion_dist_types_helpers_DisplayName from 'react-accessible-accordion/dist/types/helpers/DisplayName';
+import * as react_accessible_accordion_dist_types_components_ItemContext from 'react-accessible-accordion/dist/types/components/ItemContext';
+import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
+import * as React from 'react';
+import { BoxProps } from '@ttoss/ui';
 import ReactModal from 'react-modal';
+import { ToastContainerProps } from 'react-toastify';
+export { ToastContainerProps, toast } from 'react-toastify';
+
+declare type AccordionProps = BoxProps & {
+    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;
+};
+declare const Accordion: {
+    ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps): JSX.Element;
+    Item: {
+        ({ uuid: customUuid, dangerouslySetExpanded, className, activeClassName, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
+            uuid?: react_accessible_accordion_dist_types_components_ItemContext.ID | undefined;
+            activeClassName?: string | undefined;
+            dangerouslySetExpanded?: boolean | undefined;
+        }): JSX.Element;
+        displayName: react_accessible_accordion_dist_types_helpers_DisplayName.default;
+    };
+    ItemButton: React.FC<{
+        children?: React.ReactNode;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    }>;
+    ItemHeading: React.FC<react_accessible_accordion_dist_types_helpers_types.DivAttributes>;
+    ItemPanel: ({ className, region, id, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
+        region?: boolean | undefined;
+        className?: string | undefined;
+    }) => JSX.Element;
+};
 
 declare const InstallPwa: () => JSX.Element | null;
 
@@ -8,4 +293,6 @@ declare const Modal: {
     setAppElement: typeof ReactModal.setAppElement;
 };
 
-export { InstallPwa, Modal, ModalProps };
+declare const ToastContainer: (props: ToastContainerProps) => JSX.Element;
+
+export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps, ToastContainer };

package/dist/index.js

@@ -23,28 +23,82 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Accordion: () => Accordion,
   InstallPwa: () => InstallPwa,
-  Modal: () => Modal
+  Modal: () => Modal,
+  ToastContainer: () => ToastContainer,
+  ToastContainerProps: () => import_react_toastify.ToastContainerProps,
+  toast: () => import_react_toastify.toast
 });
 module.exports = __toCommonJS(src_exports);
 
 // tsup.inject.js
 var React = __toESM(require("react"));
 
-// src/components/InstallPwa/InstallPwa.tsx
+// src/components/Accordion/Accordion.tsx
 var React2 = __toESM(require("react"));
+var import_react_accessible_accordion = require("react-accessible-accordion");
+var import_ui = require("@ttoss/ui");
+var import_css = require("@emotion/css");
+var import_css2 = require("@theme-ui/css");
+var Accordion = ({
+  children,
+  allowMultipleExpanded,
+  allowZeroExpanded,
+  preExpanded,
+  onChange,
+  ...boxProps
+}) => {
+  const { theme } = (0, import_ui.useTheme)();
+  const className = React2.useMemo(() => {
+    const styles = (0, import_css2.css)({
+      ".accordion__item": {
+        marginBottom: 3
+      },
+      ".accordion__heading": {
+        padding: 2,
+        border: "1px solid",
+        borderColor: "black"
+      },
+      ".accordion__button": {},
+      ".accordion__panel": {
+        padding: 2
+      }
+    })(theme);
+    return (0, import_css.css)(styles);
+  }, [theme]);
+  return /* @__PURE__ */ React2.createElement(import_ui.Box, {
+    variant: "accordion",
+    className,
+    ...boxProps
+  }, /* @__PURE__ */ React2.createElement(import_react_accessible_accordion.Accordion, {
+    ...{
+      allowMultipleExpanded,
+      allowZeroExpanded,
+      preExpanded,
+      onChange
+    }
+  }, children));
+};
+Accordion.Item = import_react_accessible_accordion.AccordionItem;
+Accordion.ItemButton = import_react_accessible_accordion.AccordionItemButton;
+Accordion.ItemHeading = import_react_accessible_accordion.AccordionItemHeading;
+Accordion.ItemPanel = import_react_accessible_accordion.AccordionItemPanel;
+
+// src/components/InstallPwa/InstallPwa.tsx
+var React3 = __toESM(require("react"));
 
 // src/components/InstallPwa/InstallPwaUi.tsx
-var import_ui = require("@ttoss/ui");
+var import_ui2 = require("@ttoss/ui");
 var InstallPwaUi = ({ onInstall }) => {
-  return /* @__PURE__ */ React.createElement(import_ui.Flex, {
+  return /* @__PURE__ */ React.createElement(import_ui2.Flex, {
     sx: {
       position: "absolute",
       bottom: 4,
       width: "100%",
       justifyContent: "center"
     }
-  }, /* @__PURE__ */ React.createElement(import_ui.Flex, {
+  }, /* @__PURE__ */ React.createElement(import_ui2.Flex, {
     sx: {
       backgroundColor: "background",
       justifyContent: "center",
@@ -56,16 +110,16 @@ var InstallPwaUi = ({ onInstall }) => {
       borderRadius: 1,
       padding: 4
     }
-  }, /* @__PURE__ */ React.createElement(import_ui.Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */ React.createElement(import_ui.Button, {
+  }, /* @__PURE__ */ React.createElement(import_ui2.Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */ React.createElement(import_ui2.Button, {
     onClick: onInstall
   }, "Instalar")));
 };
 
 // src/components/InstallPwa/InstallPwa.tsx
 var InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React2.useState(false);
-  const [promptInstall, setPromptInstall] = React2.useState(null);
-  React2.useEffect(() => {
+  const [supportsPwa, setSupportsPwa] = React3.useState(false);
+  const [promptInstall, setPromptInstall] = React3.useState(null);
+  React3.useEffect(() => {
     const handler = (e) => {
       e.preventDefault();
       setSupportsPwa(true);
@@ -84,22 +138,22 @@ var InstallPwa = () => {
   if (!supportsPwa) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
+  return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
     onInstall
   });
 };
 
 // src/components/Modal/Modal.tsx
-var import_ui2 = require("@ttoss/ui");
+var import_ui3 = require("@ttoss/ui");
 var import_react_modal = __toESM(require("react-modal"));
 import_react_modal.default.defaultStyles = {
   overlay: {},
   content: {}
 };
 var Modal = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { theme } = (0, import_ui2.useTheme)();
-  const padding = (0, import_ui2.useResponsiveValue)([
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { theme } = (0, import_ui3.useTheme)();
+  const padding = (0, import_ui3.useResponsiveValue)([
     (_a = theme.space) == null ? void 0 : _a[2],
     (_b = theme.space) == null ? void 0 : _b[3],
     (_c = theme.space) == null ? void 0 : _c[4]
@@ -119,7 +173,7 @@ var Modal = (props) => {
       ...(_d = props.style) == null ? void 0 : _d.overlay
     },
     content: {
-      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      backgroundColor: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
       padding,
       WebkitOverflowScrolling: "touch",
       overflow: "auto",
@@ -128,11 +182,12 @@ var Modal = (props) => {
       left: "0px",
       right: "0px",
       bottom: "0px",
-      border: "1px solid #ccc",
+      border: "2px solid",
+      borderColor: ((_h = (_g = theme.rawColors) == null ? void 0 : _g.muted) == null ? void 0 : _h.toString()) || "#fff",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      ...(_g = props.style) == null ? void 0 : _g.content
+      ...(_i = props.style) == null ? void 0 : _i.content
     }
   };
   return /* @__PURE__ */ React.createElement(import_react_modal.default, {
@@ -141,8 +196,33 @@ var Modal = (props) => {
   });
 };
 Modal.setAppElement = import_react_modal.default.setAppElement;
+
+// src/components/Toast/Toast.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_toastify = require("react-toastify");
+var import_ReactToastify_min = require("react-toastify/dist/ReactToastify.min.css");
+var ToastContainer = (props) => {
+  return /* @__PURE__ */ React.createElement(import_ui4.Box, {
+    sx: ({ colors, fonts }) => ({
+      "--toastify-color-light": "#fff",
+      "--toastify-color-dark": "#121212",
+      "--toastify-color-info": (colors == null ? void 0 : colors.info) || "#3498db",
+      "--toastify-color-success": (colors == null ? void 0 : colors.success) || "#07bc0c",
+      "--toastify-color-warning": "#f1c40f",
+      "--toastify-color-error": "#e74c3c",
+      "--toastify-color-progress-light": `linear-gradient(to right, ${colors == null ? void 0 : colors.primary}, ${colors == null ? void 0 : colors.secondary})`,
+      "--toastify-font-family": fonts.body
+    })
+  }, /* @__PURE__ */ React.createElement(import_react_toastify.ToastContainer, {
+    ...props
+  }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   InstallPwa,
-  Modal
+  Modal,
+  ToastContainer,
+  ToastContainerProps,
+  toast
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.18.0",
+  "version": "1.21.0",
   "description": "React components.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -31,19 +31,23 @@
     "dev": "yarn workspace @docs/storybook run dev"
   },
   "dependencies": {
+    "@emotion/css": "^11.10.0",
+    "@theme-ui/css": "^0.14.7",
     "@types/react-modal": "^3.13.1",
-    "react-modal": "^3.15.1"
+    "react-accessible-accordion": "^5.0.0",
+    "react-modal": "^3.15.1",
+    "react-toastify": "^9.0.8"
   },
   "peerDependencies": {
     "@ttoss/ui": "^1.16.5",
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.15.2",
-    "@ttoss/test-utils": "^1.15.2",
-    "@ttoss/ui": "^1.18.0",
+    "@ttoss/config": "^1.17.0",
+    "@ttoss/test-utils": "^1.16.6",
+    "@ttoss/ui": "^1.19.0",
     "@types/jest": "^28.1.5",
     "jest": "^28.1.3"
   },
-  "gitHead": "38d76661c6302b6447804375cd0193be9056b446"
+  "gitHead": "bea31ace95128d57607156807e402a793b0c46e4"
 }

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,72 @@
+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: 2,
+        border: '1px solid',
+        borderColor: 'black',
+      },
+      '.accordion__button': {},
+      '.accordion__panel': {
+        padding: 2,
+      },
+    })(theme);
+
+    return createClassName(styles);
+  }, [theme]);
+
+  return (
+    <Box variant="accordion" className={className} {...boxProps}>
+      <ReactAccessibleAccordion
+        {...{
+          allowMultipleExpanded,
+          allowZeroExpanded,
+          preExpanded,
+          onChange,
+        }}
+      >
+        {children}
+      </ReactAccessibleAccordion>
+    </Box>
+  );
+};
+
+Accordion.Item = AccordionItem;
+Accordion.ItemButton = AccordionItemButton;
+Accordion.ItemHeading = AccordionItemHeading;
+Accordion.ItemPanel = AccordionItemPanel;

package/src/components/Modal/Modal.tsx

@@ -36,7 +36,7 @@ export const Modal = (props: ModalProps) => {
       /**
        * Theme
        */
-      background: theme.rawColors?.background?.toString() || '#fff',
+      backgroundColor: theme.rawColors?.background?.toString() || '#fff',
       padding,
       /**
        * General
@@ -48,7 +48,8 @@ export const Modal = (props: ModalProps) => {
       left: '0px',
       right: '0px',
       bottom: '0px',
-      border: '1px solid #ccc',
+      border: '2px solid',
+      borderColor: theme.rawColors?.muted?.toString() || '#fff',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@ttoss/ui';
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  ToastContainerProps,
+  toast,
+} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
+
+export { toast, ToastContainerProps };
+
+export const ToastContainer = (props: ToastContainerProps) => {
+  return (
+    <Box
+      sx={({ colors, fonts }) => ({
+        '--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 as { body: string }).body,
+      })}
+    >
+      <ReactToastifyToastContainer {...props} />
+    </Box>
+  );
+};

package/src/index.spec.tsx

@@ -1,8 +1,11 @@
 import * as componentsModule from './index';
 
-test.each([componentsModule.InstallPwa, componentsModule.Modal])(
-  'should export components %#',
-  (Component) => {
-    expect(Component).toBeDefined();
-  }
-);
+test.each([
+  componentsModule.Accordion,
+  componentsModule.InstallPwa,
+  componentsModule.Modal,
+  componentsModule.ToastContainer,
+  componentsModule.toast,
+])('should export components %#', (Component) => {
+  expect(Component).toBeDefined();
+});

package/src/index.ts

@@ -1,2 +1,4 @@
-export { InstallPwa } from './components/InstallPwa/InstallPwa';
-export { Modal, ModalProps } from './components/Modal/Modal';
+export * from './components/Accordion/Accordion';
+export * from './components/InstallPwa/InstallPwa';
+export * from './components/Modal/Modal';
+export * from './components/Toast/Toast';

package/src/components/Modal/Modal.docs.md

@@ -1,56 +0,0 @@
-# Modal
-
-This components uses [react-modal package](http://reactcommunity.org/react-modal) as a base and apply [@ttoss/ui](/docs/modules/packages/ui/) styles.
-
-## Storybook
-
-[Modal Stories](https://storybook.ttoss.dev/?path=/story/components-modal)
-
-## Example
-
-```jsx
-import { Modal } from "@ttoss/components";
-import { Box, Flex, Text } from "@ttoss/ui";
-
-const Component = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <Box>
-      <Modal
-        isOpen={isOpen}
-        onRequestClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <Flex
-          sx={{
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <Text>This is a modal.</Text>
-          <Button
-            onClick={() => {
-              setIsOpen(false);
-            }}
-          >
-            Close Modal
-          </Button>
-        </Flex>
-      </Modal>
-      <Button
-        onClick={() => {
-          setIsOpen(true);
-        }}
-      >
-        Open Modal
-      </Button>
-    </Box>
-  );
-};
-```
-
-## API
-
-This components extends the API of [react-modal package](http://reactcommunity.org/react-modal/#usage).