acinguiux-ds-react-framework 0.0.1

package/build/esm/components/Button/utils/styleUtils.js

@@ -0,0 +1,76 @@
+import { Variants } from 'acinguiux-ds-react-base';
+import { Sentiments } from 'acinguiux-ds-fabrics';
+import { buttonConsts } from '../Button.consts';
+export const getPadding = (iconOnly, size, variant) => !iconOnly && buttonConsts.padding[size][variant] && `0 ${buttonConsts.padding[size][variant]}`;
+export const getAlignmentMargin = (size, variant) => buttonConsts.padding[size][variant] && `-${buttonConsts.padding[size][variant]}`;
+export const getColor = (theme, variant, sentiment) => {
+    if (variant === Variants.Transparent || variant === Variants.Outlined) {
+        if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {
+            return theme.text.onSurface[sentiment];
+        }
+        return theme.text.onSurface.strong;
+    }
+    if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {
+        return theme.text.onSystem.strong[sentiment];
+    }
+    return theme.text.onPrimary.strong;
+};
+export const getColorOnHover = (theme, variant, sentiment) => {
+    if (sentiment === Sentiments.Primary && (variant === Variants.Transparent || variant === Variants.Outlined)) {
+        return theme.text.onSurface.strong;
+    }
+    if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {
+        return theme.text.onSurface[sentiment];
+    }
+    return theme.text.onPrimary.strong;
+};
+export const getBackgroundColor = (theme, variant, sentiment) => {
+    if (variant === Variants.Transparent || variant === Variants.Outlined) {
+        return 'transparent';
+    }
+    if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {
+        return theme.system.strong[sentiment];
+    }
+    return theme.accent.primary.strong;
+};
+export const getBackgroundColorOnHover = (theme, variant, sentiment) => {
+    if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {
+        return theme.system.subtle[sentiment];
+    }
+    switch (variant) {
+        case Variants.Filled:
+            return theme.accent.primary.medium;
+        case Variants.Transparent:
+            return theme.focus.extraSubtle;
+        default:
+            return 'none';
+    }
+};
+export const getBackgroundColorWhenDisabled = (theme, variant) => {
+    if (variant === Variants.Filled) {
+        return theme.background.inactive;
+    }
+    return 'none';
+};
+export const getBorderColor = (theme, variant, sentiment) => {
+    if (variant === Variants.Transparent || variant === Variants.Filled) {
+        return 'transparent';
+    }
+    if (sentiment === Sentiments.Negative || sentiment === Sentiments.Positive) {
+        return theme.system.strong[sentiment];
+    }
+    return theme.border.medium;
+};
+export const getBorderColorOnHover = (theme, variant, sentiment) => {
+    if (sentiment === Sentiments.Primary && variant === Variants.Outlined) {
+        return theme.focus.strong;
+    }
+    return 'none';
+};
+export const getBorderColorWhenDisabled = (theme, variant) => {
+    if (variant === Variants.Outlined) {
+        return theme.border.subtle;
+    }
+    return 'none';
+};
+//# sourceMappingURL=styleUtils.js.map

