@ctlyst.id/internal-ui 1.1.0-canary.0 → 2.0.0-canary.2

package/README.md

@@ -1 +1 @@
-# @ctlyst.id/internal-ui
+## @ctlyst.id/internal-ui

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

@@ -2,5 +2,3 @@ export { default as Field } from './components/field';
 export * from './components/field';
 export { default as InputField } from './components/input-field';
 export * from './components/input-field';
-export { default as TextareaField } from './components/textarea-field';
-export * from './components/textarea-field';

package/dist/components/{card/__stories__/card.stories.d.ts → form/__stories__/textarea.stories.d.ts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 declare const _default: {
     chakra: {
         theme: Record<string, any>;
@@ -7,5 +7,4 @@ declare const _default: {
     decorators: ((Story: React.ElementType) => JSX.Element)[];
 };
 export default _default;
-export declare const Default: () => JSX.Element;
-export declare const Variant: () => JSX.Element;
+export declare const TextArea: () => JSX.Element;

package/dist/components/{field/components/textarea-field.d.ts → form/components/textarea.d.ts}

@@ -1,12 +1,8 @@
 import type { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
-import type { ReactNode } from 'react';
 import React from 'react';
-import type { FieldProps } from './field';
+import type { FieldProps } from '../../field';
 export interface TextAreaProps extends ChakraTextareaProps, FieldProps {
-    addOnLeft?: ReactNode;
-    addOnRight?: ReactNode;
-    elementLeft?: ReactNode;
-    elementRight?: ReactNode;
+    isLoading?: boolean;
 }
 declare const TextareaField: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextareaField;

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

@@ -0,0 +1,2 @@
+export { default as TextareaField } from './components/textarea';
+export * from './components/textarea';

package/dist/components/index.d.ts

@@ -1,9 +1,9 @@
 export * from './breadcrumb';
-export * from './card';
 export * from './checkbox';
 export * from './data-table';
 export * from './datepicker';
 export * from './field';
+export * from './form';
 export * from './header';
 export * from './loader';
 export * from './modal';

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

@@ -1,5 +1,4 @@
 export { default as Button } from './button';
-export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as FormLabel } from './form-label';
 export { default as Input } from './input';

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

@@ -1,3 +1,55 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-declare const Textarea: ComponentStyleConfig;
+export declare const Textarea: {
+    baseStyle?: import("@chakra-ui/styled-system").CSSWithMultiValues | (import("@chakra-ui/styled-system").CSSWithMultiValues & import("@chakra-ui/styled-system").RecursivePseudo<import("@chakra-ui/styled-system").CSSWithMultiValues>) | (import("@chakra-ui/styled-system").CSSWithMultiValues & import("@chakra-ui/styled-system").RecursiveCSSSelector<import("@chakra-ui/styled-system").CSSWithMultiValues>) | import("@chakra-ui/styled-system").SystemStyleFunction | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    } | undefined;
+    variants?: {
+        outline: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            background: string;
+            color: string;
+            borderColor: string;
+            fontSize: string;
+            padding: number;
+            borderRadius: string;
+            borderWidth: string;
+            outline: string;
+            _disabled: {
+                opacity: number;
+                color: string;
+                background: string;
+            };
+            _placeholder: {
+                color: string;
+            };
+            _hover: {
+                borderColor: string;
+            };
+            _focus: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            _focusVisible: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            _focusWithin: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            _invalid: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "outline" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
 export default Textarea;

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

@@ -21,8 +21,8 @@ var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-crea
 var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
 var reactDropzone = require('react-dropzone');
 var themeTools = require('@chakra-ui/theme-tools');
-var styledSystem = require('@chakra-ui/styled-system');
 var anatomy = require('@chakra-ui/anatomy');
+var styledSystem = require('@chakra-ui/styled-system');
 require('@fontsource/poppins');
 var axios = _interopDefault(require('axios'));
 
@@ -121,22 +121,6 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
-const CardCustom = /*#__PURE__*/React.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  const styles = react.useStyleConfig('Card', rest);
-  return /*#__PURE__*/React__default.createElement(react.Card, Object.assign({
-    __css: styles,
-    backgroundColor: "white.high",
-    ref: ref
-  }, rest), children);
-});
-CardCustom.defaultProps = {
-  withShadow: true,
-  isRounded: true
-};
-
 function CheckboxComponent({
   isError = false,
   helpText = '',
@@ -1798,6 +1782,7 @@ const Field = props => {
   return /*#__PURE__*/React__default.createElement(react.FormControl, {
     isInvalid: isError
   }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
+    mb: 1,
     fontSize: "text.sm",
     requiredIndicator: undefined
   }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
@@ -1877,21 +1862,36 @@ InputField.defaultProps = {
   elementRight: undefined
 };
 
+const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const styles = react.useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
 const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     value,
+    isLoading,
     ...inputProps
   } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Box, {
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
     ref: ref,
     value: value
-  }, inputProps)));
+  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    zIndex: 999,
+    top: 2,
+    right: 2,
+    position: "absolute"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    size: "sm"
+  }))));
 });
 TextareaField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined
