@tecsinapse/react-web-kit 1.22.1-beta.8 → 1.22.2

package/src/components/organisms/DataGrid/Footer/Footer.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Button } from '../../../atoms/Button';
+import { Icon, Text } from '@tecsinapse/react-core';
+import { Select } from '../../../molecules/Select';
+import { TFoot, Tr } from '../../../atoms/Table';
+import {
+  FooterContainer,
+  FooterContainerEnd,
+  FooterContainerStart,
+  HoveredText,
+  NavigationButton,
+  PageButton,
+  PagesContainer,
+  SelectContainer,
+  TdFooterStyled,
+  TextPagination,
+} from './styled';
+
+interface DataGridFooterProps {
+  rowsPerPage: number;
+  onRowsPerPageChange?: (value: number) => void;
+  rowsPerPageOptions: number[];
+  rowsPerPageLabel: (value: number) => string;
+  exportLabel?: string;
+  exportFunction?: () => void;
+  /** Total data elements */
+  rowsCount: number;
+  page: number;
+  onPageChange?: (page: number) => void;
+  pagination: boolean;
+  exportComponent?: React.ReactNode;
+}
+
+const Footer: React.FC<DataGridFooterProps> = ({
+  rowsPerPage,
+  onRowsPerPageChange,
+  rowsPerPageOptions,
+  rowsPerPageLabel,
+  exportFunction,
+  exportLabel,
+  rowsCount,
+  page,
+  onPageChange,
+  pagination,
+  exportComponent,
+}) => {
+  if (pagination && (!onPageChange || !onRowsPerPageChange)) {
+    throw new Error(
+      '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'
+    );
+  }
+
+  const getPaginationSlice = (): { start: number; end: number } => {
+    const totalPages = Math.ceil(rowsCount / rowsPerPage);
+    if (totalPages < 4) {
+      return { start: 0, end: totalPages };
+    }
+    if (page === 0) {
+      return { start: page, end: page + 3 };
+    }
+    if (page === totalPages - 1) {
+      return { start: page - 2, end: page + 1 };
+    }
+    return { start: page - 1, end: page + 2 };
+  };
+
+  const handleRowsPerPage = React.useCallback(
+    value => {
+      onRowsPerPageChange?.(value as number);
+      onPageChange?.(0);
+    },
+    [onPageChange, onRowsPerPageChange]
+  );
+  const currentInitItem = page * rowsPerPage + 1;
+  const currentFinalItem =
+    (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
+
+  return (
+    <TFoot>
+      <Tr>
+        <TdFooterStyled colSpan={99}>
+          <FooterContainer>
+            <FooterContainerStart>
+              {pagination && (
+                <SelectContainer>
+                  <Select
+                    options={rowsPerPageOptions}
+                    onSelect={handleRowsPerPage}
+                    value={rowsPerPage}
+                    type={'single'}
+                    keyExtractor={value => String(value)}
+                    labelExtractor={rowsPerPageLabel}
+                    anchor="top"
+                  />
+                </SelectContainer>
+              )}
+              {exportComponent && !exportFunction && <>{exportComponent}</>}
+              {exportFunction && (
+                <HoveredText>
+                  <Button variant="outlined" onPress={() => exportFunction()}>
+                    <Text fontColor="orange" fontWeight="bold">
+                      {exportLabel}
+                    </Text>
+                  </Button>
+                </HoveredText>
+              )}
+            </FooterContainerStart>
+            {pagination && (
+              <>
+                <TextPagination
+                  fontWeight={'bold'}
+                  fontColor={'medium'}
+                >{`Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`}</TextPagination>
+                <FooterContainerEnd>
+                  <NavigationButton
+                    onPress={() => onPageChange?.(page - 1)}
+                    disabled={page === 0}
+                  >
+                    <Icon
+                      name={'chevron-left'}
+                      type={'material-community'}
+                      fontColor={'light'}
+                    />
+                  </NavigationButton>
+                  <PagesContainer>
+                    {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]
+                      .slice(
+                        getPaginationSlice().start,
+                        getPaginationSlice().end
+                      )
+                      .map(value => (
+                        <HoveredText key={`page-${value}`}>
+                          <PageButton
+                            variant={page === value ? 'outlined' : 'text'}
+                            onPress={() => onPageChange?.(value)}
+                          >
+                            <Text fontColor="medium" fontWeight="bold">
+                              {value + 1}
+                            </Text>
+                          </PageButton>
+                        </HoveredText>
+                      ))}
+                  </PagesContainer>
+                  <NavigationButton
+                    onPress={() => onPageChange?.(page + 1)}
+                    disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}
+                  >
+                    <Icon
+                      name={'chevron-right'}
+                      type={'material-community'}
+                      fontColor={'light'}
+                    />
+                  </NavigationButton>
+                </FooterContainerEnd>
+              </>
+            )}
+          </FooterContainer>
+        </TdFooterStyled>
+      </Tr>
+    </TFoot>
+  );
+};
+
+export default React.memo(Footer);

