From 23f534fbb96e91fc48456fd7f70b7579c2a74ad1 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 24 Sep 2025 14:02:37 +0800
Subject: [PATCH] Added combobox component

---
 src/components/Combobox/Combobox.sass | 149 ++++++++++++++++++++++++++
 src/components/Combobox/Combobox.tsx  |  47 ++++++++
 src/components/index.ts               |   2 +-
 3 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Combobox/Combobox.sass
 create mode 100644 src/components/Combobox/Combobox.tsx

diff --git a/src/components/Combobox/Combobox.sass b/src/components/Combobox/Combobox.sass
new file mode 100644
index 0000000..39cdbb3
--- /dev/null
+++ b/src/components/Combobox/Combobox.sass
@@ -0,0 +1,149 @@
+.combobox__control
+  display: inline-flex
+  justify-content: space-between
+  width: 500px
+  border-radius: 6px
+  font-size: 16px
+  line-height: 1
+  outline: none
+  background-color: #16212c96
+  border: 1px solid hsl(240 6% 90%)
+  transition: border-color 250ms, color 250ms
+
+  &[data-invalid]
+    border-color: hsl(0 72% 51%)
+    color: hsl(0 72% 51%)
+
+  &_multi
+    width: 100%
+    min-width: 200px
+    max-width: 300px
+
+.combobox__input
+  appearance: none
+  display: inline-flex
+  min-width: 0
+  min-height: 40px
+  padding-left: 16px
+  font-size: 16px
+  background: transparent
+  border-top-left-radius: 6px
+  border-bottom-left-radius: 6px
+  outline: none
+  color: white
+  width: 40rem
+
+  &::placeholder
+    color: #517aa2d2
+
+.combobox__trigger
+  appearance: none
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  width: auto
+  outline: none
+  border-top-right-radius: 6px
+  border-bottom-right-radius: 6px
+  padding: 0 10px
+  background-color: hsl(240 5% 96%)
+  border-left: 1px solid hsl(240 6% 90%)
+  color: hsl(240 4% 16%)
+  font-size: 16px
+  line-height: 0
+  transition: 250ms background-color
+
+.combobox__icon
+  height: 20px
+  width: 20px
+  flex: 0 0 20px
+
+.combobox__description
+  margin-top: 8px
+  color: hsl(240 5% 26%)
+  font-size: 12px
+  user-select: none
+
+.combobox__error-message
+  margin-top: 8px
+  color: hsl(0 72% 51%)
+  font-size: 12px
+  user-select: none
+
+.combobox__content
+  background-color: #00000037
+  backdrop-filter: blur(8px)
+  border-radius: 6px
+  border: 1px solid hsl(240 6% 90%)
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
+  transform-origin: var(--kb-combobox-content-transform-origin)
+  animation: contentHide 250ms ease-in forwards
+  color: red
+
+  &[data-expanded]
+    animation: contentShow 250ms ease-out
+
+.combobox__listbox
+  overflow-y: auto
+  max-height: 360px
+  padding: 8px
+  
+
+  &:focus
+    outline: none
+
+.combobox__item
+  font-size: 16px
+  line-height: 1
+  color: hsl(240 4% 16%)
+  border-radius: 4px
+  display: flex
+  align-items: center
+  justify-content: space-between
+  height: 32px
+  padding: 0 8px
+  position: relative
+  user-select: none
+  outline: none
+  color: white
+
+  &[data-disabled]
+    color: hsl(240 5% 65%)
+    opacity: 0.5
+    pointer-events: none
+
+  &[data-highlighted]
+    outline: none
+    background-color: hsl(200 98% 39%)
+    color: white
+
+.combobox__section
+  padding: 8px 0 0 8px
+  font-size: 14px
+  line-height: 32px
+  color: hsl(240 4% 46%)
+
+.combobox__item-indicator
+  height: 20px
+  width: 20px
+  display: inline-flex
+  align-items: center
+  justify-content: center
+
+@keyframes contentShow
+  from
+    opacity: 0
+    transform: translateY(-8px)
+
+  to
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes contentHide
+  from
+    opacity: 1
+    transform: translateY(0)
+
+  to
+    opacity: 0
+    transform: translateY(-8px)
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
new file mode 100644
index 0000000..7733c92
--- /dev/null
+++ b/src/components/Combobox/Combobox.tsx
@@ -0,0 +1,47 @@
+import './Combobox.sass'
+import { Combobox } from '@kobalte/core/combobox'
+import { FaSolidAngleDown } from 'solid-icons/fa'
+import { AiOutlineCheck } from 'solid-icons/ai'
+
+interface Props {
+  options: any[]
+  placeholder: string
+  value: string
+  onChange: (value: string | null) => void
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Combobox
+        options={props.options}
+        defaultFilter="startsWith"
+        placeholder={props.placeholder}
+        value={props.value}
+        onChange={props.onChange}
+        itemComponent={(props) => (
+          <Combobox.Item item={props.item} class="combobox__item">
+            <Combobox.ItemLabel>{props.item.textValue}</Combobox.ItemLabel>
+            <Combobox.ItemIndicator class="combobox__item-indicator">
+              <AiOutlineCheck />
+            </Combobox.ItemIndicator>
+          </Combobox.Item>
+        )}
+      >
+        <Combobox.Control class="combobox__control" aria-label="Assessors">
+          <Combobox.Input class="combobox__input" />
+          <Combobox.Trigger class="combobox__trigger">
+            <Combobox.Icon class="combobox__icon">
+              <FaSolidAngleDown />
+            </Combobox.Icon>
+          </Combobox.Trigger>
+        </Combobox.Control>
+        <Combobox.Portal>
+          <Combobox.Content class="combobox__content">
+            <Combobox.Listbox class="combobox__listbox" />
+          </Combobox.Content>
+        </Combobox.Portal>
+      </Combobox>
+    </>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index e96f4a4..42f3b3f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,7 +15,7 @@ export { default as Display } from './Display/Display'
 export { default as Padding } from './Padding/Padding'
 export { default as Modal } from './Modal/Modal'
 export { default as Table } from './Table/Table'
-// export { default as Input } from './components/Input'
+export { default as Combobox } from './Combobox/Combobox'
 
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'