@televet/kibble-ui 1.10.2 → 1.11.0

package/build/components/Forms/Checkbox/checkbox.component.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps as CCheckboxProps } from '@chakra-ui/react';
+import { CheckboxSize, CheckboxVariant } from './checkbox.types';
+export interface CheckboxProps extends CCheckboxProps {
+    size?: CheckboxSize;
+    variant?: CheckboxVariant;
+}
+export declare const Checkbox: ({ children, size, variant, isIndeterminate, ...rest }: CheckboxProps) => JSX.Element;

package/build/components/Forms/Checkbox/checkbox.config.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from '@chakra-ui/react';
+export declare const CheckboxConfig: ComponentStyleConfig;

package/build/components/Forms/Checkbox/checkbox.types.d.ts

@@ -0,0 +1,2 @@
+export declare type CheckboxSize = 'sm' | 'md' | 'lg';
+export declare type CheckboxVariant = 'square' | 'round';

package/build/components/Forms/Checkbox/components/CheckboxGroup/checkboxGroup.component.d.ts

@@ -0,0 +1,15 @@
+import { CheckboxGroupProps as CCheckboxGroupProps, SystemProps } from '@chakra-ui/react';
+import { WithFormControlProps } from 'components/Forms/FormControl/formControl.component';
+import React from 'react';
+import { FlexDirection } from 'shared/types';
+import { CheckboxProps } from '../../checkbox.component';
+import { CheckboxSize } from '../../checkbox.types';
+export interface CheckboxGroupProps extends WithFormControlProps, CCheckboxGroupProps {
+    size?: CheckboxSize;
+    checkboxes: CheckboxProps[];
+    direction?: FlexDirection;
+    spacing?: SystemProps['margin'];
+    $isFieldInline?: boolean;
+}
+declare const WrappedCheckboxGroup: React.FC<CheckboxGroupProps & WithFormControlProps>;
+export { WrappedCheckboxGroup as CheckboxGroup };

package/build/components/Forms/Checkbox/index.d.ts

@@ -0,0 +1,5 @@
+export { CheckboxGroup as CCheckboxGroup, useCheckbox, useCheckboxGroup } from '@chakra-ui/react';
+export * from './components/CheckboxGroup/checkboxGroup.component';
+export * from './checkbox.component';
+export * from './checkbox.config';
+export * from './checkbox.types';

package/build/components/Forms/Radio/components/RadioGroup/radioGroup.component.d.ts

@@ -1,12 +1,13 @@
 import { RadioGroupProps as CRadioGroupProps, SystemProps } from '@chakra-ui/react';
 import { WithFormControlProps } from 'components/Forms/FormControl/formControl.component';
 import React from 'react';
+import { FlexDirection } from 'shared/types';
 import { RadioProps } from '../../radio.component';
-import { RadioGroupDirection, RadioSize } from '../../radio.types';
+import { RadioSize } from '../../radio.types';
 export interface RadioGroupProps extends WithFormControlProps, CRadioGroupProps {
     size?: RadioSize;
     radios: RadioProps[];
-    direction?: RadioGroupDirection;
+    direction?: FlexDirection;
     spacing?: SystemProps['margin'];
     $isFieldInline?: boolean;
 }

package/build/components/Forms/Radio/index.d.ts

@@ -1,4 +1,4 @@
-export { RadioGroup as CRadioGroup, useRadioGroup, useRadioGroupContext } from '@chakra-ui/react';
+export { RadioGroup as CRadioGroup, useRadio, useRadioGroup } from '@chakra-ui/react';
 export * from './components/RadioGroup/radioGroup.component';
 export * from './radio.component';
 export * from './radio.config';

package/build/components/Forms/Radio/radio.types.d.ts

@@ -1,2 +1 @@
 export declare type RadioSize = 'sm' | 'md' | 'lg';
-export declare type RadioGroupDirection = 'row' | 'column';

package/build/components/Forms/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Button';
+export * from './Checkbox';
 export * from './Textarea';
 export * from './TextInput';
 export * from './Radio';

package/build/index.js

@@ -3599,6 +3599,166 @@ function withFormControl(Component) {
     return WithFormControl;
 }
 