package/src/components/organisms/DataGrid/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer';

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+import { default as nativeStyled } from '@emotion/native';
+import { StyleProps, Text } from '@tecsinapse/react-core';
+import { Td } from '../../../atoms/Table';
+import { Button } from '../../../atoms/Button';
+
+export const TdFooterStyled = styled(Td)<Partial<StyleProps>>`
+  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;
+`;
+
+export const FlexContainer = styled('div')`
+  display: flex;
+  flex-grow: 1;
+`;
+
+export const FooterContainer = styled(FlexContainer)`
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const FooterContainerStart = styled(FlexContainer)`
+  justify-content: flex-start;
+`;
+
+export const FooterContainerEnd = styled(FlexContainer)`
+  justify-content: flex-end;
+`;
+
+export const SelectContainer = styled('div')<Partial<StyleProps>>`
+  margin-right: ${({ theme }) => theme.spacing.deca};
+`;
+
+export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    
+    border-radius: ${({ theme }) => theme.borderRadius.mili};
+    height: 44px;
+    justify-content: center;
+    padding: ${({ theme }) => theme.spacing.centi};
+    width: 44px;  
+`;
+
+// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text
+export const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`
+    padding-right: ${({ theme }) => theme.spacing.deca};
+    padding-left: ${({ theme }) => theme.spacing.deca};
+    border-radius: ${({ theme }) => theme.borderRadius.mili};
+    justify-content: center;
+    margin-left: ${({ theme }) => theme.spacing.micro};
+    margin-right: ${({ theme }) => theme.spacing.micro};
+`;
+
+export const PagesContainer = styled('div')<Partial<StyleProps>>`
+  margin: 0 20px;
+  display: flex;
+`;
+
+export const HoveredText = styled('div')<Partial<StyleProps>>`
+  user-select: none;
+  &:hover * {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+`;
+
+export const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`
+  padding-right: ${({ theme }) => theme.spacing.deca};
+  padding-left: ${({ theme }) => theme.spacing.deca};
+
+`;

