@wavv/ui 2.2.2-alpha.4 → 2.2.2-alpha.6

package/build/components/Table/Row.js

@@ -0,0 +1,84 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContext, useEffect } from "react";
+import { Row } from "react-aria-components";
+import mergePadding from "../helpers/mergePadding.js";
+import Cell from "./Cell.js";
+import Check from "./Check.js";
+import context from "./context.js";
+const Row_Row = ({ children, onClick, disabled, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest })=>{
+    const { setRowPadding, selectionMode } = useContext(context);
+    useEffect(()=>{
+        const values = padding ?? paddingTop ?? paddingRight ?? paddingBottom ?? paddingLeft;
+        if (null != values && setRowPadding) {
+            const paddingValues = mergePadding({
+                padding,
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft
+            });
+            setRowPadding(paddingValues);
+        }
+    }, [
+        padding,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        setRowPadding
+    ]);
+    const cellsToRender = selectionMode ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Cell, {
+                children: /*#__PURE__*/ jsx(Check, {
+                    slot: "selection"
+                })
+            }),
+            children
+        ]
+    }) : children;
+    return /*#__PURE__*/ jsx(TableRow, {
+        isDisabled: disabled,
+        onAction: onClick && !disabled ? onClick : void 0,
+        hoverEffect: !!onClick && !disabled,
+        ...rest,
+        children: cellsToRender
+    });
+};
+const TableRow = styled(Row)(({ theme, backgroundColor, isDisabled })=>({
+        color: theme.table.color.body,
+        fontSize: theme.font.size.sm,
+        wordBreak: 'break-word',
+        opacity: isDisabled ? 0.3 : void 0,
+        backgroundColor,
+        outline: 'none',
+        transition: 'background-color 0.2s',
+        position: 'relative'
+    }), ({ theme, hoverEffect })=>hoverEffect && {
+        '&:hover': {
+            backgroundColor: theme.scale1,
+            cursor: 'pointer'
+        },
+        '&:focus-visible': {
+            backgroundColor: theme.scale1
+        }
+    }, ({ theme, emphasis })=>{
+    let borderLeftColor;
+    if (true === emphasis) borderLeftColor = theme.color.brand;
+    else if ('string' == typeof emphasis) borderLeftColor = emphasis;
+    return {
+        height: '100%',
+        '& > td:first-of-type > div': {
+            borderLeft: '2px solid transparent',
+            borderLeftColor
+        },
+        '&:not(:first-of-type) > td > div': {
+            borderTop: `1px solid ${theme.table.borderColor}`
+        }
+    };
+}, ({ height })=>({
+        height
+    }));
+const Table_Row = Row_Row;
+export { Table_Row as default };

