@ctlyst.id/internal-ui 2.0.0 → 2.0.2

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './badge';
 export * from './breadcrumb';
 export * from './button';
 export * from './card';

package/dist/config/theme/components/badge.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+declare const Badge: ComponentStyleConfig;
+export default Badge;

package/dist/config/theme/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Alert } from './alert';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';

package/dist/internal-ui.cjs.development.js

@@ -27,6 +27,27 @@ var styledSystem = require('@chakra-ui/styled-system');
 var themeTools = require('@chakra-ui/theme-tools');
 var axios = _interopDefault(require('axios'));
 
+const Badge = props => {
+  const {
+    children,
+    pill,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(react.Badge, Object.assign({
+    borderRadius: pill ? 10 : 4,
+    variant: "primary-solid",
+    padding: "0 8px",
+    height: "18px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    textTransform: "none"
+  }, rest), children);
+};
+Badge.defaultProps = {
+  pill: false
+};
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const BreadCrumb = props => {
   const {
@@ -2088,7 +2109,7 @@ const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
   src: react.useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
 });
 const VoilaLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
-  src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
+  src: "https://assets.voila.id/xms/logo-voila-black.png?v=1",
   filter: react.useColorModeValue('none', 'invert(1)'),
   maxW: 24
 });
@@ -3244,6 +3265,72 @@ const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
   }
 });
 
+const Badge$1 = {
+  baseStyle: {
+    display: 'inline-block',
+    fontSize: 10,
+    fontWeight: 600,
+    lineHeight: '1.25',
+    textTransform: 'none',
+    px: 2,
+    py: '0.5'
+  },
+  variants: {
+    'primary-solid': {
+      bg: 'primary.500',
+      color: 'white'
+    },
+    'success-solid': {
+      bg: 'success.500',
+      color: 'white'
+    },
+    'info-solid': {
+      bg: 'info.500',
+      color: 'white'
+    },
+    'warning-solid': {
+      bg: 'warning.500',
+      color: 'white'
+    },
+    'danger-solid': {
+      bg: 'danger.500',
+      color: 'white'
+    },
+    'neutral-solid': {
+      bg: 'neutral.600',
+      color: 'white'
+    },
+    'primary-light': {
+      bg: 'primary.50',
+      color: 'primary.500'
+    },
+    'success-light': {
+      bg: 'success.50',
+      color: 'success.500'
+    },
+    'info-light': {
+      bg: 'info.50',
+      color: 'info.500'
+    },
+    'warning-light': {
+      bg: 'warning.50',
+      color: 'warning.500'
+    },
+    'danger-light': {
+      bg: 'danger.50',
+      color: 'danger.500'
+    },
+    'neutral-light': {
+      bg: 'neutral.100',
+      color: 'neutral.600'
+    }
+  },
+  // The default size and variant values
+  defaultProps: {
+    variant: 'primary-solid'
+  }
+};
+
 // You can also use the more specific type for
 // a single part component: ComponentSingleStyleConfig
 const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
@@ -3306,14 +3393,15 @@ const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
         variant
       } = props;
       const base = {
-        fontSize: 'text.xs',
-        h: 6,
+        fontSize: 'text.sm',
+        h: '26px',
+        lineHeight: 4,
         px: 2,
         py: '5px'
       };
       const icon = {
-        h: 6,
-        w: 6,
+        h: '26px',
+        w: '26px',
         p: 0
       };
       return variant === 'icon' ? icon : base;
@@ -4142,6 +4230,7 @@ const Textarea = /*#__PURE__*/react.defineStyleConfig({
 var components = {
   __proto__: null,
   Alert: alertTheme,
+  Badge: Badge$1,
   Button: Button$1,
   Card: CardStyle,
   Checkbox: Checkbox,
@@ -4447,6 +4536,7 @@ Object.defineProperty(exports, 'useTabsStyles', {
     return react.useTabsStyles;
   }
 });
+exports.Badge = Badge;
 exports.Box = react.Box;
 exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;