package/src/components/organisms/DataGrid/Header/Header.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Checkbox, Icon, PressableSurface } from '@tecsinapse/react-core';
+import { Th, THead, Tr } from '../../../atoms/Table';
+import { CheckboxHeader } from './styled';
+import { HeadersType, SortState } from '../types';
+import {
+  findCurrentItemsOnData,
+  findUnselectedItemsOnData,
+  getIconColor,
+  getIconSuffix,
+  NEXT_STATE,
+} from './utils';
+
+export interface DataGridHeaderProps<Data> {
+  headers: HeadersType<Data>[];
+  data: Data[];
+  selectedRows: Data[];
+  onSelected?: (data: Data[]) => void;
+  rowKeyExtractor: (data: Data) => string;
+  rowsCount: number;
+  selectable?: boolean;
+}
+
+const Header = <Data,>({
+  selectable,
+  rowsCount,
+  headers,
+  data,
+  rowKeyExtractor,
+  selectedRows,
+  onSelected,
+}: DataGridHeaderProps<Data>): JSX.Element => {
+  const [sortDirection, setSortDirection] = React.useState<SortState>(
+    NEXT_STATE.initial
+  );
+
+  const handleSortDirection = sort => {
+    sort(NEXT_STATE[sortDirection]);
+    setSortDirection(NEXT_STATE[sortDirection]);
+  };
+
+  const handleSelectAll = checked => {
+    if (!checked) {
+      onSelected?.([]);
+      return;
+    }
+
+    const currentItemsOnData = findCurrentItemsOnData(
+      selectedRows,
+      data,
+      rowKeyExtractor
+    );
+
+    const unselectedItemsOnData = findUnselectedItemsOnData(
+      selectedRows,
+      data,
+      rowKeyExtractor
+    );
+
+    if (checked && selectedRows.length < 1) {
+      onSelected?.(data);
+      return;
+    }
+    if (checked && currentItemsOnData.length < 1) {
+      onSelected?.(unselectedItemsOnData.concat(selectedRows));
+      return;
+    }
+    onSelected?.(selectedRows.concat(unselectedItemsOnData));
+  };
+
+  return (
+    <THead>
+      <Tr>
+        {selectable && (
+          <CheckboxHeader>
+            <Checkbox
+              checked={rowsCount === selectedRows?.length}
+              onChange={handleSelectAll}
+            />
+          </CheckboxHeader>
+        )}
+        {headers.map(({ label, sort, justifyContent = 'flex-start' }) => (
+          <Th key={label}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent,
+              }}
+            >
+              {label}
+              {sort && (
+                <div style={{ marginLeft: 8 }}>
+                  <PressableSurface onPress={() => handleSortDirection(sort)}>
+                    <Icon
+                      name={`sort-alphabetical-${getIconSuffix(sortDirection)}`}
+                      type={'material-community'}
+                      fontColor={getIconColor(sortDirection)}
+                    />
+                  </PressableSurface>
+                </div>
+              )}
+            </div>
+          </Th>
+        ))}
+      </Tr>
+    </THead>
+  );
+};
+
+export default Header;

package/src/components/organisms/DataGrid/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header';

package/src/components/organisms/DataGrid/Header/styled.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+import { Th } from '../../../atoms/Table';
+
+export const CheckboxHeader = styled(Th)<Partial<StyleProps>>`
+  padding: 0 0 0 ${({ theme }) => theme.spacing.mili};
+  & * {
+    user-select: none;
+  }
+`;

package/src/components/organisms/DataGrid/Header/utils.ts

@@ -0,0 +1,38 @@
+import { SortState } from '../types';
+
+export const NEXT_STATE: { [key: string]: SortState } = {
+  unsorted: 'ascending',
+  ascending: 'descending',
+  descending: 'unsorted',
+  initial: 'unsorted',
+};
+
+export const getIconSuffix = (state: SortState): string =>
+  state === 'unsorted' ? 'ascending' : state;
+
+export const getIconColor = (state: SortState): 'medium' | 'orange' =>
+  state === 'unsorted' ? 'medium' : 'orange';
+
+export const findUnselectedItemsOnData = <T>(
+  selected: T[],
+  data: T[],
+  rowKeyExtractor: (t: T) => string
+): T[] =>
+  selected.length > 0
+    ? data.filter(item =>
+        selected.every(
+          rowData => rowKeyExtractor(rowData) !== rowKeyExtractor(item)
+        )
+      )
+    : [];
+
+export const findCurrentItemsOnData = <T>(
+  selected: T[],
+  data: T[],
+  rowKeyExtractor: (t: T) => string
+): T[] =>
+  selected.length > 0
+    ? selected.filter(item =>
+        data.some(rowData => rowKeyExtractor(rowData) === rowKeyExtractor(item))
+      )
+    : [];

