wip: combobox

.storybook/output.css

@@ -727,6 +727,14 @@ select {
   left: 50%;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -735,10 +743,6 @@ select {
   right: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
 .left-1\/2 {
   left: 50%;
 }
@@ -751,10 +755,6 @@ select {
   right: 0.75rem;
 }
 
-.right-2 {
-  right: 0.5rem;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -763,18 +763,26 @@ select {
   margin: 0px;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.-mt-2 {
+  margin-top: -0.5rem;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -799,6 +807,18 @@ select {
   height: 2px;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.h-\[1\.5px\] {
+  height: 1.5px;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -815,6 +835,10 @@ select {
   width: 24rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -823,6 +847,10 @@ select {
   min-width: 8rem;
 }
 
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .-translate-x-2\/4 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -833,13 +861,13 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-x-1\/2 {
+.-translate-y-1\/2 {
-  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-1\/2 {
+.-translate-x-1\/2 {
-  --tw-translate-y: -50%;
+  --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -857,6 +885,10 @@ select {
           user-select: none;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
@@ -914,14 +946,14 @@ select {
   border-radius: 9999px;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -934,6 +966,10 @@ select {
   border-width: 1px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-mono-border {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1062,6 +1098,11 @@ select {
   padding-right: 0px;
 }
 
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -1106,6 +1147,10 @@ select {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -1130,15 +1175,30 @@ select {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
+.text-mono-border {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -1186,11 +1246,6 @@ html {
   border-color: rgb(39 39 42 / var(--tw-border-opacity));
 }
 
-.focus\:bg-mono-hover:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .focus\:bg-mono-primary:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
@@ -1227,22 +1282,26 @@ html {
   --tw-ring-offset-width: 2px;
 }
 
-.data-\[disabled\]\:pointer-events-none[data-disabled] {
+.disabled\:cursor-not-allowed:disabled {
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
-.data-\[highlighted\]\:border-2[data-highlighted] {
+.disabled\:opacity-50:disabled {
-  border-width: 2px;
+  opacity: 0.5;
 }
 
-.data-\[highlighted\]\:border-mono-primary[data-highlighted] {
+.aria-selected\:bg-mono-primary[aria-selected="true"] {
-  --tw-border-opacity: 1;
+  --tw-bg-opacity: 1;
-  border-color: rgb(39 39 42 / var(--tw-border-opacity));
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
-.data-\[highlighted\]\:bg-gray-400[data-highlighted] {
+.aria-selected\:text-white[aria-selected="true"] {
-  --tw-bg-opacity: 1;
+  --tw-text-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
 }
 
 .data-\[disabled\]\:text-mono-text\/50[data-disabled] {
@@ -1253,11 +1312,6 @@ html {
   opacity: 0.5;
 }
 
-.data-\[highlighted\]\:outline-none[data-highlighted] {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .data-\[focus\]\:outline[data-focus] {
   outline-style: solid;
 }

package-lock.json

@@ -13,12 +13,13 @@
         "@radix-ui/react-dropdown-menu": "^2.0.4",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-primitive": "^1.0.3",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toggle": "^1.0.3",
         "@react-spring/web": "^9.7.1",
-        "@tanstack/react-table": "^8.8.5",
+        "cmdk": "^0.2.0",
         "dashify": "^2.0.0",
         "react-icons": "^4.12.0",
         "react-number-format": "^5.1.4",
@@ -43,6 +44,7 @@
         "@testing-library/user-event": "^14.4.3",
         "@types/dashify": "^1.0.1",
         "@types/jest": "^29.4.0",
+        "@types/lodash-es": "^4.17.12",
         "@types/react": "^18.0.27",
         "autoprefixer": "^10.4.13",
         "class-variance-authority": "^0.4.0",
@@ -50,6 +52,7 @@
         "color": "^4.2.3",
         "jest": "^29.4.1",
         "jest-environment-jsdom": "^29.4.1",
+        "lodash-es": "^4.17.21",
         "np": "^7.6.3",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.33",
@@ -4599,6 +4602,417 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
+      "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@floating-ui/core": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@floating-ui/dom": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.5.3",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@floating-ui/react-dom": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz",
+      "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz",
@@ -9828,37 +10242,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@tanstack/react-table": {
-      "version": "8.8.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.8.5.tgz",
-      "integrity": "sha512-g/t21E/ICHvaCOJOhsDNr5QaB/6aDQEHFbx/YliwwU/CJThMqG+dS28vnToIBV/5MBgpeXoGRi2waDJVJlZrtg==",
-      "dependencies": {
-        "@tanstack/table-core": "8.8.5"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
-    "node_modules/@tanstack/table-core": {
-      "version": "8.8.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.8.5.tgz",
-      "integrity": "sha512-Xnwa1qxpgvSW7ozLiexmKp2PIYcLBiY/IizbdGriYCL6OOHuZ9baRhrrH51zjyz+61ly6K59rmt6AI/3RR+97Q==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -10412,6 +10795,15 @@
       "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
       "dev": true
     },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mdx": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.10.tgz",
@@ -12315,6 +12707,151 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.0.tgz",
+      "integrity": "sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.0",
+        "command-score": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
+      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.0",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-portal": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-slot": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
+      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
+      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
+      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -12408,6 +12945,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/command-score": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
+      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
+    },
     "node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -19677,6 +20219,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",

package.json

@@ -53,6 +53,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/dashify": "^1.0.1",
     "@types/jest": "^29.4.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.0.27",
     "autoprefixer": "^10.4.13",
     "class-variance-authority": "^0.4.0",
@@ -60,6 +61,7 @@
     "color": "^4.2.3",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
+    "lodash-es": "^4.17.21",
     "np": "^7.6.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.33",
@@ -82,12 +84,13 @@
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-primitive": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toggle": "^1.0.3",
     "@react-spring/web": "^9.7.1",
-    "@tanstack/react-table": "^8.8.5",
+    "cmdk": "^0.2.0",
     "dashify": "^2.0.0",
     "react-icons": "^4.12.0",
     "react-number-format": "^5.1.4",

src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../Box";
+import { Combobox } from "./Combobox";
+import { cx } from "../../utils";
+
+const meta: Meta<typeof Box> = {
+  title: "UI/Combobox",
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+const animals = [
+  { label: "Cat", value: "cat" },
+  { label: "Dog", value: "dog" },
+  { label: "Bird", value: "bird" },
+  { label: "Elephant", value: "elephant" },
+  { label: "Mouse", value: "mouse" },
+  { label: "Rabbit", value: "rabbit" },
+  { label: "Tiger", value: "tiger" },
+  { label: "Lion", value: "lion" },
+  { label: "Monkey", value: "monkey" },
+  { label: "Panda", value: "panda" },
+];
+
+// export const Default: Story = {
+//   render: () => (
+//     <Combobox label="Animals" items={animals}>
+//       {animals.map((animal) => (
+//         <ComboboxItem key={animal.value}>{animal.label}</ComboboxItem>
+//       ))}
+//     </Combobox>
+//   ),
+// };
+
+export const Default: Story = {
+  render: () => <Combobox label="Animals" options={animals} />,
+};

src/components/Combobox/Combobox.styles.ts

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+
+const base = [
+  "block",
+  "w-full",
+  "rounded-lg",
+  "border-2",
+  "border-mono-border",
+  "py-1.5",
+  "px-2",
+  "text-left",
+  "text-mono-text",
+  "text-ellipsis",
+  "placeholder:text-mono-border",
+  "outline-none",
+  "focus:ring-0",
+  "focus:border-mono-primary",
+];
+
+const comboboxStyles = cva(base);
+
+export { comboboxStyles };

src/components/Combobox/Combobox.tsx

@@ -0,0 +1,160 @@
+import * as _ from "lodash-es";
+import * as React from "react";
+import * as Popover from "@radix-ui/react-popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "cmdk";
+import * as T from "./Combobox.types";
+import * as styles from "./Combobox.styles";
+import { Divider } from "../Divider";
+import { Label } from "../Common";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { Input } from "../Input";
+import { cx } from "../../utils";
+import { FaCheck, FaChevronDown, FaSistrix } from "react-icons/fa";
+
+const Combobox = React.forwardRef<T.ComboboxElement, T.ComboboxProps>(
+  ({ label, hideLabel, options, onSelect, defaultValue }, forwardedRef) => {
+    const [open, setOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(defaultValue);
+
+    const handleOnSelect = (selectedValue: string) => {
+      console.log("selected value", selectedValue);
+
+      const option = options.find((option) => option.value === selectedValue);
+      console.log("selected option", option);
+
+      if (!_.isNil(option)) {
+        // If same option then unselect it.
+        if (option?.label === selected) {
+          // Unselect logic
+        } else {
+          // Select logic
+        }
+      }
+    };
+
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Box>
+          <Label className={cx([], { "sr-only": hideLabel })}>{label}</Label>
+        </Box>
+        <Popover.Trigger asChild>
+          <Button role="combobox" className={cx([""], { "mt-2": !hideLabel })}>
+            {label}
+            <FaChevronDown />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content sideOffset={4} align="start">
+            <Command
+              className={cx([
+                "bg-white",
+                "flex",
+                "h-full",
+                "w-full",
+                "flex-col",
+                "overflow-hidden",
+                "rounded-lg",
+                "border-2",
+                "border-mono-border",
+              ])}
+            >
+              <Box
+                className={cx(["flex", "items-center", "px-2"])}
+                cmdk-input-wrapper=""
+              >
+                <FaSistrix
+                  className={cx([
+                    "h-4",
+                    "w-4",
+                    "shrink-0",
+                    "font-bold",
+                    "text-lg",
+                  ])}
+                />
+                <CommandInput
+                  // className={cx([styles.comboboxStyles()])}
+                  placeholder="Search Option..."
+                  ref={forwardedRef}
+                  className={cx([
+                    "flex",
+                    "w-full",
+                    "rounded-md",
+                    "bg-transparent",
+                    "outline-none",
+                    "border-0",
+                    "placeholder:text-muted-foreground",
+                    "focus:outline-none",
+                    "focus:ring-0",
+                    "disabled:cursor-not-allowed",
+                    "disabled:opacity-50",
+                  ])}
+                />
+              </Box>
+              <Divider border size="sm" className={cx(["py-0"])} />
+              <CommandList>
+                <CommandEmpty>
+                  <Box>Nothing here</Box>
+                </CommandEmpty>
+                {options.map((option, index) => {
+                  // Handle sections
+                  if (Array.isArray(option.value)) {
+                    const nestedOptions = option.value;
+                    const key = `${label}-${index}`;
+
+                    return (
+                      <CommandGroup key={key} heading={option.label}>
+                        {nestedOptions.map((nestedOption, nestedIndex) => (
+                          <CommandItem
+                            key={String(nestedOption.value)}
+                            onSelect={handleOnSelect}
+                          >
+                            {nestedOption.label}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    );
+                  }
+                  return (
+                    <CommandGroup>
+                      <CommandItem
+                        className={cx([
+                          "relative",
+                          "flex",
+                          "cursor-default",
+                          "select-none",
+                          "items-center",
+                          "px-2",
+                          "py-1",
+                          "outline-none",
+                          "rounded-sm",
+                          "aria-selected:bg-mono-primary",
+                          "aria-selected:text-white",
+                          "data-[disabled]:pointer-events-none",
+                          "data-[disabled]:opacity-50",
+                        ])}
+                        key={option.value}
+                        onSelect={handleOnSelect}
+                      >
+                        {option.label}
+                      </CommandItem>
+                    </CommandGroup>
+                  );
+                })}
+              </CommandList>
+            </Command>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  }
+);
+
+export { Combobox };

src/components/Combobox/Combobox.types.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Input } from "../Input";
+import { InputProps } from "../Common/Common.types";
+
+type ComboboxOption = {
+  label: string;
+  value: string | ComboboxOption[];
+};
+
+type ComboboxElement = React.ElementRef<typeof Input>;
+
+type ComboboxProps = React.ComponentPropsWithoutRef<typeof Input> &
+  InputProps & {
+    options: ComboboxOption[];
+    fullWidth?: boolean;
+    allowCreate?: boolean;
+    onSelect?: (option: ComboboxOption) => void;
+    onCreate?: (option: ComboboxOption) => void;
+    // Updates the selected option when optimistic updates happen.
+    onSync?: (option: ComboboxOption) => void;
+  };
+
+// type ComboboxItemElement = React.ElementRef<typeof ListBoxItem>;
+//
+// type ComboboxItemProps = React.ComponentPropsWithoutRef<typeof ListBoxItem>;
+
+export {
+  ComboboxElement,
+  ComboboxProps,
+  // ComboboxItemElement,
+  // ComboboxItemProps,
+};

src/components/Common/HelpText.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { cva, VariantProps } from "class-variance-authority";
-import { cx } from "../utils";
+import { cx } from "../../utils";
-import * as Common from "./Common";
+import * as Common from "./index";
 
 type HelpTextElement = React.ElementRef<typeof Primitive.p>;
 

src/components/Common/Label.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as $ from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
-import { cx } from "../utils";
+import { cx } from "../../utils";
 
 type LabelElement = React.ElementRef<typeof $.Root>;
 

src/components/Common/index.ts

@@ -1,3 +1,5 @@
 import * as T from "./Common.types";
+export * from "./HelpText";
+export * from "./Label";
 
 export type { T };

src/components/Divider/Divider.tsx

@@ -16,7 +16,7 @@ const Divider = React.forwardRef<
   return match({ border })
     .with({ border: true }, () => (
       <div {...props} className={classes}>
-        <Box className={cx(["bg-mono-border", "h-[2px]"])} />
+        <Box className={cx(["bg-mono-border", "h-[1.5px]"])} />
       </div>
     ))
     .otherwise(() => <div {...props} className={classes} ref={forwardedRef} />);

src/components/Input/Input.tsx

@@ -3,8 +3,7 @@ import dashify from "dashify";
 import { NumericFormat } from "react-number-format";
 import type * as T from "./Input.types";
 import { Box } from "../Box";
-import { Label } from "../Label";
+import { Label, HelpText } from "../Common";
-import { HelpText } from "../HelpText";
 import { cx } from "../../utils";
 import { inputStyles } from "./Input.styles";
 import { match, P } from "ts-pattern";
@@ -19,7 +18,7 @@ const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
       hideLabel = false,
       symbol = "$",
       currency = "USD",
-      hasError,
+      hasError = false,
       ...props
     },
     forwardedRef
@@ -93,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
             ))}
         </Box>
         {match(helpText)
-          .with(P.not(P.nullish), () => (
+          .with(P.not(P.nullish), (helpText) => (
             <HelpText hasError={hasError}>{helpText}</HelpText>
           ))
           .otherwise(() => null)}

src/components/Input/Input.types.ts

@@ -1,15 +1,13 @@
-import * as React from "react";
+import { InputHTMLAttributes } from "react";
-import { Primitive } from "@radix-ui/react-primitive";
+import { NumericFormatProps } from "react-number-format";
 import { VariantProps } from "class-variance-authority";
+import * as Common from "../Common";
 import { inputStyles } from "./Input.styles";
-import { NumericFormatProps } from "react-number-format";
-import { InputHTMLAttributes } from "react";
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
-  VariantProps<typeof inputStyles> & {
+  VariantProps<typeof inputStyles> &
-    label: string;
+  Common.T.InputProps & {
     money?: boolean;
-    hideLabel?: boolean;
     type?: NumericFormatProps["type"];
     value?: HTMLInputElement["value"] | NumericFormatProps["value"];
     defaultValue?:
@@ -19,7 +17,6 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
     numericFormatOptions?: NumericFormatProps;
     symbol?: string;
     currency?: string;
-    helpText?: string;
   };
 
 export { InputProps };

src/components/Select/Select.styles.ts

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 
+// trigger
 const base = [
   "inline-flex",
   "items-center",

src/components/Select/Select.tsx

@@ -6,8 +6,7 @@ import * as T from "./Select.types";
 import * as styles from "./Select.styles";
 import { cx } from "../../utils";
 import { Box } from "../Box";
-import { Label } from "../Label";
+import { Label, HelpText } from "../Common";
-import { HelpText } from "../HelpText";
 
 const Select = React.forwardRef<T.SelectElement, T.SelectProps>(
   (

src/input.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 html {
     font-size: 14px;
 }