package/build/esm/components/Button/utils/styleUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleUtils.js","sourceRoot":"","sources":["../../../../../src/components/Button/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,QAAiB,EAAE,IAAgB,EAAE,OAAsB,EAAE,EAAE,CACxF,CAAC,QAAQ,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;AAEjG,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAgB,EAAE,OAAsB,EAAE,EAAE,CAC7E,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;AAEnF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,SAA0B,EAAE,EAAE;IAC3F,IAAI,OAAO,KAAK,QAAQ,CAAC,WAAW,IAAI,OAAO,KAAK,QAAQ,CAAC,QAAQ,EAAE;QACrE,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,EAAE;YAC1E,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;SACxC;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;KACpC;IAED,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,EAAE;QAC1E,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAC9C;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,SAA0B,EAAE,EAAE;IAClG,IAAI,SAAS,KAAK,UAAU,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,WAAW,IAAI,OAAO,KAAK,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAC3G,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;KACpC;IAED,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,EAAE;QAC1E,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,SAA0B,EAAE,EAAE;IACrG,IAAI,OAAO,KAAK,QAAQ,CAAC,WAAW,IAAI,OAAO,KAAK,QAAQ,CAAC,QAAQ,EAAE;QACrE,OAAO,aAAa,CAAC;KACtB;IACD,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,EAAE;QAC1E,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KACvC;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,SAA0B,EAAE,EAAE;IAC5G,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,EAAE;QAC1E,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KACvC;IAED,QAAQ,OAAO,EAAE;QACf,KAAK,QAAQ,CAAC,MAAM;YAClB,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;QACrC,KAAK,QAAQ,CAAC,WAAW;YACvB,OAAO,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;QACjC;YACE,OAAO,MAAM,CAAC;KACjB;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,EAAE;IACrF,IAAI,OAAO,KAAK,QAAQ,CAAC,MAAM,EAAE;QAC/B,OAAO,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;KAClC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,SAA0B,EAAE,EAAE;IACjG,IAAI,OAAO,KAAK,QAAQ,CAAC,WAAW,IAAI,OAAO,KAAK,QAAQ,CAAC,MAAM,EAAE;QACnE,OAAO,aAAa,CAAC;KACtB;IACD,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,EAAE;QAC1E,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KACvC;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,SAA0B,EAAE,EAAE;IACxG,IAAI,SAAS,KAAK,UAAU,CAAC,OAAO,IAAI,OAAO,KAAK,QAAQ,CAAC,QAAQ,EAAE;QACrE,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;KAC3B;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAE,OAAsB,EAAE,EAAE;IACjF,IAAI,OAAO,KAAK,QAAQ,CAAC,QAAQ,EAAE;QACjC,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;KAC5B;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import { Theme, Variants } from 'acinguiux-ds-react-base';\nimport { Sentiments } from 'acinguiux-ds-fabrics';\n\nimport { buttonConsts } from '../Button.consts';\nimport { ButtonSize, ButtonSentiment, ButtonVariant } from '../Button.types';\n\nexport const getPadding = (iconOnly: boolean, size: ButtonSize, variant: ButtonVariant) =>\n  !iconOnly && buttonConsts.padding[size][variant] && `0 ${buttonConsts.padding[size][variant]}`;\n\nexport const getAlignmentMargin = (size: ButtonSize, variant: ButtonVariant) =>\n  buttonConsts.padding[size][variant] && `-${buttonConsts.padding[size][variant]}`;\n\nexport const getColor = (theme: Theme, variant: ButtonVariant, sentiment: ButtonSentiment) => {\n  if (variant === Variants.Transparent || variant === Variants.Outlined) {\n    if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {\n      return theme.text.onSurface[sentiment];\n    }\n\n    return theme.text.onSurface.strong;\n  }\n\n  if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {\n    return theme.text.onSystem.strong[sentiment];\n  }\n\n  return theme.text.onPrimary.strong;\n};\n\nexport const getColorOnHover = (theme: Theme, variant: ButtonVariant, sentiment: ButtonSentiment) => {\n  if (sentiment === Sentiments.Primary && (variant === Variants.Transparent || variant === Variants.Outlined)) {\n    return theme.text.onSurface.strong;\n  }\n\n  if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {\n    return theme.text.onSurface[sentiment];\n  }\n\n  return theme.text.onPrimary.strong;\n};\n\nexport const getBackgroundColor = (theme: Theme, variant: ButtonVariant, sentiment: ButtonSentiment) => {\n  if (variant === Variants.Transparent || variant === Variants.Outlined) {\n    return 'transparent';\n  }\n  if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {\n    return theme.system.strong[sentiment];\n  }\n\n  return theme.accent.primary.strong;\n};\n\nexport const getBackgroundColorOnHover = (theme: Theme, variant: ButtonVariant, sentiment: ButtonSentiment) => {\n  if (sentiment === Sentiments.Positive || sentiment === Sentiments.Negative) {\n    return theme.system.subtle[sentiment];\n  }\n\n  switch (variant) {\n    case Variants.Filled:\n      return theme.accent.primary.medium;\n    case Variants.Transparent:\n      return theme.focus.extraSubtle;\n    default:\n      return 'none';\n  }\n};\n\nexport const getBackgroundColorWhenDisabled = (theme: Theme, variant: ButtonVariant) => {\n  if (variant === Variants.Filled) {\n    return theme.background.inactive;\n  }\n\n  return 'none';\n};\n\nexport const getBorderColor = (theme: Theme, variant: ButtonVariant, sentiment: ButtonSentiment) => {\n  if (variant === Variants.Transparent || variant === Variants.Filled) {\n    return 'transparent';\n  }\n  if (sentiment === Sentiments.Negative || sentiment === Sentiments.Positive) {\n    return theme.system.strong[sentiment];\n  }\n\n  return theme.border.medium;\n};\n\nexport const getBorderColorOnHover = (theme: Theme, variant: ButtonVariant, sentiment: ButtonSentiment) => {\n  if (sentiment === Sentiments.Primary && variant === Variants.Outlined) {\n    return theme.focus.strong;\n  }\n\n  return 'none';\n};\n\nexport const getBorderColorWhenDisabled = (theme: Theme, variant: ButtonVariant) => {\n  if (variant === Variants.Outlined) {\n    return theme.border.subtle;\n  }\n\n  return 'none';\n};\n"]}

package/build/esm/components/ButtonGroup/ButtonGroup.consts.d.ts

@@ -0,0 +1,12 @@
+import { ButtonGroupSize } from './ButtonGroup.types';
+type ButtonGroupConstsProps = {
+    [size in ButtonGroupSize]: {
+        height: number;
+        paddings: number;
+        borderRadius: number;
+        icon: string;
+    };
+};
+export declare const buttonGroupConsts: ButtonGroupConstsProps;
+export {};
+//# sourceMappingURL=ButtonGroup.consts.d.ts.map

package/build/esm/components/ButtonGroup/ButtonGroup.consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.consts.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,KAAK,sBAAsB,GAAG;KAC3B,IAAI,IAAI,eAAe,GAAG;QACzB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;QACrB,IAAI,EAAE,MAAM,CAAC;KACd;CACF,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,sBAyB/B,CAAC"}

package/build/esm/components/ButtonGroup/ButtonGroup.consts.js

@@ -0,0 +1,28 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+export const buttonGroupConsts = {
+    [Sizes.ExtraSmall]: {
+        height: 24,
+        paddings: 4,
+        borderRadius: 2,
+        icon: '14px',
+    },
+    [Sizes.Small]: {
+        height: 32,
+        paddings: 8,
+        borderRadius: 2,
+        icon: '16px',
+    },
+    [Sizes.Medium]: {
+        height: 40,
+        paddings: 12,
+        borderRadius: 2,
+        icon: '20px',
+    },
+    [Sizes.Large]: {
+        height: 48,
+        paddings: 16,
+        borderRadius: 2,
+        icon: '24px',
+    },
+};
+//# sourceMappingURL=ButtonGroup.consts.js.map

