Added input component

package.json

@@ -12,6 +12,7 @@
     "@kobalte/core": "^0.13.11",
     "@solidjs-use/integrations": "^2.3.0",
     "@solidjs/router": "^0.15.3",
+    "bcryptjs": "^3.0.2",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.18",
     "gsap": "^3.13.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@solidjs/router':
         specifier: ^0.15.3
         version: 0.15.3(solid-js@1.9.9)
+      bcryptjs:
+        specifier: ^3.0.2
+        version: 3.0.2
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
@@ -825,6 +828,10 @@ packages:
     resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
     hasBin: true
 
+  bcryptjs@3.0.2:
+    resolution: {integrity: sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==}
+    hasBin: true
+
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -2012,6 +2019,8 @@ snapshots:
 
   baseline-browser-mapping@2.8.6: {}
 
+  bcryptjs@3.0.2: {}
+
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1

src/components/Input/Input.sass

@@ -0,0 +1,45 @@
+.text-field
+  display: flex
+  flex-direction: column
+  gap: 4px
+
+  &__label
+    color: hsl(240 6% 10%)
+    font-size: 14px
+    font-weight: 500
+    user-select: none
+
+  &__input
+    display: inline-flex
+    border-radius: 6px
+    padding: 6px 12px
+    font-size: 16px
+    outline: none
+    background-color: white
+    border: 1px solid hsl(240 6% 90%)
+    color: hsl(240 4% 16%)
+    transition: border-color 250ms, color 250ms
+
+  &__input:hover
+    border-color: hsl(240 5% 65%)
+
+  &__input:focus-visible
+    outline: 2px solid #39536f
+    outline-offset: 2px
+
+  &__input[data-invalid]
+    border-color: hsl(0 72% 51%)
+    color: hsl(0 72% 51%)
+
+  &__input::placeholder
+    color: hsl(240 4% 46%)
+
+  &__description
+    color: hsl(240 5% 26%)
+    font-size: 12px
+    user-select: none
+
+  &__error-message
+    color: hsl(0 72% 51%)
+    font-size: 12px
+    user-select: none

src/components/Input/Input.tsx

@@ -0,0 +1,22 @@
+import './Input.sass'
+import { TextField } from '@kobalte/core/text-field'
+import { Show, type Setter } from 'solid-js'
+
+interface Props {
+  label?: string
+  value: string
+  onChange: Setter<string>
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <TextField class="text-field" value={props.value} onChange={props.onChange}>
+        <Show when={props.label}>
+          <TextField.Label class="text-field__label">{props.label}</TextField.Label>
+        </Show>
+        <TextField.Input class="text-field__input" />
+      </TextField>
+    </>
+  )
+}