@televet/kibble-ui 1.9.0 → 1.10.0

package/build/components/Overlay/Modal/index.d.ts

@@ -0,0 +1,7 @@
+export * from './modal.types';
+export * as BetaModal from './modal.component';
+export * from './modalHeader.component';
+export * from './modalCloseButton.component';
+export * from './modalBody.component';
+export * from './modalFooter.component';
+export * from './modalFooterButtons.component';

package/build/components/Overlay/Modal/modal.component.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { ModalProps as ChakraModalProps } from '@chakra-ui/react';
+import { FocusableElement } from '@chakra-ui/utils';
+import { ModalSize } from './modal.types';
+declare type ResponsiveBreakpoints = 'base' | 'md';
+export interface ModalProps extends ChakraModalProps {
+    children: ReactNode;
+    isCentered?: boolean;
+    responsiveModalSizes?: Partial<Record<ResponsiveBreakpoints, ModalSize>>;
+    allowEscape?: boolean;
+    useFullScreenMobile?: boolean;
+    darkMode?: boolean;
+    initialFocusRef?: React.RefObject<FocusableElement>;
+    scrollBehavior?: 'inside' | 'outside';
+    size?: string;
+}
+export declare const Modal: ({ children, isOpen, onClose, isCentered, responsiveModalSizes, allowEscape, useFullScreenMobile, initialFocusRef, scrollBehavior, darkMode, size, ...rest }: ModalProps) => JSX.Element;
+export {};

package/build/components/Overlay/Modal/modal.types.d.ts

@@ -0,0 +1 @@
+export declare type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';

package/build/components/Overlay/Modal/modalBody.component.d.ts

@@ -0,0 +1,2 @@
+import { ModalBodyProps } from '@chakra-ui/react';
+export declare const ModalBody: ({ children, ...rest }: ModalBodyProps) => JSX.Element;

package/build/components/Overlay/Modal/modalCloseButton.component.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '../../Forms';
+export declare const ModalCloseButton: ({ right, left, size, ...rest }: ButtonProps) => JSX.Element;

package/build/components/Overlay/Modal/modalFooter.component.d.ts

@@ -0,0 +1,4 @@
+import { ModalFooterProps as ChakraModalFooterProps } from '@chakra-ui/react';
+export interface ModalFooterProps extends ChakraModalFooterProps {
+}
+export declare const ModalFooter: ({ children, ...rest }: ModalFooterProps) => JSX.Element;

package/build/components/Overlay/Modal/modalFooterButtons.component.d.ts

@@ -0,0 +1,10 @@
+import { ModalFooterProps as ChakraModalFooterProps } from '@chakra-ui/react';
+export interface ModalFooterButtonProps extends ChakraModalFooterProps {
+    submitText?: string;
+    isLoading?: boolean;
+    isDestructive?: boolean;
+    onSubmit?: () => void;
+    allowCancel?: boolean;
+    onCancel?: () => void;
+}
+export declare const ModalFooterButtons: ({ submitText, isLoading, isDestructive, children, onSubmit, allowCancel, onCancel, ...rest }: ModalFooterButtonProps) => JSX.Element;

package/build/components/Overlay/Modal/modalHeader.component.d.ts

@@ -0,0 +1,6 @@
+import { ModalHeaderProps as ChakraModalHeaderProps } from '@chakra-ui/react';
+import { HeadingSize } from '../../Typography';
+export interface ModalHeaderProps extends ChakraModalHeaderProps {
+    size?: HeadingSize;
+}
+export declare const ModalHeader: ({ size, children, ...rest }: ModalHeaderProps) => JSX.Element;

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

@@ -1,3 +1,4 @@
 export * from './Drawer';
 export * from './Tooltip';
 export * from './Menu';
+export * from './Modal';

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

@@ -0,0 +1 @@
+export * from './withDarkMode';

package/build/components/hocs/withDarkMode.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const withDarkMode: (children: ReactNode, darkMode: boolean) => JSX.Element;

package/build/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useTheme';
+export * from './useDisclosure';

package/build/hooks/useDisclosure.d.ts

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

package/build/index.js

@@ -115,7 +115,7 @@ var Tag = function (_a) {
 };
 
 var blur = {
-    none: 0,
+    none: '0',
     sm: '4px',
     base: '8px',
     md: '12px',
@@ -6582,6 +6582,68 @@ var BetaMenu = function (_a) {
             React__default["default"].createElement(MenuList, __assign({}, listConfig, { menuItems: menuItems })))));
 };
 