+var Checkbox = function (_a) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'square' : _c, isIndeterminate = _a.isIndeterminate, rest = __rest(_a, ["children", "size", "variant", "isIndeterminate"]);
+    var iconName = isIndeterminate && variant === 'square' ? 'minus' : 'checkmark';
+    return (React__default["default"].createElement(react.Checkbox, __assign({}, rest, { size: size, icon: React__default["default"].createElement(Icon, { name: iconName, size: size }), variant: variant, alignItems: "flex-start" }), children));
+};
+
+var CheckboxGroup = function (_a) {
+    var checkboxes = _a.checkboxes, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, spacing = _a.spacing, rest = __rest(_a, ["checkboxes", "size", "direction", "spacing"]);
+    rest.$isFieldInline; var domProps = __rest(rest, ["$isFieldInline"]);
+    return (React__default["default"].createElement(react.CheckboxGroup, __assign({}, domProps),
+        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size }))); }))));
+};
+CheckboxGroup.displayName = 'CheckboxGroup';
+var WrappedCheckboxGroup = withFormControl(CheckboxGroup);
+
+var CheckboxConfig = {
+    baseStyle: {
+        label: {
+            color: adaptiveColors.text.light.default,
+            marginLeft: 2,
+        },
+    },
+    sizes: {
+        sm: {
+            control: {
+                height: 3,
+                width: 3,
+                mt: 1,
+            },
+            label: {
+                fontSize: fontSizes.sm,
+            },
+        },
+        md: {
+            control: {
+                height: 4,
+                width: 4,
+                mt: 1,
+            },
+            label: {
+                fontSize: fontSizes.md,
+            },
+        },
+        lg: {
+            control: {
+                height: 5,
+                width: 5,
+                mt: '3px',
+            },
+            label: {
+                fontSize: fontSizes.lg,
+                marginLeft: 3,
+            },
+        },
+    },
+    variants: {
+        square: {
+            control: {
+                bg: colors.white,
+                border: borders['1px'],
+                borderColor: colors.border.light.medium,
+                borderRadius: radii.sm,
+                color: colors.white,
+                _hover: {
+                    borderColor: colors.border.light.heavy,
+                    _disabled: {
+                        borderColor: colors.gray[200],
+                    },
+                },
+                _checked: {
+                    bg: colors.teal['600'],
+                    borderColor: colors.teal['600'],
+                    color: colors.white,
+                    _hover: {
+                        bg: colors.teal['700'],
+                        borderColor: colors.teal['700'],
+                    },
+                    _disabled: {
+                        bg: colors.teal[600],
+                        borderColor: colors.teal[600],
+                        color: colors.white,
+                        _hover: {
+                            bg: colors.teal[600],
+                            borderColor: colors.teal[600],
+                        },
+                    },
+                },
+                _disabled: {
+                    bg: colors.gray[200],
+                    borderColor: colors.gray[200],
+                    color: colors.gray[200],
+                    opacity: 0.4,
+                },
+                _invalid: {
+                    borderColor: colors.border.light.error,
+                    _hover: {
+                        borderColor: colors.border.light.error,
+                    },
+                    _checked: {
+                        borderColor: colors.teal[600],
+                        _hover: {
+                            borderColor: colors.teal[700],
+                        },
+                    },
+                    _disabled: {
+                        color: colors.white,
+                        _hover: {
+                            borderColor: colors.teal[600],
+                        },
+                    },
+                },
+            },
+        },
+        round: {
+            control: {
+                bg: colors.background.grayDark,
+                border: borders['1px'],
+                borderColor: colors.transparent,
+                borderRadius: radii.full,
+                color: colors.transparent,
+                _hover: {
+                    bg: colors.gray['400'],
+                    _disabled: {
+                        bg: colors.background.grayDark,
+                    },
+                },
+                _checked: {
+                    bg: colors.status.success,
+                    borderColor: colors.transparent,
+                    color: colors.white,
+                    _hover: {
+                        bg: colors.green['500'],
+                        borderColor: colors.transparent,
+                    },
+                    _disabled: {
+                        bg: colors.status.success,
+                        borderColor: colors.transparent,
+                        color: colors.white,
+                        _hover: {
+                            bg: colors.status.success,
+                        },
+                    },
+                    _invalid: {
+                        borderColor: colors.transparent,
+                    },
+                },
+                _disabled: {
+                    bg: colors.background.grayDark,
+                    borderColor: colors.transparent,
+                    color: colors.transparent,
+                    opacity: 0.4,
+                },
+                _invalid: {
+                    borderColor: colors.border.light.error,
+                },
+            },
+        },
+    },
+};
+
 var Textarea = function (props) {
     return React__default["default"].createElement(react.Textarea, __assign({ background: colors.background.light }, props));
 };