+  isLoading: undefined
 };
 
 const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
@@ -2078,14 +2078,6 @@ Header.defaultProps = {
   hideSwitchMode: false
 };
 
-const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
-  const styles = react.useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(react.Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
   children,
   ...rest
@@ -2913,15 +2905,6 @@ const Button = {
   }
 };
 
-const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
-  baseStyle: props => {
-    return {
-      shadow: props.withShadow ? 'raised' : 'none',
-      borderRadius: props.isRounded ? 'lg' : 'none'
-    };
-  }
-});
-
 const {
   definePartsStyle,
   defineMultiStyleConfig
@@ -3345,37 +3328,90 @@ const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
   baseStyle: baseStyle$3
 });
 
-const Textarea = {
-  baseStyle: {
+const getProps = props => {
+  const {
+    isError,
+    isSuccess,
+    isDisabled
+  } = props;
+  let borderColor = 'neutral.400';
+  let focusBorderColor = 'primary.500';
+  if (isError) {
+    borderColor = 'danger.500';
+    focusBorderColor = 'danger.500';
+  } else if (isSuccess) {
+    borderColor = 'success.500';
+    focusBorderColor = 'success.500';
+  } else if (isDisabled && !isError && !isSuccess) {
+    borderColor = 'neutral.400';
+    focusBorderColor = 'danger.500';
+  }
+  return {
+    focusBorderColor,
+    borderColor
+  };
+};
+const outline$1 = /*#__PURE__*/react.defineStyle(props => {
+  const {
+    focusBorderColor,
+    borderColor
+  } = getProps(props);
+  return {
+    background: 'white.high',
+    color: 'black.high',
+    borderColor,
+    fontSize: 'text.sm',
+    padding: 2,
+    borderRadius: 'md',
+    borderWidth: '1px',
+    outline: 'none',
+    _disabled: {
+      opacity: 1,
+      color: 'black.low',
+      background: 'neutral.300'
+    },
+    _placeholder: {
+      color: 'black.low'
+    },
     _hover: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      borderColor
     },
     _focus: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
     },
     _focusVisible: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
     },
     _focusWithin: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
+    },
+    _invalid: {
+      outline: 'none',
+      borderColor: 'danger.500',
+      boxShadow: 'none'
     }
+  };
+});
+const Textarea = /*#__PURE__*/react.defineStyleConfig({
+  variants: {
+    outline: outline$1
+  },
+  defaultProps: {
+    variant: 'outline'
   }
-};
+});
 
 
 
 var components = {
   __proto__: null,
   Button: Button,
-  Card: CardStyle,
   Checkbox: Checkbox,
   FormLabel: FormLabel,
   Input: Input,
@@ -3679,7 +3715,6 @@ Object.defineProperty(exports, 'useTabsStyles', {
   }
 });
 exports.BreadCrumb = BreadCrumb;
-exports.Card = CardCustom;
 exports.Checkbox = CheckboxComponent;
 exports.DataTable = DataTable;
 exports.DatePickerMonth = DatePickerMonth;