feat(styles): Add CVA utilities to styles

packages/styles/package.json

@@ -2,20 +2,42 @@
   "name": "@firebase-ui/styles",
   "version": "0.0.1",
   "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist.css",
     "src"
   ],
   "scripts": {
     "prepare": "pnpm run build",
-    "build": "npx -y @tailwindcss/cli -i ./src.css -o ./dist.css --minify",
+    "build": "tsup && pnpm run build:css",
+    "build:css": "npx -y @tailwindcss/cli -i ./src.css -o ./dist.css --minify",
     "build:local": "pnpm run build && pnpm pack",
-    "test": "echo \"No tests specified\" && exit 0",
-    "test:watch": "echo \"No tests specified\" && exit 0",
+    "lint": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "publish:tags": "sh -c 'TAG=\"${npm_package_name}@${npm_package_version}\"; git tag --list \"$TAG\" | grep . || git tag \"$TAG\"; git push origin \"$TAG\"'",
     "release": "pnpm run build && pnpm pack --pack-destination ../../releases/"
   },
   "devDependencies": {
-    "tailwindcss": "catalog:"
+    "prettier": "catalog:",
+    "rimraf": "catalog:",
+    "tailwindcss": "catalog:",
+    "tsup": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "dependencies": {
+    "cva": "1.0.0-beta.4"
   }
 }

packages/styles/src/index.test.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE/2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, it, expect } from "vitest";
+import { buttonVariant, type ButtonVariant } from "./index";
+
+describe("buttonVariant", () => {
+  it("should return base class when no variant is provided", () => {
+    const result = buttonVariant();
+    expect(result).toBe("fui-button");
+  });
+
+  it("should return base class with primary variant (default)", () => {
+    const result = buttonVariant({ variant: "primary" });
+    expect(result).toBe("fui-button");
+  });
+
+  it("should return base class with secondary variant", () => {
+    const result = buttonVariant({ variant: "secondary" });
+    expect(result).toBe("fui-button fui-button--secondary");
+  });
+
+  it("should handle empty variant object", () => {
+    const result = buttonVariant({});
+    expect(result).toBe("fui-button");
+  });
+
+  it("should handle undefined variant", () => {
+    const result = buttonVariant({ variant: undefined });
+    expect(result).toBe("fui-button");
+  });
+});
+
+describe("ButtonVariant type", () => {
+  it("should accept valid variant values", () => {
+    const primaryVariant: ButtonVariant = "primary";
+    const secondaryVariant: ButtonVariant = "secondary";
+
+    expect(primaryVariant).toBe("primary");
+    expect(secondaryVariant).toBe("secondary");
+  });
+
+  it("should work with buttonVariant function", () => {
+    const variants: ButtonVariant[] = ["primary", "secondary"];
+
+    variants.forEach((variant) => {
+      const result = buttonVariant({ variant });
+      expect(typeof result).toBe("string");
+      expect(result).toContain("fui-button");
+    });
+  });
+});

packages/styles/src/index.ts

@@ -0,0 +1,16 @@
+import { cva, type VariantProps } from "cva";
+
+export const buttonVariant = cva({
+  base: "fui-button",
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "fui-button--secondary",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+export type ButtonVariant = VariantProps<typeof buttonVariant>['variant'];

packages/styles/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

packages/styles/tsup.config.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig, type Options } from "tsup";
+
+const config: Options = {
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+  minify: true,
+};
+
+export default defineConfig(config);

packages/styles/vitest.config.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE/2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    // Use the same environment as the package
+    environment: "jsdom",
+    // Include TypeScript files
+    include: ["src/**/*.{test,spec}.{js,ts}"],
+    // Exclude build output and node_modules
+    exclude: ["node_modules/**/*", "dist/**/*"],
+  },
+});