@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.0

package/src/components/SimpleButton/index.js

@@ -3,23 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const icons_1 = require("../icons");
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
-const theme_1 = tslib_1.__importDefault(require("../../theme"));
 const Icon_1 = require("../Icon");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twUtils_1 = require("../twUtils");
 exports.baseClassName = 'ab-SimpleButton';
-const defaultProps = {
-    px: null,
-    py: null,
-    fontWeight: 'normal',
-    m: null,
-    //@ts-ignore
-    borderRadius: null,
-};
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
-    const props = { ...defaultProps, ...givenProps };
+    const props = { ...givenProps };
     let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type, ...buttonProps } = props;
     let adaptableSystemIcon;
     if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
@@ -79,17 +71,57 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     if (accessLevel === 'ReadOnly') {
         disabled = true;
     }
-    // for whatever reason, even if fontWeight is present in buttonProps
-    // and sent to rebass, styled-components/rebass does not honour it
-    // so we had to send it via css
-    const fontWeight = buttonProps.fontWeight
-        ? theme_1.default[buttonProps.fontWeight] ?? buttonProps.fontWeight ?? 'normal'
-        : 'normal';
-    const btn = (React.createElement(rebass_1.Button, { ...buttonProps, "aria-label": buttonProps['aria-label'] ||
-            buttonProps.label ||
-            tooltip ||
-            buttonProps.title ||
-            `${buttonProps.key}`, disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '', fontWeight ? `${exports.baseClassName}--font-weight=${fontWeight}` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`), ref: theRef }, children));
+    const ariaLabel = buttonProps['aria-label'] ||
+        buttonProps.label ||
+        tooltip ||
+        buttonProps.title ||
+        `${buttonProps.key}`;
+    const extraButtonProps = {};
+    if (ariaLabel != null && ariaLabel !== '') {
+        extraButtonProps['aria-label'] = ariaLabel;
+    }
+    const btn = (React.createElement(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, clsx_1.default)(exports.baseClassName, 'twa:p-1', 'twa:rounded-standard', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
+        // direct children should be above the before pseudo element
+        'twa:*:z-1', 
+        // all svgs inside should be aligned middle
+        'twa:[&_svg]:align-middle', 
+        // 'twa:text-text-on-primary',
+        // the text variant has the background applied on the before pseudo element
+        // so let's configure the before pseudo element for all buttons here
+        'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 
+        // focus shadow
+        twUtils_1.targetOwn.focusOutline, disabled ? `${exports.baseClassName}--disabled` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
+            'twa:text-text-on-primary': tone == 'neutral',
+            'twa:text-inherit': tone === 'none',
+            'twa:text-success': tone === 'success',
+            'twa:text-accent': tone === 'accent',
+            'twa:text-error': tone === 'error',
+            'twa:text-warn': tone === 'warning',
+            'twa:text-info': tone === 'info',
+        }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'outlined'
+            ? 'twa:bg-defaultbackground twa:border-inputborder twa:border'
+            : '', variant === 'raised'
+            ? {
+                'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
+                'twa:bg-success twa:text-text-on-success': tone == 'success',
+                'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
+                'twa:bg-transparent': tone == 'none',
+                'twa:bg-primary twa:text-text-on-primary': tone == 'neutral',
+                'twa:bg-error twa:text-text-on-error': tone == 'error',
+                'twa:bg-warn twa:text-text-on-warn': tone == 'warning',
+                'twa:bg-info twa:text-text-on-info': tone == 'info',
+            }
+            : '', 
+        // opacity transitioning for the background applied on the before pseudo element
+        variant === 'outlined' || variant === 'text'
+            ? {
+                'twa:before:opacity-0 twa:before:transition-opacity twa:before:duration-200': true,
+                'twa:hover:before:opacity-15 twa:hover:before:bg-current': !disabled,
+            }
+            : null, {
+            'twa:cursor-pointer': !disabled,
+            'twa:opacity-50': disabled,
+        }, className), ref: theRef }, children));
     return tooltip ? React.createElement(Tooltip_1.default, { label: tooltip }, btn) : btn;
 });
 exports.default = SimpleButton;

package/src/components/SizedContainer/index.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { ReactNode } from 'react';
+import { BoxProps } from '../Flex';
 interface SizedContainerProps extends Omit<BoxProps, 'children' | 'onResize'> {
+    style?: React.CSSProperties;
+    className?: string;
     children: (size: {
         width: number;
         height: number;

package/src/components/SizedContainer/index.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const NotifyResize_1 = tslib_1.__importDefault(require("../NotifyResize"));
+const Flex_1 = require("../Flex");
 const SizedContainer = (props) => {
     const { onResize: onResizeFromProps, ...domProps } = props;
     const [size, onResize] = React.useState(null);
     const sizeFn = props.children;
-    return (React.createElement(rebass_1.Box, { ...domProps, style: { flex: 1, ...domProps.style, position: 'relative' } },
-        React.createElement(rebass_1.Box, { style: {
+    return (React.createElement(Flex_1.Box, { ...domProps, style: { flex: 1, ...domProps.style, position: 'relative' } },
+        React.createElement(Flex_1.Box, { style: {
                 position: 'absolute',
                 left: 0,
                 top: 0,

package/src/components/StylePreview.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { AdaptableStyle } from '../types';
+import { BoxProps } from './Flex';
 interface StylePreviewProps extends BoxProps {
     styleObject: AdaptableStyle;
+    className?: string;
+    style?: React.CSSProperties;
 }
 export declare const StylePreview: React.FunctionComponent<React.PropsWithChildren<StylePreviewProps>>;
 export {};

package/src/components/StylePreview.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylePreview = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
-const join_1 = tslib_1.__importDefault(require("./utils/join"));
-const StylePreview = (props) => (React.createElement(rebass_1.Box, { ...props, className: (0, join_1.default)('ab-StylePreview', props.className), padding: props.padding ?? 2, mt: props.mt ?? 2, style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style } }, props.children ?? 'Preview result'));
+const twMerge_1 = require("../twMerge");
+const Flex_1 = require("./Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const StylePreview = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style } }, props.children ?? 'Preview result'));
 exports.StylePreview = StylePreview;

package/src/components/Tabs/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
+import { BoxProps } from '../Flex';
 export type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
     value?: VALUE_TYPE;
     defaultValue?: VALUE_TYPE;
@@ -10,7 +10,7 @@ export type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
     defaultSelectedIndex?: number;
     onSelectedIndexChange?: (index: number) => void;
     keyboardNavigation?: boolean;
-} & BoxProps;
+} & BoxProps & React.HTMLProps<HTMLDivElement>;
 export declare const Tabs: {
     <VALUE_TYPE extends string | number>(props: TabsProps<VALUE_TYPE>): React.JSX.Element;
     Tab: (props: TabProps) => React.JSX.Element;
@@ -24,7 +24,7 @@ export declare const Tab: (props: TabProps) => React.JSX.Element;
 export declare const SupportedTabMenuComps: Set<unknown>;
 type ContentProps = {
     value?: string | number;
-} & BoxProps;
+} & BoxProps & React.HTMLProps<HTMLDivElement>;
 export declare const Content: (props: ContentProps) => React.JSX.Element;
 export declare const SupportedTabContentComps: Set<unknown>;
 export {};

package/src/components/Tabs/index.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SupportedTabContentComps = exports.Content = exports.SupportedTabMenuComps = exports.Tab = exports.Tabs = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const react_1 = require("react");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const TabContext = React.createContext({
     selectedIndex: 0,
     tabCount: 0,
@@ -19,7 +21,7 @@ const isTabContent = (c) => {
     return c.type === exports.Content || exports.SupportedTabContentComps.has(c.type);
 };
 const Tabs = (props) => {
-    const { autoFocus = true, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange, ...boxProps } = props;
+    const { autoFocus, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange, ...boxProps } = props;
     let [selectedIndex, doSetSelectedIndex] = (0, useProperty_1.default)(props, 'selectedIndex', 0);
     const [selectedValue, setSelectedValue] = (0, useProperty_1.default)(props, 'value', 0);
     const allChildren = React.Children.toArray(children);
@@ -62,17 +64,18 @@ const Tabs = (props) => {
     };
     const currentContent = contents[selectedIndex];
     const { value, ...contentProps } = (currentContent?.props || {});
+    const fillerClassName = (0, clsx_1.default)('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
     return (React.createElement(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
         } },
-        React.createElement(rebass_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs'), "data-selected-index": selectedIndex },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", className: "ab-Tabs__Strip" },
-                React.createElement(rebass_1.Box, { className: "ab-Tabs__Filler" }),
+        React.createElement(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)') },
+                React.createElement(Flex_1.Box, { className: fillerClassName }),
                 tabs,
-                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Tabs__Filler" })),
-            React.createElement(rebass_1.Box, { padding: 2, ...contentProps, className: `${contentProps.className || ''} ab-Tabs__Body` }, currentContent))));
+                React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(fillerClassName, 'twa:flex-1') })),
+            React.createElement(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} ` }, currentContent))));
 };
 exports.Tabs = Tabs;
 const Tab = (props) => {
@@ -81,14 +84,28 @@ const Tab = (props) => {
     const baseClassName = 'ab-Tabs__Tab';
     const active = context.selectedIndex === props.index;
     const beforeActive = context.selectedIndex === props.index + 1;
-    const className = (0, join_1.default)(propsClassName, baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '');
+    const className = (0, clsx_1.default)(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
     const ref = (0, react_1.useRef)(null);
     React.useEffect(() => {
         if (active && autoFocus && keyboardNavigation) {
             ref.current?.focus();
         }
     }, [active, autoFocus]);
-    return (React.createElement(rebass_1.Box, { ref: ref, padding: 2, tabIndex: active ? 0 : -1, ...boxProps, className: className, onClick: (event) => {
+    const mountedRef = React.useRef(false);
+    React.useEffect(() => {
+        // don't focus initially,
+        // so we don't steal focus, if autoFocus is false
+        if (!mountedRef.current) {
+            return;
+        }
+        if (active && keyboardNavigation) {
+            ref.current?.focus();
+        }
+    }, [active, keyboardNavigation]);
+    React.useEffect(() => {
+        mountedRef.current = true;
+    }, []);
+    return (React.createElement(Flex_1.Box, { ref: ref, tabIndex: active ? 0 : -1, ...boxProps, className: (0, twMerge_1.twMerge)('twa:p-2', className), onClick: (event) => {
             context.setSelectedIndex(props.index);
             props.onClick?.(event);
         }, onKeyDown: (event) => {

package/src/components/Tag/Tag.d.ts

@@ -1,3 +1,15 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
-export declare const Tag: React.FunctionComponent<React.PropsWithChildren<FlexProps>>;
+import { FlexProps } from '../Flex';
+export declare const Tag: React.FunctionComponent<React.PropsWithChildren<FlexProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}> & React.RefAttributes<HTMLDivElement>>;
+export declare const TagBox: (props: {
+    children: React.ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+export declare const TagList: (props: {
+    tags: (React.ReactNode | string)[];
+    className?: string;
+}) => React.JSX.Element;

package/src/components/Tag/Tag.js

@@ -1,8 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
+exports.TagList = exports.TagBox = exports.Tag = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-exports.Tag = React.forwardRef((props, ref) => (React.createElement(rebass_1.Box, { ...props, ref: ref, className: (0, join_1.default)('ab-Tag', props.className), backgroundColor: "primary", paddingTop: props.paddingTop ?? 1, paddingBottom: props.paddingBottom ?? 1, paddingLeft: props.paddingLeft ?? 2, paddingRight: props.paddingRight ?? 2, style: { borderRadius: 'var(--ab__border-radius)', ...props.style } })));
+const twMerge_1 = require("../../twMerge");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+exports.Tag = React.forwardRef((props, ref) => (React.createElement(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
+const TagBox = (props) => {
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className) }, props.children));
+};
+exports.TagBox = TagBox;
+const TagList = (props) => {
+    return (React.createElement(exports.TagBox, { className: props.className }, props.tags.map((tag, index) => (React.createElement(exports.Tag, { key: index }, tag)))));
+};
+exports.TagList = TagList;

package/src/components/Tag/index.d.ts

@@ -1 +1 @@
-export { Tag } from './Tag';
+export { Tag, TagBox, TagList } from './Tag';

package/src/components/Tag/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
+exports.TagList = exports.TagBox = exports.Tag = void 0;
 var Tag_1 = require("./Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
+Object.defineProperty(exports, "TagBox", { enumerable: true, get: function () { return Tag_1.TagBox; } });
+Object.defineProperty(exports, "TagList", { enumerable: true, get: function () { return Tag_1.TagList; } });

package/src/components/Textarea/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
+import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-Textarea";
 /**
  * Autoheight strategy:
@@ -15,6 +15,8 @@ export type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
     disabled?: boolean;
     value?: string;
     autoResizeOnFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
 } & Omit<BoxProps, 'ref'>;
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLTextAreaElement>, "ref"> & {
     placeholder?: string;
@@ -22,5 +24,7 @@ declare const Textarea: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTM
     disabled?: boolean;
     value?: string;
     autoResizeOnFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
 } & Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLTextAreaElement | HTMLInputElement>>;
 export default Textarea;

package/src/components/Textarea/index.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../../twMerge");
 exports.baseClassName = 'ab-Textarea';
 const Textarea = React.forwardRef((props, ref) => {
     const internalRef = React.useRef(null);
@@ -29,7 +30,7 @@ const Textarea = React.forwardRef((props, ref) => {
             internalRef.current.style.height = `${initialHeight.current}px`;
         }
     };
-    return (React.createElement(rebass_1.Box, { ...textareaProps, onFocus: (e) => {
+    return (React.createElement(Flex_1.Box, { ...textareaProps, onFocus: (e) => {
             expandToFitContent();
             props.onFocus?.(e);
             if (internalRef.current && initialHeight.current === null) {
@@ -61,6 +62,6 @@ const Textarea = React.forwardRef((props, ref) => {
         }, onChange: (e) => {
             expandToFitContent();
             props.onChange && props.onChange(e);
-        }, as: "textarea", type: type, disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : ''), spellCheck: false }));
+        }, as: "textarea", type: type, disabled: disabled, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : ''), className), spellCheck: false }));
 });
 exports.default = Textarea;

package/src/components/Toggle/Toggle.js

@@ -3,11 +3,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Icon_1 = require("../Icon");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const twMerge_1 = require("../../twMerge");
+const ToggleGroup_1 = require("./ToggleGroup");
+const baseClassName = 'ab-Toggle';
 const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
-    const baseClassName = 'ab-Toggle';
-    return (React.createElement("button", { ...rest, className: (0, join_1.default)(baseClassName, pressed && `${baseClassName}--pressed`), onClick: () => onPressedChange(!pressed) },
+    const onPressedChangeRef = React.useRef(onPressedChange);
+    React.useLayoutEffect(() => {
+        onPressedChangeRef.current = onPressedChange;
+    }, [onPressedChange]);
+    const pressedRef = React.useRef(pressed);
+    React.useLayoutEffect(() => {
+        pressedRef.current = pressed;
+    }, [pressed]);
+    const toggle = React.useCallback(() => onPressedChangeRef.current(!pressedRef.current), []);
+    const toggleContext = React.useContext(ToggleGroup_1.ToggleGroupContext);
+    const [currentIndex, setCurrentIndex] = React.useState(-1);
+    const isActive = toggleContext.activeIndex === currentIndex;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!toggleContext || !toggleContext.toggleButtons) {
+            return;
+        }
+        const thisButton = {
+            node: ref.current,
+            toggle,
+        };
+        toggleContext.toggleButtons.push(thisButton);
+        setCurrentIndex(toggleContext.toggleButtons.length - 1);
+        return () => {
+            const index = toggleContext.toggleButtons.indexOf(thisButton);
+            if (index !== -1) {
+                toggleContext.toggleButtons.splice(index, 1);
+            }
+        };
+    }, [toggleContext]);
+    return (React.createElement("button", { ...rest, ref: ref, tabIndex: -1, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
+        // backgrounds
+        {
+            'twa:text-inherit twa:bg-transparent': !pressed,
+            'twa:hover:bg-primarylight twa:hover:text-text-on-primary': !pressed,
+            [`${baseClassName}--pressed`]: pressed,
+            'twa:bg-accent twa:hover:bg-accent/90 twa:text-accent-foreground': pressed,
+        }, {
+            'twa:before:rounded-standard twa:before:content-[""] twa:before:absolute twa:before:inset-1 twa:before:z-20 twa:before:pointer-events-none': true,
+            // let's display a shadow on the before pseudo element
+            // when the toggle is active
+            'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
+            'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
+        }, baseClassName)), onClick: toggle },
         icon && React.createElement(Icon_1.IconComponent, { icon: { name: icon } }),
         children));
 };

package/src/components/Toggle/ToggleGroup.d.ts

@@ -1,2 +1,9 @@
 import * as React from 'react';
+export declare const ToggleGroupContext: React.Context<{
+    toggleButtons: {
+        node: HTMLButtonElement;
+        toggle: VoidFunction;
+    }[];
+    activeIndex: number;
+}>;
 export declare const ToggleGroup: React.FunctionComponent<React.PropsWithChildren<unknown>>;

package/src/components/Toggle/ToggleGroup.js

@@ -1,10 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleGroup = void 0;
+exports.ToggleGroup = exports.ToggleGroupContext = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_1 = require("react");
+const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
+exports.ToggleGroupContext = React.createContext({
+    toggleButtons: [],
+    activeIndex: -1,
+});
 const ToggleGroup = (props) => {
-    return React.createElement(rebass_1.Flex, { className: "ab-Toggle-Group" }, props.children);
+    const ref = (0, react_1.useRef)(null);
+    const [context, setContext] = React.useState({
+        toggleButtons: [],
+        activeIndex: 0,
+    });
+    const setActiveIndex = React.useCallback((index) => {
+        setContext((prev) => ({
+            ...prev,
+            activeIndex: index,
+        }));
+    }, []);
+    return (React.createElement(exports.ToggleGroupContext.Provider, { value: context },
+        React.createElement(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
+            // make the shadow of child Toggle buttons invisible when the group is not focused
+            'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
+                const index = context.toggleButtons.findIndex((btn) => (0, contains_1.default)(btn.node, event.target));
+                if (index !== -1) {
+                    setActiveIndex(index);
+                }
+            }, onKeyDown: (event) => {
+                const { toggleButtons, activeIndex } = context;
+                if (event.key === ' ') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const activeButton = toggleButtons[activeIndex];
+                    if (!activeButton) {
+                        return;
+                    }
+                    activeButton.toggle();
+                    return;
+                }
+                if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const node = ref.current;
+                    if (!node) {
+                        return;
+                    }
+                    const dir = event.key === 'ArrowLeft' ? -1 : 1;
+                    let nextIndex = activeIndex + dir;
+                    if (nextIndex < 0) {
+                        nextIndex = toggleButtons.length - 1;
+                    }
+                    else if (nextIndex > toggleButtons.length - 1) {
+                        nextIndex = 0;
+                    }
+                    setActiveIndex(nextIndex);
+                }
+            } }, props.children)));
 };
 exports.ToggleGroup = ToggleGroup;

package/src/components/ToggleButton/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 interface ToggleButtonProps {
     checked?: boolean;
-    className: string;
+    className?: string;
     disabled?: boolean;
     onChange: (on: boolean) => void;
     style?: React.CSSProperties;
-    'data-name': string;
+    'data-name'?: string;
 }
 export declare const ToggleButton: React.FunctionComponent<React.PropsWithChildren<ToggleButtonProps>>;
 export {};

package/src/components/ToggleButton/index.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleButton = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
 const ToggleButton = ({ checked, onChange, disabled, className, children, style = {}, 'data-name': dataName, }) => {
+    const isChecked = Boolean(checked);
     const handleChange = (event) => {
         if (disabled) {
             return;
@@ -13,10 +15,26 @@ const ToggleButton = ({ checked, onChange, disabled, className, children, style
         onChange(Boolean(event.target.checked));
     };
     const baseClassName = 'ab-ToggleButton';
-    const preparedClassName = (0, join_1.default)(className, baseClassName, checked && `${baseClassName}--checked`, disabled && `${baseClassName}--disabled`);
-    return (React.createElement("label", { "data-name": dataName, style: style, className: preparedClassName },
-        React.createElement("input", { type: "checkbox", disabled: disabled, checked: Boolean(checked), className: `${baseClassName}__input`, onChange: handleChange }),
-        React.createElement(rebass_1.Flex, { alignItems: "center", justifyContent: checked ? 'start' : 'end', className: `${baseClassName}__slider` },
-            React.createElement("div", { className: `${baseClassName}__text` }, children))));
+    const preparedClassName = (0, clsx_1.default)(baseClassName, 'twa:group twa:outline-0', 'twa:select-none twa:relative twa:inline-block', 'twa:min-w-[40px]', 'twa:min-h-input', 'twa:w-[77px]', {
+        [`${baseClassName}--checked`]: isChecked,
+        [`${baseClassName}--disabled`]: disabled,
+        'twa:hover:cursor-pointer twa:hover:opacity-85': !disabled,
+    }, className);
+    return (React.createElement("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: (0, twMerge_1.twMerge)(preparedClassName) },
+        React.createElement("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: (0, clsx_1.default)(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }),
+        React.createElement(Flex_1.Flex, { alignItems: "center", "data-checked": isChecked, className: (0, clsx_1.default)(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
+                'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
+                'twa:bg-accent': isChecked,
+                'twa:justify-start': isChecked,
+                'twa:justify-end': !isChecked,
+                'twa:opacity-50': disabled,
+            }, 
+            // the :before pseudo element
+            'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white') },
+            React.createElement("div", { className: (0, clsx_1.default)(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
+                    'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
+                    'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
+                    'twa:pl-2': isChecked,
+                }) }, children))));
 };
 exports.ToggleButton = ToggleButton;