@televet/kibble-ui 1.1.0 → 1.2.0-beta.0

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

@@ -0,0 +1,2 @@
+import { ButtonStyleConfig } from './button.types';
+export declare const ButtonConfig: ButtonStyleConfig;

package/build/components/Drawer/drawer.records.d.ts

@@ -0,0 +1,13 @@
+export declare const DrawerConfig: {
+    variants: {
+        alwaysOpen: {
+            parts: string[];
+            dialog: {
+                pointerEvents: string;
+            };
+            dialogContainer: {
+                pointerEvents: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,3 @@
+export * from './tooltip.component';
+export * from './tooltip.model';
+export * from './tooltip.config';

package/build/components/Tooltip/tooltip.component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TooltipProps as ChakraTooltipProps } from '@chakra-ui/react';
+export interface TooltipProps extends ChakraTooltipProps {
+    label: string;
+}
+export declare const Tooltip: ({ children, label, openDelay, ...rest }: TooltipProps) => JSX.Element;

package/build/components/Tooltip/tooltip.config.d.ts

@@ -0,0 +1,8 @@
+import { TooltipStyleConfig } from './tooltip.model';
+export declare const TooltipGlobalStyle: {
+    '[id^=tooltip]': {
+        padding: string;
+        borderRadius: string;
+    };
+};
+export declare const TooltipConfig: TooltipStyleConfig;

package/build/components/Tooltip/tooltip.model.d.ts

@@ -0,0 +1,4 @@
+import { AdaptiveColor } from '../../theme/tokens';
+export interface TooltipStyleConfig {
+    color: AdaptiveColor;
+}

package/build/components/Tooltip/tooltip.records.d.ts

@@ -0,0 +1,9 @@
+import { TooltipStyleConfig } from './tooltip.model';
+export declare const TooltipGlobalStyle: {
+    '[id^=tooltip]': {
+        padding: string;
+        borderRadius: string;
+        textTransform: string;
+    };
+};
+export declare const TooltipConfig: TooltipStyleConfig;

package/build/components/Typography/Heading/heading.records.d.ts

@@ -0,0 +1,2 @@
+import { HeadingStyleConfig } from './heading.types';
+export declare const HeadingConfig: HeadingStyleConfig;

package/build/components/Typography/Text/text.records.d.ts

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

package/build/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './Logo';
 export * from './Typography';
 export * from './Textarea';
 export * from './Button';
+export * from './Tooltip';

package/build/index.js

@@ -2741,6 +2741,39 @@ var TextareaConfig = {
 
 var camelCaseToLabel = function (s) {
     return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
+};
+var toTitleCase = function (s) {
+    var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|v.?|vs.?|via)$/i;
+    var alphanumericPattern = /([A-Za-z0-9\u00C0-\u00FF])/;
+    var wordSeparators = /([ :–—-])/;
+    return s
+        .split(wordSeparators)
+        .map(function (current, index, array) {
+        if (
+        /* Check for small words */
+        current.search(smallWords) > -1 &&
+            /* Skip first and last word */
+            index !== 0 &&
+            index !== array.length - 1 &&
+            /* Ignore title end and subtitle start */
+            array[index - 3] !== ':' &&
+            array[index + 1] !== ':' &&
+            /* Ignore small words that start a hyphenated phrase */
+            (array[index + 1] !== '-' || (array[index - 1] === '-' && array[index + 1] === '-'))) {
+            return current.toLowerCase();
+        }
+        /* Ignore intentional capitalization */
+        if (current.substring(1).search(/[A-Z]|\../) > -1) {
+            return current;
+        }
+        /* Ignore URLs */
+        if (array[index + 1] === ':' && array[index + 2] !== '') {
+            return current;
+        }
+        /* Capitalize the first letter */
+        return current.replace(alphanumericPattern, function (match) { return match.toUpperCase(); });
+    })
+        .join('');
 };
 
 var Button = React.forwardRef(function (props, ref) {
@@ -2962,8 +2995,31 @@ var ButtonConfig = {
     },
 };
 
+var useAdaptiveColor = function (color) { return react.useColorModeValue(color.light, color.dark); };
+
+var Tooltip = function (_a) {
+    var children = _a.children, label = _a.label, _b = _a.openDelay, openDelay = _b === void 0 ? 350 : _b, rest = __rest(_a, ["children", "label", "openDelay"]);
+    var components = useTheme().components;
+    var bg = useAdaptiveColor(components.Tooltip.color);
+    var l = toTitleCase(label.toLowerCase());
+    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: l, bg: bg, openDelay: openDelay }, rest), children));
+};
+
+var TooltipGlobalStyle = {
+    '[id^=tooltip]': {
+        padding: '4px 8px 4px 8px !important',
+        borderRadius: '4px !important',
+    },
+};
+var TooltipConfig = {
+    color: { light: semanticTokens.background.dark, dark: semanticTokens.background.light },
+};
+
 // @ts-ignore
 var theme = react.extendTheme({
+    styles: {
+        global: __assign({}, TooltipGlobalStyle),
+    },
     blur: blur,
     borders: borders,
     colors: colors,
@@ -2988,6 +3044,7 @@ var theme = react.extendTheme({
         Textarea: TextareaConfig,
         Drawer: DrawerConfig,
         Button: ButtonConfig,
+        Tooltip: TooltipConfig,
     },
 });
 
@@ -3009,6 +3066,9 @@ exports.Text = Text;
 exports.TextConfig = TextConfig;
 exports.Textarea = Textarea;
 exports.TextareaConfig = TextareaConfig;
+exports.Tooltip = Tooltip;
+exports.TooltipConfig = TooltipConfig;
+exports.TooltipGlobalStyle = TooltipGlobalStyle;
 exports.theme = theme;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map