feat: style improvements to chip input

Author: lars-berger

src/components/chip-input.tsx

@@ -6,7 +6,7 @@ import {
 } from 'solid-js';
 import { IconX } from '@tabler/icons-solidjs';
 
-import type { WithOverride } from '~/utils';
+import { cn, type WithOverride } from '~/utils';
 import {
   FORM_INPUT_PROP_NAMES,
   makeFieldComponent,
@@ -96,38 +96,40 @@ export function ChipInput(props: ChipInputProps) {
   }
 
   return (
-    <div {...rest} class="w-full">
-      <div
-        onClick={() => inputRef()?.focus()}
-        class="flex flex-wrap items-center gap-2 p-2 border border-gray-300 rounded-md focus-within:ring-2 focus-within:ring-primary-500 focus-within:border-primary-500 min-h-12"
-      >
-        <Show when={props.value?.length}>
-          {props.value?.map(chip => (
-            <Badge
-              variant="secondary"
-              class="flex items-center gap-1 px-2 py-1"
-            >
-              {chip}
-              {!props.disabled && (
-                <IconX
-                  onClick={() => removeChip(chip)}
-                  class="h-3 w-3 cursor-pointer"
-                />
-              )}
-            </Badge>
-          ))}
-        </Show>
-
+    <div
+      onClick={() => inputRef()?.focus()}
+      class={cn(
+        'w-full min-h-9 flex flex-wrap items-center gap-2 px-3 py-1 border border-input rounded-md shadow-sm transition-shadow focus-within:outline-none focus-within:ring-[1.5px] focus-within:ring-ring',
+        props.disabled && 'cursor-not-allowed opacity-50',
+        props.class,
+      )}
+      {...rest}
+    >
+      <Show when={props.value?.length}>
+        {props.value?.map(chip => (
+          <Badge variant="secondary" class="flex items-center gap-1">
+            {chip}
+            {!props.disabled && (
+              <IconX
+                onClick={() => removeChip(chip)}
+                class="h-3 w-3 cursor-pointer"
+              />
+            )}
+          </Badge>
+        ))}
+      </Show>
+
+      <Show when={!props.disabled}>
         <TextInput
           ref={setInputRef}
           disabled={props.disabled}
           onBlur={() => props.onBlur?.()}
           onKeyDown={onKeyDown}
           onPaste={onPaste}
           placeholder={props.value?.length ? '' : props.placeholder}
-          class="flex-grow !border-0 !ring-0 !shadow-none !p-0 min-w-20"
+          class="flex-grow !border-0 !ring-0 !shadow-none !p-0"
         />
-      </div>
+      </Show>
     </div>
   );
 }