package/build/components/Table/SortCaret.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+const SortCaret = ({ sortDirection })=>{
+    const { color, scale4 } = useTheme();
+    const topColor = 'asc' === sortDirection ? color.brand : scale4;
+    const bottomColor = 'desc' === sortDirection ? color.brand : scale4;
+    return /*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M8.71005 14.71L11.3001 17.3C11.6901 17.69 12.3201 17.69 12.7101 17.3L15.3001 14.71C15.9301 14.08 15.4801 13 14.5901 13H9.41005C8.52005 13 8.08005 14.08 8.71005 14.71Z",
+                fill: bottomColor
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8.71005 8.88253L11.3001 6.29253C11.6901 5.90253 12.3201 5.90253 12.7101 6.29253L15.3001 8.88253C15.9301 9.51253 15.4801 10.5925 14.5901 10.5925H9.41005C8.52005 10.5925 8.08005 9.51253 8.71005 8.88253Z",
+                fill: topColor
+            })
+        ]
+    });
+};
+const Table_SortCaret = SortCaret;
+export { Table_SortCaret as default };

package/build/components/Table/Table.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { orderBy } from "es-toolkit/compat";
+import { isEqual } from "es-toolkit/predicate";
+import { useEffect, useMemo, useState } from "react";
+import { ResizableTableContainer, Table } from "react-aria-components";
+import { marginProps, paddingProps } from "../helpers/styledProps.js";
+import Body from "./Body.js";
+import Cell from "./Cell.js";
+import Column from "./Column.js";
+import context from "./context.js";
+import Header from "./Header.js";
+import Row from "./Row.js";
+const Table_Table = ({ children, data, backgroundColor, backgroundLevel, maxHeight, resizable, selectionMode, ...props })=>{
+    const [sorted, setSorted] = useState(data);
+    const [activeColumn, setActiveColumn] = useState();
+    const [headerPadding, setHeaderPadding] = useState();
+    const [rowPadding, setRowPadding] = useState();
+    const childrenToDisplay = data && 'function' == typeof children ? children(sorted) : children;
+    useEffect(()=>{
+        if (data) {
+            let newData = data;
+            if (activeColumn) {
+                const { key, dir } = activeColumn;
+                newData = orderBy(data, [
+                    key
+                ], [
+                    dir
+                ]);
+            }
+            if (!isEqual(newData, sorted)) setSorted(newData);
+        }
+    }, [
+        data,
+        activeColumn
+    ]);
+    const contextValue = useMemo(()=>({
+            activeColumn,
+            setActiveColumn,
+            headerPadding,
+            rowPadding,
+            setHeaderPadding,
+            setRowPadding,
+            selectionMode
+        }), [
+        activeColumn,
+        setActiveColumn,
+        headerPadding,
+        rowPadding,
+        setHeaderPadding,
+        setRowPadding,
+        selectionMode
+    ]);
+    return /*#__PURE__*/ jsx(context.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(TableContainer, {
+            as: resizable ? ResizableTableContainer : void 0,
+            backgroundColor: backgroundColor,
+            backgroundLevel: backgroundLevel,
+            maxHeight: maxHeight,
+            children: /*#__PURE__*/ jsx(TableEl, {
+                selectionMode: selectionMode,
+                ...props,
+                children: childrenToDisplay
+            })
+        })
+    });
+};
+Table_Table.Header = Header;
+Table_Table.Column = Column;
+Table_Table.Body = Body;
+Table_Table.Row = Row;
+Table_Table.Cell = Cell;
+const TableContainer = styled.div(({ theme, backgroundColor, maxHeight, backgroundLevel = 0 })=>({
+        overflow: 'auto',
+        position: 'relative',
+        width: '100%',
+        maxHeight: maxHeight || '100%',
+        borderRadius: 4,
+        backgroundColor: backgroundColor || theme.table.backgroundLevel[backgroundLevel]
+    }));
+const TableEl = styled(Table)({
+    height: 'fit-content',
+    width: '100%',
+    backgroundColor: 'inherit'
+}, marginProps, paddingProps);
+const components_Table_Table = Table_Table;
+export { components_Table_Table as default };

package/build/components/Table/contentStyles.js

@@ -0,0 +1,20 @@
+import { paddingProps } from "../helpers/styledProps.js";
+const getPosition = (position)=>{
+    if (!position) return;
+    return 'start' === position || 'end' === position ? `flex-${position}` : position;
+};
+const baseStyles = ({ direction, justify, align = 'center', gap = 8 })=>({
+        display: 'flex',
+        justifyContent: getPosition(justify),
+        alignItems: getPosition(align),
+        flexDirection: direction,
+        width: '100%',
+        height: '100%',
+        gap
+    });
+const contentStyles_contentStyles = [
+    baseStyles,
+    paddingProps
+];
+const contentStyles = contentStyles_contentStyles;
+export { contentStyles as default };

package/build/components/Table/context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const TableContext = createContext({});
+const context = TableContext;
+export { context as default };

package/build/components/Table/index.js

@@ -0,0 +1,2 @@
+import Table from "./Table.js";
+export { Table as default };

