@ctlyst.id/internal-ui 2.0.1 → 2.0.3

package/dist/components/form/__stories__/input.stories.d.ts

@@ -11,4 +11,5 @@ export declare const Default: () => JSX.Element;
 export declare const Variant: () => JSX.Element;
 export declare const PasswordField: () => JSX.Element;
 export declare const WithClear: () => JSX.Element;
+export declare const WithElement: () => JSX.Element;
 export declare const WithAddOn: () => JSX.Element;

package/dist/components/form/components/input-field.d.ts

@@ -5,8 +5,6 @@ import type { FieldProps } from '../../field/components/field';
 export interface InputFieldProps extends ChakraInputProps, FieldProps {
     addOnLeft?: ReactNode;
     addOnRight?: ReactNode;
-    elementLeft?: ReactNode;
-    elementRight?: ReactNode;
     withClear?: boolean;
     isLoading?: boolean;
     onClear?: () => void;

package/dist/components/form/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/input-addon';
 export { default as InputField } from './components/input-field';
 export * from './components/input-field';
 export { default as TextareaField } from './components/textarea';

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

@@ -35,9 +35,7 @@ const Badge = props => {
   } = props;
   return /*#__PURE__*/React__default.createElement(react.Badge, Object.assign({
     borderRadius: pill ? 10 : 4,
-    variant: "solid",
-    color: "white",
-    fontSize: "10px",
+    variant: "primary-solid",
     padding: "0 8px",
     height: "18px",
     display: "flex",
@@ -482,6 +480,41 @@ DataTable.defaultProps = {
   sortingState: []
 };
 
+const getProperties = props => {
+  const {
+    isError,
+    isDisabled,
+    isSuccess
+  } = props;
+  let outlineColor = 'neutral.400';
+  let focusColor = 'primary.500';
+  if (isError || isDisabled || isSuccess) {
+    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
+    focusColor = outlineColor;
+  }
+  return {
+    outlineColor,
+    focusColor
+  };
+};
+const getWrapperStyle = props => {
+  const {
+    outlineColor,
+    focusColor
+  } = getProperties(props);
+  const style = {
+    border: '1px solid',
+    borderColor: outlineColor,
+    borderRadius: 'md',
+    transition: 'all 0.15s',
+    boxShadow: 'none',
+    _focusWithin: {
+      borderColor: focusColor
+    }
+  };
+  return react.defineStyle(style);
+};
+
 const Styles = () => {
   const {
     colorMode
@@ -1353,6 +1386,7 @@ const Datepicker = ({
   var _props$dateFormat;
   const selected = value ? new Date(value) : undefined;
   const dateFormat = ((_props$dateFormat = props.dateFormat) !== null && _props$dateFormat !== void 0 ? _props$dateFormat : withTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+  const wrapperStyle = getWrapperStyle({});
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -1365,9 +1399,9 @@ const Datepicker = ({
     id: id,
     name: name,
     selected: selected,
-    customInput: /*#__PURE__*/React__default.createElement(react.Input, {
+    customInput: /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
       autoComplete: "off"
-    }),
+    }, wrapperStyle)),
     dateFormat: dateFormat,
     showPopperArrow: false,
     calendarClassName: classnames({
@@ -1916,45 +1950,10 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-const getProperties = props => {
-  const {
-    isError,
-    isDisabled,
-    isSuccess
-  } = props;
-  let outlineColor = 'neutral.400';
-  let focusColor = 'primary.500';
-  if (isError || isDisabled || isSuccess) {
-    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
-    focusColor = outlineColor;
-  }
-  return {
-    outlineColor,
-    focusColor
-  };
-};
-const getWrapperStyle = props => {
-  const {
-    outlineColor,
-    focusColor
-  } = getProperties(props);
-  const style = {
-    border: '1px solid',
-    borderColor: outlineColor,
-    borderRadius: 'md',
-    transition: 'all 0.15s',
-    boxShadow: 'none',
-    _focusWithin: {
-      borderColor: focusColor
-    }
-  };
-  return react.defineStyle(style);
-};
-
 const InputAddonLeft = ({
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(react.Box, {
+  return /*#__PURE__*/React__default.createElement(react.InputLeftAddon, {
     borderLeftRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
@@ -1964,7 +1963,7 @@ const InputAddonLeft = ({
 const InputAddonRight = ({
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(react.Box, {
+  return /*#__PURE__*/React__default.createElement(react.InputRightAddon, {
     borderRightRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
@@ -1978,8 +1977,6 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     type,
     addOnLeft,
     addOnRight,
-    elementLeft,
-    elementRight,
     size,
     isRequired,
     label,
@@ -2023,7 +2020,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     borderRadius: "md",
     backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
     cursor: isDisabled ? 'not-allowed' : 'default'
-  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputAddonLeft, null, addOnLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+  }, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     ref: ref,
     type: inputType,
     value: value,
@@ -2070,13 +2067,11 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     color: iconColor
   })), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
     size: "sm"
-  })), "(", addOnRight && /*#__PURE__*/React__default.createElement(InputAddonRight, null, addOnRight))));
+  })), addOnRight)));
 });
 InputField.defaultProps = {
   addOnLeft: undefined,
   addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined,
   withClear: undefined,
   isLoading: undefined,
   onClear: undefined
@@ -3267,6 +3262,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({
@@ -4166,6 +4227,7 @@ const Textarea = /*#__PURE__*/react.defineStyleConfig({
 var components = {
   __proto__: null,
   Alert: alertTheme,
+  Badge: Badge$1,
   Button: Button$1,
   Card: CardStyle,
   Checkbox: Checkbox,
@@ -4486,6 +4548,8 @@ exports.Field = Field;
 exports.Flex = react.Flex;
 exports.Grid = react.Grid;
 exports.Header = Header;
+exports.InputAddonLeft = InputAddonLeft;
+exports.InputAddonRight = InputAddonRight;
 exports.InputField = InputField;
 exports.Loader = Loader;
 exports.MainMenu = Navigation;