@xqmsg/ui-core 0.9.2 → 0.10.0

package/src/theme/components/form-error.ts

@@ -1,29 +1,26 @@
-import { mode } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
+import colors from '../foundations/colors';
 
 const parts = ['text', 'icon'];
 
-function baseStyleText(props: Dict) {
+function baseStyleText() {
   return {
-    color: mode('red.500', 'red.300')(props),
+    color: colors.label.error,
     mt: 1,
-    lineHeight: 'normal',
-    fontSize: 'sm',
+    ml: 1,
+    fontSize: '13px',
   };
 }
 
-function baseStyleIcon(props: Dict) {
+function baseStyleIcon() {
   return {
-    mr: '0.5em',
-    color: mode('red.500', 'red.300')(props),
+    ml: 1,
+    color: colors.label.error,
   };
 }
 
-const baseStyle = (props: Dict) => ({
-  text: baseStyleText(props),
-  icon: baseStyleIcon(props),
+const baseStyle = () => ({
+  text: baseStyleText(),
+  icon: baseStyleIcon(),
 });
 
 export default {

package/src/theme/components/form-label.ts

@@ -1,14 +1,14 @@
+import colors from '../foundations/colors';
+
 const baseStyle = {
-  fontSize: 'md',
-  mr: 3,
+  fontSize: '13px',
+  position: 'absolute',
+  top: 0,
+  display: 'flex',
+  ml: 1,
   mb: 1,
-  fontWeight: 'bold',
-  color: 'gray.700',
-  transition: 'all 0.2s',
+  color: colors.label.primary.light,
   opacity: 1,
-  _disabled: {
-    opacity: 0.4,
-  },
 };
 
 export default {

package/src/theme/components/form.ts

@@ -1,29 +1,26 @@
-import { mode } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
+import colors from '../foundations/colors';
 
 const parts = ['requiredIndicator', 'helperText'];
 
-function baseStyleRequiredIndicator(props: Dict) {
+function baseStyleRequiredIndicator() {
   return {
     ml: 1,
-    color: mode('red.500', 'red.300')(props),
+    color: colors.label.error,
   };
 }
 
-function baseStyleHelperText(props: Dict) {
+function baseStyleHelperText() {
   return {
+    color: colors.label.secondary.light,
     mt: 1,
-    color: mode('gray.400', 'whiteAlpha.600')(props),
-    lineHeight: 'normal',
-    fontSize: 'sm',
+    ml: 1,
+    fontSize: '13px',
   };
 }
 
-const baseStyle = (props: Dict) => ({
-  requiredIndicator: baseStyleRequiredIndicator(props),
-  helperText: baseStyleHelperText(props),
+const baseStyle = () => ({
+  requiredIndicator: baseStyleRequiredIndicator(),
+  helperText: baseStyleHelperText(),
 });
 
 export default {

package/src/theme/components/input.ts

@@ -1,213 +1,39 @@
-import { getColor, mode, transparentize } from '@chakra-ui/theme-tools';
+import colors from '../foundations/colors';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const parts = ['field', 'addon'];
+const parts = ['field'];
 
 const baseStyle = {
   field: {
-    width: '100%',
-    outline: 0,
-    position: 'relative',
-    appearance: 'none',
-    transition: 'all 0.2s',
+    fontSize: '13px',
     '::placeholder': {
-      color: 'gray.300',
+      color: colors.label.secondary.light,
     },
-  },
-};
-
-const size = {
-  lg: {
-    fontSize: 'md',
-    pl: 3,
-    pr: 3,
-    h: 12,
-    borderRadius: 'md',
-  },
-
-  md: {
-    fontSize: 'md',
-    pl: 3,
-    pr: 3,
-    h: 10,
-    borderRadius: 'md',
-  },
-
-  sm: {
-    fontSize: 'sm',
-    pl: 3,
-    pr: 3,
-    h: 8,
-    borderRadius: 'sm',
-  },
-};
-
-const sizes = {
-  lg: {
-    field: size.lg,
-    addon: size.lg,
-  },
-  md: {
-    field: size.md,
-    addon: size.md,
-  },
-  sm: {
-    field: size.sm,
-    addon: size.sm,
-  },
-};
-
-function getDefaults(props: Dict) {
-  const { focusBorderColor: fc, errorBorderColor: ec } = props;
-  return {
-    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
-    errorBorderColor: ec || mode('red.500', 'red.300')(props),
-  };
-}
-
-function variantOutline(props: Dict) {
-  const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
-
-  return {
-    field: {
-      border: '1px solid',
-      borderColor: 'inherit',
-      bg: 'white',
-      _hover: {
-        borderColor: mode('gray.300', 'whiteAlpha.400')(props),
-      },
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all',
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed',
-      },
-      _focus: {
-        zIndex: 1,
-        borderColor: getColor(theme, fc),
-        boxShadow: `0 0 0 2px ${transparentize(fc, 0.3)(theme)}`,
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-        boxShadow: 'none',
-        _focus: {
-          boxShadow: `0 0 0 2px ${transparentize(ec, 0.3)(theme)}`,
-        },
-      },
-    },
-    addon: {
-      border: '1px solid',
-      borderColor: mode('inherit', 'whiteAlpha.50')(props),
-      bg: mode('gray.100', 'whiteAlpha.300')(props),
-    },
-  };
-}
-
-function variantFilled(props: Dict) {
-  const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
-
-  return {
-    field: {
-      border: '2px solid',
-      borderColor: 'transparent',
-      bg: mode('gray.50', 'whiteAlpha.50')(props),
-      _hover: {
-        bg: mode('gray.100', 'whiteAlpha.100')(props),
-      },
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all',
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed',
-      },
-      _focus: {
-        bg: 'transparent',
-        borderColor: getColor(theme, fc),
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-      },
+    py: '5px',
+    px: '8px',
+    border: '1px solid',
+    borderColor: colors.border.default,
+    _disabled: {
+      cursor: 'not-allowed',
+      bg: colors.fill.light,
+      color: colors.label.secondary.light,
     },
-    addon: {
+    _focus: {
+      bg: '#ffffff',
       border: '2px solid',
-      borderColor: 'transparent',
-      bg: mode('gray.100', 'whiteAlpha.50')(props),
+      borderColor: colors.border.focus,
     },
-  };
-}
-
-function variantFlushed(props: Dict) {
-  const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
-
-  return {
-    field: {
-      borderBottom: '1px solid inherit',
-      borderRadius: 0,
-      pl: 0,
-      pr: 0,
-      bg: 'transparent',
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all',
-      },
-      _focus: {
-        borderColor: getColor(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${getColor(theme, fc)}`,
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-      },
-    },
-    addon: {
-      borderBottom: '2px solid',
-      borderColor: 'inherit',
-      borderRadius: 0,
-      paddingX: 0,
-      bg: 'transparent',
-    },
-  };
-}
-
-const variantUnstyled = {
-  field: {
-    bg: 'transparent',
-    pl: 0,
-    pr: 0,
-    height: 'auto',
-  },
-  addon: {
-    bg: 'transparent',
-    pl: 0,
-    pr: 0,
-    height: 'auto',
   },
 };
 
-const variants = {
-  outline: variantOutline,
-  filled: variantFilled,
-  flushed: variantFlushed,
-  unstyled: variantUnstyled,
-};
+const variants = { default: baseStyle };
 
 const defaultProps = {
-  size: 'lg',
-  variant: 'outline',
+  variant: 'default',
 };
 
 export default {
   parts,
   baseStyle,
-  sizes,
   variants,
   defaultProps,
 };

package/src/theme/components/select.ts

@@ -1,14 +1,10 @@
-import { mode } from '@chakra-ui/theme-tools';
 import Input from './input';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const { sizes, defaultProps, variants } = Input;
+const { defaultProps, variants } = Input;
 
 const parts = ['field', 'icon'];
 
-function baseStyleField(props: Dict) {
+function baseStyleField() {
   return {
     ...Input.baseStyle.field,
     appearance: 'none',
@@ -16,7 +12,7 @@ function baseStyleField(props: Dict) {
     lineHeight: 'normal',
     bg: 'white',
     '> option': {
-      bg: mode('white', 'gray.700')(props),
+      // bg: mode('white', 'gray.700')(props),
     },
   };
 }
@@ -27,15 +23,14 @@ const baseStyleInput = {
   _disabled: { opacity: 0.5 },
 };
 
-const baseStyle = (props: Dict) => ({
-  field: baseStyleField(props),
+const baseStyle = () => ({
+  field: baseStyleField(),
   icon: baseStyleInput,
 });
 
 export default {
   parts,
   baseStyle,
-  sizes,
   variants,
   defaultProps,
 };

package/src/theme/components/textarea.ts

@@ -1,54 +1,18 @@
 import Input from './input';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
 const baseStyle = {
   ...Input.baseStyle.field,
   display: 'block', // Removes gap below textarea because it defaults to inline.
   paddingY: '8px',
-  minHeight: '80px',
+  height: '80px',
   lineHeight: 'short',
 };
 
-const codeVariant = (props: Dict) => {
-  const { _focus } = Input.variants.outline(props).field;
-  return {
-    bg: 'blue.900',
-    color: 'white',
-    fontFamily: 'mono',
-    fontSize: 'sm',
-    border: '1px',
-    borderColor: 'blue.900',
-    borderRadius: 'lg',
-    p: 6,
-    wordBreak: 'break-all',
-    _focus,
-  };
-};
-
-const variants = {
-  outline: (props: Dict) => Input.variants.outline(props).field,
-  flushed: (props: Dict) => Input.variants.flushed(props).field,
-  filled: (props: Dict) => Input.variants.filled(props).field,
-  code: (props: Dict) => codeVariant(props),
-  unstyled: Input.variants.unstyled.field,
-};
-
-const sizes = {
-  sm: Input.sizes.sm.field,
-  md: Input.sizes.md.field,
-  lg: Input.sizes.lg.field,
-};
-
 const defaultProps = {
-  size: 'lg',
-  variant: 'outline',
+  variant: 'default',
 };
 
 export default {
   baseStyle,
-  sizes,
-  variants,
   defaultProps,
 };

package/src/theme/foundations/colors.ts

@@ -72,6 +72,21 @@ const aliases: Record<string, ColorHues> = {
 
 const label = {
   primary: { light: '#000000', dark: '#FFFFFF' },
+  secondary: { light: '#3C3C4399' },
+  error: '#FF0000',
+};
+
+const border = {
+  focus: '#3A6CD980',
+  default: '#9999991A',
+};
+
+const fill = {
+  light: '#7474800D',
+  positive: '#d8f1b8',
+  error: '#ffbdb9',
+  warning: '#ffefb4',
+  blue: '#0082ff',
 };
 
 const colors = {
@@ -85,7 +100,8 @@ const colors = {
   backdrop: '#fbfcff',
   ...aliases,
   label,
-
+  border,
+  fill,
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.06)',

package/dist/components/input/components/InputTag/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface InputTagProps {
-    value: any;
-    onDelete?: any;
-}
-declare const InputTag: React.FC<InputTagProps>;
-export default InputTag;

package/src/components/input/components/InputTag/index.tsx

@@ -1,24 +0,0 @@
-import { Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
-import React from 'react';
-
-interface InputTagProps {
-  value: any;
-  onDelete?: any;
-}
-
-const InputTag: React.FC<InputTagProps> = ({ value, onDelete }) => {
-  return (
-    <Tag
-      size={'md'}
-      key={value}
-      borderRadius="full"
-      variant="solid"
-      backgroundColor="#eeeeee"
-    >
-      <TagLabel color={'gray.700'}>{value}</TagLabel>
-      {onDelete && <TagCloseButton color={'gray.700'} onClick={onDelete} />}
-    </Tag>
-  );
-};
-
-export default InputTag;