package/src/components/organisms/DataGrid/Row/Row.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Checkbox } from '@tecsinapse/react-core';
+import { CheckboxCell } from '../styled';
+import { Td, Tr } from '../../../atoms/Table';
+
+const Row = ({
+  rowKeyExtractor,
+  data,
+  checked: _checked,
+  handleSelect,
+  selectable,
+  headers,
+}) => {
+  return (
+    <Tr key={rowKeyExtractor(data)}>
+      {selectable && (
+        <CheckboxCell>
+          <Checkbox
+            checked={_checked}
+            onChange={checked => handleSelect(data, checked)}
+          />
+        </CheckboxCell>
+      )}
+      {headers.map(({ label, render }) => (
+        <Td key={`row-${rowKeyExtractor(data)}-column-${label}`}>
+          {render(data)}
+        </Td>
+      ))}
+    </Tr>
+  );
+};
+
+export default React.memo(Row);

package/src/components/organisms/DataGrid/Row/index.ts

@@ -0,0 +1 @@
+export { default as Row } from './Row';

package/src/components/organisms/DataGrid/index.ts

@@ -0,0 +1,3 @@
+export { default as DataGrid } from './DataGrid';
+export type { DataGridProps } from './DataGrid';
+export * from './types';

package/src/components/organisms/DataGrid/styled.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+import { Td } from '../../atoms/Table';
+
+export const CheckboxCell = styled(Td)<Partial<StyleProps>>`
+  padding: ${({ theme }) => theme.spacing.mili};
+  & * {
+    user-select: none;
+  }
+`;

package/src/components/organisms/DataGrid/types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export type SortState = 'ascending' | 'descending' | 'unsorted';
+
+export type HeadersType<Data> = {
+  /** Column header label */
+  label: string;
+  /** Table cell renderer */
+  render: (data: Data) => React.ReactNode;
+  sort?: (direction: SortState) => void;
+  /** Header alignment */
+  justifyContent?: 'flex-start' | 'center' | 'flex-end';
+};

package/src/components/organisms/DataGrid/utils.ts

@@ -0,0 +1,16 @@
+export function removeElement<T>(arr: T[], index: number): T[] {
+  const data = [...arr]; // Sometimes looks like the data is removed from table, check if this is a bug. I'm copying the arr to a new variable for security reasons
+  data.splice(index, 1);
+  return data;
+}
+
+export const getData = <Data>(
+  data: Data[],
+  rowsCount: number | undefined,
+  page: number,
+  rowsPerPage: number,
+  pagination: boolean
+): Data[] =>
+  rowsCount || !pagination
+    ? data
+    : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useBreakpoints } from './useBreakpoints';
+export { useClickAwayListener } from './useClickAwayListener';
+export { useWindowSize } from './useWindowSize';

package/src/hooks/useBreakpoints.ts

@@ -0,0 +1,18 @@
+import { useTheme } from '@tecsinapse/react-core';
+import { useWindowSize } from './useWindowSize';
+
+export type UseBreakpointsReturn = {
+  sm: boolean;
+  md: boolean;
+  lg: boolean;
+};
+
+export const useBreakpoints = (): UseBreakpointsReturn => {
+  const { width } = useWindowSize();
+  const { breakpoints } = useTheme();
+  return {
+    sm: Number(width) >= 0 && Number(width) <= breakpoints.sm,
+    md: Number(width) > breakpoints.sm && Number(width) <= breakpoints.md,
+    lg: Number(width) > breakpoints.md,
+  };
+};