@@ -3688,7 +3848,7 @@ var TextInputConfig = __assign({}, FormControlConfig);
 
 var Radio = function (_a) {
     var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, rest = __rest(_a, ["children", "size"]);
-    return (React__default["default"].createElement(react.Radio, __assign({}, rest, { size: size }), children));
+    return (React__default["default"].createElement(react.Radio, __assign({}, rest, { size: size, alignItems: "flex-start" }), children));
 };
 
 var RadioGroup = function (_a) {
@@ -3763,8 +3923,9 @@ var RadioConfig = {
                 fontSize: fontSizes.sm,
             },
             control: {
-                height: '12px',
-                width: '12px',
+                height: 3,
+                width: 3,
+                mt: 1,
             },
         },
         md: {
@@ -3772,8 +3933,9 @@ var RadioConfig = {
                 fontSize: fontSizes.md,
             },
             control: {
-                height: '16px',
-                width: '16px',
+                height: 4,
+                width: 4,
+                mt: 1,
             },
         },
         lg: {
@@ -3782,8 +3944,9 @@ var RadioConfig = {
                 marginLeft: 3,
             },
             control: {
-                height: '20px',
-                width: '20px',
+                height: 5,
+                width: 5,
+                mt: '3px',
             },
         },
     },
@@ -6692,6 +6855,7 @@ var theme = react.extendTheme({
         Tag: TagConfig,
         Tabs: TabsConfig,
         Radio: RadioConfig,
+        Checkbox: CheckboxConfig,
     },
 });
 
@@ -9303,6 +9467,10 @@ Object.defineProperty(exports, 'Box', {
     enumerable: true,
     get: function () { return react.Box; }
 });
+Object.defineProperty(exports, 'CCheckboxGroup', {
+    enumerable: true,
+    get: function () { return react.CheckboxGroup; }
+});
 Object.defineProperty(exports, 'CRadioGroup', {
     enumerable: true,
     get: function () { return react.RadioGroup; }
@@ -9471,17 +9639,25 @@ Object.defineProperty(exports, 'WrapItem', {
     enumerable: true,
     get: function () { return react.WrapItem; }
 });
+Object.defineProperty(exports, 'useCheckbox', {
+    enumerable: true,
+    get: function () { return react.useCheckbox; }
+});
+Object.defineProperty(exports, 'useCheckboxGroup', {
+    enumerable: true,
+    get: function () { return react.useCheckboxGroup; }
+});
 Object.defineProperty(exports, 'useDisclosure', {
     enumerable: true,
     get: function () { return react.useDisclosure; }
 });
-Object.defineProperty(exports, 'useRadioGroup', {
+Object.defineProperty(exports, 'useRadio', {
     enumerable: true,
-    get: function () { return react.useRadioGroup; }
+    get: function () { return react.useRadio; }
 });
-Object.defineProperty(exports, 'useRadioGroupContext', {
+Object.defineProperty(exports, 'useRadioGroup', {
     enumerable: true,
-    get: function () { return react.useRadioGroupContext; }
+    get: function () { return react.useRadioGroup; }
 });
 exports.Avatar = Avatar;
 exports.AvatarConfig = AvatarConfig;
@@ -9491,6 +9667,9 @@ exports.BetaModal = modal_component;
 exports.Button = Button;
 exports.ButtonSizeConfig = ButtonSizeConfig;
 exports.ButtonVariantConfig = ButtonVariantConfig;
+exports.Checkbox = Checkbox;
+exports.CheckboxConfig = CheckboxConfig;
+exports.CheckboxGroup = WrappedCheckboxGroup;
 exports.DrawerConfig = DrawerConfig;
 exports.Heading = Heading;
 exports.HeadingConfig = HeadingConfig;