etudes 5.3.1 → 6.1.0

package/components/Accordion.d.ts

@@ -0,0 +1,209 @@
+import { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
+import { type CollectionItemProps, type CollectionOrientation, type CollectionProps, type CollectionSelectionMode } from './Collection.js';
+import type { DropdownToggleProps } from './Dropdown.js';
+/**
+ * Type describing the current item selection of {@link Accordion}, composed of
+ * a dictionary whose key corresponds the section index and value corresponds to
+ * an array of selected item indices. If the selection mode of the
+ * {@link Accordion} is `single`, only one key will be present and one index in
+ * the array value.
+ */
+export type AccordionSelection = Record<number, number[]>;
+/**
+ * Type describing the data of each section in {@link Accordion}.
+ */
+export type AccordionSection<T> = Pick<CollectionProps<T>, 'isSelectionTogglable' | 'itemLength' | 'itemPadding' | 'items' | 'layout' | 'numSegments'> & {
+    /**
+     * Padding (in pixels) between the sectionheader and the internal collection.
+     */
+    collectionPadding?: number;
+    /**
+     * Label for the section header.
+     */
+    label: string;
+    /**
+     * Maximum number of visible rows (if section orientation is `vertical`) or
+     * columns (if section orientation is `horizontal`). If number of rows exceeds
+     * the number of visible, a scrollbar will be put in place.
+     */
+    maxVisible?: number;
+};
+/**
+ * Type describing the props of each `ItemComponent` provided to
+ * {@link Accordion}.
+ */
+export type AccordionItemProps<T> = CollectionItemProps<T>;
+/**
+ * Type describing the props of each `HeaderComponent` provided to
+ * {@link Accordion}.
+ */
+export type AccordionHeaderProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
+    /**
+     * The index of the corresponding section.
+     */
+    index: number;
+    /**
+     * Indicates whether the corresponding section is collapsed.
+     */
+    isCollapsed: boolean;
+    /**
+     * Data provided to the corresponding section.
+     */
+    section: S;
+    /**
+     * Handler invoked to dispatch a custom event.
+     *
+     * @param name User-defined name of the custom event.
+     * @param info Optional user-defined info of the custom event.
+     */
+    onCustomEvent?: (name: string, info?: any) => void;
+}>;
+/**
+ * Type describing the props of {@link Accordion}.
+ */
+export type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+    /**
+     * Specifies if expanded sections should automatically collapse upon expanding
+     * another section.
+     */
+    autoCollapseSections?: boolean;
+    /**
+     * Indices of sections that are expanded. If specified, the component will not
+     * manage expansion states.
+     */
+    expandedSectionIndices?: number[];
+    /**
+     * Orientation of this component.
+     *
+     * @see {@link CollectionOrientation}
+     */
+    orientation?: CollectionOrientation;
+    /**
+     * Padding (in pixels) between each section.
+     */
+    sectionPadding?: number;
+    /**
+     * Data provided to each section.
+     */
+    sections: S[];
+    /**
+     * Indices of selected items per section.
+     *
+     * @see {@link AccordionSelection}
+     */
+    selection?: AccordionSelection;
+    /**
+     * Selection mode of each section.
+     *
+     * @see {@link CollectionSelectionMode}
+     */
+    selectionMode?: CollectionSelectionMode;
+    /**
+     * Handler invoked when an item is activated in a section. The order of
+     * handlers invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     */
+    onActivateAt?: (itemIndex: number, sectionIndex: number) => void;
+    /**
+     * Handler invoked when a section is collapsed. The order of handlers invoked
+     * when any section expansion changes take place is:
+     *   1. `onCollapseSectionAt`
+     *   2. `onExpandSectionAt`
+     *
+     * @param sectionIndex Section index.
+     */
+    onCollapseSectionAt?: (sectionIndex: number) => void;
+    /**
+     * Handler invoked when an item is deselected in a section. The order of
+     * handlers invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     */
+    onDeselectAt?: (itemIndex: number, sectionIndex: number) => void;
+    /**
+     * Handler invoked when the expansion state of any section changes.
+     *
+     * @param expandedSectionIndices Indices of sections that are expanded.
+     */
+    onExpandedSectionsChange?: (expandedSectionIndices: number[]) => void;
+    /**
+     * Handler invoked when a section is expanded. The order of handlers invoked
+     * when any section expansion changes take place is:
+     *   1. `onCollapseSectionAt`
+     *   2. `onExpandSectionAt`
+     *
+     * @param sectionIndex Section index.
+     */
+    onExpandSectionAt?: (sectionIndex: number) => void;
+    /**
+     * Handler invoked when a custom event is dispatched from a section header.
+     *
+     * @param sectionIndex Index of the section which the header belongs.
+     * @param eventName User-defined name of the dispatched event.
+     * @param eventInfo Optional user-defined info of the dispatched event.
+     */
+    onHeaderCustomEvent?: (sectionIndex: number, eventName: string, eventInfo?: any) => void;
+    /**
+     * Handler invoked when a custom event is dispatched from an item.
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     * @param eventName User-defined name of the dispatched event.
+     * @param eventInfo Optional user-defined info of the dispatched event.
+     */
+    onItemCustomEvent?: (itemIndex: number, sectionIndex: number, eventName: string, eventInfo?: any) => void;
+    /**
+     * Handler invoked when an item is selected in a section. The order of
+     * handlers invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     */
+    onSelectAt?: (itemIndex: number, sectionIndex: number) => void;
+    /**
+     * Handler invoked when selected items have changed. The order of handlers
+     * invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param selectedIndices Dictionary of indices of selected items per section.
+     */
+    onSelectionChange?: (selection: AccordionSelection) => void;
+    /**
+     * Component type for generating section headers inside the component. When
+     * absent, one will be generated automatically.
+     */
+    HeaderComponent?: ComponentType<AccordionHeaderProps<I, S>>;
+    /**
+     * Component type for generating items for each section.
+     */
+    ItemComponent?: ComponentType<AccordionItemProps<I>>;
+}>;
+/**
+ * A collection of selectable items laid out in sections in an accordion. Items
+ * are generated based on the provided `ItemComponent` while each section header
+ * is optionally provided by `HeaderComponent` or generated automatically.
+ */
+export declare const Accordion: <I, S extends AccordionSection<I> = AccordionSection<I>>(props: AccordionProps<I, S> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+export declare const AccordionHeader: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren<DropdownToggleProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/components/Accordion.js

@@ -1,17 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import isDeepEqual from 'fast-deep-equal/react';
 import { forwardRef, useEffect, useRef } from 'react';
 import { Each } from '../operators/Each.js';
-import { asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+import { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
 import { Collection } from './Collection.js';
-import { FlatSVG } from './FlatSVG.js';
 /**
  * A collection of selectable items laid out in sections in an accordion. Items
  * are generated based on the provided `ItemComponent` while each section header
  * is optionally provided by `HeaderComponent` or generated automatically.
  */
-export const Accordion = forwardRef(({ children, style, autoCollapseSections = false, collapseIconSvg, expandedSectionIndices: externalExpandedSectionIndices, expandIconSvg, orientation = 'vertical', sectionPadding = 0, sections, selection: externalSelection, selectionMode = 'single', usesDefaultStyles = false, onActivateAt, onCollapseSectionAt, onDeselectAt, onExpandedSectionsChange, onExpandSectionAt, onHeaderCustomEvent, onItemCustomEvent, onSelectAt, onSelectionChange, HeaderComponent, ItemComponent, ...props }, ref) => {
+export const Accordion = forwardRef(({ children, style, autoCollapseSections = false, expandedSectionIndices: externalExpandedSectionIndices, orientation = 'vertical', sectionPadding = 0, sections, selection: externalSelection, selectionMode = 'single', onActivateAt, onCollapseSectionAt, onDeselectAt, onExpandedSectionsChange, onExpandSectionAt, onHeaderCustomEvent, onItemCustomEvent, onSelectAt, onSelectionChange, HeaderComponent, ItemComponent, ...props }, ref) => {
     const isSectionIndexOutOfRange = (sectionIndex) => {
         if (sectionIndex >= sections.length)
             return true;
@@ -119,51 +118,63 @@ export const Accordion = forwardRef(({ children, style, autoCollapseSections = f
     const selection = sanitizeSelection(externalSelection ?? {});
     const expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices ?? []);
     const fixedStyles = getFixedStyles({ orientation });
-    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined;
     const prevSelectionRef = useRef();
     const prevSelection = prevSelectionRef.current;
+    const components = asComponentDict(children, {
+        collapseIcon: AccordionCollapseIcon,
+        expandIcon: AccordionExpandIcon,
+        header: AccordionHeader,
+    });
     useEffect(() => {
         prevSelectionRef.current = selection;
         if (prevSelection === undefined)
             return;
         handleSelectionChange(prevSelection, selection);
     }, [JSON.stringify(selection)]);
-    return (_jsx("div", { ...props, ref: ref, "data-component": 'accordion', style: styles(style, fixedStyles.root), children: _jsx(Each, { in: sections, children: (section, sectionIndex) => {
+    return (_jsx("div", { ...props, ref: ref, style: styles(style, fixedStyles.root), children: _jsx(Each, { in: sections, children: (section, sectionIndex) => {
                 const { collectionPadding = 0, items, itemLength = 50, itemPadding = 0, isSelectionTogglable, layout = 'list', maxVisible = -1, numSegments = 1 } = section;
                 const allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments);
                 const numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible);
                 const maxLength = itemLength * numVisible + itemPadding * (numVisible - 1);
                 const isCollapsed = !isSectionExpandedAt(sectionIndex);
-                const expandIconComponent = expandIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.expandIcon, svg: expandIconSvg }) : _jsx(_Fragment, {});
-                const collapseIconComponent = collapseIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.collapseIcon, svg: collapseIconSvg }) : expandIconComponent;
                 return (_jsxs("div", { style: styles(fixedStyles.section, orientation === 'vertical' ? {
                         marginTop: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
                     } : {
                         marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
-                    }), children: [HeaderComponent ? (_jsx(HeaderComponent, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', index: sectionIndex, isCollapsed: isCollapsed, section: section, style: styles(fixedStyles.header), onClick: () => toggleSectionAt(sectionIndex), onCustomEvent: (name, info) => onHeaderCustomEvent?.(sectionIndex, name, info) })) : (_jsxs("button", { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', style: styles(fixedStyles.header, defaultStyles?.header), onClick: () => toggleSectionAt(sectionIndex), children: [_jsx("span", { dangerouslySetInnerHTML: { __html: section.label }, style: styles(defaultStyles?.headerLabel) }), cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {
-                                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
-                                })] })), _jsx(Collection, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection[sectionIndex] ?? [], selectionMode: selectionMode, style: styles(fixedStyles.list, defaultStyles?.collection, orientation === 'vertical' ? {
+                    }), children: [HeaderComponent ? (_jsx(HeaderComponent, { "aria-expanded": !isCollapsed, className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), index: sectionIndex, isCollapsed: isCollapsed, role: 'button', section: section, style: styles(fixedStyles.header), onClick: () => toggleSectionAt(sectionIndex), onCustomEvent: (name, info) => onHeaderCustomEvent?.(sectionIndex, name, info) })) : (cloneStyledElement(components.header ?? _jsx(AccordionHeader, {}), {
+                            'aria-expanded': !isCollapsed,
+                            'className': clsx({ collapsed: isCollapsed, expanded: !isCollapsed }),
+                            'style': styles(fixedStyles.header),
+                            'role': 'button',
+                            'onClick': () => toggleSectionAt(sectionIndex),
+                        }, _jsx("span", { dangerouslySetInnerHTML: { __html: section.label } }), isCollapsed ? components.collapseIcon ?? components.expandIcon : components.expandIcon)), _jsx("div", { hidden: isCollapsed, role: 'region', style: styles(orientation === 'vertical' ? {
                                 width: '100%',
-                                height: isCollapsed ? '0px' : `${maxLength}px`,
-                                marginTop: isCollapsed ? '0px' : `${collectionPadding}px`,
+                                height: isCollapsed ? '0' : `${maxLength}px`,
+                                marginTop: isCollapsed ? '0' : `${collectionPadding}px`,
                                 overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
                             } : {
-                                marginLeft: isCollapsed ? '0px' : `${collectionPadding}px`,
+                                marginLeft: isCollapsed ? '0' : `${collectionPadding}px`,
                                 overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
-                                width: isCollapsed ? '0px' : `${maxLength}px`,
+                                width: isCollapsed ? '0' : `${maxLength}px`,
                                 height: '100%',
-                            }), onActivateAt: itemIndex => {
-                                onActivateAt?.(itemIndex, sectionIndex);
-                            }, onDeselectAt: itemIndex => {
-                                handleDeselectAt?.(itemIndex, sectionIndex);
-                            }, onItemCustomEvent: (itemIndex, name, info) => {
-                                onItemCustomEvent?.(itemIndex, sectionIndex, name, info);
-                            }, onSelectAt: itemIndex => {
-                                handleSelectAt?.(itemIndex, sectionIndex);
-                            } })] }));
+                            }), children: _jsx(Collection, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection[sectionIndex] ?? [], selectionMode: selectionMode, style: styles(orientation === 'vertical' ? {
+                                    width: '100%',
+                                } : {
+                                    height: '100%',
+                                }), onActivateAt: itemIndex => {
+                                    onActivateAt?.(itemIndex, sectionIndex);
+                                }, onCustomEvent: (itemIndex, name, info) => {
+                                    onItemCustomEvent?.(itemIndex, sectionIndex, name, info);
+                                }, onDeselectAt: itemIndex => {
+                                    handleDeselectAt?.(itemIndex, sectionIndex);
+                                }, onSelectAt: itemIndex => {
+                                    handleSelectAt?.(itemIndex, sectionIndex);
+                                } }) })] }));
             } }) }));
 });
