@televet/kibble-ui 1.17.15 → 1.17.16-beta.321x3bw.2

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/Forms/TimePicker/components/ScrollContainer.d.ts

@@ -0,0 +1,4 @@
+declare const ScrollContainer: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default ScrollContainer;

package/build/components/Forms/TimePicker/components/TimeOption.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+interface TimeOptionProps {
+    value: string;
+    innerRef?: MutableRefObject<HTMLDivElement | null> | null;
+    isSelected: boolean;
+    handleClick: (selectedValue: string) => void;
+}
+declare const TimeOption: ({ value, innerRef, isSelected, handleClick }: TimeOptionProps) => JSX.Element;
+export default TimeOption;

package/build/components/Forms/TimePicker/components/TimeRange/TimeRange.component.d.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '@chakra-ui/react';
+import { TimePickerProps } from '../../timepicker.component';
+export interface TimeRangeProps {
+    initialStartTime: Date;
+    initialEndTime: Date;
+    onStartTimeChange: (startTime: Date) => void;
+    onEndTimeChange: (endTime: Date) => void;
+    startTimePickerProps: TimePickerProps;
+    endTimePickerProps: TimePickerProps;
+    dashContainerProps: BoxProps;
+}
+export declare const TimeRange: ({ startTimePickerProps, endTimePickerProps, dashContainerProps, }: TimeRangeProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './timepicker.component';
+export * from './timepicker.types';
+export * from './components/TimeRange/TimeRange.component';

package/build/components/Forms/TimePicker/timepicker.argTypes.d.ts

@@ -0,0 +1,70 @@
+export declare const timePickerArgTypes: {
+    initialTime: {
+        defaultValue: Date;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: null;
+        };
+        type: {
+            name: string;
+        };
+    };
+    minuteInterval: {
+        defaultValue: number;
+        description: string;
+        control: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: number;
+        };
+        type: {
+            name: string;
+        };
+    };
+    placement: {
+        description: string;
+        options: import("@chakra-ui/popper/dist/declarations/src/popper.placement").PlacementWithLogical[];
+        control: {
+            type: string;
+        };
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    onTimeChange: {
+        description: string;
+        action: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    onChange: any;
+    size: any;
+    label: any;
+    helperText: any;
+    helperTextAlignment: any;
+    errorText: any;
+    isDisabled: any;
+    isInvalid: any;
+    useInvalidIcon: any;
+    useInvalidText: any;
+    useInvalidBorder: any;
+    invalidIconColor: any;
+    isReadOnly: any;
+    isRequired: any;
+    autoFocus: any;
+    labelStyle: any;
+    formControlStyle: any;
+};

package/build/components/Forms/TimePicker/timepicker.component.d.ts

@@ -0,0 +1,10 @@
+import { PlacementWithLogical } from '@chakra-ui/react';
+import { TextInputProps } from '../TextInput';
+export interface TimePickerProps {
+    initialTime: Date;
+    minuteInterval?: number;
+    inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;
+    placement?: PlacementWithLogical;
+    onTimeChange?: (time: Date) => void;
+}
+export declare const TimePicker: ({ initialTime, minuteInterval, inputProps, placement, onTimeChange, }: TimePickerProps) => JSX.Element;

package/build/components/Forms/TimePicker/timepicker.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum Meridiem {
+    AM = "AM",
+    PM = "PM"
+}

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

@@ -0,0 +1,5 @@
+import { IconProps } from '../../../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,120 @@
+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;
+            };
+        };
+    };
+    to: {
+        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;
+    };
+    onDark: {
+        control: string;
+        description: string;
+        defaultValue: boolean;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    colorToken: {
+        control: string;
+        options: string[];
+        defaultValue: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        description: string;
+    };
+};

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { LinkProps as CLinkProps } from '@chakra-ui/react';
+import { LinkIconProps } from './components/linkIcon.component';
+import { TextColor, TextSize } from 'components/Typography';
+export interface LinkProps extends CLinkProps {
+    children: ReactNode;
+    iconProps?: LinkIconProps;
+    size?: TextSize;
+    colorToken?: TextColor;
+    onDark?: boolean;
+    to?: string;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

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/Overlay/Popover/popover.component.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PopoverProps as ChakraPopoverProps } from '@chakra-ui/react';
+import { PopoverProps as ChakraPopoverProps, PopoverContentProps } from '@chakra-ui/react';
 import { PopoverSize } from './popover.types';
 import { Token } from '@chakra-ui/styled-system/dist/declarations/src/utils';
 import * as CSS from 'csstype';
@@ -10,5 +10,6 @@ export interface PopoverProps extends ChakraPopoverProps {
     allowEscape?: boolean;
     size?: PopoverSize;
     shadow?: Token<CSS.Property.BoxShadow | number, 'shadows'>;
+    contentProps?: PopoverContentProps;
 }
-export declare const Popover: ({ children, popoverTrigger, darkMode, allowEscape, size, shadow, ...rest }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ children, popoverTrigger, darkMode, allowEscape, size, shadow, contentProps, ...rest }: PopoverProps) => JSX.Element;

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