package/build/esm/components/ButtonGroup/ButtonGroup.consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.consts.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAahD,MAAM,CAAC,MAAM,iBAAiB,GAA2B;IACvD,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;QAClB,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,CAAC;QACX,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,MAAM;KACb;IACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,CAAC;QACX,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,MAAM;KACb;IACD,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACd,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,MAAM;KACb;IACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,MAAM;KACb;CACF,CAAC","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\nimport { ButtonGroupSize } from './ButtonGroup.types';\n\ntype ButtonGroupConstsProps = {\n  [size in ButtonGroupSize]: {\n    height: number;\n    paddings: number;\n    borderRadius: number;\n    icon: string;\n  };\n};\n\nexport const buttonGroupConsts: ButtonGroupConstsProps = {\n  [Sizes.ExtraSmall]: {\n    height: 24,\n    paddings: 4,\n    borderRadius: 2,\n    icon: '14px',\n  },\n  [Sizes.Small]: {\n    height: 32,\n    paddings: 8,\n    borderRadius: 2,\n    icon: '16px',\n  },\n  [Sizes.Medium]: {\n    height: 40,\n    paddings: 12,\n    borderRadius: 2,\n    icon: '20px',\n  },\n  [Sizes.Large]: {\n    height: 48,\n    paddings: 16,\n    borderRadius: 2,\n    icon: '24px',\n  },\n};\n"]}

package/build/esm/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { IButtonGroupProps } from './ButtonGroup.types';
+declare const ButtonGroup: ({ className, type, size, name, selectedKey, iconPosition, iconOnly, onChange, emphasis, items, ...rest }: IButtonGroupProps) => ReactElement;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/build/esm/components/ButtonGroup/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMrC,OAAO,EACL,iBAAiB,EAKlB,MAAM,qBAAqB,CAAC;AAI7B,QAAA,MAAM,WAAW,6GAYd,iBAAiB,KAAG,YAmCtB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/esm/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Sizes, BUTTON_GROUP_CLASS } from 'acinguiux-ds-react-base';
+import * as Styled from './ButtonGroup.styles';
+import RadioButton from './components/RadioButton/RadioButton';
+import CheckboxButton from './components/CheckboxButton/CheckboxButton';
+const ButtonGroup = ({ className, type = 'radio', size = Sizes.Medium, name = 'buttonGroup', selectedKey, iconPosition, iconOnly, onChange, emphasis = true, items, ...rest }) => (_jsx(Styled.ButtonGroup, { className: classNames(BUTTON_GROUP_CLASS, className), ...rest, children: items === null || items === void 0 ? void 0 : items.map(({ value, tooltip, ...props }) => {
+        const commonProps = {
+            key: value || props.label,
+            value: value || props.label,
+            name,
+            size,
+            iconOnly,
+            iconPosition,
+            tooltip,
+            emphasis,
+        };
+        if (type === 'radio') {
+            return (_jsx(RadioButton, { selectedKey: selectedKey, onChange: onChange, ...commonProps, ...props }));
+        }
+        return (_jsx(CheckboxButton, { selectedKey: selectedKey, onChange: onChange, ...commonProps, ...props }));
+    }) }));
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.js.map

package/build/esm/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";AAEA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAC;AAQ/C,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,IAAI,GAAG,OAAO,EACd,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,GAAG,aAAa,EACpB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,GAAG,IAAI,EACW,EAAgB,EAAE,CAAC,CACrC,KAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAAM,IAAI,YAC/E,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;QAC3C,MAAM,WAAW,GAAG;YAClB,GAAG,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK;YACzB,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK;YAC3B,IAAI;YACJ,IAAI;YACJ,QAAQ;YACR,YAAY;YACZ,OAAO;YACP,QAAQ;SACT,CAAC;QAEF,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,OAAO,CACL,KAAC,WAAW,IACV,WAAW,EAAE,WAA+B,EAC5C,QAAQ,EAAE,QAA+B,KACrC,WAAW,KACX,KAAK,GACT,CACH,CAAC;SACH;QAED,OAAO,CACL,KAAC,cAAc,IACb,WAAW,EAAE,WAAkC,EAC/C,QAAQ,EAAE,QAAkC,KACxC,WAAW,KACX,KAAK,GACT,CACH,CAAC;IACJ,CAAC,CAAC,GACiB,CACtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, BUTTON_GROUP_CLASS } from 'acinguiux-ds-react-base';\n\nimport * as Styled from './ButtonGroup.styles';\nimport {\n  IButtonGroupProps,\n  CheckboxButtonValue,\n  RadioButtonValue,\n  RadioButtonOnChange,\n  CheckboxButtonOnChange,\n} from './ButtonGroup.types';\nimport RadioButton from './components/RadioButton/RadioButton';\nimport CheckboxButton from './components/CheckboxButton/CheckboxButton';\n\nconst ButtonGroup = ({\n  className,\n  type = 'radio',\n  size = Sizes.Medium,\n  name = 'buttonGroup',\n  selectedKey,\n  iconPosition,\n  iconOnly,\n  onChange,\n  emphasis = true,\n  items,\n  ...rest\n}: IButtonGroupProps): ReactElement => (\n  <Styled.ButtonGroup className={classNames(BUTTON_GROUP_CLASS, className)} {...rest}>\n    {items?.map(({ value, tooltip, ...props }) => {\n      const commonProps = {\n        key: value || props.label,\n        value: value || props.label,\n        name,\n        size,\n        iconOnly,\n        iconPosition,\n        tooltip,\n        emphasis,\n      };\n\n      if (type === 'radio') {\n        return (\n          <RadioButton\n            selectedKey={selectedKey as RadioButtonValue}\n            onChange={onChange as RadioButtonOnChange}\n            {...commonProps}\n            {...props}\n          />\n        );\n      }\n\n      return (\n        <CheckboxButton\n          selectedKey={selectedKey as CheckboxButtonValue}\n          onChange={onChange as CheckboxButtonOnChange}\n          {...commonProps}\n          {...props}\n        />\n      );\n    })}\n  </Styled.ButtonGroup>\n);\n\nexport default ButtonGroup;\n"]}

