@groupeactual/ui-kit 1.7.10 → 1.8.2

package/dist/es/src/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ToggleButtonGroupProps } from '@mui/material';
+interface Props extends ToggleButtonGroupProps {
+    selectedValue: string | string[];
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+declare const ToggleButtonGroup: ({ selectedValue, options, ...props }: Props) => React.JSX.Element;
+export default ToggleButtonGroup;

package/dist/es/src/components/ToggleButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ToggleButtonGroup';

package/dist/es/src/components/index.d.ts

@@ -32,3 +32,4 @@ export { default as TimePicker } from './Form/TimePicker';
 export { default as Datatable } from './Datatable/Datatable';
 export { default as DatatableCellRender } from './Datatable/DatatableCellRender';
 export { default as IconButton } from './IconButton/IconButton';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.10",
+  "version": "1.8.2",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "main": "dist/cjs/index.js",
@@ -33,7 +33,7 @@
     "@mui/x-date-pickers": "7.15.0",
     "@mui/x-date-pickers-pro": "7.15.0",
     "styled-components": "^6.1.13",
-    "@groupeactual/design-tokens": "1.7.10"
+    "@groupeactual/design-tokens": "1.8.2"
   },
   "scripts": {
     "build": "rollup -c",

package/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+
+import {
+  styled,
+    ToggleButton,
+      ToggleButtonGroup as ToggleButtonGroupMUI,
+    ToggleButtonGroupProps,
+    useTheme,
+  } from '@mui/material';
+import { ToggleButtonGroupStyle } from '@groupeactual/design-tokens';
+
+  interface Props extends ToggleButtonGroupProps {
+    selectedValue: string | string[];
+    options: { value: string; label: string }[];
+  }
+
+  const ToggleButtonGroup = ({
+    selectedValue,
+    options = [],
+    ...props
+  }: Props) => {
+        const theme = useTheme();
+        const StyledToggleButtonGroup = useMemo(
+          () => styled(ToggleButtonGroupMUI)(ToggleButtonGroupStyle(theme)),
+          [theme],
+        );
+    return <StyledToggleButtonGroup orientation='horizontal' exclusive={props.exclusive} disabled={props.disabled} value={selectedValue} {...props}>
+        {options.map(({ label, value }) => <ToggleButton value={value}>{label}</ToggleButton>)}
+    </StyledToggleButtonGroup>;
+  };
+  export default ToggleButtonGroup;

package/src/components/ToggleButtonGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './ToggleButtonGroup';

package/src/components/index.ts

@@ -35,3 +35,4 @@ export { default as TimePicker } from './Form/TimePicker';
 export { default as Datatable } from './Datatable/Datatable';
 export { default as DatatableCellRender } from './Datatable/DatatableCellRender';
 export { default as IconButton } from './IconButton/IconButton';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup';