@ttoss/components 1.16.0 → 1.19.0

package/README.md

@@ -1,15 +1,15 @@
 # @ttoss/components
 
-## 📚 About
+## About
 
-<strong>@ttoss/components</strong> is a set of React components that you can use to build your apps.
+<strong>@ttoss/components</strong> is a set of React components that you can use to build your apps using ttoss technologies.
 
-## 🚀 Getting Started
+## Getting Started
 
 ### Install @ttoss/components
 
 ```shell
-$ yarn add @ttoss/components
+$ yarn add @ttoss/{components,ui}
 # or
-$ npm install @ttoss/components
+$ npm install @ttoss/{components,ui}
 ```

package/dist/esm/index.js

@@ -1,6 +1,56 @@
+"use strict";
+
 // tsup.inject.js
 import * as React from "react";
 
+// src/components/Accordion/Accordion.tsx
+import {
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Accordion as ReactAccessibleAccordion
+} from "react-accessible-accordion";
+import { Box } from "@ttoss/ui";
+var Accordion = ({
+  children,
+  allowMultipleExpanded,
+  allowZeroExpanded,
+  preExpanded,
+  onChange,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ React.createElement(Box, {
+    ...boxProps,
+    sx: {
+      ".accordion__item": {
+        marginBottom: 3
+      },
+      ".accordion__heading": {
+        padding: 2,
+        border: "1px solid",
+        borderColor: "black"
+      },
+      ".accordion__button": {},
+      ".accordion__panel": {
+        padding: 2
+      },
+      ...boxProps.sx
+    }
+  }, /* @__PURE__ */ React.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 React2 from "react";
 
@@ -58,6 +108,61 @@ var InstallPwa = () => {
     onInstall
   });
 };
+
+// src/components/Modal/Modal.tsx
+import { useResponsiveValue, useTheme } 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();
+  const padding = 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]
+  ]) || 0;
+  const style = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding,
+      ...(_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",
+      padding,
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      border: "1px solid #ccc",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      ...(_g = props.style) == null ? void 0 : _g.content
+    }
+  };
+  return /* @__PURE__ */ React.createElement(ReactModal, {
+    ...props,
+    style
+  });
+};
+Modal.setAppElement = ReactModal.setAppElement;
 export {
-  InstallPwa
+  Accordion,
+  InstallPwa,
+  Modal
 };

package/dist/index.d.ts

@@ -1,3 +1,295 @@
+import * as react from 'react';
+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 theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
+import { BoxProps } from '@ttoss/ui';
+import ReactModal from 'react-modal';
+
+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): theme_ui_jsx_runtime.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" | "inline" | "both" | 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" | "execute" | "move" | "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;
 
-export { InstallPwa };
+declare type ModalProps = ReactModal.Props;
+declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    setAppElement: typeof ReactModal.setAppElement;
+};
+
+export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps };

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,27 +23,71 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  InstallPwa: () => InstallPwa
+  Accordion: () => Accordion,
+  InstallPwa: () => InstallPwa,
+  Modal: () => Modal
 });
 module.exports = __toCommonJS(src_exports);
 
 // tsup.inject.js
 var React = __toESM(require("react"));
 
+// src/components/Accordion/Accordion.tsx
+var import_react_accessible_accordion = require("react-accessible-accordion");
+var import_ui = require("@ttoss/ui");
+var Accordion = ({
+  children,
+  allowMultipleExpanded,
+  allowZeroExpanded,
+  preExpanded,
+  onChange,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ React.createElement(import_ui.Box, {
+    ...boxProps,
+    sx: {
+      ".accordion__item": {
+        marginBottom: 3
+      },
+      ".accordion__heading": {
+        padding: 2,
+        border: "1px solid",
+        borderColor: "black"
+      },
+      ".accordion__button": {},
+      ".accordion__panel": {
+        padding: 2
+      },
+      ...boxProps.sx
+    }
+  }, /* @__PURE__ */ React.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 React2 = __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",
@@ -54,7 +99,7 @@ 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")));
 };
@@ -86,7 +131,62 @@ var InstallPwa = () => {
     onInstall
   });
 };
+
+// src/components/Modal/Modal.tsx
+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_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]
+  ]) || 0;
+  const style = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding,
+      ...(_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",
+      padding,
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      border: "1px solid #ccc",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      ...(_g = props.style) == null ? void 0 : _g.content
+    }
+  };
+  return /* @__PURE__ */ React.createElement(import_react_modal.default, {
+    ...props,
+    style
+  });
+};
+Modal.setAppElement = import_react_modal.default.setAppElement;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  InstallPwa
+  Accordion,
+  InstallPwa,
+  Modal
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.16.0",
+  "version": "1.19.0",
   "description": "React components.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -31,14 +31,20 @@
     "dev": "yarn workspace @docs/storybook run dev"
   },
   "dependencies": {
-    "@ttoss/ui": "^1.16.0"
+    "@types/react-modal": "^3.13.1",
+    "react-accessible-accordion": "^5.0.0",
+    "react-modal": "^3.15.1"
   },
   "peerDependencies": {
+    "@ttoss/ui": "^1.16.5",
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.16.0",
-    "@ttoss/test-utils": "^1.16.0"
+    "@ttoss/config": "^1.15.2",
+    "@ttoss/test-utils": "^1.15.2",
+    "@ttoss/ui": "^1.18.0",
+    "@types/jest": "^28.1.5",
+    "jest": "^28.1.3"
   },
