@televet/kibble-ui 1.17.13 → 1.17.14-beta.44rung5.0

package/build/components/Forms/Button/button.types.d.ts

@@ -1,8 +1,8 @@
 import { AdaptiveColorMap } from '../../../theme/tokens';
 export interface ButtonVariantConfigType extends AdaptiveColorMap<ButtonColorOptionsType> {
-    variant: 'solid' | 'outline' | 'ghost' | 'link';
+    variant: 'solid' | 'outline' | 'ghost';
 }
-export declare type ButtonVariantType = 'primary' | 'primaryDestructive' | 'secondary' | 'secondaryDestructive' | 'secondarySubtle' | 'secondarySubtleDestructive' | 'tertiary' | 'tertiaryDestructive' | 'ghost' | 'ghostNeutral' | 'ghostDestructive' | 'link';
+export declare type ButtonVariantType = 'primary' | 'primaryDestructive' | 'secondary' | 'secondaryDestructive' | 'secondarySubtle' | 'secondarySubtleDestructive' | 'tertiary' | 'tertiaryDestructive' | 'ghost' | 'ghostNeutral' | 'ghostDestructive';
 export declare type ButtonColorOptionsType = 'content' | 'default' | 'hover' | 'active' | 'border';
 export declare type ButtonSizeType = 'xs' | 'sm' | 'md' | 'lg';
 export declare type ButtonStyleType = Record<ButtonVariantType, ButtonVariantConfigType>;

package/build/components/Navigation/Link/components/linkIcon.component.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from 'components/MediaAndIcons/Icon';
+export interface LinkIconProps extends IconProps {
+    position?: 'start' | 'end';
+}
+export declare const LinkIcon: (iconProps: LinkIconProps) => JSX.Element;

package/build/components/Navigation/Link/index.d.ts

@@ -0,0 +1,2 @@
+export * from './link.component';
+export * from './link.config';

package/build/components/Navigation/Link/link.argTypes.d.ts

@@ -0,0 +1,81 @@
+export declare const linkArgTypes: {
+    isExternal: {
+        control: string;
+        description: string;
+        defaultValue: boolean;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    size: {
+        control: string;
+        options: string[];
+        defaultValue: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        description: string;
+    };
+    href: {
+        type: {
+            name: string;
+        };
+        control: string;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    children: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        control: string;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    onClick: {
+        type: string;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    as: {
+        type: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        description: string;
+    };
+    iconProps: {
+        type: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        description: string;
+    };
+};

package/build/components/Navigation/Link/link.component.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { LinkProps as CLinkProps } from '@chakra-ui/react';
+import { LinkIconProps } from './components/linkIcon.component';
+import { TextSize } from 'components/Typography';
+export interface LinkProps extends CLinkProps {
+    children: ReactNode;
+    iconProps?: LinkIconProps;
+    size?: TextSize;
+}
+export declare const Link: ({ children, iconProps, size, ...rest }: LinkProps) => JSX.Element;

package/build/components/Navigation/Link/link.config.d.ts

@@ -0,0 +1,19 @@
+export declare const LinkConfig: {
+    parts?: undefined;
+    baseStyle?: import("@chakra-ui/react").CSSWithMultiValues | import("@chakra-ui/theme-tools").SystemStyleFunction | undefined;
+    sizes?: Record<string, import("@chakra-ui/theme-tools").SystemStyleInterpolation> | undefined;
+    variants?: Record<string, import("@chakra-ui/theme-tools").SystemStyleInterpolation> | undefined;
+    defaultProps?: import("@chakra-ui/react").ComponentDefaultProps | undefined;
+} | {
+    parts: string[];
+    baseStyle?: import("@chakra-ui/react").CSSWithMultiValues | import("@chakra-ui/theme-tools").SystemStyleFunction | Partial<Record<string, import("@chakra-ui/react").CSSObject>> | import("@chakra-ui/theme-tools").PartsStyleFunction<{
+        __type: string;
+    }> | undefined;
+    sizes?: Record<string, import("@chakra-ui/theme-tools").SystemStyleInterpolation> | Record<string, import("@chakra-ui/theme-tools").PartsStyleInterpolation<{
+        __type: string;
+    }>> | undefined;
+    variants?: Record<string, import("@chakra-ui/theme-tools").SystemStyleInterpolation> | Record<string, import("@chakra-ui/theme-tools").PartsStyleInterpolation<{
+        __type: string;
+    }>> | undefined;
+    defaultProps?: import("@chakra-ui/react").ComponentDefaultProps | undefined;
+};

package/build/components/Navigation/LinkOverlay/index.d.ts

@@ -0,0 +1 @@
+export { LinkOverlay } from '@chakra-ui/react';

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

@@ -0,0 +1,2 @@
+export * from './Link';
+export * from './LinkOverlay';

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

@@ -1,2 +1,3 @@
 export declare type TextVariant = 'regular' | 'semibold';
 export declare type HTMLTagName = 'p' | 'span' | 'div' | 'i' | 'u' | 's' | 'kbd' | 'sub' | 'sup';
+export declare type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';

package/build/components/index.d.ts

@@ -7,4 +7,5 @@ export * from './MediaAndIcons';
 export * from './Other';
 export * from './Overlay';
 export * from './Typography';
+export * from './Navigation';
 export { Divider, InputGroup, InputLeftElement, InputRightElement } from '@chakra-ui/react';

package/build/hooks/useIconTextSizeMap.d.ts

@@ -0,0 +1,2 @@
+import { IconsSize, TextSize } from 'components';
+export declare const useIconTextSizeMap: (textSize: TextSize) => IconsSize;

package/build/index.js

@@ -3512,7 +3512,7 @@ var Button = React.forwardRef(function (props, ref) {
             domProps[position] = ButtonIcon;
         }
     }
-    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: variant === 'link' ? fontWeights.normal : fontWeights.semibold, cursor: "pointer", textDecoration: variant === 'link' ? 'underline' : 'none', ref: ref, _hover: hoverClass, _active: activeClass, size: p.size || 'md', iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
+    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, cursor: "pointer", ref: ref, _hover: hoverClass, _active: activeClass, size: p.size || 'md', iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
 });
 Button.displayName = 'Button';
 
@@ -3704,23 +3704,6 @@ var ButtonVariantConfig = {
             border: colors$1.transparent,
         },
     },