@@ -3571,7 +3571,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';
 
@@ -3763,23 +3763,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: {
@@ -3994,7 +3977,7 @@ function withFormControl(Component) {
         var labelColor = useAdaptiveColorMap(colors.text, 'default');
         return (React__default["default"].createElement(react.FormControl, __assign({}, formControlStyle, { isInvalid: isInvalid, isRequired: isRequired, isReadOnly: isReadOnly, isDisabled: isDisabled }),
             label && (React__default["default"].createElement(react.FormLabel, __assign({ display: isFieldInline ? 'inline-block' : 'block', color: labelColor, fontSize: fontSizes[size] }, labelStyle), label)),
-            React__default["default"].createElement(react.Flex, { align: "center", gap: 2 },
+            React__default["default"].createElement(react.Flex, { align: "center", gap: 2, display: isFieldInline ? 'inline-block' : 'block' },
                 React__default["default"].createElement(Component, __assign({ size: size }, props, { isFieldInline: isFieldInline, errorBorderColor: useInvalidBorder ? colors.border.light.error : colors.border.light.default, focusBorderColor: colors.border.light.focus })),
                 useInvalidIcon && isInvalid && React__default["default"].createElement(Icon, { name: "warningSign", color: invalidIconColor || 'error', size: size })),
             shouldShowBottomContent && (React__default["default"].createElement(react.Flex, { mt: 2, w: "100%", justifyContent: alignment, alignItems: "center" },
@@ -15213,14 +15196,14 @@ var ModalFooterButtons = function (_a) {
 };
 
 var Popover = function (_a) {
-    var children = _a.children, popoverTrigger = _a.popoverTrigger, darkMode = _a.darkMode, _b = _a.allowEscape, allowEscape = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.shadow, shadow = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow"]);
+    var children = _a.children, popoverTrigger = _a.popoverTrigger, darkMode = _a.darkMode, _b = _a.allowEscape, allowEscape = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.shadow, shadow = _d === void 0 ? 'md' : _d, contentProps = _a.contentProps, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow", "contentProps"]);
     var _e = useTheme(), colors = _e.colors, components = _e.components;
     var width = components.Popover[size].width;
     var adaptiveBackground = useAdaptiveColor(colors.background);
     var bg = !darkMode ? adaptiveBackground : colors.background.dark;
     return (React__default["default"].createElement(react.Popover, __assign({}, rest, { closeOnBlur: allowEscape, closeOnEsc: allowEscape }),
         React__default["default"].createElement(react.PopoverTrigger, null, popoverTrigger),
-        withDarkMode$1(React__default["default"].createElement(react.PopoverContent, { width: width, bg: bg, shadow: shadow },
+        withDarkMode$1(React__default["default"].createElement(react.PopoverContent, __assign({ width: width, bg: bg, shadow: shadow }, contentProps),
             React__default["default"].createElement(react.PopoverArrow, { bg: bg }),
             React__default["default"].createElement(Text, { size: "sm" }, children)), !!darkMode)));
 };
@@ -22022,6 +22005,54 @@ var TabsConfig = {
     },
 };
 
+var LinkIcon = function (iconProps) {
+    iconProps.position; var rest = __rest(iconProps, ["position"]);
+    return 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':
+        case 'xl':
+        case '2xl':
+        case '3xl':
+        case '4xl':
+            return 'lg';
+        case '5xl':
+        case '6xl':
+            return '2xl';
+    }
+};
+
+var Link = React.forwardRef(function (props, ref) {
+    var colors = useTheme().colors;
+    var children = props.children, color = props.color, _a = props.colorToken, colorToken = _a === void 0 ? 'link' : _a, _b = props.onDark, onDark = _b === void 0 ? false : _b, iconProps = props.iconProps, _c = props.size, size = _c === void 0 ? 'md' : _c, rest = __rest(props, ["children", "color", "colorToken", "onDark", "iconProps", "size"]);
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, onDark);
+    var mappIconSize = useIconTextSizeMap(size);
+    if (iconProps && !iconProps.position) {
+        iconProps.position = 'start';
+    }
+    return (React__default["default"].createElement(react.Link, __assign({ display: "inline-block", size: size, ref: ref, color: color || adaptiveColor }, rest),
+        React__default["default"].createElement(react.HStack, { spacing: 1, align: "center" },
+            (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)))));
+});
+Link.displayName = 'Link';
+
+var BaseLinkConfig = {
+    baseStyle: {
+        textDecoration: 'underline',
+    },
+};
+var LinkConfig = __assign(__assign({}, BaseLinkConfig), TextConfig);
+
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
@@ -22065,6 +22096,7 @@ var theme = react.extendTheme({
         Tabs: TabsConfig,
         Radio: RadioConfig,
         Checkbox: CheckboxConfig,
+        Link: LinkConfig,
     },
 });
 
@@ -24764,6 +24796,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; }
@@ -24898,6 +24934,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;