@xqmsg/ui-core 0.14.4 → 0.15.0

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

@@ -19,21 +19,26 @@ const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
       alignItems="center"
       width="fit-content"
       w="auto"
-      h="auto"
-      pl="8px"
-      pr="4px"
+      h="16px"
+      pl="6px"
+      pr="2px"
       py="2px"
       position="relative"
     >
-      <Text color={colors.label.primary.light} fontSize="13px" pr="4px">
+      <Text
+        whiteSpace="nowrap"
+        color={colors.label.primary.light}
+        fontSize="13px"
+        pr="4px"
+      >
         {truncate(label.trim(), {
           length: 15,
           omission: '...',
         })}
       </Text>
       <CloseIcon
-        width="13px"
-        height="13px"
+        width="11px"
+        height="11px"
         onClick={onDelete}
         cursor="pointer"
       />

package/src/components/input/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import StackedCheckBoxGroup from './StackedCheckbox/StackedCheckboxGroup';
+import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
 import StackedInput from './StackedInput/StackedInput';
 import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
 import StackedSelect from './StackedSelect/StackedSelect';
@@ -147,17 +147,18 @@ export function Input<T extends FieldValues>({
         );
       case 'checkbox':
         return (
-          <StackedCheckBoxGroup
+          <StackedCheckBox
             className={`input-${inputType} ${className ?? ''}`}
             name={name}
             id={name}
             isInvalid={isInvalid}
-            options={options as FieldOptions}
             onChange={onChange}
             onBlur={onBlur}
             ref={ref}
             disabled={disabled}
             value={value}
+            defaultValue={defaultValue}
+            label={label as string}
           />
         );
       case 'multi-select':
@@ -178,7 +179,6 @@ export function Input<T extends FieldValues>({
             setError={setError as UseFormSetError<FieldValues>}
             clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
             placeholder={placeholder}
-            maxLength={maxLength}
           />
         );
       case 'pilled-text':
@@ -212,6 +212,7 @@ export function Input<T extends FieldValues>({
             onBlur={onBlur}
             ref={ref}
             value={value}
+            defaultValue={defaultValue}
           />
         );
       default:

package/src/components/table/index.tsx

@@ -44,15 +44,10 @@ export function Table<T extends ReadonlyTableColumns>({
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (
-    <TableContainer
-      border="none"
-      overflowX="auto"
-      bg="white"
-      width="fit-content"
-    >
+    <TableContainer border="none" overflowX="auto" bg="white" width="100%">
       <ChakraTable
         variant="unstyled"
-        width="fit-content"
+        width="100%"
         style={{
           borderCollapse: 'separate',
           borderSpacing: '0px',

package/src/theme/components/button.ts

@@ -3,13 +3,14 @@ import colors from '../foundations/colors';
 
 const baseStyle = defineStyle({
   borderRadius: '4px',
-  fontSize: '18px',
+  fontSize: '13px',
   bg: colors.fill.action,
   color: colors.label.primary.dark,
+  border: 'none',
   px: '8px',
   py: '4px',
   bgGradient: 'linear-gradient(#FFFFFF29, #FFFFFF00)',
-  shadow: '1px 0.5px #0000001A',
+  shadow: '0.5px 0.5px 1px 1px #0000001A',
   _disabled: {
     backgroundColor: 'gray.100',
     borderColor: 'gray.100',
@@ -25,21 +26,20 @@ const baseStyle = defineStyle({
     bgGradient: colors.fill.light.quaternary,
   },
   _focus: {
-    bg: colors.fill.action,
-    border: `2px solid ${colors.border.focus}`,
+    outline: `2px solid ${colors.border.focus}`,
+    outlineOffset: '0px',
   },
 });
 
-const variantSolid = () => {
+const variantPrimary = () => {
   return { ...baseStyle };
 };
 
-const variantOutline = () => {
+const variantSecondary = () => {
   return {
     ...baseStyle,
     color: colors.fill.action,
     bg: colors.label.primary.dark,
-    border: 'none',
     _hover: {
       bg: colors.label.primary.dark,
     },
@@ -55,12 +55,12 @@ const variantOutline = () => {
 };
 
 const variants = {
-  solid: variantSolid(),
-  outline: variantOutline(),
+  primary: variantPrimary(),
+  secondary: variantSecondary(),
 };
 
 const defaultProps = {
-  solid: 'solid',
+  variant: 'primary',
 };
 
 export default {

package/src/theme/components/input.ts

@@ -5,6 +5,7 @@ const parts = ['field'];
 const baseStyle = {
   field: {
     fontSize: '13px',
+    h: '26px',
     '::placeholder': {
       color: colors.label.secondary.light,
     },

package/src/theme/components/table.ts

@@ -7,6 +7,7 @@ const baseStyle = {
   th: {
     bg: colors.label.primary.dark,
     padding: '5px 8px !important',
+    fontSize: '13px',
   },
   tr: {
     fontSize: '13px',

package/src/theme/components/textarea.ts

@@ -2,9 +2,12 @@ import Input from './input';
 
 const baseStyle = {
   ...Input.baseStyle.field,
+  fontSize: '13px',
+
   display: 'block', // Removes gap below textarea because it defaults to inline.
   paddingY: '8px',
-  height: '80px',
+  paddingX: '5px',
+  height: '78px',
   lineHeight: 'short',
 };
 

package/dist/components/input/StackedCheckbox/StackedCheckboxGroup.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
-export interface StackedCheckboxGroupProps extends SelectFieldProps {
-    options: FieldOptions;
-}
-/**
- * A functional React component utilized to render the `StackedCheckbox` component.
- */
-declare const StackedCheckboxGroup: React.ForwardRefExoticComponent<StackedCheckboxGroupProps & React.RefAttributes<HTMLInputElement>>;
-export default StackedCheckboxGroup;

package/dist/components/input/StackedMultiSelect/components/MultiValue/index.d.ts

@@ -1,10 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-interface MultiValueProps extends PropsWithChildren {
-    clearValue: () => void;
-}
-/**
- * A functional React Component utilized to render the custom `MultiValue` component for
- * the `StackedMultiSelect` custom component.
- */
-declare const MultiValue: React.FC<MultiValueProps>;
-export default MultiValue;

package/src/components/input/StackedCheckbox/StackedCheckboxGroup.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Flex, InputGroup, Checkbox } from '@chakra-ui/react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
-
-export interface StackedCheckboxGroupProps extends SelectFieldProps {
-  options: FieldOptions;
-}
-
-/**
- * A functional React component utilized to render the `StackedCheckbox` component.
- */
-const StackedCheckboxGroup = React.forwardRef<
-  HTMLInputElement,
-  StackedCheckboxGroupProps
->(({ options }, _ref) => {
-  return (
-    <InputGroup>
-      {options.map(option => (
-        <Flex mr="30px" alignItems="center" key={option.value}>
-          <Checkbox ref={_ref} value={option.value}>
-            {option.label}
-          </Checkbox>
-        </Flex>
-      ))}
-    </InputGroup>
-  );
-});
-
-export default StackedCheckboxGroup;

package/src/components/input/StackedMultiSelect/components/MultiValue/index.tsx

@@ -1,21 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import React, { PropsWithChildren } from 'react';
-import InputTag from '../../../components/token';
-
-interface MultiValueProps extends PropsWithChildren {
-  clearValue: () => void;
-}
-
-/**
- * A functional React Component utilized to render the custom `MultiValue` component for
- * the `StackedMultiSelect` custom component.
- */
-const MultiValue: React.FC<MultiValueProps> = ({ children, clearValue }) => {
-  return (
-    <Box marginRight="5px">
-      <InputTag label={children} onDelete={clearValue} />
-    </Box>
-  );
-};
-
-export default MultiValue;