-Object.defineProperty(Accordion, 'displayName', { value: 'Accordion', writable: false });
+export const AccordionHeader = ({ children, ...props }) => (_jsx("button", { ...props, children: children }));
+export const AccordionExpandIcon = ({ children, ...props }) => (_jsx("figure", { ...props, children: children }));
+export const AccordionCollapseIcon = ({ children, ...props }) => (_jsx("figure", { ...props, children: children }));
 function sortIndices(indices) {
     return indices.sort((a, b) => a - b);
 }
@@ -199,7 +210,6 @@ function getFixedStyles({ orientation = 'vertical' }) {
                 height: '100%',
             },
         },
-        list: {},
         header: {
             cursor: 'pointer',
             margin: '0',
@@ -209,77 +219,6 @@ function getFixedStyles({ orientation = 'vertical' }) {
                 height: '100%',
             },
         },
-        expandIcon: {
-            margin: '0',
-            padding: '0',
-        },
-        collapseIcon: {
-            margin: '0',
-            padding: '0',
-        },
-    });
-}
-function getDefaultStyles({ orientation = 'vertical' }) {
-    return asStyleDict({
-        collection: {
-            transitionDuration: '100ms',
-            transitionTimingFunction: 'ease-out',
-            ...orientation === 'vertical' ? {
-                transitionProperty: 'height, margin',
-            } : {
-                transitionProperty: 'width, margin',
-            },
-        },
-        header: {
-            border: 'none',
-            outline: 'none',
-            alignItems: 'center',
-            background: '#fff',
-            boxSizing: 'border-box',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            padding: '0 10px',
-            transitionDuration: '100ms',
-            transitionProperty: 'transform, opacity, background, color',
-            transitionTimingFunction: 'ease-out',
-            ...orientation === 'vertical' ? {
-                height: '50px',
-            } : {
-                width: '50px',
-            },
-        },
-        headerLabel: {
-            color: 'inherit',
-            fontFamily: 'inherit',
-            fontSize: 'inherit',
-            fontWeight: 'inherit',
-            letterSpacing: 'inherit',
-            lineHeight: 'inherit',
-            pointerEvents: 'none',
-            transition: 'inherit',
-        },
-        expandIcon: {
-            boxSizing: 'border-box',
-            display: 'block',
-            fill: '#000',
-            height: '15px',
-            transformOrigin: 'center',
-            transitionDuration: '100ms',
-            transitionProperty: 'transform',
-            transitionTimingFunction: 'ease-out',
-            width: '15px',
-        },
-        collapseIcon: {
-            boxSizing: 'border-box',
-            display: 'block',
-            fill: '#000',
-            height: '15px',
-            transformOrigin: 'center',
-            transitionDuration: '100ms',
-            transitionProperty: 'transform',
-            transitionTimingFunction: 'ease-out',
-            width: '15px',
-        },
     });
 }