-    link: {
-        variant: 'link',
-        light: {
-            content: colors$1.text.light.link,
-            default: colors$1.transparent,
-            hover: colors$1.transparent,
-            active: colors$1.transparent,
-            border: colors$1.transparent,
-        },
-        dark: {
-            content: colors$1.text.dark.link,
-            default: colors$1.transparent,
-            hover: colors$1.transparent,
-            active: colors$1.transparent,
-            border: colors$1.transparent,
-        },
-    },
 };
 var ButtonSizeConfig = {
     lg: {
@@ -15303,7 +15286,7 @@ var TextConfig = {
 
 var AlertTitle = function (props) {
     var title = props.title, titleProps = props.titleProps;
-    return (React__default["default"].createElement(Heading, __assign({ className: "Alert__Title", flexGrow: 1, lineHeight: 6, size: "sm" }, titleProps), title));
+    return (React__default["default"].createElement(Heading, __assign({ className: "Alert__Title", flexGrow: 1, colorToken: "default", lineHeight: 6, size: "sm" }, titleProps), title));
 };
 
 var AlertIcon = function (props) {
@@ -21963,6 +21946,57 @@ var TabsConfig = {
     },
 };
 
+var LinkIcon = function (iconProps) {
+    iconProps.position; var rest = __rest(iconProps, ["position"]);
+    return (React__default["default"].createElement(react.Box, null,
+        React__default["default"].createElement(Icon, __assign({}, rest))));
+};
+
+var useIconTextSizeMap = function (textSize) {
+    switch (textSize) {
+        case 'xs':
+            return 'xs';
+        case 'sm':
+            return 'sm';
+        case 'md':
+            return 'md';
+        case 'lg':
+            return 'lg';
+        case 'xl':
+        case '2xl':
+        case '3xl':
+        case '4xl':
+            return 'lg';
+        case '5xl':
+        case '6xl':
+            return '2xl';
+    }
+};
+
+var Link = function (_a) {
+    var children = _a.children, iconProps = _a.iconProps, _b = _a.size, size = _b === void 0 ? 'md' : _b, rest = __rest(_a, ["children", "iconProps", "size"]);
+    var mappIconSize = useIconTextSizeMap(size);
+    if (iconProps && !iconProps.position) {
+        iconProps.position = 'start';
+    }
+    return (React__default["default"].createElement(react.Link, __assign({ size: size }, rest),
+        React__default["default"].createElement(react.HStack, null,
+            (iconProps === null || iconProps === void 0 ? void 0 : iconProps.position) === 'start' && React__default["default"].createElement(LinkIcon, __assign({ size: mappIconSize }, iconProps)),
+            React__default["default"].createElement(react.Box, null, children),
+            (iconProps === null || iconProps === void 0 ? void 0 : iconProps.position) === 'end' && React__default["default"].createElement(LinkIcon, __assign({ size: mappIconSize }, iconProps)))));
+};
+
+var BaseLinkConfig = {
+    baseStyle: {
+        textDecoration: 'underline',
+        color: adaptiveColors.text.light.link,
+        _hover: {
+            color: coreColors.teal[700],
+        },
+    },
+};
+var LinkConfig = __assign(__assign({}, BaseLinkConfig), TextConfig);
+
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
@@ -22006,6 +22040,7 @@ var theme = react.extendTheme({
         Tabs: TabsConfig,
         Radio: RadioConfig,
         Checkbox: CheckboxConfig,
+        Link: LinkConfig,
     },
 });
 
@@ -24705,6 +24740,10 @@ Object.defineProperty(exports, 'InputRightElement', {
     enumerable: true,
     get: function () { return react.InputRightElement; }
 });
+Object.defineProperty(exports, 'LinkOverlay', {
+    enumerable: true,
+    get: function () { return react.LinkOverlay; }
+});
 Object.defineProperty(exports, 'MenuDivider', {
     enumerable: true,
     get: function () { return react.MenuDivider; }
@@ -24839,6 +24878,8 @@ exports.HeadingConfig = HeadingConfig;
 exports.Icon = Icon;
 exports.KibbleThemeProvider = KibbleThemeProvider;
 exports.LightStatusVariantMap = LightStatusVariantMap;
+exports.Link = Link;
+exports.LinkConfig = LinkConfig;
 exports.Logo = Logo;
 exports.Menu = Menu;
 exports.MenuConfig = MenuConfig;