From 7ce9f45ac7434d8d8235e0100385b78bb2e379e3 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Thu, 7 Sep 2023 11:12:20 +0200
Subject: [PATCH] feat(components): add disbaled state

---
 .../single-combobox/single-combobox-input.tsx          |  2 +-
 .../form-field/single-combobox/single-combobox.tsx     | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox-input.tsx b/src/components/form-field/single-combobox/single-combobox-input.tsx
index a1b43046..9c609e71 100644
--- a/src/components/form-field/single-combobox/single-combobox-input.tsx
+++ b/src/components/form-field/single-combobox/single-combobox-input.tsx
@@ -25,7 +25,7 @@ export const SingleComboboxInput = ({
                 placeholder={placeholder}
                 displayValue={() => displayValue}
                 onChange={onChange}
-                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200"
+                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:bg-neutral-100 disabled:text-neutral-600 disabled:border-neutral-300"
             />
             {showButton ? (
                 <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">
diff --git a/src/components/form-field/single-combobox/single-combobox.tsx b/src/components/form-field/single-combobox/single-combobox.tsx
index 054a2233..7bb52e0d 100644
--- a/src/components/form-field/single-combobox/single-combobox.tsx
+++ b/src/components/form-field/single-combobox/single-combobox.tsx
@@ -11,11 +11,17 @@ export interface SingleComboboxProps<TValue> {
     value: TValue;
     onChange: (value: TValue) => void;
     children: React.ReactNode;
+    disabled?: boolean;
 }
 
-const SingleCombobox = <TValue,>({ value, onChange, children }: SingleComboboxProps<TValue>) => {
+const SingleCombobox = <TValue,>({
+    value,
+    onChange,
+    children,
+    disabled,
+}: SingleComboboxProps<TValue>) => {
     return (
-        <HeadlessCombobox value={value} onChange={onChange}>
+        <HeadlessCombobox value={value} onChange={onChange} disabled={disabled}>
             <div className="relative">{children}</div>
         </HeadlessCombobox>
     );