package/src/hooks/useClickAwayListener.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const useClickAwayListener = (
+  ref: React.MutableRefObject<any>,
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  event: 'mouseup' | 'mousedown' | undefined = 'mousedown'
+): void => {
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener(event, handleClickOutside);
+    return () => {
+      document.removeEventListener(event, handleClickOutside);
+    };
+  }, [ref]);
+};

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type WindowSize = {
+  width: number | undefined;
+  height: number | undefined;
+};
+
+export const useWindowSize = (): WindowSize => {
+  const [windowSize, setWindowSize] = React.useState<WindowSize>({
+    width: undefined,
+    height: undefined,
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};

package/src/index.ts

@@ -0,0 +1,58 @@
+export * from '@tecsinapse/react-core';
+export { Icon, Text } from '@tecsinapse/react-core';
+export { Accordion } from './components/atoms/Accordion';
+export type { AccordionProps } from './components/atoms/Accordion';
+export { default as Badge } from './components/atoms/Badge/Badge';
+export type { BadgeWebProps } from './components/atoms/Badge/Badge';
+export { Button, useMouseHover } from './components/atoms/Button';
+export type { WebButtonProps } from './components/atoms/Button';
+export { Input } from './components/atoms/Input';
+export type { InputWebProps } from './components/atoms/Input';
+export { InputMask } from './components/atoms/InputMask';
+export type { InputMaskWebProps } from './components/atoms/InputMask';
+export { Modal } from './components/atoms/Modal';
+export type { ModalProps } from './components/atoms/Modal';
+export { Skeleton } from './components/atoms/Skeleton';
+export type { SkeletonProps } from './components/atoms/Skeleton';
+export { Tag } from './components/atoms/Tag';
+export type { TagProps } from './components/atoms/Tag';
+export { Tooltip } from './components/atoms/Tooltip';
+export type { ITooltip } from './components/atoms/Tooltip';
+export { Breadcrumbs } from './components/molecules/Breadcrumbs';
+export type {
+  BreadcrumbsProps,
+  BreadcrumbType
+} from './components/molecules/Breadcrumbs';
+export { DatePicker } from './components/molecules/DatePicker';
+export type { WebDatePickerProps } from './components/molecules/DatePicker';
+export { DateTimePicker } from './components/molecules/DateTimePicker';
+export type { WebDateTimePickerProps } from './components/molecules/DateTimePicker';
+export { Drawer } from './components/molecules/Drawer';
+export type { DrawerProps } from './components/molecules/Drawer';
+export { Grid, GridItem } from './components/molecules/Grid';
+export type { IGridItemWeb, IGridWeb } from './components/molecules/Grid';
+export { IconTextButton } from './components/molecules/IconTextButton';
+export { InputPassword } from './components/molecules/InputPassword';
+export type { InputPasswordWebProps } from './components/molecules/InputPassword';
+export { LabeledSwitch } from './components/molecules/LabeledSwitch';
+export type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';
+export { Menubar } from './components/molecules/Menubar';
+export type {
+  MenubarItemsOptions,
+  MenubarMostUsedType,
+  MenubarOptionsType,
+  MenubarProps
+} from './components/molecules/Menubar';
+export { Select } from './components/molecules/Select';
+export type { SelectProps } from './components/molecules/Select';
+export { Snackbar } from './components/molecules/Snackbar';
+export type { SnackbarWebProps } from './components/molecules/Snackbar';
+export { TextArea } from './components/molecules/TextArea';
+export type { TextAreaProps } from './components/molecules/TextArea';
+export { DataGrid } from './components/organisms/DataGrid';
+export type {
+  DataGridProps,
+  HeadersType
+} from './components/organisms/DataGrid';
+export * from './hooks';
+

package/tsconfig.build.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "declarationDir": "./esm",
+    "rootDir": "./src",
+    "baseUrl": "./"
+  },
+  "include": ["./src"]
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "declarationDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./"
+  },
+  "include": ["./src"]
+}

