Add Combobox component

package.json

@@ -126,14 +126,15 @@
     "@radix-ui/react-checkbox": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-portal": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-select": "^1.2.0",
     "@radix-ui/react-toggle": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
+    "@radix-ui/react-popover": "^1.0.5",
+    "@vanilla-extract/css-utils": "^0.1.3",
     "clsx": "^1.1.1",
-    "downshift": "^6.1.7",
+    "downshift": "^7.6.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "react-inlinesvg": "^3.0.1"

src/components/Input/Input.css.ts → src/components/BaseInput/BaseInput.css.ts

@@ -1,28 +1,31 @@
 import { style } from "@vanilla-extract/css";
 import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+
 import { sprinkles, vars } from "~/theme";
 
-export const label = recipe({
+export const labelRecipe = recipe({
   base: [
     sprinkles({
       position: "relative",
       display: "flex",
-      flexWrap: "wrap",
       color: "textNeutralSubdued",
       borderRadius: 3,
-      paddingX: 4,
+      paddingY: 4,
+      cursor: "text",
+      borderWidth: 1,
+      borderStyle: "solid",
     }),
   ],
   variants: {
     size: {
       small: sprinkles({
-        paddingY: 5,
+        paddingX: 5,
       }),
       medium: sprinkles({
-        paddingY: 5,
+        paddingX: 5,
       }),
       large: sprinkles({
-        paddingY: 6,
+        paddingX: 6,
       }),
     },
     active: {
@@ -48,7 +51,6 @@ export const label = recipe({
       },
       style: sprinkles({
         borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "brandSubdued",
         backgroundColor: {
           default: "interactiveNeutralHighlightDefault",
@@ -67,8 +69,6 @@ export const label = recipe({
         backgroundColor: {
           default: "interactiveNeutralHighlightDefault",
         },
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: {
           default: "transparent",
           hover: "neutralHighlight",
@@ -83,8 +83,6 @@ export const label = recipe({
       },
       style: sprinkles({
         backgroundColor: "interactiveNeutralHighlightDefault",
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "transparent",
       }),
     },
@@ -101,8 +99,6 @@ export const label = recipe({
           focus: "interactiveNeutralHighlightDefault",
           hover: "interactiveNeutralHighlightHovering",
         },
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "transparent",
       }),
     },
@@ -113,8 +109,6 @@ export const label = recipe({
       style: sprinkles({
         color: "textNeutralDisabled",
         backgroundColor: "interactiveNeutralHighlightDefault",
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "neutralHighlight",
       }),
     },
@@ -128,12 +122,22 @@ export const label = recipe({
           default: "surfaceCriticalSubdued",
           hover: "surfaceCriticalSubdued",
         },
+        borderColor: "transparent",
+      }),
+    },
+    {
+      variants: {
+        error: true,
+        typed: true,
+      },
+      style: sprinkles({
+        borderColor: "transparent",
       }),
     },
   ],
 });
 
-export const span = recipe({
+export const spanRecipe = recipe({
   base: [
     style({
       transition: "transform 0.3s",
@@ -147,26 +151,23 @@ export const span = recipe({
   variants: {
     size: {
       small: sprinkles({
-        fontSize: "captionLarge",
-        lineHeight: "captionMedium",
+        typeSize: "bodySmall",
       }),
       medium: sprinkles({
-        fontSize: "bodyMedium",
-        lineHeight: "captionLarge",
+        typeSize: "bodyMedium",
       }),
       large: sprinkles({
-        fontSize: "bodyLarge",
-        lineHeight: "bodyLarge",
+        typeSize: "bodyLarge",
       }),
     },
     disabled: {
       true: sprinkles({ color: "textNeutralDisabled" }),
     },
     typed: {
       true: [
-        style({
-          transform: "translate(0, 0) scale(0.813)",
-        }),
+        {
+          transform: "translate(0, 0) scale(0.84)",
+        },
       ],
     },
     error: {
@@ -180,7 +181,7 @@ export const span = recipe({
   },
 });
 
-export const input = recipe({
+export const inputRecipe = recipe({
   base: [
     sprinkles({
       width: "100%",
@@ -238,5 +239,21 @@ export const input = recipe({
   },
 });
 
-export type LabelVariants = RecipeVariants<typeof label>;
-export type InputVariants = RecipeVariants<typeof input>;
+export const helperTextRecipe = recipe({
+  variants: {
+    size: {
+      small: sprinkles({
+        paddingX: 5,
+      }),
+      medium: sprinkles({
+        paddingX: 5,
+      }),
+      large: sprinkles({
+        paddingX: 6,
+      }),
+    },
+  },
+});
+
+export type LabelVariants = RecipeVariants<typeof labelRecipe>;
+export type InputVariants = RecipeVariants<typeof inputRecipe>;

src/components/BaseInput/index.ts

@@ -0,0 +1,4 @@
+/*
+  Do not expose this file, it's for internal purposes only.
+*/
+export * from "./BaseInput.css";

src/components/Combobox/Combobox.css.ts

@@ -0,0 +1,77 @@
+import { createVar, style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { calc } from "@vanilla-extract/css-utils";
+
+import { sprinkles, vars } from "~/theme";
+
+export const icon = style({
+  transition: "transform 300ms",
+  selectors: {
+    '&[aria-expanded="true"]': {
+      transform: "rotate(180deg)",
+    },
+  },
+});
+
+const listItemBorderRadius = createVar();
+const spaceBetweenListItemAndBorder = createVar();
+
+export const listWrapperRecipe = recipe({
+  base: [
+    {
+      borderRadius: listItemBorderRadius,
+    },
+  ],
+
+  variants: {
+    size: {
+      small: {
+        vars: {
+          [listItemBorderRadius]: vars.borderRadius[1],
+        },
+      },
+      medium: {
+        vars: {
+          [listItemBorderRadius]: vars.borderRadius[2],
+        },
+      },
+      large: {
+        vars: {
+          [listItemBorderRadius]: vars.borderRadius[2],
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export const list = style([
+  sprinkles({
+    position: "absolute",
+    backgroundColor: "surfaceNeutralPlain",
+    boxShadow: "overlay",
+    borderColor: "neutralHighlight",
+    width: "100%",
+    padding: 3,
+    left: 0,
+    zIndex: "3",
+  }),
+  {
+    borderRadius: calc.add(listItemBorderRadius, spaceBetweenListItemAndBorder),
+    vars: {
+      [spaceBetweenListItemAndBorder]: vars.space[3],
+    },
+  },
+]);
+
+export const listItem = style([
+  sprinkles({
+    padding: 5,
+  }),
+  {
+    borderRadius: listItemBorderRadius,
+  },
+]);