+Object.defineProperty(Accordion, 'displayName', { value: 'Accordion', writable: false });

package/components/BurgerButton.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
+    isActive?: boolean;
+    isSplit?: boolean;
+    isTailHidden?: boolean;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+    onToggle?: (isActive: boolean) => void;
+}>;
+/**
+ * Three-striped burger button component that transforms into an "X" when
+ * selected.
+ *
+ * @exports BurgerButtonBar Component for each bar in the burger button.
+ */
+export declare const BurgerButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    isActive?: boolean;
+    isSplit?: boolean;
+    isTailHidden?: boolean;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+    onToggle?: (isActive: boolean) => void;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const BurgerButtonBar: ({ ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/components/BurgerButton.js

@@ -1,29 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef } from 'react';
 import { Repeat } from '../operators/Repeat.js';
 import { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
 /**
  * Three-striped burger button component that transforms into an "X" when
  * selected.
  *
- * @exports BurgerButtonBar Component for each line on the burger button.
+ * @exports BurgerButtonBar Component for each bar in the burger button.
  */
-export const BurgerButton = forwardRef(({ children, className, style, height = 20, isActive: externalIsActive = false, isDoubleJointed = false, isLastBarHalfWidth = false, thickness = 2, transitionDuration = 200, usesDefaultStyles = false, width = 20, onActivate, onDeactivate, ...props }, ref) => {
-    const [isActive, setIsActive] = useState(externalIsActive);
-    useEffect(() => {
-        if (isActive === externalIsActive)
-            return;
-        setIsActive(externalIsActive);
-    }, [externalIsActive]);
-    useEffect(() => {
+export const BurgerButton = forwardRef(({ children, className, style, isActive = false, isTailHidden = false, isSplit = false, onActivate, onDeactivate, onToggle, ...props }, ref) => {
+    const onClick = () => {
+        onToggle?.(isActive);
         if (isActive) {
-            onActivate?.();
+            onDeactivate?.();
         }
         else {
-            onDeactivate?.();
+            onActivate?.();
         }
-    }, [isActive]);
+    };
     const components = asComponentDict(children, {
         bar: BurgerButtonBar,
     });
@@ -35,30 +30,26 @@ export const BurgerButton = forwardRef(({ children, className, style, height = 2
             active: isActive,
         }),
     });
-    const fixedStyles = getFixedStyles({ height, width, isDoubleJointed, thickness, isActive, isLastBarHalfWidth });
-    const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
-    return (_jsx("button", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'burger-button', style: styles(style, fixedStyles.root), onClick: () => setIsActive(!isActive), children: _jsx(Repeat, { count: isDoubleJointed ? 2 : 1, children: j => (_jsx("div", { "data-child": 'joint', style: styles(fixedStyles.joint, fixedStyles[`joint${j}`]), children: _jsx(Repeat, { count: 3, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerButtonBar, { style: defaultStyles?.bar }), {
+    const fixedStyles = getFixedStyles({ isSplit, isActive, isTailHidden });
+    return (_jsx("button", { ...props, ref: ref, "aria-expanded": isActive, className: clsx(className, fixedClassNames.root), style: styles(style, fixedStyles.root), onClick: onClick, children: _jsx(Repeat, { count: isSplit ? 2 : 1, children: j => (_jsx("div", { "aria-hidden": true, style: styles(fixedStyles.section, fixedStyles[`section${j}`]), children: _jsx(Repeat, { count: 3, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerButtonBar, {}), {
+                        'aria-hidden': true,
                         'className': clsx(fixedClassNames.bar),
                         'style': styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]),
-                        'data-index': i,
                     }) }) })) }) }));
 });
-Object.defineProperty(BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
-export const BurgerButtonBar = ({ ...props }) => _jsx("span", { ...props, "data-child": 'bar' });
-function getFixedStyles({ height = 0, width = 0, isDoubleJointed = false, thickness = 0, isActive = false, isLastBarHalfWidth = false }) {
+export const BurgerButtonBar = ({ ...props }) => (_jsx("span", { ...props }));
+function getFixedStyles({ isActive = false, isSplit = false, isTailHidden = false }) {
     return asStyleDict({
         root: {
             background: 'transparent',
             border: 'none',
             display: 'block',
-            height: `${height}px`,
             outline: 'none',
-            width: `${width}px`,
         },
-        joint: {
+        section: {
             height: '100%',
             position: 'absolute',
-            width: isDoubleJointed ? '50%' : '100%',
+            width: isSplit ? '50%' : '100%',
         },
         joint0: {
             left: '0',
@@ -69,7 +60,6 @@ function getFixedStyles({ height = 0, width = 0, isDoubleJointed = false, thickn
             top: '0',
         },
         bar: {
-            height: `${thickness}px`,
             margin: '0',
             padding: '0',
             position: 'absolute',
@@ -77,51 +67,42 @@ function getFixedStyles({ height = 0, width = 0, isDoubleJointed = false, thickn
         },
         bar00: {
             left: '0',
-            top: '0',
-            transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
-            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+            top: isActive ? '50%' : '0',
+            transform: isActive ? 'translate(0, -50%) rotate(45deg)' : 'translate(0, 0) rotate(0deg)',
+            transformOrigin: isSplit ? 'right center' : 'center',
         },
         bar01: {
             left: '0',
-            top: `${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',
+            top: '50%',
+            transform: isActive ? 'translate(0, -50%) scale(0)' : 'translate(0, -50%) scale(1)',
+            transformOrigin: isSplit ? 'right center' : 'center',
         },
         bar02: {
             left: '0',
-            top: `${height - thickness}px`,
-            transform: isActive ? `translate3d(0, ${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%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,
+            top: isActive ? '50%' : '100%',
+            transform: isActive ? 'translate(0, -50%) rotate(-45deg)' : 'translate(0, -100%) rotate(0deg)',
+            transformOrigin: isSplit ? 'right center' : 'center',
+            width: isActive || isSplit ? '100%' : `${isTailHidden ? '50%' : '100%'}`,
         },
         bar10: {
             left: '0',
-            top: '0',
-            transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
+            top: isActive ? '50%' : '0',
+            transform: isActive ? 'translate(0, -50%) rotate(-45deg)' : 'translate(0, 0) rotate(0deg)',
             transformOrigin: 'left center',
         },
         bar11: {
             left: '0',
-            top: `${height * 0.5 - thickness * 0.5}px`,
-            transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
+            top: '50%',
+            transform: isActive ? 'translate(0, -50%) scale(0)' : 'translate(0, -50%) scale(1)',
             transformOrigin: 'left center',
         },
         bar12: {
             left: '0',
-            top: `${height - thickness}px`,
-            transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
+            top: isActive ? '50%' : '100%',
+            transform: isActive ? 'translate(0, -50%) rotate(45deg)' : 'translate(0, -100%) rotate(0deg)',
             transformOrigin: 'left center',
-            width: isLastBarHalfWidth && !isActive ? '0' : '100%',
-        },
-    });
-}
-function getDefaultStyles() {
-    return asStyleDict({
-        bar: {
-            background: '#fff',
-            transitionDuration: '100ms',
-            transitionProperty: 'width, height, transform, opacity, background',
-            transitionTimingFunction: 'ease-out',
+            width: isTailHidden && !isActive ? '0' : '100%',
         },
     });
 }
+Object.defineProperty(BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });

package/components/Button.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ButtonProps = HTMLAttributes<HTMLElement> & PropsWithChildren<{
+    href?: string;
+    isDisabled?: boolean;
+    label?: string;
+    opensInNewTab?: boolean;
+    to?: string;
+    type?: HTMLButtonElement['type'];
+}>;
+export declare function Button({ children, className, href, isDisabled, label, opensInNewTab, to, type, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/components/Button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+export function Button({ children, className, href, isDisabled = false, label, opensInNewTab, to, type, ...props }) {
+    if (href) {
+        return (_jsx("a", { ...props, "aria-disabled": isDisabled, "aria-label": label, className: clsx(className, { disabled: isDisabled }), href: href, rel: opensInNewTab ? 'noopener,noreferrer' : undefined, target: opensInNewTab ? '_blank' : undefined, children: children ?? label }));
+    }
+    else if (to) {
+        return (_jsx(Link, { ...props, "aria-disabled": isDisabled, "aria-label": label, className: clsx(className, { disabled: isDisabled }), to: to, children: children ?? label }));
+    }
+    else {
+        return (_jsx("button", { ...props, "aria-disabled": isDisabled, "aria-label": label, className: className, disabled: isDisabled, type: type, children: children ?? label }));
+    }
+}
+Object.defineProperty(Button, 'displayName', { value: 'Button', writable: false });