@televet/kibble-ui 1.0.15 → 1.0.16-beta.0

package/build/components/Button/button.component.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import { IconName } from '../Icon';
-import { ButtonOptions } from '@chakra-ui/button/dist/declarations/src/button';
 import { ButtonSize, ButtonVariant } from './button.types';
-export interface ButtonProps extends ButtonOptions {
+export interface ButtonProps extends ChakraButtonProps {
     children?: ReactNode;
-    variant: ButtonVariant;
-    size: ButtonSize;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     iconName?: IconName;
     iconPosition?: 'left' | 'right';
 }
-export declare const Button: (props: ButtonProps) => JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/build/components/Icon/icon.component.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconColor, IconName, IconsSize } from './icon.types';
 export interface IconProps {
     name: IconName;
     size?: IconsSize;
     color?: IconColor;
 }
-export declare const Icon: ({ name, size, color }: IconProps) => JSX.Element;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<any>>;

package/build/index.js

@@ -762,26 +762,27 @@ var useAdaptiveColorMap = function (map, token) {
     return react.useColorModeValue(map.light[token], map.dark[token]);
 };
 
-var Icon = function (_a) {
+var Icon = React.forwardRef(function (_a, ref) {
     var name = _a.name, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c;
     var colors = useTheme().colors;
     var c = useAdaptiveColorMap(colors.icon, color);
     var MappedIcon = IconMap[name];
     var d = IconSizeMap[size] + 'px';
-    return React__default["default"].createElement(MappedIcon, { width: d, height: d, color: c });
-};
+    return React__default["default"].createElement(MappedIcon, { ref: ref, width: d, height: d, color: c });
+});
+Icon.displayName = 'Icon';
 
 var camelCaseToLabel = function (s) {
     return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
 };
 
-var Button = function (props) {
+var Button = React.forwardRef(function (props, ref) {
     var components = useTheme().components;
-    var _a = components.Button[props.variant], variant = _a.variant, light = _a.light, dark = _a.dark;
+    var _a = components.Button[props.variant || 'primary'], variant = _a.variant, light = _a.light, dark = _a.dark;
     var bg = react.useColorModeValue(light.default, dark.default);
     var color = react.useColorModeValue(light.content, dark.content);
     var borderColor = react.useColorModeValue(light.border, dark.border);
-    var p = structuredClone(__assign(__assign({}, props), { variant: variant, bg: bg, color: color, borderColor: borderColor }));
+    var p = __assign(__assign({}, props), { variant: variant, bg: bg, color: color, borderColor: borderColor });
     var hoverClass = {
         bg: react.useColorModeValue(light.hover, dark.hover),
     };
@@ -793,15 +794,16 @@ var Button = function (props) {
         var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size, name: p.iconName });
         if (!p.children) {
             var label = camelCaseToLabel(p.iconName);
-            return React__default["default"].createElement(react.IconButton, __assign({ _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon }, p));
+            return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon }, p)));
         }
         else {
             var position = p.iconPosition === 'right' ? 'rightIcon' : 'leftIcon';
             p[position] = ButtonIcon;
         }
     }
-    return (React__default["default"].createElement(react.Button, __assign({ _hover: hoverClass, _active: activeClass }, p), props.children));
-};
+    return (React__default["default"].createElement(react.Button, __assign({ ref: ref, _hover: hoverClass, _active: activeClass }, p), props.children));
+});
+Button.displayName = 'Button';
 
 var baseColors = {
     comet: {
@@ -1531,7 +1533,7 @@ var Tooltip = function (_a) {
     var children = _a.children, label = _a.label, placement = _a.placement, isOpen = _a.isOpen, defaultIsOpen = _a.defaultIsOpen, rest = __rest(_a, ["children", "label", "placement", "isOpen", "defaultIsOpen"]);
     var components = useTheme().components;
     var bg = useAdaptiveColor(components.Tooltip.color);
-    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: label, placement: placement, shouldWrapChildren: true, bg: bg, isOpen: isOpen, defaultIsOpen: defaultIsOpen }, rest), children));
+    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: label, placement: placement, bg: bg, isOpen: isOpen, defaultIsOpen: defaultIsOpen }, rest), children));
 };
 
 var TooltipGlobalStyle = {
@@ -1594,7 +1596,7 @@ var TextareaConfig = {
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
-    // global: { ...TooltipGlobalStyle },
+        global: __assign({}, TooltipGlobalStyle),
     },
     blur: blur,
     borders: borders,
@@ -1618,9 +1620,9 @@ var theme = react.extendTheme({
         Text: TextConfig,
         Heading: HeadingConfig,
         Textarea: TextareaConfig,
-        // Button: ButtonConfig,
+        Button: ButtonConfig,
         Drawer: DrawerConfig,
-        // Tooltip: TooltipConfig,
+        Tooltip: TooltipConfig,
     },
 });