style: input component

thinc-org · Dec 13, 2024 · 119a6b2 · 119a6b2
1 parent 06dc2ca
commit 119a6b2
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 53 deletions.
diff --git a/.npmrc copy b/.npmrc copy
diff --git a/packages/ui/src/components/input/index.ts b/packages/ui/src/components/input/index.ts
@@ -8,37 +8,43 @@ export type FormInputEvent<T extends Event = Event> = T & {
 }
 
 const inputVariants = tv({
-  base: 'flex w-full max-w-[250px] h-10 rounded-button border-2 px-4 text-button',
+  base: 'flex w-full h-10 rounded-button border-none px-4 text-button2 placeholder:text-on-surface hover:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-container-lowest disabled:border-none disabled:ring-0 disabled:placeholder:text-on-surface-disabled',
   variants: {
     state: {
       default:
-        'border-none bg-surface-container-lowest hover:ring-primary placeholder:text-on-surface hover:outline-none hover:ring-1 focus-visible:outline-none focus-visible:ring-2',
-      error:
-        'border-error ring-error placeholder:text-on-surface ring-1.5 hover:outline-none focus-visible:outline-none',
-      success:
-        'border-success ring-success ring-1.5 focus-visible:outline-none hover:outline-none',
-      disable:
-        'bg-surface-container-lowest border-none focus-visible:outline-none cursor-not-allowed ring-0 placeholder:text-on-surface-disabled placeholder:pointer-events-none',
+        'bg-surface-container-lowest hover:ring-primary hover:ring-1 focus-visible:ring-1.5 focus-visible:ring-primary',
+      error: 'ring-error ring-1.5',
+      success: 'ring-success ring-1.5',
     },
   },
   defaultVariants: {
-    color: 'primary',
     state: 'default',
   },
 })
 
-export type InputEvents = {
+type InputEvents = {
+  blur: FormInputEvent<FocusEvent>
   change: FormInputEvent<Event>
   click: FormInputEvent<MouseEvent>
   focus: FormInputEvent<FocusEvent>
+  focusin: FormInputEvent<FocusEvent>
+  focusout: FormInputEvent<FocusEvent>
+  keydown: FormInputEvent<KeyboardEvent>
+  keypress: FormInputEvent<KeyboardEvent>
+  keyup: FormInputEvent<KeyboardEvent>
+  mouseover: FormInputEvent<MouseEvent>
+  mouseenter: FormInputEvent<MouseEvent>
+  mouseleave: FormInputEvent<MouseEvent>
+  mousemove: FormInputEvent<MouseEvent>
+  paste: FormInputEvent<ClipboardEvent>
+  input: FormInputEvent<InputEvent>
+  wheel: FormInputEvent<WheelEvent>
 }
 
 type State = VariantProps<typeof inputVariants>['state']
 
 type Props = HTMLInputAttributes & {
   state?: State
-  label?: string
-  desc?: string
 }
 
 type Events = InputEvents

diff --git a/packages/ui/src/components/input/input.svelte b/packages/ui/src/components/input/input.svelte
@@ -7,51 +7,33 @@
 
   let className: $$Props['class'] = undefined
   export let value: $$Props['value'] = undefined
-  export let label: $$Props['label'] = ''
-  export let desc: $$Props['desc'] = ''
   export let state: $$Props['state'] = 'default'
   export { className as class }
 
   // Workaround for https://github.com/sveltejs/svelte/issues/9305
   // Fixed in Svelte 5, but not backported to 4.x.
   export let readonly: $$Props['readonly'] = undefined
-  const disabled = state === 'disable'
 </script>
 
-<div class="my-3 space-y-2">
-  <label>
-    {label}
-    <input
-      class="{cn(className, inputVariants({ state }))}"
-      bind:value
-      {readonly}
-      on:blur
-      on:change
-      on:click
-      on:focus
-      on:focusin
-      on:focusout
-      on:keydown
-      on:keypress
-      on:keyup
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-      on:mousemove
-      on:paste
-      on:input
-      on:wheel|passive
-      {disabled}
-      {...$$restProps}
-    />
-  </label>
-  <p
-    class="{state == 'error'
-      ? 'text-error'
-      : state == 'success'
-        ? 'text-success'
-        : ''}"
-  >
-    {desc}
-  </p>
-</div>
+<input
+  class="{cn(className, inputVariants({ state }))}"
+  bind:value
+  {readonly}
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:paste
+  on:input
+  on:wheel|passive
+  {...$$restProps}
+/>