@onesy/ui-react 1.0.0

package/Button/Button.js

@@ -0,0 +1,476 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Surface_1 = __importDefault(require("../Surface"));
+const Interaction_1 = __importDefault(require("../Interaction"));
+const RoundProgress_1 = __importDefault(require("../RoundProgress"));
+const Type_1 = __importDefault(require("../Type"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        // Reset
+        fontFamily: 'inherit',
+        '-webkit-appearance': 'none',
+        appearance: 'none',
+        border: 'none',
+        fontSize: '100%',
+        lineHeight: '1.15',
+        padding: '0',
+        margin: '0',
+        overflow: 'visible',
+        textTransform: 'none',
+        flex: '0 0 auto',
+        display: 'inline-flex',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        position: 'relative',
+        cursor: 'pointer',
+        textAlign: 'center',
+        textDecoration: 'none',
+        verticalAlign: 'middle',
+        userSelect: 'none',
+        transition: theme.methods.transitions.make(['color'])
+    },
+    // Color
+    color_inherit: { color: 'inherit' },
+    // Size
+    size_small: {
+        paddingBlock: theme.methods.space.value(1, 'px'),
+        paddingInline: theme.methods.space.value(2, 'px'),
+        borderRadius: `${theme.shape.radius.unit * 4}px`
+    },
+    size_regular: {
+        paddingBlock: theme.methods.space.value(1.5, 'px'),
+        paddingInline: theme.methods.space.value(3, 'px'),
+        borderRadius: `${theme.shape.radius.unit * 4.5}px`
+    },
+    size_large: {
+        paddingBlock: theme.methods.space.value(2, 'px'),
+        paddingInline: theme.methods.space.value(4, 'px'),
+        borderRadius: `${theme.shape.radius.unit * 5.5}px`
+    },
+    // icon
+    icon: {
+        borderRadius: `calc(${theme.shape.radius.unit / 8} * 2em)`,
+        padding: '0'
+    },
+    icon_size_small: {
+        width: '30px',
+        height: '30px'
+    },
+    icon_size_regular: {
+        width: '40px',
+        height: '40px'
+    },
+    icon_size_large: {
+        width: '50px',
+        height: '50px'
+    },
+    // fab
+    fab_size_small: {
+        height: `40px`,
+        minWidth: `64px`,
+        borderRadius: `${(theme.shape.radius.unit * 2) - (theme.shape.radius.unit / 2)}px`,
+        padding: theme.methods.space.value(1.5, 'px')
+    },
+    fab_size_regular: {
+        height: `56px`,
+        minWidth: `80px`,
+        borderRadius: `${theme.shape.radius.unit * 2}px`,
+        padding: theme.methods.space.value(2, 'px')
+    },
+    fab_size_large: {
+        height: `72px`,
+        minWidth: `96px`,
+        borderRadius: `${(theme.shape.radius.unit * 2) + (theme.shape.radius.unit / 2)}px`,
+        padding: theme.methods.space.value(3, 'px')
+    },
+    // Chip
+    chip_size_small: {
+        padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
+        borderRadius: `${theme.shape.radius.unit - (theme.shape.radius.unit / 4)}px`
+    },
+    chip_size_regular: {
+        padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
+        borderRadius: `${theme.shape.radius.unit}px`
+    },
+    chip_size_large: {
+        padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+        borderRadius: `${theme.shape.radius.unit + (theme.shape.radius.unit / 4)}px`
+    },
+    // Icons
+    start: {
+        paddingInlineStart: '0px'
+    },
+    end: {
+        paddingInlineEnd: '0px'
+    },
+    fullWidth: {
+        width: '100%'
+    },
+    // Label
+    label: {
+        display: 'inline-flex',
+        position: 'relative',
+        whiteSpace: 'normal',
+        wordBreak: 'break-word',
+        alignItems: 'center',
+        gap: '8px',
+        width: '100%'
+    },
+    align_start: {
+        textAlign: 'start',
+        justifyContent: 'flex-start'
+    },
+    align_center: {
+        textAlign: 'center',
+        justifyContent: 'center'
+    },
+    align_end: {
+        textAlign: 'start',
+        justifyContent: 'flex-end'
+    },
+    // Size
+    label_size_small: {
+        gap: '6px'
+    },
+    label_size_regular: {
+        gap: '8px'
+    },
+    label_size_large: {
+        gap: '10px'
+    },
+    // icon
+    iconRoot: {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        lineHeight: '0',
+        '& > *': {
+            lineHeight: '0 !important'
+        }
+    },
+    // Icon element
+    Icon: {
+        position: 'relative',
+        lineHeight: '0'
+    },
+    start_size_small: {
+        paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(0.5, 'px')}`
+    },
+    start_size_regular: {
+        paddingInline: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1, 'px')}`
+    },
+    start_size_large: {
+        paddingInline: `${theme.methods.space.value(2.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`
+    },
+    end_size_small: {
+        paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
+    },
+    end_size_regular: {
+        paddingInline: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`
+    },
+    end_size_large: {
+        paddingInline: `${theme.methods.space.value(1.25, 'px')} ${theme.methods.space.value(2.75, 'px')}`
+    },
+    // Chip
+    chip_start_size_small: {
+        padding: `0 ${theme.methods.space.value(0.75, 'px')}`
+    },
+    chip_start_size_regular: {
+        padding: `0 ${theme.methods.space.value(1, 'px')}`
+    },
+    chip_start_size_large: {
+        padding: `0 ${theme.methods.space.value(1.25, 'px')}`
+    },
+    chip_end_size_small: {
+        padding: `0 ${theme.methods.space.value(0.75, 'px')}`
+    },
+    chip_end_size_regular: {
+        padding: `0 ${theme.methods.space.value(1, 'px')}`
+    },
+    chip_end_size_large: {
+        padding: `0 ${theme.methods.space.value(1.25, 'px')}`
+    },
+    // Elevation
+    elevation: {
+        transition: theme.methods.transitions.make('box-shadow'),
+        '&:hover': {
+            boxShadow: theme.shadows.values.neutral[3]
+        }
+    },
+    // Disabled
+    disabled: {
+        cursor: 'default',
+        opacity: theme.palette.visual_contrast.default.opacity.disabled
+    },
+    disabled_version_text: {
+        '&.onesy-Surface-root': {
+            color: theme.palette.text.default.primary
+        }
+    },
+    disabled_version_outlined: {
+        '&.onesy-Surface-root': {
+            color: theme.palette.text.default.primary
+        }
+    },
+    disabled_version_filled: {
+        '&.onesy-Surface-root': {
+            color: theme.palette.text.neutral.primary,
+            background: theme.palette.light ? theme.palette.text.divider : theme.palette.text.neutral.quaternary
+        }
+    }
+}), { name: 'onesy-Button' });
+const Button = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyButton) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
+    const RoundProgress = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundProgress) || RoundProgress_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const { tonal = true, color: color_ = 'primary', version = 'outlined', name, size = 'regular', fullWidth, fontSize, selected, iconSelected, start: start_, startSelected, end: end_, endSelected, elevation = true, backgroundOpacity, align = 'center', loading, loadingLabel, loadingIcon = (0, jsx_runtime_1.jsx)(RoundProgress, { size: 'small' }), loadingIconPosition = 'center', fab, chip, icon, focus: focus_, value, noIconRootFontSize, firstLevelChildren, noFontSize, disabled: disabled_, onFocus: onFocus_, onBlur: onBlur_, IconWrapperComponent = 'span', InteractionProps = {}, IconWrapperProps, LabelProps, Component = props.href ? 'a' : 'button', className, style, children: childrenProps } = props, other = __rest(props, ["tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "Component", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [focus, setFocus] = react_1.default.useState(focus_ !== undefined ? focus_ : false);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        ids: {
+            label: react_1.default.useId()
+        }
+    };
+    let color = color_;
+    let start = (selected && startSelected) || start_;
+    let end = (selected && endSelected) || end_;
+    const disabled = disabled_ || loading;
+    const TypeProps = {};
+    const children = name !== undefined ? name : childrenProps;
+    if (disabled)
+        color = 'default';
+    const styles = {
+        root: {},
+        background: {},
+        border: {},
+        iconRoot: {},
+        label: { margin: 0 },
+        Icon: { fontSize: '1.0625rem' }
+    };
+    // Size
+    // if (size === 'small') {
+    //   if (!noFontSize) styles.Icon.fontSize = '0.9375rem';
+    //   TypeProps.version = 'l3';
+    // }
+    // if (size === 'large') {
+    //   if (!noFontSize) styles.Icon.fontSize = '1.375rem';
+    //   TypeProps.version = 'l1';
+    // }
+    // if (fontSize !== undefined) {
+    //   if (!noFontSize) styles.Icon.fontSize = fontSize;
+    // }
+    let children_ = children;
+    // icon
+    if (icon) {
+        const iconFontSize = fontSize !== undefined ? 'inherit' : undefined;
+        if (!['small', 'regular', 'large'].includes(size)) {
+            children_ = (0, utils_1.is)('array', children_) ?
+                children_.filter(Boolean).map((item, index) => (0, utils_1.is)('string', item.type) ?
+                    react_1.default.cloneElement(item, {
+                        key: index
+                    }) :
+                    react_1.default.cloneElement(item, {
+                        key: index,
+                        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
+                    })) :
+                react_1.default.cloneElement(children_, {
+                    size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
+                });
+            styles.root.width = size;
+            styles.root.height = size;
+            if (!noFontSize) {
+                styles.root.fontSize = size / 1.667;
+                if (!noIconRootFontSize)
+                    styles.iconRoot.fontSize = size;
+            }
+        }
+        else {
+            children_ = (0, utils_1.is)('array', children_) ?
+                children_.filter(Boolean).map((item, index) => (0, utils_1.is)('string', item.type) ?
+                    react_1.default.cloneElement(item, {
+                        key: index
+                    }) :
+                    react_1.default.cloneElement(item, {
+                        key: index,
+                        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (size === 'large' ? 'medium' : size) : undefined
+                    })) :
+                react_1.default.cloneElement(children_, {
+                    size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (size === 'large' ? 'medium' : size) : undefined
+                });
+            if (!noFontSize) {
+                styles.root.fontSize = (0, utils_2.iconSizeToFontSize)(size === 'large' ? 'medium' : size);
+                if (!noIconRootFontSize)
+                    styles.iconRoot.fontSize = size === 'small' ? 30 : size === 'regular' ? 40 : 50;
+            }
+        }
+    }
+    // fab
+    if (fab) {
+        if (react_1.default.Children.count(children_) === 1 && !(0, utils_1.is)('string', children_))
+            styles.root.minWidth = 'initial';
+        if (size === 'small')
+            styles.Icon.fontSize = 18;
+        if (size === 'regular')
+            styles.Icon.fontSize = 24;
+        if (size === 'large')
+            styles.Icon.fontSize = 30;
+        children_ = react_1.default.Children.toArray(children_).map((item) => react_1.default.isValidElement(item) ? react_1.default.cloneElement(item, { style: styles.Icon }) : item);
+    }
+    if (fontSize !== undefined) {
+        styles.root.fontSize = fontSize;
+        styles.iconRoot.fontSize = 'inherit';
+    }
+    // loading
+    if (loading) {
+        const iconLoading = react_1.default.cloneElement(loadingIcon, { color: 'inherit', style: styles.Icon });
+        if (loadingLabel)
+            children_ = loadingLabel;
+        else if (loadingIconPosition === 'center') {
+            children_ = icon ? react_1.default.cloneElement(loadingIcon, { color: 'inherit', size: size === 'small' ? 18 : size === 'regular' ? 24 : 36 }) : iconLoading;
+            styles.label.lineHeight = 0;
+        }
+        if (loadingIconPosition === 'start')
+            start = iconLoading;
+        else if (loadingIconPosition === 'end')
+            end = iconLoading;
+    }
+    if (disabled) {
+        InteractionProps.wave = false;
+        InteractionProps.border = false;
+        InteractionProps.background = false;
+        delete styles.root.color;
+        delete styles.label.color;
+    }
+    const onFocus = react_1.default.useCallback((event) => {
+        if (focus_ === undefined && event.target === refs.root.current && !disabled)
+            setFocus(true);
+        if ((0, utils_1.is)('function', onFocus_))
+            onFocus_(event);
+    }, [focus_, onFocus_, disabled]);
+    const onBlur = react_1.default.useCallback((event) => {
+        if (focus_ === undefined && !disabled)
+            setFocus(false);
+        if ((0, utils_1.is)('function', onBlur_))
+            onBlur_(event);
+    }, [focus_, onBlur_, disabled]);
+    const IconElement = (selected && iconSelected) || children_;
+    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, tabIndex: !disabled ? 0 : -1, type: 'button', role: 'button', color: color, tonal: tonal, version: version === 'outlined' ? 'outlined-without-background' : version, elevation: (elevation && !disabled && ['filled', 'tonal'].includes(version)) ? 1 : 0, backgroundOpacity: backgroundOpacity, "aria-labelledby": refs.ids.label, "aria-pressed": selected, "aria-disabled": disabled, disabled: disabled, onFocus: onFocus, onBlur: onBlur, Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Button', theme) && [
+                `onesy-Button-root`,
+                `onesy-Button-version-${version}`,
+                `onesy-Button-size-${size}`,
+                fullWidth && `onesy-Button-full-width`,
+                start && `onesy-Button-start`,
+                end && `onesy-Button-end`,
+                selected && `onesy-Button-selected`,
+                loading && `onesy-Button-loading`,
+                focus && `onesy-Button-focus`,
+                disabled && `onesy-Button-disabled`
+            ],
+            className,
+            classes.root,
+            classes[`size_${size}`],
+            classes[`version_${version}`],
+            classes[`color_${color}`],
+            (elevation && !disabled && ['filled', 'tonal'].includes(version)) && classes.elevation,
+            start && classes.start,
+            end && classes.end,
+            fullWidth && classes.fullWidth,
+            icon && [
+                classes.icon,
+                classes[`icon_size_${size}`]
+            ],
+            fab && [
+                classes.fab,
+                classes[`fab_size_${size}`]
+            ],
+            chip && [
+                classes.chip,
+                classes[`chip_size_${size}`]
+            ],
+            disabled && [
+                classes.disabled,
+                classes[`disabled_version_${version}`]
+            ]
+        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: [(0, jsx_runtime_1.jsx)(Interaction, Object.assign({ border: false, pulse: focus, selected: selected, disabled: disabled }, InteractionProps)), firstLevelChildren, start && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Button', theme) && [
+                        'onesy-Button-icon',
+                        'onesy-Button-start'
+                    ],
+                    classes.Icon,
+                    classes.start,
+                    classes[`start_size_${size}`],
+                    chip && classes[`chip_start_size_${size}`]
+                ]) }, { children: react_1.default.cloneElement(start, {
+                    size: ((_a = start === null || start === void 0 ? void 0 : start.props) === null || _a === void 0 ? void 0 : _a.size) || size || 'regular'
+                }) }))), icon ? ((0, jsx_runtime_1.jsx)(IconWrapperComponent, Object.assign({}, IconWrapperProps, { id: refs.ids.label, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Button', theme) && [
+                        'onesy-Button-icon-root'
+                    ],
+                    IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className,
+                    classes.iconRoot
+                ]), style: Object.assign(Object.assign({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style) }, { children: IconElement }))) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3' }, TypeProps, { id: refs.ids.label, Component: 'span' }, LabelProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Button', theme) && [
+                        'onesy-Button-label'
+                    ],
+                    LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className,
+                    TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className,
+                    classes.label,
+                    classes[`label_size_${size}`],
+                    classes[`align_${align}`]
+                ]), style: Object.assign(Object.assign(Object.assign({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: react_1.default.Children.toArray(children_).map((item_, index) => {
+                    var _a, _b, _c, _d;
+                    const item = (selected && ((_b = (_a = item_.type) === null || _a === void 0 ? void 0 : _a.displayName) === null || _b === void 0 ? void 0 : _b.includes('onesy-Icon')) && iconSelected) ? iconSelected : item_;
+                    if ((0, utils_1.is)('simple', item))
+                        return item;
+                    return react_1.default.cloneElement((selected && ((_d = (_c = item.type) === null || _c === void 0 ? void 0 : _c.displayName) === null || _d === void 0 ? void 0 : _d.includes('onesy-Icon')) && iconSelected) ? iconSelected : item, {
+                        key: index
+                    });
+                }) }))), end && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Button', theme) && [
+                        'onesy-Button-icon',
+                        'onesy-Button-end'
+                    ],
+                    classes.Icon,
+                    classes.end,
+                    classes[`end_size_${size}`],
+                    chip && classes[`chip_end_size_${size}`]
+                ]) }, { children: react_1.default.cloneElement(end, {
+                    size: ((_b = end === null || end === void 0 ? void 0 : end.props) === null || _b === void 0 ? void 0 : _b.size) || size || 'regular'
+                }) })))] })));
+});
+Button.displayName = 'onesy-Button';
+exports.default = Button;

package/Button/index.d.ts

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

package/Button/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });

package/Button/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Button/index.js",
+  "types": "./index.d.ts"
+}

package/Buttons/Buttons.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IColor, ISize, ITonal, IValueBreakpoints, IVersion } from '../types';
+export declare const IconMaterialDone: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export declare const IconDoneAnimated: (props: any) => import("react/jsx-runtime").JSX.Element;
+export interface IButtons extends ILine {
+    tonal?: ITonal;
+    color?: IColor;
+    version?: IVersion;
+    colorSelected?: IColor;
+    size?: ISize;
+    value?: any;
+    valueDefault?: any;
+    onChange?: (value: any) => any;
+    select?: 'single' | 'multiple';
+    unselect?: boolean;
+    orientation?: 'vertical' | 'horizontal' | Partial<Record<IValueBreakpoints, 'vertical' | 'horizontal'>>;
+    noCheckIcon?: boolean;
+    elevation?: boolean;
+    border?: boolean;
+    chip?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+declare const Buttons: React.FC<IButtons>;
+export default Buttons;