Merge pull request #14 from kaiachain/dev

Update version to v0.1.13
kaiachain · Oct 10, 2024 · b111e32 · b111e32
2 parents 91b6c77 + 29d0397
commit b111e32
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/example/src/Home/index.tsx b/example/src/Home/index.tsx
@@ -169,17 +169,20 @@ const Home = ({
               value: value,
               onChangeText: setValue,
             }}
-          />{' '}
+          />
           <KaTextInput
             inputProps={{
+              type: 'password',
               placeholder: 'placeholder',
               value: value,
               onChangeText: setValue,
+              style: { color: 'red' },
             }}
             rightUnit="$"
           />
           <KaTextInput
             inputProps={{
+              type: 'number',
               placeholder: 'placeholder',
               value: value,
               onChangeText: setValue,
@@ -202,13 +205,17 @@ const Home = ({
           />
           <KaTextInput
             inputProps={{
+              value,
+              onChangeText: setValue,
               placeholder: 'placeholder',
             }}
             rightComponent={<KaButton size="md">Confirm</KaButton>}
             leftUnit="$"
           />
           <KaTextInput
             inputProps={{
+              value,
+              onChangeText: setValue,
               placeholder: 'search here and see the sentence is very long',
             }}
             leftComponent={
@@ -221,6 +228,8 @@ const Home = ({
           />
           <KaTextInput
             inputProps={{
+              value,
+              onChangeText: setValue,
               placeholder: 'search here and see the sentence is very long',
             }}
             leftComponent={
@@ -235,12 +244,12 @@ const Home = ({
           />
           <KaTextInput
             inputProps={{
+              value,
+              onChangeText: setValue,
               placeholder: 'search here and see the sentence is very long',
             }}
-            //  leftComponent="search"
             leftUnit="$"
             rightUnit="Unit"
-            //rightComponent={'close'}
             disabled={true}
           />
         </StyledSection>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaiachain/kaia-design-system",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -1,6 +1,6 @@
 import { ReactElement, useState } from 'react'
 import styled from '@emotion/styled'
-import { themeFunc } from '../../styles'
+import { font, themeFunc } from '../../styles'
 import { KaText } from '../Text/Text'
 import { useKaTheme } from '../../hooks'
 import MathClose from '../../icons/MathClose.svg'
@@ -16,11 +16,11 @@ const StyledContainer = styled.div<StyledContainerProps>`
   border-radius: var(--Radius-6, 360px);
   box-sizing: border-box;
   outline: ${({ isError }) => (isError ? '1px' : '4px')} solid;
-  outline-color: ${({ theme, isFocused, isError }): string =>
+  outline-color: ${({ isFocused, isError }) =>
     isError
-      ? theme.danger['6']
+      ? themeFunc('danger', '6')
       : isFocused
-        ? theme.elevation['8']
+        ? themeFunc('elevation', '8')
         : 'transparent'};
   transition: border-color 0.3s ease;
 `
@@ -52,25 +52,20 @@ const StyledClose = styled.div`
 
 const StyledInput = styled.input<{ isError?: boolean }>`
   flex: 1;
-  width: 100%;
-  font-size: 14px;
-  font-weight: 400;
+  ${font['body/md_600'].styles};
   height: var(--Sizing-8, 40px);
   background-color: transparent;
   text-overflow: ellipsis;
 
-  color: ${themeFunc('gray', '0')};
+  color: ${({ disabled }) =>
+    disabled ? themeFunc('elevation', '6') : themeFunc('gray', '0')};
   border: none;
   box-sizing: border-box;
   ::placeholder {
-    font-size: 14px;
-    font-family: Manrope;
-    line-height: 20px;
-    font-weight: 600;
-    color: ${(props) =>
-      props.isError
+    color: ${({ isError, disabled }) =>
+      isError
         ? themeFunc('danger', '6')
-        : props.disabled
+        : disabled
           ? themeFunc('elevation', '6')
           : themeFunc('elevation', '5')};
   }
@@ -83,10 +78,12 @@ const StyledInput = styled.input<{ isError?: boolean }>`
 `
 
 export interface KaTextInputProps {
-  inputProps?: {
+  inputProps: {
+    type?: 'text' | 'email' | 'password' | 'number'
     placeholder?: string
-    value?: string
-    onChangeText?: (value: string) => void
+    value: string
+    onChangeText: (value: string) => void
+    style?: React.CSSProperties
   }
   leftComponent?: ReactElement
   rightComponent?: ReactElement
@@ -102,7 +99,12 @@ export const KaTextInput = ({
   rightComponent,
   leftUnit,
   rightUnit,
-  inputProps,
+  inputProps = {
+    type: 'text',
+    placeholder: '',
+    value: '',
+    onChangeText: () => {},
+  },
   disabled,
   isError,
   containerStyle,
@@ -141,7 +143,7 @@ export const KaTextInput = ({
             }}
             isError={isError}
             onChange={({ target: { value } }): void => {
-              inputProps?.onChangeText?.(value)
+              inputProps.onChangeText?.(value)
             }}
             disabled={disabled}
             {...inputProps}
@@ -158,20 +160,18 @@ export const KaTextInput = ({
               {rightUnit}
             </KaText>
           )}
-          {inputProps?.value && (
+          {inputProps.value && !disabled && (
             <StyledClose
               onClick={(): void => {
-                inputProps?.onChangeText?.('')
+                inputProps.onChangeText?.('')
               }}
             >
               <MathClose
                 style={{
                   width: 'var(--Sizing-3, 12px)',
                   height: 'var(--Sizing-3, 12px)',
                 }}
-                fill={
-                  disabled ? getTheme('elevation', '7') : getTheme('gray', '0')
-                }
+                fill={getTheme('elevation', '4')}
               />
             </StyledClose>
           )}