package/build/components/Tabs.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { createContext, useContext } from "react";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import { marginProps, maxWidthHeightProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+const TabsContext = /*#__PURE__*/ createContext({
+    detached: false,
+    panelPosition: 'bottom'
+});
+const TabsListContext = /*#__PURE__*/ createContext({});
+const Tabs_Tabs = ({ children, detached = false, panelPosition = 'bottom', disabled = false, ...props })=>/*#__PURE__*/ jsx(TabsContext.Provider, {
+        value: {
+            detached,
+            panelPosition
+        },
+        children: /*#__PURE__*/ jsx(Container, {
+            orientation: "horizontal",
+            isDisabled: disabled,
+            panelPosition: panelPosition,
+            ...props,
+            children: children
+        })
+    });
+const List = ({ tabWidth = 'fill', borderRadius, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, ...props })=>/*#__PURE__*/ jsx(TabsListContext.Provider, {
+        value: {
+            borderRadius,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingRight,
+            paddingLeft
+        },
+        children: /*#__PURE__*/ jsx(ListContainer, {
+            ...props,
+            tabWidth: tabWidth
+        })
+    });
+List.displayName = 'Tabs.List';
+const Item = ({ children, icon, iconColor, iconPosition = 'left', disabled, ...props })=>{
+    const { detached, panelPosition } = useContext(TabsContext);
+    const styleProps = useContext(TabsListContext);
+    return /*#__PURE__*/ jsxs(TabItem, {
+        ...props,
+        detached: detached,
+        isDisabled: disabled,
+        reverse: 'right' === iconPosition,
+        panelPosition: panelPosition,
+        ...styleProps,
+        children: [
+            icon && /*#__PURE__*/ jsx(Icon, {
+                name: icon,
+                size: "small",
+                color: iconColor
+            }),
+            children
+        ]
+    });
+};
+Item.displayName = 'Tabs.Item';
+const Panel = (props)=>{
+    const { detached, panelPosition } = useContext(TabsContext);
+    return /*#__PURE__*/ jsx(PanelContainer, {
+        ...props,
+        detached: detached,
+        panelPosition: panelPosition
+    });
+};
+Panel.displayName = 'Tabs.Panel';
+const Container = styled(Tabs)(marginProps, widthHeightProps, maxWidthHeightProps, ({ height, maxHeight, panelPosition })=>({
+        display: 'grid',
+        gridTemplateRows: 'top' === panelPosition ? '1fr auto' : 'auto 1fr',
+        '& > [role="tablist"]': {
+            order: 'top' === panelPosition ? 2 : 1
+        },
+        '& > [role="tabpanel"]': {
+            order: 'top' === panelPosition ? 1 : 2
+        },
+        overflow: height || maxHeight ? 'hidden' : void 0
+    }));
+const ListContainer = styled(TabList)(({ tabWidth })=>({
+        display: 'flex',
+        '& > *': {
+            flex: 'fill' === tabWidth ? 1 : 'initial'
+        }
+    }));
+const TabItem = styled(Tab)(({ theme, detached, reverse, gap = 8, panelPosition, borderRadius })=>{
+    const radius = borderRadius ?? 4;
+    return {
+        display: 'flex',
+        flexDirection: reverse ? 'row-reverse' : 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap,
+        backgroundColor: 'transparent',
+        padding: '8px 16px',
+        border: '1px solid',
+        borderColor: theme.scale0,
+        borderRadius: 0,
+        color: theme.scale6,
+        fontSize: theme.font.size.md,
+        fontWeight: theme.font.weight.medium,
+        cursor: 'pointer',
+        transition: 'all 0.2s linear',
+        '&:first-of-type': {
+            borderTopLeftRadius: 'bottom' === panelPosition ? radius : 0,
+            borderBottomLeftRadius: 'top' === panelPosition || detached ? radius : 0
+        },
+        '&:last-of-type': {
+            borderTopRightRadius: 'bottom' === panelPosition ? radius : 0,
+            borderBottomRightRadius: 'top' === panelPosition || detached ? radius : 0
+        },
+        '&[data-selected]': {
+            backgroundColor: theme.scale0,
+            color: theme.scale10,
+            borderColor: 'transparent'
+        },
+        '&:not([data-selected])[data-hovered]': {
+            backgroundColor: theme.scale1,
+            borderColor: 'transparent'
+        },
+        '&[data-disabled]': {
+            opacity: 0.5,
+            cursor: 'not-allowed'
+        },
+        '&[data-focused]': {
+            outline: 'none'
+        },
+        '&[data-focus-visible]': {
+            borderColor: theme.accent
+        }
+    };
+}, paddingProps);
+const PanelContainer = styled(TabPanel)(({ theme, detached, panelPosition })=>({
+        padding: detached ? void 0 : 16,
+        backgroundColor: detached ? void 0 : theme.scale0,
+        borderBottomLeftRadius: detached || 'top' === panelPosition ? void 0 : 4,
+        borderBottomRightRadius: detached || 'top' === panelPosition ? void 0 : 4,
+        borderTopLeftRadius: 'top' === panelPosition ? 4 : 0,
+        borderTopRightRadius: 'top' === panelPosition ? 4 : 0,
+        overflow: 'auto',
+        minHeight: 0,
+        '&[data-focused]': {
+            outline: 'none'
+        }
+    }));
+Tabs_Tabs.List = List;
+Tabs_Tabs.Item = Item;
+Tabs_Tabs.Panel = Panel;
+const components_Tabs = Tabs_Tabs;
+export { Item, List, Panel, components_Tabs as default };

package/build/components/Tag.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import getIcon from "./helpers/getIcon.js";
+import { marginProps, paddingProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+import Tooltip from "./Tooltip.js";
+const Tag = ({ children, id, value, iconLeft, iconRight, tooltip, removable, disabled, size = 'small', onRemove, ...props })=>{
+    const { scale10 } = useTheme();
+    const handleRemove = (key)=>{
+        if (onRemove) onRemove(key);
+    };
+    const content = children || value;
+    return /*#__PURE__*/ jsxs(Item, {
+        id: id,
+        disabled: disabled,
+        rightIcon: !!(iconRight || removable && !disabled),
+        removable: removable,
+        size: size,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 4,
+                size: 'small'
+            }),
+            tooltip ? /*#__PURE__*/ jsx(Tooltip, {
+                trigger: content,
+                zIndex: 100,
+                ...tooltip
+            }) : content,
+            removable && !disabled && /*#__PURE__*/ jsx(Icon, {
+                name: "close-circle",
+                size: "small",
+                marginLeft: 4,
+                pointer: true,
+                onClick: !disabled && id ? ()=>handleRemove(id) : void 0,
+                color: disabled ? void 0 : scale10
+            }),
+            iconRight && getIcon(iconRight, {
+                marginLeft: 4,
+                size: 'small'
+            })
+        ]
+    });
+};
+const Item = styled.div(({ theme, disabled, invalid, rightIcon, type, removable, size })=>{
+    const tag = theme.tag[type || 'default'];
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        width: 'max-content',
+        color: disabled || invalid ? theme.scale4 : theme.scale10,
+        cursor: 'default',
+        fontSize: theme.font.size.sm,
+        fontWeight: theme.font.weight.medium,
+        fontFamily: theme.font.family.default,
+        borderRadius: 40,
+        padding: `${'small' === size ? 2 : 4}px ${theme.size.sm}px`,
+        paddingRight: rightIcon ? theme.size.xs : void 0,
+        backgroundColor: disabled || invalid ? tag.backgroundDisabled : tag.background,
+        '&:hover': {
+            backgroundColor: disabled || invalid || !removable ? void 0 : tag.backgroundHover
+        },
+        '&:focus-visible': {
+            outline: `${theme.accent} solid 1px`,
+            outlineOffset: -1
+        }
+    };
+}, marginProps, paddingProps);
+const components_Tag = Tag;
+export { components_Tag as default };

