feat: create textarea plugin component (#45)

shuriken-ui · Jul 23, 2023 · d52d631 · d52d631
1 parent 076af1f
commit d52d631
Show file tree

Hide file tree

Showing 3 changed files with 481 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -583,6 +583,123 @@ export default withShurikenUI({
           bgHover: 'black/20',
           bgHoverDark: 'white/20',
         },
+        textarea: {
+          labelFloat: {
+            text: 'primary-500',
+            size: '5',
+            duration: '300',
+          },
+          errorText: {
+            text: 'danger-600',
+            textSize: '[0.65rem]',
+            font: 'sans',
+            fontWeight: 'medium',
+          },
+          textarea: {
+            size: 'full',
+            focusVisible: {
+              labelFloat: {
+                text: 'primary-500',
+                textDark: 'primary-500',
+              },
+            },
+            placeload: {
+              size: 'full',
+              space: '2',
+            },
+            rounded: {
+              default: 'md',
+              smooth: 'lg',
+              curved: 'xl',
+            },
+            default: {
+              bg: 'white',
+              bgDark: 'muted-900/75',
+              border: 'muted-300',
+              borderDark: 'muted-700',
+              text: 'muted-600',
+              textDark: 'muted-200',
+              textPlaceholder: 'muted-300',
+              textPlaceholderDark: 'muted-500',
+            },
+            defaultContrast: {
+              bg: 'white',
+              bgDark: 'muted-950/75',
+              border: 'muted-300',
+              borderDark: 'muted-800',
+              text: 'muted-600',
+              textDark: 'muted-200',
+              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',
+            },
+            focus: {
+              border: 'primary-500',
+              duration: '300',
+            },
+            sm: {
+              size: '[2rem]',
+              text: 'xs',
+              textLabel: 'xs',
+              labelFloat: 'xs',
+            },
+            md: {
+              size: '[2.5rem]',
+              text: 'sm',
+              textLabel: 'sm',
+              labelFloat: {
+                text: 'xs',
+                textFocusVisible: 'xs',
+                textPlaceholderShown: '[0.825rem]',
+              },
+            },
+            lg: {
+              size: '[3rem]',
+              text: 'sm',
+              textLabel: 'sm',
+              labelFloat: {
+                text: 'xs',
+                textFocusVisible: 'xs',
+                textPlaceholderShown: '[0.825rem]',
+              },
+            },
+            addon: {
+              border: 'muted-300',
+              borderDark: 'muted-700',
+              bg: 'muted-50',
+              bgDark: 'muted-900/50',
+              size: 'full',
+              space: '2',
+            }
+          }
+        }
         tooltip: {
           font: 'sans',
           bg: '[#1e293b]',

diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts
@@ -14,6 +14,7 @@ import mask from './mask'
 import placeload from './placeload'
 import progressCircle from './progress-circle'
 import slimscroll from './slimscroll'
+import textarea from './textarea'
 import tooltip from './tooltip'
 
 const components = [
@@ -30,6 +31,7 @@ const components = [
   placeload,
   progressCircle,
   slimscroll,
+  textarea,
   tooltip,
 ]