@televet/kibble-ui 1.3.1 → 1.3.2-beta.2vtj6g7.1

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

@@ -0,0 +1,5 @@
+import { ButtonColorOptions } from './button.types';
+import { AdaptiveColorMap } from '../../theme/tokens';
+export interface ButtonVariantConfig extends AdaptiveColorMap<ButtonColorOptions> {
+    variant: 'solid' | 'outline' | 'ghost';
+}

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/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal.component';
+export * from './modal.types';

package/build/components/Modal/modal-section.component.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface props {
+    children: ReactNode;
+    alignContent?: 'left' | 'right';
+}
+export declare const ModalSection: ({ children, alignContent }: props) => JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { ModalProps as ChakraModalProps } from '@chakra-ui/react';
+import { BlurAmount } from '../../theme/tokens';
+import { FocusableElement } from '@chakra-ui/utils';
+import { ModalSize } from './modal.types';
+declare type ResponsiveBreakpoints = 'base' | 'md';
+export interface ModalProps extends ChakraModalProps {
+    title?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    modalSize?: Partial<Record<ResponsiveBreakpoints, ModalSize>>;
+    allowEscape?: boolean;
+    useDefaultCloseButton?: boolean;
+    overlayBlur?: BlurAmount;
+    overlayHueShift?: number;
+    overlayBase?: 'whiteAlpha' | 'blackAlpha';
+    darkMode?: boolean;
+    initialFocusRef: React.RefObject<FocusableElement>;
+    scrollBehavior?: 'inside' | 'outside';
+}
+export declare const Modal: ({ title, children, footer, isOpen, onClose, modalSize, overlayBlur, allowEscape, useDefaultCloseButton, initialFocusRef, scrollBehavior, overlayHueShift, overlayBase, darkMode, ...rest }: ModalProps) => JSX.Element;
+export {};

package/build/components/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/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.component.d.ts

@@ -5,7 +5,7 @@ import { TextColor } from '../typography.types';
 export interface HeadingProps extends ChakraHeadingProps {
     children: ReactNode;
     size?: HeadingSize;
-    color?: TextColor;
+    colorToken?: TextColor;
     darkMode?: boolean;
 }
-export declare const Heading: ({ children, size, color, darkMode, ...rest }: HeadingProps) => JSX.Element;
+export declare const Heading: ({ children, size, color, colorToken, darkMode, ...rest }: HeadingProps) => JSX.Element;

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.component.d.ts

@@ -6,7 +6,7 @@ export interface TextProps extends ChakraTextProps {
     children: ReactNode;
     as?: HTMLTagName;
     variant?: TextVariant;
-    color?: TextColor;
+    colorToken?: TextColor;
     darkMode?: boolean;
 }
-export declare const Text: ({ children, variant, as, color, darkMode, ...rest }: TextProps) => JSX.Element;
+export declare const Text: ({ children, variant, as, color, colorToken, darkMode, ...rest }: TextProps) => JSX.Element;

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/hooks/useAdaptiveColorMap.d.ts

@@ -1,2 +1,2 @@
-import { AdaptiveColorMap } from '../theme/tokens/colors';
-export declare const useAdaptiveColorMap: <T extends string | number | symbol>(map: AdaptiveColorMap<T>, token: T) => string;
+import { AdaptiveColorMap } from '../theme/tokens';
+export declare const useAdaptiveColorMap: <T extends string | number | symbol>(map: AdaptiveColorMap<T>, token: T, darkMode?: boolean | undefined) => string;

package/build/index.js

@@ -859,9 +859,7 @@ var IconSizeMap = {
 
 var useTheme = function () { return react.useTheme(); };
 
-var useAdaptiveColorMap = function (map, token) {
-    return react.useColorModeValue(map.light[token], map.dark[token]);
-};
+var useAdaptiveColorMap = function (map, token, darkMode) { return react.useColorModeValue(map[darkMode ? 'dark' : 'light'][token], map.dark[token]); };
 
 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;
@@ -2262,22 +2260,14 @@ function __rest(s, e) {
     return t;
 }
 
-var withDarkMode = function (children, darkMode) {
-    return darkMode ? React__default["default"].createElement(react.DarkMode, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
-};
-
-var withTheme = function (children, theme) {
-    return theme ? React__default["default"].createElement(react.ChakraProvider, { theme: theme }, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
-};
-
 var Heading = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.color, color = _c === void 0 ? 'headline' : _c, darkMode = _a.darkMode, rest = __rest(_a, ["children", "size", "color", "darkMode"]);
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, _c = _a.colorToken, colorToken = _c === void 0 ? 'headline' : _c, darkMode = _a.darkMode, rest = __rest(_a, ["children", "size", "color", "colorToken", "darkMode"]);
     var _d = useTheme(), components = _d.components, colors = _d.colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, color);
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
     var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
     var sizes = components.Heading.variants[variant].sizes;
     var sizeProps = !sizes ? undefined : sizes[size];
-    return withDarkMode(React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: adaptiveColor }, rest), children), !!darkMode);
+    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: color || adaptiveColor }, rest), children));
 };
 
 var blur = {
@@ -2754,10 +2744,10 @@ var HeadingConfig = {
 };
 
 var Text = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, _d = _a.color, color = _d === void 0 ? 'default' : _d, darkMode = _a.darkMode, rest = __rest(_a, ["children", "variant", "as", "color", "darkMode"]);
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, color = _a.color, _d = _a.colorToken, colorToken = _d === void 0 ? 'default' : _d, darkMode = _a.darkMode, rest = __rest(_a, ["children", "variant", "as", "color", "colorToken", "darkMode"]);
     var colors = useTheme().colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, color);
-    return withDarkMode(React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: adaptiveColor }, rest), children), !!darkMode);
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
+    return (React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: color || adaptiveColor }, rest), children));
 };
 
 var TextConfig = {
@@ -3390,6 +3380,14 @@ var KibbleThemeProvider = function (_a) {
         React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme }, children)));
 };
 
+var withDarkMode = function (children, darkMode) {
+    return darkMode ? React__default["default"].createElement(react.DarkMode, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+
+var withTheme = function (children, theme) {
+    return theme ? React__default["default"].createElement(react.ChakraProvider, { theme: theme }, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+
 Object.defineProperty(exports, 'Box', {
   enumerable: true,
   get: function () { return react.Box; }