package/build/esm/components/ButtonGroup/ButtonGroup.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ILabelProps } from '../Text/components/Label/Label.types';
+import { IButtonGroupButtonProps } from './ButtonGroup.types';
+declare const ButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ButtonGroupLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ILabelProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {} & (ILabelProps & Pick<IButtonGroupButtonProps, "disabled" | "checked" | "iconPosition" | "iconOnly" | "emphasis"> & Required<Pick<IButtonGroupButtonProps, "size">>), never>;
+declare const ButtonGroupRadio: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+declare const ButtonGroupCheckbox: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export { ButtonGroup, ButtonGroupLabel, ButtonGroupRadio, ButtonGroupCheckbox };
+//# sourceMappingURL=ButtonGroup.styles.d.ts.map

package/build/esm/components/ButtonGroup/ButtonGroup.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,QAAA,MAAM,WAAW,yGAShB,CAAC;AAEF,QAAA,MAAM,gBAAgB,gXAuGrB,CAAC;AAEF,QAAA,MAAM,gBAAgB,2GAErB,CAAC;AAEF,QAAA,MAAM,mBAAmB,2GAExB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAC"}

package/build/esm/components/ButtonGroup/ButtonGroup.styles.js

@@ -0,0 +1,122 @@
+import styled, { css } from 'styled-components';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import Label from '../Text/components/Label/Label';
+import { buttonGroupConsts } from './ButtonGroup.consts';
+const ButtonGroup = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+  border-radius: 2px;
+  background-color: ${({ theme }) => theme.background.surface};
+  color: ${({ theme }) => theme.text.onSurface.strong};
+`;
+const ButtonGroupLabel = styled(Label) `
+  ${({ size, iconOnly, iconPosition, checked, disabled, emphasis, theme }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid ${theme.border.medium};
+    height: ${buttonGroupConsts[size].height}px;
+    padding: 0 ${buttonGroupConsts[size].paddings}px;
+    transition: box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1), background-color 0.3s;
+    cursor: pointer;
+
+    ${size === Sizes.ExtraSmall && theme.label.small.bold};
+    ${size === Sizes.Small && theme.label.medium.bold};
+    ${(size === Sizes.Large || size === Sizes.Medium) && theme.label.large.bold};
+
+    &:first-child {
+      border-radius: ${buttonGroupConsts[size].borderRadius}px 0 0 ${buttonGroupConsts[size].borderRadius}px;
+    }
+
+    &:last-child {
+      border-radius: 0 ${buttonGroupConsts[size].borderRadius}px ${buttonGroupConsts[size].borderRadius}px 0;
+    }
+
+    &:only-child {
+      border-radius: ${buttonGroupConsts[size].borderRadius}px;
+    }
+
+    &:not(:first-child) {
+      border-left-color: transparent;
+    }
+
+    ${!checked &&
+    !disabled &&
+    css `
+      &:hover {
+        background-color: ${theme.background.inactive};
+      }
+    `}
+
+    ${!disabled &&
+    css `
+      &:active {
+        background-color: ${emphasis ? theme.focus.medium : theme.text.onSurface.subtle};
+        border-color: transparent;
+        color: ${theme.text.onFocus.strong};
+
+        svg path {
+          fill: ${theme.text.onFocus.strong};
+        }
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 3px ${emphasis ? theme.focus.medium : theme.text.onSurface.subtle};
+        border-color: ${emphasis ? theme.focus.strong : theme.text.onSurface.strong};
+        border-radius: 2px;
+        outline: 0;
+      }
+    `}
+
+  ${checked &&
+    css `
+      background-color: ${emphasis ? theme.focus.strong : theme.text.onSurface.strong};
+      color: ${theme.text.onFocus.strong};
+      border-color: transparent;
+
+      svg path {
+        fill: ${theme.text.onFocus.strong};
+      }
+    `}
+
+  ${disabled &&
+    css `
+      background-color: ${theme.background.inactive};
+      color: ${theme.text.onSurface.inactive};
+      user-select: none;
+      outline: none;
+      cursor: not-allowed;
+
+      ${!checked &&
+        css `
+        svg path {
+          fill: ${theme.text.onFocus.inactive};
+        }
+      `}
+
+      ${checked &&
+        css `
+        background-color: ${theme.background.mask};
+        color: ${theme.text.onInverted.strong};
+        border-color: transparent;
+      `}
+    `}
+
+  svg {
+      width: ${buttonGroupConsts[size].icon};
+      height: ${buttonGroupConsts[size].icon};
+      margin: ${!iconOnly && (iconPosition === Positions.Right ? '0 0 0 8px' : '0 8px 0 0')};
+    }
+  `}
+`;
+const ButtonGroupRadio = styled.input `
+  display: none;
+`;
+const ButtonGroupCheckbox = styled.input `
+  display: none;
+`;
+export { ButtonGroup, ButtonGroupLabel, ButtonGroupRadio, ButtonGroupCheckbox };
+//# sourceMappingURL=ButtonGroup.styles.js.map

package/build/esm/components/ButtonGroup/ButtonGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.styles.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport Label from '../Text/components/Label/Label';\nimport { ILabelProps } from '../Text/components/Label/Label.types';\nimport { IButtonGroupButtonProps } from './ButtonGroup.types';\nimport { buttonGroupConsts } from './ButtonGroup.consts';\n\nconst ButtonGroup = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n  border-radius: 2px;\n  background-color: ${({ theme }) => theme.background.surface};\n  color: ${({ theme }) => theme.text.onSurface.strong};\n`;\n\nconst ButtonGroupLabel = styled(Label)<\n  ILabelProps &\n    Pick<IButtonGroupButtonProps, 'checked' | 'disabled' | 'iconOnly' | 'iconPosition' | 'emphasis'> &\n    Required<Pick<IButtonGroupButtonProps, 'size'>>\n>`\n  ${({ size, iconOnly, iconPosition, checked, disabled, emphasis, theme }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${theme.border.medium};\n    height: ${buttonGroupConsts[size].height}px;\n    padding: 0 ${buttonGroupConsts[size].paddings}px;\n    transition: box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1), background-color 0.3s;\n    cursor: pointer;\n\n    ${size === Sizes.ExtraSmall && theme.label.small.bold};\n    ${size === Sizes.Small && theme.label.medium.bold};\n    ${(size === Sizes.Large || size === Sizes.Medium) && theme.label.large.bold};\n\n    &:first-child {\n      border-radius: ${buttonGroupConsts[size].borderRadius}px 0 0 ${buttonGroupConsts[size].borderRadius}px;\n    }\n\n    &:last-child {\n      border-radius: 0 ${buttonGroupConsts[size].borderRadius}px ${buttonGroupConsts[size].borderRadius}px 0;\n    }\n\n    &:only-child {\n      border-radius: ${buttonGroupConsts[size].borderRadius}px;\n    }\n\n    &:not(:first-child) {\n      border-left-color: transparent;\n    }\n\n    ${!checked &&\n    !disabled &&\n    css`\n      &:hover {\n        background-color: ${theme.background.inactive};\n      }\n    `}\n\n    ${!disabled &&\n    css`\n      &:active {\n        background-color: ${emphasis ? theme.focus.medium : theme.text.onSurface.subtle};\n        border-color: transparent;\n        color: ${theme.text.onFocus.strong};\n\n        svg path {\n          fill: ${theme.text.onFocus.strong};\n        }\n      }\n\n      &:focus-visible {\n        box-shadow: 0 0 0 3px ${emphasis ? theme.focus.medium : theme.text.onSurface.subtle};\n        border-color: ${emphasis ? theme.focus.strong : theme.text.onSurface.strong};\n        border-radius: 2px;\n        outline: 0;\n      }\n    `}\n\n  ${checked &&\n    css`\n      background-color: ${emphasis ? theme.focus.strong : theme.text.onSurface.strong};\n      color: ${theme.text.onFocus.strong};\n      border-color: transparent;\n\n      svg path {\n        fill: ${theme.text.onFocus.strong};\n      }\n    `}\n\n  ${disabled &&\n    css`\n      background-color: ${theme.background.inactive};\n      color: ${theme.text.onSurface.inactive};\n      user-select: none;\n      outline: none;\n      cursor: not-allowed;\n\n      ${!checked &&\n      css`\n        svg path {\n          fill: ${theme.text.onFocus.inactive};\n        }\n      `}\n\n      ${checked &&\n      css`\n        background-color: ${theme.background.mask};\n        color: ${theme.text.onInverted.strong};\n        border-color: transparent;\n      `}\n    `}\n\n  svg {\n      width: ${buttonGroupConsts[size].icon};\n      height: ${buttonGroupConsts[size].icon};\n      margin: ${!iconOnly && (iconPosition === Positions.Right ? '0 0 0 8px' : '0 8px 0 0')};\n    }\n  `}\n`;\n\nconst ButtonGroupRadio = styled.input`\n  display: none;\n`;\n\nconst ButtonGroupCheckbox = styled.input`\n  display: none;\n`;\n\nexport { ButtonGroup, ButtonGroupLabel, ButtonGroupRadio, ButtonGroupCheckbox };\n"]}

package/build/esm/components/ButtonGroup/ButtonGroup.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonGroup.test.d.ts.map

package/build/esm/components/ButtonGroup/ButtonGroup.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/ButtonGroup/ButtonGroup.test.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sizes } from 'acinguiux-ds-react-base';
+import { render, screen, fireEvent, vi } from '../../utils/viTestUtils';
+import { GridSolid, PieChart, Rows } from '../Icon/components';
+import ButtonGroup from './ButtonGroup';
+const OPTION_ONE = 'Option 1';
+const OPTION_TWO = 'Option 2';
+const OPTION_THREE = 'Option 3';
+describe('Button Group component', () => {
+    it('should render with only one selected button with selectedKey(type radio)', () => {
+        const type = 'radio';
+        render(_jsx(ButtonGroup, { type: type, selectedKey: OPTION_THREE, onChange: vi.fn(), items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const notSelectedOption1 = screen.getByText(OPTION_ONE);
+        const notSelectedOption2 = screen.getByText(OPTION_TWO);
+        const selectedOption3 = screen.getByText(OPTION_THREE);
+        expect(notSelectedOption1.checked).toEqual(false);
+        expect(notSelectedOption2.checked).toEqual(false);
+        expect(selectedOption3.checked).toEqual(true);
+    });
+    it('should render with none selected buttons if selectedKey not provided(type radio)', () => {
+        const type = 'radio';
+        render(_jsx(ButtonGroup, { type: type, onChange: vi.fn(), selectedKey: "", items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const notSelectedOption1 = screen.getByLabelText(OPTION_ONE);
+        const notSelectedOption2 = screen.getByLabelText(OPTION_TWO);
+        const notSelectedOption3 = screen.getByLabelText(OPTION_THREE);
+        expect(notSelectedOption1.checked).toEqual(false);
+        expect(notSelectedOption2.checked).toEqual(false);
+        expect(notSelectedOption3.checked).toEqual(false);
+    });
+    it('should render with none selected buttons if selectedKey have unknown values(type radio)', () => {
+        const selectedKey = 'Test 2';
+        render(_jsx(ButtonGroup, { selectedKey: selectedKey, onChange: vi.fn(), items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const notSelectedOption1 = screen.getByLabelText(OPTION_ONE);
+        const notSelectedOption2 = screen.getByLabelText(OPTION_TWO);
+        expect(notSelectedOption1.checked).toEqual(false);
+        expect(notSelectedOption2.checked).toEqual(false);
+    });
+    it('should render disabled buttons', () => {
+        const selectedKey = ['Test 2'];
+        const type = 'checkbox';
+        const size = Sizes.Small;
+        render(_jsx(ButtonGroup, { selectedKey: selectedKey, type: type, size: size, onChange: vi.fn(), items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}), disabled: true },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const Option1 = screen.getByLabelText(OPTION_ONE);
+        expect(Option1).toHaveAttribute('disabled', '');
+    });
+    it('should call handleChange on click any options type checkbox', () => {
+        const selectedKey = ['Test 2'];
+        const type = 'checkbox';
+        const size = Sizes.Small;
+        const handleChange = vi.fn();
+        render(_jsx(ButtonGroup, { selectedKey: selectedKey, type: type, size: size, onChange: handleChange, items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const Option1 = screen.getByLabelText(OPTION_ONE);
+        fireEvent.click(Option1);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+    it('should call handleChange on click any options type radio', () => {
+        const selectedKey = 'Test 2';
+        const type = 'radio';
+        const size = Sizes.Small;
+        const handleChange = vi.fn();
+        render(_jsx(ButtonGroup, { selectedKey: selectedKey, type: type, size: size, onChange: handleChange, items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const Option1 = screen.getByLabelText(OPTION_ONE);
+        fireEvent.click(Option1);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+    it('should call handleChange on click any options type checkbox all values pre-selected', () => {
+        const selectedKey = ['Option 1', 'Option 2'];
+        const type = 'checkbox';
+        const size = Sizes.Small;
+        const handleChange = vi.fn();
+        render(_jsx(ButtonGroup, { selectedKey: selectedKey, type: type, size: size, onChange: handleChange, items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        const Option1 = screen.getByLabelText(OPTION_ONE);
+        fireEvent.click(Option1);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+    it('should accept an icon and text', () => {
+        const handleChange = vi.fn();
+        const { container } = render(_jsx(ButtonGroup, { selectedKey: "", onChange: handleChange, items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, {}) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        expect(screen.getByLabelText(OPTION_ONE)).toBeInTheDocument();
+        expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+    it('should render only icon if iconOnly prop is present', () => {
+        const handleChange = vi.fn();
+        render(_jsx(ButtonGroup, { selectedKey: "", onChange: handleChange, iconOnly: true, items: [
+                { label: OPTION_ONE, icon: _jsx(GridSolid, { "data-testid": "custom-icon" }) },
+                { label: OPTION_TWO, icon: _jsx(Rows, {}) },
+                { label: OPTION_THREE, icon: _jsx(PieChart, {}) },
+            ] }));
+        expect(screen.queryByLabelText(OPTION_ONE)).not.toBeInTheDocument();
+        expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=ButtonGroup.test.js.map

package/build/esm/components/ButtonGroup/ButtonGroup.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.test.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\nimport { render, screen, fireEvent, vi } from '../../utils/viTestUtils';\nimport { GridSolid, PieChart, Rows } from '../Icon/components';\nimport ButtonGroup from './ButtonGroup';\n\nconst OPTION_ONE = 'Option 1';\nconst OPTION_TWO = 'Option 2';\nconst OPTION_THREE = 'Option 3';\n\ndescribe('Button Group component', () => {\n  it('should render with only one selected button with selectedKey(type radio)', () => {\n    const type = 'radio';\n\n    render(\n      <ButtonGroup\n        type={type}\n        selectedKey={OPTION_THREE}\n        onChange={vi.fn()}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    const notSelectedOption1 = screen.getByText(OPTION_ONE);\n    const notSelectedOption2 = screen.getByText(OPTION_TWO);\n    const selectedOption3 = screen.getByText(OPTION_THREE);\n\n    expect((notSelectedOption1 as HTMLInputElement).checked).toEqual(false);\n    expect((notSelectedOption2 as HTMLInputElement).checked).toEqual(false);\n    expect((selectedOption3 as HTMLInputElement).checked).toEqual(true);\n  });\n\n  it('should render with none selected buttons if selectedKey not provided(type radio)', () => {\n    const type = 'radio';\n\n    render(\n      <ButtonGroup\n        type={type}\n        onChange={vi.fn()}\n        selectedKey=\"\"\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    const notSelectedOption1 = screen.getByLabelText(OPTION_ONE);\n    const notSelectedOption2 = screen.getByLabelText(OPTION_TWO);\n    const notSelectedOption3 = screen.getByLabelText(OPTION_THREE);\n\n    expect((notSelectedOption1 as HTMLInputElement).checked).toEqual(false);\n    expect((notSelectedOption2 as HTMLInputElement).checked).toEqual(false);\n    expect((notSelectedOption3 as HTMLInputElement).checked).toEqual(false);\n  });\n\n  it('should render with none selected buttons if selectedKey have unknown values(type radio)', () => {\n    const selectedKey = 'Test 2';\n\n    render(\n      <ButtonGroup\n        selectedKey={selectedKey}\n        onChange={vi.fn()}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    const notSelectedOption1 = screen.getByLabelText(OPTION_ONE);\n    const notSelectedOption2 = screen.getByLabelText(OPTION_TWO);\n\n    expect((notSelectedOption1 as HTMLInputElement).checked).toEqual(false);\n    expect((notSelectedOption2 as HTMLInputElement).checked).toEqual(false);\n  });\n\n  it('should render disabled buttons', () => {\n    const selectedKey = ['Test 2'];\n    const type = 'checkbox';\n    const size = Sizes.Small;\n\n    render(\n      <ButtonGroup\n        selectedKey={selectedKey}\n        type={type}\n        size={size}\n        onChange={vi.fn()}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid />, disabled: true },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    const Option1 = screen.getByLabelText(OPTION_ONE);\n\n    expect(Option1).toHaveAttribute('disabled', '');\n  });\n\n  it('should call handleChange on click any options type checkbox', () => {\n    const selectedKey = ['Test 2'];\n    const type = 'checkbox';\n    const size = Sizes.Small;\n    const handleChange = vi.fn();\n\n    render(\n      <ButtonGroup\n        selectedKey={selectedKey}\n        type={type}\n        size={size}\n        onChange={handleChange}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    const Option1 = screen.getByLabelText(OPTION_ONE);\n\n    fireEvent.click(Option1);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('should call handleChange on click any options type radio', () => {\n    const selectedKey = 'Test 2';\n    const type = 'radio';\n    const size = Sizes.Small;\n    const handleChange = vi.fn();\n\n    render(\n      <ButtonGroup\n        selectedKey={selectedKey}\n        type={type}\n        size={size}\n        onChange={handleChange}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    const Option1 = screen.getByLabelText(OPTION_ONE);\n\n    fireEvent.click(Option1);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('should call handleChange on click any options type checkbox all values pre-selected', () => {\n    const selectedKey = ['Option 1', 'Option 2'];\n    const type = 'checkbox';\n    const size = Sizes.Small;\n    const handleChange = vi.fn();\n\n    render(\n      <ButtonGroup\n        selectedKey={selectedKey}\n        type={type}\n        size={size}\n        onChange={handleChange}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n    const Option1 = screen.getByLabelText(OPTION_ONE);\n\n    fireEvent.click(Option1);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('should accept an icon and text', () => {\n    const handleChange = vi.fn();\n    const { container } = render(\n      <ButtonGroup\n        selectedKey=\"\"\n        onChange={handleChange}\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    expect(screen.getByLabelText(OPTION_ONE)).toBeInTheDocument();\n    expect(container.querySelector('svg')).toBeInTheDocument();\n  });\n\n  it('should render only icon if iconOnly prop is present', () => {\n    const handleChange = vi.fn();\n    render(\n      <ButtonGroup\n        selectedKey=\"\"\n        onChange={handleChange}\n        iconOnly\n        items={[\n          { label: OPTION_ONE, icon: <GridSolid data-testid=\"custom-icon\" /> },\n          { label: OPTION_TWO, icon: <Rows /> },\n          { label: OPTION_THREE, icon: <PieChart /> },\n        ]}\n      />,\n    );\n\n    expect(screen.queryByLabelText(OPTION_ONE)).not.toBeInTheDocument();\n    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();\n  });\n});\n"]}

package/build/esm/components/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, ChangeEvent, KeyboardEvent, ReactNode } from 'react';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import * as Types from '../../types/types';
+import { ILabelProps } from '../Text/components/Label/Label.types';
+export type ButtonGroupSize = Sizes.ExtraSmall | Sizes.Small | Sizes.Medium | Sizes.Large;
+export type ButtonGroupButtonIconPosition = Positions.Left | Positions.Right | Types.DeprecatedHorizontalPositions;
+export type ButtonGroupType = 'radio' | 'checkbox';
+export type CheckboxButtonValue = string[];
+export type CheckboxButtonOnChange = (value: string[], event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLButtonElement>) => void;
+export type RadioButtonValue = string;
+export type RadioButtonOnChange = (value: string, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLButtonElement>) => void;
+type CommonButtonGroupButtonProps = {
+    value?: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+    tooltip?: ReactNode;
+    buttonProps?: ILabelProps & {
+        size?: ButtonGroupSize;
+    };
+};
+type CommonButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'children'> & {
+    size?: ButtonGroupSize;
+    name?: string;
+    iconPosition?: ButtonGroupButtonIconPosition;
+    iconOnly?: boolean;
+    emphasis?: boolean;
+    items: CommonButtonGroupButtonProps[];
+};
+export type IButtonGroupProps = (CommonButtonGroupProps & {
+    type?: 'radio';
+    onChange?: RadioButtonOnChange;
+    selectedKey?: RadioButtonValue;
+}) | (CommonButtonGroupProps & {
+    type: 'checkbox';
+    onChange?: CheckboxButtonOnChange;
+    selectedKey?: CheckboxButtonValue;
+});
+export type IButtonGroupButtonProps = Omit<IButtonGroupProps, 'type' | 'items' | 'onChange' | 'selectedKey'> & Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> & CommonButtonGroupButtonProps;
+export {};
+//# sourceMappingURL=ButtonGroup.types.d.ts.map

package/build/esm/components/ButtonGroup/ButtonGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;AAC1F,MAAM,MAAM,6BAA6B,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,6BAA6B,CAAC;AACnH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,UAAU,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,MAAM,EAAE,CAAC;AAC3C,MAAM,MAAM,sBAAsB,GAAG,CACnC,KAAK,EAAE,MAAM,EAAE,EACf,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,aAAa,CAAC,iBAAiB,CAAC,KACpE,IAAI,CAAC;AAEV,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC;AACtC,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,aAAa,CAAC,iBAAiB,CAAC,KACpE,IAAI,CAAC;AAEV,KAAK,4BAA4B,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,GAAG;QAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;KACxB,CAAC;CACH,CAAC;AAEF,KAAK,sBAAsB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC7F,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,6BAA6B,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,CAAC,sBAAsB,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC,CAAC,CAAC;AAEP,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAC1G,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GAC5D,4BAA4B,CAAC"}

package/build/esm/components/ButtonGroup/ButtonGroup.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonGroup.types.js.map

package/build/esm/components/ButtonGroup/ButtonGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.types.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentPropsWithoutRef, ChangeEvent, KeyboardEvent, ReactNode } from 'react';\n\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport * as Types from '../../types/types';\nimport { ILabelProps } from '../Text/components/Label/Label.types';\n\nexport type ButtonGroupSize = Sizes.ExtraSmall | Sizes.Small | Sizes.Medium | Sizes.Large;\nexport type ButtonGroupButtonIconPosition = Positions.Left | Positions.Right | Types.DeprecatedHorizontalPositions;\nexport type ButtonGroupType = 'radio' | 'checkbox';\n\nexport type CheckboxButtonValue = string[];\nexport type CheckboxButtonOnChange = (\n  value: string[],\n  event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLButtonElement>,\n) => void;\n\nexport type RadioButtonValue = string;\nexport type RadioButtonOnChange = (\n  value: string,\n  event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLButtonElement>,\n) => void;\n\ntype CommonButtonGroupButtonProps = {\n  value?: string;\n  label: string;\n  disabled?: boolean;\n  icon?: ReactNode;\n  tooltip?: ReactNode;\n  buttonProps?: ILabelProps & {\n    size?: ButtonGroupSize;\n  };\n};\n\ntype CommonButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'children'> & {\n  size?: ButtonGroupSize;\n  name?: string;\n  iconPosition?: ButtonGroupButtonIconPosition;\n  iconOnly?: boolean;\n  emphasis?: boolean;\n  items: CommonButtonGroupButtonProps[];\n};\n\nexport type IButtonGroupProps =\n  | (CommonButtonGroupProps & {\n      type?: 'radio';\n      onChange?: RadioButtonOnChange;\n      selectedKey?: RadioButtonValue;\n    })\n  | (CommonButtonGroupProps & {\n      type: 'checkbox';\n      onChange?: CheckboxButtonOnChange;\n      selectedKey?: CheckboxButtonValue;\n    });\n\nexport type IButtonGroupButtonProps = Omit<IButtonGroupProps, 'type' | 'items' | 'onChange' | 'selectedKey'> &\n  Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> &\n  CommonButtonGroupButtonProps;\n"]}

package/build/esm/components/ButtonGroup/CheckboxButtonGroup.stories.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Positions, Sizes } from 'acinguiux-ds-react-base';
+import ButtonGroup from './ButtonGroup';
+declare const _default: {
+    title: string;
+    component: ({ className, type, size, name, selectedKey, iconPosition, iconOnly, onChange, emphasis, items, ...rest }: import("./ButtonGroup.types").IButtonGroupProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    parameters: {
+        storyLink: string;
+        controls: {
+            exclude: string[];
+        };
+    };
+    argTypes: {
+        className: {
+            control: string;
+        };
+        emphasis: {
+            defaultValue: boolean;
+            control: string;
+        };
+        iconOnly: {
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+        iconPosition: {
+            defaultValue: Positions;
+            options: Positions[];
+            control: string;
+        };
+        selectedKey: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            defaultValue: Sizes;
+            options: Sizes[];
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: StoryFn<typeof ButtonGroup>;
+export declare const DifferentSizes: StoryFn<typeof ButtonGroup>;
+export declare const WithTooltip: StoryFn<typeof ButtonGroup>;
+export declare const WithoutEmphasis: StoryFn<typeof ButtonGroup>;
+export declare const Disabled: StoryFn<typeof ButtonGroup>;
+export declare const WithIcon: StoryFn<typeof ButtonGroup>;
+export declare const IconPosition: StoryFn<typeof ButtonGroup>;
+export declare const OnlyIcon: StoryFn<typeof ButtonGroup>;
+export declare const ResetButtonGroups: StoryFn<typeof ButtonGroup>;
+export declare const GroupsWithSameNames: StoryFn<typeof ButtonGroup>;
+//# sourceMappingURL=CheckboxButtonGroup.stories.d.ts.map

package/build/esm/components/ButtonGroup/CheckboxButtonGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/CheckboxButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAO3D,OAAO,WAAW,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxC,wBA+BE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,OAAO,WAAW,CAmB/C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,OAAO,WAAW,CAsDtD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,OAAO,WAAW,CAmBnD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,OAAO,WAAW,CAoBvD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,OAAO,WAAW,CAmBhD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,OAAO,WAAW,CA0EhD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,OAAO,WAAW,CAsCpD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,OAAO,WAAW,CAoBhD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,OAAO,WAAW,CA4BzD,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,OAAO,WAAW,CA4D3D,CAAC"}