+var withDarkMode$1 = function (children, darkMode) {
+    return darkMode ? React__default["default"].createElement(react.DarkMode, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+
+var Modal = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.isCentered, isCentered = _b === void 0 ? true : _b; _a.responsiveModalSizes; var _c = _a.allowEscape, allowEscape = _c === void 0 ? true : _c, _d = _a.useFullScreenMobile, useFullScreenMobile = _d === void 0 ? true : _d, initialFocusRef = _a.initialFocusRef, scrollBehavior = _a.scrollBehavior, darkMode = _a.darkMode, _e = _a.size, size = _e === void 0 ? 'xl' : _e, rest = __rest(_a, ["children", "isOpen", "onClose", "isCentered", "responsiveModalSizes", "allowEscape", "useFullScreenMobile", "initialFocusRef", "scrollBehavior", "darkMode", "size"]);
+    var _f = useTheme(), colors = _f.colors, radii = _f.radii;
+    var adaptiveBackgroundColor = useAdaptiveColor(colors.background);
+    var backgroundColor = !darkMode ? adaptiveBackgroundColor : colors.background.dark;
+    // Responsive values for full screen modals on phones.
+    var fullScreenMobileSize = react.useBreakpointValue({ base: 'full', md: size });
+    var fullScreenMobileBorderRadius = react.useBreakpointValue({ base: 0, md: radii.xl });
+    var fullScreenMobileContentMargin = react.useBreakpointValue({ base: 0, md: 16 });
+    var Modal = (React__default["default"].createElement(react.Modal, __assign({ closeOnEsc: allowEscape, closeOnOverlayClick: allowEscape, autoFocus: !!initialFocusRef, isOpen: isOpen, onClose: onClose, scrollBehavior: scrollBehavior, isCentered: isCentered, size: useFullScreenMobile ? fullScreenMobileSize : size, motionPreset: "slideInBottom" }, rest),
+        React__default["default"].createElement(react.ModalOverlay, null),
+        React__default["default"].createElement(react.ModalContent, { backgroundColor: backgroundColor, m: useFullScreenMobile ? fullScreenMobileContentMargin : 16, borderRadius: useFullScreenMobile ? fullScreenMobileBorderRadius : radii.xl }, children)));
+    return withDarkMode$1(Modal, !!darkMode);
+};
+
+var modal_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Modal: Modal
+});
+
+var ModalHeader = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, children = _a.children, rest = __rest(_a, ["size", "children"]);
+    return (React__default["default"].createElement(react.ModalHeader, __assign({ px: 6, pt: 6, pb: 2 }, rest),
+        React__default["default"].createElement(Heading, { size: size }, children)));
+};
+
+var ModalCloseButton = function (_a) {
+    var _b = _a.right, right = _b === void 0 ? 2 : _b, _c = _a.left, left = _c === void 0 ? 2 : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["right", "left", "size"]);
+    var onClose = react.useModalContext().onClose;
+    return (React__default["default"].createElement(Button, __assign({ variant: "ghostNeutral", onClick: onClose, iconName: "close", position: "absolute", right: right, top: left, size: size }, rest)));
+};
+
+var ModalBody = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement(react.ModalBody, __assign({ py: 1 }, rest), children));
+};
+
+var ModalFooter = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement(react.ModalFooter, __assign({ pb: 6 }, rest), children));
+};
+
+var ModalFooterButtons = function (_a) {
+    var _b = _a.submitText, submitText = _b === void 0 ? 'Submit' : _b, isLoading = _a.isLoading, isDestructive = _a.isDestructive; _a.children; var onSubmit = _a.onSubmit, _c = _a.allowCancel, allowCancel = _c === void 0 ? true : _c, onCancel = _a.onCancel, rest = __rest(_a, ["submitText", "isLoading", "isDestructive", "children", "onSubmit", "allowCancel", "onCancel"]);
+    var onClose = react.useModalContext().onClose;
+    var handleCancel = function () {
+        if (onCancel) {
+            onCancel();
+        }
+        onClose();
+    };
+    return (React__default["default"].createElement(react.ModalFooter, __assign({}, rest, { pb: 6 }),
+        React__default["default"].createElement(react.Flex, { w: "100%" },
+            allowCancel && (React__default["default"].createElement(Button, { variant: "tertiary", onClick: handleCancel }, "Cancel")),
+            React__default["default"].createElement(react.Spacer, null),
+            React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
+};
+
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
@@ -9400,6 +9462,10 @@ Object.defineProperty(exports, 'WrapItem', {
     enumerable: true,
     get: function () { return react.WrapItem; }
 });
+Object.defineProperty(exports, 'useDisclosure', {
+    enumerable: true,
+    get: function () { return react.useDisclosure; }
+});
 Object.defineProperty(exports, 'useRadioGroup', {
     enumerable: true,
     get: function () { return react.useRadioGroup; }
@@ -9412,6 +9478,7 @@ exports.Avatar = Avatar;
 exports.AvatarConfig = AvatarConfig;
 exports.AvatarGroup = AvatarGroup;
 exports.BetaMenu = BetaMenu;
+exports.BetaModal = modal_component;
 exports.Button = Button;
 exports.ButtonSizeConfig = ButtonSizeConfig;
 exports.ButtonVariantConfig = ButtonVariantConfig;
@@ -9424,6 +9491,11 @@ exports.Logo = Logo;
 exports.MenuConfig = MenuConfig;
 exports.MenuContext = MenuContext;
 exports.MenuItemConfig = MenuItemConfig;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalFooter = ModalFooter;
+exports.ModalFooterButtons = ModalFooterButtons;
+exports.ModalHeader = ModalHeader;
 exports.NotificationCounter = NotificationCounter;
 exports.Radio = Radio;
 exports.RadioConfig = RadioConfig;