package/build/components/Toggle.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import ToggleOff from "../assets/icons/ToggleOff.js";
+import ToggleOn from "../assets/icons/ToggleOn.js";
+import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
+import Icon from "./Icon/index.js";
+const Toggle = ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props })=>{
+    const [on, setOn] = useState(checked || false);
+    const labelRight = 'right' === labelPosition;
+    const marginProps = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    };
+    const handleChange = ()=>{
+        const value = !on;
+        setOn(value);
+        onChange(value);
+    };
+    useEffect(()=>{
+        const checkedSet = 'boolean' == typeof checked;
+        const value = checkedSet ? checked : on;
+        setOn(value);
+    }, [
+        checked,
+        on
+    ]);
+    return /*#__PURE__*/ jsxs(ControlContainer, {
+        htmlFor: id,
+        labelRight: labelRight,
+        disabled: disabled,
+        ...marginProps,
+        children: [
+            label && /*#__PURE__*/ jsx(ControlLabel, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(ControlInput, {
+                id: id,
+                type: "checkbox",
+                checked: on,
+                disabled: disabled,
+                onChange: handleChange,
+                ...props
+            }),
+            /*#__PURE__*/ jsx(Icon, {
+                svg: on ? /*#__PURE__*/ jsx(ToggleOn, {}) : /*#__PURE__*/ jsx(ToggleOff, {}),
+                marginLeft: label && !labelRight ? 8 : 0,
+                marginRight: label && labelRight ? 8 : 0,
+                pointer: !disabled,
+                width: 34,
+                height: 17
+            })
+        ]
+    });
+};
+const components_Toggle = Toggle;
+export { components_Toggle as default };

