[ui] make disabled color more consistent

apps/portal/src/components/shared/CompaniesTypeahead.tsx

@@ -6,6 +6,7 @@ import { trpc } from '~/utils/trpc';
 
 type Props = Readonly<{
   disabled?: boolean;
+  errorMessage?: string;
   isLabelHidden?: boolean;
   onSelect: (option: TypeaheadOption) => void;
   placeHolder?: string;

apps/storybook/stories/text-area.stories.tsx

@@ -74,11 +74,18 @@ export function HiddenLabel() {
 
 export function Disabled() {
   return (
-    <TextArea
-      disabled={true}
-      label="Comment"
-      placeholder="You can't type here, it's disabled."
-    />
+    <div className="space-y-4">
+      <TextArea
+        disabled={true}
+        label="Comment"
+        placeholder="You can't type here, it's disabled. (Placeholder)"
+      />
+      <TextArea
+        disabled={true}
+        label="Comment"
+        value="You can't type here, it's disabled. (Value)"
+      />
+    </div>
   );
 }
 

apps/storybook/stories/text-input.stories.tsx

@@ -111,9 +111,15 @@ export function Disabled() {
       <TextInput
         disabled={true}
         label="Disabled input"
-        placeholder="John Doe"
+        placeholder="John Doe (Placeholder)"
         type="text"
       />
+      <TextInput
+        disabled={true}
+        label="Disabled input"
+        type="text"
+        value="John Doe (Value)"
+      />
       <TextInput
         disabled={true}
         endAddOn={

apps/storybook/stories/typeahead.stories.tsx

@@ -128,3 +128,57 @@ export function Required() {
     />
   );
 }
+
+export function Disabled() {
+  return (
+    <Typeahead
+      disabled={true}
+      label="Author"
+      options={[]}
+      placeholder="John Doe"
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onQueryChange={() => {}}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onSelect={() => {}}
+    />
+  );
+}
+
+export function Error() {
+  const people = [
+    { id: '1', label: 'Wade Cooper', value: '1' },
+    { id: '2', label: 'Arlene Mccoy', value: '2' },
+    { id: '3', label: 'Devon Webb', value: '3' },
+    { id: '4', label: 'Tom Cook', value: '4' },
+    { id: '5', label: 'Tanya Fox', value: '5' },
+    { id: '6', label: 'Hellen Schmidt', value: '6' },
+  ];
+  const [selectedEntry, setSelectedEntry] = useState<TypeaheadOption>(
+    people[0],
+  );
+  const [query, setQuery] = useState('');
+
+  const filteredPeople =
+    query === ''
+      ? people
+      : people.filter((person) =>
+          person.label
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, '')),
+        );
+
+  return (
+    <Typeahead
+      errorMessage={
+        selectedEntry.id === '1' ? 'Cannot select Wade Cooper' : undefined
+      }
+      label="Author"
+      options={filteredPeople}
+      required={true}
+      value={selectedEntry}
+      onQueryChange={setQuery}
+      onSelect={setSelectedEntry}
+    />
+  );
+}