package/dist/cjs/components/atoms/Accordion/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../src/components/atoms/Accordion/Accordion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, ThemeProp } from '@tecsinapse/react-core';\nimport {\n  AccordionContainer,\n  IconContainer,\n  TitleContainer,\n  ContentContainer,\n} from './styled';\nimport { Transition } from 'react-transition-group';\nimport {\n  contentStyle,\n  contentTransition,\n  titleStyle,\n  titleTransition,\n} from './animations';\nimport { useTheme } from '@emotion/react';\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  onChange?: () => void;\n  title: string;\n  /** Transition time for collapse effect in ms */\n  transition?: number;\n}\n\nconst Accordion: React.FC<AccordionProps> = ({\n  title,\n  open: _open = false,\n  onChange,\n  transition = 200,\n  children,\n  ...rest\n}) => {\n  const [open, setOpen] = React.useState(_open);\n  const [contentHeight, setContentHeight] = React.useState(0);\n  const theme = useTheme() as ThemeProp;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => setOpen(_open), [_open]);\n\n  React.useLayoutEffect(() => {\n    const size = Array.from(\n      (ref.current?.children || []) as HTMLCollection\n    ).reduce((prev, curr) => prev + curr.clientHeight, 0);\n    setContentHeight(size);\n  }, []);\n\n  const handleClick = React.useCallback(() => {\n    if (onChange) {\n      onChange();\n      return;\n    }\n    setOpen(state => !state);\n  }, [onChange]);\n\n  return (\n    <AccordionContainer {...rest}>\n      <TitleContainer onClick={handleClick}>\n        <Transition in={open} timeout={transition}>\n          {state => (\n            <Text\n              typography=\"h4\"\n              fontWeight=\"bold\"\n              style={{\n                ...titleStyle(transition, theme),\n                ...titleTransition(theme)[state],\n              }}\n            >\n              {title}\n            </Text>\n          )}\n        </Transition>\n        <IconContainer>\n          <Icon\n            type=\"material-community\"\n            name={open ? 'chevron-up' : 'chevron-down'}\n            size=\"kilo\"\n            fontColor=\"medium\"\n          />\n        </IconContainer>\n      </TitleContainer>\n      <Transition in={open} timeout={transition}>\n        {state => (\n          <ContentContainer\n            ref={htmlEl => (ref.current = htmlEl)}\n            style={{\n              ...contentStyle(open, transition, contentHeight, theme),\n              ...contentTransition(contentHeight, theme)[state],\n            }}\n          >\n            {children}\n          </ContentContainer>\n        )}\n      </Transition>\n    </AccordionContainer>\n  );\n};\n\nexport default Accordion;\n"],"names":["React","useTheme","useRef","_a","AccordionContainer","TitleContainer","Transition","Text","titleStyle","titleTransition","IconContainer","Icon","ContentContainer","contentStyle","contentTransition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBM,MAAA,SAAA,GAAsC,CAAC,EAOvC,KAAA;AAPuC,EAC3C,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,MAAM,KAAQ,GAAA,KAAA;AAAA,IACd,QAAA;AAAA,IACA,UAAa,GAAA,GAAA;AAAA,IACb,QAAA;AAAA,GA9BF,GAyB6C,EAMxC,EAAA,IAAA,GAAA,SAAA,CANwC,EAMxC,EAAA;AAAA,IALH,OAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,yBAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAA,yBAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,QAAQC,cAAS,EAAA,CAAA;AAEvB,EAAM,MAAA,GAAA,GAAMC,aAA8B,IAAI,CAAA,CAAA;AAE9C,EAAAF,yBAAA,CAAM,UAAU,MAAM,OAAA,CAAQ,KAAK,CAAG,EAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AAE7C,EAAAA,yBAAA,CAAM,gBAAgB,MAAM;AAzC9B,IAAAG,IAAAA,GAAAA,CAAAA;AA0CI,IAAA,MAAM,OAAO,KAAM,CAAA,IAAA;AAAA,MAAA,CAAA,CAChBA,MAAA,GAAI,CAAA,OAAA,KAAJ,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,GAAAA,CAAa,aAAY,EAAC;AAAA,KAC7B,CAAE,OAAO,CAAC,IAAA,EAAM,SAAS,IAAO,GAAA,IAAA,CAAK,cAAc,CAAC,CAAA,CAAA;AACpD,IAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,GACvB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAcH,yBAAM,CAAA,WAAA,CAAY,MAAM;AAC1C,IAAA,IAAI,QAAU,EAAA;AACZ,MAAS,QAAA,EAAA,CAAA;AACT,MAAA,OAAA;AAAA,KACF;AACA,IAAQ,OAAA,CAAA,CAAA,KAAA,KAAS,CAAC,KAAK,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EACE,uBAAAA,yBAAA,CAAA,aAAA,CAACI,yBAAuB,EAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,kBACrBJ,yBAAA,CAAA,aAAA,CAAAK,qBAAA,EAAA;AAAA,IAAe,OAAS,EAAA,WAAA;AAAA,GAAA,kBACtBL,yBAAA,CAAA,aAAA,CAAAM,+BAAA,EAAA;AAAA,IAAW,EAAI,EAAA,IAAA;AAAA,IAAM,OAAS,EAAA,UAAA;AAAA,GAAA,EAC5B,2BACEN,yBAAA,CAAA,aAAA,CAAAO,cAAA,EAAA;AAAA,IACC,UAAW,EAAA,IAAA;AAAA,IACX,UAAW,EAAA,MAAA;AAAA,IACX,KAAA,EAAO,kCACFC,qBAAW,CAAA,UAAA,EAAY,KAAK,CAC5B,CAAA,EAAAC,0BAAA,CAAgB,KAAK,CAAE,CAAA,KAAA,CAAA,CAAA;AAAA,GAAA,EAG3B,KACH,CAEJ,CACA,kBAAAT,yBAAA,CAAA,aAAA,CAACU,4CACEV,yBAAA,CAAA,aAAA,CAAAW,cAAA,EAAA;AAAA,IACC,IAAK,EAAA,oBAAA;AAAA,IACL,IAAA,EAAM,OAAO,YAAe,GAAA,cAAA;AAAA,IAC5B,IAAK,EAAA,MAAA;AAAA,IACL,SAAU,EAAA,QAAA;AAAA,GACZ,CACF,CACF,CAAA,kBACCX,yBAAA,CAAA,aAAA,CAAAM,+BAAA,EAAA;AAAA,IAAW,EAAI,EAAA,IAAA;AAAA,IAAM,OAAS,EAAA,UAAA;AAAA,GAAA,EAC5B,2BACEN,yBAAA,CAAA,aAAA,CAAAY,uBAAA,EAAA;AAAA,IACC,GAAA,EAAK,CAAW,MAAA,KAAA,GAAA,CAAI,OAAU,GAAA,MAAA;AAAA,IAC9B,KAAA,EAAO,cACF,CAAA,cAAA,CAAA,EAAA,EAAAC,uBAAA,CAAa,IAAM,EAAA,UAAA,EAAY,aAAe,EAAA,KAAK,CACnD,CAAA,EAAAC,4BAAA,CAAkB,aAAe,EAAA,KAAK,CAAE,CAAA,KAAA,CAAA,CAAA;AAAA,GAG5C,EAAA,QACH,CAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/components/atoms/Accordion/animations.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animations.js","sources":["../../../../../src/components/atoms/Accordion/animations.ts"],"sourcesContent":["import { ThemeProp, extractNumbersFromString } from '@tecsinapse/react-core';\n\nexport const contentStyle = (\n  open: boolean,\n  transition: number,\n  value: number,\n  theme: ThemeProp\n) => ({\n  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${\n    transition * 2\n  }ms ease-in-out`,\n  paddingBottom: open ? extractNumbersFromString(theme.spacing.kilo) : 0,\n  height: open ? value : 0,\n});\n\nexport const contentTransition = (value: number, theme: ThemeProp) => {\n  const paddingBottom = extractNumbersFromString(theme.spacing.kilo);\n  return {\n    entering: {\n      paddingBottom,\n      height: value,\n    },\n    entered: {\n      paddingBottom,\n      height: value,\n    },\n    exiting: {\n      paddingBottom,\n      height: value,\n    },\n    exited: { paddingBottom: 0, height: 0 },\n  };\n};\n\nexport const titleStyle = (transition: number, theme: ThemeProp) => ({\n  transition: `color ${transition * 2}ms ease-in-out`,\n  color: theme.font.color.dark,\n});\n\nexport const titleTransition = (theme: ThemeProp) => ({\n  entering: {\n    color: theme.font.color.orange,\n  },\n  entered: {\n    color: theme.font.color.orange,\n  },\n  exiting: {\n    color: theme.font.color.orange,\n  },\n  exited: { color: theme.font.color.dark },\n});\n"],"names":["extractNumbersFromString"],"mappings":";;;;;;AAEO,MAAM,YAAe,GAAA,CAC1B,IACA,EAAA,UAAA,EACA,OACA,KACI,MAAA;AAAA,EACJ,UAAY,EAAA,CAAA,eAAA,EAAkB,UAAa,GAAA,CAAA,CAAA,uBAAA,EACzC,UAAa,GAAA,CAAA,CAAA,cAAA,CAAA;AAAA,EAEf,eAAe,IAAO,GAAAA,kCAAA,CAAyB,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAI,GAAA,CAAA;AAAA,EACrE,MAAA,EAAQ,OAAO,KAAQ,GAAA,CAAA;AACzB,CAAA,EAAA;AAEa,MAAA,iBAAA,GAAoB,CAAC,KAAA,EAAe,KAAqB,KAAA;AACpE,EAAA,MAAM,aAAgB,GAAAA,kCAAA,CAAyB,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AACjE,EAAO,OAAA;AAAA,IACL,QAAU,EAAA;AAAA,MACR,aAAA;AAAA,MACA,MAAQ,EAAA,KAAA;AAAA,KACV;AAAA,IACA,OAAS,EAAA;AAAA,MACP,aAAA;AAAA,MACA,MAAQ,EAAA,KAAA;AAAA,KACV;AAAA,IACA,OAAS,EAAA;AAAA,MACP,aAAA;AAAA,MACA,MAAQ,EAAA,KAAA;AAAA,KACV;AAAA,IACA,MAAQ,EAAA,EAAE,aAAe,EAAA,CAAA,EAAG,QAAQ,CAAE,EAAA;AAAA,GACxC,CAAA;AACF,EAAA;AAEa,MAAA,UAAA,GAAa,CAAC,UAAA,EAAoB,KAAsB,MAAA;AAAA,EACnE,UAAA,EAAY,SAAS,UAAa,GAAA,CAAA,CAAA,cAAA,CAAA;AAAA,EAClC,KAAA,EAAO,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,IAAA;AAC1B,CAAA,EAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,KAAsB,MAAA;AAAA,EACpD,QAAU,EAAA;AAAA,IACR,KAAA,EAAO,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,MAAA;AAAA,GAC1B;AAAA,EACA,OAAS,EAAA;AAAA,IACP,KAAA,EAAO,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,MAAA;AAAA,GAC1B;AAAA,EACA,OAAS,EAAA;AAAA,IACP,KAAA,EAAO,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,MAAA;AAAA,GAC1B;AAAA,EACA,QAAQ,EAAE,KAAA,EAAO,KAAM,CAAA,IAAA,CAAK,MAAM,IAAK,EAAA;AACzC,CAAA;;;;;;;"}

package/dist/cjs/components/atoms/Accordion/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Accordion/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const IconContainer = styled('div')<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  border: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TitleContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  cursor: pointer;\n  padding: ${({ theme }) => theme.spacing.kilo} 0;\n`;\n\nexport const AccordionContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const ContentContainer = styled('div')`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"names":["styled"],"mappings":";;;;;;;;;;AAGa,MAAA,aAAA,GAAgBA,2BAAO,KAAK,CAAA,CAAA;AAAA,iBAAA,EACtB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,UACzC,EAAA,CAAC,EAAE,KAAA,EACX,KAAA,CAAA,EAAG,MAAM,WAAY,CAAA,IAAA,CAAA,OAAA,EAAc,KAAM,CAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOhD,MAAA,cAAA,GAAiBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAM7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAG7B,MAAA,kBAAA,GAAqBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,iBAG3B,EAAA,CAAC,EAAE,KAAA,EAClB,KAAA,CAAA,EAAG,MAAM,WAAY,CAAA,IAAA,CAAA,OAAA,EAAc,KAAM,CAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,oBAAA,EACvC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,YAAA,CAAA;AAAA,EAAA;AAG5C,MAAA,gBAAA,GAAmBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;"}