feat: create input plugin component (#47)

Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
shuriken-ui · Jul 23, 2023 · 626a3bb · 626a3bb
1 parent 3455fdb
commit 626a3bb
Show file tree

Hide file tree

Showing 3 changed files with 733 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -573,6 +573,92 @@ export default withShurikenUI({
           color: 'muted-300',
           colorDark: 'muted-600',
         },
+        input: {
+          label: {
+            float: {
+              text: 'primary-500',
+              duration: '300',
+              size: '5',
+            },
+          },
+          icon: {
+            text: 'muted-400',
+            duration: '300',
+          },
+          errorText: {
+            text: 'danger-600',
+            textSize: '[0.65rem]',
+            font: 'sans',
+            fontWeight: 'medium',
+          },
+          input: {
+            focusSize: 'full',
+            font: 'sans',
+            duration: '300',
+            focusVisible: {
+              labelFloat: {
+                text: 'primary-500',
+                textDark: 'primary-500',
+              },
+              icon: {
+                text: 'primary-500',
+              },
+            },
+            action: {
+              text: 'muted-400',
+              duration: '300',
+            },
+            rounded: {
+              default: 'md',
+              smooth: 'lg',
+              curved: 'xl',
+              full: 'full',
+            },
+            sm: {
+              label: {
+                text: 'xs',
+              },
+              iconOrAction: {
+                size: '8',
+              },
+              iconOrAcionInner: {
+                size: '4',
+              },
+              placeload: {
+                size: '8',
+              },
+            },
+            md: {
+              label: {
+                text: '[0.825rem]',
+              },
+              iconOrAction: {
+                size: '10',
+              },
+              iconOrAcionInner: {
+                size: '[1.15rem]',
+              },
+              placeload: {
+                size: '10',
+              },
+            },
+            lg: {
+              label: {
+                text: 'sm',
+              },
+              iconOrAction: {
+                size: '12',
+              },
+              iconOrAcionInner: {
+                size: '5',
+              },
+              placeload: {
+                size: '12',
+              },
+            },
+            default: {
+              bg: 'white',
+              bgDark: 'muted-900/75',
         inputFile: {
           drop: {
             size: '64',
@@ -680,6 +766,9 @@ export default withShurikenUI({
               textPlaceholder: 'muted-300',
               textPlaceholderDark: 'muted-500',
             },
+            defaultContrast: {
+              bg: 'white',
+              bgDark: 'muted-950/75',
             addon: {
               bg: 'muted-50',
               bgDark: 'muted-800',
@@ -699,6 +788,99 @@ export default withShurikenUI({
               textPlaceholder: 'muted-300',
               textPlaceholderDark: 'muted-600',
             },
+            muted: {
+              bg: 'muted-200',
+              bgDark: 'muted-900/75',
+              border: 'muted-200',
+              borderDark: 'muted-700',
+              text: 'muted-600',
+              textDark: 'muted-200',
+              textPlaceholder: 'muted-300',
+              textPlaceholderDark: 'muted-500',
+            },
+            mutedContrast: {
+              bg: 'muted-100',
+              bgDark: 'muted-950/75',
+              border: 'muted-100',
+              borderDark: 'muted-800',
+              text: 'muted-600',
+              textDark: 'muted-200',
+              textPlaceholder: 'muted-300',
+              textPlaceholderDark: 'muted-600',
+            },
+            notLoading: {
+              text: 'muted-300',
+              textDark: 'muted-600',
+            },
+            error: {
+              border: 'danger-500',
+              borderDark: 'danger-500',
+              icon: {
+                text: 'danger-500',
+              }
+            },
+            hasNotIcon: {
+              text: {
+                sm: 'xs',
+                md: 'sm',
+                lg: 'sm',
+              },
+              labelFloat: {
+                sm: 'xs',
+                md: {
+                  text: 'xs',
+                  focusVisible: {
+                    text: 'xs',
+                  },
+                  placeholderShown: {
+                    text: '[0.825rem]',
+                  },
+                },
+                lg: {
+                  text: 'xs',
+                  focusVisible: {
+                    text: 'xs',
+                  },
+                  placeholderShown: {
+                    text: '[0.825rem]',
+                  },
+                },
+              },
+            },
+            hasIcon: {
+              text: {
+                sm: 'xs',
+                md: 'sm',
+                lg: 'base',
+              },
+              labelFloat: {
+                sm: 'xs',
+                md: {
+                  text: 'xs',
+                  focusVisible: {
+                    text: 'xs',
+                  },
+                  placeholderShown: {
+                    text: '[0.825rem]',
+                  },
+                },
+                lg: {
+                  text: 'xs',
+                  focusVisible: {
+                    text: 'xs',
+                  },
+                  placeholderShown: {
+                    text: '[0.825rem]',
+                  },
+                },
+              },
+            },
+            hasAction: {
+              spaceSM: '8',
+              spaceMD: '10',
+              spaceLG: '12',
+            },
+          },
             addon: {
               bg: 'muted-50',
               bgDark: 'muted-950',

diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts
@@ -10,6 +10,7 @@ import buttonGroup from './button-group'
 import dropdown from './dropdown'
 import inputFile from './input-file'
 import focus from './focus'
+import input from './input'
 import inputFileRegular from './input-file-regular'
 import label from './label'
 import listbox from './listbox'
@@ -35,6 +36,7 @@ const components = [
   dropdown,
   inputFile,
   focus,
+  input,
   inputFileRegular,
   label,
   listbox,