etudes 1.2.0 → 2.0.0

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, CSSProperties, PureComponent, RefObject } from 'react'\nimport styled, { css } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : () => {}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>\n\nexport type SectionHeaderCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport type SectionCSSProps = Readonly<{\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport interface SectionProps<T = Record<string, never>> {\n  label: string\n  items: T[]\n}\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data provided to each section.\n   */\n  data: SectionProps<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultSelectedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the section header itself.\n   */\n  borderColor?: string\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to each section element.\n   */\n  sectionCSS?: ExtendedCSSFunction<SectionCSSProps>\n\n  /**\n   * Additional CSS to be provided to each section header element.\n   */\n  sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>\n}\n\nexport interface State {\n  /**\n   * Current selected section index.\n   */\n  selectedSectionIndex: number\n\n  /**\n   * Current selected item index of the expanded section.\n   */\n  selectedItemIndex: number\n}\n\nexport default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    lists: [] as RefObject<List<T>>[],\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedSectionIndex: props.defaultSelectedSectionIndex ?? -1,\n      selectedItemIndex: -1,\n    }\n  }\n\n  componentDidMount() {\n    this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {\n      debug(`Changing section index to ${this.state.selectedSectionIndex}... OK`)\n      this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    }\n\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      debug(`Changing item index to ${this.state.selectedItemIndex}... OK`)\n      this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const isTogglable = this.props.isTogglable ?? true\n    const itemLength = this.props.itemLength ?? 50\n    const itemPadding = this.props.itemPadding ?? 0\n    const sectionPadding = this.props.sectionPadding ?? 0\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const orientation = this.props.orientation ?? 'vertical'\n\n    this.nodeRefs.lists = []\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        style={{\n          ...this.props.style ?? {},\n          ...(orientation === 'vertical' ? {\n            height: 'auto',\n          } : {\n            width: 'auto',\n          }),\n        }}\n      >\n        {this.props.data.map((section, i) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !this.isSectionSelectedAt(i)\n          const ref = createRef<List<T>>()\n\n          this.nodeRefs.lists.push(ref)\n\n          return (\n            <StyledSection\n              key={`section-${i}`}\n              isCollapsed={isCollapsed}\n              orientation={orientation}\n              extendedCSS={this.props.sectionCSS ?? (() => css``)}\n              style={orientation === 'vertical' ? {\n                marginTop: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              } : {\n                marginLeft: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              }}\n            >\n              <StyledSectionHeader\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                orientation={orientation}\n                isCollapsed={isCollapsed}\n                onClick={() => this.toggleSectionAt(i) }\n                extendedCSS={this.props.sectionHeaderCSS ?? (() => css``)}\n              >\n                <label>{section.label}</label>\n                {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n              </StyledSectionHeader>\n              <StyledItemList\n                ref={ref as any}\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                data={section.items}\n                defaultSelectedIndex={-1}\n                isTogglable={isTogglable}\n                itemComponentType={this.props.itemComponentType as any}\n                itemPadding={itemPadding}\n                onDeselectAt={idx => this.deselectItemAt(idx)}\n                onSelectAt={idx => this.selectItemAt(idx)}\n                orientation={orientation}\n                shouldStaySelected={true}\n                itemStyle={orientation === 'vertical' ? {\n                  height: `${itemLength}px`,\n                } : {\n                  width: `${itemLength}px`,\n                }}\n                style={orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                }}\n              />\n            </StyledSection>\n          )\n        })}\n      </StyledRoot>\n    )\n  }\n\n  private isSectionSelectedAt(index: number): boolean {\n    return this.state.selectedSectionIndex === index\n  }\n\n  private toggleSectionAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isSectionSelectedAt(index)) {\n      this.deselectSectionAt(index)\n    }\n    else {\n      this.selectSectionAt(index)\n    }\n  }\n\n  private selectSectionAt(index: number) {\n    if (this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: index,\n    })\n  }\n\n  private deselectSectionAt(index: number) {\n    if (!this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: -1,\n    })\n  }\n\n  private isItemSelectedAt(index: number): boolean {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  private toggleItemAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isItemSelectedAt(index)) {\n      this.deselectItemAt(index)\n    }\n    else {\n      this.selectItemAt(index)\n    }\n  }\n\n  private selectItemAt(index: number) {\n    if (this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: index,\n    })\n  }\n\n  private deselectItemAt(index: number) {\n    if (!this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: -1,\n    })\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  ` : css`\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  `}\n`\n\nconst StyledSectionHeader = styled.button<SectionHeaderCSSProps & ExtendedCSSProps<SectionHeaderCSSProps>>`\n  align-items: center;\n  background: #fff;\n  border-color: ${props => props.borderColor};\n  border-style: solid;\n  border-width: ${props => props.borderThickness};\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    height: 50px;\n    width: 100%;\n    ` : css`\n    height: 100%;\n    width: 50px;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledSection = styled.section<SectionCSSProps & ExtendedCSSProps<SectionCSSProps>>`\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    flex-direction: column;\n    ` : css`\n    height: 100%;\n    flex-direction: row;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: column;\n    ` : css`\n    flex-direction: row;\n  `}\n`\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref, useEffect, useState } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type SectionData<T> = {\n  label: string\n  items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Data provided to each section.\n   */\n  data: SectionData<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultExpandedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  defaultExpandedSectionIndex = -1,\n  expandIconSvg,\n  isTogglable = true,\n  itemComponentType,\n  itemLength = 50,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  onItemIndexChange,\n  onSectionIndexChange,\n  ...props\n}, ref) => {\n  const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n  const toggleSectionAt = (index: number) => {\n    if (isTogglable && isSectionSelectedAt(index)) {\n      setExpandedSectionIndex(-1)\n    }\n    else {\n      setExpandedSectionIndex(index)\n    }\n  }\n\n  const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n  const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n  const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n  useEffect(() => {\n    onSectionIndexChange?.(expandedSectionIndex)\n  }, [expandedSectionIndex])\n\n  useEffect(() => {\n    onItemIndexChange?.(selectedItemIndex)\n  }, [selectedItemIndex])\n\n  const components = asComponentDict(children, {\n    header: AccordionHeader,\n    expandIcon: AccordionExpandIcon,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n    header: classNames(orientation),\n    expandIcon: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        height: 'auto',\n      } : {\n        flexDirection: 'row',\n        width: 'auto',\n      },\n    },\n    section: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      margin: '0',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        width: '100%',\n      } : {\n        flexDirection: 'row',\n        height: '100%',\n      },\n    },\n    header: {\n      borderWidth: `${borderThickness}px`,\n      margin: '0',\n      outline: 'none',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n    headerLabel: {\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      transition: 'inherit',\n    },\n    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    list: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        transitionProperty: 'height, margin',\n        top: '100%',\n      } : {\n        height: '100%',\n        transitionProperty: 'width, margin',\n        left: '100%',\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    header: {\n      alignItems: 'center',\n      background: '#fff',\n      borderStyle: 'solid',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: '0 10px',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform, opacity, background, color',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        height: '50px',\n      } : {\n        width: '50px',\n      },\n    },\n    expandIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <Each in={data}>\n        {(section, sectionIdx) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !isSectionSelectedAt(sectionIdx)\n\n          return (\n            <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n              marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            } : {\n              marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            })}>\n              {cloneStyledElement(components.header ?? <AccordionHeader style={defaultStyles.header}/>, {\n                className: classNames(fixedClassNames.header, {\n                  collapsed: isCollapsed,\n                  expanded: !isCollapsed,\n                }),\n                style: styles(fixedStyles.header),\n                onClick: () => toggleSectionAt(sectionIdx),\n              }, ...[\n                <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n                cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n                  className: classNames(fixedClassNames.expandIcon),\n                  style: styles(fixedStyles.expandIcon),\n                }),\n              ])}\n              <List\n                style={styles(fixedStyles.list, orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                })}\n                borderThickness={borderThickness}\n                data={section.items}\n                isSelectable={true}\n                isTogglable={isTogglable}\n                itemComponentType={itemComponentType}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                orientation={orientation}\n                selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n                onDeselectAt={() => {\n                  if (selectedSectionIndex !== sectionIdx) return\n                  setSelectedSectionIndex(-1)\n                  setSelectedItemIndex(-1)\n                }}\n                onSelectAt={itemIdx => {\n                  setSelectedSectionIndex(sectionIdx)\n                  setSelectedItemIndex(itemIdx)\n                }}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const AccordionExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/BurgerButton.d.ts

@@ -1,20 +1,33 @@
-import { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLButtonElement> & {
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+export declare type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
     height?: number;
     isActive?: boolean;
     isDoubleJointed?: boolean;
     isLastBarHalfWidth?: boolean;
     thickness?: number;
-    tintColor?: string;
     transitionDuration?: number;
     width?: number;
     onActivate?: () => void;
     onDeactivate?: () => void;
-};
+}>;
 /**
- * Three-striped burger button component that transforms into an "X" when selected.
+ * Three-striped burger button component that transforms into an "X" when
+ * selected.
  *
  * @exports BurgerButtonBar - Component for each line on the burger button.
  */
-export default function BurgerButton({ height, isActive: externalIsActive, isDoubleJointed, isLastBarHalfWidth, thickness, tintColor, transitionDuration, width, onActivate, onDeactivate, ...props }: Props): JSX.Element;
-export declare const BurgerButtonBar: import("styled-components").StyledComponent<"span", any, {}, never>;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
+    height?: number | undefined;
+    isActive?: boolean | undefined;
+    isDoubleJointed?: boolean | undefined;
+    isLastBarHalfWidth?: boolean | undefined;
+    thickness?: number | undefined;
+    transitionDuration?: number | undefined;
+    width?: number | undefined;
+    onActivate?: (() => void) | undefined;
+    onDeactivate?: (() => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+export declare const BurgerButtonBar: ({ ...props }: HTMLAttributes<HTMLSpanElement>) => JSX.Element;

package/lib/BurgerButton.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -71,16 +67,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BurgerButtonBar = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var Repeat_1 = __importDefault(require("./Repeat"));
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
 /**
- * Three-striped burger button component that transforms into an "X" when selected.
+ * Three-striped burger button component that transforms into an "X" when
+ * selected.
  *
  * @exports BurgerButtonBar - Component for each line on the burger button.
  */
-function BurgerButton(_a) {
-    var _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.tintColor, tintColor = _g === void 0 ? '#000' : _g, _h = _a.transitionDuration, transitionDuration = _h === void 0 ? 200 : _h, _j = _a.width, width = _j === void 0 ? 20 : _j, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "tintColor", "transitionDuration", "width", "onActivate", "onDeactivate"]);
-    var _k = __read((0, react_1.useState)(externalIsActive), 2), isActive = _k[0], setIsActive = _k[1];
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? 200 : _g, _h = _a.width, width = _h === void 0 ? 20 : _h, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["children", "className", "style", "height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "transitionDuration", "width", "onActivate", "onDeactivate"]);
+    var _j = __read((0, react_1.useState)(externalIsActive), 2), isActive = _j[0], setIsActive = _j[1];
     (0, react_1.useEffect)(function () {
         if (isActive !== externalIsActive) {
             setIsActive(externalIsActive);
@@ -94,15 +95,107 @@ function BurgerButton(_a) {
             onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
         }
     }, [isActive]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { width: width, height: height, thickness: thickness, onClick: function () { return setIsActive(!isActive); } }),
-        react_1.default.createElement(Repeat_1.default, { count: isDoubleJointed ? 2 : 1 },
-            react_1.default.createElement(StyledJoint, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), height: height, isLastBarHalfWidth: isLastBarHalfWidth, thickness: thickness, width: width },
-                react_1.default.createElement(Repeat_1.default, { count: 3 },
-                    react_1.default.createElement(exports.BurgerButtonBar, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), style: { height: "".concat(thickness, "px") } }))))));
-}
-exports.default = BurgerButton;
-exports.BurgerButtonBar = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n"], ["\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n"])));
-var StyledJoint = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ", ":nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ", ":nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ", ":nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      ", ":nth-child(1) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(2) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ", ":nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ", ":nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ", ":nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ", ":nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      ", ":nth-child(1) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(2) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ", ":nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n  }\n"])), exports.BurgerButtonBar, exports.BurgerButtonBar, function (props) { return props.height * .5 - props.thickness * .5; }, exports.BurgerButtonBar, function (props) { return props.height - props.thickness; }, function (props) { return props.isLastBarHalfWidth ? '50%' : '100%'; }, exports.BurgerButtonBar, function (props) { return "translate3d(0, ".concat(props.height * .5 - props.thickness * .5, "px, 0) rotate(45deg)"); }, exports.BurgerButtonBar, function (props) { return 'translate3d(0, 0, 0) scale(0)'; }, exports.BurgerButtonBar, function (props) { return "translate3d(0, ".concat(props.thickness * .5 - props.height * .5, "px, 0) rotate(-45deg)"); }, exports.BurgerButtonBar, exports.BurgerButtonBar, exports.BurgerButtonBar, function (props) { return props.height * .5 - props.thickness * .5; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isLastBarHalfWidth ? 0 : '100%'; }, function (props) { return "translate3d(0, ".concat(props.height * .5 - props.thickness * .5, "px, 0) rotate(-45deg)"); }, function (props) { return "translate3d(0, ".concat(props.thickness * .5 - props.height * .5, "px, 0) rotate(45deg)"); });
-var StyledRoot = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  html:not(.touch) &:hover {\n    ", ":not(.half) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n\n    ", ".half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n  }\n"], ["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  html:not(.touch) &:hover {\n    ", ":not(.half) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n\n    ", ".half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n  }\n"])), function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.width; }, StyledJoint, function (props) { return props.width; }, StyledJoint, function (props) { return props.width * .5; });
-var templateObject_1, templateObject_2, templateObject_3;
+    var components = (0, asComponentDict_1.default)(children, {
+        bar: exports.BurgerButtonBar,
+    });
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)({
+            active: isActive,
+        }),
+        bar: (0, classnames_1.default)({
+            active: isActive,
+        }),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        root: {
+            background: 'transparent',
+            border: 'none',
+            display: 'block',
+            height: "".concat(height, "px"),
+            outline: 'none',
+            width: "".concat(width, "px"),
+        },
+        joint: {
+            height: '100%',
+            position: 'absolute',
+            width: isDoubleJointed ? '50%' : '100%',
+        },
+        joint0: {
+            left: '0',
+            top: '0',
+        },
+        joint1: {
+            right: '0',
+            top: '0',
+        },
+        bar: {
+            height: "".concat(thickness, "px"),
+            margin: '0',
+            padding: '0',
+            position: 'absolute',
+            width: '100%',
+        },
+        bar00: {
+            left: '0',
+            top: '0',
+            transform: isActive ? "translate3d(0, ".concat(height * 0.5 - thickness * 0.5, "px, 0) rotate(45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+        },
+        bar01: {
+            left: '0',
+            top: "".concat(height * 0.5 - thickness * 0.5, "px"),
+            transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
+            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+        },
+        bar02: {
+            left: '0',
+            top: "".concat(height - thickness, "px"),
+            transform: isActive ? "translate3d(0, ".concat(thickness * 0.5 - height * 0.5, "px, 0) rotate(-45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+            width: isActive || isDoubleJointed ? '100%' : "".concat(isLastBarHalfWidth ? '50%' : '100%'),
+        },
+        bar10: {
+            left: '0',
+            top: '0',
+            transform: isActive ? "translate3d(0, ".concat(height * 0.5 - thickness * 0.5, "px, 0) rotate(-45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: 'left center',
+        },
+        bar11: {
+            left: '0',
+            top: "".concat(height * 0.5 - thickness * 0.5, "px"),
+            transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
+            transformOrigin: 'left center',
+        },
+        bar12: {
+            left: '0',
+            top: "".concat(height - thickness, "px"),
+            transform: isActive ? "translate3d(0, ".concat(thickness * 0.5 - height * 0.5, "px, 0) rotate(45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: 'left center',
+            width: isLastBarHalfWidth && !isActive ? '0' : '100%',
+        },
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        bar: {
+            background: '#fff',
+            transitionDuration: '100ms',
+            transitionProperty: 'width, height, transform, opacity, background',
+            transitionTimingFunction: 'ease-out',
+        },
+    });
+    return (react_1.default.createElement("button", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root), onClick: function () { return setIsActive(!isActive); } }),
+        react_1.default.createElement(Repeat_1.default, { count: isDoubleJointed ? 2 : 1 }, function (j) { return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.joint, fixedStyles["joint".concat(j)]) },
+            react_1.default.createElement(Repeat_1.default, { count: 3 }, function (i) {
+                var _a;
+                return (0, cloneStyledElement_1.default)((_a = components.bar) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.BurgerButtonBar, { style: defaultStyles.bar }), {
+                    'className': (0, classnames_1.default)(fixedClassNames.bar),
+                    'style': (0, styles_1.default)(fixedStyles.bar, fixedStyles["bar".concat(j).concat(i)]),
+                    'data-index': i,
+                });
+            }))); })));
+});
+var BurgerButtonBar = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("span", __assign({}, props));
+};
+exports.BurgerButtonBar = BurgerButtonBar;
 //# sourceMappingURL=BurgerButton.js.map

