@ttoss/components 1.18.0 → 1.19.0

package/dist/esm/index.js

@@ -3,6 +3,54 @@
 // 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";
 
@@ -114,6 +162,7 @@ var Modal = (props) => {
 };
 Modal.setAppElement = ReactModal.setAppElement;
 export {
+  Accordion,
   InstallPwa,
   Modal
 };

package/dist/index.d.ts

@@ -1,5 +1,289 @@
+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;
 
 declare type ModalProps = ReactModal.Props;
@@ -8,4 +292,4 @@ declare const Modal: {
     setAppElement: typeof ReactModal.setAppElement;
 };
 
-export { InstallPwa, Modal, ModalProps };
+export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps };

package/dist/index.js

@@ -23,6 +23,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Accordion: () => Accordion,
   InstallPwa: () => InstallPwa,
   Modal: () => Modal
 });
@@ -31,20 +32,62 @@ 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",
@@ -56,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")));
 };
@@ -90,7 +133,7 @@ var InstallPwa = () => {
 };
 
 // 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: {},
@@ -98,8 +141,8 @@ import_react_modal.default.defaultStyles = {
 };
 var Modal = (props) => {
   var _a, _b, _c, _d, _e, _f, _g;
-  const { theme } = (0, import_ui2.useTheme)();
-  const padding = (0, import_ui2.useResponsiveValue)([
+  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]
@@ -143,6 +186,7 @@ var Modal = (props) => {
 Modal.setAppElement = import_react_modal.default.setAppElement;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   InstallPwa,
   Modal
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "React components.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@types/react-modal": "^3.13.1",
+    "react-accessible-accordion": "^5.0.0",
     "react-modal": "^3.15.1"
   },
   "peerDependencies": {
@@ -45,5 +46,5 @@
     "@types/jest": "^28.1.5",
     "jest": "^28.1.3"
   },
-  "gitHead": "38d76661c6302b6447804375cd0193be9056b446"
+  "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

@@ -4,7 +4,7 @@ This components uses [react-modal package](http://reactcommunity.org/react-modal
 
 ## Storybook
 
-[Modal Stories](https://storybook.ttoss.dev/?path=/story/components-modal)
+[Stories](https://storybook.ttoss.dev/?path=/story/components-modal)
 
 ## Example
 

package/src/index.spec.tsx

@@ -1,8 +1,9 @@
 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,
+])('should export components %#', (Component) => {
+  expect(Component).toBeDefined();
+});

package/src/index.ts

@@ -1,2 +1,3 @@
-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';