-  "gitHead": "0412266ba0223a5b42904254a13d96473006e0a3"
+  "gitHead": "2727f2809df7ce542f0fd3b953163a300e60cb68"
 }

package/src/components/Accordion/Accordion.docs.md

@@ -0,0 +1,57 @@
+# Accordion
+
+This components uses [react-accessible-accordion package](https://react-accessible-accordion.springload.co.nz/) as a base and apply [@ttoss/ui](/docs/modules/packages/ui/) styles.
+
+## Storybook
+
+[Stories](https://storybook.ttoss.dev/?path=/story/components-accordion)
+
+## Example
+
+```jsx
+import { Accordion } from "@ttoss/components";
+import { Text } from "@ttoss/ui";
+
+const MyAccordion = () => {
+  return (
+    <Accordion>
+      <Accordion.Item>
+        <Accordion.ItemHeading>
+          <Accordion.ItemButton>
+            What harsh truths do you prefer to ignore?
+          </Accordion.ItemButton>
+        </Accordion.ItemHeading>
+        <Accordion.ItemPanel>
+          <Text>
+            Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
+            occaecat ut occaecat consequat est minim minim esse tempor laborum
+            consequat esse adipisicing eu reprehenderit enim.
+          </Text>
+        </Accordion.ItemPanel>
+      </Accordion.Item>
+      <Accordion.Item>
+        <Accordion.ItemHeading>
+          <Accordion.ItemButton>
+            Is free will real or just an illusion?
+          </Accordion.ItemButton>
+        </Accordion.ItemHeading>
+        <Accordion.ItemPanel>
+          <Text>
+            In ad velit in ex nostrud dolore cupidatat consectetur ea in ut
+            nostrud velit in irure cillum tempor laboris sed adipisicing eu esse
+            duis nulla non.
+          </Text>
+        </Accordion.ItemPanel>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+```
+
+## API
+
+TODO
+
+## Styles
+
+TODO

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,67 @@
+/** @jsxImportSource theme-ui */
+
+import {
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Accordion as ReactAccessibleAccordion,
+} from 'react-accessible-accordion';
+import { Box, BoxProps } from '@ttoss/ui';
+
+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) => {
+  return (
+    <Box
+      {...boxProps}
+      sx={{
+        '.accordion__item': {
+          marginBottom: 3,
+        },
+        '.accordion__heading': {
+          padding: 2,
+          border: '1px solid',
+          borderColor: 'black',
+        },
+        '.accordion__button': {},
+        '.accordion__panel': {
+          padding: 2,
+        },
+        ...boxProps.sx,
+      }}
+    >
+      <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.docs.md

@@ -0,0 +1,56 @@
+# 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
+
+[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).

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,62 @@
+import { useResponsiveValue, useTheme } from '@ttoss/ui';
+import ReactModal from 'react-modal';
+
+ReactModal.defaultStyles = {
+  overlay: {},
+  content: {},
+};
+
+export type ModalProps = ReactModal.Props;
+
+export const Modal = (props: ModalProps) => {
+  const { theme } = useTheme();
+
+  const padding =
+    useResponsiveValue([
+      theme.space?.[2],
+      theme.space?.[3],
+      theme.space?.[4],
+    ]) || 0;
+
+  const style: ReactModal.Styles = {
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding,
+      ...props.style?.overlay,
+    },
+    content: {
+      /**
+       * Theme
+       */
+      background: theme.rawColors?.background?.toString() || '#fff',
+      padding,
+      /**
+       * General
+       */
+      WebkitOverflowScrolling: 'touch',
+      overflow: 'auto',
+      position: 'relative',
+      top: '0px',
+      left: '0px',
+      right: '0px',
+      bottom: '0px',
+      border: '1px solid #ccc',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      ...props.style?.content,
+    },
+  };
+
+  return <ReactModal {...props} style={style} />;
+};
+
+Modal.setAppElement = ReactModal.setAppElement;

package/src/index.spec.tsx

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

package/src/index.ts

@@ -1 +1,3 @@
-export { InstallPwa } from './components/InstallPwa/InstallPwa';
+export * from './components/Accordion/Accordion';
+export * from './components/InstallPwa/InstallPwa';
+export * from './components/Modal/Modal';