package/lib/BurgerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled from 'styled-components'\nimport Repeat from './Repeat'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  tintColor?: string\n  transitionDuration?: number\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when selected.\n *\n * @exports BurgerButtonBar - Component for each line on the burger button.\n */\nexport default function BurgerButton({\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  tintColor = '#000',\n  transitionDuration = 200,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot {...props} width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)}>\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Repeat count={3}>\n            <BurgerButtonBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }}/>\n          </Repeat>\n        </StyledJoint>\n      </Repeat>\n    </StyledRoot>\n  )\n}\n\nexport const BurgerButtonBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${BurgerButtonBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${BurgerButtonBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${BurgerButtonBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${BurgerButtonBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${BurgerButtonBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${BurgerButtonBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${BurgerButtonBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${BurgerButtonBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${BurgerButtonBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useState } from 'react'\nimport Repeat from './Repeat'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  transitionDuration?: number\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}>\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when\n * selected.\n *\n * @exports BurgerButtonBar - Component for each line on the burger button.\n */\nexport default forwardRef<HTMLButtonElement, BurgerButtonProps>(({\n  children,\n  className,\n  style,\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  transitionDuration = 200,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}, ref) => {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  const components = asComponentDict(children, {\n    bar: BurgerButtonBar,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames({\n      active: isActive,\n    }),\n    bar: classNames({\n      active: isActive,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      background: 'transparent',\n      border: 'none',\n      display: 'block',\n      height: `${height}px`,\n      outline: 'none',\n      width: `${width}px`,\n    },\n    joint: {\n      height: '100%',\n      position: 'absolute',\n      width: isDoubleJointed ? '50%' : '100%',\n    },\n    joint0: {\n      left: '0',\n      top: '0',\n    },\n    joint1: {\n      right: '0',\n      top: '0',\n    },\n    bar: {\n      height: `${thickness}px`,\n      margin: '0',\n      padding: '0',\n      position: 'absolute',\n      width: '100%',\n    },\n    bar00: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar01: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar02: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n      width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,\n    },\n    bar10: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n    },\n    bar11: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: 'left center',\n    },\n    bar12: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n      width: isLastBarHalfWidth && !isActive ? '0' : '100%',\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    bar: {\n      background: '#fff',\n      transitionDuration: '100ms',\n      transitionProperty: 'width, height, transform, opacity, background',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n      onClick={() => setIsActive(!isActive)}\n    >\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        {j => (\n          <div style={styles(fixedStyles.joint, (fixedStyles as any)[`joint${j}`])}>\n            <Repeat count={3}>\n              {i => cloneStyledElement(components.bar ?? <BurgerButtonBar style={defaultStyles.bar}/>, {\n                'className': classNames(fixedClassNames.bar),\n                'style': styles(fixedStyles.bar, (fixedStyles as any)[`bar${j}${i}`]),\n                'data-index': i,\n              })}\n            </Repeat>\n          </div>\n        )}\n      </Repeat>\n    </button>\n  )\n})\n\nexport const BurgerButtonBar = ({ ...props }: HTMLAttributes<HTMLSpanElement>) => <span {...props}/>\n"]}

package/lib/Conditional.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react';
-declare type Props = PropsWithChildren<{
+export declare type ConditionalProps = PropsWithChildren<{
     if: boolean | (() => boolean);
 }>;
-export default function Conditional({ children, if: boolOrExpression }: Props): JSX.Element;
-export {};
+export default function Conditional({ children, if: boolOrExpression }: ConditionalProps): JSX.Element;

package/lib/Conditional.js

@@ -12,7 +12,6 @@ function Conditional(_a) {
         case 'function':
             return boolOrExpression() ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(react_1.default.Fragment, null);
         default:
-            // eslint-disable-next-line no-console
             console.error("[etudes::Conditional] The type of provided condition ".concat(boolOrExpression, " is not supported."));
             return react_1.default.createElement(react_1.default.Fragment, null);
     }

package/lib/Conditional.js.map

@@ -1 +1 @@
-{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAgD;AAMhD,SAAwB,WAAW,CAAC,EAAyC;QAAvC,QAAQ,cAAA,EAAM,gBAAgB,QAAA;IAClE,QAAQ,OAAO,gBAAgB,EAAE;QACjC,KAAK,SAAS;YACZ,OAAO,gBAAgB,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACnD,KAAK,UAAU;YACb,OAAO,gBAAgB,EAAE,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACrD;YACE,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,+DAAwD,gBAAgB,uBAAoB,CAAC,CAAA;YAC3G,OAAO,6DAAK,CAAA;KACb;AACH,CAAC;AAXD,8BAWC","sourcesContent":["import React, { PropsWithChildren } from 'react'\n\ntype Props = PropsWithChildren<{\n  if: boolean | (() => boolean)\n}>\n\nexport default function Conditional({ children, if: boolOrExpression }: Props) {\n  switch (typeof boolOrExpression) {\n  case 'boolean':\n    return boolOrExpression ? <>{children}</> : <></>\n  case 'function':\n    return boolOrExpression() ? <>{children}</> : <></>\n  default:\n    // eslint-disable-next-line no-console\n    console.error(`[etudes::Conditional] The type of provided condition ${boolOrExpression} is not supported.`)\n    return <></>\n  }\n}\n"]}
+{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAgD;AAMhD,SAAwB,WAAW,CAAC,EAAoD;QAAlD,QAAQ,cAAA,EAAM,gBAAgB,QAAA;IAClE,QAAQ,OAAO,gBAAgB,EAAE;QAC/B,KAAK,SAAS;YACZ,OAAO,gBAAgB,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACnD,KAAK,UAAU;YACb,OAAO,gBAAgB,EAAE,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACrD;YACE,OAAO,CAAC,KAAK,CAAC,+DAAwD,gBAAgB,uBAAoB,CAAC,CAAA;YAE3G,OAAO,6DAAK,CAAA;KACf;AACH,CAAC;AAXD,8BAWC","sourcesContent":["import React, { PropsWithChildren } from 'react'\n\nexport type ConditionalProps = PropsWithChildren<{\n  if: boolean | (() => boolean)\n}>\n\nexport default function Conditional({ children, if: boolOrExpression }: ConditionalProps) {\n  switch (typeof boolOrExpression) {\n    case 'boolean':\n      return boolOrExpression ? <>{children}</> : <></>\n    case 'function':\n      return boolOrExpression() ? <>{children}</> : <></>\n    default:\n      console.error(`[etudes::Conditional] The type of provided condition ${boolOrExpression} is not supported.`)\n\n      return <></>\n  }\n}\n"]}

package/lib/DebugConsole.d.ts

@@ -1,25 +1,16 @@
-import React, { CSSProperties, PureComponent } from 'react';
-export interface Props {
-    className?: string;
-    style: CSSProperties;
-    margin: number;
-    maxEntries: number;
-    align: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
+import React, { HTMLAttributes } from 'react';
+export declare type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
+    align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
+    margin?: number;
+    maxEntries?: number;
     message?: string;
     title?: string;
-}
-export interface State {
-    messages: string[];
-}
-export default class DebugConsole extends PureComponent<Props, State> {
-    static defaultProps: Partial<Props>;
-    nodeRefs: {
-        messages: React.RefObject<HTMLDivElement>;
-    };
-    constructor(props: Props);
-    componentDidUpdate(prevProps: Props, prevState: State): void;
-    push(message: string): void;
-    clear(): void;
-    render(): JSX.Element;
-    private getStyleByAlignment;
-}
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    align?: "br" | "tr" | "tl" | "tc" | "cl" | "cc" | "cr" | "bl" | "bc" | undefined;
+    margin?: number | undefined;
+    maxEntries?: number | undefined;
+    message?: string | undefined;
+    title?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;