package/build/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,104 @@
+import { jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import { ToggleButton } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import { marginProps, paddingProps } from "../helpers/styledProps.js";
+import { ToggleContext } from "./context.js";
+const ToggleButton_ToggleButton_ToggleButton = ({ children, disabled, size, positive, negative, caution, secondary, iconLeft, iconRight, borderRadius, ...props })=>{
+    const { type, joined, size: toggleSize, height } = useContext(ToggleContext);
+    const { button } = useTheme();
+    const { iconSize } = button[size || toggleSize];
+    const positiveStyle = positive || 'positive' === type;
+    const negativeStyle = negative || 'negative' === type;
+    const cautionStyle = caution || 'caution' === type;
+    const secondaryStyle = secondary || 'secondary' === type;
+    return /*#__PURE__*/ jsxs(Button, {
+        isDisabled: disabled || 'disabled' === type,
+        positive: positiveStyle,
+        negative: negativeStyle,
+        caution: cautionStyle,
+        secondary: secondaryStyle,
+        borderRadius: borderRadius,
+        joined: joined,
+        size: size || toggleSize,
+        height: height,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                size: iconSize
+            }),
+            children,
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            })
+        ]
+    });
+};
+const Button = styled(ToggleButton)(({ theme, secondary, negative, positive, caution, isDisabled, joined, borderRadius, size, height })=>{
+    let buttonType = 'primary';
+    if (secondary) buttonType = 'secondary';
+    if (negative) buttonType = 'negative';
+    if (positive) buttonType = 'positive';
+    if (caution) buttonType = 'caution';
+    if (isDisabled) buttonType = 'disabled';
+    const sizeStyle = theme.button[size || 'small'];
+    const style = theme.button[buttonType];
+    const background = style.outlineBackground.default;
+    const backgroundHover = style.outlineBackground.hover;
+    const backgroundActive = style.outlineBackground.active;
+    const borderColor = style.border.default;
+    const color = style.outlineColor.default;
+    const colorHover = style.outlineColor.hover;
+    const colorActive = style.outlineColor.active;
+    const buttonHeight = height || sizeStyle.height;
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        height: joined ? buttonHeight : height || '100%',
+        border: `1px solid ${borderColor}`,
+        background,
+        color,
+        padding: joined ? `0px ${sizeStyle.padding}px` : sizeStyle.padding,
+        borderRadius: borderRadius || 8,
+        cursor: 'pointer',
+        fontSize: sizeStyle.font,
+        fontFamily: theme.font.family.default,
+        fontWeight: theme.font.weight.bold,
+        '&[data-hovered]': {
+            background: backgroundHover,
+            color: colorHover
+        },
+        '&[data-pressed], &[data-selected]': {
+            background: backgroundActive,
+            color: colorActive
+        },
+        '&[data-focus-visible]': {
+            outline: `${theme.accent} solid 1px`
+        },
+        '&[data-disabled]': {
+            cursor: 'not-allowed',
+            background: theme.button.disabled.outlineBackground.default,
+            borderColor: theme.button.disabled.border.default,
+            color: theme.button.disabled.outlineColor.default
+        },
+        ...joined ? {
+            borderRadius: borderRadius || 30,
+            '&:not(:first-of-type)': {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 'none'
+            },
+            '&:not(:last-of-type)': {
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                borderRight: `1px solid ${borderColor}`
+            }
+        } : {}
+    };
+}, marginProps, paddingProps);
+const ToggleButton_ToggleButton = ToggleButton_ToggleButton_ToggleButton;
+export { ToggleButton_ToggleButton as default };

package/build/components/ToggleButton/ToggleButtonGroup.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { ToggleButtonGroup } from "react-aria-components";
+import { marginProps, paddingProps } from "../helpers/styledProps.js";
+import { ToggleContext } from "./context.js";
+const ToggleButtonGroup_ToggleButtonGroup = ({ disabled, secondary, negative, positive, caution, joined, gap, size = 'small', height, ...props })=>{
+    let buttonType = 'primary';
+    if (secondary) buttonType = 'secondary';
+    if (negative) buttonType = 'negative';
+    if (positive) buttonType = 'positive';
+    if (caution) buttonType = 'caution';
+    if (disabled) buttonType = 'disabled';
+    return /*#__PURE__*/ jsx(ToggleContext.Provider, {
+        value: {
+            type: buttonType,
+            joined,
+            size,
+            height
+        },
+        children: /*#__PURE__*/ jsx(ButtonGroup, {
+            ...props,
+            isDisabled: disabled,
+            gap: joined ? 0 : gap
+        })
+    });
+};
+const ButtonGroup = styled(ToggleButtonGroup)(({ gap = 8, width })=>({
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridAutoColumns: '1fr',
+        alignItems: 'center',
+        gap,
+        width
+    }), marginProps, paddingProps);
+const ToggleButton_ToggleButtonGroup = ToggleButtonGroup_ToggleButtonGroup;
+export { ToggleButton_ToggleButtonGroup as default };

package/build/components/ToggleButton/context.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const ToggleContext = createContext({
+    type: 'primary',
+    joined: false,
+    size: 'small',
+    height: void 0
+});
+export { ToggleContext };

package/build/components/ToggleButton/index.js

@@ -0,0 +1,3 @@
+import ToggleButton from "./ToggleButton.js";
+import ToggleButtonGroup from "./ToggleButtonGroup.js";
+export { ToggleButton, ToggleButtonGroup };