feat(react): tooltip component

tsconfig.base.json

@@ -2,7 +2,7 @@
   "extends": "@vercel/style-guide/typescript",
   "compilerOptions": {
     "noEmit": true,
-    "target": "ES2015",
+    "target": "ES2017",
     "moduleResolution": "Bundler",
     "module": "ESNext"
   },

workspaces/react/.eslintignore

@@ -1,2 +1,3 @@
 tsup.config.ts
-dist
+dist
+index.d.ts

workspaces/react/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

workspaces/react/package.json

@@ -16,9 +16,9 @@
   },
   "devDependencies": {
     "@types/node": "^20.16.3",
-    "@types/react": "^18.3.7",
-    "tsup": "^8.2.4",
-    "typescript": "^5.5.4"
+    "@types/react": "^18.3.12",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "react": ">=17.0.2"
@@ -28,6 +28,14 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
     }
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.2",
+    "classnames": "^2.5.1"
   }
 }

workspaces/react/src/components/button/button.module.css

@@ -0,0 +1,33 @@
+.button {
+  border-radius: var(--flows-borderRadius-small);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease-in-out,
+    border-color 120ms ease-in-out;
+  padding: 4px 8px;
+  font-family: var(--flows-font-family);
+  font-size: var(--flows-base-font-size);
+  line-height: var(--flows-base-line-height);
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.primary {
+  background-color: var(--flows-bg-primary);
+  border: 1px solid var(--flows-bg-primary);
+  color: var(--flows-fg-onPrimary);
+}
+.primary:hover {
+  background-color: var(--flows-bg-primary-hover);
+  border: 1px solid var(--flows-bg-primary-hover);
+}
+
+.secondary {
+  background-color: var(--flows-bg-subtle);
+  border: var(--flows-border);
+  color: var(--flows-fg-default);
+}
+.secondary:hover {
+  background-color: var(--flows-bg-hover);
+}

workspaces/react/src/components/button/button.tsx

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import { type FC, type ReactNode } from "react";
+import classes from "./button.module.css";
+
+interface Props {
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+  variant: "primary" | "secondary";
+}
+
+export const Button: FC<Props> = ({ className, variant, ...props }) => {
+  return (
+    <button
+      type="button"
+      className={classNames(classes.button, classes[variant], className)}
+      {...props}
+    />
+  );
+};

workspaces/react/src/components/icon-button/icon-button.module.css

@@ -0,0 +1,17 @@
+.button {
+  border-radius: var(--flows-borderRadius-small);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease-in-out,
+    border-color 120ms ease-in-out;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+}
+.button:hover {
+  background-color: var(--flows-bg-hover);
+}

workspaces/react/src/components/icon-button/icon-button.tsx

@@ -0,0 +1,13 @@
+import { type FC, type ReactNode } from "react";
+import classNames from "classnames";
+import classes from "./icon-button.module.css";
+
+interface Props {
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+}
+
+export const IconButton: FC<Props> = ({ className, ...props }) => {
+  return <button type="button" className={classNames(classes.button, className)} {...props} />;
+};

workspaces/react/src/components/text/text.module.css

@@ -0,0 +1,15 @@
+.text {
+  font-family: var(--flows-font-family);
+  margin: 0;
+}
+
+.body {
+  font-size: var(--flows-base-font-size);
+  line-height: var(--flows-base-line-height);
+}
+
+.title {
+  font-size: var(--flows-title-font-size);
+  line-height: var(--flows-title-line-height);
+  font-weight: var(--flows-title-font-weight);
+}

workspaces/react/src/components/text/text.tsx

@@ -0,0 +1,13 @@
+import classNames from "classnames";
+import { type FC, type ReactNode } from "react";
+import classes from "./Text.module.css";
+
+interface Props {
+  className?: string;
+  children?: ReactNode;
+  variant: "title" | "body";
+}
+
+export const Text: FC<Props> = ({ className, variant, ...props }) => {
+  return <p className={classNames(classes.text, classes[variant], className)} {...props} />;
+};