@televet/kibble-ui 1.4.1 → 1.5.0

package/build/components/DataDisplay/NotificationCounter/index.d.ts

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

package/build/components/DataDisplay/NotificationCounter/notificationCounter.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FlexProps } from '@chakra-ui/react';
+import { NotificationCounterSize } from './notificationCounter.types';
+export interface NotificationCounterProps extends FlexProps {
+    count: number;
+    size?: NotificationCounterSize;
+    showCount?: boolean;
+}
+export declare const NotificationCounter: ({ count, size, showCount, ...rest }: NotificationCounterProps) => JSX.Element;

package/build/components/DataDisplay/NotificationCounter/notificationCounter.types.d.ts

@@ -0,0 +1 @@
+export declare type NotificationCounterSize = 'lg' | 'md' | 'sm' | 'xs';

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

@@ -1 +1,2 @@
 export * from './Table';
+export * from './NotificationCounter';

package/build/index.js

@@ -26,8 +26,8 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -67,6 +67,38 @@ function __rest(s, e) {
     return t;
 }
 
+var useTheme = function () { return react.useTheme(); };
+
+var MAX_COUNT = 99;
+var notificationCounterSizes = {
+    xs: '8px',
+    sm: '16px',
+    md: '20px',
+    lg: '24px',
+};
+var notificationCounterFontSizes = {
+    xs: '8px',
+    sm: '10px',
+    md: '12px',
+    lg: '14px',
+};
+var maxNotificationCounterSizes = {
+    xs: '1px',
+    sm: '2px',
+    md: '3px',
+    lg: '4px',
+};
+var NotificationCounter = function (_a) {
+    var count = _a.count, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.showCount, showCount = _c === void 0 ? true : _c, rest = __rest(_a, ["count", "size", "showCount"]);
+    var theme = useTheme();
+    var _showCount = size === 'xs' ? false : showCount; // By default the xs size doesn't show a label
+    if (count < 1) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
+    var counterContent = count > MAX_COUNT ? (React__default["default"].createElement(react.Box, { backgroundColor: theme.colors.white, borderRadius: theme.radii.full, height: maxNotificationCounterSizes[size], width: maxNotificationCounterSizes[size] })) : (count);
+    return (React__default["default"].createElement(react.Flex, __assign({}, rest, { alignItems: "center", backgroundColor: theme.colors.red[500], border: theme.borders['1px'], borderColor: theme.colors.white, borderRadius: theme.radii.full, color: theme.colors.white, fontSize: notificationCounterFontSizes[size], fontWeight: theme.fontWeights.semibold, height: notificationCounterSizes[size], justifyContent: "center", width: notificationCounterSizes[size] }), _showCount && counterContent));
+};
+
 const SvgAlertCircle = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
     React__namespace.createElement("path", { d: "M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Zm.9 12.6a.9.9 0 1 1-1.8 0 .9.9 0 0 1 1.8 0Zm0-3.15a.9.9 0 1 1-1.8 0V8.4a.9.9 0 1 1 1.8 0v4.05Z", fill: color })));
 const ForwardRef$2x = React.forwardRef(SvgAlertCircle);
@@ -970,8 +1002,6 @@ var IconSizeMap = {
     '2xl': 38,
 };
 
-var useTheme = function () { return react.useTheme(); };
-
 var useAdaptiveColorMap = function (map, token) {
     return react.useColorModeValue(map.light[token], map.dark[token]);
 };
@@ -1109,7 +1139,7 @@ var coreColors = {
         200: '#FEB2B2',
         300: '#FC8181',
         400: '#F56565',
-        500: '#E01F1F',
+        500: '#EC493F',
         600: '#C53030',
         700: '#9B2C2C',
         800: '#822727',
@@ -6028,6 +6058,7 @@ exports.HeadingConfig = HeadingConfig;
 exports.Icon = Icon;
 exports.KibbleThemeProvider = KibbleThemeProvider;
 exports.Logo = Logo;
+exports.NotificationCounter = NotificationCounter;
 exports.RatingDot = RatingDot;
 exports.RatingDots = RatingDots;
 exports.Select = WrappedSelect;